@antsoo-lib/components 0.1.2 → 0.1.4

package/src/calendar/Header.tsx

@@ -0,0 +1,206 @@
+import type { Ref } from 'vue'
+import { defineComponent, ref } from 'vue'
+
+import { FormItemInputContext } from '../form/FormItemContext'
+import { Button, Group } from '../radio'
+import Select from '../select'
+import type { GenerateConfig } from '../vc-picker/generate'
+import type { Locale } from '../vc-picker/interface'
+import type { CalendarMode, SelectInfo } from './generateCalendar'
+
+const YearSelectOffset = 10
+const YearSelectTotal = 20
+
+interface SharedProps<DateType> {
+  prefixCls: string
+  value: DateType
+  validRange?: [DateType, DateType]
+  generateConfig: GenerateConfig<DateType>
+  locale: Locale
+  fullscreen: boolean
+  divRef: Ref<HTMLDivElement>
+  onChange: (year: DateType) => void
+}
+
+function YearSelect<DateType>(props: SharedProps<DateType>) {
+  const { fullscreen, validRange, generateConfig, locale, prefixCls, value, onChange, divRef } =
+    props
+
+  const year = generateConfig.getYear(value || generateConfig.getNow())
+
+  let start = year - YearSelectOffset
+  let end = start + YearSelectTotal
+
+  if (validRange) {
+    start = generateConfig.getYear(validRange[0])
+    end = generateConfig.getYear(validRange[1]) + 1
+  }
+
+  const suffix = locale && locale.year === '年' ? '年' : ''
+  const options: { label: string; value: number }[] = []
+  for (let index = start; index < end; index++) {
+    options.push({ label: `${index}${suffix}`, value: index })
+  }
+  return (
+    <Select
+      size={fullscreen ? undefined : 'small'}
+      options={options}
+      value={year}
+      class={`${prefixCls}-year-select`}
+      onChange={(numYear: number) => {
+        let newDate = generateConfig.setYear(value, numYear)
+
+        if (validRange) {
+          const [startDate, endDate] = validRange
+          const newYear = generateConfig.getYear(newDate)
+          const newMonth = generateConfig.getMonth(newDate)
+          if (
+            newYear === generateConfig.getYear(endDate) &&
+            newMonth > generateConfig.getMonth(endDate)
+          ) {
+            newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate))
+          }
+          if (
+            newYear === generateConfig.getYear(startDate) &&
+            newMonth < generateConfig.getMonth(startDate)
+          ) {
+            newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate))
+          }
+        }
+
+        onChange(newDate)
+      }}
+      getPopupContainer={() => divRef!.value!}
+    />
+  )
+}
+YearSelect.inheritAttrs = false
+
+function MonthSelect<DateType>(props: SharedProps<DateType>) {
+  const { prefixCls, fullscreen, validRange, value, generateConfig, locale, onChange, divRef } =
+    props
+  const month = generateConfig.getMonth(value || generateConfig.getNow())
+
+  let start = 0
+  let end = 11
+
+  if (validRange) {
+    const [rangeStart, rangeEnd] = validRange
+    const currentYear = generateConfig.getYear(value)
+    if (generateConfig.getYear(rangeEnd) === currentYear) {
+      end = generateConfig.getMonth(rangeEnd)
+    }
+    if (generateConfig.getYear(rangeStart) === currentYear) {
+      start = generateConfig.getMonth(rangeStart)
+    }
+  }
+
+  const months = locale.shortMonths || generateConfig.locale.getShortMonths!(locale.locale)
+  const options: { label: string; value: number }[] = []
+  for (let index = start; index <= end; index += 1) {
+    options.push({
+      label: months[index],
+      value: index,
+    })
+  }
+
+  return (
+    <Select
+      size={fullscreen ? undefined : 'small'}
+      class={`${prefixCls}-month-select`}
+      value={month}
+      options={options}
+      onChange={(newMonth: number) => {
+        onChange(generateConfig.setMonth(value, newMonth))
+      }}
+      getPopupContainer={() => divRef!.value!}
+    />
+  )
+}
+
+MonthSelect.inheritAttrs = false
+
+interface ModeSwitchProps<DateType> extends Omit<SharedProps<DateType>, 'onChange'> {
+  mode: CalendarMode
+  onModeChange: (type: CalendarMode) => void
+}
+
+function ModeSwitch<DateType>(props: ModeSwitchProps<DateType>) {
+  const { prefixCls, locale, mode, fullscreen, onModeChange } = props
+  return (
+    <Group
+      onChange={({ target: { value } }) => {
+        onModeChange(value)
+      }}
+      value={mode}
+      size={fullscreen ? undefined : 'small'}
+      class={`${prefixCls}-mode-switch`}
+    >
+      <Button value="month">{locale.month}</Button>
+      <Button value="year">{locale.year}</Button>
+    </Group>
+  )
+}
+ModeSwitch.inheritAttrs = false
+
+export interface CalendarHeaderProps<DateType> {
+  prefixCls: string
+  value: DateType
+  validRange?: [DateType, DateType]
+  generateConfig: GenerateConfig<DateType>
+  locale: Locale
+  mode: CalendarMode
+  fullscreen: boolean
+  onChange: (date: DateType, source: SelectInfo['source']) => void
+  onModeChange: (mode: CalendarMode) => void
+}
+
+export default defineComponent<CalendarHeaderProps<any>>({
+  name: 'CalendarHeader',
+  inheritAttrs: false,
+  props: [
+    'mode',
+    'prefixCls',
+    'value',
+    'validRange',
+    'generateConfig',
+    'locale',
+    'mode',
+    'fullscreen',
+  ] as any,
+  setup(_props, { attrs }) {
+    const divRef = ref<HTMLDivElement>(null)
+    const formItemInputContext = FormItemInputContext.useInject()
+    FormItemInputContext.useProvide(formItemInputContext, { isFormItemInput: false })
+
+    return () => {
+      const props = { ..._props, ...attrs }
+      const { prefixCls, fullscreen, mode, onChange, onModeChange } = props
+      const sharedProps = {
+        ...props,
+        fullscreen,
+        divRef,
+      } as any
+
+      return (
+        <div class={`${prefixCls}-header`} ref={divRef}>
+          <YearSelect
+            {...sharedProps}
+            onChange={(v) => {
+              onChange(v, 'year')
+            }}
+          />
+          {mode === 'month' && (
+            <MonthSelect
+              {...sharedProps}
+              onChange={(v) => {
+                onChange(v, 'month')
+              }}
+            />
+          )}
+          <ModeSwitch {...sharedProps} onModeChange={onModeChange} />
+        </div>
+      )
+    }
+  },
+})

