@varlet/ui 3.20.1 → 3.20.3

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/date-picker/DatePicker.mjs

@@ -359,9 +359,7 @@ const __sfc__ = defineComponent({
       var _a, _b, _c, _d;
       const { multiple, range } = props2;
       if (range) {
-        const formattedDays = selectionState.selectedRangeDays.map(
-          (date) => dayjs(date).format(DatePickerFormats.DayPadded)
-        );
+        const formattedDays = selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.Day));
         return formattedDays.length ? formattedDays.join(" ~ ") : "";
       }
       if (multiple) {
@@ -380,7 +378,7 @@ const __sfc__ = defineComponent({
       if ((pt || t)("lang") === "zh-CN") {
         return `${selectionState.selectedMonth}-${showDay} ${weekName.slice(0, 3)}`;
       }
-      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${selectionState.selectedDay}`;
+      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${toNumber(selectionState.selectedDay)}`;
     });
     const dateSlotProps = computed(() => {
       var _a, _b;
@@ -396,7 +394,7 @@ const __sfc__ = defineComponent({
       };
     });
     const formattedRangeDays = computed(
-      () => selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.DayPadded))
+      () => selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.Day))
     );
     const selectedYearInPreview = computed(() => selectionState.selectedYear === previewYear.value);
     const selectedMonthInPreview = computed(() => selectionState.selectedMonth === previewMonth.value);
@@ -526,7 +524,7 @@ const __sfc__ = defineComponent({
     }
     function updateMultiple(selectedValue, pickerType) {
       const selectedMultipleValues = getMultipleValuesByType(pickerType);
-      const valueFormat = pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.DayPadded;
+      const valueFormat = pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.Day;
       const nextMultipleValues = selectedMultipleValues.map((date) => dayjs(date).format(valueFormat));
       const index = nextMultipleValues.findIndex((multipleValue) => multipleValue === selectedValue);
       const alreadySelected = index !== -1;
@@ -582,7 +580,7 @@ const __sfc__ = defineComponent({
         monthOffset,
         DatePickerUnits.Month
       );
-      const dayValue = `${targetMonthDayjsObject.format(DatePickerFormats.Month)}-${day}`;
+      const dayValue = targetMonthDayjsObject.date(day).format(DatePickerFormats.Day);
       if (!isSelectableDate(dayValue, DatePickerUnits.Day)) {
         return;
       }
@@ -592,7 +590,7 @@ const __sfc__ = defineComponent({
         previewMonth.value = targetMonthDayjsObject.format(DatePickerFormats.Month).split("-")[1];
         emitPreview();
       }
-      selectValue(dayjs(dayValue).format(DatePickerFormats.DayPadded), DatePickerTypes.Date);
+      selectValue(dayValue, DatePickerTypes.Date);
     }
     function selectMonthFromPanel(month) {
       const { type: pickerType, readonly } = props2;

package/es/date-picker/constants.mjs

@@ -14,8 +14,7 @@ const WeekHeader = ["0", "1", "2", "3", "4", "5", "6"];
 const DatePickerFormats = {
   Year: "YYYY",
   Month: "YYYY-MM",
-  Day: "YYYY-MM-D",
-  DayPadded: "YYYY-MM-DD"
+  Day: "YYYY-MM-DD"
 };
 const ShiftDirections = enumOf({
   Prev: "prev",

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.1'
+const version = '3.20.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.1'
+const version = '3.20.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'

package/es/themes/dark/uploader.mjs

@@ -4,6 +4,9 @@ var stdin_default = {
   "--uploader-file-name-background": "#303030",
   "--uploader-file-name-color": "#aaa",
   "--uploader-file-cover-background": "#303030",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-size": "24px",
   "--uploader-action-margin": "0 10px 10px 0",
   "--uploader-file-size": "80px",

package/es/themes/md3-dark/uploader.mjs

@@ -3,6 +3,9 @@ var stdin_default = {
   "--uploader-action-background": "var(--color-surface-container-highest)",
   "--uploader-file-name-background": "var(--color-surface-container-highest)",
   "--uploader-file-cover-background": "var(--color-surface-container-highest)",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-file-name-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",

package/es/themes/md3-light/uploader.mjs

@@ -3,6 +3,9 @@ var stdin_default = {
   "--uploader-action-background": "var(--color-surface-container-low)",
   "--uploader-file-name-background": "var(--color-surface-container-low)",
   "--uploader-file-cover-background": "var(--color-surface-container-low)",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-file-name-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",

package/es/uploader/Uploader.mjs

@@ -67,7 +67,15 @@ function __render__(_ctx, _cache) {
             _renderList(_ctx.files, (f) => {
               return _withDirectives((_openBlock(), _createElementBlock("div", {
                 key: f.id,
-                class: _normalizeClass(_ctx.classes(_ctx.n("file"), _ctx.formatElevation(_ctx.elevation, 2), [f.state === "loading", _ctx.n("--loading")])),
+                class: _normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("file"),
+                    [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
+                    [_ctx.variant === "outlined", _ctx.n("--outlined")],
+                    [_ctx.variant === "filled", _ctx.n("--filled")],
+                    [f.state === "loading", _ctx.n("--loading")]
+                  )
+                ),
                 onClick: ($event) => _ctx.preview(f)
               }, [
                 _createElementVNode(
@@ -139,7 +147,10 @@ function __render__(_ctx, _cache) {
             class: _normalizeClass(
               _ctx.classes(
                 _ctx.n("--outline-none"),
-                [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
+                [!_ctx.$slots.default, _ctx.n("action")],
+                [!_ctx.$slots.default && _ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
+                [!_ctx.$slots.default && _ctx.variant === "outlined", _ctx.n("--outlined")],
+                [!_ctx.$slots.default && _ctx.variant === "filled", _ctx.n("--filled")],
                 [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
               )
             ),

package/es/uploader/props.mjs

@@ -19,6 +19,10 @@ const props = {
     type: [Boolean, Number, String],
     default: true
   },
+  variant: {
+    type: String,
+    default: "standard"
+  },
   resolveType: {
     type: String,
     default: "default"

package/es/uploader/uploader.css

@@ -1 +1 @@
-:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-border-radius: 0; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-file-progress-color: var(--color-primary); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); border-radius: var(--uploader-file-border-radius); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}.var-uploader--outline-none { outline: none;}
+:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-border-radius: 0; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-outlined-background: transparent; --uploader-filled-background: hsl(0, 0%, 93%); --uploader-outline-color: var(--color-outline); --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-file-progress-color: var(--color-primary); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); border-radius: var(--uploader-file-border-radius); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--outlined { --uploader-action-background: var(--uploader-outlined-background); --uploader-file-name-background: var(--uploader-outlined-background); --uploader-file-cover-background: var(--uploader-outlined-background); border: thin solid var(--uploader-outline-color);}.var-uploader--filled { --uploader-action-background: var(--uploader-filled-background); --uploader-file-name-background: var(--uploader-filled-background); --uploader-file-cover-background: var(--uploader-filled-background);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}.var-uploader--outline-none { outline: none;}