@varlet/ui 3.20.1 → 3.20.3

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3362,7 +3362,7 @@
             },
             {
               "name": "allowed-dates",
-              "description": "Selectable date filter",
+              "description": "Selectable date filter. The value format follows `type`: `year` uses `YYYY`, `month` uses `YYYY-MM`, and `date` / `datetime` use `YYYY-MM-DD`",
               "default": "-",
               "value": {
                 "type": "(value: string) => boolean",
@@ -10117,9 +10117,18 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "variant",
+              "description": "Appearance variant, optional values are `standard` `outlined` `filled`",
+              "default": "standard",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "elevation",
-              "description": "Elevation level, options `true` `false` and level of `0-24`, not in simple mode",
+              "description": "Elevation level, options `true` `false` and level of `0-24`, only effective with the `standard` variant",
               "default": "true",
               "value": {
                 "type": "string | number | boolean",

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3113,7 +3113,7 @@
             },
             {
               "name": "allowed-dates",
-              "description": "可选日期过滤函数",
+              "description": "可选日期过滤函数，参数格式随 `type` 变化：`year` 使用 `YYYY`，`month` 使用 `YYYY-MM`，`date` / `datetime` 使用 `YYYY-MM-DD`",
               "default": "-",
               "value": {
                 "type": "(value: string) => boolean",
@@ -10036,9 +10036,18 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "variant",
+              "description": "外观类型，可选值为 `standard` `outlined` `filled`",
+              "default": "standard",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "elevation",
-              "description": "海拔高度，可选值为 `true` `false` 和 `0-24` 的等级, 不为简单模式时生效",
+              "description": "海拔高度，可选值为 `true` `false` 和 `0-24` 的等级，仅在 `standard` 外观下生效",
               "default": "true",
               "value": {
                 "type": "string | number | boolean",

package/lib/varlet.cjs.js

@@ -15421,8 +15421,7 @@ var WeekHeader = [
 var DatePickerFormats = {
 	Year: "YYYY",
 	Month: "YYYY-MM",
-	Day: "YYYY-MM-D",
-	DayPadded: "YYYY-MM-DD"
+	Day: "YYYY-MM-DD"
 };
 var ShiftDirections = enumOf({
 	Prev: "prev",
@@ -16319,7 +16318,7 @@ var __sfc__$60 = (0, vue.defineComponent)({
 			var _a, _b, _c, _d;
 			const { multiple, range } = props2;
 			if (range) {
-				const formattedDays = selectionState.selectedRangeDays.map((date) => dayjs$1(date).format(DatePickerFormats.DayPadded));
+				const formattedDays = selectionState.selectedRangeDays.map((date) => dayjs$1(date).format(DatePickerFormats.Day));
 				return formattedDays.length ? formattedDays.join(" ~ ") : "";
 			}
 			if (multiple) return `${selectionState.selectedDays.length}${(pt || t)("datePickerSelected")}`;
@@ -16330,7 +16329,7 @@ var __sfc__$60 = (0, vue.defineComponent)({
 			const monthName = (_d = (_c = (pt || t)("datePickerMonthDict")) == null ? void 0 : _c[selectionState.selectedMonth].name) != null ? _d : "";
 			const showDay = padStart(selectionState.selectedDay, 2, "0");
 			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 = (0, vue.computed)(() => {
 			var _a, _b;
@@ -16343,7 +16342,7 @@ var __sfc__$60 = (0, vue.defineComponent)({
 				date: day
 			};
 		});
-		const formattedRangeDays = (0, vue.computed)(() => selectionState.selectedRangeDays.map((date) => dayjs$1(date).format(DatePickerFormats.DayPadded)));
+		const formattedRangeDays = (0, vue.computed)(() => selectionState.selectedRangeDays.map((date) => dayjs$1(date).format(DatePickerFormats.Day)));
 		const selectedYearInPreview = (0, vue.computed)(() => selectionState.selectedYear === previewYear.value);
 		const selectedMonthInPreview = (0, vue.computed)(() => selectionState.selectedMonth === previewMonth.value);
 		let shouldKeepPreviewOnModelValueChange = false;
@@ -16452,7 +16451,7 @@ var __sfc__$60 = (0, vue.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$1(date).format(valueFormat));
 			const index = nextMultipleValues.findIndex((multipleValue) => multipleValue === selectedValue);
 			const alreadySelected = index !== -1;
@@ -16491,7 +16490,7 @@ var __sfc__$60 = (0, vue.defineComponent)({
 			const { readonly } = props2;
 			if (readonly) return;
 			const targetMonthDayjsObject = dayjs$1(`${previewYear.value}-${previewMonth.value}-01`).add(monthOffset, DatePickerUnits.Month);
-			const dayValue = `${targetMonthDayjsObject.format(DatePickerFormats.Month)}-${day}`;
+			const dayValue = targetMonthDayjsObject.date(day).format(DatePickerFormats.Day);
 			if (!isSelectableDate(dayValue, DatePickerUnits.Day)) return;
 			reverse.value = monthOffset !== 0 ? monthOffset < 0 : getReverse(DatePickerUnits.Day, day);
 			if (monthOffset !== 0) {
@@ -16499,7 +16498,7 @@ var __sfc__$60 = (0, vue.defineComponent)({
 				previewMonth.value = targetMonthDayjsObject.format(DatePickerFormats.Month).split("-")[1];
 				emitPreview();
 			}
-			selectValue(dayjs$1(dayValue).format(DatePickerFormats.DayPadded), DatePickerTypes.Date);
+			selectValue(dayValue, DatePickerTypes.Date);
 		}
 		function selectMonthFromPanel(month) {
 			const { type: pickerType, readonly } = props2;
@@ -28195,6 +28194,9 @@ var stdin_default$268 = {
 	"--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",
@@ -29569,6 +29571,9 @@ var stdin_default$192 = {
 	"--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",
@@ -30927,6 +30932,9 @@ var stdin_default$116 = {
 	"--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",
@@ -32150,6 +32158,10 @@ var props$90 = {
 		],
 		default: true
 	},
+	variant: {
+		type: String,
+		default: "standard"
+	},
 	resolveType: {
 		type: String,
 		default: "default"
@@ -32235,7 +32247,7 @@ function __render__$1(_ctx, _cache) {
 		(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.n("file-list")) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.files, (f) => {
 			return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: f.id,
-				class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n("file"), _ctx.formatElevation(_ctx.elevation, 2), [f.state === "loading", _ctx.n("--loading")])),
+				class: (0, vue.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)
 			}, [
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.n("file-name")) }, (0, vue.toDisplayString)(f.name || f.url), 3),
@@ -32268,7 +32280,7 @@ function __render__$1(_ctx, _cache) {
 		}), 128)), !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 			key: 0,
 			ref: "actionRef",
-			class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n("--outline-none"), [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`], [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")])),
+			class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n("--outline-none"), [!_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")])),
 			tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
 			onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args)),
 			onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
@@ -32818,7 +32830,7 @@ var _WatermarkComponent = stdin_default$108;
 var stdin_default$102 = stdin_default$108;
 //#endregion
 //#region es/index.bundle.mjs
-var version = "3.20.1";
+var version = "3.20.3";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);