savor-ui 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+# [0.29.0](https://gitee.com/mach552/savor-ui/compare/v0.28.0...v0.29.0) (2026-08-30)
+
+
+### Features
+
+* **steps:** 新增`arrow`属性开启箭头模式 ([707c65d](https://gitee.com/mach552/savor-ui/commits/707c65db08fa6a996ef2be37ab92d90fe32a1009))
+
+# [0.28.0](https://gitee.com/mach552/savor-ui/compare/v0.27.0...v0.28.0) (2026-08-29)
+
+
+### Bug Fixes
+
+* **select:** 修复标签背景和输入框背景同色问题 ([1d79224](https://gitee.com/mach552/savor-ui/commits/1d792247ec47bf0d403791212889bd478bbb68b4))
+
+
+### Features
+
+* **transfer:** 新增穿梭框组件 ([b0f1371](https://gitee.com/mach552/savor-ui/commits/b0f137168c1ccb0b89c3265cee79020d027d6786))
+* **tree:** 新增节点默认插槽 ([565dd84](https://gitee.com/mach552/savor-ui/commits/565dd847d2e0b0ad8fb17477058f1f50ccfda85f))
+
 # [0.27.0](https://gitee.com/mach552/savor-ui/compare/v0.26.1...v0.27.0) (2026-08-29)
 
 

package/dist/es/components/index.d.ts

@@ -63,6 +63,7 @@ export * from './src/tabs';
 export * from './src/tag';
 export * from './src/text';
 export * from './src/textarea';
+export * from './src/transfer';
 export * from './src/timeline';
 export * from './src/tooltip';
 export * from './src/transition';

package/dist/es/components/index.mjs

@@ -85,10 +85,11 @@ import "./src/switch/index.mjs";
 import "./src/table/types.mjs";
 import "./src/table/index.mjs";
 import "./src/textarea/index.mjs";
-import "./src/timeline/types.mjs";
-import "./src/timeline/index.mjs";
 import "./src/tree/types.mjs";
 import "./src/tree/index.mjs";
+import "./src/transfer/index.mjs";
+import "./src/timeline/types.mjs";
+import "./src/timeline/index.mjs";
 import "./src/tree-select/index.mjs";
 import "./src/upload/index.mjs";
 import "./src/virtual-list/index.mjs";

package/dist/es/components/src/select/select.vue.mjs

@@ -13,11 +13,11 @@ import { SIcon as c } from "../icon/index.mjs";
 import { SScrollbar as ee } from "../scrollbar/index.mjs";
 import { SEmpty as te } from "../empty/index.mjs";
 import { STag as ne } from "../tag/index.mjs";
-import { child as re, computed as l, createComponent as u, createFor as ie, createIf as d, createInvoker as f, createSlot as ae, createTemplateRefSetter as oe, defineVaporComponent as p, delegateEvents as m, inject as se, mergeModels as h, on as g, reactive as ce, ref as _, renderEffect as v, setAttr as le, setClass as y, setInsertionState as b, setProp as ue, setText as x, setValue as de, template as S, toDisplayString as C, toRefs as fe, txt as w, unref as T, useModel as pe, useTemplateRef as E, watch as me, withModifiers as he, withVaporModifiers as D } from "vue";
+import { child as re, computed as l, createComponent as u, createFor as ie, createIf as d, createInvoker as f, createSlot as ae, createTemplateRefSetter as oe, defineVaporComponent as p, delegateEvents as m, inject as se, mergeModels as h, on as g, reactive as ce, ref as _, renderEffect as v, setAttr as le, setClass as y, setInsertionState as b, setProp as ue, setText as x, setValue as de, template as S, toDisplayString as C, toRefs as fe, txt as w, unref as T, useModel as pe, useTemplateRef as E, watch as me, withModifiers as he, withVaporModifiers as ge } from "vue";
 //#region ../components/src/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var ge = S(" "), _e = S("<input>"), ve = S("<span> "), ye = S("<span>"), be = S("<div><div></div>"), O = S("<div>"), xe = S("<li> "), Se = S("<ul>"), Ce = S("<div>", 1);
+var _e = S(" "), ve = S("<input>"), ye = S("<span> "), be = S("<span>"), xe = S("<div><div></div>"), D = S("<div>"), Se = S("<li> "), Ce = S("<ul>"), we = S("<div>", 1);
 m("mousedown", "input", "keydown", "click");
-var k = /*@__PURE__*/ p({
+var O = /*@__PURE__*/ p({
 	name: "SSelect",
 	__name: "select",
 	props: /*@__PURE__*/ h({
@@ -59,137 +59,137 @@ var k = /*@__PURE__*/ p({
 		"remove"
 	], ["update:modelValue"]),
 	setup(p, { expose: m, emit: h }) {
-		let S = p, k = h, A = t("select"), { size: j, error: we } = fe(S), { mergedSize: M, mergedError: Te } = i({
-			size: j,
-			error: we
-		}), Ee = se(a, void 0), N = l(() => Ee?.inputFilled?.value || S.filled), P = pe(p, "modelValue"), F = l(() => ({
+		let S = p, O = h, k = t("select"), { size: A, error: Te } = fe(S), { mergedSize: j, mergedError: Ee } = i({
+			size: A,
+			error: Te
+		}), De = se(a, void 0), M = l(() => De?.inputFilled?.value || S.filled), N = pe(p, "modelValue"), P = l(() => ({
 			label: "label",
 			value: "value",
 			disabled: "disabled",
 			...S.fieldNames
-		})), I = _(!1), De = () => {
-			I.value = !0;
-		}, Oe = () => {
-			I.value = !1;
-		}, L = _(!1), R = ce({
+		})), F = _(!1), Oe = () => {
+			F.value = !0;
+		}, ke = () => {
+			F.value = !1;
+		}, I = _(!1), L = ce({
 			label: "",
 			option: null
-		}), z = E("popoverRef"), ke = E("scrollbarRef"), B = E("listRef"), V = E("multipleInputRef"), H = _(!1), U = _(""), Ae = l(() => ({
+		}), R = E("popoverRef"), z = E("scrollbarRef"), Ae = E("listRef"), B = E("multipleInputRef"), V = _(!1), H = _(""), je = l(() => ({
 			mini: "tiny",
 			small: "tiny",
 			medium: "mini",
 			large: "small"
-		})[S.size] || "medium"), W = l(() => S.multiple ? (Array.isArray(P.value) ? P.value : []).map((e) => S.options.find((t) => t[F.value.value] === e)).filter(Boolean) : []), je = (e) => S.multiple ? (Array.isArray(P.value) ? P.value : []).includes(e[F.value.value]) : !1, G = (e) => {
-			e ? (S.multiple && S.filterable ? (U.value = "", Y("")) : S.filterable && R.label && (R.label = ""), S.filterable && !S.multiple && Y(R.label), z.value?.show(), S.multiple && S.filterable && setTimeout(() => V.value?.focus(), 0)) : (S.filterable && !S.multiple && (R.label = R.option ? R.option[F.value.label] : ""), S.multiple && S.filterable && (U.value = "", J.value = S.options), z.value?.hide(), X.value = -1), H.value = e;
-		}, Me = () => {
-			S.disabled || (H.value ? G(!1) : G(!0));
+		})[S.size] || "medium"), U = l(() => S.multiple ? (Array.isArray(N.value) ? N.value : []).map((e) => S.options.find((t) => t[P.value.value] === e)).filter(Boolean) : []), Me = (e) => S.multiple ? (Array.isArray(N.value) ? N.value : []).includes(e[P.value.value]) : !1, W = (e) => {
+			e ? (S.multiple && S.filterable ? (H.value = "", J("")) : S.filterable && L.label && (L.label = ""), S.filterable && !S.multiple && J(L.label), R.value?.show(), S.multiple && S.filterable && setTimeout(() => B.value?.focus(), 0)) : (S.filterable && !S.multiple && (L.label = L.option ? L.option[P.value.label] : ""), S.multiple && S.filterable && (H.value = "", q.value = S.options), R.value?.hide(), Y.value = -1), V.value = e;
 		}, Ne = () => {
-			G(!1);
-		}, K = (e) => S.options.find((t) => t[F.value.value] === e), q = (e) => {
+			S.disabled || (V.value ? W(!1) : W(!0));
+		}, Pe = () => {
+			W(!1);
+		}, G = (e) => S.options.find((t) => t[P.value.value] === e), K = (e) => {
 			if (!e.disabled) if (S.multiple) {
-				let t = Array.isArray(P.value) ? [...P.value] : [], n = e[F.value.value], r = t.indexOf(n);
-				r > -1 ? t.splice(r, 1) : t.push(n), P.value = t, S.filterable && (U.value = "", Y(""), setTimeout(() => V.value?.focus(), 0));
-			} else P.value = e[F.value.value];
-		}, J = _(S.options);
+				let t = Array.isArray(N.value) ? [...N.value] : [], n = e[P.value.value], r = t.indexOf(n);
+				r > -1 ? t.splice(r, 1) : t.push(n), N.value = t, S.filterable && (H.value = "", J(""), setTimeout(() => B.value?.focus(), 0));
+			} else N.value = e[P.value.value];
+		}, q = _(S.options);
 		me(() => S.options, (e) => {
-			J.value = e;
+			q.value = e;
 		});
-		let Pe = l(() => S.remote ? 500 : 0), Fe = l(() => S.filterable && R.option && H.value ? R.option[F.value.label] : S.placeholder), Y = async (e) => {
+		let Fe = l(() => S.remote ? 500 : 0), Ie = l(() => S.filterable && L.option && V.value ? L.option[P.value.label] : S.placeholder), J = async (e) => {
 			if (S.filterable) {
-				if (S.filterMethod && typeof S.filterMethod == "function") J.value = S.filterMethod(e);
+				if (S.filterMethod && typeof S.filterMethod == "function") q.value = S.filterMethod(e);
 				else if (S.remote && typeof S.remoteMethod == "function") {
-					L.value = !0;
+					I.value = !0;
 					try {
-						J.value = await S.remoteMethod(e);
+						q.value = await S.remoteMethod(e);
 					} catch (e) {
-						console.error("远程筛选出错", e), J.value = [];
+						console.error("远程筛选出错", e), q.value = [];
 					} finally {
-						L.value = !1;
+						I.value = !1;
 					}
-				} else J.value = S.options.filter((t) => t[F.value.label].includes(e));
-				X.value = -1;
+				} else q.value = S.options.filter((t) => t[P.value.label].includes(e));
+				Y.value = -1;
 			}
-		}, Ie = e((e) => {
-			Y(e);
-		}, Pe.value), X = _(-1), Z = (e, t) => {
-			let n = J.value;
+		}, Le = e((e) => {
+			J(e);
+		}, Fe.value), Y = _(-1), X = (e, t) => {
+			let n = q.value;
 			if (n.length === 0) return -1;
 			let r = e, i = t === "down" ? 1 : -1, a = n.length;
-			for (let e = 0; e < a; e++) if (r = (r + i + a) % a, !n[r][F.value.disabled]) return r;
+			for (let e = 0; e < a; e++) if (r = (r + i + a) % a, !n[r][P.value.disabled]) return r;
 			return -1;
-		}, Le = () => {
-			if (X.value === -1) return;
-			let e = B.value;
+		}, Re = () => {
+			if (Y.value === -1) return;
+			let e = Ae.value;
 			if (!e) return;
-			let t = e.querySelectorAll("li")[X.value];
+			let t = e.querySelectorAll("li")[Y.value];
 			if (!t) return;
-			let n = ke.value, r = null;
+			let n = z.value, r = null;
 			if (n && n.contentRef ? r = n.contentRef : e.parentElement && (r = e.parentElement), r) {
 				let e = t.offsetTop, n = e + t.offsetHeight, i = r.scrollTop, a = i + r.clientHeight;
 				e < i ? r.scrollTop = e : n > a && (r.scrollTop = n - r.clientHeight);
 			}
-		}, Re = (e) => {
+		}, ze = (e) => {
 			switch (e.key) {
 				case "Enter":
-					e.preventDefault(), H.value ? X.value > -1 && J.value[X.value] ? q(J.value[X.value]) : G(!1) : G(!0);
+					e.preventDefault(), V.value ? Y.value > -1 && q.value[Y.value] ? K(q.value[Y.value]) : W(!1) : W(!0);
 					break;
 				case "Escape":
-					e.preventDefault(), H.value && G(!1);
+					e.preventDefault(), V.value && W(!1);
 					break;
 				case "ArrowUp":
-					if (e.preventDefault(), H.value && J.value.length > 0) {
-						let e = Z(X.value === -1 ? 0 : X.value, "up");
-						e !== -1 && (X.value = e, Le());
+					if (e.preventDefault(), V.value && q.value.length > 0) {
+						let e = X(Y.value === -1 ? 0 : Y.value, "up");
+						e !== -1 && (Y.value = e, Re());
 					}
 					break;
 				case "ArrowDown":
-					if (e.preventDefault(), H.value && J.value.length > 0) {
-						let e = Z(X.value === -1 ? -1 : X.value, "down");
-						e !== -1 && (X.value = e, Le());
+					if (e.preventDefault(), V.value && q.value.length > 0) {
+						let e = X(Y.value === -1 ? -1 : Y.value, "down");
+						e !== -1 && (Y.value = e, Re());
 					}
 					break;
 				case "Backspace":
-					if (S.multiple && !U.value) {
-						let e = Array.isArray(P.value) ? [...P.value] : [];
+					if (S.multiple && !H.value) {
+						let e = Array.isArray(N.value) ? [...N.value] : [];
 						if (e.length > 0) {
 							let t = e.pop();
-							P.value = e, k("remove", t);
+							N.value = e, O("remove", t);
 						}
 					}
 					break;
 				default: break;
 			}
-		}, ze = () => {
-			S.multiple ? P.value = [] : P.value = "", k("clear");
+		}, Z = () => {
+			S.multiple ? N.value = [] : N.value = "", O("clear");
 		}, Be = (e, t) => {
 			t.stopPropagation();
-			let n = Array.isArray(P.value) ? [...P.value] : [], r = e[F.value.value], i = n.indexOf(r);
-			i > -1 && (n.splice(i, 1), P.value = n, k("remove", r));
+			let n = Array.isArray(N.value) ? [...N.value] : [], r = e[P.value.value], i = n.indexOf(r);
+			i > -1 && (n.splice(i, 1), N.value = n, O("remove", r));
 		}, Ve = (e) => {
 			let t = e.target;
-			U.value = t.value, Y(t.value);
+			H.value = t.value, J(t.value);
 		};
-		me(P, (e) => {
+		me(N, (e) => {
 			if (S.multiple) {
 				let t = Array.isArray(e) ? e : [];
-				t.map((e) => K(e)).filter(Boolean), k("change", t);
+				t.map((e) => G(e)).filter(Boolean), O("change", t);
 			} else if (e && !Array.isArray(e)) {
-				let t = K(e);
-				t ? (R.label = t[F.value.label], R.option = t, k("change", t[F.value.value]), G(!1)) : (R.label = "", R.option = null, k("change", ""));
-			} else R.label = "", R.option = null, k("change", "");
+				let t = G(e);
+				t ? (L.label = t[P.value.label], L.option = t, O("change", t[P.value.value]), W(!1)) : (L.label = "", L.option = null, O("change", ""));
+			} else L.label = "", L.option = null, O("change", "");
 		}, { immediate: !0 }), m({
-			open: () => G(!0),
-			close: () => G(!1)
+			open: () => W(!0),
+			close: () => W(!1)
 		});
-		let Q = oe(), $ = Ce();
+		let Q = oe(), $ = we();
 		return v(() => {
-			let e = T(A);
+			let e = T(k);
 			y($, [
 				e.b(),
-				e.is("readonly", !p.filterable || !H.value),
+				e.is("readonly", !p.filterable || !V.value),
 				e.is("multiple", p.multiple),
 				e.is("disabled", p.disabled),
-				e.m(T(M))
+				e.m(T(j))
 			]);
 		}), b($, null, 0), Q(u(T(o), { $: [() => ({
 			offset: [0, 4],
@@ -197,92 +197,94 @@ var k = /*@__PURE__*/ p({
 			width: "sameWidth",
 			manual: !0,
 			...p.popoverProps
-		}), { onClickOutside: () => Ne }] }, {
+		}), { onClickOutside: () => Pe }] }, {
 			content: () => {
-				let e = O();
-				return v(() => y(e, [T(A).e("wrapper")])), b(e, null, 0), d(() => L.value, () => {
-					let e = O();
-					return v(() => y(e, [T(A).e("loading")])), b(e, null, 0), u(T(c), { loading: "" }), e;
-				}, () => d(() => J.value.length === 0, () => {
-					let e = O();
-					return v(() => y(e, [T(A).e("empty")])), b(e, null, 0), ae("empty", null, () => u(T(te))), e;
+				let e = D();
+				return v(() => y(e, [T(k).e("wrapper")])), b(e, null, 0), d(() => I.value, () => {
+					let e = D();
+					return v(() => y(e, [T(k).e("loading")])), b(e, null, 0), u(T(c), { loading: "" }), e;
+				}, () => d(() => q.value.length === 0, () => {
+					let e = D();
+					return v(() => y(e, [T(k).e("empty")])), b(e, null, 0), ae("empty", null, () => u(T(te))), e;
 				}, () => {
 					let e = u(T(ee), { maxHeight: () => p.maxHeight }, () => {
-						let e = Se();
+						let e = Ce();
 						return v(() => {
-							let t = T(A);
-							y(e, [t.e("list"), t.m("list-" + T(j))]);
-						}), b(e, null, 0), ie(() => J.value, (e, t) => {
-							let n = xe(), r = w(n);
-							return g(n, "click", he(() => q(e.value), ["stop"])), v(() => {
-								let i = T(A), a = e.value, o = F.value, s = a[o.label], c = o.label;
+							let t = T(k);
+							y(e, [t.e("list"), t.m("list-" + T(A))]);
+						}), b(e, null, 0), ie(() => q.value, (e, t) => {
+							let n = Se(), r = w(n);
+							return g(n, "click", he(() => K(e.value), ["stop"])), v(() => {
+								let i = T(k), a = e.value, o = P.value, s = a[o.label], c = o.label;
 								y(n, [
 									i.e("item"),
 									i.is("disabled", a[o.disabled]),
-									i.is("active", p.multiple ? je(a) : s === R.label),
-									i.is("highlight", s === J.value[X.value]?.[c])
+									i.is("active", p.multiple ? Me(a) : s === L.label),
+									i.is("highlight", s === q.value[Y.value]?.[c])
 								]), le(n, "data-index", t.value), x(r, C(s));
 							}), n;
-						}, (e, t) => e[F.value.value], 9), Q(e, B, null, "listRef"), e;
+						}, (e, t) => e[P.value.value], 9), Q(e, Ae, null, "listRef"), e;
 					});
-					return Q(e, ke, null, "scrollbarRef"), e;
-				}, 1541), 1285), e.$evtmousedown = D(() => {}, ["prevent"]), e;
+					return Q(e, z, null, "scrollbarRef"), e;
+				}, 1541), 1285), e.$evtmousedown = ge(() => {}, ["prevent"]), e;
 			},
 			default: () => d(() => p.multiple, () => {
-				let e = be(), t = re(e);
+				let e = xe(), t = re(e);
 				return v(() => {
-					let n = T(A);
-					y(e, [n.e("tags-wrapper"), n.is("filled", N.value)]), y(t, [n.e("tags")]);
-				}), b(t, null, 0), ie(() => W.value, (e) => {
+					let n = T(k);
+					y(e, [n.e("tags-wrapper"), n.is("filled", M.value)]), y(t, [n.e("tags")]);
+				}), b(t, null, 0), ie(() => U.value, (e) => {
 					let t = (t) => Be(e.value, t);
 					return u(T(ne), {
-						size: () => Ae.value,
+						size: () => je.value,
 						closable: "",
+						color: () => M.value ? "var(--s-color-bg-2)" : "",
+						style: () => ({ color: M.value ? "var(--s-color-text-1)" : "" }),
 						onClose: () => t
 					}, () => {
-						let t = ge();
+						let t = _e();
 						return v(() => {
-							let n = F.value;
+							let n = P.value;
 							x(t, C(e.value[n.label]));
 						}), t;
 					});
-				}, (e) => e[F.value.value], 2), b(t, null, 1), d(() => p.filterable, () => {
-					let e = _e();
-					return e.$evtinput = f(Ve), e.$evtkeydown = f(Re), Q(e, V, null, "multipleInputRef"), v(() => {
-						y(e, [T(A).e("inner")]), ue(e, "placeholder", W.value.length === 0 ? p.placeholder : ""), de(e, U.value);
+				}, (e) => e[P.value.value], 2), b(t, null, 1), d(() => p.filterable, () => {
+					let e = ve();
+					return e.$evtinput = f(Ve), e.$evtkeydown = f(ze), Q(e, B, null, "multipleInputRef"), v(() => {
+						y(e, [T(k).e("inner")]), ue(e, "placeholder", U.value.length === 0 ? p.placeholder : ""), de(e, H.value);
 					}), e;
-				}, () => d(() => W.value.length === 0, () => {
-					let e = ve(), t = w(e);
+				}, () => d(() => U.value.length === 0, () => {
+					let e = ye(), t = w(e);
 					return v(() => {
-						y(e, [T(A).e("placeholder")]), x(t, C(p.placeholder));
+						y(e, [T(k).e("placeholder")]), x(t, C(p.placeholder));
 					}), e;
-				}), 261), b(e, null, 1), d(() => I.value && Array.isArray(P.value) && P.value.length > 0 && p.clearable, () => {
-					let e = ye();
-					return v(() => y(e, T(A).e("close"))), b(e, null, 0), u(T(r)), g(e, "click", he(ze, ["stop"])), e.$evtmousedown = D(() => {}, ["prevent"]), e;
+				}), 261), b(e, null, 1), d(() => F.value && Array.isArray(N.value) && N.value.length > 0 && p.clearable, () => {
+					let e = be();
+					return v(() => y(e, T(k).e("close"))), b(e, null, 0), u(T(r)), g(e, "click", he(Z, ["stop"])), e.$evtmousedown = ge(() => {}, ["prevent"]), e;
 				}), b(e, null, 2), u(T(c), {
-					class: () => [T(A).e("suffix-icon")],
-					style: () => ({ transform: H.value ? "rotate(180deg)" : "" })
-				}, () => u(T(n))), g(e, "mouseenter", De), g(e, "mouseleave", Oe), e;
+					class: () => [T(k).e("suffix-icon")],
+					style: () => ({ transform: V.value ? "rotate(180deg)" : "" })
+				}, () => u(T(n))), g(e, "mouseenter", Oe), g(e, "mouseleave", ke), e;
 			}, () => u(T(s), {
-				modelValue: () => R.label,
-				"onUpdate:modelValue": () => (e) => R.label = e,
+				modelValue: () => L.label,
+				"onUpdate:modelValue": () => (e) => L.label = e,
 				disabled: () => p.disabled,
-				placeholder: () => Fe.value,
-				readonly: () => !p.filterable || !H.value,
+				placeholder: () => Ie.value,
+				readonly: () => !p.filterable || !V.value,
 				clearable: () => p.clearable,
 				style: "width: 100%",
-				error: () => T(Te),
-				size: () => T(M),
-				filled: () => N.value,
-				onInput: () => T(Ie),
-				onKeydown: () => Re,
-				onClear: () => ze
+				error: () => T(Ee),
+				size: () => T(j),
+				filled: () => M.value,
+				onInput: () => T(Le),
+				onKeydown: () => ze,
+				onClear: () => Z
 			}, { suffix: () => u(T(c), {
-				class: () => [T(A).e("suffix-icon")],
-				style: () => ({ transform: H.value ? "rotate(180deg)" : "" })
+				class: () => [T(k).e("suffix-icon")],
+				style: () => ({ transform: V.value ? "rotate(180deg)" : "" })
 			}, () => u(T(n))) }), 1157)
-		}), z, null, "popoverRef"), $.$evtclick = f(Me), $;
+		}), R, null, "popoverRef"), $.$evtclick = f(Ne), $;
 	}
 });
 //#endregion
-export { k as default };
+export { O as default };

package/dist/es/components/src/steps/index.d.ts

@@ -9,12 +9,13 @@ export declare const SSteps: ((__VLS_props: NonNullable<Awaited<typeof __VLS_set
         items: StepsItemProps[];
         current?: number | undefined;
         vertical?: boolean | undefined;
-        size?: "small" | "medium" | undefined;
+        size?: "mini" | "small" | "medium" | "large" | "larger" | undefined;
         alignCenter?: boolean | undefined;
         status?: "wait" | "loading" | "done" | "error" | "process" | undefined;
         changeable?: boolean | undefined;
         dot?: boolean | undefined;
         simple?: boolean | undefined;
+        arrow?: boolean | undefined;
         onChange?: ((index: number) => any) | undefined;
         "onUpdate:current"?: ((value: number) => any) | undefined;
     } & (typeof globalThis extends {

package/dist/es/components/src/steps/steps.vue.mjs

@@ -1,44 +1,41 @@
-import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
+import { useElementSize as e } from "../../../hooks/src/use-element-size.mjs";
+import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
-import { RightLine as t } from "../../../icons/src/svg/arrow/index.mjs";
-import { CheckLine as n } from "../../../icons/src/svg/system/index.mjs";
-import { SIcon as r } from "../icon/index.mjs";
-import { child as i, createComponent as a, createFor as o, createIf as s, createInvoker as c, defineVaporComponent as l, delegateEvents as u, mergeModels as d, next as f, renderEffect as p, setClass as m, setInsertionState as h, setStyle as g, setText as _, template as v, toDisplayString as y, txt as b, unref as x, useModel as S, watch as C } from "vue";
+import { RightLine as n } from "../../../icons/src/svg/arrow/index.mjs";
+import { CheckLine as r } from "../../../icons/src/svg/system/index.mjs";
+import { SIcon as i } from "../icon/index.mjs";
+import { child as a, createComponent as o, createFor as s, createIf as c, createInvoker as l, defineVaporComponent as u, delegateEvents as d, mergeModels as f, renderEffect as p, setClass as m, setInsertionState as h, setStaticTemplateRef as g, setStyle as _, setText as v, template as y, toDisplayString as b, txt as x, unref as S, useModel as C, useTemplateRef as w, watch as T } from "vue";
 //#region ../components/src/steps/steps.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var w = v("<div>"), T = v("<span> "), E = v("<div> "), D = v("<div><div></div><div><div> </div></div>"), O = v("<div>", 1);
-u("click");
-var k = /*@__PURE__*/ l({
+var E = y("<div>"), D = y("<span> "), O = y("<div> "), k = y("<div><div><div> </div></div>"), A = y("<div>", 1);
+d("click");
+var j = /*@__PURE__*/ u({
 	name: "SSteps",
 	__name: "steps",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ f({
 		items: { default: () => [] },
 		current: {},
-		vertical: {
-			type: Boolean,
-			default: !1
-		},
+		vertical: { type: Boolean },
 		size: { default: "medium" },
 		alignCenter: { type: Boolean },
 		status: { default: "process" },
-		changeable: {
-			type: Boolean,
-			default: !1
-		},
-		dot: {
-			type: Boolean,
-			default: !1
-		},
-		simple: { type: Boolean }
+		changeable: { type: Boolean },
+		dot: { type: Boolean },
+		simple: { type: Boolean },
+		arrow: { type: Boolean }
 	}, {
 		current: { default: 0 },
 		currentModifiers: {}
 	}),
-	emits: /*@__PURE__*/ d(["change"], ["update:current"]),
-	setup(l, { emit: u }) {
-		let d = l, v = u, k = e("steps"), A = S(l, "current"), j = (e) => e > A.value ? "wait" : e < A.value ? "done" : e === A.value ? d.status : "", M = (e) => {
+	emits: /*@__PURE__*/ f(["change"], ["update:current"]),
+	setup(u, { emit: d }) {
+		let f = u, y = d, j = t("steps"), M = C(u, "current"), N = w("stepsRef"), { height: P } = e(N);
+		T(P, (e) => {
+			N.value?.style.setProperty("--s-steps-height", e + "px");
+		}, { immediate: !0 });
+		let F = (e) => e > M.value ? "wait" : e < M.value ? "done" : e === M.value ? f.status : "", I = (e) => {
 			let t = { backgroundColor: "" }, n = e + 1;
-			if (n >= d.items.length) return t.backgroundColor = "var(--s-color-fill-3)", t;
-			switch (j(n)) {
+			if (n >= f.items.length) return t.backgroundColor = "var(--s-color-fill-3)", t;
+			switch (F(n)) {
 				case "done":
 					t.backgroundColor = "var(--s-color-success-6)";
 					break;
@@ -51,62 +48,66 @@ var k = /*@__PURE__*/ l({
 				default: t.backgroundColor = "var(--s-color-fill-3)";
 			}
 			return t;
-		}, N = (e) => {
-			d.changeable && (d.items[e]?.disabled || (A.value = e));
+		}, L = (e) => f.arrow ? "0%" : e < f.items.length - 1 && !f.alignCenter ? 100 / (f.items.length - 1) + "%" : 100 / f.items.length + "%", R = (e) => {
+			f.changeable && (f.items[e]?.disabled || (M.value = e));
 		};
-		C(A, (e) => {
-			v("change", e);
+		T(M, (e) => {
+			y("change", e);
 		});
-		let P = O();
+		let z = A();
 		return p(() => {
-			let e = x(k);
-			m(P, [
+			let e = S(j);
+			m(z, [
 				e.b(),
-				e.m(l.size),
-				e.is("vertical", l.vertical),
-				e.is("dot", l.dot),
-				e.is("simple", l.simple)
+				e.m(u.size),
+				e.is("vertical", u.vertical),
+				e.is("dot", u.dot),
+				e.is("simple", u.simple),
+				e.is("arrow", u.arrow)
 			]);
-		}), h(P, null, 0), o(() => l.items, (e, o) => {
-			let u = D(), d = i(u), v = f(d, 1), S = i(v);
+		}), h(z, null, 0), s(() => u.items, (e, t) => {
+			let s = k(), d = a(s, 1), f = a(d);
 			p(() => {
-				let e = x(k), t = o.value, n = l.alignCenter, r = l.items.length;
-				m(u, [
+				let e = S(j), n = t.value;
+				m(s, [
 					e.e("step"),
-					e.m(j(t)),
-					e.is("center", n),
-					e.is("changeable", l.changeable)
-				]), g(u, { flexBasis: t < r - 1 && !n ? 100 / (r - 1) + "%" : 100 / r + "%" }), m(d, [e.e("head")]);
-			}), h(d, null, 0), s(() => o.value < l.items.length - 1 && !l.simple, () => {
-				let e = w();
-				return p(() => {
-					m(e, [x(k).e("line")]), g(e, M(o.value));
-				}), e;
-			}), h(d, null, 1), s(() => l.dot, () => {
-				let e = w();
-				return p(() => m(e, [x(k).e("dot")])), e;
-			}, () => {
-				let e = w();
-				return p(() => m(e, [x(k).e("icon")])), h(e, null, 0), s(() => j(o.value) === "loading", () => a(x(r), { loading: "" })), h(e, null, 1), s(() => j(o.value) === "done", () => a(x(n)), () => {
-					let e = T(), t = b(e);
-					return p(() => _(t, y(o.value + 1))), e;
-				}, 1029), e;
-			}, 517);
-			let C = b(S);
+					e.m(F(n)),
+					e.is("center", u.alignCenter),
+					e.is("changeable", u.changeable)
+				]), _(s, { flexBasis: L(n) });
+			}), h(s, 0, 0), c(() => !u.arrow, () => {
+				let e = E();
+				return p(() => m(e, [S(j).e("head")])), h(e, null, 0), c(() => t.value < u.items.length - 1 && !u.simple, () => {
+					let e = E();
+					return p(() => {
+						m(e, [S(j).e("line")]), _(e, I(t.value));
+					}), e;
+				}), h(e, null, 1), c(() => u.dot, () => {
+					let e = E();
+					return p(() => m(e, [S(j).e("dot")])), e;
+				}, () => {
+					let e = E();
+					return p(() => m(e, [S(j).e("icon")])), h(e, null, 0), c(() => F(t.value) === "loading", () => o(S(i), { loading: "" })), h(e, null, 1), c(() => F(t.value) === "done", () => o(S(r)), () => {
+						let e = D(), n = x(e);
+						return p(() => v(n, b(t.value + 1))), e;
+					}, 1029), e;
+				}, 517), e;
+			});
+			let g = x(f);
 			return p(() => {
-				let t = x(k);
-				m(v, [t.e("content")]), m(S, [t.e("title")]), _(C, y(e.value.title));
-			}), h(v, null, 1), s(() => !l.simple, () => {
-				let t = E(), n = b(t);
+				let t = S(j);
+				m(d, [t.e("content")]), m(f, [t.e("title")]), v(g, b(e.value.title));
+			}), h(d, null, 1), c(() => !u.simple && !u.arrow || u.arrow && e.value.description, () => {
+				let t = O(), n = x(t);
 				return p(() => {
-					m(t, [x(k).e("description")]), _(n, y(e.value.description));
+					m(t, [S(j).e("description")]), v(n, b(e.value.description));
 				}), t;
-			}), h(u, null, 2), s(() => o.value < l.items.length - 1 && l.simple, () => {
-				let e = w();
-				return p(() => m(e, [x(k).e("arrow")])), h(e, null, 0), a(x(t)), e;
-			}), u.$evtclick = c(() => N(o.value)), u;
-		}, (e, t) => t, 9), P;
+			}), h(s, null, 2), c(() => t.value < u.items.length - 1 && u.simple, () => {
+				let e = E();
+				return p(() => m(e, [S(j).e("arrow")])), h(e, null, 0), o(S(n)), e;
+			}), s.$evtclick = l(() => R(t.value)), s;
+		}, (e, t) => t, 9), g(z, N, null, "stepsRef"), z;
 	}
 });
 //#endregion
-export { k as default };
+export { j as default };