feat: calendar select support info.source param (#6697)

* docs: add ant-design-vue nuxt module

* feat: calendar select support info.source param

Author: aibayanyu20

components/calendar/Header.tsx

@@ -1,6 +1,6 @@
 import Select from '../select';
 import { Group, Button } from '../radio';
-import type { CalendarMode } from './generateCalendar';
+import type { CalendarMode, SelectInfo } from './generateCalendar';
 import type { Ref } from 'vue';
 import { defineComponent, ref } from 'vue';
 import type { Locale } from '../vc-picker/interface';
@@ -150,7 +150,7 @@ export interface CalendarHeaderProps<DateType> {
   locale: Locale;
   mode: CalendarMode;
   fullscreen: boolean;
-  onChange: (date: DateType) => void;
+  onChange: (date: DateType, source: SelectInfo['source']) => void;
   onModeChange: (mode: CalendarMode) => void;
 }
 
@@ -177,15 +177,26 @@ export default defineComponent<CalendarHeaderProps<any>>({
       const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
       const sharedProps = {
         ...props,
-        onChange,
         fullscreen,
         divRef,
       } as any;
 
       return (
         <div class={`${prefixCls}-header`} ref={divRef}>
-          <YearSelect {...sharedProps} />
-          {mode === 'month' && <MonthSelect {...sharedProps} />}
+          <YearSelect
+            {...sharedProps}
+            onChange={v => {
+              onChange(v, 'year');
+            }}
+          />
+          {mode === 'month' && (
+            <MonthSelect
+              {...sharedProps}
+              onChange={v => {
+                onChange(v, 'month');
+              }}
+            />
+          )}
           <ModeSwitch {...sharedProps} onModeChange={onModeChange} />
         </div>
       );

components/calendar/generateCalendar.tsx

@@ -27,6 +27,10 @@ type InjectDefaultProps<Props> = Omit<
   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>>;
@@ -64,7 +68,7 @@ export interface CalendarProps<DateType> {
   onChange?: (date: DateType | string) => void;
   'onUpdate:value'?: (date: DateType | string) => void;
   onPanelChange?: (date: DateType | string, mode: CalendarMode) => void;
-  onSelect?: (date: DateType | string) => void;
+  onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
   valueFormat?: string;
 }
 
@@ -217,9 +221,9 @@ function generateCalendar<
         triggerPanelChange(mergedValue.value, newMode);
       };
 
-      const onInternalSelect = (date: DateType) => {
+      const onInternalSelect = (date: DateType, source: SelectInfo['source']) => {
         triggerChange(date);
-        emit('select', maybeToString(date));
+        emit('select', maybeToString(date), { source });
       };
       // ====================== Locale ======================
       const defaultLocale = computed(() => {
@@ -317,7 +321,9 @@ function generateCalendar<
               headerRender({
                 value: mergedValue.value,
                 type: mergedMode.value,
-                onChange: onInternalSelect,
+                onChange: nextDate => {
+                  onInternalSelect(nextDate, 'customize');
+                },
                 onTypeChange: triggerModeChange,
               })
             ) : (
@@ -340,7 +346,9 @@ function generateCalendar<
               generateConfig={generateConfig}
               dateRender={dateRender}
               monthCellRender={obj => monthRender(obj, mergedLocale.value.lang)}
-              onSelect={onInternalSelect}
+              onSelect={nextDate => {
+                onInternalSelect(nextDate, panelMode.value);
+              }}
               mode={panelMode.value}
               picker={panelMode.value}
               disabledDate={mergedDisabledDate.value}

components/calendar/index.en-US.md

@@ -46,4 +46,21 @@ customize the progress dot by setting a scoped slot
 | --- | --- | --- | --- | --- |
 | 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 | function(date: dayjs \| 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>
+```

components/calendar/index.zh-CN.md

@@ -42,7 +42,24 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 ### 事件
 
 | 事件名称 | 说明 | 回调参数 |  |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
 | panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 |
-| select | 点击选择日期回调 | function(date: dayjs \| string） | 无 |
+| select | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - |  |
+
+### 如何仅获取来自面板点击的日期？
+
+`select` 事件提供额外的来源信息，你可以通过 `info.source` 来判断来源：
+
+```html
+<script lang="ts" setup>
+  const onSelect = (date, { source }) => {
+    if (source === 'date') {
+      console.log('Panel Select:', source);
+    }
+  };
+</script>
+<template>
+  <a-calendar @select="onSelect" />
+</template>
+```