refactor(components): [calendar] (#10163)

* refactor(components): [calendar]

* Eliminate long function by extracting code as function calls.

* chore: move t out of use-calendar logic

packages/components/calendar/src/calendar.vue

@@ -52,8 +52,9 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
-import { useNamespace } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 
 import DateTable from './date-table.vue'
 import { useCalendar } from './use-calendar'
@@ -75,11 +76,16 @@ const {
   pickDay,
   realSelectedDay,
   selectDate,
-  t,
-  i18nDate,
   validatedRange,
 } = useCalendar(props, emit, COMPONENT_NAME)
 
+const { t } = useLocale()
+
+const i18nDate = computed(() => {
+  const pickedMonth = `el.datepicker.month${date.value.format('M')}`
+  return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`
+})
+
 defineExpose({
   /** @description currently selected date */
   selectedDay: realSelectedDay,

packages/components/calendar/src/use-calendar.ts

@@ -8,13 +8,56 @@ import type { ComputedRef, SetupContext } from 'vue'
 import type { Dayjs } from 'dayjs'
 import type { CalendarDateType, CalendarEmits, CalendarProps } from './calendar'
 
+const adjacentMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {
+  const firstMonthLastDay = start.endOf('month')
+  const lastMonthFirstDay = end.startOf('month')
+
+  // Whether the last day of the first month and the first day of the last month is in the same week
+  const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')
+  const lastMonthStartDay = isSameWeek
+    ? lastMonthFirstDay.add(1, 'week')
+    : lastMonthFirstDay
+
+  return [
+    [start, firstMonthLastDay],
+    [lastMonthStartDay.startOf('week'), end],
+  ]
+}
+
+const threeConsecutiveMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {
+  const firstMonthLastDay = start.endOf('month')
+  const secondMonthFirstDay = start.add(1, 'month').startOf('month')
+
+  // Whether the last day of the first month and the second month is in the same week
+  const secondMonthStartDay = firstMonthLastDay.isSame(
+    secondMonthFirstDay,
+    'week'
+  )
+    ? secondMonthFirstDay.add(1, 'week')
+    : secondMonthFirstDay
+
+  const secondMonthLastDay = secondMonthStartDay.endOf('month')
+  const lastMonthFirstDay = end.startOf('month')
+
+  // Whether the last day of the second month and the last day of the last month is in the same week
+  const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, 'week')
+    ? lastMonthFirstDay.add(1, 'week')
+    : lastMonthFirstDay
+
+  return [
+    [start, firstMonthLastDay],
+    [secondMonthStartDay.startOf('week'), secondMonthLastDay],
+    [lastMonthStartDay.startOf('week'), end],
+  ]
+}
+
 export const useCalendar = (
   props: CalendarProps,
   emit: SetupContext<CalendarEmits>['emit'],
   componentName: string
 ) => {
-  const solts = useSlots()
+  const slots = useSlots()
-  const { t, lang } = useLocale()
+  const { lang } = useLocale()
 
   const selectedDay = ref<Dayjs>()
   const now = dayjs().locale(lang.value)
@@ -61,12 +104,10 @@ export const useCalendar = (
 
   const date: ComputedRef<Dayjs> = computed(() => {
     if (!props.modelValue) {
-      if (realSelectedDay.value) {
+      return (
-        return realSelectedDay.value
+        realSelectedDay.value ||
-      } else if (validatedRange.value.length) {
+        (validatedRange.value.length ? validatedRange.value[0][0] : now)
-        return validatedRange.value[0][0]
+      )
-      }
-      return now
     } else {
       return dayjs(props.modelValue).locale(lang.value)
     }
@@ -76,11 +117,6 @@ export const useCalendar = (
   const prevYearDayjs = computed(() => date.value.subtract(1, 'year').date(1))
   const nextYearDayjs = computed(() => date.value.add(1, 'year').date(1))
 
-  const i18nDate = computed(() => {
-    const pickedMonth = `el.datepicker.month${date.value.format('M')}`
-    return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`
-  })
-
   // https://github.com/element-plus/element-plus/issues/3155
   // Calculate the validate date range according to the start and end dates
   const calculateValidatedDateRange = (
@@ -98,52 +134,14 @@ export const useCalendar = (
     }
     // Two adjacent months
     else if (firstMonth + 1 === lastMonth) {
-      const firstMonthLastDay = firstDay.endOf('month')
+      return adjacentMonth(firstDay, lastDay)
-      const lastMonthFirstDay = lastDay.startOf('month')
-
-      // Whether the last day of the first month and the first day of the last month is in the same week
-      const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')
-      const lastMonthStartDay = isSameWeek
-        ? lastMonthFirstDay.add(1, 'week')
-        : lastMonthFirstDay
-
-      return [
-        [firstDay, firstMonthLastDay],
-        [lastMonthStartDay.startOf('week'), lastDay],
-      ]
     }
     // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)
     else if (
       firstMonth + 2 === lastMonth ||
       (firstMonth + 1) % 11 === lastMonth
     ) {
-      const firstMonthLastDay = firstDay.endOf('month')
+      return threeConsecutiveMonth(firstDay, lastDay)
-      const secondMonthFirstDay = firstDay.add(1, 'month').startOf('month')
-
-      // Whether the last day of the first month and the second month is in the same week
-      const secondMonthStartDay = firstMonthLastDay.isSame(
-        secondMonthFirstDay,
-        'week'
-      )
-        ? secondMonthFirstDay.add(1, 'week')
-        : secondMonthFirstDay
-
-      const secondMonthLastDay = secondMonthStartDay.endOf('month')
-      const lastMonthFirstDay = lastDay.startOf('month')
-
-      // Whether the last day of the second month and the last day of the last month is in the same week
-      const lastMonthStartDay = secondMonthLastDay.isSame(
-        lastMonthFirstDay,
-        'week'
-      )
-        ? lastMonthFirstDay.add(1, 'week')
-        : lastMonthFirstDay
-
-      return [
-        [firstDay, firstMonthLastDay],
-        [secondMonthStartDay.startOf('week'), secondMonthLastDay],
-        [lastMonthStartDay.startOf('week'), lastDay],
-      ]
     }
     // Other cases
     else {
@@ -184,7 +182,7 @@ export const useCalendar = (
       ref: 'https://element-plus.org/en-US/component/calendar.html#slots',
       type: 'Slot',
     },
-    computed(() => !!solts.dateCell)
+    computed(() => !!slots.dateCell)
   )
 
   return {
@@ -194,7 +192,5 @@ export const useCalendar = (
     pickDay,
     selectDate,
     validatedRange,
-    t,
-    i18nDate,
   }
 }