savor-ui 0.15.2 → 0.15.4

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [0.15.4](https://gitee.com/mach552/savor-ui/compare/v0.15.3...v0.15.4) (2026-08-04)
+
+
+### Bug Fixes
+
+* **cascader:** 修复输入框聚焦逻辑 ([a2b0716](https://gitee.com/mach552/savor-ui/commits/a2b07160fd609dfeaaf720ff5f8be8d1403c2eac))
+* **popover:** 修复切换页面后无法关闭问题 ([ffaf459](https://gitee.com/mach552/savor-ui/commits/ffaf4591e5485eb086ca8cb48e03fa9a3bcabe56))
+
+## [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-column.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -5,9 +5,9 @@ import "../../../icons/index.mjs";
 import { SScrollbar as n } from "../scrollbar/index.mjs";
 import { SCheckbox as r } from "../checkbox/index.mjs";
 import { SRadio as i } from "../radio/index.mjs";
-import { child as a, computed as o, createComponent as s, createComponentWithFallback as c, createFor as l, createIf as u, defineVaporComponent as d, mergeModels as f, nextTick as p, on as m, onMounted as h, ref as g, renderEffect as _, resolveComponent as v, setClass as y, setInsertionState as b, setProp as x, setStaticTemplateRef as S, setStyle as C, setText as w, template as T, toDisplayString as E, txt as D, unref as O, useModel as k, useTemplateRef as ee, watch as A, withModifiers as j } from "vue";
+import { child as a, computed as o, createComponent as s, createComponentWithFallback as c, createFor as l, createIf as u, defineVaporComponent as d, mergeModels as f, nextTick as p, on as m, onMounted as h, ref as g, renderEffect as _, resolveComponent as ee, setClass as v, setInsertionState as y, setProp as b, setStaticTemplateRef as x, setStyle as S, setText as C, template as w, toDisplayString as T, txt as E, unref as D, useModel as O, useTemplateRef as k, watch as A, withModifiers as j } from "vue";
 //#region ../components/src/cascader/cascader-column.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var M = T("<div>"), N = T("<div><div> </div>"), P = /*@__PURE__*/ d({
+var M = w("<div>"), N = w("<div><div> </div>"), P = /*@__PURE__*/ d({
 	name: "SCascaderColumn",
 	__name: "cascader-column",
 	props: /*@__PURE__*/ f({
@@ -47,12 +47,12 @@ var M = T("<div>"), N = T("<div><div> </div>"), P = /*@__PURE__*/ d({
 	]),
 	__multiRoot: !0,
 	setup(d, { emit: f }) {
-		let T = f, P = d, F = f, I = e("cascader"), L = o(() => ({
+		let w = f, P = d, F = f, I = e("cascader"), L = o(() => ({
 			label: "label",
 			key: "key",
 			children: "children",
 			...P.fieldNames
-		})), R = ee("scrollbarRef"), z = k(d, "modelValue"), B = k(d, "expandedKeys"), V = k(d, "expanded"), H = g([]), U = g([]), W = g(!0), G = o(() => {
+		})), R = k("scrollbarRef"), z = O(d, "modelValue"), B = O(d, "expandedKeys"), V = O(d, "expanded"), H = g([]), U = g([]), W = g(!0), G = o(() => {
 			let e = z.value;
 			if (!Array.isArray(e)) {
 				if (P.pathMode && typeof e == "string" && e !== "") {
@@ -104,44 +104,46 @@ var M = T("<div>"), N = T("<div><div> </div>"), P = /*@__PURE__*/ d({
 				});
 			});
 		});
-		let ne = v("CascaderColumn", !0), $ = M();
-		return _(() => y($, [O(I).e("column")])), b($, null, 0), S(s(O(n), { height: "100%" }, () => {
+		let ne = ee("CascaderColumn", !0), $ = M();
+		return _(() => v($, [D(I).e("column")])), y($, null, 0), x(s(D(n), { height: "100%" }, () => {
 			let e = M();
-			return _(() => y(e, [O(I).e("list")])), b(e, null, 0), l(() => H.value, (e) => {
+			return _(() => v(e, [D(I).e("list")])), y(e, null, 0), l(() => H.value, (e) => {
 				let n = N(), o = a(n, 1);
 				_(() => {
-					let t = O(I), r = L.value;
-					y(n, [t.e("item"), t.is("checked", e.value[r.key] === B.value[d.id])]);
-				}), b(n, 0, 0), u(() => d.checkStrictly || d.multiple, () => {
+					let t = D(I), r = L.value;
+					v(n, [t.e("item"), t.is("checked", e.value[r.key] === B.value[d.id])]);
+				}), y(n, 0, 0), u(() => d.checkStrictly || d.multiple, () => {
 					let t = M();
-					return _(() => y(t, [O(I).e("check")])), b(t, null, 0), u(() => d.checkStrictly && !d.multiple, () => {
-						let t = () => Y(e.value), n = () => {};
-						return s(O(i), {
+					return _(() => v(t, [D(I).e("check")])), y(t, null, 0), u(() => d.checkStrictly && !d.multiple, () => {
+						let t = () => Y(e.value), n = () => {}, r = () => {};
+						return s(D(i), {
 							value: () => e.value[L.value.key],
 							"model-value": () => G.value,
 							onChange: () => t,
-							onClick: () => j(n, ["stop"])
+							onClick: () => j(n, ["stop"]),
+							onMousedown: () => j(r, ["prevent"])
 						});
 					}, () => u(() => d.multiple, () => {
-						let t = (t) => X(t, e.value), n = () => {};
-						return s(O(r), {
+						let t = (t) => X(t, e.value), n = () => {}, i = () => {};
+						return s(D(r), {
 							"model-value": () => q(e.value),
 							onChange: () => t,
-							onClick: () => j(n, ["stop"])
+							onClick: () => j(n, ["stop"]),
+							onMousedown: () => j(i, ["prevent"])
 						});
 					}), 261), t;
 				});
-				let c = D(o);
+				let c = E(o);
 				return _(() => {
 					let t = L.value;
-					y(o, [O(I).e("label")]), C(o, { padding: d.checkStrictly || d.multiple ? "0 12px" : "0 16px" }), w(c, E(e.value[t.label]));
-				}), b(n, null, 2), u(() => e.value.isFolder, () => {
+					v(o, [D(I).e("label")]), S(o, { padding: d.checkStrictly || d.multiple ? "0 12px" : "0 16px" }), C(c, T(e.value[t.label]));
+				}), y(n, null, 2), u(() => e.value.isFolder, () => {
 					let e = M();
-					return _(() => y(e, [O(I).e("arrow")])), b(e, null, 0), s(O(t)), e;
-				}), m(n, "click", j(() => J(e.value), ["stop"])), m(n, "mouseenter", j(() => te(e.value), ["stop"])), x(n, "id", `item-${e.value[L.value.key]}`), n;
+					return _(() => v(e, [D(I).e("arrow")])), y(e, null, 0), s(D(t)), e;
+				}), m(n, "click", j(() => J(e.value), ["stop"])), m(n, "mouseenter", j(() => te(e.value), ["stop"])), b(n, "id", `item-${e.value[L.value.key]}`), n;
 			}, (e) => e[L.value.key], 9), e;
 		}), R, null, "scrollbarRef"), [$, u(() => U.value.length > 0 && W.value, () => {
-			let e = (e) => T("clickItem", e), t = (e) => T("expand", e);
+			let e = (e) => w("clickItem", e), t = (e) => w("expand", e);
 			return c(ne, {
 				options: () => U.value,
 				onClickItem: () => e,

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

@@ -6,15 +6,15 @@ import { useFormItem as n } from "../form/use-form-item.mjs";
 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 ee from "./cascader-column.vue.mjs";
+import { computed as o, createComponent as s, createComponentWithFallback as c, createIf as te, createInvoker as l, createTemplateRefSetter as u, defineVaporComponent as d, delegateEvents as f, mergeModels as p, on as m, onMounted as h, ref as g, renderEffect as _, resolveComponent as ne, setClass as v, setInsertionState as y, template as b, toRefs as x, unref as S, useModel as C, useTemplateRef as w, watch as T, withModifiers as E, 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 re = b("<div style=\"padding: 12px\">"), ie = b("<div>"), ae = b("<div data-skip-blur-validation>"), oe = b("<div>", 1);
+f("mousedown", "focusin", "click");
+var O = /*@__PURE__*/ d({
 	name: "SCascader",
 	__name: "cascader",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ p({
 		modelValue: {},
 		options: { default: () => [] },
 		placeholder: { default: "请选择" },
@@ -42,7 +42,7 @@ var k = /*@__PURE__*/ p({
 		expanded: { default: () => [] },
 		expandedModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h([
+	emits: /*@__PURE__*/ p([
 		"selectItem",
 		"expand",
 		"clear"
@@ -51,48 +51,50 @@ var k = /*@__PURE__*/ p({
 		"update:expandedKeys",
 		"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({
+	setup(d, { emit: f }) {
+		let p = d, b = e("cascader"), O = f, k = w("inputRef"), A = C(d, "modelValue"), { size: j, error: M } = x(p), { mergedSize: N, mergedError: P } = n({
 			size: j,
 			error: M
-		}), F = T(p, "expandedKeys"), I = T(p, "expanded"), L = s(() => ({
+		}), F = C(d, "expandedKeys"), I = C(d, "expanded"), L = o(() => ({
 			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 }) => {
-			if (h.multiple) {
+			...p.fieldNames
+		})), R = g(""), z = g([]), B = (e) => p.pathMode ? e.map((e) => e[L.value.key]).join(p.pathSeparator) : e[e.length - 1][L.value.key], V = (e) => e.map((e) => e[L.value.label]).join(p.pathSeparator), H = ({ item: e, expandeds: t, unchecked: n }) => {
+			if (p.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", {
+				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(", "), O("selectItem", {
 					item: e,
 					expandeds: t
 				});
 				return;
 			}
-			K(!1), R.value = V(t), A.value = B(t), k("selectItem", {
+			R.value = V(t), A.value = B(t), O("selectItem", {
 				item: e,
 				expandeds: t
-			});
+			}), K(!1);
 		}, U = () => {
-			k("expand", F.value);
-		}, W = E("popoverRef"), G = v(!1), K = (e) => {
+			O("expand", F.value);
+		}, W = w("popoverRef"), G = g(!1), K = (e) => {
 			G.value = e, e ? W.value?.show() : W.value?.hide();
-		}, q = () => {
+		}, se = () => {
 			let e = !G.value;
-			e && Z(), K(e);
-		}, J = () => {
+			e && Y(), K(e);
+		}, ce = () => {
 			K(!1);
-		}, Y = (e, t, n = []) => {
+		}, le = (e) => {
+			e.target && k.value?.focus();
+		}, q = (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);
+					let n = q(r[L.value.children], t, e);
 					if (n) return n;
 				}
 			}
 			return null;
-		}, X = (e, t) => {
+		}, J = (e, t) => {
 			let n = [], r = e;
 			for (let e of t) {
 				let t = r.find((t) => t[L.value.key] === e);
@@ -100,61 +102,61 @@ var k = /*@__PURE__*/ p({
 				n.push(t), r = t[L.value.children] || [];
 			}
 			return n;
-		}, Z = () => {
+		}, Y = () => {
 			if (A.value === void 0 || A.value === "") {
 				R.value = "", F.value = [], I.value = [], z.value = [];
 				return;
 			}
-			if (h.multiple) {
+			if (p.multiple) {
 				z.value = (Array.isArray(A.value) ? A.value : []).map((e) => {
-					if (h.pathMode && typeof e == "string") {
-						let t = e.split(h.pathSeparator);
-						return X(h.options, t);
+					if (p.pathMode && typeof e == "string") {
+						let t = e.split(p.pathSeparator);
+						return J(p.options, t);
 					}
-					return Y(h.options, e);
+					return q(p.options, e);
 				}).filter((e) => e !== null), R.value = z.value.map(V).join(", ");
 				return;
 			}
 			let e = null;
-			if (h.pathMode && typeof A.value == "string") {
-				let t = A.value.split(h.pathSeparator);
-				e = X(h.options, t);
-			} else Array.isArray(A.value) || (e = Y(h.options, A.value));
+			if (p.pathMode && typeof A.value == "string") {
+				let t = A.value.split(p.pathSeparator);
+				e = J(p.options, t);
+			} else Array.isArray(A.value) || (e = q(p.options, A.value));
 			e && (F.value = e.map((e) => e[L.value.key]), I.value = e, R.value = V(e));
-		}, Q = (e) => {
+		}, X = (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]));
-			}) : Z();
-		}, ie = () => {
-			A.value = h.multiple ? [] : "", F.value = [], I.value = [], z.value = [], R.value = "", k("clear");
+				F.value.includes(e[L.value.key]) && (R.value = R.value ? `${R.value}${p.pathSeparator}${e[L.value.label]}` : e[L.value.label], e[L.value.children] && X(e[L.value.children]));
+			}) : Y();
+		}, ue = () => {
+			A.value = p.multiple ? [] : "", F.value = [], I.value = [], z.value = [], R.value = "", O("clear");
 		};
-		te(A, () => {
-			Z();
-		}), _(() => {
-			Q(h.options);
+		T(A, () => {
+			Y();
+		}), h(() => {
+			X(p.options);
 		});
-		let ae = f(), oe = ee("SIcon"), $ = O();
-		return y(() => b($, [w(S).b()])), x($, null, 0), ae(c(w(r), { $: [() => ({
+		let Z = u(), Q = ne("SIcon"), $ = oe();
+		return _(() => v($, [S(b).b()])), y($, null, 0), Z(s(S(r), { $: [() => ({
 			offset: [0, 4],
 			placement: "bottom-start",
 			manual: !0,
-			...p.popoverProps
-		}), { onClickOutside: () => J }] }, {
+			...d.popoverProps
+		}), { onClickOutside: () => ce }] }, {
 			content: () => {
-				let e = D();
-				return y(() => b(e, [w(S).e("wrapper")])), x(e, null, 0), u(() => !p.options.length, () => {
+				let e = ae();
+				return _(() => v(e, [S(b).e("wrapper")])), y(e, null, 0), te(() => !d.options.length, () => {
 					let e = re();
-					return x(e, null, 0), c(w(a)), e;
+					return y(e, null, 0), s(S(a)), e;
 				}, () => {
-					let e = D();
-					return y(() => b(e, [w(S).e("panel")])), x(e, null, 0), c(o, {
-						expandTrigger: () => p.expandTrigger,
-						fieldNames: () => p.fieldNames,
-						options: () => p.options,
-						checkStrictly: () => p.checkStrictly,
-						multiple: () => p.multiple,
-						pathMode: () => p.pathMode,
-						pathSeparator: () => p.pathSeparator,
+					let e = ie();
+					return _(() => v(e, [S(b).e("panel")])), y(e, null, 0), s(ee, {
+						expandTrigger: () => d.expandTrigger,
+						fieldNames: () => d.fieldNames,
+						options: () => d.options,
+						checkStrictly: () => d.checkStrictly,
+						multiple: () => d.multiple,
+						pathMode: () => d.pathMode,
+						pathSeparator: () => d.pathSeparator,
 						onClickItem: () => H,
 						onExpand: () => U,
 						modelValue: () => A.value,
@@ -164,26 +166,29 @@ var k = /*@__PURE__*/ p({
 						expandedKeys: () => F.value,
 						"onUpdate:expandedKeys": () => (e) => F.value = e
 					}), e;
-				}, 261), g(e, "click", ne(() => {}, ["stop"])), e;
+				}, 261), m(e, "click", E(() => {}, ["stop"])), e.$evtmousedown = D(() => {}, ["prevent"]), e.$evtfocusin = l(le), e;
 			},
-			default: () => c(w(i), {
-				placeholder: () => p.placeholder,
-				disabled: () => p.disabled,
-				error: () => w(P),
-				size: () => w(N),
-				filled: () => p.filled,
-				modelValue: () => R.value,
-				"onUpdate:modelValue": () => (e) => R.value = e,
-				readonly: "",
-				clearable: () => p.clearable,
-				style: "width: 100%",
-				onClear: () => ie
-			}, { suffix: () => l(oe, {
-				class: () => [w(S).e("suffix-icon")],
-				style: () => ({ transform: G.value ? "rotate(180deg)" : "" })
-			}, () => c(w(t))) })
-		}), W, null, "popoverRef"), $.$evtclick = d(q), $;
+			default: () => {
+				let e = s(S(i), {
+					placeholder: () => d.placeholder,
+					disabled: () => d.disabled,
+					error: () => S(P),
+					size: () => S(N),
+					filled: () => d.filled,
+					modelValue: () => R.value,
+					"onUpdate:modelValue": () => (e) => R.value = e,
+					readonly: "",
+					clearable: () => d.clearable,
+					style: "width: 100%",
+					onClear: () => ue
+				}, { suffix: () => c(Q, {
+					class: () => [S(b).e("suffix-icon")],
+					style: () => ({ transform: G.value ? "rotate(180deg)" : "" })
+				}, () => s(S(t))) });
+				return Z(e, k, null, "inputRef"), e;
+			}
+		}), W, null, "popoverRef"), $.$evtclick = l(se), $;
 	}
 });
 //#endregion
-export { k as default };
+export { O as default };

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

@@ -70,7 +70,9 @@ var A = /*@__PURE__*/ d({
 		}, de = (e) => {
 			M("focus", e);
 		}, fe = (e) => {
-			M("blur", e), Y("blur");
+			M("blur", e);
+			let t = e.relatedTarget;
+			t && t.closest("[data-skip-blur-validation]") || Y("blur");
 		}, pe = (e) => {
 			M("press-enter", z.value, e);
 		}, J = ae("inputRef");

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

@@ -4,10 +4,10 @@ import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import { useOutsideClick as n } from "../../../hooks/src/use-outside-click.mjs";
 import { useZIndex as r } from "../../../hooks/src/use-zIndex.mjs";
 import "../../../hooks/index.mjs";
-import { VaporTeleport as i, VaporTransition as a, applyVShow as o, child as s, computed as c, createComponent as l, createDynamicComponent as ee, createIf as u, createSlot as te, createTemplateRefSetter as ne, defineVaporComponent as d, nextTick as re, onMounted as ie, onUnmounted as ae, ref as f, renderEffect as p, setClass as m, setDynamicEvents as h, setInsertionState as g, setStyle as _, setText as oe, template as v, toDisplayString as se, unref as y, useSlots as ce, useTemplateRef as b, watch as x, watchEffect as le } from "vue";
-import { arrow as ue, autoUpdate as de, computePosition as fe, flip as pe, offset as me, shift as he } from "@floating-ui/dom";
+import { VaporTeleport as i, VaporTransition as a, applyVShow as o, child as s, computed as c, createComponent as l, createDynamicComponent as ee, createIf as te, createSlot as ne, createTemplateRefSetter as re, defineVaporComponent as u, nextTick as d, onDeactivated as ie, onMounted as ae, onUnmounted as oe, ref as f, renderEffect as p, setClass as m, setDynamicEvents as h, setInsertionState as g, setStyle as _, setText as se, template as v, toDisplayString as ce, unref as y, useSlots as le, useTemplateRef as b, watch as x, watchEffect as ue } from "vue";
+import { arrow as de, autoUpdate as fe, computePosition as pe, flip as me, offset as he, shift as ge } from "@floating-ui/dom";
 //#region ../components/src/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<div><div>"), S = /*@__PURE__*/ d({
+var _e = v(" "), ve = v("<div data-popover-arrow>"), ye = v("<div>"), be = v("<div><div>"), S = /*@__PURE__*/ u({
 	name: "SPopover",
 	__name: "popover",
 	props: {
@@ -34,9 +34,9 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 	},
 	emits: ["change", "click-outside"],
 	__multiRoot: !0,
-	setup(d, { expose: v, emit: S }) {
-		let C = d, w = S, T = t("popover"), be = ce(), E = f(!1), D = f(!1), { nextZIndex: xe } = r(), O = f(), k = b("containerNode"), A = b("wrapperNode"), j = b("contentNode"), M = f(null), Se = () => {
-			let e = be.default?.();
+	setup(u, { expose: v, emit: S }) {
+		let C = u, w = S, T = t("popover"), xe = le(), E = f(!1), D = f(!1), { nextZIndex: Se } = r(), O = f(), k = b("containerNode"), A = b("wrapperNode"), j = b("contentNode"), M = f(null), Ce = () => {
+			let e = xe.default?.();
 			return M.value = e, e;
 		}, N = f(null), P = f({}), F = f({}), I = f({}), L = f(null), R = () => {
 			N.value && Object.entries(F.value).forEach(([e, t]) => {
@@ -66,25 +66,25 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 			if (!e || N.value) return;
 			let t = null;
 			t = e instanceof HTMLElement ? e : B(e), t && t !== N.value && (R(), N.value = t);
-		}, { flush: "post" }), ie(() => {
+		}, { flush: "post" }), ae(() => {
 			if (N.value) return;
 			let e = M.value;
 			if (!e) return;
 			let t = e instanceof HTMLElement ? e : B(e);
 			t && t !== N.value && (R(), N.value = t);
 		}), x(N, (e) => {
-			e && re().then(() => {
+			e && d().then(() => {
 				Object.entries(F.value).forEach(([t, n]) => {
 					e.addEventListener(t, n);
 				});
 			});
 		}, { flush: "post" });
-		let Ce = () => {
+		let we = () => {
 			if (!j.value || !N.value) return;
 			j.value.style.width = "";
 			let e = "";
 			typeof C.width == "number" ? (e = `${C.width}px`, j.value.style.width = e) : C.width === "sameWidth" ? (e = `${N.value.getBoundingClientRect().width}px`, j.value.style.width = e) : C.width === "auto" && (e = "", j.value.style.width = e);
-		}, we = c(() => C.offset ? C.offset : C.trigger === "contextmenu" && C.alignPoint ? [0, 0] : C.showArrow ? [0, 8] : [0, 0]), V = () => {
+		}, Te = c(() => C.offset ? C.offset : C.trigger === "contextmenu" && C.alignPoint ? [0, 0] : C.showArrow ? [0, 8] : [0, 0]), V = () => {
 			if (C.trigger === "contextmenu" && C.alignPoint && L.value) {
 				let e = L.value;
 				return { getBoundingClientRect() {
@@ -106,19 +106,19 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 			H &&= (H(), null);
 		}, W = async () => {
 			if (!A.value || !N.value) return;
-			let e = V(), t = j.value?.querySelector("[data-popover-arrow]"), [n, r] = we.value, i = [
-				me({
+			let e = V(), t = j.value?.querySelector("[data-popover-arrow]"), [n, r] = Te.value, i = [
+				he({
 					mainAxis: r,
 					crossAxis: n
 				}),
-				pe(),
-				he()
+				me(),
+				ge()
 			];
-			t && i.push(ue({
+			t && i.push(de({
 				element: t,
 				padding: 8
 			}));
-			let { x: a, y: o, placement: s, middlewareData: c } = await fe(e, A.value, {
+			let { x: a, y: o, placement: s, middlewareData: c } = await pe(e, A.value, {
 				placement: C.placement,
 				strategy: "fixed",
 				middleware: i
@@ -140,18 +140,18 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 		} : {
 			openDelay: typeof C.delay == "number" ? C.delay : C.delay[0],
 			closeDelay: typeof C.delay == "number" ? 50 : C.delay[1]
-		}), K = null, Te = () => {
-			C.disabled || (K &&= (clearTimeout(K), null), D.value = !0, re(() => {
+		}), K = null, Ee = () => {
+			C.disabled || (K &&= (clearTimeout(K), null), D.value = !0, d(() => {
 				E.value = !0, w("change", !0);
 			}));
-		}, Ee = () => {
+		}, De = () => {
 			E.value = !1, L.value = null, w("change", !1), K && clearTimeout(K), K = setTimeout(() => {
 				C.destroyOnClose && (D.value = !1), K = null;
 			}, 300);
-		}, q = f(null), J = f(null), De = () => {
-			q.value?.cancel(), J.value?.cancel(), q.value = e(Te, G.value.openDelay), J.value = e(Ee, G.value.closeDelay);
+		}, q = f(null), J = f(null), Oe = () => {
+			q.value?.cancel(), J.value?.cancel(), q.value = e(Ee, G.value.openDelay), J.value = e(De, G.value.closeDelay);
 		};
-		De(), x(G, De);
+		Oe(), x(G, Oe);
 		let Y = () => {
 			J.value?.cancel(), q.value?.();
 		}, X = () => {
@@ -160,9 +160,9 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 		n(k, (e) => {
 			N.value && e.target && typeof N.value.contains == "function" && N.value.contains(e.target) || (E.value && w("click-outside", e), !C.manual && (C.trigger === "hover" || C.trigger === "contextmenu" || C.trigger === "click") && X());
 		});
-		let Z = () => {
-			F.value = {}, P.value = {}, I.value = {}, Q();
-		}, Q = () => {
+		let ke = () => {
+			F.value = {}, P.value = {}, I.value = {}, Z();
+		}, Z = () => {
 			C.manual || (C.trigger === "hover" && (F.value.mouseenter = Y, F.value.mouseleave = X, P.value.mouseenter = Y, P.value.mouseleave = X), C.trigger === "click" && (F.value.click = () => {
 				let e = E.value ? J.value : q.value;
 				(E.value ? q.value : J.value)?.cancel(), e?.();
@@ -177,14 +177,14 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 				}, Y();
 			}));
 		};
-		le(() => {
-			C.manual || Q();
+		ue(() => {
+			C.manual || Z();
 		});
-		let Oe = () => {
+		let Ae = () => {
 			E.value || U();
 		};
 		x(E, (e) => {
-			e && (!A.value || !N.value || (O.value = xe(), Ce(), U(), H = de(V(), A.value, W)));
+			e && (!A.value || !N.value || (O.value = Se(), we(), U(), H = fe(V(), A.value, W)));
 		}, { flush: "post" }), x([
 			() => C.placement,
 			() => C.offset,
@@ -192,39 +192,45 @@ var ge = v(" "), _e = v("<div data-popover-arrow>"), ve = v("<div>"), ye = v("<d
 		], () => {
 			E.value && W();
 		}), x(() => C.manual, (e) => {
-			e ? Z() : Q();
+			e ? ke() : Z();
 		}), x(() => C.trigger, (e, t) => {
-			e !== t && (q.value?.cancel(), E.value = !1, w("change", !1), Z());
-		}), ae(() => {
-			K &&= (clearTimeout(K), null), U(), R();
+			e !== t && (q.value?.cancel(), E.value = !1, w("change", !1), ke());
+		});
+		let Q = () => {
+			q.value?.cancel(), J.value?.cancel(), K &&= (clearTimeout(K), null), E.value = !1, D.value = !1, U();
+		};
+		ie(() => {
+			Q();
+		}), oe(() => {
+			Q(), R();
 		}), v({
 			show: Y,
 			hide: X
 		});
-		let $ = ne();
-		return [ee(() => Se()), l(i, {
-			disabled: () => !d.teleportBody,
-			to: () => d.teleport
-		}, () => u(() => D.value, () => {
-			let e = ye(), t = s(e);
+		let $ = re();
+		return [ee(() => Ce()), l(i, {
+			disabled: () => !u.teleportBody,
+			to: () => u.teleport
+		}, () => te(() => D.value, () => {
+			let e = be(), t = s(e);
 			return p(() => {
 				let n = y(T);
 				h(e, P.value), m(e, [n.b()]), m(t, [n.e("wrapper")]), _(t, { zIndex: O.value });
 			}), g(t, null, 0), l(a, {
 				name: "popover-fade",
-				onAfterLeave: () => Oe,
+				onAfterLeave: () => Ae,
 				persisted: ""
 			}, () => {
-				let e = ve();
+				let e = ye();
 				return p(() => {
 					h(e, I.value), m(e, [y(T).e("content")]);
-				}), g(e, null, 0), te("content", null, () => {
-					let e = ge();
-					return p(() => oe(e, se(d.content))), e;
-				}), g(e, null, 1), u(() => d.showArrow, () => {
+				}), g(e, null, 0), ne("content", null, () => {
 					let e = _e();
+					return p(() => se(e, ce(u.content))), e;
+				}), g(e, null, 1), te(() => u.showArrow, () => {
+					let e = ve();
 					return p(() => {
-						m(e, [y(T).e("arrow")]), _(e, d.arrowStyle);
+						m(e, [y(T).e("arrow")]), _(e, u.arrowStyle);
 					}), e;
 				}), o(e, () => E.value), $(e, j, null, "contentNode"), e;
 			}), $(t, A, null, "wrapperNode"), $(e, k, null, "containerNode"), e;

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.3",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

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