savor-ui 0.24.0 → 0.24.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 
 
+## [0.24.1](https://gitee.com/mach552/savor-ui/compare/v0.24.0...v0.24.1) (2026-08-24)
+
+
+### Bug Fixes
+
+* **dropdown:** 修复插槽元素被包裹的问题 ([2fb1603](https://gitee.com/mach552/savor-ui/commits/2fb1603e030e0484bde2541e2251fc505f2830d5))
+
 # [0.24.0](https://gitee.com/mach552/savor-ui/compare/v0.23.1...v0.24.0) (2026-08-24)
 
 

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

@@ -2,32 +2,35 @@ import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import { SPopover as t } from "../popover/index.mjs";
 import { dropdownContextKey as n } from "./types.mjs";
-import { createComponent as r, createSlot as i, defineVaporComponent as a, provide as o, renderEffect as s, setClass as c, setInsertionState as l, setStaticTemplateRef as u, template as d, unref as f, useTemplateRef as p } from "vue";
+import { child as r, createComponent as i, createSlot as a, defineVaporComponent as o, provide as s, renderEffect as c, setClass as l, setInsertionState as u, setStaticTemplateRef as d, template as f, unref as p, useTemplateRef as m } from "vue";
 //#region ../components/src/dropdown/dropdown.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var m = d("<div>"), h = d("<div>", 1), g = /*@__PURE__*/ a({
+var h = f("<div><div>"), g = /*@__PURE__*/ o({
 	name: "SDropdown",
 	__name: "dropdown",
 	props: { popoverProps: {} },
-	setup(a) {
-		let d = e("dropdown"), g = p("popoverRef"), _ = null, v = () => {
+	setup(o) {
+		let f = e("dropdown"), g = m("popoverRef"), _ = null, v = () => {
 			_ &&= (_(), null);
 		};
-		o(n, { itemClick: () => (g.value?.hide(), new Promise((e) => {
+		s(n, { itemClick: () => (g.value?.hide(), new Promise((e) => {
 			_ = e;
 		})) });
-		let y = h();
-		return s(() => c(y, [f(d).b()])), l(y, null, 0), u(r(f(t), { $: [() => ({
+		let y = i(p(t), { $: [() => ({
 			trigger: "click",
-			placement: a.popoverProps?.trigger === "contextmenu" ? "bottom-start" : "bottom",
-			alignPoint: a.popoverProps?.trigger === "contextmenu",
-			...a.popoverProps
+			placement: o.popoverProps?.trigger === "contextmenu" ? "bottom-start" : "bottom",
+			alignPoint: o.popoverProps?.trigger === "contextmenu",
+			...o.popoverProps
 		}), { onAfterLeave: () => v }] }, {
 			content: () => {
-				let e = m();
-				return s(() => c(e, f(d).e("list"))), l(e, null, 0), i("content"), e;
+				let e = h(), t = r(e);
+				return c(() => {
+					let n = p(f);
+					l(e, [n.b()]), l(t, n.e("list"));
+				}), u(t, null, 0), a("content"), e;
 			},
-			default: () => i("default", null, null, 4)
-		}), g, null, "popoverRef"), y;
+			default: () => a("default", null, null, 4)
+		}, !0);
+		return d(y, g, null, "popoverRef"), y;
 	}
 });
 //#endregion

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

@@ -1,24 +1,23 @@
+import { SkeletonSlots } from './types';
 import { PublicProps, VNode, Plugin } from 'vue';
 export declare const SSkeleton: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
-    slots: {};
+    slots: SkeletonSlots;
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
-        animation?: boolean | undefined;
-        type?: "line" | "square" | "circle" | undefined;
-        size?: "mini" | "small" | "medium" | "large" | "larger" | undefined;
-        rows?: number | undefined;
-        widths?: Array<string | number> | undefined;
-        lineHeight?: string | number | undefined;
-        lineSpacing?: string | number | undefined;
-        squareStyle?: Record<string, string> | undefined;
+        loading?: boolean | undefined;
+        animate?: "pulse" | "shimmer" | "solid" | undefined;
+        color?: string | undefined;
+        stagger?: number | undefined;
+        leafTags?: string[] | undefined;
+        exclude?: string[] | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: SkeletonSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-import { SkeletonProps } from './types';
+import { SkeletonProps, SkeletonSlots } from './types';
 import { PublicProps, 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<SkeletonProps> & (typeof globalThis extends {
@@ -6,7 +6,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: SkeletonSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -1,53 +1,111 @@
-import { getSize as e } from "../../../utils/src/tool.mjs";
-import "../../../utils/index.mjs";
-import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
+import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
-import { createFor as n, createIf as r, defineVaporComponent as i, renderEffect as a, setClass as o, setInsertionState as s, setStyle as c, template as l, unref as u } from "vue";
+import { child as t, createFor as n, createIf as r, createSlot as i, defineVaporComponent as a, onMounted as o, onUnmounted as s, ref as c, renderEffect as l, setAttr as u, setClass as d, setInsertionState as f, setStaticTemplateRef as p, setStyle as m, template as h, unref as g, useTemplateRef as _, watch as v } from "vue";
 //#region ../components/src/skeleton/skeleton.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var d = l("<div>"), f = l("<div>", 1), p = /*@__PURE__*/ i({
+var y = h("<div>"), b = h("<div><div></div>", 1), x = /*@__PURE__*/ a({
 	name: "SSkeleton",
 	__name: "skeleton",
 	props: {
-		animation: { type: Boolean },
-		type: { default: "line" },
-		size: { default: "medium" },
-		rows: { default: 1 },
-		widths: {},
-		lineHeight: { default: "20px" },
-		lineSpacing: { default: "8px" },
-		squareStyle: {}
+		loading: { type: Boolean },
+		animate: { default: "pulse" },
+		color: {},
+		stagger: { default: 80 },
+		leafTags: {},
+		exclude: {}
 	},
-	setup(i) {
-		let l = t("skeleton"), p = f();
-		return a(() => {
-			let e = u(l);
-			o(p, [e.b(), e.is("animation", i.animation)]);
-		}), s(p, null, 0), r(() => i.type === "line", () => {
-			let t = d();
-			return a(() => {
-				o(t, [u(l).e("line")]), c(t, { gap: u(e)(i.lineSpacing) });
-			}), s(t, null, 0), n(() => i.rows, (t, n) => {
-				let r = d();
-				return a(() => {
-					let t = u(e);
-					o(r, [u(l).e("line-item")]), c(r, {
-						height: t(i.lineHeight),
-						width: t(i.widths?.[n.value] || "100%")
+	setup(a) {
+		let h = a, x = e("skeleton"), S = _("contentRef"), C = c([]), w = new Set([
+			"p",
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6",
+			"li",
+			"td",
+			"th"
+		]);
+		function T(e, t) {
+			let n = parseFloat(e.borderTopLeftRadius) || 0, r = parseFloat(e.borderTopRightRadius) || 0, i = parseFloat(e.borderBottomRightRadius) || 0, a = parseFloat(e.borderBottomLeftRadius) || 0;
+			if (n === 0 && r === 0 && i === 0 && a === 0) return;
+			if (e.borderRadius === "50%") return "50%";
+			let o = t.getBoundingClientRect(), s = o.width > 0 && o.height > 0 && Math.abs(o.width - o.height) < 4;
+			return Math.max(n, r, i, a) > 9998 ? s ? "50%" : 9999 : n === r && r === i && i === a ? n === 8 ? void 0 : n : `${n}px ${r}px ${i}px ${a}px`;
+		}
+		function E(e) {
+			let t = e.getBoundingClientRect();
+			if (t.width <= 0) return [];
+			let n = [], r = h.leafTags ? new Set([...w, ...h.leafTags.map((e) => e.toLowerCase())]) : w, i = h.exclude, a = (e) => {
+				let o = window.getComputedStyle(e);
+				if (o.display === "none" || o.opacity === "0" || i?.some((t) => e.matches(t))) return;
+				let s = e.tagName.toLowerCase(), c = Array.from(e.children).filter((e) => {
+					let t = window.getComputedStyle(e);
+					return t.display !== "none" && t.opacity !== "0";
+				}), l = s === "img" || s === "svg" || s === "video" || s === "canvas", u = s === "input" || s === "button" || s === "textarea" || s === "select";
+				if (c.length === 0 || l || u || r.has(s)) {
+					let r = e.getBoundingClientRect();
+					if (r.width < 1 || r.height < 1) return;
+					let i = l && Math.abs(r.width - r.height) < 4;
+					n.push({
+						x: +((r.left - t.left) / t.width * 100).toFixed(4),
+						y: Math.round(r.top - t.top),
+						w: +(r.width / t.width * 100).toFixed(4),
+						h: Math.round(r.height),
+						r: i ? "50%" : T(o, e) ?? 8
 					});
-				}), r;
-			}, (e, t) => e, 9), t;
-		}, () => r(() => i.type === "square" || i.type === "circle", () => {
-			let e = d();
-			return a(() => {
-				let t = u(l);
-				o(e, [
-					t.e("shape"),
-					t.m(i.size),
-					t.is("circle", i.type === "circle")
-				]), c(e, i.squareStyle);
-			}), e;
-		}), 261), p;
+					return;
+				}
+				for (let e of c) a(e);
+			};
+			for (let t of e.children) a(t);
+			return n;
+		}
+		let D = () => {
+			S.value && (C.value = E(S.value));
+		}, O = 0, k = () => {
+			O ||= requestAnimationFrame(() => {
+				O = 0, D();
+			});
+		}, A = (e, t) => {
+			let n = {
+				left: `${e.x}%`,
+				top: `${e.y}px`,
+				width: `${e.w}%`,
+				height: `${e.h}px`,
+				borderRadius: typeof e.r == "number" ? `${e.r}px` : e.r
+			};
+			return h.color && (n.backgroundColor = h.color), h.stagger > 0 && h.animate !== "solid" && (n.animationDelay = `${t * h.stagger}ms`), n;
+		}, j = null, M = null;
+		v(() => h.loading, (e) => {
+			e && k();
+		}), o(() => {
+			D(), j = new MutationObserver((e) => {
+				e.length === 1 && e[0].target === S.value && e[0].attributeName === "class" || k();
+			}), j.observe(S.value, {
+				childList: !0,
+				subtree: !0,
+				attributes: !0,
+				attributeFilter: ["class", "style"]
+			}), M = new ResizeObserver(k), M.observe(S.value), document.fonts?.ready.then(D);
+		}), s(() => {
+			j?.disconnect(), M?.disconnect(), O && cancelAnimationFrame(O);
+		});
+		let N = b(), P = t(N);
+		return l(() => {
+			let e = g(x), t = a.loading;
+			d(N, e.b()), u(N, "aria-busy", t || void 0), d(P, [e.e("content"), e.is("loading", t)]);
+		}), f(P, null, 0), i(), p(P, S, null, "contentRef"), f(N, null, 1), r(() => a.loading && C.value.length, () => {
+			let e = y();
+			return l(() => d(e, g(x).e("overlay"))), f(e, null, 0), n(() => C.value, (e, t) => {
+				let n = y();
+				return l(() => {
+					let r = g(x);
+					d(n, [r.e("bone"), r.m("bone", a.animate)]), m(n, A(e.value, t.value));
+				}), n;
+			}, (e, t) => t, 9), e;
+		}), N;
 	}
 });
 //#endregion
-export { p as default };
+export { x as default };

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

@@ -1,18 +1,31 @@
+/** 单个骨架块（从子 DOM 抓取的几何信息） */
+export interface SkeletonBone {
+    /** 相对容器左侧的位置（百分比，容器宽度为 100） */
+    x: number;
+    /** 相对容器顶部的位置（px） */
+    y: number;
+    /** 宽度（百分比，容器宽度为 100） */
+    w: number;
+    /** 高度（px） */
+    h: number;
+    /** 圆角：px 数值或 '50%' 等 CSS 值 */
+    r: number | string;
+}
 export interface SkeletonProps {
-    /** 是否显示动画 */
-    animation?: boolean;
-    /** 类型 */
-    type?: "line" | "square" | "circle";
-    /** 大小 */
-    size?: "mini" | "small" | "medium" | "large" | "larger";
-    /** 行数 */
-    rows?: number;
-    /** 宽度列表 */
-    widths?: Array<string | number>;
-    /** 行高 */
-    lineHeight?: string | number;
-    /** 行间距 */
-    lineSpacing?: string | number;
-    /** square | circle 类型样式*/
-    squareStyle?: Record<string, string>;
+    /** 是否处于加载中（加载中显示骨架屏，隐藏真实内容但保留布局） */
+    loading?: boolean;
+    /** 动画风格 */
+    animate?: "pulse" | "shimmer" | "solid";
+    /** 骨架块颜色，默认取主题 fill-2 颜色 */
+    color?: string;
+    /** 骨架块逐个出现的间隔（ms） */
+    stagger?: number;
+    /** 额外视为叶子节点的标签名（这些标签整体生成一块骨架，不再向下拆分） */
+    leafTags?: string[];
+    /** 排除的选择器列表（匹配的元素及其子元素不生成骨架） */
+    exclude?: string[];
+}
+export interface SkeletonSlots {
+    /** 骨架屏覆盖的元素 */
+    default: () => any;
 }

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

@@ -7,10 +7,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 12px;
   @include e(image) {
-    margin-bottom: 20px;
     font-size: 50px;
     color: getCssVar("color", "text-3");
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   @include e(description) {
     font-size: 14px;

package/dist/es/theme/components/overflow-list.scss

@@ -10,4 +10,9 @@
   > * {
     flex-shrink: 0;
   }
+  @include e(excess){
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
 }

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

@@ -1,58 +1,86 @@
-@use "../mixins/function.scss" as *;
-@use "../mixins/mixins.scss" as *;
-@use "../common/var.scss" as *;
-
-@include b(skeleton) {
-  @include when(animation) {
-    @include be(skeleton, line-item) {
-      background: linear-gradient(
-        90deg,
-        getCssVar("color", "fill-2") 25%,
-        getCssVar("color", "fill-3") 37%,
-        getCssVar("color", "fill-2") 63%
-      );
-      background-size: 400% 100%;
-      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
-    }
-    @include be(skeleton, shape) {
-      background: linear-gradient(
-        90deg,
-        getCssVar("color", "fill-2") 25%,
-        getCssVar("color", "fill-3") 37%,
-        getCssVar("color", "fill-2") 63%
-      );
-      background-size: 400% 100%;
-      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
-    }
-  }
-  @include e(line) {
-    display: flex;
-    flex-direction: column;
-  }
-  @include e(line-item) {
-    height: 20px;
-    background-color: getCssVar("color", "fill-2");
-  }
-  @include e(shape) {
-    background-color: getCssVar("color", "fill-2");
-    @include when(circle) {
-      border-radius: getCssVar("radius", "circle");
-    }
-  }
-  @each $size in $size-list {
-    @include m($size) {
-      height: getCssVar("size", $size);
-      width: getCssVar("size", $size);
-      border-radius: getCssVar("radius", $size);
-    }
-  }
-
-  @keyframes skeleton-animation {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
-}
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(skeleton) {
+  position: relative;
+
+  @include be(skeleton, content) {
+    @include when(loading) {
+      visibility: hidden;
+    }
+  }
+
+  @include be(skeleton, overlay) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  @include be(skeleton, bone) {
+    position: absolute;
+    background-color: getCssVar("color", "fill-2");
+    animation: skeleton-appear 0.3s ease-out backwards;
+
+    @include m(pulse) {
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background-color: getCssVar("color", "fill-3");
+        animation: skeleton-pulse 1.6s ease-in-out infinite;
+      }
+    }
+
+    @include m(shimmer) {
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: linear-gradient(
+          90deg,
+          transparent 25%,
+          getCssVar("color", "fill-3") 50%,
+          transparent 75%
+        );
+        background-size: 200% 100%;
+        animation: skeleton-shimmer 3s linear infinite;
+      }
+    }
+
+    @include m(solid) {
+      animation: none;
+    }
+  }
+
+  @keyframes skeleton-appear {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}

package/dist/json/vetur-attributes.json

@@ -2102,33 +2102,26 @@
   "s-select/popoverProps": {
     "description": "弹出层属性 [PopoverProps](/components/other/popover#popover-props)"
   },
-  "s-skeleton/animation": {
-    "description": "是否显示动画",
+  "s-skeleton/loading": {
+    "description": "是否处于加载中（加载中显示骨架屏，隐藏真实内容但保留布局）",
     "type": "boolean"
   },
-  "s-skeleton/type": {
-    "description": "类型"
+  "s-skeleton/animate": {
+    "description": "动画风格"
   },
-  "s-skeleton/size": {
-    "description": "大小"
+  "s-skeleton/color": {
+    "description": "骨架块颜色，默认取主题 fill-2 颜色",
+    "type": "string"
   },
-  "s-skeleton/rows": {
-    "description": "行数",
+  "s-skeleton/stagger": {
+    "description": "骨架块逐个出现的间隔（ms）",
     "type": "number"
   },
-  "s-skeleton/widths": {
-    "description": "宽度列表"
-  },
-  "s-skeleton/lineHeight": {
-    "description": "行高",
-    "type": "string | number"
-  },
-  "s-skeleton/lineSpacing": {
-    "description": "行间距",
-    "type": "string | number"
+  "s-skeleton/leafTags": {
+    "description": "额外视为叶子节点的标签名（这些标签整体生成一块骨架，不再向下拆分）"
   },
-  "s-skeleton/squareStyle": {
-    "description": "square | circle 类型样式"
+  "s-skeleton/exclude": {
+    "description": "排除的选择器列表（匹配的元素及其子元素不生成骨架）"
   },
   "s-slider-verify/result": {
     "description": "是否通过验证（v-model:result）",

package/dist/json/vetur-tags.json

@@ -876,14 +876,12 @@
   },
   "s-skeleton": {
     "attributes": [
-      "animation",
-      "type",
-      "size",
-      "rows",
-      "widths",
-      "lineHeight",
-      "lineSpacing",
-      "squareStyle"
+      "loading",
+      "animate",
+      "color",
+      "stagger",
+      "leafTags",
+      "exclude"
     ]
   },
   "s-slider-verify": {

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.23.1",
+  "version": "0.24.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -5453,72 +5453,61 @@
           "name": "s-skeleton",
           "attributes": [
             {
-              "name": "animation",
-              "description": "是否显示动画",
+              "name": "loading",
+              "description": "是否处于加载中（加载中显示骨架屏，隐藏真实内容但保留布局）",
               "value": {
                 "type": "boolean",
                 "kind": "expression"
               }
             },
             {
-              "name": "type",
-              "description": "类型",
+              "name": "animate",
+              "description": "动画风格",
               "value": {
-                "type": "line | square | circle",
+                "type": "pulse | shimmer | solid",
                 "kind": "expression"
               }
             },
             {
-              "name": "size",
-              "description": "大小",
+              "name": "color",
+              "description": "骨架块颜色，默认取主题 fill-2 颜色",
               "value": {
-                "type": "mini | small | medium | large | larger",
+                "type": "string",
                 "kind": "expression"
               }
             },
             {
-              "name": "rows",
-              "description": "行数",
+              "name": "stagger",
+              "description": "骨架块逐个出现的间隔（ms）",
               "value": {
                 "type": "number",
                 "kind": "expression"
               }
             },
             {
-              "name": "widths",
-              "description": "宽度列表",
-              "value": {
-                "type": "Array<string | number>",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "lineHeight",
-              "description": "行高",
-              "value": {
-                "type": "string | number",
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "lineSpacing",
-              "description": "行间距",
+              "name": "leafTags",
+              "description": "额外视为叶子节点的标签名（这些标签整体生成一块骨架，不再向下拆分）",
               "value": {
-                "type": "string | number",
+                "type": "string[]",
                 "kind": "expression"
               }
             },
             {
-              "name": "squareStyle",
-              "description": "square | circle 类型样式",
+              "name": "exclude",
+              "description": "排除的选择器列表（匹配的元素及其子元素不生成骨架）",
               "value": {
-                "type": "Record<string, string>",
+                "type": "string[]",
                 "kind": "expression"
               }
             }
           ],
           "events": [],
-          "slots": []
+          "slots": [
+            {
+              "name": "default",
+              "description": "骨架屏覆盖的元素"
+            }
+          ]
         },
         {
           "name": "s-slider-verify",

package/package.json

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