fix(date-picker): rerender date panel when max or min changes (#1782)

* fix(date-picker): rerender date panel when max or min changes * test(date-picker): add test cases
varletjs · Sep 27, 2024 · 2df3ee2 · 2df3ee2
1 parent 095166a
commit 2df3ee2
Show file tree

Hide file tree

Showing 7 changed files with 489 additions and 20 deletions.
diff --git a/packages/varlet-cli/src/node/config/vite.config.ts b/packages/varlet-cli/src/node/config/vite.config.ts
@@ -36,7 +36,7 @@ export function getHtmlInject(inject: VarletConfigHtmlInject) {
 }
 
 export function getDevConfig(varletConfig: Required<VarletConfig>): InlineConfig {
-  const { defaultLanguage, alias = {}, host } = varletConfig
+  const { alias = {}, host } = varletConfig
 
   const resolveAlias = Object.entries(alias).reduce((resolveAlias, [key, value]) => {
     const isRelative = value.startsWith('.')

diff --git a/packages/varlet-ui/src/date-picker/DatePicker.vue b/packages/varlet-ui/src/date-picker/DatePicker.vue
@@ -107,7 +107,7 @@ import dayjs from 'dayjs/esm/index.js'
 import MonthPickerPanel from './src/month-picker-panel.vue'
 import YearPickerPanel from './src/year-picker-panel.vue'
 import DayPickerPanel from './src/day-picker-panel.vue'
-import { defineComponent, ref, computed, reactive, watch, type RendererNode } from 'vue'
+import { defineComponent, ref, computed, watch, type RendererNode } from 'vue'
 import {
   props,
   MONTH_LIST,
@@ -158,7 +158,7 @@ export default defineComponent({
     const yearPanelEl = ref<RendererNode | null>(null)
     const monthPanelEl = ref<RendererNode | null>(null)
     const dayPanelEl = ref<RendererNode | null>(null)
-    const componentProps = reactive<ComponentProps>({
+    const componentProps = computed<ComponentProps>(() => ({
       allowedDates: props.allowedDates,
       type: props.type,
       color: props.color,
@@ -169,7 +169,7 @@ export default defineComponent({
       multiple: props.multiple,
       range: props.range,
       buttonElevation: props.buttonElevation,
-    })
+    }))
     const getChoose = computed<Choose>(() => ({
       chooseMonth: chooseMonth.value,
       chooseYear: chooseYear.value,

diff --git a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
diff --git a/packages/varlet-ui/src/date-picker/__tests__/index.spec.js b/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
@@ -422,3 +422,31 @@ test('test datePicker titleColor', async () => {
 
   wrapper.unmount()
 })
+
+test('test datePicker rerender date panel when max or min changes', async () => {
+  const wrapper = mount({
+    components: {
+      [VarDatePicker.name]: VarDatePicker,
+    },
+    data() {
+      return {
+        date: '2024-12-23',
+        max: '2024-12-24',
+        min: '2024-12-22',
+      }
+    },
+    template: `<var-date-picker v-model="date" :min="min" :max="max" />`,
+  })
+
+  await delay(100)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setData({
+    min: '2025-01-05',
+    date: '2025-01-06',
+    max: '2025-01-07',
+  })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
@@ -302,6 +302,8 @@ export default defineComponent({
       }
     )
 
+    watch(() => [props.componentProps.max, props.componentProps.min], initHeader)
+
     return {
       n,
       nDate,

diff --git a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
@@ -216,14 +216,14 @@ export default defineComponent({
     }
 
     watch(
-      () => props.preview.previewYear,
-      (year) => {
-        const {
-          componentProps: { min, max },
-        } = props
-
-        if (max) panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), 'year')
-        if (min) panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), 'year')
+      () => [props.preview.previewYear, props.componentProps.max, props.componentProps.min],
+      ([year, max, min]) => {
+        if (max) {
+          panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max), 'year')
+        }
+        if (min) {
+          panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min), 'year')
+        }
       },
       { immediate: true }
     )

diff --git a/packages/varlet-ui/src/date-picker/src/year-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/year-picker-panel.vue
@@ -236,16 +236,20 @@ export default defineComponent({
     )
 
     watch(
-      yearList,
-      (list) => {
-        const {
-          componentProps: { min, max },
-        } = props
-        if (max)
+      () => [yearList.value, props.componentProps.max, props.componentProps.min],
+      (newVal) => {
+        const [list, max, min] = newVal as [number[], string, string]
+        if (max) {
           panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max), 'year')
-        if (min) panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), 'year')
+        }
+
+        if (min) {
+          panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), 'year')
+        }
 
-        if (toNumber(list[0] <= 0)) panelBtnDisabled.left = false
+        if (toNumber(list[0] <= 0)) {
+          panelBtnDisabled.left = false
+        }
       },
       {
         immediate: true,