Calendar/CalendarPopup/CalendarView 日历 #

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { showToast, showCalendar, type SelectorModelValue } from '@/index'
import { formatter, parser, template } from '../Calendar/utils'

const simpleValue = ref([new Date()])
const rangeValue = ref([])
const formatValue = ref(dayjs().format(template))

const minDate = dayjs().startOf('day').subtract(1, 'month').toDate()
const maxDate = dayjs().startOf('day').add(1, 'month').toDate()

function onCallApi() {
  showCalendar({
    mode: 'range',
    showClose: true,
    success: res => {
      console.log('success', res)
      if (res.cancel) {
        showToast('取消了')
      } else {
        showToast(`选择了 ${res.detail.label}`)
      }
    }
  })
}

function onChange(res: SelectorModelValue) {
  console.log('change', res)

  showToast('change: ' + (res as any)[0])
}
</script>

<script lang="ts">
export default {
  name: 'ExpCalendar'
}
</script>

<template>
  <ta-group title="initialMode=simple">
    <ta-cell label="默认">
      <ta-calendar v-model="simpleValue" />
    </ta-cell>
    <ta-cell label="showConfirm=true">
      <ta-calendar showConfirm />
    </ta-cell>
    <ta-cell label="showClose=true">
      <ta-calendar showClose />
    </ta-cell>
    <ta-cell label="firstDayOfWeek=1">
      <ta-calendar :firstDayOfWeek="1" />
    </ta-cell>
    <ta-cell label="minDate/maxDate +-1month">
      <ta-calendar :minDate="minDate" :maxDate="maxDate" />
    </ta-cell>
    <ta-cell label="formatter/parser">
      <ta-calendar
        :formatter="formatter"
        :parser="parser"
        v-model="formatValue"
        @change="onChange"
      />
    </ta-cell>
    <ta-cell label="禁用">
      <ta-calendar v-model="simpleValue" disabled />
    </ta-cell>
  </ta-group>
  <ta-group title="initialMode=range">
    <ta-cell label="默认">
      <ta-calendar initialMode="range" v-model="rangeValue" />
    </ta-cell>
    <ta-cell label="allowSameDay">
      <ta-calendar initialMode="range" allowSameDay />
    </ta-cell>
    <ta-cell label="maxRange=5">
      <ta-calendar initialMode="range" :maxRange="5" />
    </ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="change">
      <ta-calendar @change="onChange" />
    </ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showCalendar" isLink @click="onCallApi()" />
  </ta-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import {
  showToast,
  type CalendarOnConfirm,
  type PopupOnVisibleStateChange,
  type PopupOnCancel,
  type SelectorModelValue
} from '@/index'
import { formatter, parser, template } from '../Calendar/utils'

const popupValue = ref(dayjs().format(template))
const popupRangeValue = ref([])

const popupVisible = ref(false)
const popupRangeVisible = ref(false)
const popupShowConfirm = ref(false)
const popupShowClose = ref(false)
const confirmEvent = ref(false)
const visibleEvent = ref(false)

const title = 'CalendarPopup'

const onVisibleStateChange: PopupOnVisibleStateChange = res => {
  if (visibleEvent.value) {
    console.log('change', res)
    showToast(`${res.state} 事件触发`)
  }

  if (res.state === 'hidden') {
    visibleEvent.value = false
    confirmEvent.value = false
    popupShowConfirm.value = false
    popupShowClose.value = false
  }
}

const onCancel: PopupOnCancel = res => {
  console.log('cancel', res)
  if (confirmEvent.value) {
    showToast(`触发了取消事件`)
  }
}

const onConfirm: CalendarOnConfirm = res => {
  console.log('confirm', res)
  if (confirmEvent.value) {
    showToast(`触发了确定事件`)
  }
}

function onChange(res: SelectorModelValue) {
  console.log('change', res)

  // showToast(`change: ${res}`)
}

const onRangeConfirm: CalendarOnConfirm = res => {
  console.log('confirm', res)
}

function addOneDay() {
  popupValue.value = dayjs(popupValue.value, template, true).add(1, 'day').format(template)
}
</script>

<script lang="ts">
export default {
  name: 'ExpCalendarPopup'
}
</script>

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Calendar" />
  <ta-group title="基础用法">
    <ta-cell
      label="默认"
      @click="
        () => {
          popupVisible = true
        }
      "
      >{{ popupValue }}</ta-cell
    >
    <ta-cell label="+1day" isLink @click="addOneDay">click</ta-cell>
    <ta-cell
      label="showConfirm=true"
      isLink
      @click="
        () => {
          popupShowConfirm = true
          popupVisible = true
        }
      "
    />
    <ta-cell label="initialMode=range" isLink @click="popupRangeVisible = true" />
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell
      label="confirm/cancel"
      isLink
      @click="
        () => {
          confirmEvent = true
          popupVisible = true
          popupShowClose = true
        }
      "
    />
    <ta-cell
      label="visible-state-change"
      isLink
      @click="
        () => {
          visibleEvent = true
          popupVisible = true
        }
      "
    />
  </ta-group>
  <ta-calendar-popup
    v-model:visible="popupVisible"
    :title="title"
    :showConfirm="popupShowConfirm"
    :showClose="popupShowClose"
    v-model="popupValue"
    :formatter="formatter"
    :parser="parser"
    @confirm="onConfirm"
    @cancel="onCancel"
    @change="onChange"
    @visibleStateChange="onVisibleStateChange"
  />
  <ta-calendar-popup
    v-model:visible="popupRangeVisible"
    :title="title"
    initialMode="range"
    v-model="popupRangeValue"
    @confirm="onRangeConfirm"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type CalendarOnSelect, showToast } from '@/index'
import { formatter, parser } from '../Calendar/utils'

const viewValue = ref('')
const viewRangeValue = ref('')

const onSelect: CalendarOnSelect = res => {
  console.log('select', res)

  showToast(`选择：${res.label}`)
}
</script>

<script lang="ts">
export default {
  name: 'ExpCalendarView'
}
</script>

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Calendar" />
  <ta-group title="initialMode=single">
    <ta-cell label="v-model"> {{ viewValue }} </ta-cell>
    <ta-calendar-view v-model="viewValue" :formatter="formatter" :parser="parser" />
  </ta-group>
  <ta-group title="initialMode=range">
    <ta-cell label="v-model"> {{ viewRangeValue }} </ta-cell>
    <ta-calendar-view
      initialMode="range"
      v-model="viewRangeValue"
      :formatter="formatter"
      :parser="parser"
    />
  </ta-group>
  <ta-group title="select 事件">
    <ta-calendar-view @select="onSelect" />
  </ta-group>
</template>