savor-ui 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 
 
+## [0.12.1](https://gitee.com/mach552/savor-ui/compare/v0.12.0...v0.12.1) (2026-07-16)
+
+
+### Bug Fixes
+
+* **cascader:** 修复类型错误 ([84cd4a2](https://gitee.com/mach552/savor-ui/commits/84cd4a23c677746fa75446b00b66b9b76081f1d9))
+* **menu:** 修复菜单的level错误问题 ([e956f57](https://gitee.com/mach552/savor-ui/commits/e956f573138984ce39af1ded97bc3ff9abb7f6a0))
+* **modal:** 修复过渡组件报无子元素警告的问题 ([0e29418](https://gitee.com/mach552/savor-ui/commits/0e29418a85cd27f08b77cfbf9ed9ba9fe078f463))
+* **modal:** 修复内容尺寸变化不居中的问题 ([0cb4e66](https://gitee.com/mach552/savor-ui/commits/0cb4e665a027cb5814b24c734516c450ff6aa3f6))
+
 # [0.12.0](https://gitee.com/mach552/savor-ui/compare/v0.11.0...v0.12.0) (2026-07-15)
 
 

package/README.md

@@ -1,39 +1,70 @@
-<H1 align="center">savor-ui</H1>
+# savor-ui
 
-- 基于 Vue3 的UI组件库，仅支持 Vue Vapor 模式
+基于 Vue3 Vapor 模式打造的轻量自用 UI 组件库
+
+**savor-ui** 是一款轻量级 UI 组件库，专为 **Vue Vapor 编译模式** 设计，针对性适配 Vapor 编译特性，全部采用**组合式 Api**编写，主打轻量化、高性能、高定制化，适配现代前端工程化开发场景。
+
+本组件库为个人自用开源组件库，整合多款主流优秀 Vue UI 组件库的设计思路与交互逻辑，优化适配 Vapor 专属编译规则，保留简洁易用的开发体验，同时支持灵活的主题自定义能力，满足日常后台系统、中后台业务页面开发需求。
+
+- **专属适配**：仅支持 Vue3 Vapor 编译模式，不兼容 Runtime 模式，深度适配 Vapor 编译优化特性，打包体积更小、运行性能更高
+
+- **轻量高效**：组件轻量化封装，无冗余依赖，按需加载友好，适配现代化工程化项目
+
+- **主题定制**：内置完整明暗主题体系，支持全局一键主题切换、主色自定义、样式灵活覆盖
+
+- **规范统一**：参考主流企业级组件库设计规范，交互逻辑统一，降低开发上手成本
+
+项目部分组件设计、交互逻辑、主题配置方案参考以下业界优秀开源组件库，特此致谢！
+
+- [Element Plus](https://cn.element-plus.org/)：Vue3 主流企业级组件库，成熟的组件交互与设计体系
+
+- [Arco Design Vue](https://arco.design/vue)：字节跳动出品，优秀的按需加载、主题配置与工程化适配方案
+
+- [Antdv Next](https://www.antdv-next.cn/index-cn)：参考 Ant Design v6 设计规范，灵活的主题算法与现代化 UI 设计
+
+- [Naive UI](https://www.naiveui.com/zh-CN)：高质量、类型完备的 Vue3 组件库，严谨的组件设计逻辑
+
+- [Prime Vue](https://primevue.dev/)：功能丰富的跨端 UI 组件库，多样化业务组件交互参考
+
+- [Vexip UI](https://www.vexipui.com/)：轻量化、高自定义的 Vue3 组件库设计思路
 
 ## 快速开始
 
-### Vue 版本
+[文档地址](http://122.51.220.99:12121/)
+
+适配 Vue3 最新 Vapor 编译模式，最低版本要求：
 
-vue >= 3.6.0-beta.11
+`vue >= 3.6.0-beta.11`
 
-### 安装
+**注意**：本组件库**仅支持 Vue Vapor 编译模式**，不支持 IE 浏览器及传统 Vue3 Runtime 编译模式。
+
+推荐使用 `pnpm` 安装（极速、节省磁盘空间）
 
 ```shell
 pnpm add savor-ui
 ```
 
-### 完整引入
+在项目入口文件全局引入组件库及样式，完成全局注册：
 
 ```ts
 import { createVaporApp } from "vue";
 import App from "./App.vue";
 import SavorUI from "savor-ui";
 
+// 引入组件库全局主题样式
 import "savor-ui/theme/index.scss";
 
 const app = createVaporApp(App);
+// 全局注册所有 SavorUI 组件
 app.use(SavorUI);
 app.mount("#app");
 ```
 
-### 调整主题
-
-主题可以通过使用 `s-config-provider` 组件调整。
+组件库内置明暗两套主题，通过 `s-config-provider` 全局配置组件实现**全局主题、主色值自定义**，支持动态切换主题：
 
 ```html
 <template>
+  <!-- 全局主题配置包裹根路由，全局生效 -->
   <s-config-provider :theme="theme">
     <VaporRouterView />
   </s-config-provider>
@@ -43,12 +74,15 @@ app.mount("#app");
   import { reactive } from "vue";
   import { VaporRouterView } from "vue-router";
 
+  // 自定义明暗主题主色及配置
   const theme = reactive({
+    // 亮色主题配置
     lightTheme: {
-      colorPrimary: "#1890ff",
+      colorPrimary: "#1890ff", // 全局主色
     },
+    // 暗色主题配置
     darkTheme: {
-      colorPrimary: "#1890ff",
+      colorPrimary: "#1890ff", // 全局主色
     },
   });
 </script>

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

@@ -115,7 +115,7 @@ var k = /*@__PURE__*/ p({
 			if (h.pathMode && typeof A.value == "string") {
 				let t = A.value.split(h.pathSeparator);
 				e = X(h.options, t);
-			} else e = Y(h.options, A.value);
+			} else Array.isArray(A.value) || (e = Y(h.options, A.value));
 			e && (F.value = e.map((e) => e[L.value.key]), I.value = e, R.value = V(e));
 		}, Q = (e) => {
 			A.value === void 0 ? e.forEach((e) => {

package/dist/es/components/src/menu/sub-menu.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -58,7 +58,7 @@ var P = /*@__PURE__*/ m({
 		}), A(() => I?.openKeys.value || [], (e) => {
 			e && e.length > 0 && (B.value = e.includes(E.name));
 		}, { immediate: !0 }), y(() => {
-			F.value?.style.setProperty("--s-menu-level", `${z}`), L?.registerDescendant(E.name);
+			F.value?.style.setProperty("--s-menu-level", `${z.value}`), L?.registerDescendant(E.name);
 		}), b(o, { level: z }), b(s, {
 			registerDescendant: (e) => {
 				V.value.add(e), L?.registerDescendant(e);

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

@@ -2,25 +2,25 @@ import { getSize as e } from "../../../utils/src/tool.mjs";
 import "../../../utils/index.mjs";
 import { useDrag as t } from "../../../hooks/src/use-drag.mjs";
 import { useNamespace as n } from "../../../hooks/src/use-namespace.mjs";
-import { useResizeObserver as ee } from "../../../hooks/src/use-resize-observer.mjs";
-import { useScrollHidden as r } from "../../../hooks/src/use-scroll-hidden.mjs";
-import { useZIndex as i } from "../../../hooks/src/use-zIndex.mjs";
+import { useResizeObserver as r } from "../../../hooks/src/use-resize-observer.mjs";
+import { useScrollHidden as ee } from "../../../hooks/src/use-scroll-hidden.mjs";
+import { useZIndex as te } from "../../../hooks/src/use-zIndex.mjs";
 import "../../../hooks/index.mjs";
-import te from "../../../icons/src/close.vue.mjs";
-import ne from "../../../icons/src/fullscreen-exit.vue.mjs";
-import re from "../../../icons/src/fullscreen.vue.mjs";
+import ne from "../../../icons/src/close.vue.mjs";
+import re from "../../../icons/src/fullscreen-exit.vue.mjs";
+import ie from "../../../icons/src/fullscreen.vue.mjs";
 import "../../../icons/index.mjs";
-import { SScrollbar as ie } from "../scrollbar/index.mjs";
-import { SButton as a } from "../button/index.mjs";
-import { STransition as o } from "../transition/index.mjs";
-import { VaporTeleport as s, applyVShow as c, child as l, computed as u, createComponent as d, createIf as f, createInvoker as ae, createSlot as p, createTemplateRefSetter as oe, defineVaporComponent as m, delegateEvents as h, mergeModels as g, next as se, nextTick as _, onUnmounted as ce, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, setText as C, template as w, toDisplayString as T, unref as E, useModel as le, useTemplateRef as D, watch as O, watchEffect as ue } from "vue";
+import { SScrollbar as ae } from "../scrollbar/index.mjs";
+import { SButton as i } from "../button/index.mjs";
+import { STransition as a } from "../transition/index.mjs";
+import { VaporTeleport as oe, applyVShow as o, child as s, computed as c, createComponent as l, createIf as u, createInvoker as se, createSlot as d, createTemplateRefSetter as ce, defineVaporComponent as f, delegateEvents as p, mergeModels as m, next as h, nextTick as g, onUnmounted as le, ref as _, renderEffect as v, setClass as y, setInsertionState as b, setStyle as x, setText as S, template as C, toDisplayString as w, unref as T, useModel as E, useTemplateRef as D, watch as O, watchEffect as ue } from "vue";
 //#region ../components/src/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var k = w("<div>"), A = w(" "), de = w("<div><div></div><div></div>"), j = w("<div style=\"flex: 1; overflow: hidden; display: flex; flex-direction: column\">"), fe = w("<div><div>");
-h("click");
-var M = /*@__PURE__*/ m({
+var k = C("<div>"), A = C(" "), de = C("<div><div></div><div></div>"), j = C("<div style=\"flex: 1; overflow: hidden; display: flex; flex-direction: column\">"), fe = C("<div><div>");
+p("click");
+var M = /*@__PURE__*/ f({
 	name: "SModal",
 	__name: "modal",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ m({
 		modalValue: { type: Boolean },
 		width: { default: "0px" },
 		height: {},
@@ -82,33 +82,35 @@ var M = /*@__PURE__*/ m({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g([
+	emits: /*@__PURE__*/ m([
 		"close",
 		"closed",
 		"opened",
 		"confirm"
 	], ["update:modelValue"]),
-	setup(m, { expose: h, emit: g }) {
-		let w = m, M = g, N = n("modal"), { lockScroll: pe, unlockScroll: P } = r(), { nextZIndex: me } = i(), F = v(0), I = D("modalRef"), L = D("headerRef"), R = le(m, "modelValue"), z = v(!1), B = v(!1), V = v(!1), H = v(!1), U = v(0), W = v(0), G = v(!1), K = v(0), q = v(0), J = u(() => typeof w.to == "string" ? document.querySelector(w.to) || document.body : w.to);
-		ee(J, () => {
+	setup(f, { expose: p, emit: m }) {
+		let C = f, M = m, N = n("modal"), { lockScroll: pe, unlockScroll: P } = ee(), { nextZIndex: me } = te(), F = _(0), I = D("modalRef"), L = D("headerRef"), R = E(f, "modelValue"), z = _(!1), B = _(!1), V = _(!1), H = _(!1), U = _(0), W = _(0), G = _(!1), K = _(0), q = _(0), J = c(() => typeof C.to == "string" ? document.querySelector(C.to) || document.body : C.to);
+		r(J, () => {
 			let e = J.value;
 			K.value = e.clientHeight, q.value = e.clientWidth, Q();
+		}), r(I, () => {
+			z.value && Q();
 		});
-		let he = u(() => ({
+		let he = c(() => ({
 			zIndex: F.value,
-			position: w.to === "body" ? "fixed" : "absolute"
-		})), ge = u(() => V.value ? {} : {
-			width: e(w.width),
-			height: e(w.height),
+			position: C.to === "body" ? "fixed" : "absolute"
+		})), ge = c(() => V.value ? {} : {
+			width: e(C.width),
+			height: e(C.height),
 			top: `${U.value}px`,
 			left: `${W.value}px`,
-			...w.modalStyle
+			...C.modalStyle
 		}), _e = () => {
 			M("opened");
 		}, ve = () => {
-			B.value = !1, H.value = !1, G.value = !1, M("closed"), _(P);
+			B.value = !1, H.value = !1, G.value = !1, M("closed"), g(P);
 		}, ye = () => {
-			w.closeOnOverlayClick && X();
+			C.closeOnOverlayClick && X();
 		}, be = (e) => {
 			e ? R.value = !1 : H.value = !1;
 		}, Y = () => {
@@ -118,117 +120,117 @@ var M = /*@__PURE__*/ m({
 		}, xe = () => {
 			V.value = !V.value;
 		};
-		O(() => w.fullscreen, (e) => V.value = e, { immediate: !0 });
+		O(() => C.fullscreen, (e) => V.value = e, { immediate: !0 });
 		let Z = (e) => {
-			e.key === "Escape" && w.closeOnEsc && z.value && X();
+			e.key === "Escape" && C.closeOnEsc && z.value && X();
 		}, Q = async () => {
-			if (await _(), !I.value || G.value) return;
+			if (await g(), !I.value || G.value) return;
 			let e = I.value;
-			w.center ? U.value = Math.max(0, (K.value - e.offsetHeight) / 2) : U.value = w.offset, W.value = Math.max(0, (q.value - e.offsetWidth) / 2);
+			C.center ? U.value = Math.max(0, (K.value - e.offsetHeight) / 2) : U.value = C.offset, W.value = Math.max(0, (q.value - e.offsetWidth) / 2);
 		};
 		O(() => R.value, async (e) => {
-			e ? (F.value = me(), pe(), B.value = !0, await _(), z.value = !0, Q()) : z.value = !1;
+			e ? (F.value = me(), pe(), B.value = !0, await g(), z.value = !0, Q()) : z.value = !1;
 		}, { immediate: !0 }), ue((e) => {
 			z.value && (document.addEventListener("keydown", Z), e(() => document.removeEventListener("keydown", Z)));
 		}), t({
 			container: I,
 			target: L,
 			parent: J,
-			enable: u(() => w.draggable && !V.value),
+			enable: c(() => C.draggable && !V.value),
 			divLeft: W,
 			divTop: U,
 			hasDragged: G
-		}), ce(() => {
+		}), le(() => {
 			P();
-		}), h({ handleClose: X });
-		let $ = oe();
-		return d(s, {
-			to: () => m.to,
+		}), p({ handleClose: X });
+		let $ = ce();
+		return l(oe, {
+			to: () => f.to,
 			defer: ""
 		}, () => {
-			let e = fe(), t = l(e, 1);
-			return y(() => {
-				b(e, [E(N).e("container")]), S(e, he.value);
-			}), x(e, 0, 0), d(E(o), { type: "opacity" }, () => f(() => m.mask && z.value, () => {
+			let e = fe(), t = s(e, 1);
+			return v(() => {
+				y(e, [T(N).e("container")]), x(e, he.value);
+			}), b(e, 0, 0), l(T(a), { type: "opacity" }, () => u(() => f.mask, () => {
 				let e = k();
-				return e.$evtclick = ae(ye), y(() => {
-					S(e, m.maskStyle), b(e, [E(N).e("mask")]);
+				return o(e, () => z.value), e.$evtclick = se(ye), v(() => {
+					x(e, f.maskStyle), y(e, [T(N).e("mask")]);
 				}), e;
-			}, null, 129)), y(() => b(t, [E(N).e("wrapper")])), x(t, null, 0), d(E(o), {
+			}, null, 129)), v(() => y(t, [T(N).e("wrapper")])), b(t, null, 0), l(T(a), {
 				type: "scale",
 				onAfterLeave: () => ve,
 				onAfterEnter: () => _e
 			}, () => {
 				let e = k();
-				return y(() => {
-					let t = E(N);
-					b(e, [
+				return v(() => {
+					let t = T(N);
+					y(e, [
 						t.b(),
-						t.is("drag", m.draggable),
+						t.is("drag", f.draggable),
 						t.is("fullscreen", V.value),
-						m.className
-					]), S(e, ge.value);
-				}), x(e, null, 0), f(() => m.header, () => {
-					let e = de(), t = l(e), n = se(t, 1);
-					return y(() => {
-						let n = E(N);
-						b(e, [n.e("header")]), b(t, [n.e("title")]);
-					}), x(t, null, 0), p("header", null, () => {
+						f.className
+					]), x(e, ge.value);
+				}), b(e, null, 0), u(() => f.header, () => {
+					let e = de(), t = s(e), n = h(t, 1);
+					return v(() => {
+						let n = T(N);
+						y(e, [n.e("header")]), y(t, [n.e("title")]);
+					}), b(t, null, 0), d("header", null, () => {
 						let e = A();
-						return y(() => C(e, T(m.title))), e;
-					}), y(() => b(n, [E(N).e("header-icon")])), x(n, null, 0), f(() => m.fullable, () => d(E(a), {
+						return v(() => S(e, w(f.title))), e;
+					}), v(() => y(n, [T(N).e("header-icon")])), b(n, null, 0), u(() => f.fullable, () => l(T(i), {
 						text: "",
 						size: "small",
 						onClick: () => xe
-					}, { icon: () => f(() => V.value, () => d(E(ne)), () => d(E(re)), 645) })), x(n, null, 1), f(() => m.closable, () => d(E(a), {
+					}, { icon: () => u(() => V.value, () => l(T(re)), () => l(T(ie)), 645) })), b(n, null, 1), u(() => f.closable, () => l(T(i), {
 						text: "",
 						size: "small",
 						circle: "",
 						onClick: () => X
-					}, { icon: () => d(E(te)) })), $(e, L, null, "headerRef"), e;
-				}), x(e, null, 1), f(() => !m.scrollContent, () => {
+					}, { icon: () => l(T(ne)) })), $(e, L, null, "headerRef"), e;
+				}), b(e, null, 1), u(() => !f.scrollContent, () => {
 					let e = k();
-					return y(() => {
-						b(e, [E(N).e("body")]), S(e, {
+					return v(() => {
+						y(e, [T(N).e("body")]), x(e, {
 							padding: "16px",
-							...m.bodyStyle
+							...f.bodyStyle
 						});
-					}), x(e, null, 0), p("default", null, () => {
+					}), b(e, null, 0), d("default", null, () => {
 						let e = A();
-						return y(() => C(e, T(m.content))), e;
+						return v(() => S(e, w(f.content))), e;
 					}), e;
 				}, () => {
 					let e = j();
-					return x(e, null, 0), d(E(ie), { $: [() => ({
+					return b(e, null, 0), l(T(ae), { $: [() => ({
 						padding: "16px",
-						...m.scrollbarProps
-					})] }, () => p("default", null, () => {
+						...f.scrollbarProps
+					})] }, () => d("default", null, () => {
 						let e = A();
-						return y(() => C(e, T(m.content))), e;
+						return v(() => S(e, w(f.content))), e;
 					}, 4)), e;
-				}, 1541), x(e, null, 2), f(() => m.footer, () => {
+				}, 1541), b(e, null, 2), u(() => f.footer, () => {
 					let e = k();
-					return y(() => b(e, [E(N).e("footer")])), x(e, null, 0), p("footer", null, () => f(() => m.btnReverse, () => [d(E(a), {
+					return v(() => y(e, [T(N).e("footer")])), b(e, null, 0), d("footer", null, () => u(() => f.btnReverse, () => [l(T(i), {
 						label: "确定",
 						loading: () => H.value,
 						type: "primary",
 						onClick: () => Y
-					}), d(E(a), {
+					}), l(T(i), {
 						label: "取消",
 						secondary: "",
 						onClick: () => X
-					})], () => [d(E(a), {
+					})], () => [l(T(i), {
 						label: "取消",
 						secondary: "",
 						onClick: () => X
-					}), d(E(a), {
+					}), l(T(i), {
 						label: "确定",
 						loading: () => H.value,
 						type: "primary",
 						onClick: () => Y
 					})], 1930)), e;
-				}), c(e, () => z.value), $(e, I, null, "modalRef"), e;
-			}), c(e, () => B.value), e;
+				}), o(e, () => z.value), $(e, I, null, "modalRef"), e;
+			}), o(e, () => B.value), e;
 		}, !0);
 	}
 });

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.11.0",
+  "version": "0.12.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

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