savor-ui 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 
 
+# [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/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/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/json/vetur-attributes.json

@@ -2286,6 +2286,10 @@
     "description": "是否显示为简单步骤",
     "type": "boolean"
   },
+  "s-steps/arrow": {
+    "description": "是否使用箭头形步骤条",
+    "type": "boolean"
+  },
   "s-steps-item/title": {
     "description": "标题",
     "type": "string"

package/dist/json/vetur-tags.json

@@ -948,7 +948,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.28.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -5868,7 +5868,7 @@
               "name": "size",
               "description": "步骤项大小",
               "value": {
-                "type": "small | medium",
+                "type": "mini | small | medium | large | larger",
                 "kind": "expression"
               }
             },
@@ -5911,6 +5911,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.29.0",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",