savor-ui 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 
 
+# [0.30.0](https://gitee.com/mach552/savor-ui/compare/v0.29.0...v0.30.0) (2026-08-31)
+
+
+### Bug Fixes
+
+* **datetime-picker:** 修复禁用样式无效问题 ([19a295b](https://gitee.com/mach552/savor-ui/commits/19a295b6475dc97eb8456a0803c22791a7f299a8))
+* **input-tag:** 修复错误状态样式无效问题 ([1c219ef](https://gitee.com/mach552/savor-ui/commits/1c219efbc6f4211bc02f3f77fa9d2b076f53f6e0))
+* **textarea:** 修复错误状态样式无效问题 ([595dee9](https://gitee.com/mach552/savor-ui/commits/595dee93be93033a7adf058710012d72c7f982ab))
+* **textarea:** 修复禁用样式无效问题 ([86ae468](https://gitee.com/mach552/savor-ui/commits/86ae4689e9a43ad72fbc0d42093f5d89382c3f6f))
+
+
+### Features
+
+* **form:** 新增额外内容属性和插槽 ([bd9534d](https://gitee.com/mach552/savor-ui/commits/bd9534d1ba5d70501c3bd1467fe23b8b3bdfe0d2))
+
+# [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)
 
 

package/dist/es/components/src/datetime-picker/datetime-picker.vue.mjs

@@ -251,7 +251,7 @@ var k = /*@__PURE__*/ m({
 						t.is("range", W.value),
 						t.is("error", T(j)),
 						t.is("filled", xe.value)
-					]), C(r, Me.value), S(r, "clearable", m.clearable), S(r, "placeholder", Pe.value), S(r, "disabled", n), b(r, [t.e("input")]);
+					]), C(r, Me.value), S(r, "clearable", m.clearable), S(r, "placeholder", Pe.value), S(r, "disabled", n), b(r, [t.e("inner")]);
 				}), x(e, null, 1), f(() => M.value && !!A.value && m.clearable, () => {
 					let e = ge();
 					return y(() => b(e, [T(k).e("close")])), x(e, null, 0), d(T(n)), _(e, "click", E(De, ["stop"])), e;
@@ -264,7 +264,7 @@ var k = /*@__PURE__*/ m({
 				r.$evtinput = p(Ue), _(r, "blur", We), _(r, "click", E(U, ["stop"]));
 				let o = se(i);
 				return a.$evtinput = p(Ge), _(a, "blur", Ke), _(a, "click", E(U, ["stop"])), y(() => {
-					let t = T(k), n = m.disabled, i = Ne.value, s = m.clearable, c = Fe.value, l = [t.e("input")];
+					let t = T(k), n = m.disabled, i = Ne.value, s = m.clearable, c = Fe.value, l = [t.e("inner")];
 					b(e, [
 						t.e("wrapper"),
 						t.is("disabled", n),

package/dist/es/components/src/form/form-item.d.ts

@@ -1,4 +1,4 @@
-import { FormItemExpose, FormItemProps } from './types';
+import { FormItemExpose, FormItemProps, FormItemSlots } from './types';
 import { PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<FormItemProps> & (typeof globalThis extends {
@@ -6,19 +6,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<FormItemExpose>) => void;
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/form/form-item.vue.mjs

@@ -4,12 +4,12 @@ import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import { AsteriskLine as n } from "../../../icons/src/svg/editor/index.mjs";
 import { QuestionLine as r } from "../../../icons/src/svg/system/index.mjs";
-import { formContextKey as i, formItemContextKey as a, formItemStatusContextKey as o } from "./types.mjs";
-import { STooltip as s } from "../tooltip/index.mjs";
-import { child as c, computed as l, createComponent as u, createIf as d, createSlot as f, defineVaporComponent as p, inject as m, onMounted as h, onUnmounted as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, setText as C, template as w, toDisplayString as T, txt as E, unref as D } from "vue";
-import O from "async-validator";
+import { formContextKey as i, formItemContextKey as a, formItemStatusContextKey as ee } from "./types.mjs";
+import { STooltip as o } from "../tooltip/index.mjs";
+import { child as s, computed as c, createComponent as l, createIf as u, createSlot as d, defineVaporComponent as f, inject as p, onMounted as m, onUnmounted as h, provide as g, ref as te, renderEffect as _, setClass as v, setInsertionState as y, setStyle as ne, setText as b, template as x, toDisplayString as S, txt as C, unref as w } from "vue";
+import T from "async-validator";
 //#region ../components/src/form/form-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("<div><div><div></div>", 1), P = /*@__PURE__*/ p({
+var E = x("<span>"), D = x(" "), O = x("<div><label>"), k = x("<div>"), A = x("<div> "), j = x("<div><div><div></div>", 1), M = /*@__PURE__*/ f({
 	name: "SFormItem",
 	__name: "form-item",
 	props: {
@@ -24,27 +24,28 @@ var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("
 			type: Boolean,
 			default: !0
 		},
-		requiredAlign: {}
+		requiredAlign: {},
+		extra: {}
 	},
-	setup(p, { expose: w }) {
-		let P = p, F = t("form-item"), I = m(i), L = l(() => P.labelPosition ? P.labelPosition : I?.labelPosition?.value ? I?.labelPosition?.value : "left"), ee = l(() => I?.labelPosition?.value === "top" ? "" : P.labelWidth || I?.labelWidth?.value), R = l(() => P.labelAlign ? P.labelAlign : I?.labelAlign?.value ? I?.labelAlign?.value : I?.labelPosition?.value === "top" ? "left" : "right"), z = null, B = l(() => {
-			let e = I?.model?.value;
-			return e && P.field && e[P.field] !== void 0 ? e[P.field] : null;
-		}), V = l(() => {
-			let e = I?.rules?.value;
-			return e && P.field && e[P.field] ? e[P.field] : P.rules && P.rules.length > 0 ? P.rules : [];
-		}), H = v({
+	setup(f, { expose: x, slots: M }) {
+		let N = f, P = t("form-item"), F = p(i), I = c(() => N.labelPosition ? N.labelPosition : F?.labelPosition?.value ? F?.labelPosition?.value : "left"), L = c(() => F?.labelPosition?.value === "top" ? "" : N.labelWidth || F?.labelWidth?.value), R = c(() => N.labelAlign ? N.labelAlign : F?.labelAlign?.value ? F?.labelAlign?.value : F?.labelPosition?.value === "top" ? "left" : "right"), z = null, B = c(() => {
+			let e = F?.model?.value;
+			return e && N.field && e[N.field] !== void 0 ? e[N.field] : null;
+		}), V = c(() => {
+			let e = F?.rules?.value;
+			return e && N.field && e[N.field] ? e[N.field] : N.rules && N.rules.length > 0 ? N.rules : [];
+		}), H = te({
 			state: "init",
 			errorMsg: "",
 			loading: !1
-		}), U = (e) => V.value ? V.value.filter((t) => !t.trigger || !e ? !0 : t.trigger && t.trigger === e) : [], W = l(() => V.value.some((e) => e.required) && (P.showRequired || I?.showRequired?.value)), G = l(() => P.requiredAlign ? P.requiredAlign : I?.requiredAlign?.value ? I?.requiredAlign?.value : "left"), K = async (e) => {
-			let t = P.field, n = U(e);
+		}), U = (e) => V.value ? V.value.filter((t) => !t.trigger || !e ? !0 : t.trigger && t.trigger === e) : [], W = c(() => V.value.some((e) => e.required) && (N.showRequired || F?.showRequired?.value)), G = c(() => N.requiredAlign ? N.requiredAlign : F?.requiredAlign?.value ? F?.requiredAlign?.value : "left"), K = async (e) => {
+			let t = N.field, n = U(e);
 			if (n.length === 0) return !0;
 			if (t) {
 				let e = B.value, r = Array.isArray(e) ? "array" : e != null && typeof e != "string" ? typeof e : void 0, i = r ? n.map((e) => e.type ? e : {
 					...e,
 					type: r
-				}) : n, a = new O({ [t]: i });
+				}) : n, a = new T({ [t]: i });
 				return H.value.loading = !0, a.validate({ [t]: e }).then(() => {
 					H.value.state = "success", H.value.errorMsg = "";
 				}).catch((e) => {
@@ -58,72 +59,78 @@ var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("
 			H.value.state = "init", H.value.errorMsg = "", H.value.loading = !1;
 		}, J = () => {
 			q();
-			let e = I?.model?.value;
-			e && P.field && (e[P.field] = z);
-		}, Y = l(() => H.value.state === "error"), X = {
+			let e = F?.model?.value;
+			e && N.field && (e[N.field] = z);
+		}, Y = c(() => H.value.state === "error"), X = {
 			validate: K,
-			field: P.field,
+			field: N.field,
 			resetField: J,
 			clearValidate: q
 		};
-		_(a, X), _(o, {
-			size: I?.size,
+		g(a, X), g(ee, {
+			size: F?.size,
 			error: Y
+		}), m(() => {
+			N.field && (F?.addField(X), z = F?.model?.value?.[N.field]);
 		}), h(() => {
-			P.field && (I?.addField(X), z = I?.model?.value?.[P.field]);
-		}), g(() => {
-			P.field && I?.removeField(X);
-		}), w({
+			N.field && F?.removeField(X);
+		}), x({
 			validate: K,
 			resetField: J,
 			clearValidate: q,
 			validateStatus: H
 		});
-		let Z = N(), Q = c(Z, 1), $ = c(Q);
-		return y(() => {
-			let e = D(F), t = H.value, n = t.state;
-			b(Z, [
+		let Z = j(), Q = s(Z, 1), $ = s(Q);
+		return _(() => {
+			let e = w(P), t = H.value, n = t.state;
+			v(Z, [
 				e.b(),
 				e.is("error", n === "error"),
 				e.is("success", n === "success"),
 				e.is("loading", t.loading),
-				e.is("top", L.value === "top"),
-				e.m(D(I)?.size?.value)
+				e.is("top", I.value === "top"),
+				e.m(w(F)?.size?.value)
 			]);
-		}), x(Z, 0, 0), d(() => W.value || p.label || p.tooltip, () => {
-			let t = j(), i = c(t);
-			return y(() => {
-				let n = D(F);
-				b(t, [n.e("label-wrapper")]), b(i, [n.e("label"), n.m("align-" + R.value)]), S(i, { width: D(e)(ee.value) });
-			}), x(i, null, 0), d(() => G.value === "left", () => [d(() => W.value, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("required")])), x(e, null, 0), u(D(n)), e;
-			}), f("label", { label: () => p.label }, () => {
-				let e = A();
-				return y(() => C(e, T(p.label))), e;
-			})], () => d(() => G.value === "right", () => [f("label", { label: () => p.label }, () => {
-				let e = A();
-				return y(() => C(e, T(p.label))), e;
-			}), d(() => W.value, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("required")])), x(e, null, 0), u(D(n)), e;
-			})], null, 2), 518), x(i, null, 1), d(() => p.tooltip, () => u(D(s), {
-				content: () => p.tooltip,
+		}), y(Z, 0, 0), u(() => W.value || f.label || f.tooltip, () => {
+			let t = O(), i = s(t);
+			return _(() => {
+				let n = w(P);
+				v(t, [n.e("label-wrapper")]), v(i, [n.e("label"), n.m("align-" + R.value)]), ne(i, { width: w(e)(L.value) });
+			}), y(i, null, 0), u(() => G.value === "left", () => [u(() => W.value, () => {
+				let e = E();
+				return _(() => v(e, [w(P).e("required")])), y(e, null, 0), l(w(n)), e;
+			}), d("label", { label: () => f.label }, () => {
+				let e = D();
+				return _(() => b(e, S(f.label))), e;
+			})], () => u(() => G.value === "right", () => [d("label", { label: () => f.label }, () => {
+				let e = D();
+				return _(() => b(e, S(f.label))), e;
+			}), u(() => W.value, () => {
+				let e = E();
+				return _(() => v(e, [w(P).e("required")])), y(e, null, 0), l(w(n)), e;
+			})], null, 2), 518), y(i, null, 1), u(() => f.tooltip, () => l(w(o), {
+				content: () => f.tooltip,
 				mini: ""
 			}, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("tooltip")])), x(e, null, 0), u(D(r)), e;
+				let e = E();
+				return _(() => v(e, [w(P).e("tooltip")])), y(e, null, 0), l(w(r)), e;
 			})), t;
-		}), y(() => {
-			let e = D(F);
-			b(Q, [e.e("content-wrapper")]), b($, [e.e("content")]);
-		}), x($, null, 0), f("default", { validate: () => K }), x(Q, null, 1), d(() => H.value.state === "error", () => {
-			let e = M(), t = E(e);
-			return y(() => {
-				b(e, [D(F).e("error-msg")]), C(t, T(H.value.errorMsg));
+		}), _(() => {
+			let e = w(P);
+			v(Q, [e.e("content-wrapper")]), v($, [e.e("content")]);
+		}), y($, null, 0), d("default", { validate: () => K }), y(Q, null, 1), u(() => M.extra || f.extra, () => {
+			let e = k();
+			return _(() => v(e, [w(P).e("extra")])), y(e, null, 0), d("extra", null, () => {
+				let e = D();
+				return _(() => b(e, S(f.extra))), e;
+			}), e;
+		}), y(Q, null, 2), u(() => H.value.state === "error", () => {
+			let e = A(), t = C(e);
+			return _(() => {
+				v(e, [w(P).e("error-msg")]), b(t, S(H.value.errorMsg));
 			}), e;
 		}), Z;
 	}
 });
 //#endregion
-export { P as default };
+export { M as default };

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

@@ -1,5 +1,5 @@
 import { PublicProps, ShallowUnwrapRef, VNode, Plugin } from 'vue';
-import { FormItemRule, FormExpose, FormItemExpose } from './types';
+import { FormItemRule, FormExpose, FormItemSlots, FormItemExpose } from './types';
 export declare const SForm: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: {
@@ -31,19 +31,7 @@ export declare const SForm: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
 }) & Plugin;
 export declare const SFormItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
@@ -56,24 +44,13 @@ export declare const SFormItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         labelAlign?: "left" | "right" | undefined;
         showRequired?: boolean | undefined;
         requiredAlign?: "left" | "right" | undefined;
+        extra?: string | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<FormItemExpose>) => void;
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/form/types.d.ts

@@ -53,6 +53,16 @@ export interface FormItemProps {
     showRequired?: boolean;
     /** 必填标识对齐方式 */
     requiredAlign?: "left" | "right";
+    /** 表单项额外内容 */
+    extra?: string;
+}
+export interface FormItemSlots {
+    /** 内容 */
+    default: () => any;
+    /** 标签 */
+    label: () => any;
+    /** 额外内容 */
+    extra: () => any;
 }
 export interface FormContext {
     /** 表单模型 */

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 };

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

@@ -6,7 +6,7 @@ export interface StepsProps {
     /** 是否垂直布局 */
     vertical?: boolean;
     /** 步骤项大小 */
-    size?: "small" | "medium";
+    size?: "mini" | "small" | "medium" | "large" | "larger";
     /** 节点标题布局方向 */
     alignCenter?: boolean;
     /** 当前步骤项状态 */
@@ -17,6 +17,8 @@ export interface StepsProps {
     dot?: boolean;
     /** 是否显示为简单步骤 */
     simple?: boolean;
+    /** 是否使用箭头形步骤条 */
+    arrow?: boolean;
 }
 export interface StepsItemProps {
     /** 标题 */

package/dist/es/hooks/src/use-element-size.mjs

@@ -1,10 +1,41 @@
-import "vue";
+import { onMounted as e, onUnmounted as t, ref as n, watch as r } from "vue";
 //#region ../hooks/src/use-element-size.ts
-var e = /* @__PURE__ */ new WeakMap();
-new ResizeObserver((t) => {
-	for (let n of t) {
-		let t = e.get(n.target);
-		t && (t.width.value = n.contentRect.width, t.height.value = n.contentRect.height);
+var i = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), o = new ResizeObserver((e) => {
+	for (let t of e) {
+		let e = i.get(t.target);
+		e && (e.width.value = t.contentRect.width, e.height.value = t.contentRect.height);
 	}
-});
+}), s = (s) => {
+	let c = n(0), l = n(0), u = () => {
+		c.value = window.innerWidth, l.value = window.innerHeight;
+	}, d = (e) => {
+		i.set(e, {
+			width: c,
+			height: l
+		}), o.observe(e);
+		let t = e.getBoundingClientRect();
+		c.value = t.width, l.value = t.height;
+	}, f = (e) => {
+		o.unobserve(e), i.delete(e);
+	}, p = () => {
+		c.value = window.innerWidth, l.value = window.innerHeight, window.addEventListener("resize", u), a.add(u);
+	}, m = () => {
+		window.removeEventListener("resize", u), a.delete(u);
+	}, h = (e) => {
+		e && (e === window ? p() : e instanceof Element && d(e));
+	}, g = (e) => {
+		e && (e === window ? m() : e instanceof Element && f(e));
+	};
+	return e(() => {
+		h(s === window ? window : s.value);
+	}), t(() => {
+		g(s === window ? window : s.value);
+	}), s !== window && r(() => s.value, (e, t) => {
+		t && g(t), e && h(e);
+	}, { immediate: !1 }), {
+		width: c,
+		height: l
+	};
+};
 //#endregion
+export { s as useElementSize };

package/dist/es/theme/components/datetime-picker.scss

@@ -21,7 +21,7 @@
     }
     @include when(range) {
       &:focus-within {
-        @include be(datetime-picker, input) {
+        @include be(datetime-picker, inner) {
           &:focus {
             background-color: getCssVar("color", "fill-2");
           }
@@ -109,13 +109,13 @@
           padding: 4px 8px 4px 4px;
         }
       }
-      @include be(datetime-picker, input) {
+      @include be(datetime-picker, inner) {
         font-size: getCssVar("font-size", $size);
       }
     }
   }
 
-  @include e(input) {
+  @include e(inner) {
     height: 100%;
     width: 100%;
     padding: 0 8px 0 8px;

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

@@ -78,6 +78,12 @@
     justify-content: flex-start;
   }
 
+  @include e(extra) {
+    margin-top: 4px;
+    color: getCssVar("color", "text-3");
+    font-size: getCssVar("font-size", "mini");
+  }
+
   @include e(error-msg) {
     height: 20px;
     font-size: getCssVar("font-size", "small");

package/dist/es/theme/components/input-tag.scss

@@ -53,14 +53,14 @@
           border-color: getCssVar("color", "danger-6");
         }
         @include when(filled) {
-          background-color: getCssVar("color", "error-1");
-          border-color: getCssVar("color", "error-1");
+          background-color: getCssVar("color", "danger-1");
+          border-color: getCssVar("color", "danger-1");
           &:hover {
-            background-color: getCssVar("color", "error-2");
+            background-color: getCssVar("color", "danger-2");
           }
           &:focus-within {
             background-color: getCssVar("color", "bg-2");
-            border-color: getCssVar("color", "error-5");
+            border-color: getCssVar("color", "danger-5");
           }
         }
       }

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

@@ -1,10 +1,46 @@
 @use "../mixins/function.scss" as *;
 @use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
 
 @include b(steps) {
   display: flex;
   width: 100%;
 
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      @include this-is(simple) {
+        min-height: getCssVar("size", $size);
+      }
+      @include this-is(arrow) {
+        border-radius: getCssVar("radius", $size);
+        @include child-be(steps, step) {
+          min-height: getCssVar("size", $size);
+        }
+      }
+      @include be(steps, icon) {
+        height: calc(getCssVar("size", $size) - 12px);
+        width: calc(getCssVar("size", $size) - 12px);
+        font-size: getCssVar("font-size", $size);
+      }
+      @include be(steps, title) {
+        font-size: getCssVar("font-size", $size);
+        line-height: getCssVar("line-height", $size);
+      }
+      @include be(steps, description) {
+        font-size: getCssVar("font-size", $size);
+        line-height: getCssVar("line-height", $size);
+      }
+      @include be(steps, line) {
+        top: calc((getCssVar("size", $size) - 12px) / 2);
+      }
+      @include this-is(vertical) {
+        @include be(steps, line) {
+          left: calc((getCssVar("size", $size) - 12px) / 2);
+        }
+      }
+    }
+  }
+
   @include when(vertical) {
     height: 100%;
     flex-direction: column;
@@ -19,7 +55,6 @@
       width: 2px;
       top: 0;
       bottom: 0;
-      left: 11px;
       height: 100%;
     }
     @include be(steps, content) {
@@ -40,8 +75,8 @@
   }
 
   @include when(simple) {
-    padding: 12px 8%;
-    background-color: getCssVar("color", "fill-3");
+    padding: 4px 8%;
+    background-color: getCssVar("color", "fill-2");
     flex-direction: row;
     border-radius: getCssVar("radius", "medium");
     @include be(steps, step) {
@@ -136,38 +171,6 @@
     }
   }
 
-  @include m(small) {
-    @include be(steps, icon) {
-      width: 20px;
-      height: 20px;
-      font-size: 12px;
-    }
-    @include be(steps, title) {
-      font-size: getCssVar("font-size", "medium");
-      line-height: getCssVar("line-height", "large");
-    }
-    @include be(steps, description) {
-      font-size: getCssVar("font-size", "small");
-      line-height: getCssVar("line-height", "small");
-    }
-  }
-
-  @include m(medium) {
-    @include be(steps, icon) {
-      width: 24px;
-      height: 24px;
-      font-size: 14px;
-    }
-    @include be(steps, title) {
-      font-size: getCssVar("font-size", "large");
-      line-height: getCssVar("line-height", "larger");
-    }
-    @include be(steps, description) {
-      font-size: getCssVar("font-size", "medium");
-      line-height: getCssVar("line-height", "medium");
-    }
-  }
-
   @include e(step) {
     @include when(changeable) {
       cursor: pointer;
@@ -197,7 +200,6 @@
   @include e(line) {
     position: absolute;
     height: 2px;
-    top: 11px;
     left: 0;
     right: 0;
   }
@@ -234,4 +236,124 @@
     line-height: getCssVar("line-height", "medium");
     color: getCssVar("color", "text-3");
   }
+
+  @include when(arrow) {
+    flex-wrap: nowrap;
+    align-items: stretch;
+    overflow: hidden;
+
+    @include be(steps, step) {
+      position: relative;
+      flex: 1 1 0;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      padding: 4px 16px;
+      color: #fff;
+      overflow: visible;
+
+      &:not(:first-child) {
+        padding-left: var(--s-steps-height);
+      }
+
+      &:not(:last-child) {
+        margin-right: 4px;
+      }
+
+      &:not(:first-child)::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 0;
+        height: 0;
+
+        border-top: calc(var(--s-steps-height) / 2) solid transparent;
+        border-bottom: calc(var(--s-steps-height) / 2) solid transparent;
+        border-left: calc(var(--s-steps-height) / 2) solid getCssVar("color", "bg-2");
+      }
+
+      &:not(:last-child)::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        z-index: 2;
+        width: 0;
+        height: 0;
+        right: calc(var(--s-steps-height) / 2 * -1);
+        border-top: calc(var(--s-steps-height) / 2) solid transparent;
+        border-bottom: calc(var(--s-steps-height) / 2) solid transparent;
+        border-left: calc(var(--s-steps-height) / 2) solid getCssVar("color", "fill-2");
+      }
+
+      @include when(changeable) {
+        cursor: pointer;
+      }
+
+      @include this-bm(steps, wait) {
+        background-color: getCssVar("color", "fill-2");
+
+        &:not(:last-child)::after {
+          border-left-color: getCssVar("color", "fill-2");
+        }
+
+        @include be(steps, title) {
+          color: getCssVar("color", "text-1");
+        }
+        @include be(steps, description) {
+          color: getCssVar("color", "text-3");
+          opacity: 1;
+        }
+      }
+
+      @include this-bm(steps, process) {
+        background-color: getCssVar("color", "primary-6");
+
+        &:not(:last-child)::after {
+          border-left-color: getCssVar("color", "primary-6");
+        }
+      }
+
+      @include this-bm(steps, done) {
+        background-color: getCssVar("color", "success-6");
+
+        &:not(:last-child)::after {
+          border-left-color: getCssVar("color", "success-6");
+        }
+      }
+
+      @include this-bm(steps, error) {
+        background-color: getCssVar("color", "danger-6");
+
+        &:not(:last-child)::after {
+          border-left-color: getCssVar("color", "danger-6");
+        }
+      }
+    }
+
+    @include be(steps, content) {
+      margin-top: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    @include be(steps, title) {
+      color: inherit;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @include be(steps, description) {
+      color: inherit;
+      opacity: 0.85;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }

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

@@ -29,10 +29,10 @@
     }
     @include when(disabled) {
       cursor: not-allowed;
-      @include be(input, inner) {
+      @include be(textarea, inner) {
         color: getCssVar("color", "text-3");
       }
-      @include this-be(input, wrapper) {
+      @include this-be(textarea, wrapper) {
         background-color: getCssVar("color", "bg-2");
         border: 1px solid getCssVar("color", "fill-3");
         &:hover {
@@ -58,14 +58,14 @@
         border-color: getCssVar("color", "danger-6");
       }
       @include when(filled) {
-        background-color: getCssVar("color", "error-1");
-        border-color: getCssVar("color", "error-1");
+        background-color: getCssVar("color", "danger-1");
+        border-color: getCssVar("color", "danger-1");
         &:hover {
-          background-color: getCssVar("color", "error-2");
+          background-color: getCssVar("color", "danger-2");
         }
         &:focus-within {
           background-color: getCssVar("color", "bg-2");
-          border-color: getCssVar("color", "error-5");
+          border-color: getCssVar("color", "danger-5");
         }
       }
     }
@@ -78,7 +78,7 @@
       }
       &:focus-within {
         background-color: getCssVar("color", "bg-2");
-        border-color: getCssVar("color", "primary-6");
+        border-color: getCssVar("color", "primary-5");
       }
     }
   }

package/dist/json/vetur-attributes.json

@@ -878,6 +878,10 @@
   "s-form-item/requiredAlign": {
     "description": "必填标识对齐方式"
   },
+  "s-form-item/extra": {
+    "description": "表单项额外内容",
+    "type": "string"
+  },
   "s-galleria/modelValue": {
     "description": "当前选中项索引（v-model）",
     "type": "number"
@@ -2286,6 +2290,10 @@
     "description": "是否显示为简单步骤",
     "type": "boolean"
   },
+  "s-steps/arrow": {
+    "description": "是否使用箭头形步骤条",
+    "type": "boolean"
+  },
   "s-steps-item/title": {
     "description": "标题",
     "type": "string"

package/dist/json/vetur-tags.json

@@ -381,7 +381,8 @@
       "labelPosition",
       "labelAlign",
       "showRequired",
-      "requiredAlign"
+      "requiredAlign",
+      "extra"
     ]
   },
   "s-galleria": {
@@ -948,7 +949,8 @@
       "status",
       "changeable",
       "dot",
-      "simple"
+      "simple",
+      "arrow"
     ]
   },
   "s-steps-item": {

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.27.0",
+  "version": "0.29.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2340,10 +2340,31 @@
                 "type": "left | right",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "extra",
+              "description": "表单项额外内容",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
-          "slots": []
+          "slots": [
+            {
+              "name": "default",
+              "description": "内容"
+            },
+            {
+              "name": "label",
+              "description": "标签"
+            },
+            {
+              "name": "extra",
+              "description": "额外内容"
+            }
+          ]
         },
         {
           "name": "s-galleria",
@@ -5868,7 +5889,7 @@
               "name": "size",
               "description": "步骤项大小",
               "value": {
-                "type": "small | medium",
+                "type": "mini | small | medium | large | larger",
                 "kind": "expression"
               }
             },
@@ -5911,6 +5932,14 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "arrow",
+              "description": "是否使用箭头形步骤条",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/package.json

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