savor-ui 0.15.2 → 0.15.3

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [0.15.3](https://gitee.com/mach552/savor-ui/compare/v0.15.2...v0.15.3) (2026-08-04)
+
+
+### Bug Fixes
+
+* **cascader:** 修复选择时输入框失焦问题 ([1bc1cc9](https://gitee.com/mach552/savor-ui/commits/1bc1cc9f7ac71d40897f691aa520ffa65622c7b4))
+* **upload:** 修复文件上传进度展示问题 ([46e4a45](https://gitee.com/mach552/savor-ui/commits/46e4a45d940bd7c529abe8ccc116ccf57c99d7c4))
+
 ## [0.15.2](https://gitee.com/mach552/savor-ui/compare/v0.15.1...v0.15.2) (2026-08-03)
 
 

package/dist/es/components/src/cascader/cascader.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -7,11 +7,11 @@ import { SPopover as r } from "../popover/index.mjs";
 import { SInput as i } from "../input/index.mjs";
 import { SEmpty as a } from "../empty/index.mjs";
 import o from "./cascader-column.vue.mjs";
-import { computed as s, createComponent as c, createComponentWithFallback as l, createIf as u, createInvoker as d, createTemplateRefSetter as f, defineVaporComponent as p, delegateEvents as m, mergeModels as h, on as g, onMounted as _, ref as v, renderEffect as y, resolveComponent as ee, setClass as b, setInsertionState as x, template as S, toRefs as C, unref as w, useModel as T, useTemplateRef as E, watch as te, withModifiers as ne } from "vue";
+import { computed as s, createComponent as c, createComponentWithFallback as l, createIf as u, createInvoker as d, createTemplateRefSetter as f, defineVaporComponent as p, delegateEvents as m, mergeModels as h, on as g, onMounted as _, ref as v, renderEffect as y, resolveComponent as ee, setClass as b, setInsertionState as x, template as S, toRefs as C, unref as w, useModel as T, useTemplateRef as E, watch as te, withModifiers as ne, withVaporModifiers as D } from "vue";
 //#region ../components/src/cascader/cascader.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var re = S("<div style=\"padding: 12px\">"), D = S("<div>"), O = S("<div>", 1);
-m("click");
-var k = /*@__PURE__*/ p({
+var O = S("<div style=\"padding: 12px\">"), k = S("<div>"), A = S("<div>", 1);
+m("mousedown", "click");
+var j = /*@__PURE__*/ p({
 	name: "SCascader",
 	__name: "cascader",
 	props: /*@__PURE__*/ h({
@@ -52,42 +52,42 @@ var k = /*@__PURE__*/ p({
 		"update:expanded"
 	]),
 	setup(p, { emit: m }) {
-		let h = p, S = e("cascader"), k = m, A = T(p, "modelValue"), { size: j, error: M } = C(h), { mergedSize: N, mergedError: P } = n({
-			size: j,
-			error: M
-		}), F = T(p, "expandedKeys"), I = T(p, "expanded"), L = s(() => ({
+		let h = p, S = e("cascader"), j = m, M = T(p, "modelValue"), { size: N, error: P } = C(h), { mergedSize: F, mergedError: I } = n({
+			size: N,
+			error: P
+		}), L = T(p, "expandedKeys"), R = T(p, "expanded"), z = s(() => ({
 			label: "label",
 			key: "key",
 			children: "children",
 			...h.fieldNames
-		})), R = v(""), z = v([]), B = (e) => h.pathMode ? e.map((e) => e[L.value.key]).join(h.pathSeparator) : e[e.length - 1][L.value.key], V = (e) => e.map((e) => e[L.value.label]).join(h.pathSeparator), H = ({ item: e, expandeds: t, unchecked: n }) => {
+		})), B = v(""), V = v([]), H = (e) => h.pathMode ? e.map((e) => e[z.value.key]).join(h.pathSeparator) : e[e.length - 1][z.value.key], U = (e) => e.map((e) => e[z.value.label]).join(h.pathSeparator), W = ({ item: e, expandeds: t, unchecked: n }) => {
 			if (h.multiple) {
-				let r = e[L.value.key], i = z.value.findIndex((e) => e[e.length - 1][L.value.key] === r);
-				n ? i !== -1 && (z.value = z.value.toSpliced(i, 1)) : i === -1 && (z.value = [...z.value, t]), A.value = z.value.map(B), R.value = z.value.map(V).join(", "), k("selectItem", {
+				let r = e[z.value.key], i = V.value.findIndex((e) => e[e.length - 1][z.value.key] === r);
+				n ? i !== -1 && (V.value = V.value.toSpliced(i, 1)) : i === -1 && (V.value = [...V.value, t]), M.value = V.value.map(H), B.value = V.value.map(U).join(", "), j("selectItem", {
 					item: e,
 					expandeds: t
 				});
 				return;
 			}
-			K(!1), R.value = V(t), A.value = B(t), k("selectItem", {
+			J(!1), B.value = U(t), M.value = H(t), j("selectItem", {
 				item: e,
 				expandeds: t
 			});
-		}, U = () => {
-			k("expand", F.value);
-		}, W = E("popoverRef"), G = v(!1), K = (e) => {
-			G.value = e, e ? W.value?.show() : W.value?.hide();
-		}, q = () => {
-			let e = !G.value;
-			e && Z(), K(e);
-		}, J = () => {
-			K(!1);
+		}, G = () => {
+			j("expand", L.value);
+		}, K = E("popoverRef"), q = v(!1), J = (e) => {
+			q.value = e, e ? K.value?.show() : K.value?.hide();
+		}, re = () => {
+			let e = !q.value;
+			e && Z(), J(e);
+		}, ie = () => {
+			J(!1);
 		}, Y = (e, t, n = []) => {
 			for (let r of e) {
 				let e = [...n, r];
-				if (r[L.value.key] === t) return e;
-				if (r[L.value.children]) {
-					let n = Y(r[L.value.children], t, e);
+				if (r[z.value.key] === t) return e;
+				if (r[z.value.children]) {
+					let n = Y(r[z.value.children], t, e);
 					if (n) return n;
 				}
 			}
@@ -95,58 +95,58 @@ var k = /*@__PURE__*/ p({
 		}, X = (e, t) => {
 			let n = [], r = e;
 			for (let e of t) {
-				let t = r.find((t) => t[L.value.key] === e);
+				let t = r.find((t) => t[z.value.key] === e);
 				if (!t) return null;
-				n.push(t), r = t[L.value.children] || [];
+				n.push(t), r = t[z.value.children] || [];
 			}
 			return n;
 		}, Z = () => {
-			if (A.value === void 0 || A.value === "") {
-				R.value = "", F.value = [], I.value = [], z.value = [];
+			if (M.value === void 0 || M.value === "") {
+				B.value = "", L.value = [], R.value = [], V.value = [];
 				return;
 			}
 			if (h.multiple) {
-				z.value = (Array.isArray(A.value) ? A.value : []).map((e) => {
+				V.value = (Array.isArray(M.value) ? M.value : []).map((e) => {
 					if (h.pathMode && typeof e == "string") {
 						let t = e.split(h.pathSeparator);
 						return X(h.options, t);
 					}
 					return Y(h.options, e);
-				}).filter((e) => e !== null), R.value = z.value.map(V).join(", ");
+				}).filter((e) => e !== null), B.value = V.value.map(U).join(", ");
 				return;
 			}
 			let e = null;
-			if (h.pathMode && typeof A.value == "string") {
-				let t = A.value.split(h.pathSeparator);
+			if (h.pathMode && typeof M.value == "string") {
+				let t = M.value.split(h.pathSeparator);
 				e = X(h.options, t);
-			} else Array.isArray(A.value) || (e = Y(h.options, A.value));
-			e && (F.value = e.map((e) => e[L.value.key]), I.value = e, R.value = V(e));
+			} else Array.isArray(M.value) || (e = Y(h.options, M.value));
+			e && (L.value = e.map((e) => e[z.value.key]), R.value = e, B.value = U(e));
 		}, Q = (e) => {
-			A.value === void 0 ? e.forEach((e) => {
-				F.value.includes(e[L.value.key]) && (R.value = R.value ? `${R.value}${h.pathSeparator}${e[L.value.label]}` : e[L.value.label], e[L.value.children] && Q(e[L.value.children]));
+			M.value === void 0 ? e.forEach((e) => {
+				L.value.includes(e[z.value.key]) && (B.value = B.value ? `${B.value}${h.pathSeparator}${e[z.value.label]}` : e[z.value.label], e[z.value.children] && Q(e[z.value.children]));
 			}) : Z();
-		}, ie = () => {
-			A.value = h.multiple ? [] : "", F.value = [], I.value = [], z.value = [], R.value = "", k("clear");
+		}, ae = () => {
+			M.value = h.multiple ? [] : "", L.value = [], R.value = [], V.value = [], B.value = "", j("clear");
 		};
-		te(A, () => {
+		te(M, () => {
 			Z();
 		}), _(() => {
 			Q(h.options);
 		});
-		let ae = f(), oe = ee("SIcon"), $ = O();
-		return y(() => b($, [w(S).b()])), x($, null, 0), ae(c(w(r), { $: [() => ({
+		let oe = f(), se = ee("SIcon"), $ = A();
+		return y(() => b($, [w(S).b()])), x($, null, 0), oe(c(w(r), { $: [() => ({
 			offset: [0, 4],
 			placement: "bottom-start",
 			manual: !0,
 			...p.popoverProps
-		}), { onClickOutside: () => J }] }, {
+		}), { onClickOutside: () => ie }] }, {
 			content: () => {
-				let e = D();
+				let e = k();
 				return y(() => b(e, [w(S).e("wrapper")])), x(e, null, 0), u(() => !p.options.length, () => {
-					let e = re();
+					let e = O();
 					return x(e, null, 0), c(w(a)), e;
 				}, () => {
-					let e = D();
+					let e = k();
 					return y(() => b(e, [w(S).e("panel")])), x(e, null, 0), c(o, {
 						expandTrigger: () => p.expandTrigger,
 						fieldNames: () => p.fieldNames,
@@ -155,35 +155,35 @@ var k = /*@__PURE__*/ p({
 						multiple: () => p.multiple,
 						pathMode: () => p.pathMode,
 						pathSeparator: () => p.pathSeparator,
-						onClickItem: () => H,
-						onExpand: () => U,
-						modelValue: () => A.value,
-						"onUpdate:modelValue": () => (e) => A.value = e,
-						expanded: () => I.value,
-						"onUpdate:expanded": () => (e) => I.value = e,
-						expandedKeys: () => F.value,
-						"onUpdate:expandedKeys": () => (e) => F.value = e
+						onClickItem: () => W,
+						onExpand: () => G,
+						modelValue: () => M.value,
+						"onUpdate:modelValue": () => (e) => M.value = e,
+						expanded: () => R.value,
+						"onUpdate:expanded": () => (e) => R.value = e,
+						expandedKeys: () => L.value,
+						"onUpdate:expandedKeys": () => (e) => L.value = e
 					}), e;
-				}, 261), g(e, "click", ne(() => {}, ["stop"])), e;
+				}, 261), g(e, "click", ne(() => {}, ["stop"])), e.$evtmousedown = D(() => {}, ["prevent"]), e;
 			},
 			default: () => c(w(i), {
 				placeholder: () => p.placeholder,
 				disabled: () => p.disabled,
-				error: () => w(P),
-				size: () => w(N),
+				error: () => w(I),
+				size: () => w(F),
 				filled: () => p.filled,
-				modelValue: () => R.value,
-				"onUpdate:modelValue": () => (e) => R.value = e,
+				modelValue: () => B.value,
+				"onUpdate:modelValue": () => (e) => B.value = e,
 				readonly: "",
 				clearable: () => p.clearable,
 				style: "width: 100%",
-				onClear: () => ie
-			}, { suffix: () => l(oe, {
+				onClear: () => ae
+			}, { suffix: () => l(se, {
 				class: () => [w(S).e("suffix-icon")],
-				style: () => ({ transform: G.value ? "rotate(180deg)" : "" })
+				style: () => ({ transform: q.value ? "rotate(180deg)" : "" })
 			}, () => c(w(t))) })
-		}), W, null, "popoverRef"), $.$evtclick = d(q), $;
+		}), K, null, "popoverRef"), $.$evtclick = d(re), $;
 	}
 });
 //#endregion
-export { k as default };
+export { j as default };

package/dist/es/components/src/upload/request.mjs

@@ -7,9 +7,9 @@ var e = (e) => {
 	return r.append(e.name, e.file), t.send(r), t.onprogress = (t) => {
 		e.onProgress?.(t.loaded / t.total * 100);
 	}, t.onload = () => {
-		e.onSuccess?.(t.response);
-	}, t.onerror = (t) => {
-		e.onError?.(t);
+		t.status >= 200 && t.status < 300 ? e.onSuccess?.(t.response) : e.onError?.(/* @__PURE__ */ Error(`Request failed with status ${t.status}`));
+	}, t.onerror = () => {
+		e.onError?.(/* @__PURE__ */ Error("Network error"));
 	}, t;
 };
 //#endregion

package/dist/es/components/src/upload/upload.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -11,13 +11,13 @@ import s from "../../../icons/src/upload.vue.mjs";
 import c from "../../../icons/src/zoom-in.vue.mjs";
 import "../../../icons/index.mjs";
 import { SButton as l } from "../button/index.mjs";
-import { SImagePreview as ee } from "../image/index.mjs";
-import { SProgress as u } from "../progress/index.mjs";
-import { httpRequest as d } from "./request.mjs";
+import { SImagePreview as u } from "../image/index.mjs";
+import { SProgress as d } from "../progress/index.mjs";
+import { httpRequest as ee } from "./request.mjs";
 import te from "./upload-drag.vue.mjs";
-import { child as f, computed as p, createComponent as m, createFor as h, createIf as g, createInvoker as _, createSlot as v, createTemplateRefSetter as ne, defineVaporComponent as y, delegateEvents as b, mergeModels as x, next as S, on as re, onUnmounted as ie, ref as C, renderEffect as w, setClass as T, setInsertionState as E, setProp as D, setText as ae, template as O, toDisplayString as oe, txt as se, unref as k, useModel as A, useTemplateRef as ce } from "vue";
+import { child as f, computed as p, createComponent as m, createFor as h, createIf as g, createInvoker as _, createSlot as v, createTemplateRefSetter as ne, defineVaporComponent as y, delegateEvents as b, mergeModels as x, next as S, on as re, onUnmounted as ie, ref as C, renderEffect as w, setClass as T, setInsertionState as E, setProp as D, setStyle as O, setText as ae, template as k, toDisplayString as oe, txt as se, unref as A, useModel as ce, useTemplateRef as le } from "vue";
 //#region ../components/src/upload/upload.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var le = O("<img>"), j = O("<div>"), ue = O("<div></div>"), de = O("<div><div> </div><div></div><div>"), fe = O("<div><input type=file>", 1);
+var ue = k("<img>"), j = k("<div>"), de = k("<div></div>"), fe = k("<div><div><div> </div><div></div><div>"), pe = k("<div><input type=file>", 1);
 b("click");
 var M = /*@__PURE__*/ y({
 	name: "SUpload",
@@ -66,22 +66,22 @@ var M = /*@__PURE__*/ y({
 		"remove"
 	], ["update:modelValue"]),
 	setup(y, { expose: b, emit: x }) {
-		let O = y, M = x, N = t("upload"), P = ce("inputRef"), F = C([]), I = A(y, "modelValue"), L = (e) => e ? e.split(",").map((e) => e.trim()).filter(Boolean) : [], R = p(() => L(I.value).map((e, t) => ({
+		let k = y, M = x, N = t("upload"), P = le("inputRef"), F = C([]), I = ce(y, "modelValue"), L = (e) => e ? e.split(",").map((e) => e.trim()).filter(Boolean) : [], R = p(() => L(I.value).map((e, t) => ({
 			uid: `model-${t}-${e}`,
 			name: decodeURIComponent(e.split("/").pop()?.split("?")[0] || e),
 			size: 0,
 			url: e,
 			status: "success",
 			percentage: 100
-		}))), z = p(() => [...F.value, ...R.value]), B = p(() => F.value.length + R.value.length), pe = p(() => !(O.limit && B.value >= O.limit)), V = C(!1), H = C(""), U = /* @__PURE__ */ new Map(), me = (e) => e.type.startsWith("image/"), W = (e) => {
+		}))), z = p(() => [...F.value, ...R.value]), B = p(() => F.value.length + R.value.length), me = p(() => !(k.limit && B.value >= k.limit)), V = C(!1), H = C(""), U = /* @__PURE__ */ new Map(), he = (e) => e.type.startsWith("image/"), W = (e) => {
 			e && e.startsWith("blob:") && URL.revokeObjectURL(e);
 		}, G = () => {
-			O.disabled || P.value?.click();
+			k.disabled || P.value?.click();
 		}, K = (t) => {
 			let n = [];
 			for (let e of t) n.push(e);
-			if (O.limit) {
-				let t = O.limit - B.value;
+			if (k.limit) {
+				let t = k.limit - B.value;
 				if (t <= 0) {
 					M("exceed", z.value);
 					return;
@@ -101,18 +101,18 @@ var M = /*@__PURE__*/ y({
 					name: t.name,
 					size: t.size,
 					raw: t,
-					url: me(t) ? URL.createObjectURL(t) : void 0,
+					url: he(t) ? URL.createObjectURL(t) : void 0,
 					status: "ready",
 					percentage: 0
 				};
 				F.value = [...F.value, n];
 			}
-			M("change", z.value), O.autoUpload && Z();
-		}, he = (e) => {
+			M("change", z.value), k.autoUpload && Z();
+		}, ge = (e) => {
 			let t = e.target, n = t.files;
 			n && K(n), t.value = "";
-		}, ge = (e) => {
-			O.disabled || K(e);
+		}, _e = (e) => {
+			k.disabled || K(e);
 		}, q = (e) => {
 			if (e.uid.startsWith("model-")) {
 				I.value = L(I.value).filter((t) => t !== e.url).join(","), M("remove", e, z.value), M("change", z.value);
@@ -122,18 +122,18 @@ var M = /*@__PURE__*/ y({
 			t !== -1 && (W(e.url), F.value = F.value.toSpliced(t, 1), M("remove", e, z.value), M("change", z.value));
 		}, J = (e) => {
 			Z(e);
-		}, _e = (e) => {
+		}, Y = (e) => {
 			let t = U.get(e.uid);
 			t && (t.abort(), U.delete(e.uid), X(e.uid, { status: "error" }));
-		}, Y = (e) => {
+		}, ve = (e) => {
 			H.value = e.url || "", V.value = !0, M("preview", e);
 		}, X = (e, t) => {
 			let n = F.value.findIndex((t) => t.uid === e);
-			n !== -1 && (F.value[n] = {
-				...F.value[n],
+			n !== -1 && (F.value = F.value.map((e, r) => r === n ? {
+				...e,
 				...t
-			}, F.value = [...F.value]);
-		}, ve = (e) => {
+			} : e));
+		}, ye = (e) => {
 			if (!e) return;
 			let t = L(I.value);
 			t.includes(e) || (t.push(e), I.value = t.join(","));
@@ -141,7 +141,7 @@ var M = /*@__PURE__*/ y({
 			let t = async (e) => {
 				if (e.status === "uploading" || !e.raw) return;
 				try {
-					await O.beforeUpload?.(e);
+					await k.beforeUpload?.(e);
 				} catch {
 					return;
 				}
@@ -149,18 +149,18 @@ var M = /*@__PURE__*/ y({
 					status: "uploading",
 					percentage: 0
 				});
-				let t = d({
+				let t = ee({
 					method: "POST",
 					file: e.raw,
-					name: O.name,
-					action: O.action,
-					headers: O.headers,
-					data: O.data,
+					name: k.name,
+					action: k.action,
+					headers: k.headers,
+					data: k.data,
 					onProgress: (t) => {
 						X(e.uid, { percentage: t }), M("progress", e, t);
 					},
 					onSuccess: (t) => {
-						ve(O.afterSuccess?.(e, t) ?? "");
+						ye(k.afterSuccess?.(e, t) ?? "");
 						let n = F.value.findIndex((t) => t.uid === e.uid);
 						n !== -1 && (W(e.url), F.value = F.value.toSpliced(n, 1)), U.delete(e.uid), M("success", e, t);
 					},
@@ -178,95 +178,110 @@ var M = /*@__PURE__*/ y({
 		ie(() => {
 			U.forEach((e) => e.abort()), U.clear(), F.value.forEach((e) => W(e.url));
 		}), b({ upload: Z });
-		let ye = ne(), Q = fe(), $ = f(Q);
-		return re($, "change", he), ye($, P, null, "inputRef"), w(() => {
-			let e = k(N);
+		let be = ne(), Q = pe(), $ = f(Q);
+		return re($, "change", ge), be($, P, null, "inputRef"), w(() => {
+			let e = A(N);
 			T(Q, [
 				e.b(),
 				e.is("picture", y.picture),
-				e.is("disabled", O.disabled)
+				e.is("disabled", k.disabled)
 			]), T($, [e.e("inner")]), D($, "multiple", y.multiple), D($, "accept", y.accept);
 		}), E(Q, null, 1), g(() => y.picture, () => {
 			let e = j();
-			return w(() => T(e, [k(N).e("picture-wall")])), E(e, null, 0), h(() => z.value, (e) => {
+			return w(() => T(e, [A(N).e("picture-wall")])), E(e, null, 0), h(() => z.value, (e) => {
 				let t = j();
 				return w(() => {
-					let n = k(N);
+					let n = A(N);
 					T(t, [n.e("picture-item"), n.is(e.value.status)]);
 				}), E(t, null, 0), g(() => e.value.url, () => {
-					let t = le();
+					let t = ue();
 					return w(() => {
 						let n = e.value;
-						D(t, "src", n.url), T(t, [k(N).e("picture-thumb")]), D(t, "alt", n.name);
+						D(t, "src", n.url), T(t, [A(N).e("picture-thumb")]), D(t, "alt", n.name);
 					}), t;
 				}, () => {
 					let e = j();
-					return w(() => T(e, [k(N).e("picture-placeholder")])), E(e, null, 0), m(k(i)), e;
+					return w(() => T(e, [A(N).e("picture-placeholder")])), E(e, null, 0), m(A(i)), e;
 				}, 261), E(t, null, 1), g(() => e.value.status === "uploading", () => {
 					let t = j();
-					return w(() => T(t, [k(N).e("picture-loading")])), E(t, null, 0), m(k(u), {
+					return w(() => {
+						T(t, [A(N).e("picture-progress-bar")]), O(t, { height: 100 - (e.value.percentage ?? 0) + "%" });
+					}), t;
+				}), E(t, null, 2), g(() => e.value.status === "uploading", () => {
+					let t = j();
+					return w(() => T(t, [A(N).e("picture-loading")])), E(t, null, 0), m(A(d), {
 						percent: () => parseInt((e.value.percentage / 100).toFixed(1)),
 						type: "primary"
 					}), t;
 				}, () => {
 					let t = j();
-					return w(() => T(t, [k(N).e("picture-mask")])), E(t, null, 0), g(() => !O.disabled && !y.autoUpload && y.showUpload && (e.value.status === "ready" || e.value.status === "error"), () => {
+					return w(() => T(t, [A(N).e("picture-mask")])), E(t, null, 0), g(() => !k.disabled && !y.autoUpload && y.showUpload && e.value.status === "ready", () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(s)), t.$evtclick = _(() => Z(e.value)), t;
+						return w(() => T(t, [A(N).e("picture-action")])), E(t, null, 0), m(A(s)), t.$evtclick = _(() => Z(e.value)), t;
 					}), E(t, null, 1), g(() => e.value.url, () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(c)), t.$evtclick = _(() => Y(e.value)), t;
-					}), E(t, null, 2), g(() => !O.disabled && y.showRetry && e.value.status === "error", () => {
+						return w(() => T(t, [A(N).e("picture-action")])), E(t, null, 0), m(A(c)), t.$evtclick = _(() => ve(e.value)), t;
+					}), E(t, null, 2), g(() => !k.disabled && y.showRetry && e.value.status === "error", () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(o)), t.$evtclick = _(() => J(e.value)), t;
-					}), E(t, null, 3), g(() => !O.disabled, () => {
+						return w(() => T(t, [A(N).e("picture-action")])), E(t, null, 0), m(A(o)), t.$evtclick = _(() => J(e.value)), t;
+					}), E(t, null, 3), g(() => !k.disabled, () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(r)), t.$evtclick = _(() => q(e.value)), t;
+						return w(() => T(t, [A(N).e("picture-action")])), E(t, null, 0), m(A(r)), t.$evtclick = _(() => q(e.value)), t;
 					}), t;
-				}, 517), t;
-			}, (e) => e.uid, 8), E(e, null, 1), g(() => pe.value, () => {
+				}, 773), t;
+			}, (e) => e.uid, 8), E(e, null, 1), g(() => me.value, () => {
 				let e = j();
-				return w(() => T(e, [k(N).e("picture-trigger")])), E(e, null, 0), v("trigger", null, () => m(k(a))), e.$evtclick = _(G), e;
+				return w(() => T(e, [A(N).e("picture-trigger")])), E(e, null, 0), v("trigger", null, () => m(A(a))), e.$evtclick = _(G), e;
 			}), e;
 		}, () => {
-			let e = ue();
-			return w(() => T(e, [k(N).e("content")])), E(e, null, 0), g(() => y.drag, () => m(te, {
-				disabled: () => O.disabled,
+			let e = de();
+			return w(() => T(e, [A(N).e("content")])), E(e, null, 0), g(() => y.drag, () => m(te, {
+				disabled: () => k.disabled,
 				onClick: () => G,
-				onChange: () => ge
+				onChange: () => _e
 			}, () => v("drag", null, null, 4)), () => {
 				let e = j();
-				return w(() => T(e, [k(N).e("btn")])), E(e, null, 0), v("btn", null, () => m(k(l), {
+				return w(() => T(e, [A(N).e("btn")])), E(e, null, 0), v("btn", null, () => m(A(l), {
 					type: "primary",
 					label: "选择文件",
-					disabled: () => O.disabled
+					disabled: () => k.disabled
 				})), e.$evtclick = _(G), e;
-			}, 2309), [e, g(() => y.showList && z.value.length > 0, () => {
+			}, 2565), [e, g(() => y.showList && z.value.length > 0, () => {
 				let e = j();
-				return w(() => T(e, [k(N).e("list")])), E(e, null, 0), h(() => z.value, (e) => {
-					let t = de(), i = f(t), a = S(i, 1), c = S(a, 2), l = se(i);
+				return w(() => T(e, [A(N).e("list")])), E(e, null, 0), h(() => z.value, (e) => {
+					let t = fe(), i = f(t, 1), a = f(i), c = S(a, 1), l = S(c, 2);
+					w(() => {
+						let n = A(N);
+						T(t, [n.e("item"), n.is(e.value.status, !0)]);
+					}), E(t, 0, 0), g(() => e.value.status === "uploading", () => {
+						let t = j();
+						return w(() => {
+							T(t, [A(N).e("progress-bar")]), O(t, { width: (e.value.percentage ?? 0) + "%" });
+						}), t;
+					});
+					let u = se(a);
 					return w(() => {
-						let n = k(N), r = e.value;
-						T(t, [n.e("item"), n.is(r.status)]), T(i, [n.e("name")]), ae(l, oe(r.name)), T(a, [n.e("progress")]);
-					}), E(a, null, 0), g(() => e.value.percentage && e.value.status === "uploading", () => m(k(u), {
+						let t = A(N);
+						T(i, [t.e("item-content")]), T(a, [t.e("name")]), ae(u, oe(e.value.name)), T(c, [t.e("progress")]);
+					}), E(c, null, 0), g(() => e.value.percentage && e.value.status === "uploading", () => m(A(d), {
 						percent: () => parseInt((e.value.percentage / 100).toFixed(1)),
 						type: "primary"
-					})), w(() => T(c, [k(N).e("actions")])), E(c, null, 0), g(() => !O.disabled && !y.autoUpload && y.showUpload && (e.value.status === "ready" || e.value.status === "error"), () => {
+					})), w(() => T(l, [A(N).e("actions")])), E(l, null, 0), g(() => !k.disabled && !y.autoUpload && y.showUpload && e.value.status === "ready", () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(s)), t.$evtclick = _(() => Z(e.value)), t;
-					}), E(c, null, 1), g(() => !O.disabled && y.showRetry && e.value.status === "error", () => {
+						return w(() => T(t, [A(N).e("action")])), E(t, null, 0), m(A(s)), t.$evtclick = _(() => Z(e.value)), t;
+					}), E(l, null, 1), g(() => !k.disabled && y.showRetry && e.value.status === "error", () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(o)), t.$evtclick = _(() => J(e.value)), t;
-					}), E(c, null, 2), g(() => !O.disabled && y.showCancel && e.value.status === "uploading", () => {
+						return w(() => T(t, [A(N).e("action")])), E(t, null, 0), m(A(o)), t.$evtclick = _(() => J(e.value)), t;
+					}), E(l, null, 2), g(() => !k.disabled && y.showCancel && e.value.status === "uploading", () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(n)), t.$evtclick = _(() => _e(e.value)), t;
-					}), E(c, null, 3), g(() => !O.disabled, () => {
+						return w(() => T(t, [A(N).e("action")])), E(t, null, 0), m(A(n)), t.$evtclick = _(() => Y(e.value)), t;
+					}), E(l, null, 3), g(() => !k.disabled, () => {
 						let t = j();
-						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(r)), t.$evtclick = _(() => q(e.value)), t;
+						return w(() => T(t, [A(N).e("action")])), E(t, null, 0), m(A(r)), t.$evtclick = _(() => q(e.value)), t;
 					}), t;
 				}, (e) => e.uid, 9), e;
 			})];
-		}, 2057), E(Q, null, 2), m(k(ee), {
+		}, 2313), E(Q, null, 2), m(A(u), {
 			modelValue: () => V.value,
 			"onUpdate:modelValue": () => (e) => V.value = e,
 			src: () => H.value

package/dist/es/theme/components/button.scss

@@ -279,7 +279,7 @@
 }
 
 @include b(button-group) {
-  display: flex;
+  display: inline-flex;
   @include b(button) {
     &:not(:last-child) {
       border-top-right-radius: 0;

package/dist/es/theme/components/textarea.scss

@@ -100,6 +100,7 @@
     vertical-align: top;
     resize: vertical;
     color: getCssVar("color", "text-1");
+    font-family: inherit;
     &::placeholder {
       color: getCssVar("color", "text-3");
     }

package/dist/es/theme/components/upload.scss

@@ -45,12 +45,37 @@
     gap: 4px;
   }
   @include e(item) {
+    position: relative;
+    overflow: hidden;
     display: flex;
     align-items: center;
     background-color: getCssVar("color", "fill-2");
     padding: 8px 12px;
     gap: 12px;
     border-radius: getCssVar("radius", "medium");
+    @include when(success) {
+      background-color: getCssVar("color", "success-1");
+    }
+    @include when(error) {
+      background-color: getCssVar("color", "danger-1");
+    }
+  }
+  @include e(progress-bar) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: getCssVar("color", "primary-1");
+    transition: width 0.2s getCssVar("bezier", "1");
+    z-index: 0;
+  }
+  @include e(item-content) {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
   }
   @include e(name) {
     max-width: 200px;
@@ -127,6 +152,16 @@
       }
     }
   }
+  @include e(picture-progress-bar) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: getCssVar("color", "primary-1");
+    transition: height 0.2s getCssVar("bezier", "1");
+    z-index: 0;
+    pointer-events: none;
+  }
   @include e(picture-thumb) {
     width: 100%;
     height: 100%;

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",