x-prop-tree 0.8.35 → 0.8.38

package/dist/{i18n-en.l2rmrsld.js → i18n-en.fevhb1gv.js}

@@ -4,10 +4,6 @@ import { t as __exportAll } from "./rolldown-runtime.c6i0pdwe.js";
 var en_exports = /* @__PURE__ */ __exportAll({ default: () => en_default });
 var en_default = { "x-prop-tree": {
 	copy: "Copy",
-	dlg: { saveChange: {
-		title: "Save Changes",
-		text: "Do you want to save the changes?"
-	} },
 	json: "JSON",
 	jsonEditor: "JSON Editor",
 	noAdaptSlot: "No Adapt Slot",

package/dist/{i18n-zhHans.mlbij4hp.js → i18n-zhHans.cro9uz6i.js}

@@ -4,10 +4,6 @@ import { t as __exportAll } from "./rolldown-runtime.c6i0pdwe.js";
 var zhHans_exports = /* @__PURE__ */ __exportAll({ default: () => zhHans_default });
 var zhHans_default = { "x-prop-tree": {
 	copy: "拷贝",
-	dlg: { saveChange: {
-		title: "保存变化",
-		text: "你想要保存变化吗？"
-	} },
 	json: "JSON",
 	jsonEditor: "JSON编辑器",
 	noAdaptSlot: "没有适配插槽",

package/dist/index.d.ts

@@ -2,12 +2,6 @@
 export declare function loadLocaleMessagePropTree(locale: string): Promise<{
   'x-prop-tree': {
     copy: string;
-    dlg: {
-      saveChange: {
-        title: string;
-        text: string;
-      };
-    };
     json: string;
     jsonEditor: string;
     noAdaptSlot: string;

package/dist/index.js

@@ -1,9 +1,8 @@
 (function(){try{document.getElementById(`x-prop-tree`)?.remove();const e = document.createElement(`style`);e.setAttribute(`id`, `x-prop-tree`);const t = document.createTextNode(``);e.appendChild(t);document.head.appendChild(e);}catch(e){console.error('rolldown-plugin-inject-css', e);}})()
 import { n as isEqual, r as cloneDeep, t as omit } from "./vendor.mu9vrf3y.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeModels, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDirective, toDisplayString, unref, useId, useModel, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { eventBus, globalObjects, injectDark, injectLocale, injectViews, openConfirmDlg, openNumberDlg, openPromptDlg, useColor, useSystem, useViewStack } from "x-essential-lib";
+import { eventBus, globalObjects, injectDark, injectLocale, openNumberDlg, openPromptDlg, useColor, useSystem, useViewStack } from "x-essential-lib";
 import { getElement, getItems, getPropertyDefault, getPropertyDefaultArray, getTag, getTypes, isHexColor, isThemeColor, makeSlotId, parseNumberUnit, pkgs, rules, themeColors, unwrapSlotId } from "x-runtime-lib";
-import { getListEntry, setCollapse, tidyList } from "x-group-list";
 import { useI18n } from "vue-i18n";
 import { globalState } from "x-state-lib";
 import { useDisplay } from "vuetify";
@@ -96,7 +95,7 @@ function isCollapse(root, keys) {
 	}
 	return current.collapse;
 }
-function setCollapse$1(root, keys, collapse) {
+function setCollapse(root, keys, collapse) {
 	let current = root.value;
 	for (const key of keys) {
 		if (!current.children[key]) current.children[key] = {
@@ -664,7 +663,7 @@ var menu_default = index_vue_vue_type_script_setup_true_lang_default$17;
 
 //#endregion
 //#region src/components/title/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$20 = { style: { pointerEvents: "none" } };
+const _hoisted_1$14 = { style: { pointerEvents: "none" } };
 var index_vue_vue_type_script_setup_true_lang_default$16 = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	props: {
@@ -733,7 +732,7 @@ var index_vue_vue_type_script_setup_true_lang_default$16 = /*@__PURE__*/ defineC
 					class: "mr-1",
 					icon: __props.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
 				}, null, 8, ["icon"]),
-				createElementVNode("span", _hoisted_1$20, toDisplayString(__props.title), 1),
+				createElementVNode("span", _hoisted_1$14, toDisplayString(__props.title), 1),
 				createVNode(_component_v_spacer),
 				__props.hasCreate ? (openBlock(), createBlock(_component_v_btn, {
 					key: 0,
@@ -767,27 +766,28 @@ function useAdaptSlotList() {
 	const type = injectType();
 	const subtype = injectSubtype();
 	const { i18n } = globalObjects;
-	const adaptSlotList = ref([]);
+	const adaptSlotList = {
+		groups: ref([]),
+		items: ref([]),
+		state: ref({})
+	};
 	provideAdaptSlotList(adaptSlotList);
-	const getLatest = () => {
-		if (!version.value || !type.value || !subtype.value) return [];
+	function getLatest() {
+		const tmpGroups = [];
+		const tmpItems = [];
+		if (!version.value || !type.value || !subtype.value) return [tmpGroups, tmpItems];
 		const pkg = pkgs[version.value];
 		if (!pkg) {
 			console.assert(false, `invalid version=${version.value}`);
-			return [];
+			return [tmpGroups, tmpItems];
 		}
 		const tag = getTag(type.value, subtype.value);
-		const tmpSlotList = [];
 		for (let i = 0; i < pkg.groups[tag].length; i++) {
 			const group = pkg.groups[tag][i];
-			const last = getListEntry(adaptSlotList, group.key);
-			tmpSlotList.push({
+			tmpGroups.push({
 				id: group.key,
-				type: 0,
-				name: i18n.global.t(group.name),
 				position: i,
-				collapse: last?.collapse ?? true,
-				count: 0
+				name: i18n.global.t(group.name)
 			});
 			let pos = 0;
 			for (const item of group.items) {
@@ -798,28 +798,22 @@ function useAdaptSlotList() {
 				for (const slot of element.slots) {
 					const id = makeSlotId("elementSlot", element.key, slot.key);
 					const name = `${i18n.global.t(element.name)} / ${i18n.global.t(slot.name)}`;
-					tmpSlotList.push({
+					tmpItems.push({
 						id,
-						type: 1,
-						name,
-						position: pos++,
 						group: group.key,
+						position: pos++,
+						name,
 						names: [element.name, slot.name]
 					});
 				}
 			}
 		}
 		const { activeApp, depends } = globalState.app;
-		for (const { id, name, position } of activeApp.compGroups) {
-			const last = getListEntry(adaptSlotList, id);
-			tmpSlotList.push({
-				id,
-				type: 0,
-				name,
-				position,
-				collapse: last?.collapse ?? true
-			});
-		}
+		for (const { id, name, position } of activeApp.compGroups) tmpGroups.push({
+			id,
+			position,
+			name
+		});
 		let pos = 0;
 		for (const comp of activeApp.comps) {
 			const depend = depends[comp.id];
@@ -828,33 +822,34 @@ function useAdaptSlotList() {
 			for (const slot of depend.meta.slots) {
 				const id = makeSlotId("customSlot", comp.id, slot.id);
 				const name = `${comp.name} / ${slot.name}`;
-				tmpSlotList.push({
+				tmpItems.push({
 					id,
-					type: 1,
-					name,
-					position: pos++,
 					group: comp.groupId,
+					position: pos++,
+					name,
 					names: [comp.name, slot.name]
 				});
 			}
 		}
-		return tidyList(tmpSlotList, true);
-	};
-	const refresh = () => {
-		adaptSlotList.value = getLatest();
-	};
+		return [tmpGroups, tmpItems];
+	}
+	function refresh() {
+		const [groups, items] = getLatest();
+		adaptSlotList.groups.value = groups;
+		adaptSlotList.items.value = items;
+	}
 	let handle;
-	const startTimer = () => {
+	function startTimer() {
 		clearTimeout(handle);
 		handle = window.setTimeout(() => {
 			refresh();
 			if (handle) startTimer();
 		}, 1e3);
-	};
-	const stopTimer = () => {
+	}
+	function stopTimer() {
 		clearTimeout(handle);
 		handle = void 0;
-	};
+	}
 	onMounted(() => {
 		startTimer();
 	});
@@ -874,45 +869,45 @@ function useAdaptSlotList() {
 //#endregion
 //#region src/composables/compList/index.ts
 function useCompList() {
-	const compList = ref([]);
+	const compList = {
+		groups: ref([]),
+		items: ref([]),
+		state: ref({})
+	};
 	provideCompList(compList);
-	const refresh = () => {
+	function refresh() {
+		const tmpGroups = [];
+		const tmpItems = [];
 		const { activeApp, depends } = globalState.app;
-		const tmpCompList = [];
-		for (const { id, name, position } of activeApp.compGroups) {
-			const last = compList.value.find((entry) => entry.id === id);
-			tmpCompList.push({
-				id,
-				type: 0,
-				name,
-				position,
-				collapse: last?.collapse ?? true
-			});
-		}
+		for (const { id, name, position } of activeApp.compGroups) tmpGroups.push({
+			id,
+			position,
+			name
+		});
 		for (const { id, groupId: group, name, position } of activeApp.comps) {
 			if (!depends[id]) continue;
-			tmpCompList.push({
+			tmpItems.push({
 				id,
-				type: 1,
-				name,
+				group,
 				position,
-				group
+				name
 			});
 		}
-		compList.value = tidyList(tmpCompList, true);
-	};
+		compList.groups.value = tmpGroups;
+		compList.items.value = tmpItems;
+	}
 	let handle;
-	const startTimer = () => {
+	function startTimer() {
 		clearTimeout(handle);
 		handle = window.setTimeout(() => {
 			refresh();
 			if (handle) startTimer();
 		}, 1e3);
-	};
-	const stopTimer = () => {
+	}
+	function stopTimer() {
 		clearTimeout(handle);
 		handle = void 0;
-	};
+	}
 	onMounted(() => {
 		startTimer();
 	});
@@ -960,117 +955,8 @@ function useSlotList() {
 	});
 }
 
-//#endregion
-//#region src/components/values/adaptSlot/adaptSlotList/group.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$19 = { class: "text-label-large ml-1" };
-const _hoisted_2$3 = { class: "text-body-small text-grey ml-1" };
-var group_vue_vue_type_script_setup_true_lang_default$1 = /*@__PURE__*/ defineComponent({
-	__name: "group",
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		title: {
-			type: String,
-			required: true
-		},
-		collapse: {
-			type: Boolean,
-			required: true
-		},
-		count: {
-			type: Number,
-			required: true
-		}
-	},
-	emits: ["x-click"],
-	setup(__props, { emit: __emit }) {
-		const { backgroundColor2, highlightColor } = useColor();
-		const emit = __emit;
-		const mouseOver = ref(false);
-		const style = computed(() => {
-			return {
-				background: mouseOver.value ? highlightColor.value : backgroundColor2.value,
-				height: "30px",
-				userSelect: "none"
-			};
-		});
-		return (_ctx, _cache) => {
-			const _component_v_icon = resolveComponent("v-icon");
-			const _directive_ripple = resolveDirective("ripple");
-			return withDirectives((openBlock(), createElementBlock("div", {
-				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(style.value),
-				onClick: _cache[0] || (_cache[0] = ($event) => emit("x-click", __props.id)),
-				onMouseout: _cache[1] || (_cache[1] = ($event) => mouseOver.value = false),
-				onMouseover: _cache[2] || (_cache[2] = ($event) => mouseOver.value = true)
-			}, [
-				createVNode(_component_v_icon, {
-					icon: __props.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
-					size: "small"
-				}, null, 8, ["icon"]),
-				createElementVNode("span", _hoisted_1$19, toDisplayString(__props.title), 1),
-				createElementVNode("span", _hoisted_2$3, toDisplayString(__props.count), 1)
-			], 36)), [[_directive_ripple]]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/values/adaptSlot/adaptSlotList/group.vue
-var group_default$1 = group_vue_vue_type_script_setup_true_lang_default$1;
-
-//#endregion
-//#region src/components/values/adaptSlot/adaptSlotList/item.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$18 = { class: "text-body-large ml-6" };
-var item_vue_vue_type_script_setup_true_lang_default$2 = /*@__PURE__*/ defineComponent({
-	__name: "item",
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		title: {
-			type: String,
-			required: true
-		}
-	},
-	emits: ["x-click"],
-	setup(__props, { emit: __emit }) {
-		const { backgroundColor2, highlightColor } = useColor();
-		const emit = __emit;
-		const mouseOver = ref(false);
-		const style = computed(() => {
-			return {
-				background: mouseOver.value ? highlightColor.value : backgroundColor2.value,
-				height: "48px",
-				userSelect: "none"
-			};
-		});
-		return (_ctx, _cache) => {
-			const _directive_ripple = resolveDirective("ripple");
-			return withDirectives((openBlock(), createElementBlock("div", {
-				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(style.value),
-				onClick: _cache[0] || (_cache[0] = ($event) => emit("x-click", __props.id)),
-				onMouseout: _cache[1] || (_cache[1] = ($event) => mouseOver.value = false),
-				onMouseover: _cache[2] || (_cache[2] = ($event) => mouseOver.value = true)
-			}, [createElementVNode("span", _hoisted_1$18, toDisplayString(__props.title), 1)], 36)), [[_directive_ripple]]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/values/adaptSlot/adaptSlotList/item.vue
-var item_default$2 = item_vue_vue_type_script_setup_true_lang_default$2;
-
 //#endregion
 //#region src/components/values/adaptSlot/adaptSlotList/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$17 = {
-	key: 1,
-	class: "text-body-medium text-grey ml-3"
-};
 var index_vue_vue_type_script_setup_true_lang_default$15 = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	props: {
@@ -1086,46 +972,25 @@ var index_vue_vue_type_script_setup_true_lang_default$15 = /*@__PURE__*/ defineC
 		const open = useModel(__props, "open");
 		const emit = __emit;
 		const adaptSlotList = injectAdaptSlotList();
-		const style = computed(() => {
-			return {
-				display: "flex",
-				flexDirection: "column",
-				gap: "1px"
-			};
-		});
-		function onGroupClick(id) {
-			const group = getListEntry(adaptSlotList, id);
-			if (!group) return;
-			setCollapse(adaptSlotList, id, !group.collapse);
-		}
 		function onItemClick(id) {
 			open.value = false;
 			emit("x-select", id);
 		}
 		return (_ctx, _cache) => {
-			return unref(adaptSlotList).length > 0 ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				style: normalizeStyle(style.value)
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(adaptSlotList), (item) => {
-				return openBlock(), createElementBlock(Fragment, { key: item.id }, [item.type === 0 ? (openBlock(), createBlock(group_default$1, {
-					key: 0,
-					id: item.id,
-					collapse: item.collapse,
-					count: item.count ?? 0,
-					title: item.name,
-					onXClick: onGroupClick
-				}, null, 8, [
-					"id",
-					"collapse",
-					"count",
-					"title"
-				])) : createCommentVNode("v-if", true), item.type === 1 && item.show ? (openBlock(), createBlock(item_default$2, {
-					key: 1,
-					id: item.id,
-					title: item.name,
-					onXClick: onItemClick
-				}, null, 8, ["id", "title"])) : createCommentVNode("v-if", true)], 64);
-			}), 128))], 4)) : (openBlock(), createElementBlock("div", _hoisted_1$17, toDisplayString(unref(t)("x-prop-tree.noAdaptSlot")), 1));
+			const _component_x_group_list_lite = resolveComponent("x-group-list-lite");
+			return openBlock(), createBlock(_component_x_group_list_lite, {
+				state: unref(adaptSlotList).state,
+				"onUpdate:state": _cache[0] || (_cache[0] = ($event) => unref(adaptSlotList).state = $event),
+				groups: unref(adaptSlotList).groups,
+				items: unref(adaptSlotList).items,
+				"no-data": unref(t)("x-prop-tree.noAdaptSlot"),
+				onXItemClick: onItemClick
+			}, null, 8, [
+				"state",
+				"groups",
+				"items",
+				"no-data"
+			]);
 		};
 	}
 });
@@ -1136,7 +1001,7 @@ var adaptSlotList_default = index_vue_vue_type_script_setup_true_lang_default$15
 
 //#endregion
 //#region src/components/values/adaptSlot/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$16 = { class: "text-body-large" };
+const _hoisted_1$13 = { class: "text-body-large" };
 var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	props: /*@__PURE__*/ mergeModels({
@@ -1161,7 +1026,7 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 	setup(__props, { emit: __emit }) {
 		const { t } = useI18n();
 		const display = useDisplay();
-		const { sysBarAvail } = useSystem();
+		const { safeAreaInset } = useSystem();
 		const { backgroundColor1 } = useColor();
 		const adaptSlot = useModel(__props, "modelValue");
 		const emit = __emit;
@@ -1176,19 +1041,15 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 			};
 		});
 		const contStyle = computed(() => {
-			let h = 48;
-			if (sysBarAvail.value) h += 24;
 			return {
 				position: "relative",
-				height: `calc(100% - ${h}px)`
+				height: `calc(100% - ${safeAreaInset.top + 48 + safeAreaInset.bottom}px)`,
+				paddingBottom: "60px"
 			};
 		});
-		const tailStyle = computed(() => {
-			return { height: "60px" };
-		});
 		watchEffect(() => {
 			if (!adaptSlot.value) return;
-			const item = getListEntry(adaptSlotList, adaptSlot.value.id);
+			const item = adaptSlotList.items.value.find((entry) => entry.id === adaptSlot.value.id);
 			if (item && !isEqual(item.names, adaptSlot.value.names)) adaptSlot.value = {
 				...adaptSlot.value,
 				names: cloneDeep(item.names)
@@ -1210,7 +1071,7 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 				adaptSlot.value = null;
 				return;
 			}
-			const item = getListEntry(adaptSlotList, id);
+			const item = adaptSlotList.items.value.find((entry) => entry.id === id);
 			if (!item) {
 				adaptSlot.value = null;
 				return;
@@ -1256,11 +1117,11 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 					class: "elevation-2",
 					style: normalizeStyle(wrapStyle.value)
 				}, [
-					unref(sysBarAvail) ? (openBlock(), createBlock(_component_v_sheet, {
+					unref(safeAreaInset).top ? (openBlock(), createBlock(_component_v_sheet, {
 						key: 0,
 						color: "transparent",
-						height: 24
-					})) : createCommentVNode("v-if", true),
+						height: unref(safeAreaInset).top
+					}, null, 8, ["height"])) : createCommentVNode("v-if", true),
 					createVNode(_component_v_sheet, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
@@ -1271,7 +1132,7 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 							icon: "mdi-close",
 							variant: "text",
 							onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
-						}), createElementVNode("span", _hoisted_1$16, toDisplayString(unref(t)("x-prop-tree.selectAdaptSlot")), 1)]),
+						}), createElementVNode("span", _hoisted_1$13, toDisplayString(unref(t)("x-prop-tree.selectAdaptSlot")), 1)]),
 						_: 1
 					}),
 					createElementVNode("div", {
@@ -1281,7 +1142,7 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 						open: unref(open),
 						"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isRef(open) ? open.value = $event : null),
 						onXSelect: onAdaptSlotSelect
-					}, null, 8, ["open"]), createElementVNode("div", { style: normalizeStyle(tailStyle.value) }, null, 4)], 4)
+					}, null, 8, ["open"])], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -1293,117 +1154,8 @@ var index_vue_vue_type_script_setup_true_lang_default$14 = /*@__PURE__*/ defineC
 //#region src/components/values/adaptSlot/index.vue
 var adaptSlot_default = index_vue_vue_type_script_setup_true_lang_default$14;
 
-//#endregion
-//#region src/components/values/comp/compList/group.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$15 = { class: "text-label-large ml-1" };
-const _hoisted_2$2 = { class: "text-body-small text-grey ml-1" };
-var group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "group",
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		title: {
-			type: String,
-			required: true
-		},
-		collapse: {
-			type: Boolean,
-			required: true
-		},
-		count: {
-			type: Number,
-			required: true
-		}
-	},
-	emits: ["x-click"],
-	setup(__props, { emit: __emit }) {
-		const { backgroundColor2, highlightColor } = useColor();
-		const emit = __emit;
-		const mouseOver = ref(false);
-		const style = computed(() => {
-			return {
-				background: mouseOver.value ? highlightColor.value : backgroundColor2.value,
-				height: "30px",
-				userSelect: "none"
-			};
-		});
-		return (_ctx, _cache) => {
-			const _component_v_icon = resolveComponent("v-icon");
-			const _directive_ripple = resolveDirective("ripple");
-			return withDirectives((openBlock(), createElementBlock("div", {
-				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(style.value),
-				onClick: _cache[0] || (_cache[0] = ($event) => emit("x-click", __props.id)),
-				onMouseout: _cache[1] || (_cache[1] = ($event) => mouseOver.value = false),
-				onMouseover: _cache[2] || (_cache[2] = ($event) => mouseOver.value = true)
-			}, [
-				createVNode(_component_v_icon, {
-					icon: __props.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
-					size: "small"
-				}, null, 8, ["icon"]),
-				createElementVNode("span", _hoisted_1$15, toDisplayString(__props.title), 1),
-				createElementVNode("span", _hoisted_2$2, toDisplayString(__props.count), 1)
-			], 36)), [[_directive_ripple]]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/values/comp/compList/group.vue
-var group_default = group_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/values/comp/compList/item.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$14 = { class: "text-body-large ml-6" };
-var item_vue_vue_type_script_setup_true_lang_default$1 = /*@__PURE__*/ defineComponent({
-	__name: "item",
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		title: {
-			type: String,
-			required: true
-		}
-	},
-	emits: ["x-click"],
-	setup(__props, { emit: __emit }) {
-		const { backgroundColor2, highlightColor } = useColor();
-		const emit = __emit;
-		const mouseOver = ref(false);
-		const style = computed(() => {
-			return {
-				background: mouseOver.value ? highlightColor.value : backgroundColor2.value,
-				height: "48px",
-				userSelect: "none"
-			};
-		});
-		return (_ctx, _cache) => {
-			const _directive_ripple = resolveDirective("ripple");
-			return withDirectives((openBlock(), createElementBlock("div", {
-				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(style.value),
-				onClick: _cache[0] || (_cache[0] = ($event) => emit("x-click", __props.id)),
-				onMouseout: _cache[1] || (_cache[1] = ($event) => mouseOver.value = false),
-				onMouseover: _cache[2] || (_cache[2] = ($event) => mouseOver.value = true)
-			}, [createElementVNode("span", _hoisted_1$14, toDisplayString(__props.title), 1)], 36)), [[_directive_ripple]]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/values/comp/compList/item.vue
-var item_default$1 = item_vue_vue_type_script_setup_true_lang_default$1;
-
 //#endregion
 //#region src/components/values/comp/compList/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$13 = {
-	key: 1,
-	class: "text-body-medium text-grey ml-3"
-};
 var index_vue_vue_type_script_setup_true_lang_default$13 = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	props: {
@@ -1419,47 +1171,26 @@ var index_vue_vue_type_script_setup_true_lang_default$13 = /*@__PURE__*/ defineC
 		const open = useModel(__props, "open");
 		const emit = __emit;
 		const compList = injectCompList();
-		const style = computed(() => {
-			return {
-				display: "flex",
-				flexDirection: "column",
-				gap: "1px"
-			};
-		});
-		function onGroupClick(id) {
-			const group = getListEntry(compList, id);
-			if (!group) return;
-			setCollapse(compList, id, !group.collapse);
-		}
 		function onItemClick(id) {
 			open.value = false;
 			emit("x-select", id);
 			eventBus.emit("refreshDepends");
 		}
 		return (_ctx, _cache) => {
-			return unref(compList).length > 0 ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				style: normalizeStyle(style.value)
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(compList), (item) => {
-				return openBlock(), createElementBlock(Fragment, { key: item.id }, [item.type === 0 ? (openBlock(), createBlock(group_default, {
-					key: 0,
-					id: item.id,
-					collapse: item.collapse,
-					count: item.count ?? 0,
-					title: item.name,
-					onXClick: onGroupClick
-				}, null, 8, [
-					"id",
-					"collapse",
-					"count",
-					"title"
-				])) : createCommentVNode("v-if", true), item.type === 1 && item.show ? (openBlock(), createBlock(item_default$1, {
-					key: 1,
-					id: item.id,
-					title: item.name,
-					onXClick: onItemClick
-				}, null, 8, ["id", "title"])) : createCommentVNode("v-if", true)], 64);
-			}), 128))], 4)) : (openBlock(), createElementBlock("div", _hoisted_1$13, toDisplayString(unref(t)("x-prop-tree.noComp")), 1));
+			const _component_x_group_list_lite = resolveComponent("x-group-list-lite");
+			return openBlock(), createBlock(_component_x_group_list_lite, {
+				state: unref(compList).state,
+				"onUpdate:state": _cache[0] || (_cache[0] = ($event) => unref(compList).state = $event),
+				groups: unref(compList).groups,
+				items: unref(compList).items,
+				"no-data": unref(t)("x-prop-tree.noComp"),
+				onXItemClick: onItemClick
+			}, null, 8, [
+				"state",
+				"groups",
+				"items",
+				"no-data"
+			]);
 		};
 	}
 });
@@ -1495,7 +1226,7 @@ var index_vue_vue_type_script_setup_true_lang_default$12 = /*@__PURE__*/ defineC
 	setup(__props, { emit: __emit }) {
 		const { t } = useI18n();
 		const display = useDisplay();
-		const { sysBarAvail } = useSystem();
+		const { safeAreaInset } = useSystem();
 		const { backgroundColor1 } = useColor();
 		const comp = useModel(__props, "modelValue");
 		const emit = __emit;
@@ -1510,19 +1241,18 @@ var index_vue_vue_type_script_setup_true_lang_default$12 = /*@__PURE__*/ defineC
 			};
 		});
 		const contStyle = computed(() => {
-			let h = 48;
-			if (sysBarAvail.value) h += 24;
 			return {
 				position: "relative",
-				height: `calc(100% - ${h}px)`
+				height: `calc(100% - ${safeAreaInset.top + 48 + safeAreaInset.bottom}px)`,
+				paddingBottom: "60px"
 			};
 		});
-		const tailStyle = computed(() => {
+		computed(() => {
 			return { height: "60px" };
 		});
 		watchEffect(() => {
 			if (!comp.value) return;
-			const item = getListEntry(compList, comp.value.id);
+			const item = compList.items.value.find((entry) => entry.id === comp.value.id);
 			if (item && item.name !== comp.value.name) comp.value = {
 				...comp.value,
 				name: item.name
@@ -1541,7 +1271,7 @@ var index_vue_vue_type_script_setup_true_lang_default$12 = /*@__PURE__*/ defineC
 				comp.value = null;
 				return;
 			}
-			const item = getListEntry(compList, id);
+			const item = compList.items.value.find((entry) => entry.id === id);
 			if (!item) {
 				comp.value = null;
 				return;
@@ -1587,11 +1317,11 @@ var index_vue_vue_type_script_setup_true_lang_default$12 = /*@__PURE__*/ defineC
 					class: "elevation-2",
 					style: normalizeStyle(wrapStyle.value)
 				}, [
-					unref(sysBarAvail) ? (openBlock(), createBlock(_component_v_sheet, {
+					unref(safeAreaInset).top ? (openBlock(), createBlock(_component_v_sheet, {
 						key: 0,
 						color: "transparent",
-						height: 24
-					})) : createCommentVNode("v-if", true),
+						height: unref(safeAreaInset).top
+					}, null, 8, ["height"])) : createCommentVNode("v-if", true),
 					createVNode(_component_v_sheet, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
@@ -1612,7 +1342,7 @@ var index_vue_vue_type_script_setup_true_lang_default$12 = /*@__PURE__*/ defineC
 						open: unref(open),
 						"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isRef(open) ? open.value = $event : null),
 						onXSelect: onCompSelect
-					}, null, 8, ["open"]), createElementVNode("div", { style: normalizeStyle(tailStyle.value) }, null, 4)], 4)
+					}, null, 8, ["open"])], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -1772,14 +1502,12 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 	emits: /*@__PURE__*/ mergeModels(["delete"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const { t } = useI18n();
-		const { sysBarAvail } = useSystem();
+		const { safeAreaInset } = useSystem();
 		const { backgroundColor0, backgroundColor1, backgroundColor2 } = useColor();
-		injectViews();
 		const json = useModel(__props, "modelValue");
 		const emit = __emit;
 		const contStyle = computed(() => {
-			let h = 48;
-			if (sysBarAvail.value) h += 24;
+			let h = safeAreaInset.top + 48 + safeAreaInset.bottom;
 			return {
 				position: "relative",
 				background: backgroundColor1.value,
@@ -1787,20 +1515,10 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 			};
 		});
 		const editor = useTemplateRef("editor");
-		async function onClose() {
-			try {
-				const newJson = editor.value.save();
-				if (isEqual(newJson, json.value)) return;
-				if (!await openConfirmDlg({
-					title: t("x-prop-tree.dlg.saveChange.title"),
-					text: t("x-prop-tree.dlg.saveChange.text")
-				})) return;
-				json.value = newJson;
-			} finally {
-				open.value = false;
-			}
-		}
-		const { open } = useViewStack(`propTreejsonEditorDlg${useId()}`, void 0, onClose);
+		const { open } = useViewStack(`propTreejsonEditorDlg${useId()}`);
+		watch(open, (val) => {
+			if (!val) json.value = editor.value.save();
+		});
 		return (_ctx, _cache) => {
 			const _component_v_btn = resolveComponent("v-btn");
 			const _component_v_sheet = resolveComponent("v-sheet");
@@ -1808,13 +1526,13 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 			const _component_v_dialog = resolveComponent("v-dialog");
 			return openBlock(), createBlock(_component_v_dialog, {
 				modelValue: unref(open),
-				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(open) ? open.value = $event : null),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(open) ? open.value = $event : null),
 				attach: "",
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "dialog-bottom-transition",
-				onKeydown: withKeys(withModifiers(onClose, ["stop", "prevent"]), ["esc"])
+				onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => open.value = false, ["stop", "prevent"]), ["esc"]))
 			}, {
 				activator: withCtx(({ props: activatorProps }) => [createVNode(_component_v_btn, mergeProps(activatorProps, {
 					block: "",
@@ -1837,11 +1555,11 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 					width: "100%"
 				}, {
 					default: withCtx(() => [
-						unref(sysBarAvail) ? (openBlock(), createBlock(_component_v_sheet, {
+						unref(safeAreaInset).top ? (openBlock(), createBlock(_component_v_sheet, {
 							key: 0,
 							color: unref(backgroundColor2),
-							height: 24
-						}, null, 8, ["color"])) : createCommentVNode("v-if", true),
+							height: unref(safeAreaInset).top
+						}, null, 8, ["color", "height"])) : createCommentVNode("v-if", true),
 						createVNode(_component_v_sheet, {
 							class: "d-flex align-center px-2",
 							color: unref(backgroundColor2),
@@ -1852,7 +1570,7 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 									density: "comfortable",
 									icon: "mdi-close",
 									variant: "text",
-									onClick: onClose
+									onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
 								}),
 								createElementVNode("span", _hoisted_1$10, toDisplayString(unref(t)("x-prop-tree.jsonEditor")), 1),
 								createVNode(_component_v_spacer)
@@ -1868,7 +1586,7 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 					_: 1
 				}, 8, ["color"])]),
 				_: 1
-			}, 8, ["modelValue", "onKeydown"]);
+			}, 8, ["modelValue"]);
 		};
 	}
 });
