x-prop-tree 0.8.10 → 0.8.12

package/dist/index.js

@@ -1,13 +1,13 @@
 import { a as e, i as t, n, r, t as i } from "./vendor.jothdq5o.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, h as m, inject as h, isRef as g, mergeModels as _, mergeProps as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, onUnmounted as S, openBlock as C, provide as w, ref as T, renderList as E, renderSlot as ee, resolveComponent as D, resolveDirective as O, toDisplayString as k, unref as A, useId as j, useModel as M, useTemplateRef as te, watch as N, watchEffect as P, withCtx as F, withDirectives as I, withKeys as L, withModifiers as R } from "vue";
-import { getElement as ne, getItems as re, getPropertyDefault as z, getPropertyDefaultArray as ie, getTag as ae, getTypes as oe, isHexColor as se, isThemeColor as ce, makeSlotId as le, parsePercent as ue, parsePixel as de, pkgs as fe, themeColors as pe } from "x-runtime-lib";
-import { useI18n as B } from "vue-i18n";
-import { eventBus as V, globalObjects as me, injectDark as he, injectLocale as ge, openNumberDlg as _e, openPromptDlg as ve, useColor as H, useSystem as U, useViewStack as W } from "x-essential-lib";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, h as m, inject as h, isRef as g, mergeModels as _, mergeProps as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, onUnmounted as S, openBlock as C, provide as w, ref as T, renderList as E, renderSlot as D, resolveComponent as O, resolveDirective as k, toDisplayString as A, unref as j, useId as M, useModel as N, useTemplateRef as ee, watch as P, watchEffect as F, withCtx as I, withDirectives as L, withKeys as R, withModifiers as z } from "vue";
+import { getElement as te, getItems as ne, getPropertyDefault as B, getPropertyDefaultArray as re, getTag as ie, getTypes as ae, isHexColor as oe, isThemeColor as se, makeSlotId as ce, parsePercent as le, parsePixel as ue, pkgs as de, rules as fe, themeColors as pe } from "x-runtime-lib";
+import { useI18n as V } from "vue-i18n";
+import { eventBus as H, globalObjects as me, injectDark as he, injectLocale as ge, openNumberDlg as _e, openPromptDlg as ve, useColor as U, useSystem as W, useViewStack as G } from "x-essential-lib";
 import { globalState as ye } from "x-state-lib";
 import { useDisplay as be } from "vuetify";
 import { XBlockly as xe } from "x-block-lib";
 //#region src/utils/common.ts
