@varlet/ui 3.5.2 → 3.5.3

package/lib/varlet.cjs.js

@@ -13379,13 +13379,14 @@ const __sfc__$T = vue.defineComponent({
       headerEl.value.checkDate(checkType);
     };
     vue.watch(
-      () => props2.preview.previewYear,
-      (year) => {
-        const {
-          componentProps: { min: min2, max: max2 }
-        } = props2;
-        if (max2) panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max2), "year");
-        if (min2) panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min2), "year");
+      () => [props2.preview.previewYear, props2.componentProps.max, props2.componentProps.min],
+      ([year, max2, min2]) => {
+        if (max2) {
+          panelBtnDisabled.right = !dayjs(`${toNumber(year) + 1}`).isSameOrBefore(dayjs(max2), "year");
+        }
+        if (min2) {
+          panelBtnDisabled.left = !dayjs(`${toNumber(year) - 1}`).isSameOrAfter(dayjs(min2), "year");
+        }
       },
       { immediate: true }
     );
@@ -13820,15 +13821,18 @@ const __sfc__$R = vue.defineComponent({
       }
     );
     vue.watch(
-      yearList,
-      (list) => {
-        const {
-          componentProps: { min: min2, max: max2 }
-        } = props2;
-        if (max2)
+      () => [yearList.value, props2.componentProps.max, props2.componentProps.min],
+      (newVal) => {
+        const [list, max2, min2] = newVal;
+        if (max2) {
           panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max2), "year");
-        if (min2) panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min2), "year");
-        if (toNumber(list[0] <= 0)) panelBtnDisabled.left = false;
+        }
+        if (min2) {
+          panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min2), "year");
+        }
+        if (toNumber(list[0] <= 0)) {
+          panelBtnDisabled.left = false;
+        }
       },
       {
         immediate: true
@@ -14165,6 +14169,7 @@ const __sfc__$Q = vue.defineComponent({
         initHeader();
       }
     );
+    vue.watch(() => [props2.componentProps.max, props2.componentProps.min], initHeader);
     return {
       n: n$P,
       nDate,
@@ -14481,7 +14486,7 @@ const __sfc__$P = vue.defineComponent({
     const yearPanelEl = vue.ref(null);
     const monthPanelEl = vue.ref(null);
     const dayPanelEl = vue.ref(null);
-    const componentProps = vue.reactive({
+    const componentProps = vue.computed(() => ({
       allowedDates: props2.allowedDates,
       type: props2.type,
       color: props2.color,
@@ -14492,7 +14497,7 @@ const __sfc__$P = vue.defineComponent({
       multiple: props2.multiple,
       range: props2.range,
       buttonElevation: props2.buttonElevation
-    });
+    }));
     const getChoose = vue.computed(() => ({
       chooseMonth: chooseMonth.value,
       chooseYear: chooseYear.value,
@@ -14575,7 +14580,7 @@ const __sfc__$P = vue.defineComponent({
     vue.watch(
       () => props2.modelValue,
       (value) => {
-        if (!checkValue() || invalidFormatDate(value) || !value) return;
+        if (!checkValue() || invalidFormatDate(value)) return;
         if (props2.range) {
           if (!isArray(value)) return;
           rangeDone.value = value.length !== 1;
@@ -14769,7 +14774,8 @@ const __sfc__$P = vue.defineComponent({
       rangeDate.value = formatDateList.filter((date) => date !== "Invalid Date");
     }
     function dateInit(value) {
-      const formatDate = dayjs(value).format("YYYY-MM-D");
+      const handleValue = value ? dayjs(value) : dayjs();
+      const formatDate = handleValue.format("YYYY-MM-D");
       if (invalidFormatDate(formatDate)) return;
       const [yearValue, monthValue, dayValue] = formatDate.split("-");
       const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
@@ -28256,24 +28262,37 @@ const __sfc__$2 = vue.defineComponent({
     vue.watch(
       () => props2.modelValue,
       (value) => {
-        if (value) {
-          const { hour, minute, second } = getNumberTime(value);
-          const formatHour12 = dayjs().hour(hour).format("hh");
-          const formatHour24 = dayjs().hour(hour).format("HH");
-          const formatMinute = dayjs().minute(minute).format("mm");
-          const formatSecond = dayjs().second(second).format("ss");
-          hourRad.value = (formatHour12 === "12" ? 0 : toNumber(formatHour12)) * 30;
-          minuteRad.value = toNumber(formatMinute) * 6;
-          secondRad.value = toNumber(formatSecond) * 6;
-          time.value = getTime(value);
-          if (props2.format !== "24hr") {
-            ampm.value = padStart$1(`${hour}`, 2, "0") === formatHour24 && hours24.includes(formatHour24) ? "pm" : "am";
-          }
-          isInner.value = props2.format === "24hr" && hours24.includes(formatHour24);
+        if (value === void 0 || value === "") {
+          resetTime();
+          return;
         }
+        const { hour, minute, second } = getNumberTime(value);
+        const formatHour12 = dayjs().hour(hour).format("hh");
+        const formatHour24 = dayjs().hour(hour).format("HH");
+        const formatMinute = dayjs().minute(minute).format("mm");
+        const formatSecond = dayjs().second(second).format("ss");
+        hourRad.value = (formatHour12 === "12" ? 0 : toNumber(formatHour12)) * 30;
+        minuteRad.value = toNumber(formatMinute) * 6;
+        secondRad.value = toNumber(formatSecond) * 6;
+        time.value = getTime(value);
+        if (props2.format !== "24hr") {
+          ampm.value = padStart$1(`${hour}`, 2, "0") === formatHour24 && hours24.includes(formatHour24) ? "pm" : "am";
+        }
+        isInner.value = props2.format === "24hr" && hours24.includes(formatHour24);
       },
       { immediate: true }
     );
+    function resetTime() {
+      hourRad.value = void 0;
+      minuteRad.value = 0;
+      secondRad.value = 0;
+      time.value = {
+        hour: "00",
+        minute: "00",
+        second: "00"
+      };
+      ampm.value = "am";
+    }
     function update(newTime) {
       call(props2["onUpdate:modelValue"], newTime);
       call(props2.onChange, newTime);
@@ -29297,7 +29316,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.5.2";
+const version = "3.5.3";
 function install(app) {
   stdin_default$5I.install && app.use(stdin_default$5I);
   stdin_default$5G.install && app.use(stdin_default$5G);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.5.2",
-    "@varlet/shared": "3.5.2",
-    "@varlet/use": "3.5.2"
+    "@varlet/icons": "3.5.3",
+    "@varlet/shared": "3.5.3",
+    "@varlet/use": "3.5.3"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -65,9 +65,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/cli": "3.5.2",
-    "@varlet/ui": "3.5.2",
-    "@varlet/touch-emulator": "3.5.2"
+    "@varlet/cli": "3.5.3",
+    "@varlet/touch-emulator": "3.5.3",
+    "@varlet/ui": "3.5.3"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/styleVars.d.ts

@@ -259,6 +259,7 @@ interface BaseStyleVars {
   '--date-picker-title-year-font-size'?: string
   '--date-picker-title-year-font-weight'?: string
   '--date-picker-title-year-margin-bottom'?: string
+  '--date-picker-title-year-min-height'?: string
   '--date-picker-title-date-height'?: string
   '--date-picker-title-date-font-size'?: string
   '--date-picker-title-date-font-weight'?: string
@@ -280,6 +281,7 @@ interface BaseStyleVars {
   '--year-picker-item-height'?: string
   '--year-picker-item-button-max-width'?: string
   '--day-picker-content-item-width'?: string
+  '--day-picker-content-item-min-height'?: string
   '--day-picker-content-item-font-size'?: string
   '--day-picker-content-item-padding'?: string
   '--day-picker-content-item-button-width'?: string
@@ -752,6 +754,7 @@ interface BaseStyleVars {
   '--time-picker-title-background'?: string
   '--time-picker-title-hint-color'?: string
   '--time-picker-title-hint-font-size'?: string
+  '--time-picker-title-hint-min-height'?: string
   '--time-picker-title-inactive-opacity'?: string
   '--time-picker-title-time-font-size'?: string
   '--time-picker-title-time-margin'?: string