savor-ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 
 
+# [0.5.0](https://gitee.com/mach552/savor-ui/compare/v0.4.1...v0.5.0) (2026-06-19)
+
+
+### Bug Fixes
+
+* **tree:** 修复容器高度计算错误问题 ([a769600](https://gitee.com/mach552/savor-ui/commits/a769600d9771ccfe5e75ff1cd6ea15559ab733bd))
+
+
+### Features
+
+* **expand-card:** 新增展开卡片组件 ([2bf0bda](https://gitee.com/mach552/savor-ui/commits/2bf0bdaa7d21f550089c83c62c549acbc2762d90))
+* **icon:** 新增动画和加载效果 ([6cab674](https://gitee.com/mach552/savor-ui/commits/6cab674844a32cf45d01b6a19a6f463d4bcd89ca))
+* **menu:** 新增`circle`激活样式 ([30ca3ed](https://gitee.com/mach552/savor-ui/commits/30ca3ede06a2d3b93094179643a90d7215c9eef5))
+
+## [0.4.1](https://gitee.com/mach552/savor-ui/compare/v0.4.0...v0.4.1) (2026-06-17)
+
+
+### Bug Fixes
+
+* **input:** 调整一些样式问题 ([be7305f](https://gitee.com/mach552/savor-ui/commits/be7305ffc837a94f32bd8e971a0cf89e68d63cea))
+* **table:** 修复空状态下整体滚动问题 ([df4c6c8](https://gitee.com/mach552/savor-ui/commits/df4c6c8cc409ee6d9d7159dd523f0ea385ff2f06))
+* **table:** 修复宽高属性无效问题 ([834917b](https://gitee.com/mach552/savor-ui/commits/834917bb908eaf70b1293afdae0cb4779520e4c6))
+* **table:** 修复fixed列没有选中样式问题 ([7cd3def](https://gitee.com/mach552/savor-ui/commits/7cd3defe6eeb77426e8d59e8796b25e73ecc40f1))
+* **transition:** 修复传递无效属性问题 ([b06508c](https://gitee.com/mach552/savor-ui/commits/b06508c06085d183d1e515cf4365a4406e6045bf))
+
 # [0.4.0](https://gitee.com/mach552/savor-ui/compare/v0.3.3...v0.4.0) (2026-06-17)
 
 

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

@@ -21,6 +21,7 @@ export * from './src/divider';
 export * from './src/drawer';
 export * from './src/dropdown';
 export * from './src/empty';
+export * from './src/expand-card';
 export * from './src/form';
 export * from './src/galleria';
 export * from './src/grid';

package/dist/es/components/index.mjs

@@ -38,6 +38,7 @@ import "./src/divider/index.mjs";
 import "./src/drawer/index.mjs";
 import "./src/dropdown/types.mjs";
 import "./src/dropdown/index.mjs";
+import "./src/expand-card/index.mjs";
 import "./src/galleria/index.mjs";
 import "./src/grid/types.mjs";
 import "./src/grid/index.mjs";

package/dist/es/components/src/expand-card/expand-card.d.ts

@@ -0,0 +1,23 @@
+import { ExpandCardExpose, ExpandCardProps, ExpandCardSlots } 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<ExpandCardProps & {
+        onOpened?: (() => any) | undefined;
+        onClosed?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: ShallowUnwrapRef<ExpandCardExpose>) => void;
+    attrs: any;
+    slots: ExpandCardSlots;
+    emit: ((evt: "opened") => void) & ((evt: "closed") => void);
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/es/components/src/expand-card/expand-card.vue.mjs

@@ -0,0 +1,5 @@
+import e from "./expand-card.vue_vue_type_script_setup_true_vapor_true_lang.mjs";
+//#region ../components/src/expand-card/expand-card.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/components/src/expand-card/expand-card.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -0,0 +1,121 @@
+import { getElementFromBlock as e } from "../../../utils/src/nodes.mjs";
+import "../../../utils/index.mjs";
+import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
+import { useZIndex as n } from "../../../hooks/src/use-zIndex.mjs";
+import "../../../hooks/index.mjs";
+import { VaporTeleport as r, child as i, computed as a, createComponent as o, createDynamicComponent as s, createIf as c, createInvoker as l, createSlot as u, createTemplateRefSetter as d, defineVaporComponent as f, delegateEvents as p, nextTick as m, onBeforeUnmount as h, onMounted as g, ref as _, renderEffect as v, setClass as y, setInsertionState as b, setStyle as x, template as S, unref as C, useId as w, useSlots as T, useTemplateRef as ee } from "vue";
+//#region ../components/src/expand-card/expand-card.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var E = S("<div>"), D = S("<div><div>");
+p("click");
+var O = /*@__PURE__*/ f({
+	name: "SExpandCard",
+	__name: "expand-card",
+	props: {
+		item: {},
+		duration: { default: 500 },
+		showMask: {
+			type: Boolean,
+			default: !0
+		},
+		targetHeight: { default: "auto" },
+		targetWidth: { default: "50%" },
+		placeholderClassName: {}
+	},
+	emits: ["opened", "closed"],
+	__multiRoot: !0,
+	setup(f, { expose: p, emit: S }) {
+		let O = f, k = S, A = t("expand-card"), j = T(), M = "expand-card-" + w(), { nextZIndex: N } = n(), P = _(0), F = _(!1), I = _(!1), L = _(""), R = _(!1), z = ee("modelRef"), B = A.is("expanded", !0), V = null, H = null, U = null, W = null, G = a(() => {
+			let e = O.duration;
+			return typeof e == "number" ? [e, e] : e;
+		}), K = (e, t) => {
+			if (typeof e == "number") return e;
+			let n = String(e).trim();
+			return n.endsWith("%") ? t * parseFloat(n) / 100 : parseFloat(n) || 0;
+		}, q = (e) => `width ${e}ms cubic-bezier(0.22,1,0.36,1), height ${e}ms cubic-bezier(0.22,1,0.36,1), top ${e}ms cubic-bezier(0.22,1,0.36,1), left ${e}ms cubic-bezier(0.22,1,0.36,1), border-radius ${e}ms ease, box-shadow ${e}ms ease`, J = () => {
+			H &&= (clearTimeout(H), null);
+		}, Y = (e) => {
+			e.style.transition = "", e.style.position = "", e.style.width = "", e.style.height = "", e.style.top = "", e.style.left = "", e.style.zIndex = "", e.style.borderRadius = "";
+		}, X = (e) => {
+			let t = K(O.targetWidth, window.innerWidth), n, r = O.targetHeight;
+			if (r === "auto" || r === "" || r == null) {
+				let r = e.style.width, i = e.style.height;
+				e.style.width = t + "px", e.style.height = "auto", n = e.scrollHeight, e.style.width = r, e.style.height = i, e.offsetHeight;
+			} else n = K(r, window.innerHeight);
+			return {
+				w: t,
+				h: n
+			};
+		}, Z = async () => {
+			if (R.value || F.value) return;
+			let e = V;
+			if (!e) return;
+			let t = e.getBoundingClientRect(), [n] = G.value;
+			R.value = !0, P.value = N(), e.classList.add(B), await m();
+			let r = z.value;
+			if (!r) {
+				R.value = !1, e.classList.remove(B);
+				return;
+			}
+			r.style.transition = "none", r.style.position = "fixed", r.style.width = t.width + "px", r.style.height = t.height + "px", r.style.top = t.top + "px", r.style.left = t.left + "px", r.style.zIndex = String(N()), r.style.borderRadius = "12px", r.offsetHeight, U = requestAnimationFrame(() => {
+				U = null;
+				let { w: e, h: t } = X(r), i = (window.innerWidth - e) / 2, a = (window.innerHeight - t) / 2;
+				r.offsetHeight, L.value = `opacity ${n}ms ease`, I.value = !0, r.style.transition = q(n), r.style.width = e + "px", r.style.height = t + "px", r.style.top = a + "px", r.style.left = i + "px", r.style.borderRadius = "16px";
+			}), J(), H = setTimeout(() => {
+				H = null, R.value = !1, F.value = !0, k("opened");
+			}, n);
+		}, Q = () => {
+			if (R.value || !F.value) return;
+			let e = V, t = z.value;
+			if (!e || !t) return;
+			R.value = !0;
+			let [, n] = G.value;
+			L.value = `opacity ${n}ms ease`, I.value = !1;
+			let r = e.getBoundingClientRect();
+			t.style.transition = q(n), t.style.width = r.width + "px", t.style.height = r.height + "px", t.style.top = r.top + "px", t.style.left = r.left + "px", t.style.borderRadius = "12px", J(), H = setTimeout(() => {
+				H = null, R.value = !1, F.value = !1, e.classList.remove(B), k("closed");
+			}, n);
+		}, $ = () => {
+			W && cancelAnimationFrame(W), W = requestAnimationFrame(() => {
+				if (W = null, !F.value || R.value) return;
+				let e = z.value;
+				if (!e) return;
+				let { w: t, h: n } = X(e);
+				e.style.transition = "none", e.style.width = t + "px", e.style.height = n + "px", e.style.top = (window.innerHeight - n) / 2 + "px", e.style.left = (window.innerWidth - t) / 2 + "px";
+			});
+		}, te = a(() => {
+			let t = j.default?.();
+			if (!t) return null;
+			let n = e(t);
+			return n ? (V !== n && (V?.removeEventListener("click", Z), n.addEventListener("click", Z), n.id = M, V = n), n) : null;
+		});
+		g(() => {
+			window.addEventListener("resize", $);
+		}), h(() => {
+			window.removeEventListener("resize", $), U && cancelAnimationFrame(U), W && cancelAnimationFrame(W), J(), V &&= (V.removeEventListener("click", Z), V.classList.remove(B), null);
+			let e = z.value;
+			e && Y(e);
+		}), p({
+			open: Z,
+			close: Q
+		});
+		let ne = d();
+		return [s(() => te.value), o(r, { to: "body" }, () => c(() => F.value || R.value, () => {
+			let e = D(), t = i(e, 1);
+			return v(() => y(e, [C(A).e("wrapper")])), b(e, 0, 0), c(() => f.showMask && (F.value || R.value), () => {
+				let e = E();
+				return e.$evtclick = l(Q), v(() => {
+					let t = I.value;
+					y(e, [C(A).e("mask")]), x(e, {
+						zIndex: P.value,
+						opacity: +!!t,
+						transition: L.value,
+						pointerEvents: t ? "auto" : "none",
+						backgroundColor: "rgba(0, 0, 0, 0)"
+					});
+				}), e;
+			}), v(() => y(t, [C(A).e("model")])), b(t, null, 0), u("model", { item: () => f.item }), ne(t, z, null, "modelRef"), e;
+		}, null, 129))];
+	}
+});
+//#endregion
+export { O as default };

package/dist/es/components/src/expand-card/index.d.ts

@@ -0,0 +1,27 @@
+import { ExpandCardSlots, ExpandCardExpose } from './types';
+import { PublicProps, ShallowUnwrapRef, VNode, Plugin } from 'vue';
+export declare const SExpandCard: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
+    attrs: any;
+    slots: ExpandCardSlots;
+    emit: ((evt: "opened") => void) & ((evt: "closed") => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & {
+        item?: any;
+        duration?: number | [number, number] | undefined;
+        showMask?: boolean | undefined;
+        targetHeight?: number | string | undefined;
+        targetWidth?: number | string | undefined;
+        placeholderClassName?: string | undefined;
+        onOpened?: (() => any) | undefined;
+        onClosed?: (() => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: ShallowUnwrapRef<ExpandCardExpose>) => void;
+    attrs: any;
+    slots: ExpandCardSlots;
+    emit: ((evt: "opened") => void) & ((evt: "closed") => void);
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+}) & Plugin;
+export * from './types';

package/dist/es/components/src/expand-card/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as e } from "../../../utils/src/install.mjs";
+import "../../../utils/index.mjs";
+import t from "./expand-card.vue.mjs";
+//#region ../components/src/expand-card/index.ts
+var n = e(t);
+//#endregion
+export { n as SExpandCard };

package/dist/es/components/src/expand-card/types.d.ts

@@ -0,0 +1,34 @@
+export interface ExpandCardProps {
+    /** 卡片数据 */
+    item?: any;
+    /** 动画时长，单位毫秒，number表示展开和收起的时长相同，[number, number]表示展开和收起的时长 */
+    duration?: number | [number, number];
+    /** 是否显示遮罩 */
+    showMask?: boolean;
+    /** 展开高度，支持 number | string（如 460 / '460px' / '80%' / 'auto' / ''） */
+    targetHeight?: number | string;
+    /** 展开宽度，支持 number | string（如 600 / '600px' / '80%'） */
+    targetWidth?: number | string;
+    /** 占位元素类名 */
+    placeholderClassName?: string;
+}
+export interface ExpandCardSlots {
+    /** 默认插槽，只支持传入一个元素 */
+    default?: () => any;
+    /** 展开的内容 */
+    model?: (props: {
+        item: any;
+    }) => any;
+}
+export interface ExpandCardEmits {
+    /** 开始展开 */
+    opened: [];
+    /** 结束展开 */
+    closed: [];
+}
+export interface ExpandCardExpose {
+    /** 展开卡片 */
+    open: () => void;
+    /** 收起卡片 */
+    close: () => void;
+}

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

@@ -2,24 +2,36 @@ import { getSize as e } from "../../../utils/src/tool.mjs";
 import "../../../utils/index.mjs";
 import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
-import { computed as n, createSlot 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 { computed as n, createIf as r, createSlot as i, defineVaporComponent as a, renderEffect as o, setClass as s, setInsertionState as c, setStyle as l, template as u, unref as d } from "vue";
 //#region ../components/src/icon/icon.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var d = l("<div>", 1), f = /*@__PURE__*/ i({
+var f = u("<div><svg viewBox=\"0 0 24 24\"><circle cx=12 cy=12 r=8>", 1), p = u("<div>", 1), m = /*@__PURE__*/ a({
 	name: "SIcon",
 	__name: "icon",
 	props: {
 		size: {},
-		color: {}
+		color: {},
+		anime: { type: Boolean },
+		animeType: { default: "shake" },
+		loading: { type: Boolean }
 	},
-	setup(i) {
-		let l = i, f = t("icon"), p = n(() => ({
-			fontSize: e(l.size),
-			color: l.color
-		})), m = d();
-		return a(() => {
-			o(m, [u(f).b()]), c(m, p.value);
-		}), s(m, null, 0), r(), m;
+	setup(a) {
+		let u = a, m = t("icon"), h = n(() => ({
+			fontSize: e(u.size),
+			color: u.color
+		})), g = n(() => u.animeType === "shake" ? m.is("shake", u.anime) : u.animeType === "scale" ? m.is("scale", u.anime) : u.animeType === "moveUp" ? m.is("moveUp", u.anime) : u.animeType === "rotate" ? m.is("rotate", u.anime) : "");
+		return r(() => a.loading, () => {
+			let e = f();
+			return o(() => {
+				let t = d(m);
+				s(e, [t.b(), t.is("loading", a.loading)]), l(e, h.value);
+			}), e;
+		}, () => {
+			let e = p();
+			return o(() => {
+				s(e, [d(m).b(), g.value]), l(e, h.value);
+			}), c(e, null, 0), i(), e;
+		}, 261);
 	}
 });
 //#endregion
-export { f as default };
+export { m as default };

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

@@ -8,6 +8,9 @@ export declare const SIcon: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
     props: PublicProps & {
         size?: string | number | undefined;
         color?: string | undefined;
+        anime?: boolean | undefined;
+        animeType?: "shake" | "scale" | "moveUp" | "rotate" | undefined;
+        loading?: boolean | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

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

@@ -3,6 +3,14 @@ export interface IconProps {
     size?: string | number;
     /** 图标颜色 */
     color?: string;
+    /** 是否开启动画 */
+    anime?: boolean;
+    /** 动画类型（shake：抖动，scale：缩放，moveUp：上移，rotate：旋转）
+     * @default shake
+     */
+    animeType?: "shake" | "scale" | "moveUp" | "rotate";
+    /** 是否显示加载状态 */
+    loading?: boolean;
 }
 export interface IconSlots {
     /** 默认 */

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

@@ -28,7 +28,7 @@ export declare const SMenuItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         name: string | number;
         title?: string | undefined;
         disabled?: boolean | undefined;
-        activePosition?: "left" | "center" | "right" | undefined;
+        activePosition?: "left" | "center" | "right" | "circle" | undefined;
         item?: any;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

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

@@ -44,7 +44,8 @@ var O = /*@__PURE__*/ u({
 						t.is("disabled", u.disabled),
 						t.is("active", a.value === r && i === "center"),
 						t.is("active-left", a.value === r && i === "left"),
-						t.is("active-right", a.value === r && i === "right")
+						t.is("active-right", a.value === r && i === "right"),
+						t.is("active-circle", a.value === r && i === "circle")
 					]);
 				}), g(e, 0, 0), s(() => d.icon, () => {
 					let e = C();
@@ -61,9 +62,10 @@ var O = /*@__PURE__*/ u({
 				h(e, [
 					t.e("item-title"),
 					t.is("disabled", u.disabled),
-					t.is("active", a.value === r && i === "center"),
+					t.is("active-center", a.value === r && i === "center"),
 					t.is("active-left", a.value === r && i === "left"),
-					t.is("active-right", a.value === r && i === "right")
+					t.is("active-right", a.value === r && i === "right"),
+					t.is("active-circle", a.value === r && i === "circle")
 				]);
 			}), g(e, 0, 0), s(() => d.icon, () => {
 				let e = C();

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

@@ -33,7 +33,7 @@ export interface MenuItemProps {
     /** 是否禁用 */
     disabled?: boolean;
     /** 激活标识位置 */
-    activePosition?: "left" | "center" | "right";
+    activePosition?: "left" | "center" | "right" | "circle";
     /** 菜单项数据 */
     item?: any;
 }

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

@@ -8,9 +8,9 @@ import o from "./col-group.vue.mjs";
 import { tableContextKey as s } from "./types.mjs";
 import c from "./table-body.vue.mjs";
 import l from "./table-header.vue.mjs";
-import { computed as u, createComponent as d, createForSlots as f, createIf as p, createSlot as m, defineVaporComponent as h, mergeModels as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, template as C, unref as w, useModel as T, watch as ee } from "vue";
+import { computed as u, createComponent as d, createForSlots as f, createIf as p, createSlot as m, defineVaporComponent as h, mergeModels as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, template as C, unref as w, useModel as T, watch as E } from "vue";
 //#region ../components/src/table/table.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>", 1), O = /*@__PURE__*/ h({
+var D = C("<table table-layout=fixed></table>"), ee = C("<div>"), O = C("<div>", 1), k = /*@__PURE__*/ h({
 	name: "STable",
 	__name: "table",
 	props: /*@__PURE__*/ g({
@@ -18,7 +18,7 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 		columns: { default: () => [] },
 		height: {},
 		maxHeight: {},
-		width: {},
+		width: { default: "100%" },
 		border: {},
 		stripe: { type: Boolean },
 		size: { default: "medium" },
@@ -39,36 +39,36 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 		"checkAll",
 		"expandedRow"
 	], ["update:checked", "update:selected"]),
-	setup(h, { expose: g, emit: C, slots: O }) {
-		let k = h, A = C, j = r("table"), M = T(h, "checked"), N = T(h, "selected"), ne = (e, t, n) => {
-			M.value = n, A("checkRow", e, t, n);
-		}, re = (e, t) => {
-			N.value = e, A("selectRow", e, t);
-		}, ie = (e) => {
-			M.value = [...e], A("checkAll", e);
-		}, ae = u(() => {
+	setup(h, { expose: g, emit: C, slots: k }) {
+		let A = h, j = C, M = r("table"), N = T(h, "checked"), P = T(h, "selected"), te = (e, t, n) => {
+			N.value = n, j("checkRow", e, t, n);
+		}, ne = (e, t) => {
+			P.value = e, j("selectRow", e, t);
+		}, re = (e) => {
+			N.value = [...e], j("checkAll", e);
+		}, ie = u(() => {
 			let e = [];
-			if (!k.border || k.border.length === 0) return e;
-			for (let t of k.border) e.push(j.m(`border-${t}`));
+			if (!A.border || A.border.length === 0) return e;
+			for (let t of A.border) e.push(M.m(`border-${t}`));
 			return e;
-		}), P = v(0), F = v(!0), I = v(!1), L = 0, R = () => `col_${L++}`, z = (e) => ({
+		}), F = v(0), I = v(!0), L = v(!1), R = 0, z = () => `col_${R++}`, B = (e) => ({
 			...e,
-			id: R(),
+			id: z(),
 			fixedOffset: void 0,
 			colSpan: 1,
 			rowSpan: 1,
 			isColumnGroup: !1,
 			level: 1,
 			field: e.field ?? "",
-			children: e.children ? e.children.map(z) : void 0
-		}), B = u(() => k.columns.map(z)), V = u(() => {
+			children: e.children ? e.children.map(B) : void 0
+		}), V = u(() => A.columns.map(B)), H = u(() => {
 			let e = [], t = (n) => {
 				n.forEach((n) => {
 					n.children && n.children.length ? t(n.children) : e.push(n);
 				});
 			};
-			return t(B.value), H(e), e;
-		}), H = (e) => {
+			return t(V.value), U(e), e;
+		}), U = (e) => {
 			let n = 0;
 			e.forEach((e) => {
 				if (e.fixed === "left") {
@@ -86,7 +86,7 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 					r += e;
 				}
 			}
-		}, U = (e) => {
+		}, W = (e) => {
 			let t = 1, n = (e, r) => {
 				if (r && (e.level = r.level + 1, t < e.level && (t = e.level)), e.children && e.children.length) {
 					let t = 0;
@@ -108,18 +108,15 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 			return a(e), i.forEach((e) => {
 				!e.children || !e.children.length ? e.rowSpan = t - e.level + 1 : e.rowSpan = 1, r[e.level - 1].push(e);
 			}), r;
-		}, W = u(() => U(B.value)), G = u(() => {
+		}, G = u(() => W(V.value)), K = u(() => {
 			let t = {};
-			return k.width && (t.width = e(k.width)), t;
-		}), K = u(() => {
-			let t = {};
-			return k.height && (t.height = e(k.height), t.overflowY = "auto"), k.maxHeight && (t.maxHeight = e(k.maxHeight), t.overflowY = "auto"), t;
+			return A.width && (t.width = e(A.width)), A.data.length === 0 && (t.position = "sticky", t.top = "0"), t;
 		}), q = (e) => {
 			let t = e.target;
-			F.value = t.scrollLeft === 0, I.value = t.scrollLeft + t.clientWidth >= t.scrollWidth - 1;
+			I.value = t.scrollLeft === 0, L.value = t.scrollLeft + t.clientWidth >= t.scrollWidth - 1;
 		}, J = v({}), Y = v([]), X = (e) => e.map((e) => {
 			let t = { ...e };
-			t._id || (k.rowKey && t[k.rowKey] !== void 0 ? t._id = String(t[k.rowKey]) : t.id === void 0 ? t._id = n(8) : t._id = String(t.id));
+			t._id || (A.rowKey && t[A.rowKey] !== void 0 ? t._id = String(t[A.rowKey]) : t.id === void 0 ? t._id = n(8) : t._id = String(t.id));
 			let r = t.children;
 			return Array.isArray(r) && r.length > 0 && (t.children = X(r)), t;
 		}), Z = (e, t = 0, n = !0) => {
@@ -134,68 +131,73 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 				};
 				n && r.push(c), o && r.push(...Z(a, t + 1, n && s));
 			}), r;
-		}, Q = u(() => Z(Y.value)), oe = (e, t) => {
-			J.value[e._id] = !J.value[e._id], A("expandedRow", e, t, Y.value.filter((e) => J.value[e._id]));
+		}, Q = u(() => Z(Y.value)), ae = (e, t) => {
+			J.value[e._id] = !J.value[e._id], j("expandedRow", e, t, Y.value.filter((e) => J.value[e._id]));
 		};
-		ee(() => k.data, (e) => {
+		E(() => A.data, (e) => {
 			Y.value = X(e);
 		}, {
 			deep: !0,
 			immediate: !0
 		}), _(s, {
-			props: k,
-			originColumns: B,
-			flatColumns: V,
-			columnRows: W,
-			isScrollAtLeft: F,
-			isScrollAtRight: I,
-			headerHeight: P,
-			checked: M,
-			selected: N
+			props: A,
+			originColumns: V,
+			flatColumns: H,
+			columnRows: G,
+			isScrollAtLeft: I,
+			isScrollAtRight: L,
+			headerHeight: F,
+			checked: N,
+			selected: P
 		}), g({
 			clearSelect: () => {
-				M.value = [], N.value = {};
+				N.value = [], P.value = {};
 			},
 			selectAll: () => {
-				M.value = [...Q.value];
+				N.value = [...Q.value];
 			}
 		});
-		let $ = D();
+		let $ = O();
 		return y(() => {
-			let e = w(j);
+			let t = w(M), n = w(e);
 			b($, [
-				e.b(),
-				e.m(h.size),
-				...ae.value
-			]);
+				t.b(),
+				t.m(h.size),
+				...ie.value
+			]), S($, {
+				height: n(h.height),
+				width: n(h.width),
+				maxHeight: n(h.maxHeight)
+			});
 		}), x($, null, 0), d(w(i), {
-			height: () => K.value.height,
-			"max-height": () => K.value.maxHeight,
-			"offset-top": () => P.value,
+			height: () => h.height ? "100%" : "",
+			width: () => h.width ? "100%" : "",
+			"max-height": () => h.maxHeight ? w(e)(h.maxHeight) : "",
+			"offset-top": () => F.value,
 			always: () => h.scrollAlways,
 			native: () => h.nativeScrollbar,
 			onScroll: () => q
 		}, () => {
-			let e = te();
+			let e = D();
 			return y(() => {
-				b(e, [w(j).e("inner")]), S(e, G.value);
-			}), x(e, null, 0), d(o, { columns: () => V.value }), x(e, null, 1), d(l, {
+				b(e, [w(M).e("inner")]), S(e, K.value);
+			}), x(e, null, 0), d(o, { columns: () => H.value }), x(e, null, 1), d(l, {
 				data: () => Q.value,
-				onCheckAll: () => ie
+				onCheckAll: () => re
 			}), x(e, null, 2), d(c, {
 				data: () => Q.value,
-				onCheckRow: () => ne,
-				onSelectRow: () => re,
-				onExpandedRow: () => oe
-			}, { $: [() => f(O, (e, t) => ({
+				onCheckRow: () => te,
+				onSelectRow: () => ne,
+				onExpandedRow: () => ae
+			}, { $: [() => f(k, (e, t) => ({
 				name: t,
 				fn: (e) => m(() => t, { $: [() => e] }, null, 4)
 			}))] }), [e, p(() => !h.data.length, () => {
-				let e = E();
-				return y(() => b(e, [w(j).e("empty")])), x(e, null, 0), m("empty", null, () => d(w(a))), e;
+				let e = ee();
+				return y(() => b(e, [w(M).e("empty")])), x(e, null, 0), m("empty", null, () => d(w(a))), e;
 			}, null, 129)];
 		}), $;
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };

package/dist/es/components/src/transition/transition-height.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -4,7 +4,7 @@ var a = /*@__PURE__*/ r({
 	__name: "transition-height",
 	props: {
 		appear: { type: Boolean },
-		mode: {}
+		mode: { default: "in-out" }
 	},
 	emits: [
 		"beforeEnter",

package/dist/es/components/src/transition/transition-opacity.d.ts

@@ -1,6 +1,9 @@
 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<{
+        appear?: boolean;
+        mode?: "in-out" | "out-in" | "default";
+    } & {
         onAfterLeave?: ((el: HTMLElement) => any) | undefined;
         onBeforeEnter?: ((el: HTMLElement) => any) | undefined;
         onEnter?: ((el: HTMLElement) => any) | undefined;