@@ -2601,7 +2319,7 @@ var index_vue_vue_type_script_setup_true_lang_default$4 = /*@__PURE__*/ defineCo
 	setup(__props, { emit: __emit }) {
 		const { t } = useI18n();
 		const display = useDisplay();
-		const { sysBarAvail } = useSystem();
+		const { safeAreaInset } = useSystem();
 		const { backgroundColor1 } = useColor();
 		const slot = useModel(__props, "modelValue");
 		const emit = __emit;
@@ -2616,16 +2334,12 @@ var index_vue_vue_type_script_setup_true_lang_default$4 = /*@__PURE__*/ defineCo
 			};
 		});
 		const contStyle = computed(() => {
-			let h = 48;
-			if (sysBarAvail.value) h += 24;
 			return {
 				position: "relative",
-				height: `calc(100% - ${h}px)`
+				height: `calc(100% - ${safeAreaInset.top + 48 + safeAreaInset.bottom}px)`,
+				paddingBottom: "60px"
 			};
 		});
-		const tailStyle = computed(() => {
-			return { height: "60px" };
-		});
 		watchEffect(() => {
 			if (!slot.value) return;
 			const item = slotList.value.find((entry) => entry.id === slot.value.id);
@@ -2693,11 +2407,11 @@ var index_vue_vue_type_script_setup_true_lang_default$4 = /*@__PURE__*/ defineCo
 					class: "elevation-2",
 					style: normalizeStyle(wrapStyle.value)
 				}, [
-					unref(sysBarAvail) ? (openBlock(), createBlock(_component_v_sheet, {
+					unref(safeAreaInset).top ? (openBlock(), createBlock(_component_v_sheet, {
 						key: 0,
 						color: "transparent",
-						height: 24
-					})) : createCommentVNode("v-if", true),
+						height: unref(safeAreaInset).top
+					}, null, 8, ["height"])) : createCommentVNode("v-if", true),
 					createVNode(_component_v_sheet, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
@@ -2718,7 +2432,7 @@ var index_vue_vue_type_script_setup_true_lang_default$4 = /*@__PURE__*/ defineCo
 						open: unref(open),
 						"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isRef(open) ? open.value = $event : null),
 						onXSelect: onSlotSelect
-					}, null, 8, ["open"]), createElementVNode("div", { style: normalizeStyle(tailStyle.value) }, null, 4)], 4)
+					}, null, 8, ["open"])], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -3273,7 +2987,7 @@ var main_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				collapse: isCollapse(collapseState, keys),
 				hasCreate: true,
 				onCollapse: (val) => {
-					setCollapse$1(collapseState, keys, val);
+					setCollapse(collapseState, keys, val);
 				},
 				onMenu: (x, y) => {
 					eventBus.emit("propTreeMenu", {
@@ -3302,7 +3016,7 @@ var main_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						hasDelete: true,
 						index: i,
 						onCollapse: (val) => {
-							setCollapse$1(collapseState, [...keys, i], val);
+							setCollapse(collapseState, [...keys, i], val);
 						},
 						onMenu: (x, y) => {
 							eventBus.emit("propTreeMenu", {
@@ -3346,7 +3060,7 @@ var main_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				collapse: isCollapse(collapseState, keys),
 				hasDelete: arrayIndex !== void 0 && !isBranch,
 				onCollapse: (val) => {
-					setCollapse$1(collapseState, keys, val);
+					setCollapse(collapseState, keys, val);
 				},
 				onMenu: (x, y) => {
 					eventBus.emit("propTreeMenu", {
@@ -3393,7 +3107,7 @@ var main_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				collapse: isCollapse(collapseState, keys),
 				hasCreate: true,
 				onCollapse: (val) => {
-					setCollapse$1(collapseState, keys, val);
+					setCollapse(collapseState, keys, val);
 				},
 				onMenu: (x, y) => {
 					eventBus.emit("propTreeMenu", {
@@ -3559,8 +3273,8 @@ const install = (app) => {
 //#endregion
 //#region src/i18n/index.ts
 async function loadLocaleMessagePropTree(locale) {
-	if (locale === "en") return (await import("./i18n-en.l2rmrsld.js").then((n) => n.t)).default;
-	else if (locale === "zhHans") return (await import("./i18n-zhHans.mlbij4hp.js").then((n) => n.t)).default;
+	if (locale === "en") return (await import("./i18n-en.fevhb1gv.js").then((n) => n.t)).default;
+	else if (locale === "zhHans") return (await import("./i18n-zhHans.cro9uz6i.js").then((n) => n.t)).default;
 	else throw new Error(`invalid locale=${locale}`);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-prop-tree",
-  "version": "0.8.35",
+  "version": "0.8.38",
   "files": [
     "dist"
   ],
@@ -35,7 +35,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
-    "x-config-lib": "^0.1.6",
+    "x-config-lib": "^0.1.8",
     "x-config-oxfmt": "^0.1.6",
     "x-config-oxlint": "^0.1.7"
   },
@@ -43,11 +43,10 @@
     "vue": "^3.5.42",
     "vue-i18n": "^11.4.10",
     "vuetify": "^4.2.1",
-    "x-block-lib": "^0.11.11",
-    "x-error-lib": "^0.6.5",
-    "x-essential-lib": "^0.10.42",
-    "x-group-list": "^0.4.19",
-    "x-runtime-lib": "^0.10.5",
+    "x-block-lib": "^0.11.12",
+    "x-essential-lib": "^0.11.11",
+    "x-group-list": "^0.5.2",
+    "x-runtime-lib": "^0.10.7",
     "x-state-lib": "^0.4.5"
   }
 }