refactor(components): [time-picker] setup migration (#7908)

* refactor(components): [time-picker] setup migration

- Migrate panel-month-range to setup

* chore: remove return expression

* chore: change Array.isArray to isArray

* chore: remove required parsedValue

packages/components/date-picker/src/date-picker-com/panel-month-range.vue

@@ -95,105 +95,131 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, ref, toRef, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, inject, ref, toRef, useAttrs, useSlots, watch } from 'vue'
 import dayjs from 'dayjs'
 import ElIcon from '@element-plus/components/icon'
 import { useLocale, useNamespace } from '@element-plus/hooks'
+import { isArray, isFunction } from '@element-plus/utils'
 import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
-import { panelMonthRangeProps } from '../props/panel-month-range'
+import {
+  panelMonthRangeEmits,
+  panelMonthRangeProps,
+} from '../props/panel-month-range'
 import MonthTable from './basic-month-table.vue'
 
+import type { SetupContext } from 'vue'
 import type { Dayjs } from 'dayjs'
+import type { RangeState } from '../props/shared'
 
-export default defineComponent({
-  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },
+defineOptions({
+  name: 'DatePickerMonthRange',
+})
 
-  props: panelMonthRangeProps,
+const props = defineProps(panelMonthRangeProps)
+const emit = defineEmits(panelMonthRangeEmits)
+const attrs = useAttrs()
+const slots = useSlots()
 
-  emits: ['pick', 'set-picker-option'],
+const ppNs = useNamespace('picker-panel')
+const drpNs = useNamespace('date-range-picker')
+const { t, lang } = useLocale()
+const leftDate = ref(dayjs().locale(lang.value))
+const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))
 
-  setup(props, ctx) {
-    const ppNs = useNamespace('picker-panel')
-    const drpNs = useNamespace('date-range-picker')
+const hasShortcuts = computed(() => !!shortcuts.length)
 
-    const { t, lang } = useLocale()
-    const leftDate = ref(dayjs().locale(lang.value))
-    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))
+// FIXME: extract this to `date-picker.ts`
+type Shortcut = {
+  text: string
+  value: [Date, Date] | (() => [Date, Date])
+  onClick?: (
+    ctx: Omit<SetupContext<typeof panelMonthRangeEmits>, 'expose'>
+  ) => void
+}
 
