mochi-island-ui 1.1.0 → 1.2.0

package/dist/components/select/MochiSelect.module.js

@@ -1,5 +1,5 @@
 // src/components/select/MochiSelect.module.css
-var e = "_root_i62a6_2", t = "_trigger_i62a6_6", n = "_value_i62a6_31", r = "_chevron_i62a6_42", i = "_list_i62a6_64", a = "_listUp_i62a6_88", o = "_indicator_i62a6_95", s = "_option_i62a6_114", c = "_popEnter_i62a6_135", l = "_popIn_i62a6_1", u = "_popLeave_i62a6_139", d = "_popOut_i62a6_1", f = {
+var e = "_root_19v55_2", t = "_trigger_19v55_6", n = "_value_19v55_31", r = "_chevron_19v55_42", i = "_list_19v55_64", a = "_listUp_19v55_88", o = "_indicator_19v55_95", s = "_option_19v55_114", c = "_popEnter_19v55_135", l = "_popIn_19v55_1", u = "_popLeave_19v55_139", d = "_popOut_19v55_1", f = {
 	root: e,
 	trigger: t,
 	value: n,

package/dist/components/select/MochiSelect.vue.d.ts

@@ -1,4 +1,5 @@
 import { MochiSelectOption } from './types';
+import { MochiVirtualSetting } from '../../styles/virtual';
 type __VLS_Props = {
     options: MochiSelectOption[];
     label?: string;
@@ -7,6 +8,11 @@ type __VLS_Props = {
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /**
+     * CSS 虚拟化三态：true 强制开（弹层里屏外选项跳过布局/绘制，DOM 保留）；
+     * false 强制关；'auto'（默认）按硬件自适应——低端设备自动开。
+     */
+    virtual?: MochiVirtualSetting;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
@@ -16,6 +22,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    virtual: MochiVirtualSetting;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/select/MochiSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,75 +1,82 @@
 import { useMessages as e } from "../../locale.js";
 import t from "../../internal/FieldShell.js";
 import n from "./MochiSelect.module.js";
-import { Fragment as r, Transition as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useId as x, useModel as S, watch as C, withCtx as w } from "vue";
+import r from "../../styles/virtual.module.js";
+import { shouldVirtualize as i } from "../../styles/virtual.js";
+import { Fragment as a, Transition as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useId as C, useModel as ee, watch as w, withCtx as T } from "vue";
 // src/components/select/MochiSelect.vue?vue&type=script&setup=true&lang.ts
-var T = [
+var E = [
 	"id",
 	"aria-expanded",
 	"aria-controls",
 	"aria-invalid",
 	"aria-describedby",
 	"disabled"
-], E = ["data-placeholder"], D = ["data-open"], O = ["id"], k = ["data-ready"], A = [
+], D = ["data-placeholder"], O = ["data-open"], k = ["id"], A = ["data-ready"], j = [
+	"data-virtual",
 	"aria-selected",
 	"aria-disabled",
 	"data-active",
 	"data-selected",
 	"onClick",
 	"onMouseenter"
-], j = /*@__PURE__*/ u({
+], M = /*@__PURE__*/ f({
 	name: "MochiSelect",
 	__name: "MochiSelect",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ p({
 		options: {},
 		label: {},
 		hint: {},
 		placeholder: {},
 		disabled: { type: Boolean },
-		invalid: { type: Boolean }
+		invalid: { type: Boolean },
+		virtual: {
+			type: [Boolean, String],
+			default: "auto"
+		}
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(u) {
-		let d = e(), j = u, M = S(u, "modelValue"), N = x(), P = a(() => `${N}-hint`), F = a(() => `${N}-list`), I = _(!1), L = _(!1), R = _(-1), z = _(), B = _(), V = _(), H = _({
+	setup(f) {
+		let p = e(), M = f, N = ee(f, "modelValue"), P = C(), F = s(() => `${P}-hint`), I = s(() => `${P}-list`), L = y(!1), R = y(!1), z = y(-1), B = y(), V = y(), H = y(), U = y({
 			top: 0,
 			height: 0
-		}), U = _(!1), W = a(() => j.options.find((e) => e.value === M.value)), G = a(() => j.options.map((e, t) => e.disabled ? -1 : t).filter((e) => e >= 0));
-		function K() {
-			if (j.disabled) return;
-			I.value = !0;
-			let e = z.value?.getBoundingClientRect(), t = Math.min(240, j.options.length * 40 + 8);
-			L.value = e ? e.bottom + t + 8 > window.innerHeight : !1;
-			let n = j.options.findIndex((e) => e.value === M.value);
-			R.value = n >= 0 ? n : G.value[0] ?? -1;
-		}
-		function q(e = !1) {
-			I.value = !1, R.value = -1, e && z.value?.focus();
-		}
+		}), W = y(!1), G = s(() => M.options.find((e) => e.value === N.value)), K = s(() => M.options.map((e, t) => e.disabled ? -1 : t).filter((e) => e >= 0)), q = s(() => i(M.options.length, M.virtual));
 		function J() {
-			I.value ? q() : K();
+			if (M.disabled) return;
+			L.value = !0;
+			let e = B.value?.getBoundingClientRect(), t = Math.min(240, M.options.length * 40 + 8);
+			R.value = e ? e.bottom + t + 8 > window.innerHeight : !1;
+			let n = M.options.findIndex((e) => e.value === N.value);
+			z.value = n >= 0 ? n : K.value[0] ?? -1;
 		}
-		function Y(e) {
-			e.disabled || (M.value = e.value, q(!0));
+		function Y(e = !1) {
+			L.value = !1, z.value = -1, e && B.value?.focus();
+		}
+		function te() {
+			L.value ? Y() : J();
 		}
 		function X(e) {
-			let t = G.value;
+			e.disabled || (N.value = e.value, Y(!0));
+		}
+		function Z(e) {
+			let t = K.value;
 			if (!t.length) return;
-			let n = t[(t.indexOf(R.value) + e + t.length) % t.length];
-			n !== void 0 && (R.value = n);
+			let n = t[(t.indexOf(z.value) + e + t.length) % t.length];
+			n !== void 0 && (z.value = n);
 		}
-		function Z() {
-			let e = V.value?.querySelector("[data-active=\"true\"]");
-			e && (H.value = {
+		function Q() {
+			let e = H.value?.querySelector("[data-active=\"true\"]");
+			e && (U.value = {
 				top: e.offsetTop,
 				height: e.offsetHeight
 			});
 		}
-		C(R, () => f(Z));
-		function Q(e) {
-			if (!j.disabled && [
+		w(z, () => m(Q));
+		function ne(e) {
+			if (!M.disabled && [
 				"ArrowDown",
 				"ArrowUp",
 				"Home",
@@ -78,92 +85,93 @@ var T = [
 				" ",
 				"Escape"
 			].includes(e.key)) {
-				if (e.preventDefault(), !I.value) e.key !== "Escape" && K();
-				else if (e.key === "ArrowDown") X(1);
-				else if (e.key === "ArrowUp") X(-1);
-				else if (e.key === "Home") R.value = G.value[0] ?? -1;
-				else if (e.key === "End") R.value = G.value.at(-1) ?? -1;
-				else if (e.key === "Escape") q(!0);
+				if (e.preventDefault(), !L.value) e.key !== "Escape" && J();
+				else if (e.key === "ArrowDown") Z(1);
+				else if (e.key === "ArrowUp") Z(-1);
+				else if (e.key === "Home") z.value = K.value[0] ?? -1;
+				else if (e.key === "End") z.value = K.value.at(-1) ?? -1;
+				else if (e.key === "Escape") Y(!0);
 				else {
-					let e = j.options[R.value];
-					e && Y(e);
+					let e = M.options[z.value];
+					e && X(e);
 				}
 			}
 		}
-		C(I, async (e) => {
-			e ? (await f(), Z(), requestAnimationFrame(() => {
-				U.value = !0;
-			}), (B.value?.querySelector("[data-active=\"true\"]"))?.scrollIntoView?.({ block: "nearest" })) : U.value = !1;
+		w(L, async (e) => {
+			e ? (await m(), Q(), requestAnimationFrame(() => {
+				W.value = !0;
+			}), (V.value?.querySelector("[data-active=\"true\"]"))?.scrollIntoView?.({ block: "nearest" })) : W.value = !1;
 		});
 		function $(e) {
-			I.value && B.value && !B.value.contains(e.target) && q();
+			L.value && V.value && !V.value.contains(e.target) && Y();
 		}
-		return C(I, (e) => {
+		return w(L, (e) => {
 			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
-		}), h(() => document.removeEventListener("pointerdown", $)), (e, a) => (g(), s("div", {
+		}), _(() => document.removeEventListener("pointerdown", $)), (e, i) => (v(), l("div", {
 			ref_key: "root",
-			ref: B,
-			class: p(b(n).root)
-		}, [l(t, {
-			label: u.label,
-			hint: u.hint,
-			"field-id": b(N),
-			"hint-id": P.value,
-			invalid: u.invalid
+			ref: V,
+			class: h(S(n).root)
+		}, [d(t, {
+			label: f.label,
+			hint: f.hint,
+			"field-id": S(P),
+			"hint-id": F.value,
+			invalid: f.invalid
 		}, {
-			default: w(() => [c("button", {
-				id: b(N),
+			default: T(() => [u("button", {
+				id: S(P),
 				ref_key: "trigger",
-				ref: z,
-				class: p(b(n).trigger),
+				ref: B,
+				class: h(S(n).trigger),
 				type: "button",
 				role: "combobox",
 				"aria-haspopup": "listbox",
-				"aria-expanded": I.value,
-				"aria-controls": F.value,
-				"aria-invalid": u.invalid || void 0,
-				"aria-describedby": u.hint ? P.value : void 0,
-				disabled: u.disabled,
-				onClick: J,
-				onKeydown: Q
-			}, [c("span", {
-				class: p(b(n).value),
-				"data-placeholder": !W.value || void 0
-			}, y(W.value?.label ?? u.placeholder ?? b(d).selectPlaceholder), 11, E), (g(), s("svg", {
-				class: p(b(n).chevron),
-				"data-open": I.value,
+				"aria-expanded": L.value,
+				"aria-controls": I.value,
+				"aria-invalid": f.invalid || void 0,
+				"aria-describedby": f.hint ? F.value : void 0,
+				disabled: f.disabled,
+				onClick: te,
+				onKeydown: ne
+			}, [u("span", {
+				class: h(S(n).value),
+				"data-placeholder": !G.value || void 0
+			}, x(G.value?.label ?? f.placeholder ?? S(p).selectPlaceholder), 11, D), (v(), l("svg", {
+				class: h(S(n).chevron),
+				"data-open": L.value,
 				viewBox: "0 0 12 12",
 				"aria-hidden": "true"
-			}, [...a[0] ||= [c("path", { d: "M2 4.5 L6 8.5 L10 4.5" }, null, -1)]], 10, D))], 42, T), l(i, {
-				"enter-active-class": b(n).popEnter,
-				"leave-active-class": b(n).popLeave
+			}, [...i[0] ||= [u("path", { d: "M2 4.5 L6 8.5 L10 4.5" }, null, -1)]], 10, O))], 42, E), d(o, {
+				"enter-active-class": S(n).popEnter,
+				"leave-active-class": S(n).popLeave
 			}, {
-				default: w(() => [I.value ? (g(), s("ul", {
+				default: T(() => [L.value ? (v(), l("ul", {
 					key: 0,
-					id: F.value,
+					id: I.value,
 					ref_key: "listEl",
-					ref: V,
-					class: p(b(n).list),
+					ref: H,
+					class: h(S(n).list),
 					role: "listbox"
-				}, [c("span", {
-					class: p(b(n).indicator),
-					"data-ready": U.value || void 0,
-					style: m({
-						transform: `translateY(${H.value.top}px)`,
-						height: `${H.value.height}px`
+				}, [u("span", {
+					class: h(S(n).indicator),
+					"data-ready": W.value || void 0,
+					style: g({
+						transform: `translateY(${U.value.top}px)`,
+						height: `${U.value.height}px`
 					}),
 					"aria-hidden": "true"
-				}, null, 14, k), (g(!0), s(r, null, v(u.options, (e, t) => (g(), s("li", {
+				}, null, 14, A), (v(!0), l(a, null, b(f.options, (e, t) => (v(), l("li", {
 					key: e.value,
-					class: p(b(n).option),
+					class: h([S(n).option, q.value && S(r).row]),
 					role: "option",
-					"aria-selected": e.value === M.value,
+					"data-virtual": q.value || void 0,
+					"aria-selected": e.value === N.value,
 					"aria-disabled": e.disabled || void 0,
-					"data-active": t === R.value || void 0,
-					"data-selected": e.value === M.value || void 0,
-					onClick: (t) => Y(e),
-					onMouseenter: (n) => !e.disabled && (R.value = t)
-				}, y(e.label), 43, A))), 128))], 10, O)) : o("", !0)]),
+					"data-active": t === z.value || void 0,
+					"data-selected": e.value === N.value || void 0,
+					onClick: (t) => X(e),
+					onMouseenter: (n) => !e.disabled && (z.value = t)
+				}, x(e.label), 43, j))), 128))], 10, k)) : c("", !0)]),
 				_: 1
 			}, 8, ["enter-active-class", "leave-active-class"])]),
 			_: 1
@@ -176,4 +184,4 @@ var T = [
 		])], 2));
 	}
 });
-export { j as default };
+export { M as default };

package/dist/components/table/MochiTable.module.js

@@ -1,5 +1,5 @@
 // src/components/table/MochiTable.module.css
-var e = "_wrap_1i9ki_7", t = "_root_1i9ki_14", n = "_th_1i9ki_25", r = "_sorter_1i9ki_37", i = "_arrow_1i9ki_60", a = "_tr_1i9ki_95", o = "_rowIn_1i9ki_1", s = "_rowMove_1i9ki_106", c = "_td_1i9ki_129", l = "_empty_1i9ki_140", u = {
+var e = "_wrap_1py51_7", t = "_root_1py51_14", n = "_th_1py51_25", r = "_sorter_1py51_37", i = "_arrow_1py51_60", a = "_tr_1py51_95", o = "_rowIn_1py51_1", s = "_rowMove_1py51_106", c = "_td_1py51_129", l = "_empty_1py51_140", u = {
 	wrap: e,
 	root: t,
 	th: n,

package/dist/components/table/MochiTable.vue.d.ts

@@ -1,4 +1,5 @@
 import { MochiTableColumn, MochiTableSort } from './types';
+import { MochiVirtualSetting } from '../../styles/virtual';
 type __VLS_Props = {
     columns: MochiTableColumn[];
     rows: Record<string, unknown>[];
@@ -6,6 +7,18 @@ type __VLS_Props = {
     rowKey?: string;
     striped?: boolean;
     emptyText?: string;
+    /**
+     * CSS 虚拟化三态：true 强制开（屏外行跳过布局/绘制，DOM 保留）；
+     * false 强制关；'auto'（默认）按硬件自适应——低端设备自动开。
+     */
+    virtual?: MochiVirtualSetting;
+    /**
+     * 渐进分片渲染：行数超阈值时先渲染首块（200 行）尽快出屏，其余行在
+     * idle 期补齐，DOM 最终全量保留（可 Ctrl+F）。补块大小按上一块的实际
+     * patch 耗时 AIMD 调节（预算内翻倍、超时减半），慢硬件自动缩小、快硬件
+     * 自动放大。排序/换数据会重置分片。
+     */
+    progressive?: boolean;
 };
 declare var __VLS_11: `cell-${string}`, __VLS_12: {
     row: Record<string, unknown>;
@@ -22,7 +35,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onSort-change"?: ((args_0: MochiTableSort | null) => any) | undefined;
 }>, {
+    virtual: MochiVirtualSetting;
     rowKey: string;
+    progressive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/table/MochiTable.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,10 @@
 import { useMessages as e } from "../../locale.js";
-import t from "./MochiTable.module.js";
-import { Fragment as n, TransitionGroup as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import t from "../../styles/virtual.module.js";
+import { shouldVirtualize as n } from "../../styles/virtual.js";
+import r from "./MochiTable.module.js";
+import { Fragment as i, TransitionGroup as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, watch as C, withCtx as w } from "vue";
 // src/components/table/MochiTable.vue?vue&type=script&setup=true&lang.ts
-var b = ["data-striped"], x = ["aria-sort"], S = ["onClick"], C = ["data-order"], w = { key: 0 }, T = ["colspan"], E = /*@__PURE__*/ u({
+var T = ["data-striped"], E = ["aria-sort"], D = ["onClick"], O = ["data-order"], k = ["data-virtual"], A = { key: 0 }, j = ["colspan"], M = 200, N = 3200, P = 96, F = /*@__PURE__*/ f({
 	name: "MochiTable",
 	__name: "MochiTable",
 	props: {
@@ -10,80 +12,103 @@ var b = ["data-striped"], x = ["aria-sort"], S = ["onClick"], C = ["data-order"]
 		rows: {},
 		rowKey: { default: "id" },
 		striped: { type: Boolean },
-		emptyText: {}
+		emptyText: {},
+		virtual: {
+			type: [Boolean, String],
+			default: "auto"
+		},
+		progressive: {
+			type: Boolean,
+			default: !0
+		}
 	},
 	emits: ["sort-change"],
-	setup(u, { emit: E }) {
-		let D = e(), O = u, k = E, A = m(null), j = i(() => {
-			let e = A.value;
-			if (!e) return O.rows;
+	setup(f, { emit: F }) {
+		let I = e(), L = f, R = F, z = v(null), B = o(() => {
+			let e = z.value;
+			if (!e) return L.rows;
 			let t = e.order === "asc" ? 1 : -1;
-			return [...O.rows].sort((n, r) => {
+			return [...L.rows].sort((n, r) => {
 				let i = n[e.key], a = r[e.key];
 				return i === a ? 0 : typeof i == "number" && typeof a == "number" ? (i - a) * t : String(i).localeCompare(String(a), "zh-CN") * t;
 			});
 		});
-		function M(e) {
-			e.sortable && (A.value?.key === e.key ? A.value.order === "asc" ? A.value = {
+		function V(e) {
+			e.sortable && (z.value?.key === e.key ? z.value.order === "asc" ? z.value = {
 				key: e.key,
 				order: "desc"
-			} : A.value = null : A.value = {
+			} : z.value = null : z.value = {
 				key: e.key,
 				order: "asc"
-			}, k("sort-change", A.value));
+			}, R("sort-change", z.value));
+		}
+		function H(e) {
+			return z.value?.key === e.key ? z.value.order === "asc" ? "ascending" : "descending" : "none";
 		}
-		function N(e) {
-			return A.value?.key === e.key ? A.value.order === "asc" ? "ascending" : "descending" : "none";
+		let U = o(() => n(B.value.length, L.virtual)), W = typeof requestIdleCallback == "function" ? (e) => requestIdleCallback(e, { timeout: 200 }) : (e) => window.setTimeout(e, 16), G = typeof cancelIdleCallback == "function" ? cancelIdleCallback : window.clearTimeout, K = o(() => n(B.value.length, L.progressive !== !1)), q = v(Infinity), J = o(() => B.value.slice(0, q.value)), Y = null, X = M, Z = !1;
+		function Q() {
+			Y = null;
+			let e = B.value.length, t = X;
+			q.value = Math.min(q.value + t, e);
+			let n = performance.now();
+			p(() => {
+				Z || (X = performance.now() - n <= P ? Math.min(t * 2, N) : Math.max(Math.round(t / 2), M), q.value < e && (Y = W(Q)));
+			});
 		}
-		return (e, i) => (p(), o("div", { class: d(v(t).wrap) }, [s("table", {
-			class: d(v(t).root),
-			"data-striped": u.striped || void 0
+		return C(B, (e) => {
+			Y !== null && G(Y), Y = null, X = M, K.value ? (q.value = Math.min(M, e.length), q.value < e.length && (Y = W(Q))) : q.value = Infinity;
+		}, { immediate: !0 }), g(() => {
+			Z = !0, Y !== null && G(Y);
+		}), (e, n) => (_(), c("div", { class: m(S(r).wrap) }, [l("table", {
+			class: m(S(r).root),
+			"data-striped": f.striped || void 0
 		}, [
-			s("thead", null, [s("tr", null, [(p(!0), o(n, null, h(u.columns, (e) => (p(), o("th", {
+			l("thead", null, [l("tr", null, [(_(!0), c(i, null, y(f.columns, (e) => (_(), c("th", {
 				key: e.key,
-				class: d(v(t).th),
-				style: f({
+				class: m(S(r).th),
+				style: h({
 					width: e.width,
 					textAlign: e.align ?? "left"
 				}),
 				scope: "col",
-				"aria-sort": e.sortable ? N(e) : void 0
-			}, [e.sortable ? (p(), o("button", {
+				"aria-sort": e.sortable ? H(e) : void 0
+			}, [e.sortable ? (_(), c("button", {
 				key: 0,
-				class: d(v(t).sorter),
+				class: m(S(r).sorter),
 				type: "button",
-				onClick: (t) => M(e)
-			}, [c(_(e.title) + " ", 1), (p(), o("svg", {
-				class: d(v(t).arrow),
-				"data-order": A.value?.key === e.key ? A.value.order : "none",
+				onClick: (t) => V(e)
+			}, [u(x(e.title) + " ", 1), (_(), c("svg", {
+				class: m(S(r).arrow),
+				"data-order": z.value?.key === e.key ? z.value.order : "none",
 				viewBox: "0 0 10 12",
 				"aria-hidden": "true"
-			}, [...i[0] ||= [s("path", { d: "M5 1 L8.5 5 L1.5 5 Z" }, null, -1), s("path", { d: "M5 11 L1.5 7 L8.5 7 Z" }, null, -1)]], 10, C))], 10, S)) : (p(), o(n, { key: 1 }, [c(_(e.title), 1)], 64))], 14, x))), 128))])]),
-			l(r, {
+			}, [...n[0] ||= [l("path", { d: "M5 1 L8.5 5 L1.5 5 Z" }, null, -1), l("path", { d: "M5 11 L1.5 7 L8.5 7 Z" }, null, -1)]], 10, O))], 10, D)) : (_(), c(i, { key: 1 }, [u(x(e.title), 1)], 64))], 14, E))), 128))])]),
+			d(a, {
 				tag: "tbody",
-				class: d(v(t).tbody),
-				"move-class": v(t).rowMove
+				class: m(S(r).tbody),
+				"move-class": S(r).rowMove
 			}, {
-				default: y(() => [(p(!0), o(n, null, h(j.value, (r, i) => (p(), o("tr", {
-					key: String(r[u.rowKey] ?? i),
-					class: d(v(t).tr),
-					style: f({ "--_i": i })
-				}, [(p(!0), o(n, null, h(u.columns, (n) => (p(), o("td", {
-					key: n.key,
-					class: d(v(t).td),
-					style: f({ textAlign: n.align ?? "left" })
-				}, [g(e.$slots, `cell-${n.key}`, {
-					row: r,
-					value: r[n.key],
-					index: i
-				}, () => [c(_(r[n.key]), 1)])], 6))), 128))], 6))), 128))]),
+				default: w(() => [(_(!0), c(i, null, y(J.value, (n, a) => (_(), c("tr", {
+					key: String(n[f.rowKey] ?? a),
+					class: m([S(r).tr, U.value && S(t).row]),
+					"data-virtual": U.value || void 0,
+					style: h({ "--_i": a })
+				}, [(_(!0), c(i, null, y(f.columns, (t) => (_(), c("td", {
+					key: t.key,
+					class: m(S(r).td),
+					style: h({ textAlign: t.align ?? "left" })
+				}, [b(e.$slots, `cell-${t.key}`, {
+					row: n,
+					value: n[t.key],
+					index: a
+				}, () => [u(x(n[t.key]), 1)])], 6))), 128))], 14, k))), 128))]),
 				_: 3
 			}, 8, ["class", "move-class"]),
-			j.value.length ? a("", !0) : (p(), o("tbody", w, [s("tr", null, [s("td", {
-				class: d(v(t).empty),
-				colspan: u.columns.length
-			}, [g(e.$slots, "empty", {}, () => [c(_(u.emptyText ?? v(D).tableEmpty), 1)])], 10, T)])]))
-		], 10, b)], 2));
+			B.value.length ? s("", !0) : (_(), c("tbody", A, [l("tr", null, [l("td", {
+				class: m(S(r).empty),
+				colspan: f.columns.length
+			}, [b(e.$slots, "empty", {}, () => [u(x(f.emptyText ?? S(I).tableEmpty), 1)])], 10, j)])]))
+		], 10, T)], 2));
 	}
 });
-export { E as default };
+export { F as default };

package/dist/components/tree/MochiTree.module.js

@@ -1,5 +1,5 @@
 // src/components/tree/MochiTree.module.css
-var e = "_root_8of0m_7", t = "_item_8of0m_17", n = "_row_8of0m_21", r = "_branch_8of0m_58", i = "_label_8of0m_89", a = "_group_8of0m_96", o = "_children_8of0m_106", s = {
+var e = "_root_1d8sg_7", t = "_item_1d8sg_17", n = "_row_1d8sg_21", r = "_branch_1d8sg_58", i = "_label_1d8sg_89", a = "_group_1d8sg_96", o = "_children_1d8sg_106", s = {
 	root: e,
 	item: t,
 	row: n,

package/dist/components/tree/MochiTree.vue.d.ts

@@ -1,8 +1,14 @@
 import { MochiTreeNode } from './types';
+import { MochiVirtualSetting } from '../../styles/virtual';
 type __VLS_Props = {
     data: MochiTreeNode[];
     defaultExpandAll?: boolean;
     label?: string;
+    /**
+     * CSS 虚拟化三态：true 强制开（屏外行跳过布局/绘制，DOM 保留）；
+     * false 强制关；'auto'（默认）按硬件自适应——低端设备自动开。
+     */
+    virtual?: MochiVirtualSetting;
 };
 type __VLS_ModelProps = {
     'selected'?: string;
@@ -13,6 +19,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:selected"?: ((value: string) => any) | undefined;
 }>, {
+    virtual: MochiVirtualSetting;
     defaultExpandAll: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;