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,46 +95,67 @@
   </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'],
-
-  setup(props, ctx) {
 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'))
 
 const hasShortcuts = computed(() => !!shortcuts.length)
 
-    const handleShortcutClick = (shortcut) => {
-      const shortcutValues =
-        typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
+// 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 handleShortcutClick = (shortcut: Shortcut) => {
+  const shortcutValues = isFunction(shortcut.value)
+    ? 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,
+    })
   }
 }
 
@@ -181,19 +202,24 @@ export default defineComponent({
   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])
@@ -210,9 +236,9 @@ export default defineComponent({
   handleConfirm()
 }
 
-    const isValidValue = (value) => {
+const isValidValue = (value: [Dayjs | undefined, Dayjs | undefined]) => {
   return (
-        Array.isArray(value) &&
+    isArray(value) &&
     value &&
     value[0] &&
     value[1] &&
@@ -222,24 +248,24 @@ export default defineComponent({
 
 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 = () => {
   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) {
@@ -256,7 +282,7 @@ export default defineComponent({
 }
 
 // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])
-    ctx.emit('set-picker-option', ['formatToString', formatToString])
+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')
@@ -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),