-function G(e, t) {
+function K(e, t) {
 	let n = {
 		key: "",
 		name: "",
@@ -20,7 +20,7 @@ function G(e, t) {
 	}
 	return n;
 }
-function K(e, t) {
+function q(e, t) {
 	let n = e;
 	for (let e of t) {
 		if (!n) throw Error("target must be valid");
@@ -31,39 +31,39 @@ function K(e, t) {
 function Se(e, n, r, i, a, o) {
 	if (i !== void 0 && !a) {
 		if (!(r[i] instanceof Array)) {
-			let a = ie(n);
+			let a = re(n);
 			t(a, r[i]) || (r[i] = a, o(e, r[i]));
 		}
 		return r[i];
 	} else {
 		if (!(r[n.key] instanceof Array)) {
-			let i = ie(n);
+			let i = re(n);
 			t(i, r[n.key]) || (r[n.key] = i, o(e, r[n.key]));
 		}
 		return r[n.key];
 	}
 }
-function q(e, n, r, i, a, o) {
+function J(e, n, r, i, a, o) {
 	if (i !== void 0 && !a) {
 		if (r[i] === void 0) {
-			let a = z(n);
+			let a = B(n);
 			t(a, r[i]) || (r[i] = a, o(e, r[i]));
 		}
 		return r[i];
 	} else {
 		if (r[n.key] === void 0) {
-			let i = z(n);
+			let i = B(n);
 			t(i, r[n.key]) || (r[n.key] = i, o(e, r[n.key]));
 		}
 		return r[n.key];
 	}
 }
-function J(e, t, n, r, i, a, o) {
+function Y(e, t, n, r, i, a, o) {
 	i !== void 0 && !a ? r !== n[i] && (n[i] = r, o(e, n[i])) : r !== n[t.key] && (n[t.key] = r, o(e, n[t.key]));
 }
 //#endregion
 //#region src/utils/collapseState.ts
-function Y(e, t) {
+function X(e, t) {
 	let n = e.value;
 	for (let e of t) {
 		if (!n.children[e]) return !0;
@@ -71,7 +71,7 @@ function Y(e, t) {
 	}
 	return n.collapse;
 }
-function X(e, t, n) {
+function Z(e, t, n) {
 	let r = e.value;
 	for (let e of t) r.children[e] || (r.children[e] = {
 		collapse: !0,
@@ -94,16 +94,16 @@ var Ce = (e, t) => {
 function Te(e) {
 	return we.find((n) => t(e, n));
 }
-function Z(t, n, r, i, a, o) {
+function Ee(t, n, r, i, a, o) {
 	return t = e(t), a === void 0 ? t.push(n.key) : (t.push(a), o && t.push(n.key)), t?.[0] === "runtime" ? {
 		change: !1,
 		warning: !1
 	} : Te(t) ? (i.change = !1, i.warning = !1, {
 		change: i.change,
 		warning: i.warning
-	}) : n.ui ? n.array && i.children ? Oe(t, n, r, i, a, o) : ke(n, r, i, a, o) : n.array ? Ee(t, n, r, i, a, o) : De(t, n, r, i, a, o);
+	}) : n.ui ? n.array && i.children ? ke(t, n, r, i, a, o) : Ae(n, r, i, a, o) : n.array ? De(t, n, r, i, a, o) : Oe(t, n, r, i, a, o);
 }
-function Ee(e, n, r, i, a, o) {
+function De(e, n, r, i, a, o) {
 	if (n.ui) throw Error("execPropertyBranchArray property ui must be invalid");
 	if (!n.array) throw Error("execPropertyBranchArray property array must be valid");
 	let s;
@@ -124,16 +124,16 @@ function Ee(e, n, r, i, a, o) {
 				warning: !1,
 				children: {}
 			};
-			let { change: n, warning: o } = Z(e, a, s[t], r.children[a.key], t, !0);
+			let { change: n, warning: o } = Ee(e, a, s[t], r.children[a.key], t, !0);
 			!r.change && n && (r.change = n), !r.change && o && (r.warning = o), !i.change && r.change && (i.change = r.change), !i.warning && r.warning && (i.warning = r.warning);
 		}
 	}
-	return i.change ||= !t(s, ie(n)), {
+	return i.change ||= !t(s, re(n)), {
 		change: i.change,
 		warning: i.warning
 	};
 }
-function De(e, t, n, r, i, a) {
+function Oe(e, t, n, r, i, a) {
 	if (t.ui) throw Error("execPropertyBranchScalar property ui must be invalid");
 	if (t.array) throw Error("execPropertyBranchScalar property array must be invalid");
 	let o;
@@ -148,7 +148,7 @@ function De(e, t, n, r, i, a) {
 			warning: !1,
 			children: {}
 		};
-		let { change: a, warning: s } = Z(e, i, o, r.children[i.key], void 0, !1);
+		let { change: a, warning: s } = Ee(e, i, o, r.children[i.key], void 0, !1);
 		!r.change && a && (r.change = a), !r.warning && s && (r.warning = s);
 	}
 	return {
@@ -156,7 +156,7 @@ function De(e, t, n, r, i, a) {
 		warning: r.change
 	};
 }
-function Oe(e, n, r, i, a, o) {
+function ke(e, n, r, i, a, o) {
 	if (!n.ui) throw Error("execPropertyLeafArray property ui must be valid");
 	if (!n.array) throw Error("execPropertyLeafArray property aray must be valid");
 	let s;
@@ -170,23 +170,23 @@ function Oe(e, n, r, i, a, o) {
 			warning: !1,
 			children: {}
 		};
-		let { change: r, warning: a } = Z(e, n, s, i.children[t], t, !1);
+		let { change: r, warning: a } = Ee(e, n, s, i.children[t], t, !1);
 		!i.change && r && (i.change = r), !i.warning && a && (i.warning = a);
 	}
-	return i.change ||= !t(s, ie(n)), {
+	return i.change ||= !t(s, re(n)), {
 		change: i.change,
 		warning: i.warning
 	};
 }
-function ke(e, n, r, i, a) {
+function Ae(e, n, r, i, a) {
 	if (!e.ui) throw Error("execPropertyLeafScalar property ui must be valid");
 	let o;
-	return o = i !== void 0 && !a ? n[i] : n[e.key], r.change = !t(o, z(e)), {
+	return o = i !== void 0 && !a ? n[i] : n[e.key], r.change = !t(o, B(e)), {
 		change: r.change,
 		warning: r.warning
 	};
 }
-function Ae(e, t, n) {
+function je(e, t, n) {
 	if (t.length <= 0 || !n) {
 		e.value = {
 			change: !1,
@@ -206,7 +206,7 @@ function Ae(e, t, n) {
 			warning: !1,
 			children: {}
 		};
-		r.children[e.key] = t, Z([], e, n, t, void 0, !1);
+		r.children[e.key] = t, Ee([], e, n, t, void 0, !1);
 	}
 	e.value = r;
 }
@@ -220,87 +220,87 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/utils/provideInject.ts
-var je = Symbol(), Me = Symbol(), Ne = Symbol(), Pe = Symbol(), Fe = Symbol(), Ie = Symbol(), Le = Symbol(), Re = Symbol(), ze = Symbol(), Be = Symbol(), Ve = Symbol();
-function He(e) {
-	w(je, e);
-}
-function Ue() {
-	return h(je);
-}
-function We(e) {
+var Me = Symbol(), Ne = Symbol(), Pe = Symbol(), Fe = Symbol(), Ie = Symbol(), Le = Symbol(), Re = Symbol(), ze = Symbol(), Be = Symbol(), Ve = Symbol(), He = Symbol();
+function Ue(e) {
 	w(Me, e);
 }
-function Ge() {
+function We() {
 	return h(Me);
 }
-function Ke(e) {
+function Ge(e) {
 	w(Ne, e);
 }
-function qe() {
+function Ke() {
 	return h(Ne);
 }
-function Je(e) {
+function qe(e) {
 	w(Pe, e);
 }
-function Ye() {
+function Je() {
 	return h(Pe);
 }
-function Xe(e) {
+function Ye(e) {
 	w(Fe, e);
 }
-function Ze() {
+function Xe() {
 	return h(Fe);
 }
-function Qe(e) {
+function Ze(e) {
 	w(Ie, e);
 }
-function $e() {
+function Qe() {
 	return h(Ie);
 }
-function et(e) {
+function $e(e) {
 	w(Le, e);
 }
-function tt() {
+function et() {
 	return h(Le);
 }
-function nt(e) {
+function tt(e) {
 	w(Re, e);
 }
-function $() {
+function nt() {
 	return h(Re);
 }
 function rt(e) {
 	w(ze, e);
 }
-function it() {
+function $() {
 	return h(ze);
 }
-function at(e) {
+function it(e) {
 	w(Be, e);
 }
-function ot() {
+function at() {
 	return h(Be);
 }
-function st(e) {
+function ot(e) {
 	w(Ve, e);
 }
-function ct() {
+function st() {
 	return h(Ve);
 }
+function ct(e) {
+	w(He, e);
+}
+function lt() {
+	return h(He);
+}
 //#endregion
 //#region src/components/menu/index.vue
-var lt = /* @__PURE__ */ p({
+var ut = /* @__PURE__ */ p({
 	__name: "index",
 	setup(e) {
-		let { t } = B(), n = Ye(), r = Ze(), i = tt(), c = $(), u = T(0), p = T(0), m = T([]), h = o(() => [u.value, p.value]), _ = (e) => {
+		let { t } = V(), n = Xe(), r = Qe(), i = nt(), c = $(), u = T(0), p = T(0), m = T([]), h = o(() => [u.value, p.value]), _ = (e) => {
 			!(m.value.length <= 0 || !Q(i.value, m.value)) && e.push({
 				title: t("x-prop-tree.reset"),
 				func: () => {
-					let e = G(n.value, m.value);
+					let e = K(n.value, m.value);
 					if (e) if (e.ui) {
-						let t = K(r.value, m.value.slice(0, -1));
+						let t = q(r.value, m.value.slice(0, -1));
 						if (!t) return;
-						t[m.value[m.value.length - 1]] = z(e), c(m.value, t[m.value[m.value.length - 1]]);
+						t[m.value[m.value.length - 1]] = B(e), c(m.value, t[m.value[m.value.length - 1]]);
 					} else if (e.array) {
 						let t = m.value[m.value.length - 1];
 						if (t === void 0) {
@@ -308,21 +308,21 @@ var lt = /* @__PURE__ */ p({
 							return;
 						}
 						if (typeof t == "string") {
-							let t = K(r.value, m.value.slice(0, -1));
+							let t = q(r.value, m.value.slice(0, -1));
 							if (!t) return;
-							t[m.value[m.value.length - 1]] = z(e), c(m.value, t[m.value[m.value.length - 1]]);
+							t[m.value[m.value.length - 1]] = B(e), c(m.value, t[m.value[m.value.length - 1]]);
 						} else {
-							let t = K(r.value, m.value);
+							let t = q(r.value, m.value);
 							if (!t) return;
 							e.children.forEach((n) => {
-								t[n.key] = z(e), c([...m.value, n.key], t[n.key]);
+								t[n.key] = B(e), c([...m.value, n.key], t[n.key]);
 							});
 						}
 					} else {
-						let t = K(r.value, m.value);
+						let t = q(r.value, m.value);
 						if (!t) return;
 						e.children.forEach((n) => {
-							t[n.key] = z(e), c([...m.value, n.key], t[n.key]);
+							t[n.key] = B(e), c([...m.value, n.key], t[n.key]);
 						});
 					}
 				}
@@ -331,7 +331,7 @@ var lt = /* @__PURE__ */ p({
 			e.push({
 				title: t("x-prop-tree.copy"),
 				func: () => {
-					let e = G(n.value, m.value), t = K(r.value, m.value);
+					let e = K(n.value, m.value), t = q(r.value, m.value);
 					localStorage.setItem("propTreeCopy", JSON.stringify({
 						property: e,
 						object: t
@@ -345,7 +345,7 @@ var lt = /* @__PURE__ */ p({
 				try {
 					let { property: t } = JSON.parse(e);
 					if (!t) return !1;
-					let r = G(n.value, m.value);
+					let r = K(n.value, m.value);
 					return r ? Ce(t, r) : !1;
 				} catch (e) {
 					console.error(e);
@@ -358,7 +358,7 @@ var lt = /* @__PURE__ */ p({
 					if (!r()) return;
 					let e = localStorage.getItem("propTreeCopy");
 					if (e) try {
-						let { object: t } = JSON.parse(e), r = G(n.value, m.value);
+						let { object: t } = JSON.parse(e), r = K(n.value, m.value);
 						console.log(t, r);
 					} catch (e) {
 						console.error(e);
@@ -368,26 +368,26 @@ var lt = /* @__PURE__ */ p({
 		}, b = o(() => {
 			let e = [];
 			return _(e), v(e), y(e), e;
-		}), { open: x } = W("propTreeMenu", (e) => {
+		}), { open: x } = G("propTreeMenu", (e) => {
 			u.value = e.x, p.value = e.y, m.value = e.keys;
 		});
 		return (e, t) => {
-			let n = D("v-list-item-title"), r = D("v-list-item"), i = D("v-list"), o = D("v-menu");
+			let n = O("v-list-item-title"), r = O("v-list-item"), i = O("v-list"), o = O("v-menu");
 			return C(), s(o, {
-				modelValue: A(x),
+				modelValue: j(x),
 				"onUpdate:modelValue": t[0] ||= (e) => g(x) ? x.value = e : null,
 				"location-strategy": "connected",
 				scrim: "transparent",
 				target: h.value
 			}, {
-				default: F(() => [f(i, null, {
-					default: F(() => [(C(!0), l(a, null, E(b.value, (e, t) => (C(), s(r, {
+				default: I(() => [f(i, null, {
+					default: I(() => [(C(!0), l(a, null, E(b.value, (e, t) => (C(), s(r, {
 						key: t,
 						link: "",
 						onClick: e.func
 					}, {
-						default: F(() => [f(n, null, {
-							default: F(() => [d(k(e.title), 1)]),
+						default: I(() => [f(n, null, {
+							default: I(() => [d(A(e.title), 1)]),
 							_: 2
 						}, 1024)]),
 						_: 2
@@ -398,7 +398,7 @@ var lt = /* @__PURE__ */ p({
 			}, 8, ["modelValue", "target"]);
 		};
 	}
-}), ut = { style: { pointerEvents: "none" } }, dt = /* @__PURE__ */ p({
+}), dt = { style: { pointerEvents: "none" } }, ft = /* @__PURE__ */ p({
 	__name: "index",
 	props: {
 		title: {},
@@ -420,7 +420,7 @@ var lt = /* @__PURE__ */ p({
 		"delete"
 	],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = t, a = T(!1), d = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = t, a = T(!1), d = o(() => ({
 			background: a.value ? r.value : n.value,
 			height: "36px",
 			marginBottom: "1px",
@@ -431,12 +431,12 @@ var lt = /* @__PURE__ */ p({
 			i("menu", e.clientX, e.clientY);
 		};
 		return (t, n) => {
-			let r = D("v-icon"), o = D("v-spacer"), h = D("v-btn"), g = O("ripple");
-			return I((C(), l("div", {
+			let r = O("v-icon"), o = O("v-spacer"), h = O("v-btn"), g = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(d.value),
 				onClick: p,
-				onContextmenu: R(m, ["self", "prevent"]),
+				onContextmenu: z(m, ["self", "prevent"]),
 				onMouseout: n[2] ||= (e) => a.value = !1,
 				onMouseover: n[3] ||= (e) => a.value = !0
 			}, [
@@ -444,7 +444,7 @@ var lt = /* @__PURE__ */ p({
 					class: "mr-1",
 					icon: e.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
 				}, null, 8, ["icon"]),
-				u("span", ut, k(e.title), 1),
+				u("span", dt, A(e.title), 1),
 				f(o),
 				e.hasCreate ? (C(), s(h, {
 					key: 0,
@@ -452,7 +452,7 @@ var lt = /* @__PURE__ */ p({
 					density: "compact",
 					icon: "mdi-plus",
 					variant: "text",
-					onClick: n[0] ||= R((e) => i("create"), ["stop"])
+					onClick: n[0] ||= z((e) => i("create"), ["stop"])
 				})) : c("", !0),
 				e.hasDelete ? (C(), s(h, {
 					key: 1,
@@ -460,7 +460,7 @@ var lt = /* @__PURE__ */ p({
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: n[1] ||= R((t) => i("delete", e.index), ["stop"])
+					onClick: n[1] ||= z((t) => i("delete", e.index), ["stop"])
 				})) : c("", !0)
 			], 36)), [[g]]);
 		};
@@ -468,14 +468,14 @@ var lt = /* @__PURE__ */ p({
 });
 //#endregion
 //#region src/composables/adaptSlotList/index.ts
-function ft() {
-	let e = Ue(), t = Ge(), n = qe(), { i18n: a } = me, o = T([]);
-	st(o);
+function pt() {
+	let e = We(), t = Ke(), n = Je(), { i18n: a } = me, o = T([]);
+	ct(o);
 	let s = () => {
 		if (!e.value || !t.value || !n.value) return [];
-		let s = fe[e.value];
+		let s = de[e.value];
 		if (!s) return console.assert(!1, `invalid version=${e.value}`), [];
-		let c = ae(t.value, n.value), l = [];
+		let c = ie(t.value, n.value), l = [];
 		for (let e = 0; e < s.groups[c].length; e++) {
 			let t = s.groups[c][e], n = r(o, t.key);
 			l.push({
@@ -488,9 +488,9 @@ function ft() {
 			});
 			let i = 0;
 			for (let e of t.items) {
-				let n = ne(e);
+				let n = te(e);
 				if (n && !n.internal && n.slots) for (let e of n.slots) {
-					let r = le("elementSlot", n.key, e.key), o = `${a.global.t(n.name)} / ${a.global.t(e.name)}`;
+					let r = ce("elementSlot", n.key, e.key), o = `${a.global.t(n.name)} / ${a.global.t(e.name)}`;
 					l.push({
 						id: r,
 						type: 1,
@@ -516,7 +516,7 @@ function ft() {
 		for (let e of u.comps) {
 			let t = d[e.id];
 			if (t && t.meta.slots) for (let n of t.meta.slots) {
-				let t = le("customSlot", e.id, n.id), r = `${e.name} / ${n.name}`;
+				let t = ce("customSlot", e.id, n.id), r = `${e.name} / ${n.name}`;
 				l.push({
 					id: t,
 					type: 1,
@@ -540,7 +540,7 @@ function ft() {
 		u();
 	}), b(() => {
 		d();
-	}), N([
+	}), P([
 		e,
 		t,
 		n
@@ -550,9 +550,9 @@ function ft() {
 }
 //#endregion
 //#region src/composables/compList/index.ts
-function pt() {
+function mt() {
 	let e = T([]);
-	rt(e);
+	it(e);
 	let t = () => {
 		let { activeApp: t, depends: n } = ye.app, r = [];
 		for (let { id: n, name: i, position: a } of t.compGroups) {
@@ -588,9 +588,9 @@ function pt() {
 }
 //#endregion
 //#region src/composables/slotList/index.ts
-function mt() {
+function ht() {
 	let e = T([]);
-	at(e);
+	ot(e);
 	let t = () => {
 		let { activeObject: e, activeComp: t } = ye.app;
 		if (e.type !== "comp" || !t.meta.slots) return [];
@@ -617,7 +617,7 @@ function mt() {
 }
 //#endregion
 //#region src/components/values/adaptSlot/adaptSlotList/group.vue?vue&type=script&setup=true&lang.ts
-var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text-grey ml-1" }, _t = /* @__PURE__ */ p({
+var gt = { class: "text-label-large ml-1" }, _t = { class: "text-body-small text-grey ml-1" }, vt = /* @__PURE__ */ p({
 	__name: "group",
 	props: {
 		id: {},
@@ -627,15 +627,15 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["x-click"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = e, a = t, s = T(!1), c = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = e, a = t, s = T(!1), c = o(() => ({
 			background: s.value ? r.value : n.value,
 			height: "30px",
 			marginTop: "1px",
 			userSelect: "none"
 		}));
 		return (e, t) => {
-			let n = D("v-icon"), r = O("ripple");
-			return I((C(), l("div", {
+			let n = O("v-icon"), r = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(c.value),
 				onClick: t[0] ||= (e) => a("x-click", i.id),
@@ -646,12 +646,12 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					icon: i.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
 					size: "small"
 				}, null, 8, ["icon"]),
-				u("span", ht, k(i.title), 1),
-				u("span", gt, k(i.count), 1)
+				u("span", gt, A(i.title), 1),
+				u("span", _t, A(i.count), 1)
 			], 36)), [[r]]);
 		};
 	}
-}), vt = { class: "text-body-large ml-6" }, yt = /* @__PURE__ */ p({
+}), yt = { class: "text-body-large ml-6" }, bt = /* @__PURE__ */ p({
 	__name: "item",
 	props: {
 		id: {},
@@ -659,27 +659,27 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["x-click"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = t, a = T(!1), s = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = t, a = T(!1), s = o(() => ({
 			background: a.value ? r.value : n.value,
 			height: "48px",
 			marginTop: "1px",
 			userSelect: "none"
 		}));
 		return (t, n) => {
-			let r = O("ripple");
-			return I((C(), l("div", {
+			let r = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(s.value),
 				onClick: n[0] ||= (t) => i("x-click", e.id),
 				onMouseout: n[1] ||= (e) => a.value = !1,
 				onMouseover: n[2] ||= (e) => a.value = !0
-			}, [u("span", vt, k(e.title), 1)], 36)), [[r]]);
+			}, [u("span", yt, A(e.title), 1)], 36)), [[r]]);
 		};
 	}
-}), bt = { key: 0 }, xt = {
+}), xt = { key: 0 }, St = {
 	key: 1,
 	class: "text-body-medium text-grey ml-3"
-}, St = /* @__PURE__ */ p({
+}, Ct = /* @__PURE__ */ p({
 	__name: "index",
 	props: {
 		modelValue: {},
@@ -692,13 +692,13 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: t } = U(), i = M(e, "modelValue"), o = M(e, "open"), u = ct(), d = (e) => {
+		let { nameList: t } = W(), i = N(e, "modelValue"), o = N(e, "open"), u = lt(), d = (e) => {
 			let t = r(u, e);
 			t && n(u, e, !t.collapse);
 		}, f = (e) => {
 			i.value = e, o.value = !1;
 		};
-		return (e, n) => A(u).length > 0 ? (C(), l("div", bt, [(C(!0), l(a, null, E(A(u), (e) => (C(), l(a, { key: e.id }, [e.type === 0 ? (C(), s(_t, {
+		return (e, n) => j(u).length > 0 ? (C(), l("div", xt, [(C(!0), l(a, null, E(j(u), (e) => (C(), l(a, { key: e.id }, [e.type === 0 ? (C(), s(vt, {
 			key: 0,
 			id: e.id,
 			collapse: e.collapse,
@@ -710,18 +710,18 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			"collapse",
 			"count",
 			"title"
-		])) : c("", !0), e.type === 1 && e.show ? (C(), s(yt, {
+		])) : c("", !0), e.type === 1 && e.show ? (C(), s(bt, {
 			key: 1,
 			id: e.id,
 			title: e.name,
 			onXClick: f
-		}, null, 8, ["id", "title"])) : c("", !0)], 64))), 128))])) : (C(), l("div", xt, k(A(t)([
+		}, null, 8, ["id", "title"])) : c("", !0)], 64))), 128))])) : (C(), l("div", St, A(j(t)([
 			"x-prop-tree.no",
 			"x-prop-tree.adapt",
 			"x-prop-tree.slot"
 		])), 1));
 	}
-}), Ct = { class: "text-body-large" }, wt = /* @__PURE__ */ p({
+}), wt = { class: "text-body-large" }, Tt = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -738,7 +738,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), i = be(), { sysBarAvail: a, nameList: l } = U(), { backgroundColor1: p } = H(), m = M(e, "modelValue"), h = t, _ = ct(), b = o(() => {
+		let { t: n } = V(), i = be(), { sysBarAvail: a, nameList: l } = W(), { backgroundColor1: p } = U(), m = N(e, "modelValue"), h = t, _ = lt(), b = o(() => {
 			let e = "100%";
 			return i.mdAndUp.value && (e = "400px"), {
 				background: p.value,
@@ -755,26 +755,26 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			if (!m.value) return n("x-runtime-lib.notSet");
 			let e = r(_, m.value);
 			return e ? e.name : n("x-runtime-lib.slotNotAvail");
-		}), { open: E } = W(`propTreeAdaptSlotSelectDlg${j()}`);
+		}), { open: E } = G(`propTreeAdaptSlotSelectDlg${M()}`);
 		return S(() => {
 			E.value = !1;
 		}), (t, n) => {
-			let r = D("v-btn"), i = D("v-sheet"), o = D("v-dialog");
+			let r = O("v-btn"), i = O("v-sheet"), o = O("v-dialog");
 			return C(), s(o, {
-				modelValue: A(E),
+				modelValue: j(E),
 				"onUpdate:modelValue": n[6] ||= (e) => g(E) ? E.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: n[7] ||= L(R((e) => E.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: n[7] ||= R(z((e) => E.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: F(({ props: t }) => [f(r, v(t, {
+				activator: I(({ props: t }) => [f(r, v(t, {
 					block: "",
 					density: "comfortable",
 					readonly: e.readonly
 				}), {
-					default: F(() => [d(k(T.value), 1)]),
+					default: I(() => [d(A(T.value), 1)]),
 					_: 1
 				}, 16, ["readonly"]), e.hasDelete ? (C(), s(r, {
 					key: 0,
@@ -782,17 +782,17 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: n[0] ||= R((e) => h("delete"), ["stop"])
+					onClick: n[0] ||= z((e) => h("delete"), ["stop"])
 				})) : c("", !0)]),
-				default: F(() => [u("div", {
+				default: I(() => [u("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: n[4] ||= R((e) => E.value = !1, ["self"]),
-					onContextmenu: n[5] ||= R((e) => E.value = !1, ["self", "prevent"])
+					onClick: n[4] ||= z((e) => E.value = !1, ["self"]),
+					onContextmenu: n[5] ||= z((e) => E.value = !1, ["self", "prevent"])
 				}, [u("div", {
 					class: "elevation-2",
 					style: y(b.value)
 				}, [
-					A(a) ? (C(), s(i, {
+					j(a) ? (C(), s(i, {
 						key: 0,
 						color: "transparent",
 						height: 24
@@ -802,12 +802,12 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 						color: "transparent",
 						height: 48
 					}, {
-						default: F(() => [f(r, {
+						default: I(() => [f(r, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
 							onClick: n[1] ||= (e) => E.value = !1
-						}), u("span", Ct, k(A(l)([
+						}), u("span", wt, A(j(l)([
 							"x-prop-tree.select",
 							"x-prop-tree.adapt",
 							"x-prop-tree.slot"
@@ -817,10 +817,10 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					u("div", {
 						class: "overflow-y-auto",
 						style: y(x.value)
-					}, [f(St, {
+					}, [f(Ct, {
 						modelValue: m.value,
 						"onUpdate:modelValue": n[2] ||= (e) => m.value = e,
-						open: A(E),
+						open: j(E),
 						"onUpdate:open": n[3] ||= (e) => g(E) ? E.value = e : null
 					}, null, 8, ["modelValue", "open"]), u("div", { style: y(w.value) }, null, 4)], 4)
 				], 4)], 32)]),
@@ -828,7 +828,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}, 8, ["modelValue"]);
 		};
 	}
-}), Tt = { class: "text-label-large ml-1" }, Et = { class: "text-body-small text-grey ml-1" }, Dt = /* @__PURE__ */ p({
+}), Et = { class: "text-label-large ml-1" }, Dt = { class: "text-body-small text-grey ml-1" }, Ot = /* @__PURE__ */ p({
 	__name: "group",
 	props: {
 		id: {},
@@ -838,15 +838,15 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["x-click"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = e, a = t, s = T(!1), c = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = e, a = t, s = T(!1), c = o(() => ({
 			background: s.value ? r.value : n.value,
 			height: "30px",
 			marginTop: "1px",
 			userSelect: "none"
 		}));
 		return (e, t) => {
-			let n = D("v-icon"), r = O("ripple");
-			return I((C(), l("div", {
+			let n = O("v-icon"), r = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(c.value),
 				onClick: t[0] ||= (e) => a("x-click", i.id),
@@ -857,12 +857,12 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					icon: i.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
 					size: "small"
 				}, null, 8, ["icon"]),
-				u("span", Tt, k(i.title), 1),
-				u("span", Et, k(i.count), 1)
+				u("span", Et, A(i.title), 1),
+				u("span", Dt, A(i.count), 1)
 			], 36)), [[r]]);
 		};
 	}
-}), Ot = { class: "text-body-large ml-6" }, kt = /* @__PURE__ */ p({
+}), kt = { class: "text-body-large ml-6" }, At = /* @__PURE__ */ p({
 	__name: "item",
 	props: {
 		id: {},
@@ -870,27 +870,27 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["x-click"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = e, a = t, s = T(!1), c = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = e, a = t, s = T(!1), c = o(() => ({
 			background: s.value ? r.value : n.value,
 			height: "48px",
 			marginTop: "1px",
 			userSelect: "none"
 		}));
 		return (e, t) => {
-			let n = O("ripple");
-			return I((C(), l("div", {
+			let n = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(c.value),
 				onClick: t[0] ||= (e) => a("x-click", i.id),
 				onMouseout: t[1] ||= (e) => s.value = !1,
 				onMouseover: t[2] ||= (e) => s.value = !0
-			}, [u("span", Ot, k(i.title), 1)], 36)), [[n]]);
+			}, [u("span", kt, A(i.title), 1)], 36)), [[n]]);
 		};
 	}
-}), At = { key: 0 }, jt = {
+}), jt = { key: 0 }, Mt = {
 	key: 1,
 	class: "text-body-medium text-grey ml-3"
-}, Mt = /* @__PURE__ */ p({
+}, Nt = /* @__PURE__ */ p({
 	__name: "index",
 	props: {
 		modelValue: {},
@@ -903,13 +903,13 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: t } = U(), i = M(e, "modelValue"), o = M(e, "open"), u = it(), d = (e) => {
+		let { nameList: t } = W(), i = N(e, "modelValue"), o = N(e, "open"), u = at(), d = (e) => {
 			let t = r(u, e);
 			t && n(u, e, !t.collapse);
 		}, f = (e) => {
-			i.value = e, o.value = !1, V.emit("refreshDepends");
+			i.value = e, o.value = !1, H.emit("refreshDepends");
 		};
-		return (e, n) => A(u).length > 0 ? (C(), l("div", At, [(C(!0), l(a, null, E(A(u), (e) => (C(), l(a, { key: e.id }, [e.type === 0 ? (C(), s(Dt, {
+		return (e, n) => j(u).length > 0 ? (C(), l("div", jt, [(C(!0), l(a, null, E(j(u), (e) => (C(), l(a, { key: e.id }, [e.type === 0 ? (C(), s(Ot, {
 			key: 0,
 			id: e.id,
 			collapse: e.collapse,
@@ -921,14 +921,14 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			"collapse",
 			"count",
 			"title"
-		])) : c("", !0), e.type === 1 && e.show ? (C(), s(kt, {
+		])) : c("", !0), e.type === 1 && e.show ? (C(), s(At, {
 			key: 1,
 			id: e.id,
 			title: e.name,
 			onXClick: f
-		}, null, 8, ["id", "title"])) : c("", !0)], 64))), 128))])) : (C(), l("div", jt, k(A(t)(["x-prop-tree.no", "x-prop-tree.comp"])), 1));
+		}, null, 8, ["id", "title"])) : c("", !0)], 64))), 128))])) : (C(), l("div", Mt, A(j(t)(["x-prop-tree.no", "x-prop-tree.comp"])), 1));
 	}
-}), Nt = { class: "text-body-large" }, Pt = /* @__PURE__ */ p({
+}), Pt = { class: "text-body-large" }, Ft = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -945,7 +945,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), i = be(), { sysBarAvail: a, nameList: l } = U(), { backgroundColor1: p } = H(), m = M(e, "modelValue"), h = t, _ = it(), b = o(() => {
+		let { t: n } = V(), i = be(), { sysBarAvail: a, nameList: l } = W(), { backgroundColor1: p } = U(), m = N(e, "modelValue"), h = t, _ = at(), b = o(() => {
 			let e = "100%";
 			return i.mdAndUp.value && (e = "400px"), {
 				background: p.value,
@@ -962,26 +962,26 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			if (!m.value) return n("x-runtime-lib.notSet");
 			let e = r(_, m.value);
 			return e ? e.name : n("x-runtime-lib.compNotAvail");
-		}), { open: E } = W(`propTreeCompSelectDlg${j()}`);
+		}), { open: E } = G(`propTreeCompSelectDlg${M()}`);
 		return S(() => {
 			E.value = !1;
 		}), (t, n) => {
-			let r = D("v-btn"), i = D("v-sheet"), o = D("v-dialog");
+			let r = O("v-btn"), i = O("v-sheet"), o = O("v-dialog");
 			return C(), s(o, {
-				modelValue: A(E),
+				modelValue: j(E),
 				"onUpdate:modelValue": n[6] ||= (e) => g(E) ? E.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: n[7] ||= L(R((e) => E.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: n[7] ||= R(z((e) => E.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: F(({ props: t }) => [f(r, v(t, {
+				activator: I(({ props: t }) => [f(r, v(t, {
 					block: "",
 					density: "comfortable",
 					readonly: e.readonly
 				}), {
-					default: F(() => [d(k(T.value), 1)]),
+					default: I(() => [d(A(T.value), 1)]),
 					_: 1
 				}, 16, ["readonly"]), e.hasDelete ? (C(), s(r, {
 					key: 0,
@@ -989,17 +989,17 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: n[0] ||= R((e) => h("delete"), ["stop"])
+					onClick: n[0] ||= z((e) => h("delete"), ["stop"])
 				})) : c("", !0)]),
-				default: F(() => [u("div", {
+				default: I(() => [u("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: n[4] ||= R((e) => E.value = !1, ["self"]),
-					onContextmenu: n[5] ||= R((e) => E.value = !1, ["self", "prevent"])
+					onClick: n[4] ||= z((e) => E.value = !1, ["self"]),
+					onContextmenu: n[5] ||= z((e) => E.value = !1, ["self", "prevent"])
 				}, [u("div", {
 					class: "elevation-2",
 					style: y(b.value)
 				}, [
-					A(a) ? (C(), s(i, {
+					j(a) ? (C(), s(i, {
 						key: 0,
 						color: "transparent",
 						height: 24
@@ -1009,21 +1009,21 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 						color: "transparent",
 						height: 48
 					}, {
-						default: F(() => [f(r, {
+						default: I(() => [f(r, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
 							onClick: n[1] ||= (e) => E.value = !1
-						}), u("span", Nt, k(A(l)(["x-prop-tree.select", "x-prop-tree.comp"])), 1)]),
+						}), u("span", Pt, A(j(l)(["x-prop-tree.select", "x-prop-tree.comp"])), 1)]),
 						_: 1
 					}),
 					u("div", {
 						class: "overflow-y-auto",
 						style: y(x.value)
-					}, [f(Mt, {
+					}, [f(Nt, {
 						modelValue: m.value,
 						"onUpdate:modelValue": n[2] ||= (e) => m.value = e,
-						open: A(E),
+						open: j(E),
 						"onUpdate:open": n[3] ||= (e) => g(E) ? E.value = e : null
 					}, null, 8, ["modelValue", "open"]), u("div", { style: y(w.value) }, null, 4)], 4)
 				], 4)], 32)]),
@@ -1031,7 +1031,57 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}, 8, ["modelValue"]);
 		};
 	}
-}), Ft = /* @__PURE__ */ p({
+}), It = { class: "d-flex justify-space-between align-center" }, Lt = /* @__PURE__ */ p({
+	__name: "index",
+	props: /* @__PURE__ */ _({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let { isMobile: n } = W(), r = N(e, "modelValue"), i = t, a = async (t) => {
+			if (!t || e.readonly || !n()) return;
+			let i = await ve({
+				title: "",
+				value: r.value
+			});
+			i !== void 0 && (r.value = i);
+		};
+		return (t, n) => {
+			let o = O("v-text-field"), u = O("v-btn"), d = k("ripple");
+			return C(), l("div", It, [L(f(o, {
+				modelValue: r.value,
+				"onUpdate:modelValue": n[0] ||= (e) => r.value = e,
+				density: "compact",
+				"hide-details": "",
+				readonly: e.readonly,
+				"single-line": "",
+				"onUpdate:focused": a
+			}, null, 8, ["modelValue", "readonly"]), [[
+				d,
+				void 0,
+				void 0,
+				{ stop: !0 }
+			]]), e.hasDelete ? (C(), s(u, {
+				key: 0,
+				class: "mx-2",
+				density: "compact",
+				icon: "mdi-minus",
+				variant: "text",
+				onClick: n[1] ||= z((e) => i("delete"), ["stop"])
+			})) : c("", !0)]);
+		};
+	}
+}), Rt = /* @__PURE__ */ p({
 	__name: "editor",
 	props: {
 		modelValue: { required: !0 },
@@ -1050,24 +1100,24 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 		"update:scale"
 	],
 	setup(e, { expose: t }) {
-		let n = M(e, "modelValue"), r = M(e, "lock"), i = M(e, "scale"), a = he(), o = ge(), c = Ue(), l = te("target"), u = () => {
+		let n = N(e, "modelValue"), r = N(e, "lock"), i = N(e, "scale"), a = he(), o = ge(), c = We(), l = ee("target"), u = () => {
 			let e = JSON.parse(n.value);
 			l.value?.load(e);
 		};
 		return t({ save: () => {
 			let e = l.value.save();
 			n.value = JSON.stringify(e, null, 2);
-		} }), (e, t) => (C(), s(A(xe), {
+		} }), (e, t) => (C(), s(j(xe), {
 			ref_key: "target",
 			ref: l,
 			lock: r.value,
 			"onUpdate:lock": t[0] ||= (e) => r.value = e,
 			scale: i.value,
 			"onUpdate:scale": t[1] ||= (e) => i.value = e,
-			dark: A(a),
-			locale: A(o),
+			dark: j(a),
+			locale: j(o),
 			type: "json",
-			version: A(c),
+			version: j(c),
 			onReady: u
 		}, null, 8, [
 			"lock",
@@ -1077,7 +1127,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			"version"
 		]));
 	}
-}), It = { class: "text-body-large" }, Lt = /* @__PURE__ */ p({
+}), zt = { class: "text-body-large" }, Bt = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1094,38 +1144,38 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), { sysBarAvail: r } = U(), { backgroundColor0: i, backgroundColor1: a, backgroundColor2: l } = H(), p = M(e, "modelValue"), m = t, h = T(!1), _ = T(1), b = o(() => {
+		let { t: n } = V(), { sysBarAvail: r } = W(), { backgroundColor0: i, backgroundColor1: a, backgroundColor2: l } = U(), p = N(e, "modelValue"), m = t, h = T(!1), _ = T(1), b = o(() => {
 			let e = 48;
 			return r.value && (e += 24), {
 				position: "relative",
 				background: a.value,
 				height: `calc(100% - ${e}px)`
 			};
-		}), x = o(() => n("x-prop-tree.jsonEditor")), { open: w } = W(`propTreejsonEditorDlg${j()}`);
+		}), x = o(() => n("x-prop-tree.jsonEditor")), { open: w } = G(`propTreejsonEditorDlg${M()}`);
 		S(() => {
 			w.value = !1;
 		});
-		let E = te("editor");
-		return N(w, (e) => {
+		let E = ee("editor");
+		return P(w, (e) => {
 			e || E.value?.save();
 		}), (t, n) => {
-			let a = D("v-btn"), o = D("v-sheet"), S = D("v-spacer"), T = D("v-dialog");
+			let a = O("v-btn"), o = O("v-sheet"), S = O("v-spacer"), T = O("v-dialog");
 			return C(), s(T, {
-				modelValue: A(w),
+				modelValue: j(w),
 				"onUpdate:modelValue": n[5] ||= (e) => g(w) ? w.value = e : null,
 				attach: "",
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "dialog-bottom-transition",
-				onKeydown: n[6] ||= L(R((e) => w.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: n[6] ||= R(z((e) => w.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: F(({ props: t }) => [f(a, v(t, {
+				activator: I(({ props: t }) => [f(a, v(t, {
 					block: "",
 					density: "comfortable",
 					readonly: e.readonly
 				}), {
-					default: F(() => [d(k(x.value), 1)]),
+					default: I(() => [d(A(x.value), 1)]),
 					_: 1
 				}, 16, ["readonly"]), e.hasDelete ? (C(), s(a, {
 					key: 0,
@@ -1133,37 +1183,37 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: n[0] ||= R((e) => m("delete"), ["stop"])
+					onClick: n[0] ||= z((e) => m("delete"), ["stop"])
 				})) : c("", !0)]),
-				default: F(() => [f(o, {
-					color: A(i),
+				default: I(() => [f(o, {
+					color: j(i),
 					height: "100%",
 					width: "100%"
 				}, {
-					default: F(() => [
-						A(r) ? (C(), s(o, {
+					default: I(() => [
+						j(r) ? (C(), s(o, {
 							key: 0,
-							color: A(l),
+							color: j(l),
 							height: 24
 						}, null, 8, ["color"])) : c("", !0),
 						f(o, {
 							class: "d-flex align-center px-2",
-							color: A(l),
+							color: j(l),
 							height: 48
 						}, {
-							default: F(() => [
+							default: I(() => [
 								f(a, {
 									density: "comfortable",
 									icon: "mdi-close",
 									variant: "text",
 									onClick: n[1] ||= (e) => w.value = !1
 								}),
-								u("span", It, k(x.value), 1),
+								u("span", zt, A(x.value), 1),
 								f(S)
 							]),
 							_: 1
 						}, 8, ["color"]),
-						u("div", { style: y(b.value) }, [f(Ft, {
+						u("div", { style: y(b.value) }, [f(Rt, {
 							ref_key: "editor",
 							ref: E,
 							modelValue: p.value,
@@ -1184,7 +1234,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}, 8, ["modelValue"]);
 		};
 	}
-}), Rt = { class: "d-flex justify-space-between align-center" }, zt = /* @__PURE__ */ p({
+}), Vt = { class: "d-flex justify-space-between align-center" }, Ht = /* @__PURE__ */ p({
 	__name: "color",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1201,21 +1251,21 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), r = M(e, "modelValue"), i = t, a = o(() => {
+		let { t: n } = V(), r = N(e, "modelValue"), i = t, a = o(() => {
 			let t = "100%";
 			return e.hasDelete && (t = "calc(100% - 37px)"), { width: t };
-		}), l = o(() => e.readonly), { open: p } = W(`propTreeColorPickerMenu${j()}`);
+		}), l = o(() => e.readonly), { open: p } = G(`propTreeColorPickerMenu${M()}`);
 		return S(() => {
 			p.value = !1;
 		}), (t, o) => {
-			let m = D("v-btn"), h = D("v-color-picker"), _ = D("v-menu");
+			let m = O("v-btn"), h = O("v-color-picker"), _ = O("v-menu");
 			return C(), s(_, {
-				modelValue: A(p),
+				modelValue: j(p),
 				"onUpdate:modelValue": o[2] ||= (e) => g(p) ? p.value = e : null,
 				"close-on-content-click": !1,
 				scrim: "transparent"
 			}, {
-				activator: F(({ props: t }) => [u("div", Rt, [u("div", {
+				activator: I(({ props: t }) => [u("div", Vt, [u("div", {
 					class: "flex-grow-1",
 					style: y(a.value)
 				}, [f(m, v(t, {
@@ -1224,7 +1274,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "comfortable",
 					disabled: l.value
 				}), {
-					default: F(() => [d(k(r.value ? r.value : A(n)("x-runtime-lib.notSet")), 1)]),
+					default: I(() => [d(A(r.value ? r.value : j(n)("x-runtime-lib.notSet")), 1)]),
 					_: 1
 				}, 16, ["color", "disabled"])], 4), e.hasDelete ? (C(), s(m, {
 					key: 0,
@@ -1232,9 +1282,9 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: o[0] ||= R((e) => i("delete"), ["stop"])
+					onClick: o[0] ||= z((e) => i("delete"), ["stop"])
 				})) : c("", !0)])]),
-				default: F(() => [f(h, {
+				default: I(() => [f(h, {
 					modelValue: r.value,
 					"onUpdate:modelValue": o[1] ||= (e) => r.value = e,
 					mode: "hexa",
@@ -1245,7 +1295,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}, 8, ["modelValue"]);
 		};
 	}
-}), Bt = { class: "d-flex justify-space-between align-center my-2" }, Vt = { class: "flex-grow-1" }, Ht = /* @__PURE__ */ p({
+}), Ut = { class: "d-flex justify-space-between align-center my-2" }, Wt = { class: "flex-grow-1" }, Gt = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1263,7 +1313,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), { isMobile: r } = U(), i = M(e, "modelValue"), a = t, d = o(() => oe(e.types)), p = T(""), m = o(() => {
+		let { t: n } = V(), { isMobile: r } = W(), i = N(e, "modelValue"), a = t, d = o(() => ae(e.types)), p = T(""), m = o(() => {
 			let e = [];
 			for (let { value: t, title: r } of d.value) e.push({
 				value: t,
@@ -1271,7 +1321,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			});
 			return e;
 		});
-		P(() => {
+		F(() => {
 			for (let { value: e, validator: t } of d.value) if (t(i.value)) {
 				p.value = e;
 				return;
@@ -1281,7 +1331,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 		let h = o(() => d.value.find((e) => e.value === p.value)), g = () => {
 			i.value = h.value?.default;
 		}, _ = T(0), v = async (e) => {
-			if (!e || !r() || !h.value || h.value.trait !== "pixel" && h.value.trait !== "percent") return;
+			if (!e || !r() || !h.value || h.value.trait !== "number" && h.value.trait !== "pixel" && h.value.trait !== "percent") return;
 			let t = await _e({
 				title: "",
 				value: _.value,
@@ -1292,15 +1342,15 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			});
 			t !== void 0 && (_.value = t);
 		};
-		P(() => {
-			h.value?.trait === "pixel" ? _.value = de(i.value) : h.value?.trait === "percent" && (_.value = ue(i.value));
-		}), N(_, (e) => {
-			h.value?.trait === "pixel" ? i.value = e + "px" : h.value?.trait === "percent" && (i.value = e + "%");
+		F(() => {
+			h.value?.trait === "number" ? _.value = i.value : h.value?.trait === "pixel" ? _.value = ue(i.value) : h.value?.trait === "percent" && (_.value = le(i.value));
+		}), P(_, (e) => {
+			h.value?.trait === "number" ? i.value = e : h.value?.trait === "pixel" ? i.value = e + "px" : h.value?.trait === "percent" && (i.value = e + "%");
 		});
 		let y = T("#ff00ff");
-		P(() => {
-			h.value?.trait === "hexColor" && se(i.value) && (y.value = i.value);
-		}), N(y, (e) => {
+		F(() => {
+			h.value?.trait === "hexColor" && oe(i.value) && (y.value = i.value);
+		}), P(y, (e) => {
 			h.value?.trait === "hexColor" && (i.value = e);
 		});
 		let b = T("primary"), x = o(() => {
@@ -1311,14 +1361,14 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			});
 			return e;
 		});
-		return P(() => {
-			h.value?.trait === "themeColor" && ce(i.value) && (b.value = i.value);
-		}), N(b, (e) => {
+		return F(() => {
+			h.value?.trait === "themeColor" && se(i.value) && (b.value = i.value);
+		}), P(b, (e) => {
 			h.value?.trait === "themeColor" && (i.value = e);
 		}), (t, n) => {
-			let r = D("v-select"), i = D("v-number-input"), o = D("v-btn"), d = O("ripple");
-			return C(), l("div", Bt, [u("div", Vt, [
-				I(f(r, {
+			let r = O("v-select"), i = O("v-number-input"), o = O("v-btn"), d = k("ripple");
+			return C(), l("div", Ut, [u("div", Wt, [
+				L(f(r, {
 					modelValue: p.value,
 					"onUpdate:modelValue": [n[0] ||= (e) => p.value = e, g],
 					density: "compact",
@@ -1336,7 +1386,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					void 0,
 					{ stop: !0 }
 				]]),
-				h.value?.trait === "pixel" || h.value?.trait === "percent" ? I((C(), s(i, {
+				h.value?.trait === "number" || h.value?.trait === "pixel" || h.value?.trait === "percent" ? L((C(), s(i, {
 					key: 0,
 					modelValue: _.value,
 					"onUpdate:modelValue": n[1] ||= (e) => _.value = e,
@@ -1363,12 +1413,12 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					void 0,
 					{ stop: !0 }
 				]]) : c("", !0),
-				h.value?.trait === "hexColor" ? (C(), s(zt, {
+				h.value?.trait === "hexColor" ? (C(), s(Ht, {
 					key: 1,
 					modelValue: y.value,
 					"onUpdate:modelValue": n[2] ||= (e) => y.value = e
 				}, null, 8, ["modelValue"])) : c("", !0),
-				h.value?.trait === "themeColor" ? I((C(), s(r, {
+				h.value?.trait === "themeColor" ? L((C(), s(r, {
 					key: 2,
 					modelValue: b.value,
 					"onUpdate:modelValue": n[3] ||= (e) => b.value = e,
@@ -1388,11 +1438,11 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: n[4] ||= R((e) => a("delete"), ["stop"])
+				onClick: n[4] ||= z((e) => a("delete"), ["stop"])
 			})) : c("", !0)]);
 		};
 	}
-}), Ut = { class: "d-flex justify-space-between align-center" }, Wt = /* @__PURE__ */ p({
+}), Kt = { class: "d-flex justify-space-between align-center" }, qt = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1413,7 +1463,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { isMobile: n } = U(), r = M(e, "modelValue"), i = t, a = async (t) => {
+		let { isMobile: n } = W(), r = N(e, "modelValue"), i = t, a = async (t) => {
 			if (!t || e.readonly || !n()) return;
 			let i = await _e({
 				title: "",
@@ -1426,8 +1476,8 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			i !== void 0 && (r.value = i);
 		};
 		return (t, n) => {
-			let o = D("v-number-input"), u = D("v-btn"), d = O("ripple");
-			return C(), l("div", Ut, [I(f(o, {
+			let o = O("v-number-input"), u = O("v-btn"), d = k("ripple");
+			return C(), l("div", Kt, [L(f(o, {
 				modelValue: r.value,
 				"onUpdate:modelValue": n[0] ||= (e) => r.value = e,
 				"control-variant": "stacked",
@@ -1458,11 +1508,117 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: n[1] ||= R((e) => i("delete"), ["stop"])
+				onClick: n[1] ||= z((e) => i("delete"), ["stop"])
 			})) : c("", !0)]);
 		};
 	}
-}), Gt = { class: "d-flex justify-space-between align-center" }, Kt = /* @__PURE__ */ p({
+}), Jt = { class: "d-flex justify-space-between align-center my-2" }, Yt = { class: "flex-grow-1" }, Xt = /* @__PURE__ */ p({
+	__name: "index",
+	props: /* @__PURE__ */ _({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let { t: n } = V(), { isMobile: r } = W(), i = N(e, "modelValue"), a = t, d = T(""), p = T(0);
+		F(() => {
+			let e = i.value.split(",");
+			e.length < 1 || (d.value = e[0], (e[0] === "minLength" || e[1] === "maxLength" || e[2] === "length") && (e.length > 1 ? p.value = parseInt(e[1]) : p.value = 0));
+		});
+		function m() {
+			d.value === "minLength" || d.value === "maxLength" || d.value === "length" ? i.value = `${d.value},${p.value}` : i.value = d.value;
+		}
+		let h = o(() => {
+			let e = [{
+				value: "",
+				title: n("x-runtime-lib.notSet")
+			}];
+			for (let t of fe) e.push({
+				value: t,
+				title: n(`x-runtime-lib.${t}`)
+			});
+			return e;
+		});
+		function g() {
+			p.value = 0, m();
+		}
+		F(() => {
+			let e = i.value.split(",");
+			e.length > 1 && (p.value = parseInt(e[1]));
+		});
+		async function _(e) {
+			if (!e || !r()) return;
+			let t = await _e({
+				title: "",
+				value: p.value,
+				precision: 0,
+				min: 0,
+				max: Infinity,
+				step: 1
+			});
+			t !== void 0 && (p.value = t, m());
+		}
+		function v() {
+			m();
+		}
+		return (t, n) => {
+			let r = O("v-select"), i = O("v-number-input"), o = O("v-btn"), m = k("ripple");
+			return C(), l("div", Jt, [u("div", Yt, [L(f(r, {
+				modelValue: d.value,
+				"onUpdate:modelValue": [n[0] ||= (e) => d.value = e, g],
+				density: "compact",
+				"hide-details": "",
+				items: h.value,
+				readonly: e.readonly,
+				"single-line": ""
+			}, null, 8, [
+				"modelValue",
+				"items",
+				"readonly"
+			]), [[
+				m,
+				void 0,
+				void 0,
+				{ stop: !0 }
+			]]), d.value === "minLength" || d.value === "maxLength" || d.value === "length" ? L((C(), s(i, {
+				key: 0,
+				modelValue: p.value,
+				"onUpdate:modelValue": [n[1] ||= (e) => p.value = e, v],
+				"control-variant": "stacked",
+				density: "compact",
+				"hide-details": "",
+				max: Infinity,
+				min: 0,
+				precision: 0,
+				readonly: e.readonly,
+				"single-line": "",
+				step: 1,
+				"onUpdate:focused": _
+			}, null, 8, ["modelValue", "readonly"])), [[
+				m,
+				void 0,
+				void 0,
+				{ stop: !0 }
+			]]) : c("", !0)]), e.hasDelete ? (C(), s(o, {
+				key: 0,
+				class: "mx-2",
+				density: "compact",
+				icon: "mdi-minus",
+				variant: "text",
+				onClick: n[2] ||= z((e) => a("delete"), ["stop"])
+			})) : c("", !0)]);
+		};
+	}
+}), Zt = { class: "d-flex justify-space-between align-center" }, Qt = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1480,9 +1636,9 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), r = M(e, "modelValue"), i = t, a = o(() => {
+		let { t: n } = V(), r = N(e, "modelValue"), i = t, a = o(() => {
 			let t = [];
-			return re(e.items)?.forEach(({ value: e, title: r }) => {
+			return ne(e.items)?.forEach(({ value: e, title: r }) => {
 				let i = e;
 				r && (i = n(r)), t.push({
 					value: e,
@@ -1491,8 +1647,8 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}), t;
 		});
 		return (t, n) => {
-			let o = D("v-select"), u = D("v-btn"), d = O("ripple");
-			return C(), l("div", Gt, [I(f(o, {
+			let o = O("v-select"), u = O("v-btn"), d = k("ripple");
+			return C(), l("div", Zt, [L(f(o, {
 				modelValue: r.value,
 				"onUpdate:modelValue": n[0] ||= (e) => r.value = e,
 				density: "compact",
@@ -1515,11 +1671,11 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: n[1] ||= R((e) => i("delete"), ["stop"])
+				onClick: n[1] ||= z((e) => i("delete"), ["stop"])
 			})) : c("", !0)]);
 		};
 	}
-}), qt = { class: "text-body-large ml-6" }, Jt = /* @__PURE__ */ p({
+}), $t = { class: "text-body-large ml-6" }, en = /* @__PURE__ */ p({
 	__name: "item",
 	props: {
 		id: {},
@@ -1527,27 +1683,27 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["x-click"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = t, a = T(!1), s = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = t, a = T(!1), s = o(() => ({
 			background: a.value ? r.value : n.value,
 			height: "48px",
 			marginTop: "1px",
 			userSelect: "none"
 		}));
 		return (t, n) => {
-			let r = O("ripple");
-			return I((C(), l("div", {
+			let r = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex align-center cursor-pointer",
 				style: y(s.value),
 				onClick: n[0] ||= (t) => i("x-click", e.id),
 				onMouseout: n[1] ||= (e) => a.value = !1,
 				onMouseover: n[2] ||= (e) => a.value = !0
-			}, [u("span", qt, k(e.title), 1)], 36)), [[r]]);
+			}, [u("span", $t, A(e.title), 1)], 36)), [[r]]);
 		};
 	}
-}), Yt = { key: 0 }, Xt = {
+}), tn = { key: 0 }, nn = {
 	key: 1,
 	class: "text-body-medium text-grey ml-3"
-}, Zt = /* @__PURE__ */ p({
+}, rn = /* @__PURE__ */ p({
 	__name: "index",
 	props: {
 		modelValue: {},
@@ -1560,17 +1716,17 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: t } = U(), n = M(e, "modelValue"), r = M(e, "open"), i = ot(), o = (e) => {
+		let { nameList: t } = W(), n = N(e, "modelValue"), r = N(e, "open"), i = st(), o = (e) => {
 			n.value = e, r.value = !1;
 		};
-		return (e, n) => A(i).length > 0 ? (C(), l("div", Yt, [(C(!0), l(a, null, E(A(i), (e) => (C(), s(Jt, {
+		return (e, n) => j(i).length > 0 ? (C(), l("div", tn, [(C(!0), l(a, null, E(j(i), (e) => (C(), s(en, {
 			key: e.id,
 			id: e.id,
 			title: e.name,
 			onXClick: o
-		}, null, 8, ["id", "title"]))), 128))])) : (C(), l("div", Xt, k(A(t)(["x-prop-tree.no", "x-prop-tree.slot"])), 1));
+		}, null, 8, ["id", "title"]))), 128))])) : (C(), l("div", nn, A(j(t)(["x-prop-tree.no", "x-prop-tree.slot"])), 1));
 	}
-}), Qt = { class: "text-body-large" }, $t = /* @__PURE__ */ p({
+}), an = { class: "text-body-large" }, on = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1587,7 +1743,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { t: n } = B(), r = be(), { sysBarAvail: i, nameList: a } = U(), { backgroundColor1: l } = H(), p = M(e, "modelValue"), m = t, h = ot(), _ = o(() => {
+		let { t: n } = V(), r = be(), { sysBarAvail: i, nameList: a } = W(), { backgroundColor1: l } = U(), p = N(e, "modelValue"), m = t, h = st(), _ = o(() => {
 			let e = "100%";
 			return r.mdAndUp.value && (e = "400px"), {
 				background: l.value,
@@ -1604,26 +1760,26 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			if (!p.value) return n("x-runtime-lib.notSet");
 			let e = h.value.find((e) => e.id === p.value);
 			return e ? e.name : n("x-runtime-lib.slotNotAvail");
-		}), { open: T } = W(`propTreeSlotSelectDlg${j()}`);
+		}), { open: T } = G(`propTreeSlotSelectDlg${M()}`);
 		return S(() => {
 			T.value = !1;
 		}), (t, n) => {
-			let r = D("v-btn"), o = D("v-sheet"), l = D("v-dialog");
+			let r = O("v-btn"), o = O("v-sheet"), l = O("v-dialog");
 			return C(), s(l, {
-				modelValue: A(T),
+				modelValue: j(T),
 				"onUpdate:modelValue": n[6] ||= (e) => g(T) ? T.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: n[7] ||= L(R((e) => T.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: n[7] ||= R(z((e) => T.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: F(({ props: t }) => [f(r, v(t, {
+				activator: I(({ props: t }) => [f(r, v(t, {
 					block: "",
 					density: "comfortable",
 					readonly: e.readonly
 				}), {
-					default: F(() => [d(k(w.value), 1)]),
+					default: I(() => [d(A(w.value), 1)]),
 					_: 1
 				}, 16, ["readonly"]), e.hasDelete ? (C(), s(r, {
 					key: 0,
@@ -1631,17 +1787,17 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: n[0] ||= R((e) => m("delete"), ["stop"])
+					onClick: n[0] ||= z((e) => m("delete"), ["stop"])
 				})) : c("", !0)]),
-				default: F(() => [u("div", {
+				default: I(() => [u("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: n[4] ||= R((e) => T.value = !1, ["self"]),
-					onContextmenu: n[5] ||= R((e) => T.value = !1, ["self", "prevent"])
+					onClick: n[4] ||= z((e) => T.value = !1, ["self"]),
+					onContextmenu: n[5] ||= z((e) => T.value = !1, ["self", "prevent"])
 				}, [u("div", {
 					class: "elevation-2",
 					style: y(_.value)
 				}, [
-					A(i) ? (C(), s(o, {
+					j(i) ? (C(), s(o, {
 						key: 0,
 						color: "transparent",
 						height: 24
@@ -1651,21 +1807,21 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 						color: "transparent",
 						height: 48
 					}, {
-						default: F(() => [f(r, {
+						default: I(() => [f(r, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
 							onClick: n[1] ||= (e) => T.value = !1
-						}), u("span", Qt, k(A(a)(["x-prop-tree.select", "x-prop-tree.slot"])), 1)]),
+						}), u("span", an, A(j(a)(["x-prop-tree.select", "x-prop-tree.slot"])), 1)]),
 						_: 1
 					}),
 					u("div", {
 						class: "overflow-y-auto",
 						style: y(b.value)
-					}, [f(Zt, {
+					}, [f(rn, {
 						modelValue: p.value,
 						"onUpdate:modelValue": n[2] ||= (e) => p.value = e,
-						open: A(T),
+						open: j(T),
 						"onUpdate:open": n[3] ||= (e) => g(T) ? T.value = e : null
 					}, null, 8, ["modelValue", "open"]), u("div", { style: y(x.value) }, null, 4)], 4)
 				], 4)], 32)]),
@@ -1673,7 +1829,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			}, 8, ["modelValue"]);
 		};
 	}
-}), en = { class: "d-flex justify-space-between align-center" }, tn = /* @__PURE__ */ p({
+}), sn = { class: "d-flex justify-space-between align-center" }, cn = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1690,10 +1846,10 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = M(e, "modelValue"), r = t;
+		let n = N(e, "modelValue"), r = t;
 		return (t, i) => {
-			let a = D("v-switch"), o = D("v-btn");
-			return C(), l("div", en, [f(a, {
+			let a = O("v-switch"), o = O("v-btn");
+			return C(), l("div", sn, [f(a, {
 				modelValue: n.value,
 				"onUpdate:modelValue": i[0] ||= (e) => n.value = e,
 				class: "ml-1",
@@ -1707,11 +1863,11 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: i[1] ||= R((e) => r("delete"), ["stop"])
+				onClick: i[1] ||= z((e) => r("delete"), ["stop"])
 			})) : c("", !0)]);
 		};
 	}
-}), nn = { class: "d-flex justify-space-between align-center" }, rn = /* @__PURE__ */ p({
+}), ln = { class: "d-flex justify-space-between align-center" }, un = /* @__PURE__ */ p({
 	__name: "index",
 	props: /* @__PURE__ */ _({
 		hasDelete: {
@@ -1728,7 +1884,7 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 	}),
 	emits: /* @__PURE__ */ _(["delete"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let { isMobile: n } = U(), r = M(e, "modelValue"), i = t, a = async (t) => {
+		let { isMobile: n } = W(), r = N(e, "modelValue"), i = t, a = async (t) => {
 			if (!t || e.readonly || !n()) return;
 			let i = await ve({
 				title: "",
@@ -1737,8 +1893,8 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 			i !== void 0 && (r.value = i);
 		};
 		return (t, n) => {
-			let o = D("v-text-field"), u = D("v-btn"), d = O("ripple");
-			return C(), l("div", nn, [I(f(o, {
+			let o = O("v-text-field"), u = O("v-btn"), d = k("ripple");
+			return C(), l("div", ln, [L(f(o, {
 				modelValue: r.value,
 				"onUpdate:modelValue": n[0] ||= (e) => r.value = e,
 				density: "compact",
@@ -1757,21 +1913,21 @@ var ht = { class: "text-label-large ml-1" }, gt = { class: "text-body-small text
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: n[1] ||= R((e) => i("delete"), ["stop"])
+				onClick: n[1] ||= z((e) => i("delete"), ["stop"])
 			})) : c("", !0)]);
 		};
 	}
 });
 //#endregion
 //#region src/composables/uis/uiAdaptSlot.ts
-function an() {
+function dn() {
 	let e = $();
 	return { renderUiAdaptSlot: (t, n, r, i, a) => {
 		if (n.ui !== "adaptSlot") throw Error("useUiAdaptSlot property ui must be adaptSlot");
-		return m(wt, {
-			modelValue: q(t, n, r, i, a, e),
+		return m(Tt, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1783,14 +1939,14 @@ function an() {
 }
 //#endregion
 //#region src/composables/uis/uiComp.ts
-function on() {
+function fn() {
 	let e = $();
 	return { renderUiComp: (t, n, r, i, a) => {
 		if (n.ui !== "comp") throw Error("renderUiComp property ui must be comp");
-		return m(Pt, {
-			modelValue: q(t, n, r, i, a, e),
+		return m(Ft, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1802,23 +1958,42 @@ function on() {
 }
 //#endregion
 //#region src/composables/uis/uiDummy.ts
-function sn() {
+function pn() {
 	let e = $();
 	return { renderUiDummy: (t, n, r, i, a) => {
 		if (n.ui !== "dummy") throw Error("renderUiDummy property ui must be dummy");
-		q(t, n, r, i, a, e);
+		J(t, n, r, i, a, e);
+	} };
+}
+//#endregion
+//#region src/composables/uis/uiIcon.ts
+function mn() {
+	let e = $();
+	return { renderUiIcon: (t, n, r, i, a) => {
+		if (n.ui !== "icon") throw Error("renderUiIcon property ui must be icon");
+		return m(Lt, {
+			modelValue: n.static ? n.value : J(t, n, r, i, a, e),
+			"onUpdate:modelValue": (o) => {
+				n.static || Y(t, n, r, o, i, a, e);
+			},
+			hasDelete: i !== void 0 && !a,
+			onDelete: () => {
+				i === void 0 || a || (r.splice(i, 1), e(t.slice(0, -1), r));
+			},
+			readonly: n.static || n.readonly
+		});
 	} };
 }
 //#endregion
 //#region src/composables/uis/uiJson.ts
-function cn() {
+function hn() {
 	let e = $();
 	return { renderUiJson: (t, n, r, i, a) => {
 		if (n.ui !== "json") throw Error("renderUiJson property ui must be json");
-		return m(Lt, {
-			modelValue: q(t, n, r, i, a, e) ?? "{}",
+		return m(Bt, {
+			modelValue: J(t, n, r, i, a, e) ?? "{}",
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1830,14 +2005,14 @@ function cn() {
 }
 //#endregion
 //#region src/composables/uis/uiMultiTypes.ts
-function ln() {
+function gn() {
 	let e = $();
 	return { renderUiMultiTypes: (t, n, r, i, a) => {
 		if (n.ui !== "multiTypes") throw Error("renderUiMultiTypes property ui must be multiTypes");
-		return m(Ht, {
-			modelValue: q(t, n, r, i, a, e) ?? "",
+		return m(Gt, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1849,14 +2024,14 @@ function ln() {
 }
 //#endregion
 //#region src/composables/uis/uiNumber.ts
-function un() {
+function _n() {
 	let e = $();
 	return { renderUiNumber: (t, n, r, i, a) => {
 		if (n.ui !== "number") throw Error("renderUiNumber property ui must be number");
-		return m(Wt, {
-			modelValue: q(t, n, r, i, a, e),
+		return m(qt, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1872,12 +2047,12 @@ function un() {
 }
 //#endregion
 //#region src/components/entry/index.vue
-var dn = /* @__PURE__ */ p({
+var vn = /* @__PURE__ */ p({
 	__name: "index",
 	props: { minHeight: {} },
 	emits: ["menu"],
 	setup(e, { emit: t }) {
-		let { backgroundColor2: n, highlightColor: r } = H(), i = t, a = T(!1), s = o(() => ({
+		let { backgroundColor2: n, highlightColor: r } = U(), i = t, a = T(!1), s = o(() => ({
 			background: a.value ? r.value : n.value,
 			minHeight: e.minHeight,
 			paddingRight: "4px",
@@ -1887,27 +2062,27 @@ var dn = /* @__PURE__ */ p({
 			i("menu", e.clientX, e.clientY);
 		};
 		return (e, t) => {
-			let n = O("ripple");
-			return I((C(), l("div", {
+			let n = k("ripple");
+			return L((C(), l("div", {
 				class: "d-flex justify-space-between align-center cursor-pointer",
 				style: y(s.value),
-				onContextmenu: R(c, ["self", "prevent"]),
+				onContextmenu: z(c, ["self", "prevent"]),
 				onMouseout: t[0] ||= (e) => a.value = !1,
 				onMouseover: t[1] ||= (e) => a.value = !0
-			}, [ee(e.$slots, "default")], 36)), [[n]]);
+			}, [D(e.$slots, "default")], 36)), [[n]]);
 		};
 	}
 });
 //#endregion
 //#region src/composables/uis/uiProperty.ts
-function fn() {
-	let { t: e } = B(), t = tt();
+function yn() {
+	let { t: e } = V(), t = nt();
 	return { renderProperty: (n, r, i) => {
 		let a = n[n.length - 1], o = typeof a == "number" ? `[${a + 1}]` : e(r.name);
-		return Q(t.value, n) && (o += " *"), m(dn, {
+		return Q(t.value, n) && (o += " *"), m(vn, {
 			minHeight: "56px",
 			onMenu: (e, t) => {
-				V.emit("propTreeMenu", {
+				H.emit("propTreeMenu", {
 					x: e,
 					y: t,
 					keys: n
@@ -1923,15 +2098,34 @@ function fn() {
 	} };
 }
 //#endregion
+//#region src/composables/uis/uiRule.ts
+function bn() {
+	let e = $();
+	function t(t, n, r, i, a) {
+		if (n.ui !== "rule") throw Error("renderUiRule property ui must be rule");
+		return m(Xt, {
+			modelValue: J(t, n, r, i, a, e),
+			"onUpdate:modelValue": (o) => {
+				Y(t, n, r, o, i, a, e);
+			},
+			hasDelete: i !== void 0 && !a,
+			onDelete: () => {
+				i === void 0 || a || (r.splice(i, 1), e(t.slice(0, -1), r));
+			}
+		});
+	}
+	return { renderUiRule: t };
+}
+//#endregion
 //#region src/composables/uis/uiSelect.ts
-function pn() {
+function xn() {
 	let e = $();
 	return { renderUiSelect: (t, n, r, i, a) => {
 		if (n.ui !== "select") throw Error("renderUiSelect property ui must be select");
-		return m(Kt, {
-			modelValue: q(t, n, r, i, a, e) ?? "",
+		return m(Qt, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1944,14 +2138,14 @@ function pn() {
 }
 //#endregion
 //#region src/composables/uis/uiSlot.ts
-function mn() {
+function Sn() {
 	let e = $();
 	return { renderUiSlot: (t, n, r, i, a) => {
 		if (n.ui !== "slot") throw Error("renderUiSlot property ui must be slot");
-		return m($t, {
-			modelValue: q(t, n, r, i, a, e),
+		return m(on, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1963,14 +2157,14 @@ function mn() {
 }
 //#endregion
 //#region src/composables/uis/uiSwitch.ts
-function hn() {
+function Cn() {
 	let e = $();
 	return { renderUiSwitch: (t, n, r, i, a) => {
 		if (n.ui !== "switch") throw Error("renderUiSwitch property ui must be switch");
-		return m(tn, {
-			modelValue: q(t, n, r, i, a, e) ?? !1,
+		return m(cn, {
+			modelValue: J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				J(t, n, r, o, i, a, e);
+				Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -1982,14 +2176,14 @@ function hn() {
 }
 //#endregion
 //#region src/composables/uis/uiText.ts
-function gn() {
+function wn() {
 	let e = $();
 	return { renderUiText: (t, n, r, i, a) => {
 		if (n.ui !== "text") throw Error("renderUiText property ui must be text");
-		return m(rn, {
-			modelValue: n.static ? n.value : q(t, n, r, i, a, e),
+		return m(un, {
+			modelValue: n.static ? n.value : J(t, n, r, i, a, e),
 			"onUpdate:modelValue": (o) => {
-				n.static || J(t, n, r, o, i, a, e);
+				n.static || Y(t, n, r, o, i, a, e);
 			},
 			hasDelete: i !== void 0 && !a,
 			onDelete: () => {
@@ -2001,27 +2195,27 @@ function gn() {
 }
 //#endregion
 //#region src/components/propTree/main.vue?vue&type=script&setup=true&lang.ts
-var _n = "20px", vn = /* @__PURE__ */ p({
+var Tn = "20px", En = /* @__PURE__ */ p({
 	__name: "main",
 	setup(t) {
-		let { t: n } = B(), { backgroundColor1: r } = H(), i = Ye(), o = Ze(), s = $e(), c = tt(), u = $();
-		pt(), mt(), ft();
-		let { renderProperty: d } = fn(), { renderUiDummy: p } = sn(), { renderUiText: h } = gn(), { renderUiNumber: g } = un(), { renderUiSwitch: _ } = hn(), { renderUiSelect: v } = pn(), { renderUiJson: y } = cn(), { renderUiMultiTypes: b } = ln(), { renderUiComp: x } = on(), { renderUiSlot: S } = mn(), { renderUiAdaptSlot: w } = an(), T = (t, n, r, i, a, o) => {
-			if (t = e(t), i === void 0 ? t.push(n.key) : (t.push(i), a && t.push(n.key)), t?.[0] !== "runtime") return n.ui ? n.array && !o ? D(t, n, r, i, a) : O(t, n, r, i, a) : n.array ? E(t, n, r, i, a) : ee(t, n, r, i, a);
-		}, E = (e, t, r, i, a) => {
+		let { t: n } = V(), { backgroundColor1: r } = U(), i = Xe(), o = Qe(), s = et(), c = nt(), u = $();
+		mt(), ht(), pt();
+		let { renderProperty: d } = yn(), { renderUiDummy: p } = pn(), { renderUiText: h } = wn(), { renderUiNumber: g } = _n(), { renderUiSwitch: _ } = Cn(), { renderUiSelect: v } = xn(), { renderUiJson: y } = hn(), { renderUiIcon: b } = mn(), { renderUiComp: x } = fn(), { renderUiSlot: S } = Sn(), { renderUiAdaptSlot: w } = dn(), { renderUiRule: T } = bn(), { renderUiMultiTypes: E } = gn(), D = (t, n, r, i, a, o) => {
+			if (t = e(t), i === void 0 ? t.push(n.key) : (t.push(i), a && t.push(n.key)), t?.[0] !== "runtime") return n.ui ? n.array && !o ? A(t, n, r, i, a) : j(t, n, r, i, a) : n.array ? O(t, n, r, i, a) : k(t, n, r, i, a);
+		}, O = (e, t, r, i, a) => {
 			if (t.ui) throw Error("renderBranchArray property ui must be invalid");
 			if (!t.array) throw Error("renderBranchArray property array must be valid");
 			let o = Se(e, t, r, i, a, u), l = n(t.name);
-			Y(s, e) && Q(c.value, e) && (l += " *");
-			let d = m(dt, {
+			X(s, e) && Q(c.value, e) && (l += " *");
+			let d = m(ft, {
 				title: l,
-				collapse: Y(s, e),
+				collapse: X(s, e),
 				hasCreate: !0,
 				onCollapse: (t) => {
-					X(s, e, t);
+					Z(s, e, t);
 				},
 				onMenu: (t, n) => {
-					V.emit("propTreeMenu", {
+					H.emit("propTreeMenu", {
 						x: t,
 						y: n,
 						keys: e
@@ -2030,21 +2224,21 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 				onCreate: () => {
 					o.push({}), u(e, o);
 				}
-			}), f = m("div", { style: { paddingLeft: _n } }, (() => {
+			}), f = m("div", { style: { paddingLeft: Tn } }, (() => {
 				let n = [];
 				for (let r = 0; r < o.length; r++) {
 					let i = [...e, r], a = `[${r + 1}]`;
-					Y(s, [...e, r]) && Q(c.value, i) && (a += " *");
-					let l = m(dt, {
+					X(s, [...e, r]) && Q(c.value, i) && (a += " *");
+					let l = m(ft, {
 						title: a,
-						collapse: Y(s, [...e, r]),
+						collapse: X(s, [...e, r]),
 						hasDelete: !0,
 						index: r,
 						onCollapse: (t) => {
-							X(s, [...e, r], t);
+							Z(s, [...e, r], t);
 						},
 						onMenu: (e, t) => {
-							V.emit("propTreeMenu", {
+							H.emit("propTreeMenu", {
 								x: e,
 								y: t,
 								keys: i
@@ -2055,33 +2249,33 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 						}
 					});
 					n.push(l);
-					let d = m("div", { style: { paddingLeft: _n } }, (() => {
+					let d = m("div", { style: { paddingLeft: Tn } }, (() => {
 						let n = [];
-						for (let i of t.children) n.push(T(e, i, o[r], r, !0));
+						for (let i of t.children) n.push(D(e, i, o[r], r, !0));
 						return n;
 					})());
-					Y(s, [...e, r]) || n.push(d);
+					X(s, [...e, r]) || n.push(d);
 				}
 				return n;
 			})());
 			return m("div", { style: { marginTop: "1px" } }, (() => {
 				let t = [];
-				return t.push(d), Y(s, e) || t.push(f), t;
+				return t.push(d), X(s, e) || t.push(f), t;
 			})());
-		}, ee = (e, t, r, i, a) => {
+		}, k = (e, t, r, i, a) => {
 			if (t.ui) throw Error("renderBranchScalar property ui must be invalid");
 			if (t.array) throw Error("renderBranchScalar property array must be invalid");
 			let o = n(t.name);
-			Y(s, e) && Q(c.value, e) && (o += " *");
-			let l = m(dt, {
+			X(s, e) && Q(c.value, e) && (o += " *");
+			let l = m(ft, {
 				title: o,
-				collapse: Y(s, e),
+				collapse: X(s, e),
 				hasDelete: i !== void 0 && !a,
 				onCollapse: (t) => {
-					X(s, e, t);
+					Z(s, e, t);
 				},
 				onMenu: (t, n) => {
-					V.emit("propTreeMenu", {
+					H.emit("propTreeMenu", {
 						x: t,
 						y: n,
 						keys: e
@@ -2090,61 +2284,61 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 				onDelete: () => {
 					i === void 0 || a || (r.splice(i, 1), u(e.slice(0, -1), r));
 				}
-			}), d = m("div", { style: { paddingLeft: _n } }, (() => {
+			}), d = m("div", { style: { paddingLeft: Tn } }, (() => {
 				let n = [];
-				for (let i of t.children) n.push(T(e, i, (typeof r[t.key] != "object" && (r[t.key] = {}, u(e, r[t.key])), r[t.key]), void 0, !1));
+				for (let i of t.children) n.push(D(e, i, (typeof r[t.key] != "object" && (r[t.key] = {}, u(e, r[t.key])), r[t.key]), void 0, !1));
 				return n;
 			})());
 			return m("div", { style: { marginTop: "1px" } }, (() => {
 				let t = [];
-				return t.push(l), Y(s, e) || t.push(d), t;
+				return t.push(l), X(s, e) || t.push(d), t;
 			})());
-		}, D = (e, t, r, i, a) => {
+		}, A = (e, t, r, i, a) => {
 			if (!t.ui) throw Error("renderLeafArray property ui must be valid");
 			if (!t.array) throw Error("renderLeafArray property array must be valid");
 			let o = Se(e, t, r, i, a, u), l = n(t.name);
-			Y(s, e) && Q(c.value, e) && (l += " *");
-			let d = m(dt, {
+			X(s, e) && Q(c.value, e) && (l += " *");
+			let d = m(ft, {
 				title: l,
-				collapse: Y(s, e),
+				collapse: X(s, e),
 				hasCreate: !0,
 				onCollapse: (t) => {
-					X(s, e, t);
+					Z(s, e, t);
 				},
 				onMenu: (t, n) => {
-					V.emit("propTreeMenu", {
+					H.emit("propTreeMenu", {
 						x: t,
 						y: n,
 						keys: e
 					});
 				},
 				onCreate: () => {
-					o.push(z(t)), u(e, o);
+					o.push(B(t)), u(e, o);
 				}
-			}), f = m("div", { style: { paddingLeft: _n } }, (() => {
+			}), f = m("div", { style: { paddingLeft: Tn } }, (() => {
 				let n = [];
-				for (let r = 0; r < o.length; r++) n.push(T(e, t, o, r, !1, !0));
+				for (let r = 0; r < o.length; r++) n.push(D(e, t, o, r, !1, !0));
 				return n;
 			})());
 			return m("div", { style: { marginTop: "1px" } }, (() => {
 				let t = [];
-				return t.push(d), Y(s, e) || t.push(f), t;
+				return t.push(d), X(s, e) || t.push(f), t;
 			})());
-		}, O = (e, t, n, r, i) => {
+		}, j = (e, t, n, r, i) => {
 			if (!t.ui) throw Error("renderLeafScalar property ui must be valid");
 			let a;
-			return t.ui === "dummy" ? a = p(e, t, n, r, i) : t.ui === "text" ? a = h(e, t, n, r, i) : t.ui === "number" ? a = g(e, t, n, r, i) : t.ui === "switch" ? a = _(e, t, n, r, i) : t.ui === "select" ? a = v(e, t, n, r, i) : t.ui === "json" ? a = y(e, t, n, r, i) : t.ui === "multiTypes" ? a = b(e, t, n, r, i) : t.ui === "comp" ? a = x(e, t, n, r, i) : t.ui === "slot" ? a = S(e, t, n, r, i) : t.ui === "adaptSlot" ? a = w(e, t, n, r, i) : console.assert(!1, "renderLeafScalar not implemented"), a ? d(e, t, a) : m("div");
-		}, k = () => m("div", {
+			return t.ui === "dummy" ? a = p(e, t, n, r, i) : t.ui === "text" ? a = h(e, t, n, r, i) : t.ui === "number" ? a = g(e, t, n, r, i) : t.ui === "switch" ? a = _(e, t, n, r, i) : t.ui === "select" ? a = v(e, t, n, r, i) : t.ui === "json" ? a = y(e, t, n, r, i) : t.ui === "icon" ? a = b(e, t, n, r, i) : t.ui === "comp" ? a = x(e, t, n, r, i) : t.ui === "slot" ? a = S(e, t, n, r, i) : t.ui === "adaptSlot" ? a = w(e, t, n, r, i) : t.ui === "rule" ? a = T(e, t, n, r, i) : t.ui === "multiTypes" ? a = E(e, t, n, r, i) : console.assert(!1, "renderLeafScalar not implemented"), a ? d(e, t, a) : m("div");
+		}, M = () => m("div", {
 			class: "text-body-medium",
 			style: { background: r.value }
 		}, (() => {
 			let e = [];
-			if (i.value.length > 0 && o.value) for (let t of i.value) e.push(T([], t, o.value, void 0, !1));
+			if (i.value.length > 0 && o.value) for (let t of i.value) e.push(D([], t, o.value, void 0, !1));
 			return e;
 		})());
-		return (e, t) => (C(), l(a, null, [f(k), f(lt)], 64));
+		return (e, t) => (C(), l(a, null, [f(M), f(ut)], 64));
 	}
-}), yn = /* @__PURE__ */ p({
+}), Dn = /* @__PURE__ */ p({
 	__name: "index",
 	props: {
 		config: {},
@@ -2156,25 +2350,25 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 	emits: ["change"],
 	setup(e, { emit: t }) {
 		let n = t, r = T([]);
-		Je(r), P(() => {
+		Ye(r), F(() => {
 			r.value = e.config;
 		});
 		let i = T();
-		Xe(i), P(() => {
+		Ze(i), F(() => {
 			i.value = e.object;
 		});
 		let a = T("");
-		He(a), P(() => {
+		Ue(a), F(() => {
 			a.value = e.version;
 		});
 		let o = T(e.type);
-		We(o), P(() => {
+		Ge(o), F(() => {
 			o.value = e.type;
 		});
 		let c = T("");
-		Ke(c), P(() => {
+		qe(c), F(() => {
 			c.value = e.subtype;
-		}), Qe(T({
+		}), $e(T({
 			collapse: !0,
 			children: {}
 		}));
@@ -2183,15 +2377,15 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 			warning: !1,
 			children: {}
 		});
-		return et(l), nt((t, r) => {
-			Ae(l, e.config, e.object), n("change", t, r);
-		}), N([() => e.config, () => e.object], () => {
-			Ae(l, e.config, e.object);
-		}, { immediate: !0 }), (e, t) => (C(), s(vn));
+		return tt(l), rt((t, r) => {
+			je(l, e.config, e.object), n("change", t, r);
+		}), P([() => e.config, () => e.object], () => {
+			je(l, e.config, e.object);
+		}, { immediate: !0 }), (e, t) => (C(), s(En));
 	}
-}), bn = (e) => {
-	e.component("XPropTree", yn);
-}, xn = (e, t, n) => {
+}), On = (e) => {
+	e.component("XPropTree", Dn);
+}, kn = (e, t, n) => {
 	let r = t.lastIndexOf("?"), i = e[r === -1 || r < t.lastIndexOf("/") ? t : t.slice(0, r)];
 	return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((e, r) => {
 		(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(r.bind(null, /* @__PURE__ */ Error("Unknown variable dynamic import: " + t + (t.split("/").length === n ? "" : ". Note that variables only represent file names one level deep."))));
@@ -2199,14 +2393,14 @@ var _n = "20px", vn = /* @__PURE__ */ p({
 };
 //#endregion
 //#region src/i18n/index.ts
-async function Sn(e) {
-	return (await xn(/* @__PURE__ */ Object.assign({
+async function An(e) {
+	return (await kn(/* @__PURE__ */ Object.assign({
 		"./locales/en/index.ts": () => import("./i18n-en.lvwojc1f.js").then((e) => e.t),
 		"./locales/zhHans/index.ts": () => import("./i18n-zhHans.u8lopwp1.js").then((e) => e.t)
 	}), `./locales/${e}/index.ts`, 4)).default;
 }
 //#endregion
 //#region src/index.ts
-var Cn = { install: bn };
+var jn = { install: On };
 //#endregion
-export { Cn as default, Sn as loadLocaleMessagePropTree };
+export { jn as default, An as loadLocaleMessagePropTree };