x-essential-lib 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { DefineComponent } from 'vue'
+import { DefineComponent, ComputedRef, Ref } from 'vue'
 
 export declare const XConfirmDlg: DefineComponent<
   {
@@ -7,7 +7,7 @@ export declare const XConfirmDlg: DefineComponent<
       required: true
     }
   },
-        {
+  {
     'update:modelValue'(value: boolean): void
   },
   unknown
@@ -41,6 +41,23 @@ export declare const XPromptDlg: DefineComponent<
 
 export declare const XMessage: DefineComponent<{}, {}, unknown>
 
+export declare function useColor(): {
+  primaryColor: ComputedRef<string>
+  secondaryColor: ComputedRef<string>
+  backgroundColor0: ComputedRef<string>
+  backgroundColor1: ComputedRef<string>
+  backgroundColor2: ComputedRef<string>
+  highlightColor: ComputedRef<string>
+  borderColor: ComputedRef<string>
+}
+
+export declare function useSystem(): {
+  dark: ComputedRef<boolean>
+  routeTransName: Ref<string>
+  sysBarAvail: ComputedRef<boolean>
+  compactWidth: ComputedRef<string>
+}
+
 export declare function waitMs(ms: number): Promise<void>
 
 export declare function waitUtil(

package/dist/index.js

@@ -1,138 +1,171 @@
 (function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('.x-cont[data-v-a8f3d91f]{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center}.lds-spinner[data-v-a8f3d91f]{color:official;display:inline-block;position:relative;width:40px;height:40px}.lds-spinner div[data-v-a8f3d91f]{transform-origin:20px 20px;animation:lds-spinner-a8f3d91f 1.2s linear infinite}.lds-spinner div[data-v-a8f3d91f]:after{content:" ";display:block;position:absolute;top:3px;left:18px;width:2px;height:6px;border-radius:5%;background:#9e9e9e}.lds-spinner div[data-v-a8f3d91f]:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div[data-v-a8f3d91f]:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div[data-v-a8f3d91f]:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div[data-v-a8f3d91f]:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div[data-v-a8f3d91f]:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div[data-v-a8f3d91f]:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div[data-v-a8f3d91f]:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div[data-v-a8f3d91f]:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div[data-v-a8f3d91f]:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div[data-v-a8f3d91f]:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div[data-v-a8f3d91f]:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div[data-v-a8f3d91f]:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner-a8f3d91f{0%{opacity:1}to{opacity:0}}.x-cont[data-v-70ed4b89]{position:absolute;left:50%;bottom:20px;transform:translate(-50%);z-index:9999}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { getCurrentInstance as oe, inject as F, defineComponent as I, useModel as G, ref as _, computed as w, onMounted as W, onBeforeUnmount as L, watch as O, resolveComponent as m, openBlock as V, createBlock as M, withKeys as j, withModifiers as R, withCtx as p, createVNode as g, createTextVNode as h, toDisplayString as D, createElementBlock as K, normalizeStyle as le, pushScopeId as ae, popScopeId as se, createElementVNode as v, reactive as re, Fragment as ce, renderList as ie, unref as ue } from "vue";
-function de(t) {
-  return { all: t = t || /* @__PURE__ */ new Map(), on: function(n, e) {
-    var o = t.get(n);
-    o ? o.push(e) : t.set(n, [e]);
-  }, off: function(n, e) {
-    var o = t.get(n);
-    o && (e ? o.splice(o.indexOf(e) >>> 0, 1) : t.set(n, []));
-  }, emit: function(n, e) {
-    var o = t.get(n);
+import { getCurrentInstance as ae, inject as A, computed as d, defineComponent as I, useModel as H, ref as g, onMounted as W, onBeforeUnmount as U, watch as O, resolveComponent as p, openBlock as k, createBlock as M, withKeys as L, withModifiers as R, withCtx as v, createVNode as y, createTextVNode as h, toDisplayString as b, createElementBlock as z, normalizeStyle as se, pushScopeId as ue, popScopeId as ce, createElementVNode as _, reactive as ie, Fragment as de, renderList as fe, unref as me } from "vue";
+function pe(e) {
+  return { all: e = e || /* @__PURE__ */ new Map(), on: function(n, t) {
+    var o = e.get(n);
+    o ? o.push(t) : e.set(n, [t]);
+  }, off: function(n, t) {
+    var o = e.get(n);
+    o && (t ? o.splice(o.indexOf(t) >>> 0, 1) : e.set(n, []));
+  }, emit: function(n, t) {
+    var o = e.get(n);
     o && o.slice().map(function(l) {
-      l(e);
-    }), (o = t.get("*")) && o.slice().map(function(l) {
-      l(n, e);
+      l(t);
+    }), (o = e.get("*")) && o.slice().map(function(l) {
+      l(n, t);
     });
   } };
 }
-const s = de();
-async function ke(t) {
+const a = pe();
+async function Te(e) {
   return new Promise((n) => {
-    setTimeout(n, t);
+    setTimeout(n, e);
   });
 }
-async function X(t, n, e) {
+async function X(e, n, t) {
   const o = Date.now();
   return new Promise((l) => {
-    const u = async () => {
-      t() ? l(!0) : n && Date.now() - o > n ? l(!1) : setTimeout(u, e ?? 30);
+    const s = async () => {
+      e() ? l(!0) : n && Date.now() - o > n ? l(!1) : setTimeout(s, t ?? 30);
     };
-    u();
+    s();
   });
 }
-function fe(t, n) {
-  const e = oe();
-  if (!e)
-    throw new Error(`[Vuetify] ${t} must be called from inside a setup function`);
-  return e;
+function B() {
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
+  if (B.cache.has(e))
+    return B.cache.get(e);
+  const n = e.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+  return B.cache.set(e, n), n;
 }
-const me = Symbol.for("vuetify:locale");
-function z() {
-  const t = F(me);
+B.cache = /* @__PURE__ */ new Map();
+function J(e, n) {
+  const t = ae();
   if (!t)
-    throw new Error("[Vuetify] Could not find injected locale instance");
+    throw new Error(`[Vuetify] ${e} must be called from inside a setup function`);
   return t;
 }
-const pe = Symbol.for("vuetify:theme");
 function ve() {
-  fe("useTheme");
-  const t = F(pe, null);
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "composables";
+  const n = J(e).type;
+  return B((n == null ? void 0 : n.aliasName) || (n == null ? void 0 : n.name));
+}
+const _e = Symbol.for("vuetify:locale");
+function P() {
+  const e = A(_e);
+  if (!e)
+    throw new Error("[Vuetify] Could not find injected locale instance");
+  return e;
+}
+const ge = Symbol.for("vuetify:display");
+function ye() {
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ve();
+  const t = A(ge);
   if (!t)
+    throw new Error("Could not find Vuetify display injection");
+  const o = d(() => {
+    if (!e.mobileBreakpoint)
+      return t.mobile.value;
+    const s = typeof e.mobileBreakpoint == "number" ? e.mobileBreakpoint : t.thresholds.value[e.mobileBreakpoint];
+    return t.width.value < s;
+  }), l = d(() => n ? {
+    [`${n}--mobile`]: o.value
+  } : {});
+  return {
+    ...t,
+    displayClasses: l,
+    mobile: o
+  };
+}
+const xe = Symbol.for("vuetify:theme");
+function F() {
+  J("useTheme");
+  const e = A(xe, null);
+  if (!e)
     throw new Error("Could not find Vuetify theme injection");
-  return t;
+  return e;
 }
-const Ie = /* @__PURE__ */ I({
+const qe = /* @__PURE__ */ I({
   __name: "index",
   props: {
     modelValue: { type: Boolean, required: !0 },
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(t) {
-    const n = z(), e = G(t, "modelValue"), o = _(""), l = _(""), u = _(), c = _(), i = w(() => {
-      var r;
-      return ((r = u.value) == null ? void 0 : r.color) ?? "primary";
-    }), f = w(() => {
-      var r;
-      return ((r = u.value) == null ? void 0 : r.text) ?? n.t("cancel");
-    }), d = w(() => {
-      var r;
-      return ((r = c.value) == null ? void 0 : r.color) ?? "primary";
-    }), b = w(() => {
-      var r;
-      return ((r = c.value) == null ? void 0 : r.text) ?? n.t("confirm");
+  setup(e) {
+    const n = P(), t = H(e, "modelValue"), o = g(""), l = g(""), s = g(), c = g(), i = d(() => {
+      var u;
+      return ((u = s.value) == null ? void 0 : u.color) ?? "primary";
+    }), m = d(() => {
+      var u;
+      return ((u = s.value) == null ? void 0 : u.text) ?? n.t("cancel");
+    }), f = d(() => {
+      var u;
+      return ((u = c.value) == null ? void 0 : u.color) ?? "primary";
+    }), C = d(() => {
+      var u;
+      return ((u = c.value) == null ? void 0 : u.text) ?? n.t("confirm");
     });
-    let T = 0, C = !1;
-    const B = (r) => {
-      o.value = r.title, l.value = r.text, u.value = r.cancel, c.value = r.confirm, T = r.seq, C = !1, e.value = !0;
+    let $ = 0, D = !1;
+    const E = (u) => {
+      o.value = u.title, l.value = u.text, s.value = u.cancel, c.value = u.confirm, $ = u.seq, D = !1, t.value = !0;
     };
     W(() => {
-      s.on("confirmDlg", B);
-    }), L(() => {
-      s.off("confirmDlg", B);
+      a.on("confirmDlg", E);
+    }), U(() => {
+      a.off("confirmDlg", E);
     });
-    const E = () => {
-      e.value = !1, C || (s.emit("confirmDlgResult" + T, !0), C = !0);
+    const N = () => {
+      t.value = !1, D || (a.emit("confirmDlgResult" + $, !0), D = !0);
     };
-    return O(e, (r) => {
-      !r && !C && (s.emit("confirmDlgResult" + T, !1), C = !0);
-    }), (r, y) => {
-      const k = m("v-card-title"), U = m("v-card-text"), $ = m("v-btn"), a = m("v-card-actions"), x = m("v-card"), N = m("v-dialog");
-      return V(), M(N, {
-        modelValue: e.value,
-        "onUpdate:modelValue": y[1] || (y[1] = (q) => e.value = q),
+    return O(t, (u) => {
+      !u && !D && (a.emit("confirmDlgResult" + $, !1), D = !0);
+    }), (u, w) => {
+      const V = p("v-card-title"), j = p("v-card-text"), S = p("v-btn"), r = p("v-card-actions"), x = p("v-card"), K = p("v-dialog");
+      return k(), M(K, {
+        modelValue: t.value,
+        "onUpdate:modelValue": w[1] || (w[1] = (T) => t.value = T),
         onKeydown: [
-          y[2] || (y[2] = j(R((q) => e.value = !1, ["stop", "prevent"]), ["esc"])),
-          j(R(E, ["stop", "prevent"]), ["enter"])
+          w[2] || (w[2] = L(R((T) => t.value = !1, ["stop", "prevent"]), ["esc"])),
+          L(R(N, ["stop", "prevent"]), ["enter"])
         ],
         transition: "dialog-top-transition",
         "max-width": "600px"
       }, {
-        default: p(() => [
-          g(x, null, {
-            default: p(() => [
-              g(k, null, {
-                default: p(() => [
-                  h(D(o.value), 1)
+        default: v(() => [
+          y(x, null, {
+            default: v(() => [
+              y(V, null, {
+                default: v(() => [
+                  h(b(o.value), 1)
                 ]),
                 _: 1
               }),
-              g(U, null, {
-                default: p(() => [
-                  h(D(l.value), 1)
+              y(j, null, {
+                default: v(() => [
+                  h(b(l.value), 1)
                 ]),
                 _: 1
               }),
-              g(a, { class: "d-flex justify-end" }, {
-                default: p(() => [
-                  g($, {
-                    onClick: y[0] || (y[0] = (q) => e.value = !1),
+              y(r, { class: "d-flex justify-end" }, {
+                default: v(() => [
+                  y(S, {
+                    onClick: w[0] || (w[0] = (T) => t.value = !1),
                     color: i.value,
                     variant: "text"
                   }, {
-                    default: p(() => [
-                      h(D(f.value), 1)
+                    default: v(() => [
+                      h(b(m.value), 1)
                     ]),
                     _: 1
                   }, 8, ["color"]),
-                  g($, {
-                    onClick: E,
-                    color: d.value,
+                  y(S, {
+                    onClick: N,
+                    color: f.value,
                     variant: "text"
                   }, {
-                    default: p(() => [
-                      h(D(b.value), 1)
+                    default: v(() => [
+                      h(b(C.value), 1)
                     ]),
                     _: 1
                   }, 8, ["color"])
@@ -147,22 +180,22 @@ const Ie = /* @__PURE__ */ I({
       }, 8, ["modelValue", "onKeydown"]);
     };
   }
-}), _e = (t) => (ae("data-v-a8f3d91f"), t = t(), se(), t), ge = /* @__PURE__ */ _e(() => /* @__PURE__ */ v("div", { class: "lds-spinner" }, [
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div"),
-  /* @__PURE__ */ v("div")
-], -1)), xe = [
-  ge
-], ye = /* @__PURE__ */ I({
+}), we = (e) => (ue("data-v-a8f3d91f"), e = e(), ce(), e), be = /* @__PURE__ */ we(() => /* @__PURE__ */ _("div", { class: "lds-spinner" }, [
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div"),
+  /* @__PURE__ */ _("div")
+], -1)), he = [
+  be
+], ke = /* @__PURE__ */ I({
   __name: "index",
   props: {
     zIndex: {
@@ -170,22 +203,22 @@ const Ie = /* @__PURE__ */ I({
       default: 1
     }
   },
-  setup(t) {
-    const n = ve(), e = t, o = w(() => ({
+  setup(e) {
+    const n = F(), t = e, o = d(() => ({
       background: n.current.value.dark ? "#1e1e1e" : "#ffffff",
-      zIndex: e.zIndex
+      zIndex: t.zIndex
     }));
-    return (l, u) => (V(), K("div", {
+    return (l, s) => (k(), z("div", {
       class: "x-cont",
-      style: le(o.value)
-    }, xe, 4));
+      style: se(o.value)
+    }, he, 4));
   }
-}), H = (t, n) => {
-  const e = t.__vccOpts || t;
+}), Q = (e, n) => {
+  const t = e.__vccOpts || e;
   for (const [o, l] of n)
-    e[o] = l;
-  return e;
-}, Te = /* @__PURE__ */ H(ye, [["__scopeId", "data-v-a8f3d91f"]]), we = /* @__PURE__ */ I({
+    t[o] = l;
+  return t;
+}, Be = /* @__PURE__ */ Q(ke, [["__scopeId", "data-v-a8f3d91f"]]), Ce = /* @__PURE__ */ I({
   __name: "item",
   props: {
     id: {
@@ -206,10 +239,10 @@ const Ie = /* @__PURE__ */ I({
     }
   },
   emits: ["timeout"],
-  setup(t, { emit: n }) {
-    const e = t, o = _(!0), l = n, u = w(() => {
+  setup(e, { emit: n }) {
+    const t = e, o = g(!0), l = n, s = d(() => {
       let c = "";
-      switch (e.type) {
+      switch (t.type) {
         case "error":
           c = "cancel";
           break;
@@ -227,19 +260,19 @@ const Ie = /* @__PURE__ */ I({
     });
     return W(() => {
       setTimeout(() => {
-        l("timeout", e.id);
-      }, e.timeout);
+        l("timeout", t.id);
+      }, t.timeout);
     }), O(o, (c) => {
-      c || l("timeout", e.id);
+      c || l("timeout", t.id);
     }), (c, i) => {
-      const f = m("v-alert");
-      return V(), M(f, {
+      const m = p("v-alert");
+      return k(), M(m, {
         modelValue: o.value,
-        "onUpdate:modelValue": i[0] || (i[0] = (d) => o.value = d),
+        "onUpdate:modelValue": i[0] || (i[0] = (f) => o.value = f),
         class: "mt-2",
-        type: t.type,
-        icon: u.value,
-        text: t.text,
+        type: e.type,
+        icon: s.value,
+        text: e.text,
         "max-width": "90%",
         width: "500px",
         elevation: "1",
@@ -250,137 +283,137 @@ const Ie = /* @__PURE__ */ I({
   }
 }), De = /* @__PURE__ */ I({
   __name: "index",
-  setup(t) {
-    const n = re({ items: [] });
+  setup(e) {
+    const n = ie({ items: [] });
     W(() => {
-      s.on("message", e);
-    }), L(() => {
-      s.off("message", e);
+      a.on("message", t);
+    }), U(() => {
+      a.off("message", t);
     });
-    const e = (i) => {
-      u(i.type, i.text, i.timeout);
+    const t = (i) => {
+      s(i.type, i.text, i.timeout);
     }, o = (i) => {
       c(i);
     };
     let l = 0;
-    const u = (i, f, d) => {
-      const b = l++;
-      n.items.push({ id: b, type: i, text: f, timeout: d });
+    const s = (i, m, f) => {
+      const C = l++;
+      n.items.push({ id: C, type: i, text: m, timeout: f });
     }, c = (i) => {
-      const f = n.items.findIndex((d) => d.id === i);
-      f >= 0 && n.items.splice(f, 1);
+      const m = n.items.findIndex((f) => f.id === i);
+      m >= 0 && n.items.splice(m, 1);
     };
-    return (i, f) => (V(), K("div", {
-      onClick: f[0] || (f[0] = R(() => {
+    return (i, m) => (k(), z("div", {
+      onClick: m[0] || (m[0] = R(() => {
       }, ["stop"])),
       class: "x-cont d-flex flex-column-reverse align-center"
     }, [
-      (V(!0), K(ce, null, ie(n.items, (d) => (V(), M(we, {
+      (k(!0), z(de, null, fe(n.items, (f) => (k(), M(Ce, {
         onTimeout: o,
-        id: d.id,
-        type: d.type,
-        text: d.text,
-        timeout: d.timeout,
-        key: d.id
+        id: f.id,
+        type: f.type,
+        text: f.text,
+        timeout: f.timeout,
+        key: f.id
       }, null, 8, ["id", "type", "text", "timeout"]))), 128))
     ]));
   }
-}), $e = /* @__PURE__ */ H(De, [["__scopeId", "data-v-70ed4b89"]]), qe = /* @__PURE__ */ I({
+}), Re = /* @__PURE__ */ Q(De, [["__scopeId", "data-v-70ed4b89"]]), We = /* @__PURE__ */ I({
   __name: "index",
   props: {
     modelValue: { type: Boolean, required: !0 },
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(t) {
-    const n = z(), e = G(t, "modelValue"), o = _(""), l = _(""), u = _(), c = _(), i = _(), f = _(""), d = _(), b = _(), T = w(() => {
-      var a;
-      return ((a = d.value) == null ? void 0 : a.color) ?? "primary";
-    }), C = w(() => {
-      var a;
-      return ((a = d.value) == null ? void 0 : a.text) ?? n.t("cancel");
-    }), B = w(() => {
-      var a;
-      return ((a = b.value) == null ? void 0 : a.color) ?? "primary";
-    }), E = w(() => {
-      var a;
-      return ((a = b.value) == null ? void 0 : a.text) ?? n.t("confirm");
-    }), r = _();
-    let y = 0, k = !1;
-    const U = async (a) => {
+  setup(e) {
+    const n = P(), t = H(e, "modelValue"), o = g(""), l = g(""), s = g(), c = g(), i = g(), m = g(""), f = g(), C = g(), $ = d(() => {
+      var r;
+      return ((r = f.value) == null ? void 0 : r.color) ?? "primary";
+    }), D = d(() => {
+      var r;
+      return ((r = f.value) == null ? void 0 : r.text) ?? n.t("cancel");
+    }), E = d(() => {
+      var r;
+      return ((r = C.value) == null ? void 0 : r.color) ?? "primary";
+    }), N = d(() => {
+      var r;
+      return ((r = C.value) == null ? void 0 : r.text) ?? n.t("confirm");
+    }), u = g();
+    let w = 0, V = !1;
+    const j = async (r) => {
       var x;
-      o.value = a.title, l.value = a.text, u.value = a.label, c.value = a.placeholder, i.value = a.rules, f.value = a.value, d.value = a.cancel, b.value = a.confirm, y = a.seq, k = !1, e.value = !0, await X(() => r.value !== void 0, 1e3), (x = r.value) == null || x.focus();
+      o.value = r.title, l.value = r.text, s.value = r.label, c.value = r.placeholder, i.value = r.rules, m.value = r.value, f.value = r.cancel, C.value = r.confirm, w = r.seq, V = !1, t.value = !0, await X(() => u.value !== void 0, 1e3), (x = u.value) == null || x.focus();
     };
     W(() => {
-      s.on("promptDlg", U);
-    }), L(() => {
-      s.off("promptDlg", U);
+      a.on("promptDlg", j);
+    }), U(() => {
+      a.off("promptDlg", j);
     });
-    const $ = () => {
-      e.value = !1, k || (s.emit("promptDlgResult" + y, f.value ?? ""), k = !0);
+    const S = () => {
+      t.value = !1, V || (a.emit("promptDlgResult" + w, m.value ?? ""), V = !0);
     };
-    return O(e, (a) => {
-      !a && !k && (s.emit("promptDlgResult" + y, void 0), k = !0);
-    }), (a, x) => {
-      const N = m("v-card-title"), q = m("v-card-text"), Y = m("v-text-field"), Z = m("v-form"), P = m("v-btn"), ee = m("v-card-actions"), te = m("v-card"), ne = m("v-dialog");
-      return V(), M(ne, {
-        modelValue: e.value,
-        "onUpdate:modelValue": x[2] || (x[2] = (S) => e.value = S),
+    return O(t, (r) => {
+      !r && !V && (a.emit("promptDlgResult" + w, void 0), V = !0);
+    }), (r, x) => {
+      const K = p("v-card-title"), T = p("v-card-text"), te = p("v-text-field"), ne = p("v-form"), Z = p("v-btn"), oe = p("v-card-actions"), le = p("v-card"), re = p("v-dialog");
+      return k(), M(re, {
+        modelValue: t.value,
+        "onUpdate:modelValue": x[2] || (x[2] = (q) => t.value = q),
         onKeydown: [
-          x[3] || (x[3] = j(R((S) => e.value = !1, ["stop", "prevent"]), ["esc"])),
-          j(R($, ["stop", "prevent"]), ["enter"])
+          x[3] || (x[3] = L(R((q) => t.value = !1, ["stop", "prevent"]), ["esc"])),
+          L(R(S, ["stop", "prevent"]), ["enter"])
         ],
         transition: "dialog-top-transition",
         "max-width": "600px"
       }, {
-        default: p(() => [
-          g(te, null, {
-            default: p(() => [
-              g(N, null, {
-                default: p(() => [
-                  h(D(o.value), 1)
+        default: v(() => [
+          y(le, null, {
+            default: v(() => [
+              y(K, null, {
+                default: v(() => [
+                  h(b(o.value), 1)
                 ]),
                 _: 1
               }),
-              g(q, null, {
-                default: p(() => [
-                  h(D(l.value), 1)
+              y(T, null, {
+                default: v(() => [
+                  h(b(l.value), 1)
                 ]),
                 _: 1
               }),
-              g(Z, { class: "mx-3" }, {
-                default: p(() => [
-                  g(Y, {
-                    modelValue: f.value,
-                    "onUpdate:modelValue": x[0] || (x[0] = (S) => f.value = S),
-                    label: u.value,
+              y(ne, { class: "mx-3" }, {
+                default: v(() => [
+                  y(te, {
+                    modelValue: m.value,
+                    "onUpdate:modelValue": x[0] || (x[0] = (q) => m.value = q),
+                    label: s.value,
                     placeholder: c.value,
                     rules: i.value,
                     ref_key: "target",
-                    ref: r
+                    ref: u
                   }, null, 8, ["modelValue", "label", "placeholder", "rules"])
                 ]),
                 _: 1
               }),
-              g(ee, { class: "d-flex justify-end" }, {
-                default: p(() => [
-                  g(P, {
-                    onClick: x[1] || (x[1] = (S) => e.value = !1),
-                    color: T.value,
+              y(oe, { class: "d-flex justify-end" }, {
+                default: v(() => [
+                  y(Z, {
+                    onClick: x[1] || (x[1] = (q) => t.value = !1),
+                    color: $.value,
                     variant: "text"
                   }, {
-                    default: p(() => [
-                      h(D(C.value), 1)
+                    default: v(() => [
+                      h(b(D.value), 1)
                     ]),
                     _: 1
                   }, 8, ["color"]),
-                  g(P, {
-                    onClick: $,
-                    color: B.value,
+                  y(Z, {
+                    onClick: S,
+                    color: E.value,
                     variant: "text"
                   }, {
-                    default: p(() => [
-                      h(D(E.value), 1)
+                    default: v(() => [
+                      h(b(N.value), 1)
                     ]),
                     _: 1
                   }, 8, ["color"])
@@ -395,37 +428,37 @@ const Ie = /* @__PURE__ */ I({
       }, 8, ["modelValue", "onKeydown"]);
     };
   }
-}), he = { class: "mx-auto my-auto" }, Ve = { class: "d-flex align-center justify-center w-100 h-100" }, Se = /* @__PURE__ */ I({
+}), Ve = { class: "mx-auto my-auto" }, Ie = { class: "d-flex align-center justify-center w-100 h-100" }, Me = /* @__PURE__ */ I({
   __name: "index",
-  setup(t) {
-    const n = z(), e = _(!1), o = () => {
-      e.value = !0;
+  setup(e) {
+    const n = P(), t = g(!1), o = () => {
+      t.value = !0;
     }, l = () => {
-      e.value = !1;
+      t.value = !1;
     };
     return W(() => {
-      s.on("openWaitDlg", o), s.on("closeWaitDlg", l);
-    }), L(() => {
-      s.off("openWaitDlg", o), s.off("closeWaitDlg", l);
-    }), (u, c) => {
-      const i = m("v-card"), f = m("v-dialog");
-      return V(), M(f, {
-        "model-value": e.value,
-        "onUpdate:modelValue": c[0] || (c[0] = (d) => e.value = d),
+      a.on("openWaitDlg", o), a.on("closeWaitDlg", l);
+    }), U(() => {
+      a.off("openWaitDlg", o), a.off("closeWaitDlg", l);
+    }), (s, c) => {
+      const i = p("v-card"), m = p("v-dialog");
+      return k(), M(m, {
+        "model-value": t.value,
+        "onUpdate:modelValue": c[0] || (c[0] = (f) => t.value = f),
         persistent: "",
         "no-click-animation": "",
         fullscreen: ""
       }, {
-        default: p(() => [
-          v("div", he, [
-            g(i, {
+        default: v(() => [
+          _("div", Ve, [
+            y(i, {
               width: "300px",
               height: "80px",
               loading: ""
             }, {
-              default: p(() => [
-                v("div", Ve, [
-                  v("span", null, D(ue(n).t("waitingResponse")), 1)
+              default: v(() => [
+                _("div", Ie, [
+                  _("span", null, b(me(n).t("waitingResponse")), 1)
                 ])
               ]),
               _: 1
@@ -437,77 +470,95 @@ const Ie = /* @__PURE__ */ I({
     };
   }
 });
-let A = Date.now();
-function J() {
-  const t = Date.now();
-  return t - A > 500 ? (A = t, !0) : !1;
+function Ee() {
+  const e = F(), n = d(() => e.global.current.value.colors.primary), t = d(() => e.global.current.value.colors.secondary), o = d(() => e.current.value.dark ? "#2e2e2e" : "#bdbdbd"), l = d(() => e.current.value.dark ? "#272727" : "#eeeeee"), s = d(() => e.current.value.dark ? "#1e1e1e" : "#ffffff"), c = d(() => e.current.value.dark ? "#303030" : "#f6f6f6"), i = d(() => e.current.value.dark ? "#ffffff1f" : "#0000001f");
+  return {
+    primaryColor: n,
+    secondaryColor: t,
+    backgroundColor0: o,
+    backgroundColor1: l,
+    backgroundColor2: s,
+    highlightColor: c,
+    borderColor: i
+  };
+}
+function Ne() {
+  const e = F(), { width: n } = ye(), t = d(() => e.current.value.dark), o = g(""), l = d(() => !!window.cordova), s = d(() => n.value <= 1280 ? n.value + "px" : n.value <= 1920 ? 1920 / 2.5 + "px" : 2560 / 2.5 + "px");
+  return { dark: t, routeTransName: o, sysBarAvail: l, compactWidth: s };
+}
+let G = Date.now();
+function Y() {
+  const e = Date.now();
+  return e - G > 500 ? (G = e, !0) : !1;
 }
-let be = 0;
-function Q() {
-  return ++be;
+let $e = 0;
+function ee() {
+  return ++$e;
 }
-async function Re(t) {
-  if (!J())
+async function je(e) {
+  if (!Y())
     return;
-  let n = !1, e;
-  const o = (u) => {
-    e = u, n = !0;
-  }, l = Q();
-  return s.on("confirmDlgResult" + l, o), s.emit("confirmDlg", { ...t, seq: l }), await X(() => n), s.off("confirmDlgResult" + l, o), e;
+  let n = !1, t;
+  const o = (s) => {
+    t = s, n = !0;
+  }, l = ee();
+  return a.on("confirmDlgResult" + l, o), a.emit("confirmDlg", { ...e, seq: l }), await X(() => n), a.off("confirmDlgResult" + l, o), t;
 }
-async function We(t) {
-  if (!J())
+async function Le(e) {
+  if (!Y())
     return;
-  let n = !1, e;
-  const o = (u) => {
-    e = u, n = !0;
-  }, l = Q();
-  return s.on("promptDlgResult" + l, o), s.emit("promptDlg", { ...t, seq: l }), await X(() => n), s.off("promptDlgResult" + l, o), e;
+  let n = !1, t;
+  const o = (s) => {
+    t = s, n = !0;
+  }, l = ee();
+  return a.on("promptDlgResult" + l, o), a.emit("promptDlg", { ...e, seq: l }), await X(() => n), a.off("promptDlgResult" + l, o), t;
 }
-function Me() {
-  s.emit("openWaitDlg");
+function Ue() {
+  a.emit("openWaitDlg");
 }
-function Be() {
-  s.emit("closeWaitDlg");
+function Ke() {
+  a.emit("closeWaitDlg");
 }
-function Ee(t, n) {
-  s.emit("message", { type: "error", text: t, timeout: n });
+function ze(e, n) {
+  a.emit("message", { type: "error", text: e, timeout: n });
 }
-function Ue(t, n) {
-  s.emit("message", { type: "info", text: t, timeout: n });
+function Ae(e, n) {
+  a.emit("message", { type: "info", text: e, timeout: n });
 }
-function je(t, n) {
-  s.emit("message", { type: "success", text: t, timeout: n });
+function Oe(e, n) {
+  a.emit("message", { type: "success", text: e, timeout: n });
 }
-function Le(t, n) {
-  s.emit("message", { type: "warning", text: t, timeout: n });
+function Xe(e, n) {
+  a.emit("message", { type: "warning", text: e, timeout: n });
 }
-function Ne(t) {
+function Pe(e) {
   var o, l;
   if (!window.appAppear) {
     window.appAppear = !0;
     return;
   }
-  const n = "single-spa-application:" + t, e = (o = document.getElementById(n)) == null ? void 0 : o.classList;
-  e && (e.remove("app-left", "app-right", "app-reset"), (l = window.routeExtras) != null && l.forward ? e.add("app-left") : e.add("app-right"), setTimeout(() => {
-    e.add("app-reset");
+  const n = "single-spa-application:" + e, t = (o = document.getElementById(n)) == null ? void 0 : o.classList;
+  t && (t.remove("app-left", "app-right", "app-reset"), (l = window.routeExtras) != null && l.forward ? t.add("app-left") : t.add("app-right"), setTimeout(() => {
+    t.add("app-reset");
   }, 0));
 }
 export {
-  Ie as XConfirmDlg,
-  Te as XLoading,
-  $e as XMessage,
-  qe as XPromptDlg,
-  Se as XWaitDlg,
-  Ne as appAppear,
-  Be as closeWaitDlg,
-  Ee as messageError,
-  Ue as messageInfo,
-  je as messageSuccess,
-  Le as messageWarning,
-  Re as openConfirmDlg,
-  We as openPromptDlg,
-  Me as openWaitDlg,
-  ke as waitMs,
+  qe as XConfirmDlg,
+  Be as XLoading,
+  Re as XMessage,
+  We as XPromptDlg,
+  Me as XWaitDlg,
+  Pe as appAppear,
+  Ke as closeWaitDlg,
+  ze as messageError,
+  Ae as messageInfo,
+  Oe as messageSuccess,
+  Xe as messageWarning,
+  je as openConfirmDlg,
+  Le as openPromptDlg,
+  Ue as openWaitDlg,
+  Ee as useColor,
+  Ne as useSystem,
+  Te as waitMs,
   X as waitUtil
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "x-essential-lib",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",