x-prop-tree 0.4.5 → 0.4.6

package/dist/components/propTree/colorPicker/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/propTree/title/index.vue.d.ts

@@ -13,9 +13,5 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     onDelete?: ((...args: any[]) => any) | undefined;
     onCollapse?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
-}>, {
-    index: number;
-    hasDelete: boolean;
-    hasCreate: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/index.js

@@ -1,10 +1,10 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="x-prop-tree",e.appendChild(document.createTextNode('.v-icon{--v-icon-size-multiplier: 1;align-items:center;display:inline-flex;font-feature-settings:"liga";height:1em;justify-content:center;letter-spacing:normal;line-height:1;position:relative;text-indent:0;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;width:1em;min-width:1em}.v-icon--clickable{cursor:pointer}.v-icon--disabled{pointer-events:none;opacity:.38}.v-icon--size-x-small{font-size:calc(var(--v-icon-size-multiplier) * 1em)}.v-icon--size-small{font-size:calc(var(--v-icon-size-multiplier) * 1.25em)}.v-icon--size-default{font-size:calc(var(--v-icon-size-multiplier) * 1.5em)}.v-icon--size-large{font-size:calc(var(--v-icon-size-multiplier) * 1.75em)}.v-icon--size-x-large{font-size:calc(var(--v-icon-size-multiplier) * 2em)}.v-icon__svg{fill:currentColor;width:100%;height:100%}.v-icon--start{margin-inline-end:8px}.v-icon--end{margin-inline-start:8px}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { Fragment as $e, reactive as Ce, computed as x, watchEffect as Ve, toRefs as De, warn as Ae, getCurrentInstance as Me, inject as j, shallowRef as Le, provide as xe, defineComponent as A, isRef as Pe, createVNode as C, mergeProps as Te, unref as q, ref as P, toRef as ze, Text as Re, mergeModels as Z, useModel as ee, resolveComponent as N, openBlock as w, createBlock as D, resolveDirective as Ne, withDirectives as Oe, createElementBlock as He, normalizeStyle as Ee, createElementVNode as We, toDisplayString as Ue, withModifiers as ne, createCommentVNode as te, h as k } from "vue";
-import { useI18n as Ge } from "vue-i18n";
-import { useColor as qe } from "x-essential-lib";
+import { Fragment as Ae, reactive as Ve, computed as b, watchEffect as be, toRefs as Me, warn as Pe, getCurrentInstance as Le, inject as j, shallowRef as Te, provide as _e, defineComponent as M, isRef as ze, createVNode as C, mergeProps as xe, unref as q, ref as T, toRef as Oe, Text as Re, resolveComponent as p, openBlock as S, createBlock as B, withCtx as ne, mergeModels as Z, useModel as ee, resolveDirective as Ne, withDirectives as He, createElementBlock as Ee, normalizeStyle as We, createElementVNode as Ue, toDisplayString as Ge, withModifiers as te, createCommentVNode as se, h as k } from "vue";
+import { useI18n as qe } from "vue-i18n";
+import { useColor as Ze } from "x-essential-lib";
 import { getPropDefault as L } from "x-runtime-lib";
-var Ze = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", Xe = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z", Ye = "M19,13H5V11H19V13Z", Ke = "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z";
-function F(e, n) {
+var Xe = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z", Ye = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z", Ke = "M19,13H5V11H19V13Z", Je = "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z";
+function I(e, n) {
   return (t) => Object.keys(e).reduce((s, a) => {
     const u = typeof e[a] == "object" && e[a] != null && !Array.isArray(e[a]) ? e[a] : {
       type: e[a]
@@ -15,36 +15,36 @@ function F(e, n) {
     } : s[a] = u, n && !s[a].source && (s[a].source = n), s;
   }, {});
 }
-const Je = F({
+const Qe = I({
   class: [String, Array, Object],
   style: {
     type: [String, Array, Object],
     default: null
   }
 }, "component");
-function z(e) {
+function O(e) {
   let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "px";
   if (!(e == null || e === ""))
     return isNaN(+e) ? String(e) : isFinite(+e) ? `${Number(e)}${n}` : void 0;
 }
-function se(e) {
+function ae(e) {
   let n;
   return e !== null && typeof e == "object" && ((n = Object.getPrototypeOf(e)) === Object.prototype || n === null);
 }
 function K(e, n) {
   return n.every((t) => e.hasOwnProperty(t));
 }
-function Qe(e, n) {
+function je(e, n) {
   const t = {}, s = new Set(Object.keys(e));
   for (const a of n)
     s.has(a) && (t[a] = e[a]);
   return t;
 }
-function ae(e, n) {
+function le(e, n) {
   let t = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "0";
   return e + t.repeat(Math.max(0, n - e.length));
 }
-function je(e) {
+function en(e) {
   let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
   const t = [];
   let s = 0;
@@ -52,19 +52,19 @@ function je(e) {
     t.push(e.substr(s, n)), s += n;
   return t;
 }
-function be() {
+function pe() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, t = arguments.length > 2 ? arguments[2] : void 0;
   const s = {};
   for (const a in e)
     s[a] = e[a];
   for (const a in n) {
-    const i = e[a], u = n[a];
-    if (se(i) && se(u)) {
-      s[a] = be(i, u, t);
+    const r = e[a], u = n[a];
+    if (ae(r) && ae(u)) {
+      s[a] = pe(r, u, t);
       continue;
     }
-    if (t && Array.isArray(i) && Array.isArray(u)) {
-      s[a] = t(i, u);
+    if (t && Array.isArray(r) && Array.isArray(u)) {
+      s[a] = t(r, u);
       continue;
     }
     s[a] = u;
@@ -72,52 +72,52 @@ function be() {
   return s;
 }
 function Se(e) {
-  return e.map((n) => n.type === $e ? Se(n.children) : n).flat();
+  return e.map((n) => n.type === Ae ? Se(n.children) : n).flat();
 }
-function $() {
+function A() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-  if ($.cache.has(e)) return $.cache.get(e);
+  if (A.cache.has(e)) return A.cache.get(e);
   const n = e.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-  return $.cache.set(e, n), n;
+  return A.cache.set(e, n), n;
 }
-$.cache = /* @__PURE__ */ new Map();
-function _e(e) {
-  const n = Ce({}), t = x(e);
-  return Ve(() => {
+A.cache = /* @__PURE__ */ new Map();
+function we(e) {
+  const n = Ve({}), t = b(e);
+  return be(() => {
     for (const s in t.value)
       n[s] = t.value[s];
   }, {
     flush: "sync"
-  }), De(n);
+  }), Me(n);
 }
-function en(e, n) {
+function nn(e, n) {
   return e.includes(n);
 }
-const I = 2.4, le = 0.2126729, ie = 0.7151522, re = 0.072175, nn = 0.55, tn = 0.58, sn = 0.57, an = 0.62, U = 0.03, ue = 1.45, ln = 5e-4, rn = 1.25, un = 1.25, oe = 0.078, ce = 12.82051282051282, G = 0.06, fe = 1e-3;
-function de(e, n) {
-  const t = (e.r / 255) ** I, s = (e.g / 255) ** I, a = (e.b / 255) ** I, i = (n.r / 255) ** I, u = (n.g / 255) ** I, g = (n.b / 255) ** I;
-  let o = t * le + s * ie + a * re, f = i * le + u * ie + g * re;
-  if (o <= U && (o += (U - o) ** ue), f <= U && (f += (U - f) ** ue), Math.abs(f - o) < ln) return 0;
-  let h;
+const D = 2.4, re = 0.2126729, ie = 0.7151522, ue = 0.072175, tn = 0.55, sn = 0.58, an = 0.57, ln = 0.62, U = 0.03, oe = 1.45, rn = 5e-4, un = 1.25, on = 1.25, ce = 0.078, fe = 12.82051282051282, G = 0.06, de = 1e-3;
+function me(e, n) {
+  const t = (e.r / 255) ** D, s = (e.g / 255) ** D, a = (e.b / 255) ** D, r = (n.r / 255) ** D, u = (n.g / 255) ** D, y = (n.b / 255) ** D;
+  let o = t * re + s * ie + a * ue, f = r * re + u * ie + y * ue;
+  if (o <= U && (o += (U - o) ** oe), f <= U && (f += (U - f) ** oe), Math.abs(f - o) < rn) return 0;
+  let v;
   if (f > o) {
-    const y = (f ** nn - o ** tn) * rn;
-    h = y < fe ? 0 : y < oe ? y - y * ce * G : y - G;
+    const g = (f ** tn - o ** sn) * un;
+    v = g < de ? 0 : g < ce ? g - g * fe * G : g - G;
   } else {
-    const y = (f ** an - o ** sn) * un;
-    h = y > -fe ? 0 : y > -oe ? y - y * ce * G : y + G;
+    const g = (f ** ln - o ** an) * on;
+    v = g > -de ? 0 : g > -ce ? g - g * fe * G : g + G;
   }
-  return h * 100;
+  return v * 100;
 }
 function R(e) {
-  Ae(`Vuetify: ${e}`);
+  Pe(`Vuetify: ${e}`);
 }
 function J(e) {
   return !!e && /^(#|var\(--|(rgb|hsl)a?\()/.test(e);
 }
-function on(e) {
+function cn(e) {
   return J(e) && !/^((rgb|hsl)a?\()?var\(--/.test(e);
 }
-const me = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/, cn = {
+const ge = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/, fn = {
   rgb: (e, n, t, s) => ({
     r: e,
     g: n,
@@ -130,72 +130,72 @@ const me = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/, cn = {
     b: t,
     a: s
   }),
-  hsl: (e, n, t, s) => ge({
+  hsl: (e, n, t, s) => ye({
     h: e,
     s: n,
     l: t,
     a: s
   }),
-  hsla: (e, n, t, s) => ge({
+  hsla: (e, n, t, s) => ye({
     h: e,
     s: n,
     l: t,
     a: s
   }),
-  hsv: (e, n, t, s) => O({
+  hsv: (e, n, t, s) => N({
     h: e,
     s: n,
     v: t,
     a: s
   }),
-  hsva: (e, n, t, s) => O({
+  hsva: (e, n, t, s) => N({
     h: e,
     s: n,
     v: t,
     a: s
   })
 };
-function T(e) {
+function z(e) {
   if (typeof e == "number")
     return (isNaN(e) || e < 0 || e > 16777215) && R(`'${e}' is not a valid hex color`), {
       r: (e & 16711680) >> 16,
       g: (e & 65280) >> 8,
       b: e & 255
     };
-  if (typeof e == "string" && me.test(e)) {
+  if (typeof e == "string" && ge.test(e)) {
     const {
       groups: n
-    } = e.match(me), {
+    } = e.match(ge), {
       fn: t,
       values: s
-    } = n, a = s.split(/,\s*/).map((i) => i.endsWith("%") && ["hsl", "hsla", "hsv", "hsva"].includes(t) ? parseFloat(i) / 100 : parseFloat(i));
-    return cn[t](...a);
+    } = n, a = s.split(/,\s*/).map((r) => r.endsWith("%") && ["hsl", "hsla", "hsv", "hsva"].includes(t) ? parseFloat(r) / 100 : parseFloat(r));
+    return fn[t](...a);
   } else if (typeof e == "string") {
     let n = e.startsWith("#") ? e.slice(1) : e;
     [3, 4].includes(n.length) ? n = n.split("").map((s) => s + s).join("") : [6, 8].includes(n.length) || R(`'${e}' is not a valid hex(a) color`);
     const t = parseInt(n, 16);
-    return (isNaN(t) || t < 0 || t > 4294967295) && R(`'${e}' is not a valid hex(a) color`), fn(n);
+    return (isNaN(t) || t < 0 || t > 4294967295) && R(`'${e}' is not a valid hex(a) color`), dn(n);
   } else if (typeof e == "object") {
     if (K(e, ["r", "g", "b"]))
       return e;
     if (K(e, ["h", "s", "l"]))
-      return O(pe(e));
+      return N(Fe(e));
     if (K(e, ["h", "s", "v"]))
-      return O(e);
+      return N(e);
   }
   throw new TypeError(`Invalid color: ${e == null ? e : String(e) || e.constructor.name}
 Expected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`);
 }
-function O(e) {
+function N(e) {
   const {
     h: n,
     s: t,
     v: s,
     a
-  } = e, i = (g) => {
-    const o = (g + n / 60) % 6;
+  } = e, r = (y) => {
+    const o = (y + n / 60) % 6;
     return s - s * t * Math.max(Math.min(o, 4 - o, 1), 0);
-  }, u = [i(5), i(3), i(1)].map((g) => Math.round(g * 255));
+  }, u = [r(5), r(3), r(1)].map((y) => Math.round(y * 255));
   return {
     r: u[0],
     g: u[1],
@@ -203,26 +203,26 @@ function O(e) {
     a
   };
 }
-function ge(e) {
-  return O(pe(e));
+function ye(e) {
+  return N(Fe(e));
 }
-function pe(e) {
+function Fe(e) {
   const {
     h: n,
     s: t,
     l: s,
     a
-  } = e, i = s + t * Math.min(s, 1 - s), u = i === 0 ? 0 : 2 - 2 * s / i;
+  } = e, r = s + t * Math.min(s, 1 - s), u = r === 0 ? 0 : 2 - 2 * s / r;
   return {
     h: n,
     s: u,
-    v: i,
+    v: r,
     a
   };
 }
-function fn(e) {
-  e = dn(e);
-  let [n, t, s, a] = je(e, 2).map((i) => parseInt(i, 16));
+function dn(e) {
+  e = mn(e);
+  let [n, t, s, a] = en(e, 2).map((r) => parseInt(r, 16));
   return a = a === void 0 ? a : a / 255, {
     r: n,
     g: t,
@@ -230,25 +230,25 @@ function fn(e) {
     a
   };
 }
-function dn(e) {
-  return e.startsWith("#") && (e = e.slice(1)), e = e.replace(/([^0-9a-f])/gi, "F"), (e.length === 3 || e.length === 4) && (e = e.split("").map((n) => n + n).join("")), e.length !== 6 && (e = ae(ae(e, 6), 8, "F")), e;
-}
 function mn(e) {
-  const n = Math.abs(de(T(0), T(e)));
-  return Math.abs(de(T(16777215), T(e))) > Math.min(n, 50) ? "#fff" : "#000";
+  return e.startsWith("#") && (e = e.slice(1)), e = e.replace(/([^0-9a-f])/gi, "F"), (e.length === 3 || e.length === 4) && (e = e.split("").map((n) => n + n).join("")), e.length !== 6 && (e = le(le(e, 6), 8, "F")), e;
+}
+function gn(e) {
+  const n = Math.abs(me(z(0), z(e)));
+  return Math.abs(me(z(16777215), z(e))) > Math.min(n, 50) ? "#fff" : "#000";
 }
 function H(e, n) {
-  const t = Me();
+  const t = Le();
   if (!t)
     throw new Error(`[Vuetify] ${e} must be called from inside a setup function`);
   return t;
 }
-function gn() {
+function yn() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "composables";
   const n = H(e).type;
-  return $((n == null ? void 0 : n.aliasName) || (n == null ? void 0 : n.name));
+  return A((n == null ? void 0 : n.aliasName) || (n == null ? void 0 : n.name));
 }
-function yn(e) {
+function hn(e) {
   let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : H("injectSelf");
   const {
     provides: t
@@ -257,107 +257,107 @@ function yn(e) {
     return t[e];
 }
 const Q = Symbol.for("vuetify:defaults");
-function we() {
+function Be() {
   const e = j(Q);
   if (!e) throw new Error("[Vuetify] Could not find defaults instance");
   return e;
 }
-function hn(e, n) {
+function vn(e, n) {
   var t, s;
-  return typeof ((t = e.props) == null ? void 0 : t[n]) < "u" || typeof ((s = e.props) == null ? void 0 : s[$(n)]) < "u";
+  return typeof ((t = e.props) == null ? void 0 : t[n]) < "u" || typeof ((s = e.props) == null ? void 0 : s[A(n)]) < "u";
 }
-function vn() {
-  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 ? arguments[1] : void 0, t = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : we();
+function kn() {
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 ? arguments[1] : void 0, t = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : Be();
   const s = H("useDefaults");
   if (n = n ?? s.type.name ?? s.type.__name, !n)
     throw new Error("[Vuetify] Could not determine component name");
-  const a = x(() => {
+  const a = b(() => {
     var o;
     return (o = t.value) == null ? void 0 : o[e._as ?? n];
-  }), i = new Proxy(e, {
+  }), r = new Proxy(e, {
     get(o, f) {
-      var y, _, p, b, E, M, W;
-      const h = Reflect.get(o, f);
-      return f === "class" || f === "style" ? [(y = a.value) == null ? void 0 : y[f], h].filter((c) => c != null) : typeof f == "string" && !hn(s.vnode, f) ? ((_ = a.value) == null ? void 0 : _[f]) !== void 0 ? (p = a.value) == null ? void 0 : p[f] : ((E = (b = t.value) == null ? void 0 : b.global) == null ? void 0 : E[f]) !== void 0 ? (W = (M = t.value) == null ? void 0 : M.global) == null ? void 0 : W[f] : h : h;
+      var g, w, F, _, E, P, W;
+      const v = Reflect.get(o, f);
+      return f === "class" || f === "style" ? [(g = a.value) == null ? void 0 : g[f], v].filter((c) => c != null) : typeof f == "string" && !vn(s.vnode, f) ? ((w = a.value) == null ? void 0 : w[f]) !== void 0 ? (F = a.value) == null ? void 0 : F[f] : ((E = (_ = t.value) == null ? void 0 : _.global) == null ? void 0 : E[f]) !== void 0 ? (W = (P = t.value) == null ? void 0 : P.global) == null ? void 0 : W[f] : v : v;
     }
-  }), u = Le();
-  Ve(() => {
+  }), u = Te();
+  be(() => {
     if (a.value) {
       const o = Object.entries(a.value).filter((f) => {
-        let [h] = f;
-        return h.startsWith(h[0].toUpperCase());
+        let [v] = f;
+        return v.startsWith(v[0].toUpperCase());
       });
       u.value = o.length ? Object.fromEntries(o) : void 0;
     } else
       u.value = void 0;
   });
-  function g() {
-    const o = yn(Q, s);
-    xe(Q, x(() => u.value ? be((o == null ? void 0 : o.value) ?? {}, u.value) : o == null ? void 0 : o.value));
+  function y() {
+    const o = hn(Q, s);
+    _e(Q, b(() => u.value ? pe((o == null ? void 0 : o.value) ?? {}, u.value) : o == null ? void 0 : o.value));
   }
   return {
-    props: i,
-    provideSubDefaults: g
+    props: r,
+    provideSubDefaults: y
   };
 }
 function X(e) {
   if (e._setup = e._setup ?? e.setup, !e.name)
     return R("The component is missing an explicit name, unable to generate default prop value"), e;
   if (e._setup) {
-    e.props = F(e.props ?? {}, e.name)();
+    e.props = I(e.props ?? {}, e.name)();
     const n = Object.keys(e.props).filter((t) => t !== "class" && t !== "style");
     e.filterProps = function(s) {
-      return Qe(s, n);
+      return je(s, n);
     }, e.props._as = String, e.setup = function(s, a) {
-      const i = we();
-      if (!i.value) return e._setup(s, a);
+      const r = Be();
+      if (!r.value) return e._setup(s, a);
       const {
         props: u,
-        provideSubDefaults: g
-      } = vn(s, s._as ?? e.name, i), o = e._setup(u, a);
-      return g(), o;
+        provideSubDefaults: y
+      } = kn(s, s._as ?? e.name, r), o = e._setup(u, a);
+      return y(), o;
     };
   }
   return e;
 }
-function Fe() {
+function Ie() {
   let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !0;
-  return (n) => (e ? X : A)(n);
+  return (n) => (e ? X : M)(n);
 }
-function kn(e) {
+function Cn(e) {
   const n = H("useRender");
   n.render = e;
 }
-const ye = Symbol.for("vuetify:theme"), Cn = F({
+const he = Symbol.for("vuetify:theme"), Vn = I({
   theme: String
 }, "theme");
-function Vn(e) {
+function bn(e) {
   H("provideTheme");
-  const n = j(ye, null);
+  const n = j(he, null);
   if (!n) throw new Error("Could not find Vuetify theme injection");
-  const t = x(() => e.theme ?? n.name.value), s = x(() => n.themes.value[t.value]), a = x(() => n.isDisabled ? void 0 : `v-theme--${t.value}`), i = {
+  const t = b(() => e.theme ?? n.name.value), s = b(() => n.themes.value[t.value]), a = b(() => n.isDisabled ? void 0 : `v-theme--${t.value}`), r = {
     ...n,
     name: t,
     current: s,
     themeClasses: a
   };
-  return xe(ye, i), i;
+  return _e(he, r), r;
 }
-const xn = F({
+const _n = I({
   tag: {
     type: String,
     default: "div"
   }
 }, "tag");
-function bn(e) {
-  return _e(() => {
+function xn(e) {
+  return we(() => {
     const n = [], t = {};
     if (e.value.background)
       if (J(e.value.background)) {
-        if (t.backgroundColor = e.value.background, !e.value.text && on(e.value.background)) {
-          const s = T(e.value.background);
+        if (t.backgroundColor = e.value.background, !e.value.text && cn(e.value.background)) {
+          const s = z(e.value.background);
           if (s.a == null || s.a === 1) {
-            const a = mn(s);
+            const a = gn(s);
             t.color = a, t.caretColor = a;
           }
         }
@@ -369,28 +369,28 @@ function bn(e) {
     };
   });
 }
-function Sn(e, n) {
-  const t = x(() => ({
-    text: Pe(e) ? e.value : null
+function pn(e, n) {
+  const t = b(() => ({
+    text: ze(e) ? e.value : null
   })), {
     colorClasses: s,
     colorStyles: a
-  } = bn(t);
+  } = xn(t);
   return {
     textColorClasses: s,
     textColorStyles: a
   };
 }
-const Be = [String, Function, Object, Array], _n = Symbol.for("vuetify:icons"), Y = F({
+const $e = [String, Function, Object, Array], Sn = Symbol.for("vuetify:icons"), Y = I({
   icon: {
-    type: Be
+    type: $e
   },
   // Could not remove this and use makeTagProps, types complained because it is not required
   tag: {
     type: String,
     required: !0
   }
-}, "icon"), he = Fe()({
+}, "icon"), ve = Ie()({
   name: "VComponentIcon",
   props: Y(),
   setup(e, n) {
@@ -407,7 +407,7 @@ const Be = [String, Function, Object, Array], _n = Symbol.for("vuetify:icons"),
       });
     };
   }
-}), pn = X({
+}), wn = X({
   name: "VSvgIcon",
   inheritAttrs: !1,
   props: Y(),
@@ -415,7 +415,7 @@ const Be = [String, Function, Object, Array], _n = Symbol.for("vuetify:icons"),
     let {
       attrs: t
     } = n;
-    return () => C(e.tag, Te(t, {
+    return () => C(e.tag, xe(t, {
       style: null
     }), {
       default: () => [C("svg", {
@@ -453,111 +453,136 @@ X({
     }, null);
   }
 });
-const wn = (e) => {
-  const n = j(_n);
+const Fn = (e) => {
+  const n = j(Sn);
   if (!n) throw new Error("Missing Vuetify Icons provide!");
   return {
-    iconData: x(() => {
+    iconData: b(() => {
       var o;
       const s = q(e);
       if (!s) return {
-        component: he
+        component: ve
       };
       let a = s;
       if (typeof a == "string" && (a = a.trim(), a.startsWith("$") && (a = (o = n.aliases) == null ? void 0 : o[a.slice(1)])), a || R(`Could not find aliased icon "${s}"`), Array.isArray(a))
         return {
-          component: pn,
+          component: wn,
           icon: a
         };
       if (typeof a != "string")
         return {
-          component: he,
+          component: ve,
           icon: a
         };
-      const i = Object.keys(n.sets).find((f) => typeof a == "string" && a.startsWith(`${f}:`)), u = i ? a.slice(i.length + 1) : a;
+      const r = Object.keys(n.sets).find((f) => typeof a == "string" && a.startsWith(`${f}:`)), u = r ? a.slice(r.length + 1) : a;
       return {
-        component: n.sets[i ?? n.defaultSet].component,
+        component: n.sets[r ?? n.defaultSet].component,
         icon: u
       };
     })
   };
-}, Fn = ["x-small", "small", "default", "large", "x-large"], Bn = F({
+}, Bn = ["x-small", "small", "default", "large", "x-large"], In = I({
   size: {
     type: [String, Number],
     default: "default"
   }
 }, "size");
-function In(e) {
-  let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : gn();
-  return _e(() => {
+function $n(e) {
+  let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : yn();
+  return we(() => {
     let t, s;
-    return en(Fn, e.size) ? t = `${n}--size-${e.size}` : e.size && (s = {
-      width: z(e.size),
-      height: z(e.size)
+    return nn(Bn, e.size) ? t = `${n}--size-${e.size}` : e.size && (s = {
+      width: O(e.size),
+      height: O(e.size)
     }), {
       sizeClasses: t,
       sizeStyles: s
     };
   });
 }
-const $n = F({
+const Dn = I({
   color: String,
   disabled: Boolean,
   start: Boolean,
   end: Boolean,
-  icon: Be,
-  ...Je(),
-  ...Bn(),
-  ...xn({
+  icon: $e,
+  ...Qe(),
+  ...In(),
+  ..._n({
     tag: "i"
   }),
-  ...Cn()
-}, "VIcon"), Dn = Fe()({
+  ...Vn()
+}, "VIcon"), An = Ie()({
   name: "VIcon",
-  props: $n(),
+  props: Dn(),
   setup(e, n) {
     let {
       attrs: t,
       slots: s
     } = n;
-    const a = P(), {
-      themeClasses: i
-    } = Vn(e), {
+    const a = T(), {
+      themeClasses: r
+    } = bn(e), {
       iconData: u
-    } = wn(x(() => a.value || e.icon)), {
-      sizeClasses: g
-    } = In(e), {
+    } = Fn(b(() => a.value || e.icon)), {
+      sizeClasses: y
+    } = $n(e), {
       textColorClasses: o,
       textColorStyles: f
-    } = Sn(ze(e, "color"));
-    return kn(() => {
-      var _, p;
-      const h = (_ = s.default) == null ? void 0 : _.call(s);
-      h && (a.value = (p = Se(h).filter((b) => b.type === Re && b.children && typeof b.children == "string")[0]) == null ? void 0 : p.children);
-      const y = !!(t.onClick || t.onClickOnce);
+    } = pn(Oe(e, "color"));
+    return Cn(() => {
+      var w, F;
+      const v = (w = s.default) == null ? void 0 : w.call(s);
+      v && (a.value = (F = Se(v).filter((_) => _.type === Re && _.children && typeof _.children == "string")[0]) == null ? void 0 : F.children);
+      const g = !!(t.onClick || t.onClickOnce);
       return C(u.value.component, {
         tag: e.tag,
         icon: u.value.icon,
-        class: ["v-icon", "notranslate", i.value, g.value, o.value, {
-          "v-icon--clickable": y,
+        class: ["v-icon", "notranslate", r.value, y.value, o.value, {
+          "v-icon--clickable": g,
           "v-icon--disabled": e.disabled,
           "v-icon--start": e.start,
           "v-icon--end": e.end
         }, e.class],
-        style: [g.value ? void 0 : {
-          fontSize: z(e.size),
-          height: z(e.size),
-          width: z(e.size)
+        style: [y.value ? void 0 : {
+          fontSize: O(e.size),
+          height: O(e.size),
+          width: O(e.size)
         }, f.value, e.style],
-        role: y ? "button" : void 0,
-        "aria-hidden": !y,
-        tabindex: y ? e.disabled ? -1 : 0 : void 0
+        role: g ? "button" : void 0,
+        "aria-hidden": !g,
+        tabindex: g ? e.disabled ? -1 : 0 : void 0
       }, {
-        default: () => [h]
+        default: () => [v]
       });
     }), {};
   }
-}), An = /* @__PURE__ */ A({
+}), Mn = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [s, a] of n)
+    t[s] = a;
+  return t;
+}, Pn = {};
+function Ln(e, n) {
+  const t = p("v-btn"), s = p("v-color-picker"), a = p("v-menu");
+  return S(), B(a, { "close-on-content-click": !1 }, {
+    activator: ne(({ props: r }) => [
+      C(t, xe(r, {
+        density: "comfortable",
+        color: "#00000000",
+        block: ""
+      }), null, 16)
+    ]),
+    default: ne(() => [
+      C(s, {
+        "show-swatches": "",
+        "swatches-max-height": "150px"
+      })
+    ]),
+    _: 1
+  });
+}
+const Tn = /* @__PURE__ */ Mn(Pn, [["render", Ln]]), zn = /* @__PURE__ */ M({
   __name: "index",
   props: /* @__PURE__ */ Z({
     min: { default: () => -1 / 0 },
@@ -573,11 +598,12 @@ const $n = F({
   setup(e) {
     const n = ee(e, "modelValue");
     return (t, s) => {
-      const a = N("v-number-input");
-      return w(), D(a, {
+      const a = p("v-number-input");
+      return S(), B(a, {
         modelValue: n.value,
-        "onUpdate:modelValue": s[0] || (s[0] = (i) => n.value = i),
+        "onUpdate:modelValue": s[0] || (s[0] = (r) => n.value = r),
         density: "compact",
+        "control-variant": "stacked",
         min: t.min,
         max: t.max,
         precision: t.precision,
@@ -588,7 +614,7 @@ const $n = F({
       }, null, 8, ["modelValue", "min", "max", "precision", "step", "readonly"]);
     };
   }
-}), Mn = /* @__PURE__ */ A({
+}), On = /* @__PURE__ */ M({
   __name: "index",
   props: /* @__PURE__ */ Z({
     readonly: { type: Boolean, default: !1 },
@@ -601,10 +627,10 @@ const $n = F({
   setup(e) {
     const n = ee(e, "modelValue");
     return (t, s) => {
-      const a = N("v-select");
-      return w(), D(a, {
+      const a = p("v-select");
+      return S(), B(a, {
         modelValue: n.value,
-        "onUpdate:modelValue": s[0] || (s[0] = (i) => n.value = i),
+        "onUpdate:modelValue": s[0] || (s[0] = (r) => n.value = r),
         density: "compact",
         items: t.items,
         "hide-details": "",
@@ -613,7 +639,7 @@ const $n = F({
       }, null, 8, ["modelValue", "items", "readonly"]);
     };
   }
-}), ve = /* @__PURE__ */ A({
+}), ke = /* @__PURE__ */ M({
   __name: "index",
   props: /* @__PURE__ */ Z({
     readonly: { type: Boolean, default: !1 },
@@ -625,21 +651,21 @@ const $n = F({
   emits: /* @__PURE__ */ Z(["delete"], ["update:modelValue"]),
   setup(e, { emit: n }) {
     const t = ee(e, "modelValue"), s = n;
-    return (a, i) => {
-      const u = N("v-text-field");
-      return w(), D(u, {
+    return (a, r) => {
+      const u = p("v-text-field");
+      return S(), B(u, {
         modelValue: t.value,
-        "onUpdate:modelValue": i[0] || (i[0] = (g) => t.value = g),
+        "onUpdate:modelValue": r[0] || (r[0] = (y) => t.value = y),
         density: "compact",
-        "append-inner-icon": a.hasDelete ? q(Ye) : "",
+        "append-inner-icon": a.hasDelete ? q(Ke) : "",
         "hide-details": "",
         "single-line": "",
         readonly: a.readonly,
-        "onClick:appendInner": i[1] || (i[1] = (g) => s("delete"))
+        "onClick:appendInner": r[1] || (r[1] = (y) => s("delete"))
       }, null, 8, ["modelValue", "append-inner-icon", "readonly"]);
     };
   }
-}), ke = /* @__PURE__ */ A({
+}), Ce = /* @__PURE__ */ M({
   __name: "index",
   props: {
     title: {},
@@ -650,40 +676,40 @@ const $n = F({
   },
   emits: ["collapse", "create", "delete"],
   setup(e, { emit: n }) {
-    const t = e, s = n, a = x(() => ({
+    const t = n, s = b(() => ({
       height: "36px"
     }));
-    return (i, u) => {
-      const g = N("v-icon"), o = N("v-spacer"), f = Ne("ripple");
-      return Oe((w(), He("div", {
+    return (a, r) => {
+      const u = p("v-icon"), y = p("v-spacer"), o = Ne("ripple");
+      return He((S(), Ee("div", {
         class: "d-flex align-center",
-        style: Ee(a.value),
-        onClick: u[2] || (u[2] = (h) => s("collapse", !t.collapse))
+        style: We(s.value),
+        onClick: r[2] || (r[2] = (f) => t("collapse", !a.collapse))
       }, [
-        C(g, {
+        C(u, {
           class: "mr-1",
-          icon: t.collapse ? q(Xe) : q(Ze)
+          icon: a.collapse ? q(Ye) : q(Xe)
         }, null, 8, ["icon"]),
-        We("span", null, Ue(t.title), 1),
-        C(o),
-        t.hasCreate ? (w(), D(g, {
+        Ue("span", null, Ge(a.title), 1),
+        C(y),
+        a.hasCreate ? (S(), B(u, {
           key: 0,
           class: "ml-3",
           icon: "$plus",
-          onClick: u[0] || (u[0] = ne((h) => s("create"), ["stop"]))
-        })) : te("", !0),
-        t.hasDelete ? (w(), D(g, {
+          onClick: r[0] || (r[0] = te((f) => t("create"), ["stop"]))
+        })) : se("", !0),
+        a.hasDelete ? (S(), B(u, {
           key: 1,
           class: "ml-3",
           icon: "$sub",
-          onClick: u[1] || (u[1] = ne((h) => s("delete", t.index), ["stop"]))
-        })) : te("", !0)
+          onClick: r[1] || (r[1] = te((f) => t("delete", a.index), ["stop"]))
+        })) : se("", !0)
       ], 4)), [
-        [f]
+        [o]
       ]);
     };
   }
-}), Ln = /* @__PURE__ */ A({
+}), Rn = /* @__PURE__ */ M({
   __name: "index",
   props: {
     unique: {},
@@ -692,22 +718,22 @@ const $n = F({
   },
   emits: ["change"],
   setup(e, { emit: n }) {
-    const { t } = Ge(), { backgroundColor2: s } = qe(), a = e, i = n, u = P("20px"), g = P("56px"), o = P("10px"), f = P("250px"), h = Ce({});
-    function y(c, l, r, m) {
-      return l.keyFlag || (c !== "" && (c += "."), c += l.key), l.children ? l.array ? _(c, l, r, m) : p(c, l, r, m) : l.array ? b(c, l, r) : E(c, l, r);
+    const { t } = qe(), { backgroundColor2: s } = Ze(), a = e, r = n, u = T("20px"), y = T("56px"), o = T("10px"), f = T("250px"), v = Ve({});
+    function g(c, l, i, d) {
+      return l.keyFlag || (c !== "" && (c += "."), c += l.key), l.children ? l.array ? w(c, l, i, d) : F(c, l, i, d) : l.array ? _(c, l, i) : E(c, l, i);
     }
-    function _(c, l, r, m) {
-      r[l.key] instanceof Array || (r[l.key] = [], i("change", c, r[l.key]));
-      const V = k(ke, {
+    function w(c, l, i, d) {
+      i[l.key] instanceof Array || (i[l.key] = [], r("change", c, i[l.key]));
+      const V = k(Ce, {
         title: t(l.name),
-        collapse: !!m.collapse,
-        onCollapse: (d) => {
-          m.collapse = d;
+        collapse: !!d.collapse,
+        onCollapse: (m) => {
+          d.collapse = m;
         },
         onCreate: () => {
-          r[l.key].push({}), i("change", c, r[l.key]);
+          i[l.key].push({}), r("change", c, i[l.key]);
         }
-      }), v = k(
+      }), h = k(
         "div",
         {
           style: {
@@ -715,9 +741,9 @@ const $n = F({
           }
         },
         (() => {
-          m[l.key] instanceof Array || (m[l.key] = []);
-          for (let d = 0; d < r[l.key].length; d++)
-            typeof m[l.key][d] != "object" && (m[l.key][d] = {
+          d[l.key] instanceof Array || (d[l.key] = []);
+          for (let m = 0; m < i[l.key].length; m++)
+            typeof d[l.key][m] != "object" && (d[l.key][m] = {
               collapse: !0
             });
           return [];
@@ -732,19 +758,19 @@ const $n = F({
           }
         },
         (() => {
-          const d = [];
-          return d.push(V), m.collapse || d.push(v), d;
+          const m = [];
+          return m.push(V), d.collapse || m.push(h), m;
         })()
       );
     }
-    function p(c, l, r, m) {
-      const V = k(ke, {
+    function F(c, l, i, d) {
+      const V = k(Ce, {
         title: t(l.name),
-        collapse: !!m.collapse,
-        onCollapse: (d) => {
-          m.collapse = d;
+        collapse: !!d.collapse,
+        onCollapse: (m) => {
+          d.collapse = m;
         }
-      }), v = k(
+      }), h = k(
         "div",
         {
           style: {
@@ -752,20 +778,20 @@ const $n = F({
           }
         },
         (() => {
-          var B;
-          const d = [];
-          return (B = l.children) == null || B.forEach((S) => {
-            typeof m[S.key] != "object" && (m[S.key] = {
+          var $;
+          const m = [];
+          return ($ = l.children) == null || $.forEach((x) => {
+            typeof d[x.key] != "object" && (d[x.key] = {
               collapse: !0
             });
-            const Ie = y(
+            const De = g(
               c,
-              S,
-              l.keyFlag ? r : (typeof r[l.key] != "object" && (r[l.key] = {}, i("change", c, r[l.key])), r[l.key]),
-              m[S.key]
+              x,
+              l.keyFlag ? i : (typeof i[l.key] != "object" && (i[l.key] = {}, r("change", c, i[l.key])), i[l.key]),
+              d[x.key]
             );
-            d.push(Ie);
-          }), d;
+            m.push(De);
+          }), m;
         })()
       );
       return k(
@@ -777,41 +803,41 @@ const $n = F({
           }
         },
         (() => {
-          const d = [];
-          return d.push(V), m.collapse || d.push(v), d;
+          const m = [];
+          return m.push(V), d.collapse || m.push(h), m;
         })()
       );
     }
-    function b(c, l, r) {
-      r[l.key] instanceof Array || (r[l.key] = L(l), i("change", c, r[l.key]));
-      let m = () => [];
-      return l.ui === "strInput" ? m = () => {
+    function _(c, l, i) {
+      i[l.key] instanceof Array || (i[l.key] = L(l), r("change", c, i[l.key]));
+      let d = () => [];
+      return l.ui === "strInput" ? d = () => {
         const V = [];
-        for (let d = 0; d < r[l.key].length; d++) {
-          const B = k(
+        for (let m = 0; m < i[l.key].length; m++) {
+          const $ = k(
             "div",
             {
               class: "d-flex align-center justify-center",
               style: {
-                height: g.value
+                height: y.value
               }
             },
             [
-              k(ve, {
-                modelValue: r[l.key][d],
-                "onUpdate:modelValue": (S) => {
-                  r[l.key][d] = S, i("change", c, r[l.key]);
+              k(ke, {
+                modelValue: i[l.key][m],
+                "onUpdate:modelValue": (x) => {
+                  i[l.key][m] = x, r("change", c, i[l.key]);
                 },
                 hasDelete: !0,
                 onDelete: () => {
-                  r[l.key].splice(d, 1), i("change", c, r[l.key]);
+                  i[l.key].splice(m, 1), r("change", c, i[l.key]);
                 }
               })
             ]
           );
-          V.push(B);
+          V.push($);
         }
-        const v = k(
+        const h = k(
           "div",
           {
             class: "d-flex align-center justify-center",
@@ -825,53 +851,53 @@ const $n = F({
               border: "thin dashed #bdbdbd"
             },
             onClick: () => {
-              r[l.key].push(""), i("change", c, r[l.key]);
+              i[l.key].push(""), r("change", c, i[l.key]);
             }
           },
-          [k(Dn, { icon: Ke })]
+          [k(An, { icon: Je })]
         );
-        return V.push(v), V;
-      } : console.assert(!1, "invalid prop ui", l.ui), M(t(l.name), m());
+        return V.push(h), V;
+      } : console.assert(!1, "invalid prop ui", l.ui), P(t(l.name), d());
     }
-    function E(c, l, r) {
-      let m = () => [];
-      return l.ui === "void" ? r[l.key] === void 0 && (console.assert(l.default !== void 0), r[l.key] = L(l), i("change", c, r[l.key])) : l.ui === "strInput" ? m = () => [k(ve, {
-        modelValue: l.static ? l.value : (typeof r[l.key] != "string" && (r[l.key] = L(l), i("change", c, r[l.key])), r[l.key]),
-        "onUpdate:modelValue": (v) => {
-          l.static || v !== r[l.key] && (r[l.key] = v, i("change", c, v));
+    function E(c, l, i) {
+      let d = () => [];
+      return l.ui === "void" ? i[l.key] === void 0 && (console.assert(l.default !== void 0), i[l.key] = L(l), r("change", c, i[l.key])) : l.ui === "strInput" ? d = () => [k(ke, {
+        modelValue: l.static ? l.value : (typeof i[l.key] != "string" && (i[l.key] = L(l), r("change", c, i[l.key])), i[l.key]),
+        "onUpdate:modelValue": (h) => {
+          l.static || h !== i[l.key] && (i[l.key] = h, r("change", c, h));
         },
         readonly: l.static || l.readonly
-      })] : l.ui === "numInput" ? m = () => [k(An, {
-        modelValue: (typeof r[l.key] != "number" && (r[l.key] = L(l), i("change", c, r[l.key])), r[l.key]),
-        "onUpdate:modelValue": (v) => {
-          v !== r[l.key] && (r[l.key] = v, i("change", c, v));
+      })] : l.ui === "numInput" ? d = () => [k(zn, {
+        modelValue: (typeof i[l.key] != "number" && (i[l.key] = L(l), r("change", c, i[l.key])), i[l.key]),
+        "onUpdate:modelValue": (h) => {
+          h !== i[l.key] && (i[l.key] = h, r("change", c, h));
         },
         readonly: l.readonly
-      })] : l.ui === "select" ? m = () => [k(Mn, {
-        modelValue: (typeof r[l.key] != "string" && (r[l.key] = L(l), i("change", c, r[l.key])), r[l.key]),
-        "onUpdate:modelValue": (v) => {
-          v !== r[l.key] && (r[l.key] = v, i("change", c, v));
+      })] : l.ui === "select" ? d = () => [k(On, {
+        modelValue: (typeof i[l.key] != "string" && (i[l.key] = L(l), r("change", c, i[l.key])), i[l.key]),
+        "onUpdate:modelValue": (h) => {
+          h !== i[l.key] && (i[l.key] = h, r("change", c, h));
         },
         items: (() => {
-          var d;
-          const v = [];
-          return (d = l.items) == null || d.forEach(({ title: B, value: S }) => {
-            v.push({
-              title: t(B),
-              value: S
+          var m;
+          const h = [];
+          return (m = l.items) == null || m.forEach(({ title: $, value: x }) => {
+            h.push({
+              title: t($),
+              value: x
             });
-          }), v;
+          }), h;
         })(),
         readonly: l.readonly
-      })] : console.assert(!1, "invalid prop ui", l.ui), M(t(l.name), m());
+      })] : l.ui === "colorPicker" ? d = () => [k(Tn)] : console.assert(!1, "invalid prop ui", l.ui), P(t(l.name), d());
     }
-    function M(c, l) {
+    function P(c, l) {
       return k(
         "div",
         {
           class: "d-flex justify-space-between align-center",
           style: {
-            minHeight: g.value,
+            minHeight: y.value,
             marginRight: o.value
           }
         },
@@ -889,21 +915,21 @@ const $n = F({
       (() => {
         const c = [];
         if (a.unique && a.config && a.object) {
-          h[a.unique] || (h[a.unique] = {});
-          const l = h[a.unique];
-          a.config.forEach((r) => {
-            const m = y("", r, a.object, l);
-            c.push(m);
+          v[a.unique] || (v[a.unique] = {});
+          const l = v[a.unique];
+          a.config.forEach((i) => {
+            const d = g("", i, a.object, l);
+            c.push(d);
           });
         }
         return c;
       })()
     );
-    return (c, l) => (w(), D(W));
+    return (c, l) => (S(), B(W));
   }
-}), Pn = (e) => {
-  e.component("XPropTree", Ln);
-}, On = { install: Pn };
+}), Nn = (e) => {
+  e.component("XPropTree", Rn);
+}, Gn = { install: Nn };
 export {
-  On as default
+  Gn as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "x-prop-tree",
   "private": false,
-  "version": "0.4.5",
+  "version": "0.4.6",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
     "vue-i18n": "^10.0.4",
     "vuetify": "^3.7.3",
     "x-essential-lib": "^0.7.3",
-    "x-runtime-lib": "^0.4.6"
+    "x-runtime-lib": "^0.4.7"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.0",