@varlet/ui 3.5.2 → 3.5.3

package/es/date-picker/DatePicker.mjs

@@ -22,7 +22,7 @@ import dayjs from "dayjs/esm/index.js";
 import MonthPickerPanel from "./src/month-picker-panel.mjs";
 import YearPickerPanel from "./src/year-picker-panel.mjs";
 import DayPickerPanel from "./src/day-picker-panel.mjs";
-import { defineComponent, ref, computed, reactive, watch } from "vue";
+import { defineComponent, ref, computed, watch } from "vue";
 import {
   props,
   MONTH_LIST,
@@ -310,7 +310,7 @@ const __sfc__ = defineComponent({
     const yearPanelEl = ref(null);
     const monthPanelEl = ref(null);
     const dayPanelEl = ref(null);
-    const componentProps = reactive({
+    const componentProps = computed(() => ({
       allowedDates: props2.allowedDates,
       type: props2.type,
       color: props2.color,
@@ -321,7 +321,7 @@ const __sfc__ = defineComponent({
       multiple: props2.multiple,
       range: props2.range,
       buttonElevation: props2.buttonElevation
-    });
+    }));
     const getChoose = computed(() => ({
       chooseMonth: chooseMonth.value,
       chooseYear: chooseYear.value,
@@ -404,7 +404,7 @@ const __sfc__ = defineComponent({
     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;
@@ -598,7 +598,8 @@ const __sfc__ = 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);

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: #fff; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-title-date-justify-content: normal; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: transparent; border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: var(--date-picker-title-date-justify-content); opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: #fff; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-year-min-height: 21px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-title-date-justify-content: normal; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-min-height: 21px; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: transparent; border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom); min-height: var(--date-picker-title-year-min-height);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: var(--date-picker-title-date-justify-content); opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding); min-height: var(--day-picker-content-item-min-height);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/es/date-picker/src/day-picker-panel.mjs

@@ -328,6 +328,7 @@ const __sfc__ = defineComponent({
         initHeader();
       }
     );
+    watch(() => [props.componentProps.max, props.componentProps.min], initHeader);
     return {
       n,
       nDate,

package/es/date-picker/src/month-picker-panel.mjs

@@ -232,13 +232,14 @@ const __sfc__ = defineComponent({
       headerEl.value.checkDate(checkType);
     };
     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 }
     );

package/es/date-picker/src/year-picker-panel.mjs

@@ -240,15 +240,18 @@ const __sfc__ = 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;
+        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 (toNumber(list[0] <= 0)) panelBtnDisabled.left = false;
+        }
+        if (min) {
+          panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), "year");
+        }
+        if (toNumber(list[0] <= 0)) {
+          panelBtnDisabled.left = false;
+        }
       },
       {
         immediate: true

package/es/index.bundle.mjs

@@ -268,7 +268,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.5.2'
+const version = '3.5.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -178,7 +178,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.5.2'
+const version = '3.5.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'