refactor(date-picker): optimize buttonProps

packages/varlet-ui/src/date-picker/DatePicker.vue

@@ -29,7 +29,7 @@
             <slot name="multiple" :choose="getChoose.chooseMonths" v-else-if="multiple">
               {{ getMonthTitle }}
             </slot>
-            <slot name="month" :month="+chooseMonth.index" :year="chooseYear" v-else>
+            <slot name="month" :month="chooseMonth.index" :year="chooseYear" v-else>
               {{ getMonthTitle }}
             </slot>
           </div>
@@ -179,7 +179,7 @@ export default defineComponent({
       return {
         week: weekIndex,
         year: chooseYear.value,
-        month: toNumber(chooseMonth.value.index),
+        month: chooseMonth.value.index,
         date: chooseDay.value,
       }
     })
@@ -318,9 +318,10 @@ export default defineComponent({
     const rangeInit = (value: Array<string>, type: string) => {
       const rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay
       const formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-D'
-      const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1])
 
       rangeDate.value = value.map((choose) => dayjs(choose).format(formatType)).slice(0, 2)
+      const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1])
+
       if (rangeDate.value.length === 2 && isChangeOrder) {
         rangeDate.value = [rangeDate.value[1], rangeDate.value[0]]
       }

packages/varlet-ui/src/date-picker/props.ts

@@ -2,6 +2,8 @@ import { PropType } from 'vue'
 
 type AllowedDates = (val: string) => boolean
 
+type DatePickerType = 'date' | 'month'
+
 export type ComponentProps = {
   type: string
   allowedDates: AllowedDates | undefined
@@ -110,7 +112,7 @@ export const props = {
     type: [String, Array] as PropType<string | Array<string>>,
   },
   type: {
-    type: String,
+    type: String as PropType<DatePickerType>,
     default: 'date',
   },
   allowedDates: {

packages/varlet-ui/src/date-picker/src/day-picker-panel.vue

@@ -175,39 +175,62 @@ export default defineComponent({
           textColor: '',
         }
       }
-      let outline = isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent
+
       const {
         choose: { chooseDay },
         preview: { previewYear, previewMonth },
         componentProps: { allowedDates, color, multiple, range },
       }: { choose: Choose; preview: Preview; componentProps: ComponentProps } = props
+
       const val = `${previewYear}-${previewMonth.index}-${day}`
-      const shouldChooseResult = shouldChoose(val)
-      const rangeOrMultiple = range || multiple
-      const dayExist = rangeOrMultiple ? shouldChooseResult : toNumber(chooseDay) === day && isSame.value
-
-      const disabled = inRange(day) ? (allowedDates ? !allowedDates(val) : false) : true
-      const text = disabled
-        ? true
-        : rangeOrMultiple
-        ? !shouldChooseResult
-        : !isSame.value || toNumber(chooseDay) !== day
-      const bgColor = !text ? color : ''
-
-      outline = rangeOrMultiple
-        ? outline && (disabled ? true : !shouldChooseResult)
-        : isSame.value
-        ? outline && (chooseDay !== currentDay || disabled)
-        : outline
-
-      const textColor = disabled ? '' : outline ? color : dayExist ? '' : 'rgba(0, 0, 0, .87)'
+
+      const dayExist = (): boolean => {
+        if (range || multiple) return shouldChoose(val)
+        return toNumber(chooseDay) === day && isSame.value
+      }
+
+      const computeDisabled = (): boolean => {
+        if (!inRange(day)) return true
+        if (!allowedDates) return false
+        return !allowedDates(val)
+      }
+      const disabled = computeDisabled()
+
+      const computeText = (): boolean => {
+        if (disabled) return true
+        if (range || multiple) return !shouldChoose(val)
+        return !isSame.value || toNumber(chooseDay) !== day
+      }
+
+      const computeOutline = (): boolean => {
+        // 不满足基本条件， 基本条件为当前年、当前月、当前日并且 showCurrent 为true的情况
+        if (!(isCurrent.value && toNumber(currentDay) === day && props.componentProps.showCurrent)) return false
+
+        // 存在着 disabled
+        if ((range || multiple || isSame.value) && disabled) return true
+
+        // 在选择范围之外
+        if (range || multiple) return !shouldChoose(val)
+
+        // 同一年但是未被选择的情况
+        if (isSame.value) return chooseDay !== currentDay
+
+        return true
+      }
+
+      const computeTextColor = (): string | undefined => {
+        if (disabled) return ''
+        if (computeOutline()) return color
+        if (dayExist()) return ''
+        return 'rgba(0, 0, 0, .87)'
+      }
 
       return {
         disabled,
-        text,
-        outline,
-        color: bgColor,
-        textColor,
+        text: computeText(),
+        outline: computeOutline(),
+        color: !computeText() ? color : '',
+        textColor: computeTextColor(),
       }
     }
 

packages/varlet-ui/src/date-picker/src/month-picker-panel.vue

@@ -120,41 +120,61 @@ export default defineComponent({
     }
 
     const buttonProps = (key: string) => {
-      let outline = isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent
-
       const {
         choose: { chooseMonth },
         preview: { previewYear },
         componentProps: { allowedDates, color, multiple, range },
       }: { choose: Choose; preview: Preview; componentProps: ComponentProps } = props
 
       const val = `${previewYear}-${key}`
-      const shouldChooseResult = shouldChoose(val)
-      const rangeOrMultiple = range || multiple
-      const monthExist = rangeOrMultiple ? shouldChooseResult : chooseMonth.index === key && isSameYear.value
-
-      const disabled = inRange(key) ? (allowedDates ? !allowedDates(val) : false) : true
-      const text = disabled
-        ? true
-        : rangeOrMultiple
-        ? !shouldChooseResult
-        : !isSameYear.value || chooseMonth.index !== key
-      const bgColor = !text ? color : ''
-
-      outline = rangeOrMultiple
-        ? outline && (disabled ? true : !shouldChooseResult)
-        : isSameYear.value
-        ? outline && (chooseMonth.index !== currentMonth || disabled)
-        : outline
-
-      const textColor = disabled ? '' : outline ? color : monthExist ? '' : 'rgba(0, 0, 0, .87)'
+
+      const monthExist = (): boolean => {
+        if (range || multiple) return shouldChoose(val)
+        return chooseMonth.index === key && isSameYear.value
+      }
+
+      const computeDisabled = (): boolean => {
+        if (!inRange(key)) return true
+        if (!allowedDates) return false
+        return !allowedDates(val)
+      }
+      const disabled = computeDisabled()
+
+      const computeText = (): boolean => {
+        if (disabled) return true
+        if (range || multiple) return !shouldChoose(val)
+        return !isSameYear.value || chooseMonth.index !== key
+      }
+
+      const computeOutline = (): boolean => {
+        // 不满足基本条件， 基本条件为当前年、当前月并且 showCurrent 为true的情况
+        if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) return false
+
+        // 存在着 disabled
+        if ((range || multiple || isSameYear.value) && disabled) return true
+
+        // 在选择范围之外
+        if (range || multiple) return !shouldChoose(val)
+
+        // 同一年但是未被选择的情况
+        if (isSameYear.value) return chooseMonth.index !== currentMonth
+
+        return true
+      }
+
+      const computeTextColor = (): string | undefined => {
+        if (disabled) return ''
+        if (computeOutline()) return color
+        if (monthExist()) return ''
+        return 'rgba(0, 0, 0, .87)'
+      }
 
       return {
         disabled,
-        outline,
-        text,
-        color: bgColor,
-        textColor,
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : '',
+        textColor: computeTextColor(),
       }
     }