@varlet/ui 3.5.2 → 3.5.4-alpha.1727864204645

package/es/card/Card.mjs

@@ -40,7 +40,15 @@ function __render__(_ctx, _cache) {
     "div",
     {
       ref: "card",
-      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.outline, _ctx.n("--outline")], _ctx.formatElevation(_ctx.elevation, 1))),
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          [_ctx.isRow, _ctx.n("--layout-row")],
+          [_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")],
+          [_ctx.variant === "filled", _ctx.n("--filled")],
+          [_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)]
+        )
+      ),
       style: _normalizeStyle({
         zIndex: _ctx.floated ? _ctx.zIndex : void 0
       }),

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}
+:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}

package/es/card/props.mjs

@@ -7,7 +7,10 @@ const props = {
   },
   imageHeight: [String, Number],
   imageWidth: [String, Number],
-  outline: Boolean,
+  variant: {
+    type: String,
+    default: "standard"
+  },
   layout: {
     type: String,
     default: "column"
@@ -27,7 +30,9 @@ const props = {
   },
   ripple: Boolean,
   onClick: defineListenerProp(),
-  "onUpdate:floating": defineListenerProp()
+  "onUpdate:floating": defineListenerProp(),
+  // deprecated
+  outline: Boolean
 };
 export {
   props

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.4-alpha.1727864204645'
 
 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.4-alpha.1727864204645'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)