feat(components): [date-picker] extract props (#7893)

- Extract props from basic-month-table.
- Extract common props to shared.

packages/components/date-picker/src/date-picker-com/basic-month-table.vue

@@ -36,9 +36,7 @@ import dayjs from 'dayjs'
 import { useLocale } from '@element-plus/hooks'
 import { rangeArr } from '@element-plus/components/time-picker'
 import { castArray, hasClass } from '@element-plus/utils'
-
+import { basicMonthTableProps } from '../props/basic-month-table'
-import type { PropType } from 'vue'
-import type { Dayjs } from 'dayjs'
 
 const datesInMonth = (year: number, month: number, lang: string) => {
   const firstDay = dayjs().locale(lang).startOf('month').month(month).year(year)
@@ -47,34 +45,7 @@ const datesInMonth = (year: number, month: number, lang: string) => {
 }
 
 export default defineComponent({
-  props: {
+  props: basicMonthTableProps,
-    disabledDate: {
-      type: Function as PropType<(_: Date) => void>,
-    },
-    selectionMode: {
-      type: String,
-      default: 'month',
-    },
-    minDate: {
-      type: Object as PropType<Dayjs>,
-    },
-    maxDate: {
-      type: Object as PropType<Dayjs>,
-    },
-    date: {
-      type: Object as PropType<Dayjs>,
-    },
-    parsedValue: {
-      type: Object as PropType<Dayjs>,
-    },
-    rangeState: {
-      type: Object,
-      default: () => ({
-        endDate: null,
-        selecting: false,
-      }),
-    },
-  },
 
   emits: ['changerange', 'pick', 'select'],
   expose: ['focus'],

packages/components/date-picker/src/props/basic-date-table.ts

@@ -1,44 +1,15 @@
 import { buildProps, definePropType } from '@element-plus/utils'
+import { datePickerSharedProps, selectionModeWithDefault } from './shared'
 
 import type { ExtractPropTypes } from 'vue'
-import type { Dayjs } from 'dayjs'
-
-type RangeState = {
-  endDate: null
-  selecting: boolean
-}
 
 export const basicDateTableProps = buildProps({
-  date: {
+  ...datePickerSharedProps,
-    type: definePropType<Dayjs>(Object),
+  cellClassName: {
-  },
+    type: definePropType<(date: Date) => string>(Function),
-  minDate: {
-    type: definePropType<Dayjs>(Object),
-  },
-  maxDate: {
-    type: definePropType<Dayjs>(Object),
-  },
-  parsedValue: {
-    type: definePropType<Dayjs | Dayjs[]>([Object, Array]),
-  },
-  selectionMode: {
-    type: String,
-    default: 'date',
   },
   showWeekNumber: Boolean,
-  disabledDate: {
+  selectionMode: selectionModeWithDefault('date'),
-    type: Function,
-  },
-  cellClassName: {
-    type: Function,
-  },
-  rangeState: {
-    type: definePropType<RangeState>(Object),
-    default: () => ({
-      endDate: null,
-      selecting: false,
-    }),
-  },
 } as const)
 
 export type BasicDateTableProps = ExtractPropTypes<typeof basicDateTableProps>

packages/components/date-picker/src/props/basic-month-table.ts

@@ -0,0 +1,11 @@
+import { buildProps } from '@element-plus/utils'
+import { datePickerSharedProps, selectionModeWithDefault } from './shared'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const basicMonthTableProps = buildProps({
+  ...datePickerSharedProps,
+  selectionMode: selectionModeWithDefault('month'),
+})
+
+export type BasicMonthTableProps = ExtractPropTypes<typeof basicMonthTableProps>

packages/components/date-picker/src/props/shared.ts

@@ -0,0 +1,46 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { Dayjs } from 'dayjs'
+
+const selectionModes = ['date', 'dates', 'year', 'month', 'week']
+
+type RangeState = {
+  endDate: null | Dayjs
+  selecting: boolean
+}
+
+export const datePickerSharedProps = buildProps({
+  disabledDate: {
+    type: definePropType<(date: Date) => boolean>(Function),
+  },
+  date: {
+    type: definePropType<Dayjs>(Object),
+    required: true,
+  },
+  minDate: {
+    type: definePropType<Dayjs | null>(Object),
+  },
+  maxDate: {
+    type: definePropType<Dayjs | null>(Object),
+  },
+  parsedValue: {
+    type: definePropType<Dayjs | Dayjs[]>([Object, Array]),
+  },
+  rangeState: {
+    type: definePropType<RangeState>(Object),
+    default: () => ({
+      endDate: null,
+      selecting: false,
+    }),
+  },
+} as const)
+
+export const selectionModeWithDefault = (
+  mode: typeof selectionModes[number]
+) => {
+  return {
+    type: String,
+    values: selectionModes,
+    default: mode,
+  }
+}