refactor(components): [calendar] use type-based definitions (#23419)

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor(components): [calendar] use type-based definitions

* refactor: update

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/calendar/src/calendar.ts

@@ -6,7 +6,7 @@ import {
 } from '@element-plus/utils'
 import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 
 export type CalendarDateType =
   | 'prev-month'
@@ -18,6 +18,29 @@ export type CalendarDateType =
 const isValidRange = (range: unknown): range is [Date, Date] =>
   isArray(range) && range.length === 2 && range.every((item) => isDate(item))
 
+export interface CalendarProps {
+  /**
+   * @description binding value
+   */
+  modelValue?: Date
+  /**
+   * @description time range, including start time and end time.
+   *   Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.
+   */
+  range?: [Date, Date]
+  /**
+   * @description type of the controller for the Calendar header
+   */
+  controllerType?: 'button' | 'select'
+  /**
+   * @description format label when `controller-type` is 'select'
+   */
+  formatter?: (value: number, type: 'year' | 'month') => string | number
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
+ */
 export const calendarProps = buildProps({
   /**
    * @description binding value
@@ -50,7 +73,9 @@ export const calendarProps = buildProps({
     >(Function),
   },
 } as const)
-export type CalendarProps = ExtractPropTypes<typeof calendarProps>
+/**
+ *  @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
+ */
 export type CalendarPropsPublic = ExtractPublicPropTypes<typeof calendarProps>
 
 export const calendarEmits = {

packages/components/calendar/src/calendar.vue

@@ -62,9 +62,11 @@ import { ElButton, ElButtonGroup } from '@element-plus/components/button'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import DateTable from './date-table.vue'
 import { useCalendar } from './use-calendar'
-import { calendarEmits, calendarProps } from './calendar'
+import { calendarEmits } from './calendar'
 import SelectController from './select-controller.vue'
 
+import type { CalendarProps } from './calendar'
+
 const ns = useNamespace('calendar')
 
 const COMPONENT_NAME = 'ElCalendar'
@@ -72,7 +74,9 @@ defineOptions({
   name: COMPONENT_NAME,
 })
 
-const props = defineProps(calendarProps)
+const props = withDefaults(defineProps<CalendarProps>(), {
+  controllerType: 'button',
+})
 const emit = defineEmits(calendarEmits)
 
 const {

packages/components/calendar/src/date-table.ts

@@ -1,7 +1,7 @@
 import { buildProps, definePropType, isObject } from '@element-plus/utils'
 import { rangeArr } from '@element-plus/components/time-picker'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type { Dayjs } from 'dayjs'
 
 export type CalendarDateCellType = 'next' | 'prev' | 'current'
@@ -26,6 +26,16 @@ export const toNestedArr = (days: CalendarDateCell[]) =>
     return days.slice(start, start + 7)
   })
 
+export interface DateTableProps {
+  selectedDay?: Dayjs
+  range?: [Dayjs, Dayjs]
+  date: Dayjs
+  hideHeader?: boolean
+}
+
+/**
+ *  @deprecated Removed after 3.0.0, Use `DateTableProps` instead.
+ */
 export const dateTableProps = buildProps({
   selectedDay: {
     type: definePropType<Dayjs>(Object),
@@ -41,7 +51,9 @@ export const dateTableProps = buildProps({
     type: Boolean,
   },
 } as const)
-export type DateTableProps = ExtractPropTypes<typeof dateTableProps>
+/**
+ *  @deprecated Removed after 3.0.0, Use `DateTableProps` instead.
+ */
 export type DateTablePropsPublic = ExtractPublicPropTypes<typeof dateTableProps>
 
 export const dateTableEmits = {

packages/components/calendar/src/date-table.vue

@@ -38,16 +38,16 @@
 
 <script lang="ts" setup>
 import { useNamespace } from '@element-plus/hooks'
-import { dateTableEmits, dateTableProps } from './date-table'
+import { dateTableEmits } from './date-table'
 import { useDateTable } from './use-date-table'
 
-import type { CalendarDateCell } from './date-table'
+import type { CalendarDateCell, DateTableProps } from './date-table'
 
 defineOptions({
   name: 'DateTable',
 })
 
-const props = defineProps(dateTableProps)
+const props = defineProps<DateTableProps>()
 const emit = defineEmits(dateTableEmits)
 
 const {

packages/components/calendar/src/select-controller.ts

@@ -5,9 +5,17 @@ import {
   isString,
 } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type { Dayjs } from 'dayjs'
 
+export interface SelectControllerProps {
+  date: Dayjs
+  formatter?: (value: number, type: 'year' | 'month') => string | number
+}
+
+/**
+ *  @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.
+ */
 export const selectControllerProps = buildProps({
   date: {
     type: definePropType<Dayjs>(Object),
@@ -19,9 +27,9 @@ export const selectControllerProps = buildProps({
     >(Function),
   },
 } as const)
-export type SelectControllerProps = ExtractPropTypes<
-  typeof selectControllerProps
->
+/**
+ *  @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.
+ */
 export type SelectControllerPropsPublic = ExtractPublicPropTypes<
   typeof selectControllerProps
 >

packages/components/calendar/src/select-controller.vue

@@ -27,16 +27,15 @@ import { useLocale, useNamespace } from '@element-plus/hooks'
 import ElSelect from '@element-plus/components/select'
 import { ElButton } from '@element-plus/components/button'
 import { isFunction } from '@element-plus/utils'
-import {
-  selectControllerEmits,
-  selectControllerProps,
-} from './select-controller'
+import { selectControllerEmits } from './select-controller'
+
+import type { SelectControllerProps } from './select-controller'
 
 defineOptions({
   name: 'SelectController',
 })
 
-const props = defineProps(selectControllerProps)
+const props = defineProps<SelectControllerProps>()
 const emit = defineEmits(selectControllerEmits)
 
 const nsSelect = useNamespace('calendar-select')