@varlet/ui 3.5.2 → 3.5.4-alpha.1727864204645

package/lib/varlet.cjs.js

@@ -8485,7 +8485,10 @@ const props$V = {
   },
   imageHeight: [String, Number],
   imageWidth: [String, Number],
-  outline: Boolean,
+  variant: {
+    type: String,
+    default: "standard"
+  },
   layout: {
     type: String,
     default: "column"
@@ -8505,7 +8508,9 @@ const props$V = {
   },
   ripple: Boolean,
   onClick: defineListenerProp(),
-  "onUpdate:floating": defineListenerProp()
+  "onUpdate:floating": defineListenerProp(),
+  // deprecated
+  outline: Boolean
 };
 var __async$d = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -8538,7 +8543,15 @@ function __render__$10(_ctx, _cache) {
     "div",
     {
       ref: "card",
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.outline, _ctx.n("--outline")], _ctx.formatElevation(_ctx.elevation, 1))),
+      class: vue.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: vue.normalizeStyle({
         zIndex: _ctx.floated ? _ctx.zIndex : void 0
       }),
@@ -13379,13 +13392,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 +13834,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 +14182,7 @@ const __sfc__$Q = vue.defineComponent({
         initHeader();
       }
     );
+    vue.watch(() => [props2.componentProps.max, props2.componentProps.min], initHeader);
     return {
       n: n$P,
       nDate,
@@ -14481,7 +14499,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 +14510,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 +14593,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 +14787,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);
@@ -24748,6 +24767,7 @@ var stdin_default$34 = {
   "--card-description-color": "#aaaaaa",
   "--card-padding": "0 0 15px 0",
   "--card-background": "var(--color-surface-container-highest)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-outline-color": "var(--color-outline)",
   "--card-border-radius": "4px",
   "--card-image-width": "100%",
@@ -25832,6 +25852,7 @@ var stdin_default$1W = {
 var stdin_default$1V = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-low)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "#1D1B20",
   "--card-title-font-size": "16px",
@@ -26807,6 +26828,7 @@ var stdin_default$W = {
 var stdin_default$V = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-highest)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "var(--color-inverse-surface)",
   "--card-title-font-size": "16px",
@@ -28256,24 +28278,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 +29332,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.4-alpha.1727864204645";
 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.4-alpha.1727864204645",
   "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.4-alpha.1727864204645",
+    "@varlet/use": "3.5.4-alpha.1727864204645",
+    "@varlet/shared": "3.5.4-alpha.1727864204645"
   },
   "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/ui": "3.5.4-alpha.1727864204645",
+    "@varlet/cli": "3.5.4-alpha.1727864204645",
+    "@varlet/touch-emulator": "3.5.4-alpha.1727864204645"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/card.d.ts

@@ -7,7 +7,10 @@ export type CardFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 
 export type CardLayout = 'row' | 'column'
 
+export type CardVariant = 'standard' | 'outlined' | 'filled'
+
 export interface CardProps extends BasicAttributes {
+  variant?: CardVariant
   src?: string
   fit?: CardFit
   imageHeight?: string | number
@@ -17,12 +20,18 @@ export interface CardProps extends BasicAttributes {
   subtitle?: string
   description?: string
   elevation?: boolean | number | string
+  filled?: boolean
   ripple?: boolean
-  onClick?: ListenerProp<(e: Event) => void>
   layout?: CardLayout
   floating?: boolean
   floatingDuration?: number
+  onClick?: ListenerProp<(e: Event) => void>
   'onUpdate:floating'?: ListenerProp<(value: boolean) => void>
+
+  /**
+   * @deprecated
+   */
+  outline?: boolean
 }
 
 export interface CardTitleData {

package/types/styleVars.d.ts

@@ -130,6 +130,7 @@ interface BaseStyleVars {
   '--button-normal-font-size'?: string
   '--button-large-font-size'?: string
   '--card-background'?: string
+  '--card-filled-background'?: string
   '--card-padding'?: string
   '--card-border-radius'?: string
   '--card-outline-color'?: string
@@ -259,6 +260,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 +282,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 +755,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