package/src/calendar/date-fns.tsx

@@ -0,0 +1,9 @@
+import { withInstall } from '../_util/type'
+import generateConfig from '../vc-picker/generate/dateFns'
+import type { CalendarProps } from './generateCalendar'
+import generateCalendar from './generateCalendar'
+
+const Calendar = generateCalendar<Date>(generateConfig)
+
+export type { CalendarProps }
+export default withInstall(Calendar)

package/src/calendar/dayjs.tsx

@@ -0,0 +1,9 @@
+import { withInstall } from '../_util/type'
+import generateConfig from '../vc-picker/generate/dayjs'
+import type { CalendarProps } from './generateCalendar'
+import generateCalendar from './generateCalendar'
+
+const Calendar = generateCalendar(generateConfig)
+
+export type { CalendarProps }
+export default withInstall(Calendar)

package/src/calendar/generateCalendar.tsx

@@ -0,0 +1,371 @@
+import type { App, PropType } from 'vue'
+import { computed, defineComponent, toRef } from 'vue'
+
+import classNames from '../_util/classNames'
+import useMergedState from '../_util/hooks/useMergedState'
+import type { CustomSlotsType, VueNode } from '../_util/type'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'
+import { PickerPanel } from '../vc-picker'
+import type {
+  PickerPanelBaseProps as RCPickerPanelBaseProps,
+  PickerPanelDateProps as RCPickerPanelDateProps,
+  PickerPanelTimeProps as RCPickerPanelTimeProps,
+} from '../vc-picker/PickerPanel'
+import type { GenerateConfig } from '../vc-picker/generate'
+import type { Locale } from '../vc-picker/interface'
+import CalendarHeader from './Header'
+import enUS from './locale/en_US'
+// CSSINJS
+import useStyle from './style'
+
+type InjectDefaultProps<Props> = Omit<
+  Props,
+  'locale' | 'generateConfig' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'
+> & {
+  locale?: typeof enUS
+  size?: 'large' | 'default' | 'small'
+}
+
+export interface SelectInfo {
+  source: 'year' | 'month' | 'date' | 'customize'
+}
+
+// Picker Props
+export type PickerPanelBaseProps<DateType> = InjectDefaultProps<RCPickerPanelBaseProps<DateType>>
+export type PickerPanelDateProps<DateType> = InjectDefaultProps<RCPickerPanelDateProps<DateType>>
+export type PickerPanelTimeProps<DateType> = InjectDefaultProps<RCPickerPanelTimeProps<DateType>>
+
+export type PickerProps<DateType> =
+  | PickerPanelBaseProps<DateType>
+  | PickerPanelDateProps<DateType>
+  | PickerPanelTimeProps<DateType>
+
+export type CalendarMode = 'year' | 'month'
+export type HeaderRender<DateType> = (config: {
+  value: DateType
+  type: CalendarMode
+  onChange: (date: DateType) => void
+  onTypeChange: (type: CalendarMode) => void
+}) => VueNode
+
+type CustomRenderType<DateType> = (config: { current: DateType }) => VueNode
+
+export interface CalendarProps<DateType> {
+  prefixCls?: string
+  locale?: typeof enUS
+  validRange?: [DateType, DateType]
+  disabledDate?: (date: DateType) => boolean
+  dateFullCellRender?: CustomRenderType<DateType>
+  dateCellRender?: CustomRenderType<DateType>
+  monthFullCellRender?: CustomRenderType<DateType>
+  monthCellRender?: CustomRenderType<DateType>
+  headerRender?: HeaderRender<DateType>
+  value?: DateType | string
+  defaultValue?: DateType | string
+  mode?: CalendarMode
+  fullscreen?: boolean
+  onChange?: (date: DateType | string) => void
+  'onUpdate:value'?: (date: DateType | string) => void
+  onPanelChange?: (date: DateType | string, mode: CalendarMode) => void
+  onSelect?: (date: DateType, selectInfo: SelectInfo) => void
+  valueFormat?: string
+}
+
+function generateCalendar<
+  DateType,
+  Props extends CalendarProps<DateType> = CalendarProps<DateType>,
+>(generateConfig: GenerateConfig<DateType>) {
+  function isSameYear(date1: DateType, date2: DateType) {
+    return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2)
+  }
+
+  function isSameMonth(date1: DateType, date2: DateType) {
+    return (
+      isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2)
+    )
+  }
+
+  function isSameDate(date1: DateType, date2: DateType) {
+    return (
+      isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2)
+    )
+  }
+
+  const Calendar = defineComponent<Props>({
+    name: 'ACalendar',
+    inheritAttrs: false,
+    props: {
+      prefixCls: String,
+      locale: { type: Object as PropType<Props['locale']>, default: undefined as Props['locale'] },
+      validRange: { type: Array as PropType<DateType[]>, default: undefined },
+      disabledDate: { type: Function as PropType<Props['disabledDate']>, default: undefined },
+      dateFullCellRender: {
+        type: Function as PropType<Props['dateFullCellRender']>,
+        default: undefined,
+      },
+      dateCellRender: { type: Function as PropType<Props['dateCellRender']>, default: undefined },
+      monthFullCellRender: {
+        type: Function as PropType<Props['monthFullCellRender']>,
+        default: undefined,
+      },
+      monthCellRender: { type: Function as PropType<Props['monthCellRender']>, default: undefined },
+      headerRender: { type: Function as PropType<Props['headerRender']>, default: undefined },
+      value: {
+        type: [Object, String] as PropType<Props['value']>,
+        default: undefined as Props['value'],
+      },
+      defaultValue: {
+        type: [Object, String] as PropType<Props['defaultValue']>,
+        default: undefined as Props['defaultValue'],
+      },
+      mode: { type: String as PropType<Props['mode']>, default: undefined },
+      fullscreen: { type: Boolean as PropType<Props['fullscreen']>, default: undefined },
+      onChange: { type: Function as PropType<Props['onChange']>, default: undefined },
+      'onUpdate:value': { type: Function as PropType<Props['onUpdate:value']>, default: undefined },
+      onPanelChange: { type: Function as PropType<Props['onPanelChange']>, default: undefined },
+      onSelect: { type: Function as PropType<Props['onSelect']>, default: undefined },
+      valueFormat: { type: String, default: undefined },
+    } as any,
+    slots: Object as CustomSlotsType<{
+      dateFullCellRender?: { current: DateType }
+      dateCellRender?: { current: DateType }
+      monthFullCellRender?: { current: DateType }
+      monthCellRender?: { current: DateType }
+      headerRender?: {
+        value: DateType
+        type: CalendarMode
+        onChange: (date: DateType) => void
+        onTypeChange: (type: CalendarMode) => void
+      }
+      default: any
+    }>,
+    setup(p, { emit, slots, attrs }) {
+      const props = p as unknown as Props
+      const { prefixCls, direction } = useConfigInject('picker', props)
+
+      // style
+      const [wrapSSR, hashId] = useStyle(prefixCls)
+
+      const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`)
+      const maybeToString = (date: DateType) => {
+        return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date
+      }
+      const value = computed(() => {
+        if (props.value) {
+          return props.valueFormat
+            ? (generateConfig.toDate(props.value, props.valueFormat) as DateType)
+            : (props.value as DateType)
+        }
+        return (props.value === '' ? undefined : props.value) as DateType
+      })
+      const defaultValue = computed(() => {
+        if (props.defaultValue) {
+          return props.valueFormat
+            ? (generateConfig.toDate(props.defaultValue, props.valueFormat) as DateType)
+            : (props.defaultValue as DateType)
+        }
+        return (props.defaultValue === '' ? undefined : props.defaultValue) as DateType
+      })
+
+      // Value
+      const [mergedValue, setMergedValue] = useMergedState(
+        () => value.value || generateConfig.getNow(),
+        {
+          defaultValue: defaultValue.value,
+          value,
+        },
+      )
+
+      // Mode
+      const [mergedMode, setMergedMode] = useMergedState('month', {
+        value: toRef(props, 'mode'),
+      })
+
+      const panelMode = computed(() => (mergedMode.value === 'year' ? 'month' : 'date'))
+
+      const mergedDisabledDate = computed(() => {
+        return (date: DateType) => {
+          const notInRange = props.validRange
+            ? generateConfig.isAfter(props.validRange[0], date) ||
+              generateConfig.isAfter(date, props.validRange[1])
+            : false
+          return notInRange || !!props.disabledDate?.(date)
+        }
+      })
+
+      // ====================== Events ======================
+      const triggerPanelChange = (date: DateType, newMode: CalendarMode) => {
+        emit('panelChange', maybeToString(date), newMode)
+      }
+
+      const triggerChange = (date: DateType) => {
+        setMergedValue(date)
+
+        if (!isSameDate(date, mergedValue.value)) {
+          // Trigger when month panel switch month
+          if (
+            (panelMode.value === 'date' && !isSameMonth(date, mergedValue.value)) ||
+            (panelMode.value === 'month' && !isSameYear(date, mergedValue.value))
+          ) {
+            triggerPanelChange(date, mergedMode.value)
+          }
+          const val = maybeToString(date)
+          emit('update:value', val)
+          emit('change', val)
+        }
+      }
+
+      const triggerModeChange = (newMode: CalendarMode) => {
+        setMergedMode(newMode)
+        triggerPanelChange(mergedValue.value, newMode)
+      }
+
+      const onInternalSelect = (date: DateType, source: SelectInfo['source']) => {
+        triggerChange(date)
+        emit('select', maybeToString(date), { source })
+      }
+      // ====================== Locale ======================
+      const defaultLocale = computed(() => {
+        const { locale } = props
+        const result = {
+          ...enUS,
+          ...locale,
+        }
+        result.lang = {
+          ...result.lang,
+          ...(locale || {}).lang,
+        }
+        return result
+      })
+
+      const [mergedLocale] = useLocaleReceiver('Calendar', defaultLocale) as [typeof defaultLocale]
+
+      return () => {
+        const today = generateConfig.getNow()
+        const {
+          dateFullCellRender = slots?.dateFullCellRender,
+          dateCellRender = slots?.dateCellRender,
+          monthFullCellRender = slots?.monthFullCellRender,
+          monthCellRender = slots?.monthCellRender,
+          headerRender = slots?.headerRender,
+          fullscreen = true,
+          validRange,
+        } = props
+        // ====================== Render ======================
+        const dateRender = ({ current: date }) => {
+          if (dateFullCellRender) {
+            return dateFullCellRender({ current: date })
+          }
+          return (
+            <div
+              class={classNames(
+                `${prefixCls.value}-cell-inner`,
+                `${calendarPrefixCls.value}-date`,
+                {
+                  [`${calendarPrefixCls.value}-date-today`]: isSameDate(today, date),
+                },
+              )}
+            >
+              <div class={`${calendarPrefixCls.value}-date-value`}>
+                {String(generateConfig.getDate(date)).padStart(2, '0')}
+              </div>
+              <div class={`${calendarPrefixCls.value}-date-content`}>
+                {dateCellRender && dateCellRender({ current: date })}
+              </div>
+            </div>
+          )
+        }
+
+        const monthRender = ({ current: date }, locale: Locale) => {
+          if (monthFullCellRender) {
+            return monthFullCellRender({ current: date })
+          }
+
+          const months = locale.shortMonths || generateConfig.locale.getShortMonths!(locale.locale)
+
+          return (
+            <div
+              class={classNames(
+                `${prefixCls.value}-cell-inner`,
+                `${calendarPrefixCls.value}-date`,
+                {
+                  [`${calendarPrefixCls.value}-date-today`]: isSameMonth(today, date),
+                },
+              )}
+            >
+              <div class={`${calendarPrefixCls.value}-date-value`}>
+                {months[generateConfig.getMonth(date)]}
+              </div>
+              <div class={`${calendarPrefixCls.value}-date-content`}>
+                {monthCellRender && monthCellRender({ current: date })}
+              </div>
+            </div>
+          )
+        }
+        return wrapSSR(
+          <div
+            {...attrs}
+            class={classNames(
+              calendarPrefixCls.value,
+              {
+                [`${calendarPrefixCls.value}-full`]: fullscreen,
+                [`${calendarPrefixCls.value}-mini`]: !fullscreen,
+                [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl',
+              },
+              attrs.class,
+              hashId.value,
+            )}
+          >
+            {headerRender ? (
+              headerRender({
+                value: mergedValue.value,
+                type: mergedMode.value,
+                onChange: (nextDate) => {
+                  onInternalSelect(nextDate, 'customize')
+                },
+                onTypeChange: triggerModeChange,
+              })
+            ) : (
+              <CalendarHeader
+                prefixCls={calendarPrefixCls.value}
+                value={mergedValue.value}
+                generateConfig={generateConfig}
+                mode={mergedMode.value}
+                fullscreen={fullscreen}
+                locale={mergedLocale.value.lang}
+                validRange={validRange}
+                onChange={onInternalSelect}
+                onModeChange={triggerModeChange}
+              />
+            )}
+            <PickerPanel
+              value={mergedValue.value}
+              prefixCls={prefixCls.value}
+              locale={mergedLocale.value.lang}
+              generateConfig={generateConfig}
+              dateRender={dateRender}
+              monthCellRender={(obj) => monthRender(obj, mergedLocale.value.lang)}
+              onSelect={(nextDate) => {
+                onInternalSelect(nextDate, panelMode.value)
+              }}
+              mode={panelMode.value}
+              picker={panelMode.value}
+              disabledDate={mergedDisabledDate.value}
+              hideHeader
+            />
+          </div>,
+        )
+      }
+    },
+  })
+
+  Calendar.install = function (app: App) {
+    app.component(Calendar.name, Calendar)
+    return app
+  }
+
+  return Calendar
+}
+
+export default generateCalendar

package/src/calendar/index.en-US.md

@@ -0,0 +1,68 @@
+---
+category: Components
+type: Data Display
+title: Calendar
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original
+---
+
+Container for displaying data in calendar form.
+
+## When To Use
+
+When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
+
+## API
+
+**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `dayjs` correctly.
+
+```jsx
+// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
+// import dayjs from 'dayjs';
+// import 'dayjs/locale/zh-cn';
+// dayjs.locale('zh-cn');
+
+<a-calendar v-model:value @panelChange="onPanelChange" @select="onSelect"></a-calendar>
+```
+
+customize the progress dot by setting a scoped slot
+
+| Property            | Description                                                                                                         | Type                                                                                 | Default                                                                                                        | Version |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------- |
+| dateCellRender      | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell  | v-slot:dateCellRender="{current: dayjs}"                                             | -                                                                                                              |         |
+| dateFullCellRender  | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell        | v-slot:dateFullCellRender="{current: dayjs}"                                         | -                                                                                                              |         |
+| disabledDate        | Function that specifies the dates that cannot be selected                                                           | (currentDate: dayjs) => boolean                                                      | -                                                                                                              |         |
+| fullscreen          | Whether to display in full-screen                                                                                   | boolean                                                                              | `true`                                                                                                         |         |
+| headerRender        | render custom header in panel                                                                                       | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | -                                                                                                              | 1.5.0   |
+| locale              | The calendar's locale                                                                                               | object                                                                               | [default](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) |         |
+| mode                | The display mode of the calendar                                                                                    | `month` \| `year`                                                                    | `month`                                                                                                        |         |
+| monthCellRender     | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:monthCellRender="{current: dayjs}"                                            | -                                                                                                              |         |
+| monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell       | v-slot:monthFullCellRender="{current: dayjs}"                                        | -                                                                                                              |         |
+| validRange          | to set valid range                                                                                                  | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)]                        | -                                                                                                              |         |
+| value(v-model)      | The current selected date                                                                                           | [dayjs](https://day.js.org/)                                                         | current date                                                                                                   |         |
+| valueFormat         | optional, format of binding value. If not specified, the binding value will be a Date object                        | string, [date formats](https://day.js.org/docs/en/display/format)                    | -                                                                                                              |         |
+
+### events
+
+| Events Name | Description                                               | Arguments                                                                                   | Version |     |
+| ----------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------- | --- |
+| change      | Callback for when value change                            | function(date: dayjs \| string）                                                            | -       |     |
+| panelChange | Callback for when panel changes                           | function(date: dayjs \| string, mode: string)                                               | -       |     |
+| select      | Callback for when a date is selected, include source info | function(date: dayjs \| string,info:{ source: 'year' \| 'month' \| 'date' \| 'customize' }) | -       |     |
+
+### How to get date from panel click?
+
+`select` event provide `info.source` to help on this:
+
+```html
+<script lang="ts" setup>
+  const onSelect = (date, { source }) => {
+    if (source === 'date') {
+      console.log('Panel Select:', source)
+    }
+  }
+</script>
+<template>
+  <a-calendar @select="onSelect" />
+</template>
+```

package/src/calendar/index.tsx

@@ -0,0 +1,5 @@
+import Calendar from './dayjs'
+
+export * from './dayjs'
+
+export default Calendar