vlite3 0.8.4 → 0.8.6

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -6,8 +6,8 @@ import O from "../Input.vue.js";
 import "../../core/config.js";
 /* empty css                            */
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue2.js";
-/* empty css             */
+import E from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Empty/Empty.vue.d.ts

@@ -9,10 +9,7 @@ interface Props {
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        action?(_: {}): any;
-        default?(_: {}): any;
-    };
+    slots: any;
     refs: {};
     rootEl: HTMLDivElement;
 };

package/components/Empty/Empty.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as f, computed as n, defineAsyncComponent as t, openBlock as s, createElementBlock as y, createBlock as h, resolveDynamicComponent as C, createSlots as I, withCtx as p, renderSlot as c } from "vue";
-import { $t as r } from "../../utils/i18n.js";
-import { useVLiteConfig as g } from "../../core/config.js";
-const k = { class: "flex items-center justify-center min-h-[400px] w-full py-16 px-6" }, B = /* @__PURE__ */ f({
+import { defineComponent as y, computed as r, markRaw as t, defineAsyncComponent as i, openBlock as c, createElementBlock as h, createBlock as C, resolveDynamicComponent as I, createSlots as _, renderList as g, withCtx as k, renderSlot as w, normalizeProps as x, guardReactiveProps as B } from "vue";
+import { $t as o } from "../../utils/i18n.js";
+import { useVLiteConfig as S } from "../../core/config.js";
+const V = { class: "flex items-center justify-center min-h-[300px] w-full py-2" }, R = /* @__PURE__ */ y({
   __name: "Empty",
   props: {
     title: {},
@@ -11,54 +11,48 @@ const k = { class: "flex items-center justify-center min-h-[400px] w-full py-16
     icon: { default: "lucide:inbox" },
     variant: {}
   },
-  setup(o) {
-    const i = o, l = g(), m = n(() => i.variant || l?.components?.empty?.variant || "variant1"), v = n(() => {
-      if (i.titleI18n) return r(i.titleI18n);
-      if (i.title) return i.title;
-      const e = r("vlite.empty.title");
-      return e !== "vlite.empty.title" ? e : "No data found";
-    }), d = n(() => {
-      if (i.descriptionI18n) return r(i.descriptionI18n);
-      if (i.description) return i.description;
-      const e = r("vlite.empty.description");
-      return e !== "vlite.empty.description" ? e : "There is nothing to display here right now.";
-    }), a = {
-      variant1: t(() => import("./variants/Variant1.vue.js")),
-      variant2: t(() => import("./variants/Variant2.vue.js")),
-      variant3: t(() => import("./variants/Variant3.vue.js")),
-      variant4: t(() => import("./variants/Variant4.vue.js")),
-      variant5: t(() => import("./variants/Variant5.vue.js")),
-      variant6: t(() => import("./variants/Variant6.vue.js")),
-      variant7: t(() => import("./variants/Variant7.vue.js")),
-      variant8: t(() => import("./variants/Variant8.vue.js")),
-      variant9: t(() => import("./variants/Variant9.vue.js")),
-      variant10: t(() => import("./variants/Variant10.vue.js")),
-      variant11: t(() => import("./variants/Variant11.vue.js"))
-    }, u = n(
-      () => a[m.value] || a.variant1
+  setup(a) {
+    const e = a, l = S(), m = r(() => e.variant || l?.components?.empty?.variant || "variant1"), v = r(() => {
+      if (e.titleI18n) return o(e.titleI18n);
+      if (e.title) return e.title;
+      const n = o("vlite.empty.title");
+      return n !== "vlite.empty.title" ? n : "No data found";
+    }), d = r(() => {
+      if (e.descriptionI18n) return o(e.descriptionI18n);
+      if (e.description) return e.description;
+      const n = o("vlite.empty.description");
+      return n !== "vlite.empty.description" ? n : "There is nothing to display here right now.";
+    }), s = {
+      variant1: t(i(() => import("./variants/Variant1.vue.js"))),
+      variant2: t(i(() => import("./variants/Variant2.vue.js"))),
+      variant3: t(i(() => import("./variants/Variant3.vue.js"))),
+      variant4: t(i(() => import("./variants/Variant4.vue.js"))),
+      variant5: t(i(() => import("./variants/Variant5.vue.js"))),
+      variant6: t(i(() => import("./variants/Variant6.vue.js"))),
+      variant7: t(i(() => import("./variants/Variant7.vue.js"))),
+      variant8: t(i(() => import("./variants/Variant8.vue.js"))),
+      variant9: t(i(() => import("./variants/Variant9.vue.js"))),
+      variant10: t(i(() => import("./variants/Variant10.vue.js"))),
+      variant11: t(i(() => import("./variants/Variant11.vue.js")))
+    }, u = r(
+      () => s[m.value] || s.variant1
     );
-    return (e, x) => (s(), y("div", k, [
-      (s(), h(C(u.value), {
+    return (n, $) => (c(), h("div", V, [
+      (c(), C(I(u.value), {
         title: v.value,
         description: d.value,
-        icon: o.icon
-      }, I({
-        default: p(() => [
-          c(e.$slots, "default")
-        ]),
-        _: 2
-      }, [
-        e.$slots.action ? {
-          name: "action",
-          fn: p(() => [
-            c(e.$slots, "action")
-          ]),
-          key: "0"
-        } : void 0
+        icon: a.icon
+      }, _({ _: 2 }, [
+        g(n.$slots, (D, p) => ({
+          name: p,
+          fn: k((f) => [
+            w(n.$slots, p, x(B(f || {})))
+          ])
+        }))
       ]), 1032, ["title", "description", "icon"]))
     ]));
   }
 });
 export {
-  B as default
+  R as default
 };

package/components/Empty/variants/Variant1.vue2.js

@@ -1,8 +1,8 @@
 import { defineComponent as i, openBlock as o, createElementBlock as n, createVNode as c, createElementVNode as s, toDisplayString as r, renderSlot as l, createCommentVNode as m } from "vue";
 import a from "../../Icon.vue.js";
-const d = { class: "flex w-full flex-col items-center justify-center p-10 md:p-16 text-center" }, u = { class: "text-2xl font-medium text-foreground" }, f = ["innerHTML"], x = {
+const d = { class: "flex w-full flex-col items-center justify-center p-10 min-h-[450px] text-center rounded-2xl bg-card" }, u = { class: "text-fs-5 font-semibold text-foreground" }, f = ["innerHTML"], x = {
   key: 0,
-  class: "mt-5"
+  class: "mt-6"
 }, k = /* @__PURE__ */ i({
   __name: "Variant1",
   props: {
@@ -14,7 +14,7 @@ const d = { class: "flex w-full flex-col items-center justify-center p-10 md:p-1
     return (e, p) => (o(), n("div", d, [
       c(a, {
         icon: t.icon,
-        class: "mb-3 h-10 w-10 text-muted",
+        class: "mb-3 h-12 w-12 text-muted",
         "stroke-width": "1.2"
       }, null, 8, ["icon"]),
       s("h3", u, r(t.title), 1),

package/components/Empty/variants/Variant2.vue2.js

@@ -1,33 +1,33 @@
-import { defineComponent as s, openBlock as n, createElementBlock as o, createVNode as i, createElementVNode as r, toDisplayString as c, renderSlot as l, createCommentVNode as m } from "vue";
-import d from "../../Icon.vue.js";
-const a = { class: "flex w-full flex-col items-center justify-center p-10 min-h-[450px] text-center rounded-2xl border border-transparent bg-muted/20" }, u = { class: "text-lg font-medium text-foreground" }, f = ["innerHTML"], x = {
+import { defineComponent as i, openBlock as o, createElementBlock as n, createVNode as c, createElementVNode as s, toDisplayString as r, renderSlot as l, createCommentVNode as m } from "vue";
+import a from "../../Icon.vue.js";
+const d = { class: "flex w-full flex-col items-center justify-center p-10 md:p-16 text-center" }, u = { class: "text-2xl font-medium text-foreground" }, f = ["innerHTML"], x = {
   key: 0,
-  class: "mt-8"
-}, b = /* @__PURE__ */ s({
+  class: "mt-5"
+}, k = /* @__PURE__ */ i({
   __name: "Variant2",
   props: {
     title: {},
     description: {},
     icon: {}
   },
-  setup(e) {
-    return (t, p) => (n(), o("div", a, [
-      i(d, {
-        icon: e.icon,
-        class: "mb-5 h-12 w-12 text-muted",
+  setup(t) {
+    return (e, p) => (o(), n("div", d, [
+      c(a, {
+        icon: t.icon,
+        class: "mb-3 h-10 w-10 text-muted",
         "stroke-width": "1.2"
       }, null, 8, ["icon"]),
-      r("h3", u, c(e.title), 1),
-      r("p", {
-        class: "mt-2 text-sm text-muted max-w-md mx-auto",
-        innerHTML: e.description
+      s("h3", u, r(t.title), 1),
+      s("p", {
+        class: "mt-1.5 text-sm text-muted max-w-md mx-auto",
+        innerHTML: t.description
       }, null, 8, f),
-      t.$slots.action ? (n(), o("div", x, [
-        l(t.$slots, "action")
+      e.$slots.action ? (o(), n("div", x, [
+        l(e.$slots, "action")
       ])) : m("", !0)
     ]));
   }
 });
 export {
-  b as default
+  k as default
 };

package/components/Form/FormField.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as B, computed as o, markRaw as N, openBlock as r, createBlock as s, mergeProps as f, toHandlers as R, createSlots as O, unref as L, withCtx as n, createVNode as $, createTextVNode as m, toDisplayString as p, createCommentVNode as w, resolveDynamicComponent as T } from "vue";
-import { isComponent as y, isAddonObject as v } from "./utils/form.utils.js";
-import j from "../NumberInput.vue.js";
+import { defineComponent as I, computed as o, markRaw as O, openBlock as s, createBlock as u, mergeProps as f, toHandlers as C, createSlots as T, unref as F, withCtx as n, createVNode as L, createTextVNode as m, toDisplayString as p, createCommentVNode as $, resolveDynamicComponent as j } from "vue";
+import { isComponent as x, isAddonObject as v } from "./utils/form.utils.js";
+import D from "../NumberInput.vue.js";
 import h from "../Button.vue.js";
-import { $t as D } from "../../utils/i18n.js";
-import x from "../Input.vue.js";
+import { $t as E } from "../../utils/i18n.js";
+import g from "../Input.vue.js";
 /* empty css            */
-import E from "../Switch.vue.js";
-import H from "../CheckBox.vue.js";
-import q from "../FilePicker/FilePicker.vue.js";
-import G from "../AvatarUploader/AvatarUploader.vue.js";
-import b from "../Dropdown/Dropdown.vue.js";
-import J from "../MultiSelect/MultiSelect.vue.js";
-import K from "../DatePicker.vue.js";
-import M from "../ColorPicker/ColorPicker.vue.js";
-import Q from "../IconPicker.vue.js";
-import W from "./CustomFields.vue.js";
-const me = /* @__PURE__ */ B({
+import H from "../Switch.vue.js";
+import q from "../CheckBox.vue.js";
+import G from "../FilePicker/FilePicker.vue.js";
+import J from "../AvatarUploader/AvatarUploader.vue.js";
+import z from "../Dropdown/Dropdown.vue.js";
+import K from "../MultiSelect/MultiSelect.vue.js";
+import M from "../DatePicker.vue.js";
+import Q from "../ColorPicker/ColorPicker.vue.js";
+import W from "../IconPicker.vue.js";
+import X from "./CustomFields.vue.js";
+const pe = /* @__PURE__ */ I({
   __name: "FormField",
   props: {
     field: {},
@@ -33,15 +33,17 @@ const me = /* @__PURE__ */ B({
     loading: { type: Boolean, default: !1 }
   },
   emits: ["change", "addonChange", "addonAction"],
-  setup(l, { emit: A }) {
-    const e = l, c = A, d = (a, t) => {
-      c("change", { value: a, data: t });
-    }, C = (a) => {
+  setup(t, { emit: A }) {
+    const e = t, c = A, d = (a, l) => {
+      c("change", { value: a, data: l });
+    }, V = (a) => {
       c("change", { value: a });
-    }, F = o(() => {
+    }, y = o(
+      () => e.field.type === "number" && e.field.isSensitiveField === !0
+    ), N = o(() => {
       const a = e.field.type;
-      if (y(a))
-        return N(a);
+      if (x(a))
+        return O(a);
       switch (a) {
         case "text":
         case "email":
@@ -50,47 +52,47 @@ const me = /* @__PURE__ */ B({
         case "url":
         case "search":
         case "textarea":
-          return x;
+          return g;
         case "number":
-          return j;
+          return y.value ? g : D;
         case "switch":
-          return E;
-        case "check":
           return H;
+        case "check":
+          return q;
         case "select":
-          return b;
+          return z;
         case "multiSelect":
-          return J;
+          return K;
         case "date":
         case "time":
-          return K;
+          return M;
         case "file":
         case "fileUploader":
-          return q;
-        case "avatarUpload":
           return G;
+        case "avatarUpload":
+          return J;
         case "color":
-          return M;
-        case "iconPicker":
           return Q;
-        case "customFields":
+        case "iconPicker":
           return W;
+        case "customFields":
+          return X;
         default:
-          return x;
+          return g;
       }
-    }), z = o(() => {
-      const a = e.field.type, t = {
+    }), S = o(() => {
+      const a = e.field.type, l = {
         disabled: e.disabled || e.field.disabled === !0,
         ...e?.field || {},
         ...e.field.props || {},
         label: "",
         labelI18n: ""
-      }, i = e.field.placeholderI18n ? D(e.field.placeholderI18n) : e.field.placeholder, g = e.variant === "floating" && e.label && !e.floatingActive, u = g ? "" : i;
+      }, i = e.field.placeholderI18n ? E(e.field.placeholderI18n) : e.field.placeholder, b = e.variant === "floating" && e.label && !e.floatingActive, r = b ? "" : i;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || !a ? {
-        ...t,
+        ...l,
         modelValue: e.value ?? "",
         type: a || "text",
-        placeholder: u,
+        placeholder: r,
         label: e.label,
         icon: e.field.icon,
         iconRight: e.field.iconRight,
@@ -102,12 +104,26 @@ const me = /* @__PURE__ */ B({
         rounded: e.rounded,
         error: e.error,
         min: e.field.min,
-        // kept for validation attributes if needed
         max: e.field.max,
         rows: a === "textarea" ? e.field.props?.rows || 3 : void 0,
         class: `${e.field.className}`
+      } : a === "number" && y.value ? {
+        ...l,
+        // Convert numeric value to string so Input.vue (string-based) displays it correctly
+        modelValue: e.value !== void 0 && e.value !== null ? String(e.value) : "",
+        // 'password' activates the eye-toggle inside Input.vue
+        type: "password",
+        placeholder: r,
+        label: e.label,
+        variant: e.variant,
+        size: e.size,
+        rounded: e.rounded,
+        error: e.error,
+        // Disable the browser's built-in clear button so only the eye icon shows
+        showClearButton: !1,
+        class: e.field.className ?? ""
       } : a === "number" ? {
-        ...t,
+        ...l,
         modelValue: e.value ?? void 0,
         min: e.field.min,
         max: e.field.max,
@@ -116,33 +132,33 @@ const me = /* @__PURE__ */ B({
         mode: e.field.props?.mode ?? (e.variant === "transparent" ? "ghost" : "outline"),
         size: e.size,
         rounded: e.rounded,
-        placeholder: u,
+        placeholder: r,
         class: e.field.className
       } : a === "switch" ? {
-        ...t,
+        ...l,
         modelValue: !!e.value,
         size: "sm",
         label: ""
         // Label handled externally
       } : a === "check" ? {
-        ...t,
+        ...l,
         modelValue: !!e.value,
         label: ""
         // Label handled externally
       } : a === "select" ? {
-        ...t,
+        ...l,
         modelValue: e.value,
         options: e.field.options || [],
-        placeholder: u,
+        placeholder: r,
         selectable: !0,
         closeOnSelect: !0,
         triggerProps: {
           variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
           size: e.size,
-          ...g ? { text: "​" } : {}
+          ...b ? { text: "​" } : {}
         }
       } : a === "multiSelect" ? {
-        ...t,
+        ...l,
         modelValue: Array.isArray(e.value) ? e.value : [],
         options: e.field.options || [],
         placeholder: i,
@@ -150,44 +166,44 @@ const me = /* @__PURE__ */ B({
         size: e.size,
         rounded: e.rounded
       } : a === "date" || a === "time" ? {
-        ...t,
+        ...l,
         modelValue: e.value,
         mode: a === "time" ? "time" : "date",
-        placeholder: u,
+        placeholder: r,
         btnProps: {
           variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
           size: e.size,
           class: "px-3!",
-          ...g ? { text: "​" } : {}
+          ...b ? { text: "​" } : {}
         }
       } : a === "fileUploader" || a === "file" ? {
-        ...t,
+        ...l,
         modelValue: e.value,
         multiSelect: e.field.props?.multiple || !1,
         maxFiles: e.field.maxFiles || e.field.props?.maxFiles,
         fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
         returnFormat: "base64",
         variant: a === "file" ? "input" : "dropzone",
-        placeholder: u,
+        placeholder: r,
         size: e.size,
         rounded: e.rounded,
         maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
         loading: e.loading
       } : a === "avatarUpload" ? {
         size: "2xl",
-        ...t,
+        ...l,
         modelValue: e.value,
         editable: !e.readonly,
         maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
         loading: e.loading
       } : a === "color" ? {
-        ...t,
+        ...l,
         modelValue: e.value || "#000000"
       } : a === "iconPicker" ? {
-        ...t,
+        ...l,
         value: e.value || "lucide:smile"
       } : a === "customFields" ? {
-        ...t,
+        ...l,
         label: e?.field?.label,
         labelI18n: e?.field?.labelI18n,
         modelValue: Array.isArray(e.value) ? e.value : [],
@@ -198,72 +214,79 @@ const me = /* @__PURE__ */ B({
         size: e.size,
         rounded: e.rounded,
         isUpdate: e.isUpdate
-      } : y(a) ? {
-        ...t,
+      } : x(a) ? {
+        ...l,
         value: e.value,
         values: e.values
-      } : t;
+      } : l;
     }), k = o(() => {
       const a = e.field.type;
-      return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || a === "switch" || a === "check" || a === "number" || !a ? {
-        "update:modelValue": C
+      return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || a === "switch" || a === "check" || !a ? {
+        "update:modelValue": V
+      } : a === "number" && y.value ? {
+        "update:modelValue": (l) => {
+          const i = l === "" ? void 0 : Number(l);
+          c("change", { value: isNaN(i) ? void 0 : i });
+        }
+      } : a === "number" ? {
+        "update:modelValue": V
       } : a === "select" ? {
-        onSelect: (t) => {
-          d(t.value, t.data);
+        onSelect: (l) => {
+          d(l.value, l.data);
         }
       } : a === "multiSelect" ? {
-        change: (t) => d(t)
+        change: (l) => d(l)
       } : a === "date" || a === "time" ? {
-        change: (t) => d(t)
+        change: (l) => d(l)
       } : a === "fileUploader" || a === "file" ? {
-        change: (t) => {
-          d(t);
+        change: (l) => {
+          d(l);
         },
-        "update:modelValue": (t) => {
-          d(t);
+        "update:modelValue": (l) => {
+          d(l);
         }
       } : a === "avatarUpload" ? {
-        change: (t) => {
-          d(t);
+        change: (l) => {
+          d(l);
         },
-        "update:modelValue": (t) => {
-          d(t);
+        "update:modelValue": (l) => {
+          d(l);
         }
       } : a === "color" ? {
-        change: (t) => d(t)
+        change: (l) => d(l)
       } : a === "iconPicker" ? {
-        onSelect: (t) => d(t)
+        onSelect: (l) => d(l)
       } : a === "customFields" ? {
-        change: (t) => d(t)
-      } : y(a) ? {
-        onChange: (t) => {
-          d(t.value, t.data);
+        change: (l) => d(l)
+      } : x(a) ? {
+        onChange: (l) => {
+          d(l.value, l.data);
         }
       } : {};
     }), P = o(() => v(e.field.addonLeft) || v(e.field.addonRight)), U = o(() => {
       const a = e.field.type;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || !a;
-    }), I = o(() => P.value && U.value), V = (a, t) => {
-      c("addonChange", a.name, { value: t.value });
-    }, S = (a) => {
+    }), B = o(() => P.value && U.value), R = (a, l) => {
+      c("addonChange", a.name, { value: l.value });
+    }, w = (a) => {
       a.action && c("addonAction", a.action);
     };
-    return (a, t) => I.value ? (r(), s(x, f({ key: 0 }, {
-      ...z.value,
-      ...l.field?.props || {}
-    }, R(k.value)), O({ _: 2 }, [
-      L(v)(l.field.addonLeft) ? {
+    return (a, l) => B.value ? (s(), u(g, f({ key: 0 }, {
+      ...S.value,
+      ...t.field?.props || {}
+    }, C(k.value)), T({ _: 2 }, [
+      F(v)(t.field.addonLeft) ? {
         name: "addon-left",
         fn: n(() => [
-          l.field.addonLeft.type === "select" ? (r(), s(b, f({
+          t.field.addonLeft.type === "select" ? (s(), u(z, f({
             key: 0,
-            modelValue: l.field.addonLeft.name ? l.values[l.field.addonLeft.name] : void 0,
-            options: l.field.addonLeft.options || []
-          }, l.field.addonLeft.props || {}, {
-            onOnSelect: t[0] || (t[0] = (i) => V(l.field.addonLeft, i))
+            modelValue: t.field.addonLeft.name ? t.values[t.field.addonLeft.name] : void 0,
+            options: t.field.addonLeft.options || []
+          }, t.field.addonLeft.props || {}, {
+            onOnSelect: l[0] || (l[0] = (i) => R(t.field.addonLeft, i))
           }), {
             trigger: n(({ selectedLabel: i }) => [
-              $(h, { variant: "outline" }, {
+              L(h, { variant: "outline" }, {
                 default: n(() => [
                   m(p(i), 1)
                 ]),
@@ -271,32 +294,32 @@ const me = /* @__PURE__ */ B({
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : l.field.addonLeft.type === "button" ? (r(), s(h, f({
+          }, 16, ["modelValue", "options"])) : t.field.addonLeft.type === "button" ? (s(), u(h, f({
             key: 1,
             variant: "outline"
-          }, l.field.addonLeft.props || {}, {
-            onClick: t[1] || (t[1] = (i) => S(l.field.addonLeft))
+          }, t.field.addonLeft.props || {}, {
+            onClick: l[1] || (l[1] = (i) => w(t.field.addonLeft))
           }), {
             default: n(() => [
-              m(p(l.field.addonLeft.text), 1)
+              m(p(t.field.addonLeft.text), 1)
             ]),
             _: 1
-          }, 16)) : w("", !0)
+          }, 16)) : $("", !0)
         ]),
         key: "0"
       } : void 0,
-      L(v)(l.field.addonRight) ? {
+      F(v)(t.field.addonRight) ? {
         name: "addon-right",
         fn: n(() => [
-          l.field.addonRight.type === "select" ? (r(), s(b, f({
+          t.field.addonRight.type === "select" ? (s(), u(z, f({
             key: 0,
-            modelValue: l.field.addonRight.name ? l.values[l.field.addonRight.name] : void 0,
-            options: l.field.addonRight.options || []
-          }, l.field.addonRight.props || {}, {
-            onOnSelect: t[2] || (t[2] = (i) => V(l.field.addonRight, i))
+            modelValue: t.field.addonRight.name ? t.values[t.field.addonRight.name] : void 0,
+            options: t.field.addonRight.options || []
+          }, t.field.addonRight.props || {}, {
+            onOnSelect: l[2] || (l[2] = (i) => R(t.field.addonRight, i))
           }), {
             trigger: n(({ selectedLabel: i }) => [
-              $(h, { variant: "outline" }, {
+              L(h, { variant: "outline" }, {
                 default: n(() => [
                   m(p(i), 1)
                 ]),
@@ -304,29 +327,29 @@ const me = /* @__PURE__ */ B({
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : l.field.addonRight.type === "button" ? (r(), s(h, f({
+          }, 16, ["modelValue", "options"])) : t.field.addonRight.type === "button" ? (s(), u(h, f({
             key: 1,
             variant: "outline"
-          }, l.field.addonRight.props || {}, {
-            onClick: t[3] || (t[3] = (i) => S(l.field.addonRight))
+          }, t.field.addonRight.props || {}, {
+            onClick: l[3] || (l[3] = (i) => w(t.field.addonRight))
           }), {
             default: n(() => [
-              m(p(l.field.addonRight.text), 1)
+              m(p(t.field.addonRight.text), 1)
             ]),
             _: 1
-          }, 16)) : w("", !0)
+          }, 16)) : $("", !0)
         ]),
         key: "1"
       } : void 0
-    ]), 1040)) : (r(), s(T(F.value), f({
+    ]), 1040)) : (s(), u(j(N.value), f({
       key: 1,
-      class: ["switch", "check"].includes(l.field?.type) ? "" : "w-full"
+      class: ["switch", "check"].includes(t.field?.type) ? "" : "w-full"
     }, {
-      ...z.value,
-      ...l.field?.props || {}
-    }, R(k.value)), null, 16, ["class"]));
+      ...S.value,
+      ...t.field?.props || {}
+    }, C(k.value)), null, 16, ["class"]));
   }
 });
 export {
-  me as default
+  pe as default
 };

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as R } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const U = { class: "block truncate -text-fs-1.5" }, V = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, q = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/Screen/ScreenFilter.vue.js

@@ -12,7 +12,7 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                        */

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -395,15 +395,15 @@
   --color-mixture-2: #ffffff !important;
 
   --color-gray-50: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 96%,
+      var(--color-mixture-1, #ffffff) 97.5%,
       var(--color-mixture-2, #000000));
 
   --color-gray-100: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 93%,
+      var(--color-mixture-1, #ffffff) 96%,
       var(--color-mixture-2, #000000));
 
   --color-gray-150: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 90%,
+      var(--color-mixture-1, #ffffff) 92%,
       var(--color-mixture-2, #000000));
 
   --color-gray-200: color-mix(in oklab,
@@ -424,7 +424,7 @@
 
   --color-secondary: color-mix(in oklab, var(--color-mixture-1) 89%, var(--color-mixture-2));
   --color-muted: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 95%,
+      var(--color-mixture-1, #ffffff) 95.5%,
       var(--color-mixture-2, #000000));
   --color-destructive: #7f1d1d;
   --color-destructive-foreground: #fafafa;