-    const hasShortcuts = computed(() => !!shortcuts.length)
+const handleShortcutClick = (shortcut: Shortcut) => {
+  const shortcutValues = isFunction(shortcut.value)
+    ? shortcut.value()
+    : shortcut.value
 
-    const handleShortcutClick = (shortcut) => {
-      const shortcutValues =
-        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
   if (shortcutValues) {
-        ctx.emit('pick', [
+    emit('pick', [
       dayjs(shortcutValues[0]).locale(lang.value),
       dayjs(shortcutValues[1]).locale(lang.value),
     ])
     return
   }
   if (shortcut.onClick) {
-        shortcut.onClick(ctx)
-      }
+    shortcut.onClick({
+      attrs,
+      slots,
+      emit,
+    })
   }
+}
 
-    const leftPrevYear = () => {
+const leftPrevYear = () => {
   leftDate.value = leftDate.value.subtract(1, 'year')
   if (!props.unlinkPanels) {
     rightDate.value = rightDate.value.subtract(1, 'year')
   }
-    }
+}
 
-    const rightNextYear = () => {
+const rightNextYear = () => {
   if (!props.unlinkPanels) {
     leftDate.value = leftDate.value.add(1, 'year')
   }
   rightDate.value = rightDate.value.add(1, 'year')
-    }
+}
 
-    const leftNextYear = () => {
+const leftNextYear = () => {
   leftDate.value = leftDate.value.add(1, 'year')
-    }
+}
 
-    const rightPrevYear = () => {
+const rightPrevYear = () => {
   rightDate.value = rightDate.value.subtract(1, 'year')
-    }
-    const leftLabel = computed(() => {
+}
+const leftLabel = computed(() => {
   return `${leftDate.value.year()} ${t('el.datepicker.year')}`
-    })
+})
 
-    const rightLabel = computed(() => {
+const rightLabel = computed(() => {
   return `${rightDate.value.year()} ${t('el.datepicker.year')}`
-    })
+})
 
-    const leftYear = computed(() => {
+const leftYear = computed(() => {
   return leftDate.value.year()
-    })
+})
 
-    const rightYear = computed(() => {
+const rightYear = computed(() => {
   return rightDate.value.year() === leftDate.value.year()
     ? leftDate.value.year() + 1
     : rightDate.value.year()
-    })
+})
 
-    const enableYearArrow = computed(() => {
+const enableYearArrow = computed(() => {
   return props.unlinkPanels && rightYear.value > leftYear.value + 1
-    })
+})
 
-    const minDate = ref(null)
-    const maxDate = ref(null)
+const minDate = ref<Dayjs>()
+const maxDate = ref<Dayjs>()
 
-    const rangeState = ref({
+const rangeState = ref<RangeState>({
   endDate: null,
   selecting: false,
-    })
+})
 
-    const handleChangeRange = (val) => {
+const handleChangeRange = (val: RangeState) => {
   rangeState.value = val
-    }
+}
 
-    const handleRangePick = (val, close = true) => {
+type RangePickValue = {
+  minDate: Dayjs
+  maxDate: Dayjs
+}
+
+const handleRangePick = (val: RangePickValue, close = true) => {
   // const defaultTime = props.defaultTime || []
   // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])
   // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])
@@ -208,38 +234,38 @@ export default defineComponent({
 
   if (!close) return
   handleConfirm()
-    }
+}
 
-    const isValidValue = (value) => {
+const isValidValue = (value: [Dayjs | undefined, Dayjs | undefined]) => {
   return (
-        Array.isArray(value) &&
+    isArray(value) &&
     value &&
     value[0] &&
     value[1] &&
     value[0].valueOf() <= value[1].valueOf()
   )
-    }
+}
 
-    const handleConfirm = (visible = false) => {
+const handleConfirm = (visible = false) => {
   if (isValidValue([minDate.value, maxDate.value])) {
-        ctx.emit('pick', [minDate.value, maxDate.value], visible)
-      }
+    emit('pick', [minDate.value, maxDate.value], visible)
   }
+}
 
-    const onSelect = (selecting) => {
+const onSelect = (selecting: boolean) => {
   rangeState.value.selecting = selecting
   if (!selecting) {
     rangeState.value.endDate = null
   }
-    }
+}
 
-    const formatToString = (value) => {
-      return value.map((_) => _.format(format))
-    }
+const formatToString = (days: Dayjs[]) => {
+  return days.map((day) => day.format(format))
+}
 
-    const getDefaultValue = () => {
+const getDefaultValue = () => {
   let start: Dayjs
-      if (Array.isArray(defaultValue.value)) {
+  if (isArray(defaultValue.value)) {
     const left = dayjs(defaultValue.value[0])
     let right = dayjs(defaultValue.value[1])
     if (!props.unlinkPanels) {
@@ -253,15 +279,15 @@ export default defineComponent({
   }
   start = start.locale(lang.value)
   return [start, start.add(1, 'year')]
-    }
+}
 
-    // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])
-    ctx.emit('set-picker-option', ['formatToString', formatToString])
-    const pickerBase = inject('EP_PICKER_BASE') as any
-    const { shortcuts, disabledDate, format } = pickerBase.props
-    const defaultValue = toRef(pickerBase.props, 'defaultValue')
+// pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])
+emit('set-picker-option', ['formatToString', formatToString])
+const pickerBase = inject('EP_PICKER_BASE') as any
+const { shortcuts, disabledDate, format } = pickerBase.props
+const defaultValue = toRef(pickerBase.props, 'defaultValue')
 
-    watch(
+watch(
   () => defaultValue.value,
   (val) => {
     if (val) {
@@ -271,9 +297,9 @@ export default defineComponent({
     }
   },
   { immediate: true }
-    )
+)
 
-    watch(
+watch(
   () => props.parsedValue,
   (newVal) => {
     if (newVal && newVal.length === 2) {
@@ -292,39 +318,12 @@ export default defineComponent({
       }
     } else {
       const defaultArr = getDefaultValue()
-          minDate.value = null
-          maxDate.value = null
+      minDate.value = undefined
+      maxDate.value = undefined
       leftDate.value = defaultArr[0]
       rightDate.value = defaultArr[1]
     }
   },
   { immediate: true }
-    )
-
-    return {
-      ppNs,
-      drpNs,
-      shortcuts,
-      disabledDate,
-      onSelect,
-      handleRangePick,
-      rangeState,
-      handleChangeRange,
-      minDate,
-      maxDate,
-      enableYearArrow,
-      leftLabel,
-      rightLabel,
-      leftNextYear,
-      leftPrevYear,
-      rightNextYear,
-      rightPrevYear,
-      t,
-      leftDate,
-      rightDate,
-      hasShortcuts,
-      handleShortcutClick,
-    }
-  },
-})
+)
 </script>

packages/components/date-picker/src/props/panel-month-range.ts

@@ -7,4 +7,6 @@ export const panelMonthRangeProps = buildProps({
   ...panelRangeSharedProps,
 } as const)
 
+export const panelMonthRangeEmits = ['pick', 'set-picker-option']
+
 export type PanelMonthRangeProps = ExtractPropTypes<typeof panelMonthRangeProps>

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

@@ -3,9 +3,9 @@ import { datePickTypes } from '@element-plus/constants'
 
 import type { Dayjs } from 'dayjs'
 
-const selectionModes = ['date', 'dates', 'year', 'month', 'week']
+const selectionModes = ['date', 'dates', 'year', 'month', 'week', 'range']
 
-type RangeState = {
+export type RangeState = {
   endDate: null | Dayjs
   selecting: boolean
 }
@@ -26,7 +26,6 @@ export const datePickerSharedProps = buildProps({
   },
   parsedValue: {
     type: definePropType<Dayjs | Dayjs[]>([Object, Array]),
-    required: true,
   },
   rangeState: {
     type: definePropType<RangeState>(Object),