savor-ui 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+# [0.20.0](https://gitee.com/mach552/savor-ui/compare/v0.19.0...v0.20.0) (2026-08-10)
+
+
+### Features
+
+* **drawer:** 新增`desc`属性 ([28ac722](https://gitee.com/mach552/savor-ui/commits/28ac722dfb797062d01512f79092df889e66a4b8))
+* **dropdown:** 新增延迟关闭属性 ([8a563e1](https://gitee.com/mach552/savor-ui/commits/8a563e1731542bf3297ffa595bd8c7953d48234d))
+
 # [0.19.0](https://gitee.com/mach552/savor-ui/compare/v0.18.0...v0.19.0) (2026-08-09)
 
 

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

@@ -13,8 +13,8 @@ var m = u("<div>"), h = u("<div> "), g = u("<div>", 1), _ = /*@__PURE__*/ i({
 	},
 	setup(i, { slots: u }) {
 		let _ = i, v = e("badge"), y = t(() => ({
-			height: "10px",
-			width: "10px",
+			height: "6px",
+			width: "6px",
 			..._.dotStyle
 		})), b = t(() => _.max && _.count > _.max ? `${_.max}+` : _.count), x = g();
 		return a(() => {

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

@@ -7,16 +7,16 @@ import "../../../hooks/index.mjs";
 import i from "../../../icons/src/close.vue.mjs";
 import "../../../icons/index.mjs";
 import a from "../button/button.vue.mjs";
-import ee from "../scrollbar/scrollbar.vue.mjs";
-import { STransition as o } from "../transition/index.mjs";
-import { VaporTeleport as te, applyVShow as s, child as c, computed as l, createComponent as u, createIf as d, createInvoker as f, createSlot as p, createTemplateRefSetter as m, defineVaporComponent as h, delegateEvents as g, mergeModels as _, nextTick as v, onMounted as ne, onUnmounted as re, ref as y, renderEffect as b, setClass as x, setInsertionState as S, setStyle as C, setText as w, template as T, toDisplayString as E, txt as D, unref as O, useModel as ie, watch as k, watchEffect as ae } from "vue";
+import o from "../scrollbar/scrollbar.vue.mjs";
+import { STransition as s } from "../transition/index.mjs";
+import { VaporTeleport as c, applyVShow as l, child as u, computed as d, createComponent as f, createIf as p, createInvoker as m, createSlot as h, createTemplateRefSetter as ee, defineVaporComponent as g, delegateEvents as _, mergeModels as v, nextTick as y, onMounted as te, onUnmounted as b, ref as x, renderEffect as S, setClass as C, setInsertionState as w, setStyle as T, setText as E, template as D, toDisplayString as O, txt as k, unref as A, useModel as ne, watch as j, watchEffect as re } from "vue";
 //#region ../components/src/drawer/drawer.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var A = T("<div>"), j = T("<div> "), M = T("<div><div><div></div>");
-g("click", "mousedown");
-var N = /*@__PURE__*/ h({
+var M = D("<div>"), ie = D("<div> "), ae = D("<div><div> </div>"), oe = D("<div><div><div></div>");
+_("click", "mousedown");
+var N = /*@__PURE__*/ g({
 	name: "SDrawer",
 	__name: "drawer",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ v({
 		modelValue: { type: Boolean },
 		closeOnEsc: {
 			type: Boolean,
@@ -40,6 +40,7 @@ var N = /*@__PURE__*/ h({
 		resizable: { type: Boolean },
 		to: { default: "body" },
 		title: {},
+		desc: {},
 		header: {
 			type: Boolean,
 			default: !0
@@ -65,7 +66,7 @@ var N = /*@__PURE__*/ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ _([
+	emits: /*@__PURE__*/ v([
 		"esc",
 		"maskClick",
 		"open",
@@ -73,45 +74,45 @@ var N = /*@__PURE__*/ h({
 		"close",
 		"closed"
 	], ["update:modelValue"]),
-	setup(h, { emit: g }) {
-		let _ = h, T = g, N = t("drawer"), { nextZIndex: P } = r(), F = y(0), { lockScroll: I, unlockScroll: L } = n(), R = ie(h, "modelValue"), z = y(!1), B = y(!1), V = y(!1), H = y(""), U = y("");
-		ae(() => {
-			H.value = e(_.width), U.value = e(_.height);
+	setup(g, { emit: _ }) {
+		let v = g, D = _, N = t("drawer"), { nextZIndex: P } = r(), F = x(0), { lockScroll: se, unlockScroll: ce } = n(), I = ne(g, "modelValue"), L = x(!1), R = x(!1), z = x(!1), B = x(""), V = x("");
+		re(() => {
+			B.value = e(v.width), V.value = e(v.height);
 		});
-		let oe = l(() => ({
+		let H = d(() => ({
 			zIndex: F.value,
-			position: _.to === "body" ? "fixed" : "absolute"
-		})), W = l(() => {
-			let e = { ..._.drawerStyle };
-			return (_.placement === "left" || _.placement === "right") && (e.width = H.value), (_.placement === "top" || _.placement === "bottom") && (e.height = U.value), e;
-		}), se = () => {
-			T("opened");
-		}, ce = () => {
-			B.value = !1, T("closed"), v(() => {
-				Z.value && (Z.value.style.transition = "", Z.value.style.transform = ""), L();
+			position: v.to === "body" ? "fixed" : "absolute"
+		})), U = d(() => {
+			let e = { ...v.drawerStyle };
+			return (v.placement === "left" || v.placement === "right") && (e.width = B.value), (v.placement === "top" || v.placement === "bottom") && (e.height = V.value), e;
+		}), W = () => {
+			D("opened");
+		}, le = () => {
+			R.value = !1, D("closed"), y(() => {
+				Z.value && (Z.value.style.transition = "", Z.value.style.transform = ""), ce();
 			});
 		}, G = () => {
-			R.value = !1, T("close");
-		}, le = () => {
-			_.closeOnMask && (G(), T("maskClick"));
-		}, ue = (e) => {
-			e.preventDefault(), V.value = !0;
+			I.value = !1, D("close");
+		}, ue = () => {
+			v.closeOnMask && (G(), D("maskClick"));
+		}, de = (e) => {
+			e.preventDefault(), z.value = !0;
 		}, K = (e) => {
-			if (V.value) {
-				if (_.placement === "right" && (H.value = X(window.innerWidth - e.clientX, _.minWidth, _.maxWidth, !0), $(H.value, !0)), _.placement === "left") {
+			if (z.value) {
+				if (v.placement === "right" && (B.value = X(window.innerWidth - e.clientX, v.minWidth, v.maxWidth, !0), $(B.value, !0)), v.placement === "left") {
 					let t = e.clientX;
-					H.value = X(t, _.minWidth, _.maxWidth, !0), $(H.value, !0);
+					B.value = X(t, v.minWidth, v.maxWidth, !0), $(B.value, !0);
 				}
-				if (_.placement === "bottom" && (U.value = X(window.innerHeight - e.clientY, _.minHeight, _.maxHeight, !1), $(U.value, !0)), _.placement === "top") {
+				if (v.placement === "bottom" && (V.value = X(window.innerHeight - e.clientY, v.minHeight, v.maxHeight, !1), $(V.value, !0)), v.placement === "top") {
 					let t = e.clientY;
-					U.value = X(t, _.minHeight, _.maxHeight, !1), $(U.value, !0);
+					V.value = X(t, v.minHeight, v.maxHeight, !1), $(V.value, !0);
 				}
 			}
 		}, q = () => {
-			V.value &&= !1;
+			z.value &&= !1;
 		}, J = (e) => {
-			e.key === "Escape" && _.closeOnEsc && R.value && (G(), T("esc"));
-		}, de = (e) => {
+			e.key === "Escape" && v.closeOnEsc && I.value && (G(), D("esc"));
+		}, fe = (e) => {
 			let t = String(e).trim().match(/^(\d*\.?\d+)(.*)$/);
 			return t ? {
 				num: parseFloat(t[1]),
@@ -121,7 +122,7 @@ var N = /*@__PURE__*/ h({
 				unit: "px"
 			};
 		}, Y = (e, t) => {
-			let { num: n, unit: r } = de(e), i = t ? window.innerWidth : window.innerHeight;
+			let { num: n, unit: r } = fe(e), i = t ? window.innerWidth : window.innerHeight;
 			switch (r) {
 				case "%":
 				case "vw":
@@ -132,74 +133,80 @@ var N = /*@__PURE__*/ h({
 		}, X = (e, t, n, r) => {
 			let i = Y(t, r), a = Y(n, r);
 			return Math.max(i, Math.min(e, a)) + "px";
-		}, Z = y(null), Q = () => {
-			_.to === "body" ? Z.value = document.querySelector("#app") : _.to instanceof HTMLElement ? Z.value = _.to : typeof _.to == "string" && (Z.value = document.querySelector(_.to));
+		}, Z = x(null), Q = () => {
+			v.to === "body" ? Z.value = document.querySelector("#app") : v.to instanceof HTMLElement ? Z.value = v.to : typeof v.to == "string" && (Z.value = document.querySelector(v.to));
 		}, $ = (e, t) => {
-			_.push && Z.value && (t ? (Z.value.style.transition = "transform 0.3s var(--s-bezier-out)", _.placement === "left" ? Z.value.style.transform = `translateX(${e})` : _.placement === "right" ? Z.value.style.transform = `translateX(-${e})` : _.placement === "top" ? Z.value.style.transform = `translateY(${e})` : _.placement === "bottom" && (Z.value.style.transform = `translateY(-${e})`)) : (Z.value.style.transition = "transform 0.3s var(--s-bezier-in)", Z.value.style.transform = "translate(0,0)"));
+			v.push && Z.value && (t ? (Z.value.style.transition = "transform 0.3s var(--s-bezier-out)", v.placement === "left" ? Z.value.style.transform = `translateX(${e})` : v.placement === "right" ? Z.value.style.transform = `translateX(-${e})` : v.placement === "top" ? Z.value.style.transform = `translateY(${e})` : v.placement === "bottom" && (Z.value.style.transform = `translateY(-${e})`)) : (Z.value.style.transition = "transform 0.3s var(--s-bezier-in)", Z.value.style.transform = "translate(0,0)"));
 		};
-		k(() => _.to, Q), k(() => R.value, (e) => {
-			e ? (F.value = P(), I(), B.value = !0, v(() => {
-				z.value = !0, _.placement === "left" || _.placement === "right" ? $(W.value.width, !0) : (_.placement === "top" || _.placement === "bottom") && $(W.value.height, !0), _.closeOnEsc && (document.removeEventListener("keydown", J), document.addEventListener("keydown", J)), T("open");
-			})) : (z.value = !1, document.removeEventListener("keydown", J), $("0", !1));
-		}, { immediate: !0 }), k(() => _.resizable, (e) => {
+		j(() => v.to, Q), j(() => I.value, (e) => {
+			e ? (F.value = P(), se(), R.value = !0, y(() => {
+				L.value = !0, v.placement === "left" || v.placement === "right" ? $(U.value.width, !0) : (v.placement === "top" || v.placement === "bottom") && $(U.value.height, !0), v.closeOnEsc && (document.removeEventListener("keydown", J), document.addEventListener("keydown", J)), D("open");
+			})) : (L.value = !1, document.removeEventListener("keydown", J), $("0", !1));
+		}, { immediate: !0 }), j(() => v.resizable, (e) => {
 			e ? (window.addEventListener("mousemove", K), window.addEventListener("mouseup", q)) : (window.removeEventListener("mousemove", K), window.removeEventListener("mouseup", q));
-		}, { immediate: !0 }), ne(() => {
+		}, { immediate: !0 }), te(() => {
 			Q();
-		}), re(() => {
+		}), b(() => {
 			document.removeEventListener("keydown", J), window.removeEventListener("mousemove", K), window.removeEventListener("mouseup", q);
 		});
-		let fe = m();
-		return u(te, {
-			to: () => h.to,
+		let pe = ee();
+		return f(c, {
+			to: () => g.to,
 			defer: ""
 		}, () => {
-			let e = A();
-			return b(() => {
-				x(e, [O(N).e("container")]), C(e, oe.value);
-			}), S(e, null, 0), u(O(o), { type: "opacity" }, () => d(() => h.mask, () => {
-				let e = A();
-				return s(e, () => z.value), e.$evtclick = f(le), b(() => {
-					x(e, [O(N).e("mask")]), C(e, h.maskStyle);
+			let e = M();
+			return S(() => {
+				C(e, [A(N).e("container")]), T(e, H.value);
+			}), w(e, null, 0), f(A(s), { type: "opacity" }, () => p(() => g.mask, () => {
+				let e = M();
+				return l(e, () => L.value), e.$evtclick = m(ue), S(() => {
+					C(e, [A(N).e("mask")]), T(e, g.maskStyle);
 				}), e;
-			}, null, 129)), S(e, null, 1), u(O(o), {
+			}, null, 129)), w(e, null, 1), f(A(s), {
 				type: "side",
-				placement: () => h.placement,
-				onAfterLeave: () => ce,
-				onAfterEnter: () => se
+				placement: () => g.placement,
+				onAfterLeave: () => le,
+				onAfterEnter: () => W
 			}, () => {
-				let e = M(), t = c(e, 1), n = c(t, 1);
-				return b(() => {
-					let t = O(N);
-					x(e, [t.b(), t.m(h.placement)]), C(e, W.value);
-				}), S(e, 0, 0), d(() => h.resizable, () => {
-					let e = A();
-					return e.$evtmousedown = f(ue), b(() => {
-						let t = O(N);
-						x(e, [t.e("trigger"), t.is("dragging", V.value)]);
+				let e = oe(), t = u(e, 1), n = u(t, 1);
+				return S(() => {
+					let t = A(N);
+					C(e, [t.b(), t.m(g.placement)]), T(e, U.value);
+				}), w(e, 0, 0), p(() => g.resizable, () => {
+					let e = M();
+					return e.$evtmousedown = m(de), S(() => {
+						let t = A(N);
+						C(e, [t.e("trigger"), t.is("dragging", z.value)]);
 					}), e;
-				}), b(() => x(t, [O(N).e("wrapper")])), S(t, 0, 0), d(() => h.header, () => {
-					let e = A();
-					return b(() => x(e, [O(N).e("header")])), S(e, null, 0), p("header", null, () => {
-						let e = j(), t = D(e);
-						return b(() => {
-							x(e, [O(N).e("title")]), w(t, E(h.title));
+				}), S(() => C(t, [A(N).e("wrapper")])), w(t, 0, 0), p(() => g.header, () => {
+					let e = M();
+					return S(() => C(e, [A(N).e("header")])), w(e, null, 0), h("header", null, () => {
+						let e = ae(), t = u(e), n = k(t);
+						return S(() => {
+							let r = A(N);
+							C(e, [r.e("title")]), C(t, r.e("title-text")), E(n, O(g.title));
+						}), w(e, null, 1), p(() => g.desc, () => {
+							let e = ie(), t = k(e);
+							return S(() => {
+								C(e, A(N).e("title-desc")), E(t, O(g.desc));
+							}), e;
 						}), e;
-					}), S(e, null, 1), d(() => h.closable, () => u(a, {
+					}), w(e, null, 1), p(() => g.closable, () => f(a, {
 						circle: "",
 						text: "",
 						size: "small",
 						onClick: () => G
-					}, { icon: () => u(O(i)) })), e;
-				}), b(() => x(n, [O(N).e("body")])), S(n, null, 0), d(() => h.scrollContent, () => u(ee, { $: [() => ({ ...h.scrollbarProps })] }, () => p("default", null, null, 4)), () => {
-					let e = A();
-					return b(() => {
-						x(e, [O(N).e("content")]), C(e, h.bodyStyle);
-					}), S(e, null, 0), p(), e;
-				}, 1285), S(t, null, 2), d(() => h.footer, () => {
-					let e = A();
-					return b(() => x(e, [O(N).e("footer")])), S(e, null, 0), p("footer"), e;
-				}), s(e, () => z.value), e;
-			}), s(e, () => B.value), fe(e, "drawerContainerRef"), e;
+					}, { icon: () => f(A(i)) })), e;
+				}), S(() => C(n, [A(N).e("body")])), w(n, null, 0), p(() => g.scrollContent, () => f(o, { $: [() => ({ ...g.scrollbarProps })] }, () => h("default", null, null, 4)), () => {
+					let e = M();
+					return S(() => {
+						C(e, [A(N).e("content")]), T(e, g.bodyStyle);
+					}), w(e, null, 0), h(), e;
+				}, 1541), w(t, null, 2), p(() => g.footer, () => {
+					let e = M();
+					return S(() => C(e, [A(N).e("footer")])), w(e, null, 0), h("footer"), e;
+				}), l(e, () => L.value), e;
+			}), l(e, () => R.value), pe(e, "drawerContainerRef"), e;
 		}, !0);
 	}
 });

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

@@ -21,6 +21,7 @@ export declare const SDrawer: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
         resizable?: boolean | undefined;
         to?: (string | HTMLElement) | undefined;
         title?: string | undefined;
+        desc?: string | undefined;
         header?: boolean | undefined;
         footer?: boolean | undefined;
         closable?: boolean | undefined;

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

@@ -28,6 +28,8 @@ export interface DrawerProps {
     to?: string | HTMLElement;
     /** 标题 */
     title?: string;
+    /** 标题描述 */
+    desc?: string;
     /** 头部 */
     header?: boolean;
     /** 底部 */

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

@@ -7,27 +7,30 @@ import { createComponent as r, createSlot as i, defineVaporComponent as a, provi
 var m = d("<div>"), h = d("<div>", 1), g = /*@__PURE__*/ a({
 	name: "SDropdown",
 	__name: "dropdown",
-	props: { popoverProps: {} },
+	props: {
+		delayClose: { type: Boolean },
+		popoverProps: {}
+	},
 	setup(a) {
-		let d = e("dropdown"), g = p("popoverRef"), _ = null, v = () => {
-			_ &&= (_(), null);
+		let d = a, g = e("dropdown"), _ = p("popoverRef"), v = null, y = () => {
+			v &&= (v(), null);
 		};
-		o(n, { itemClick: () => (g.value?.hide(), new Promise((e) => {
-			_ = e;
+		o(n, { itemClick: () => (_.value?.hide(), new Promise((e) => {
+			d.delayClose ? v = e : e();
 		})) });
-		let y = h();
-		return s(() => c(y, [f(d).b()])), l(y, null, 0), u(r(f(t), { $: [() => ({
+		let b = h();
+		return s(() => c(b, [f(g).b()])), l(b, null, 0), u(r(f(t), { $: [() => ({
 			trigger: "click",
 			placement: a.popoverProps?.trigger === "contextmenu" ? "bottom-start" : "bottom",
 			alignPoint: a.popoverProps?.trigger === "contextmenu",
 			...a.popoverProps
-		}), { onAfterLeave: () => v }] }, {
+		}), { onAfterLeave: () => y }] }, {
 			content: () => {
 				let e = m();
-				return s(() => c(e, f(d).e("list"))), l(e, null, 0), i("content"), e;
+				return s(() => c(e, f(g).e("list"))), l(e, null, 0), i("content"), e;
 			},
 			default: () => i("default", null, null, 4)
-		}), g, null, "popoverRef"), y;
+		}), _, null, "popoverRef"), b;
 	}
 });
 //#endregion

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

@@ -7,6 +7,7 @@ export declare const SDropdown: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
+        delayClose?: boolean | undefined;
         popoverProps?: PopoverProps | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

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

@@ -1,6 +1,8 @@
 import { InjectionKey } from 'vue';
 import { PopoverProps } from '../popover';
 export interface DropdownProps {
+    /** 延迟关闭（用于卸载组件时延迟关闭） */
+    delayClose?: boolean;
     /** 弹出层属性 [PopoverProps](/components/other/popover#popover-props)*/
     popoverProps?: PopoverProps;
 }

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

@@ -139,6 +139,19 @@
   }
   @include e(title) {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  @include e(title-text) {
+    font-size: getCssVar("font-size", "large");
+    font-weight: 500;
+    color: getCssVar("color", "text-1");
+  }
+  @include e(title-desc) {
+    font-size: getCssVar("font-size", "medium");
+    font-weight: 400;
+    color: getCssVar("color", "text-2");
   }
   @include e(body) {
     flex: 1;

package/dist/json/vetur-attributes.json

@@ -701,6 +701,10 @@
     "description": "标题",
     "type": "string"
   },
+  "s-drawer/desc": {
+    "description": "标题描述",
+    "type": "string"
+  },
   "s-drawer/header": {
     "description": "头部",
     "type": "boolean"
@@ -733,6 +737,10 @@
   "s-drawer/maskStyle": {
     "description": "抽屉遮罩自定义样式"
   },
+  "s-dropdown/delayClose": {
+    "description": "延迟关闭（用于卸载组件时延迟关闭）",
+    "type": "boolean"
+  },
   "s-dropdown/popoverProps": {
     "description": "弹出层属性 [PopoverProps](/components/other/popover#popover-props)"
   },

package/dist/json/vetur-tags.json

@@ -301,6 +301,7 @@
       "resizable",
       "to",
       "title",
+      "desc",
       "header",
       "footer",
       "closable",
@@ -314,6 +315,7 @@
   },
   "s-dropdown": {
     "attributes": [
+      "delayClose",
       "popoverProps"
     ]
   },

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.18.0",
+  "version": "0.19.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -1826,6 +1826,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "desc",
+              "description": "标题描述",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "header",
               "description": "头部",
@@ -1918,6 +1926,14 @@
         {
           "name": "s-dropdown",
           "attributes": [
+            {
+              "name": "delayClose",
+              "description": "延迟关闭（用于卸载组件时延迟关闭）",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "popoverProps",
               "description": "弹出层属性 [PopoverProps](/components/other/popover#popover-props)",

package/package.json

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