vlite3 0.5.10 → 0.6.1

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

@@ -5,8 +5,8 @@ import O from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
 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/DateRangePicker.vue.d.ts

@@ -14,6 +14,7 @@ type __VLS_Props = {
     size?: ButtonSize;
     variant?: ButtonVariant;
     showQuickRanges?: boolean;
+    triggerClass?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (...args: any[]) => void;

package/components/DateRangePicker.vue.js

@@ -6,10 +6,10 @@ import { $t as l } from "../utils/i18n.js";
 import P from "./Button.vue.js";
 import p from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:flex-row bg-background rounded-md" }, Q = {
+const $ = { class: "flex items-center justify-between gap-2 w-full" }, j = { class: "flex flex-col sm:flex-row bg-background rounded-md" }, H = {
   key: 0,
   class: "flex flex-col gap-1 sm:pr-3 py-2 sm:border-r border-border max-h-[280px]"
-}, j = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, O = { class: "border border-border rounded-md overflow-hidden bg-background" }, I = { class: "flex items-center justify-center shrink-0" }, U = { class: "border border-border rounded-md overflow-hidden bg-background" }, ee = /* @__PURE__ */ V({
+}, Q = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, O = { class: "border border-border rounded-md overflow-hidden bg-background" }, I = { class: "flex items-center justify-center shrink-0" }, U = { class: "border border-border rounded-md overflow-hidden bg-background" }, ee = /* @__PURE__ */ V({
   __name: "DateRangePicker",
   props: {
     modelValue: {},
@@ -21,18 +21,19 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
     readonly: { type: Boolean },
     size: {},
     variant: {},
-    showQuickRanges: { type: Boolean, default: !0 }
+    showQuickRanges: { type: Boolean, default: !0 },
+    triggerClass: {}
   },
   emits: ["update:modelValue", "change"],
   setup(r, { emit: M }) {
-    const v = r, D = M, o = w(!1), c = w(0);
+    const v = r, b = M, o = w(!1), c = w(0);
     L(o, (t) => {
       t && c.value++;
     });
     const n = u({
       get: () => v.modelValue || { start: null, end: null },
       set: (t) => {
-        D("update:modelValue", t), D("change", t);
+        b("update:modelValue", t), b("change", t);
       }
     }), Y = (t) => {
       n.value = { ...n.value, start: t };
@@ -44,13 +45,13 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
         if (!isNaN(t.getTime())) return t.toISOString();
       }
       return v.maxDate;
-    }), N = u(() => {
+    }), C = u(() => {
       if (n.value.start) {
         const t = new Date(n.value.start);
         if (!isNaN(t.getTime())) return t.toISOString();
       }
       return v.minDate;
-    }), b = (t) => {
+    }), D = (t) => {
       if (!t) return "";
       try {
         const e = new Date(t);
@@ -58,7 +59,7 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
       } catch {
         return "";
       }
-    }, C = u(() => [
+    }, N = u(() => [
       {
         label: l("vlite.dateRangePicker.today") !== "vlite.dateRangePicker.today" ? l("vlite.dateRangePicker.today") : "Today",
         value: "today",
@@ -152,30 +153,30 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
           variant: r.variant || "outline",
           size: r.size || "md",
           disabled: r.disabled,
-          class: k(["w-full sm:min-w-[280px] justify-start text-left font-normal", { "ring-2 ring-ring ring-offset-2": a }])
+          class: k(["w-max justify-between text-left font-normal", [r.triggerClass, { "ring-1 ring-ring ring-offset-[1]": a }]])
         }, {
           default: y(() => [
             i("div", $, [
               i("span", {
                 class: k({ "text-muted-foreground": !n.value.start })
-              }, R(n.value.start ? b(n.value.start) : r.placeholderStart), 3),
+              }, R(n.value.start ? D(n.value.start) : r.placeholderStart), 3),
               g(f, {
                 icon: "lucide:arrow-right",
-                class: "w-4 h-4 text-muted-foreground opacity-50 shrink-0"
+                class: "w-4 h-4 text-muted-foreground opacity-60 shrink-0"
               }),
               i("span", {
                 class: k({ "text-muted-foreground": !n.value.end })
-              }, R(n.value.end ? b(n.value.end) : r.placeholderEnd), 3)
+              }, R(n.value.end ? D(n.value.end) : r.placeholderEnd), 3)
             ])
           ]),
           _: 1
         }, 8, ["variant", "size", "disabled", "class"])
       ]),
       menu: y(() => [
-        i("div", H, [
-          r.showQuickRanges ? (d(), x("div", Q, [
+        i("div", j, [
+          r.showQuickRanges ? (d(), x("div", H, [
             e[1] || (e[1] = i("div", { class: "text-xs pl-2 pb-2 font-semibold text-muted-foreground uppercase tracking-wider" }, " Quick Ranges ", -1)),
-            (d(!0), x(z, null, B(C.value, (a) => (d(), m(P, {
+            (d(!0), x(z, null, B(N.value, (a) => (d(), m(P, {
               key: a.value,
               text: a.label,
               icon: a.icon,
@@ -185,7 +186,7 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
               onClick: (s) => F(a)
             }, null, 8, ["text", "icon", "onClick"]))), 128))
           ])) : E("", !0),
-          i("div", j, [
+          i("div", Q, [
             i("div", O, [
               (d(), m(h(p), {
                 key: "start-" + c.value,
@@ -214,7 +215,7 @@ const $ = { class: "flex items-center gap-2" }, H = { class: "flex flex-col sm:f
                 value: n.value.end,
                 onChange: _,
                 mode: "date",
-                "min-date": N.value,
+                "min-date": C.value,
                 "max-date": r.maxDate,
                 disabled: r.disabled,
                 readonly: r.readonly

package/components/Form/FormField.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as U, computed as o, markRaw as I, openBlock as r, createBlock as f, mergeProps as u, toHandlers as S, createSlots as N, unref as R, withCtx as n, createVNode as z, createTextVNode as c, toDisplayString as m, createCommentVNode as L, resolveDynamicComponent as B } from "vue";
+import { defineComponent as U, computed as o, markRaw as I, openBlock as r, createBlock as f, mergeProps as s, toHandlers as S, createSlots as N, unref as R, withCtx as n, createVNode as z, createTextVNode as c, toDisplayString as m, createCommentVNode as L, resolveDynamicComponent as B } from "vue";
 import { isComponent as h, isAddonObject as p } from "./utils/form.utils.js";
 import O from "../NumberInput.vue.js";
 import v from "../Button.vue.js";
@@ -15,7 +15,7 @@ import G from "../DatePicker.vue.js";
 import J from "../ColorPicker/ColorPicker.vue.js";
 import K from "../IconPicker.vue.js";
 import M from "./CustomFields.vue.js";
-const se = /* @__PURE__ */ U({
+const ue = /* @__PURE__ */ U({
   __name: "FormField",
   props: {
     field: {},
@@ -32,10 +32,10 @@ const se = /* @__PURE__ */ U({
   },
   emits: ["change", "addonChange", "addonAction"],
   setup(l, { emit: $ }) {
-    const e = l, s = $, d = (t, a) => {
-      s("change", { value: t, data: a });
+    const e = l, u = $, d = (t, a) => {
+      u("change", { value: t, data: a });
     }, w = (t) => {
-      s("change", { value: t });
+      u("change", { value: t });
     }, C = o(() => {
       const t = e.field.type;
       if (h(t))
@@ -111,7 +111,7 @@ const se = /* @__PURE__ */ U({
         max: e.field.max,
         step: e.field.props?.step ?? 1,
         variant: e.field.props?.variant ?? "split",
-        mode: e.field.props?.mode ?? "outline",
+        mode: e.field.props?.mode ?? (e.variant === "transparent" ? "ghost" : "outline"),
         size: e.size,
         rounded: e.rounded,
         placeholder: i,
@@ -232,18 +232,18 @@ const se = /* @__PURE__ */ U({
       const t = e.field.type;
       return t === "text" || t === "email" || t === "password" || t === "tel" || t === "url" || t === "search" || !t;
     }), P = o(() => F.value && A.value), V = (t, a) => {
-      s("addonChange", t.name, { value: a.value });
+      u("addonChange", t.name, { value: a.value });
     }, k = (t) => {
-      t.action && s("addonAction", t.action);
+      t.action && u("addonAction", t.action);
     };
-    return (t, a) => P.value ? (r(), f(g, u({ key: 0 }, {
+    return (t, a) => P.value ? (r(), f(g, s({ key: 0 }, {
       ...b.value,
       ...l.field?.props || {}
     }, S(x.value)), N({ _: 2 }, [
       R(p)(l.field.addonLeft) ? {
         name: "addon-left",
         fn: n(() => [
-          l.field.addonLeft.type === "select" ? (r(), f(y, u({
+          l.field.addonLeft.type === "select" ? (r(), f(y, s({
             key: 0,
             modelValue: l.field.addonLeft.name ? l.values[l.field.addonLeft.name] : void 0,
             options: l.field.addonLeft.options || []
@@ -259,7 +259,7 @@ const se = /* @__PURE__ */ U({
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : l.field.addonLeft.type === "button" ? (r(), f(v, u({
+          }, 16, ["modelValue", "options"])) : l.field.addonLeft.type === "button" ? (r(), f(v, s({
             key: 1,
             variant: "outline"
           }, l.field.addonLeft.props || {}, {
@@ -276,7 +276,7 @@ const se = /* @__PURE__ */ U({
       R(p)(l.field.addonRight) ? {
         name: "addon-right",
         fn: n(() => [
-          l.field.addonRight.type === "select" ? (r(), f(y, u({
+          l.field.addonRight.type === "select" ? (r(), f(y, s({
             key: 0,
             modelValue: l.field.addonRight.name ? l.values[l.field.addonRight.name] : void 0,
             options: l.field.addonRight.options || []
@@ -292,7 +292,7 @@ const se = /* @__PURE__ */ U({
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : l.field.addonRight.type === "button" ? (r(), f(v, u({
+          }, 16, ["modelValue", "options"])) : l.field.addonRight.type === "button" ? (r(), f(v, s({
             key: 1,
             variant: "outline"
           }, l.field.addonRight.props || {}, {
@@ -306,7 +306,7 @@ const se = /* @__PURE__ */ U({
         ]),
         key: "1"
       } : void 0
-    ]), 1040)) : (r(), f(B(C.value), u({
+    ]), 1040)) : (r(), f(B(C.value), s({
       key: 1,
       class: ["switch", "check"].includes(l.field?.type) ? "" : "w-full"
     }, {
@@ -316,5 +316,5 @@ const se = /* @__PURE__ */ U({
   }
 });
 export {
-  se as default
+  ue as default
 };

package/components/Input.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as Z, computed as d, useSlots as _, ref as b, onMounted as ee, nextTick as j, openBlock as a, createElementBlock as u, normalizeClass as r, createBlock as z, withCtx as te, createTextVNode as R, toDisplayString as w, createCommentVNode as s, createElementVNode as $, renderSlot as T, createVNode as C } from "vue";
+import { defineComponent as Y, computed as a, useSlots as Z, ref as b, onMounted as _, nextTick as z, openBlock as d, createElementBlock as u, normalizeClass as r, createBlock as R, withCtx as ee, createTextVNode as $, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as T, createVNode as C } from "vue";
 import v from "./Icon.vue.js";
-import le from "./Label.vue.js";
-import ne from "./Textarea.vue.js";
+import te from "./Label.vue.js";
+import le from "./Textarea.vue.js";
 import { $t as E } from "../utils/i18n.js";
-const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "max"], ae = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, me = /* @__PURE__ */ Z({
+const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "max"], ae = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, fe = /* @__PURE__ */ Y({
   __name: "Input",
   props: {
     modelValue: { default: "" },
@@ -38,23 +38,23 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
   },
   emits: ["update:modelValue", "focus", "blur", "change", "click:icon", "click:icon-right"],
   setup(t, { emit: D }) {
-    const e = t, i = D, f = d(() => e.labelI18n ? E(e.labelI18n) : e.label), A = d(
+    const e = t, c = D, s = a(() => e.labelI18n ? E(e.labelI18n) : e.label), I = a(
       () => e.placeholderI18n ? E(e.placeholderI18n) : e.placeholder
-    ), g = _(), m = b(null), x = b(!1), p = b(!1), H = d(() => e.type === "password" && x.value ? "text" : e.type), k = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), U = d(() => h.value || k.value || p.value), y = d(() => !!e.addonLeft || !!g["addon-left"]), V = d(() => !!e.addonRight || !!g["addon-right"]), W = d(() => [
+    ), g = Z(), m = b(null), x = b(!1), y = b(!1), H = a(() => e.type === "password" && x.value ? "text" : e.type), k = a(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), V = a(() => h.value || k.value || y.value), p = a(() => !!e.addonLeft || !!g["addon-left"]), B = a(() => !!e.addonRight || !!g["addon-right"]), U = a(() => [
       "relative w-full",
       e.class,
       e.labelPosition === "left" ? "flex items-center gap-4" : "",
       e.labelPosition === "right" ? "flex flex-row-reverse items-center gap-4" : "space-y-2"
-    ].join(" ")), q = d(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
+    ].join(" ")), W = a(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
       " "
-    )), I = d(() => {
+    )), S = a(() => {
       const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", n = {
         solid: "bg-muted border-transparent focus-visible:border-primary",
         outline: "border border-input focus-visible:border-primary",
         "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-primary",
         transparent: "border-none bg-transparent shadow-none",
         floating: "border border-input focus-visible:border-primary"
-      }, c = {
+      }, f = {
         sm: "h-7.5 text-xs",
         md: "h-9 text-sm",
         lg: "h-10 text-base"
@@ -68,27 +68,25 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
         "2xl": "rounded-2xl",
         full: "rounded-full"
       }[e.rounded];
-      y.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), V.value && (y.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
-      const N = e.variant === "outline-b" || e.variant === "transparent", M = e.variant === "floating";
-      return [
+      p.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), B.value && (p.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
+      const M = e.variant === "outline-b" || e.variant === "transparent";
+      return e.variant, [
         l,
         n[e.variant],
-        e.type === "textarea" ? "" : c[e.size],
+        e.type === "textarea" ? "" : f[e.size],
         o,
         e.error ? "border-destructive focus-visible:ring-destructive" : "",
-        e.icon ? "pl-9" : N && !y.value ? "pl-0" : "",
-        M && e.type !== "textarea" ? "pt-3 pb-3" : "",
-        M && e.type === "textarea" ? "pt-3.5" : "",
-        e.showClearButton && k.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : N && !V.value ? "pr-0" : "",
+        e.icon ? "pl-9" : M && !p.value ? "pl-0" : "",
+        e.showClearButton && k.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : M && !B.value ? "pr-0" : "",
         // Keyframe name used to detect browser autofill via animationstart event
         e.variant === "floating" ? "autofill-detect" : "",
         e.inputClass
       ].join(" ");
-    }), S = {
+    }), L = {
       sm: "text-xs",
       md: "text-sm",
       lg: "text-base"
-    }, L = (l) => {
+    }, P = (l) => {
       const n = l === "left";
       return [
         "[&_button]:w-full [&_a]:w-full! [&_.v-btn]:w-full! [&_.tooltip-trigger]:w-full",
@@ -97,11 +95,11 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
         n ? "-mr-px" : "-ml-px",
         "z-10"
       ].join(" ");
-    }, G = d(() => {
+    }, q = a(() => {
       const l = !!g["addon-left"];
       return [
         "flex items-center justify-center whitespace-nowrap",
-        l ? `border-none ${L("left")}` : `bg-muted border border-input border-r-0! px-3 text-muted-foreground ${{
+        l ? `border-none ${P("left")}` : `bg-muted border border-input border-r-0! px-3 text-muted-foreground ${{
           sm: "rounded-l-sm",
           md: "rounded-l-md",
           lg: "rounded-l-lg",
@@ -110,15 +108,15 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
           xl: "rounded-l-xl",
           "2xl": "rounded-l-2xl"
         }[e.rounded] || "rounded-l-md"}`,
-        l ? "" : S[e.size],
+        l ? "" : L[e.size],
         e.addonLeftClass,
         e.disabled ? "opacity-50 cursor-not-allowed" : ""
       ].join(" ");
-    }), J = d(() => {
+    }), G = a(() => {
       const l = !!g["addon-right"];
       return [
         "flex items-center justify-center whitespace-nowrap",
-        l ? `border-none ${L("right")}` : `bg-muted border border-input border-l-0! px-3 text-muted-foreground ${{
+        l ? `border-none ${P("right")}` : `bg-muted border border-input border-l-0! px-3 text-muted-foreground ${{
           sm: "rounded-r-sm",
           md: "rounded-r-md",
           lg: "rounded-r-lg",
@@ -127,100 +125,100 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
           xl: "rounded-r-xl",
           "2xl": "rounded-r-2xl"
         }[e.rounded] || "rounded-r-md"}`,
-        l ? "" : S[e.size],
+        l ? "" : L[e.size],
         e.addonRightClass,
         e.disabled ? "opacity-50 cursor-not-allowed" : ""
       ].join(" ");
-    }), K = (l) => {
+    }), J = (l) => {
       const n = l.target;
-      i("update:modelValue", n.value);
-    }, O = (l) => {
+      c("update:modelValue", n.value);
+    }, K = (l) => {
       const n = l.target;
-      i("change", n.value);
-    }, Q = () => {
+      c("change", n.value);
+    }, O = () => {
       x.value = !x.value;
-    }, X = () => {
-      i("update:modelValue", ""), j(() => {
+    }, Q = () => {
+      c("update:modelValue", ""), z(() => {
         m.value?.focus();
       });
-    }, h = b(!1), B = b(!1), F = (l) => {
-      h.value = !0, i("focus", l);
-    }, P = (l) => {
-      h.value = !1, i("blur", l);
-    }, Y = (l) => {
-      l.animationName === "onAutoFillStart" ? p.value = !0 : l.animationName === "onAutoFillCancel" && (p.value = !1);
+    }, h = b(!1), j = b(!1), F = (l) => {
+      h.value = !0, c("focus", l);
+    }, N = (l) => {
+      h.value = !1, c("blur", l);
+    }, X = (l) => {
+      l.animationName === "onAutoFillStart" ? y.value = !0 : l.animationName === "onAutoFillCancel" && (y.value = !1);
     };
-    return ee(() => {
-      e.autofocus && j(() => {
+    return _(() => {
+      e.autofocus && z(() => {
         m.value?.focus();
-      }), j(() => {
-        m.value && m.value.value && !e.modelValue && (p.value = !0);
+      }), z(() => {
+        m.value && m.value.value && !e.modelValue && (y.value = !0);
       });
-    }), (l, n) => (a(), u("div", {
-      class: r(W.value)
+    }), (l, n) => (d(), u("div", {
+      class: r(U.value)
     }, [
-      f.value && t.variant !== "floating" ? (a(), z(le, {
+      s.value && t.variant !== "floating" ? (d(), R(te, {
         key: 0,
-        for: f.value,
+        for: s.value,
         class: r(["mb-1.5", t.labelPosition !== "top" ? "mb-0" : ""].join(" "))
       }, {
-        default: te(() => [
-          R(w(f.value), 1)
+        default: ee(() => [
+          $(w(s.value), 1)
         ]),
         _: 1
-      }, 8, ["for", "class"])) : s("", !0),
-      $("div", {
-        class: r(q.value)
+      }, 8, ["for", "class"])) : i("", !0),
+      A("div", {
+        class: r(W.value)
       }, [
-        y.value ? (a(), u("div", {
+        p.value ? (d(), u("div", {
           key: 0,
-          class: r(G.value)
+          class: r(q.value)
         }, [
           T(l.$slots, "addon-left", {}, () => [
-            R(w(t.addonLeft), 1)
+            $(w(t.addonLeft), 1)
           ])
-        ], 2)) : s("", !0),
-        $("div", {
+        ], 2)) : i("", !0),
+        A("div", {
           class: "relative w-full",
-          onMouseenter: n[2] || (n[2] = (c) => B.value = !0),
-          onMouseleave: n[3] || (n[3] = (c) => B.value = !1)
+          onMouseenter: n[2] || (n[2] = (f) => j.value = !0),
+          onMouseleave: n[3] || (n[3] = (f) => j.value = !1)
         }, [
-          f.value && t.variant === "floating" ? (a(), u("label", {
+          s.value && t.variant === "floating" ? (d(), u("label", {
             key: 0,
-            for: f.value,
+            for: s.value,
             class: r([
               "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
-              U.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-primary shadow-[0_4px_4px_-4px_bg-background]" : `top-2.5 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
+              V.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-primary shadow-[0_4px_4px_-4px_bg-background] translate-y-0" : t.type === "textarea" ? `top-2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"} translate-y-0` : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
             ])
-          }, w(f.value), 11, oe)) : s("", !0),
-          t.type === "textarea" ? (a(), z(ne, {
+          }, w(s.value), 11, ne)) : i("", !0),
+          t.type === "textarea" ? (d(), R(le, {
             key: 1,
             "model-value": String(t.modelValue),
-            placeholder: A.value,
+            placeholder: t.variant === "floating" && s.value && !V.value ? "" : I.value,
             disabled: t.disabled,
             rows: t.rows,
-            class: r(I.value),
-            "onUpdate:modelValue": n[0] || (n[0] = (c) => i("update:modelValue", c)),
-            onBlur: P,
+            class: r(S.value),
+            "onUpdate:modelValue": n[0] || (n[0] = (f) => c("update:modelValue", f)),
+            onBlur: N,
             onFocus: F
-          }, null, 8, ["model-value", "placeholder", "disabled", "rows", "class"])) : (a(), u("input", {
+          }, null, 8, ["model-value", "placeholder", "disabled", "rows", "class"])) : (d(), u("input", {
             key: 2,
             ref_key: "inputRef",
             ref: m,
             type: H.value,
             value: t.modelValue,
-            placeholder: A.value,
+            placeholder: t.variant === "floating" && s.value && !V.value ? "" : I.value,
             disabled: t.disabled,
             min: t.min,
             max: t.max,
-            class: r(I.value),
-            onInput: K,
-            onChange: O,
-            onBlur: P,
+            class: r(S.value),
+            onInput: J,
+            onChange: K,
+            onBlur: N,
             onFocus: F,
-            onAnimationstart: Y
-          }, null, 42, de)),
-          t.icon ? (a(), u("div", {
+            onAnimationstart: X
+          }, null, 42, oe)),
+          t.icon ? (d(), u("div", {
             key: 3,
             tabindex: "-1",
             class: r([
@@ -232,64 +230,64 @@ const oe = ["for"], de = ["type", "value", "placeholder", "disabled", "min", "ma
               icon: t.icon,
               class: r(["h-4 w-4", t.iconClass])
             }, null, 8, ["icon", "class"])
-          ], 2)) : s("", !0),
-          $("div", ae, [
-            t.loading ? (a(), z(v, {
+          ], 2)) : i("", !0),
+          A("div", ae, [
+            t.loading ? (d(), R(v, {
               key: 0,
               icon: "lucide:loader-2",
               class: "h-4 w-4 animate-spin text-muted-foreground"
-            })) : t.iconRight ? (a(), u("div", {
+            })) : t.iconRight ? (d(), u("div", {
               key: 1,
               tabindex: "-1",
               class: r([
                 "flex items-center justify-center text-muted-foreground",
                 t.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-foreground"
               ]),
-              onClick: n[1] || (n[1] = (c) => !t.disabled && i("click:icon-right", c))
+              onClick: n[1] || (n[1] = (f) => !t.disabled && c("click:icon-right", f))
             }, [
               C(v, {
                 icon: t.iconRight,
                 class: r(["h-4 w-4", t.iconRightClass])
               }, null, 8, ["icon", "class"])
-            ], 2)) : s("", !0),
-            t.type === "password" && !t.disabled ? (a(), u("button", {
+            ], 2)) : i("", !0),
+            t.type === "password" && !t.disabled ? (d(), u("button", {
               key: 2,
               type: "button",
               tabindex: "-1",
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none",
-              onClick: Q
+              onClick: O
             }, [
               C(v, {
                 icon: x.value ? "lucide:eye-off" : "lucide:eye",
                 class: "h-4 w-4"
               }, null, 8, ["icon"])
-            ])) : s("", !0),
-            t.showClearButton && k.value && !t.disabled && !t.loading && t.type !== "textarea" && t.type !== "password" && (h.value || B.value) ? (a(), u("button", {
+            ])) : i("", !0),
+            t.showClearButton && k.value && !t.disabled && !t.loading && t.type !== "textarea" && t.type !== "password" && (h.value || j.value) ? (d(), u("button", {
               key: 3,
               type: "button",
               tabindex: "-1",
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none transition-opacity duration-200",
-              onClick: X
+              onClick: Q
             }, [
               C(v, {
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })
-            ])) : s("", !0)
+            ])) : i("", !0)
           ])
         ], 32),
-        V.value ? (a(), u("div", {
+        B.value ? (d(), u("div", {
           key: 1,
-          class: r(J.value)
+          class: r(G.value)
         }, [
           T(l.$slots, "addon-right", {}, () => [
-            R(w(t.addonRight), 1)
+            $(w(t.addonRight), 1)
           ])
-        ], 2)) : s("", !0)
+        ], 2)) : i("", !0)
       ], 2)
     ], 2));
   }
 });
 export {
-  me as default
+  fe as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -11,7 +11,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.5.10",
+  "version": "0.6.1",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -333,8 +333,8 @@
   --date-picker-border: var(--color-border) !important;
   --date-picker-radius: var(--radius) !important;
 
-  --color-success-subtle: #e3f4e4fb;
-  --color-success-subtle-fg: #005e1e;
+  --color-success-subtle: #ECF8EB;
+  --color-success-subtle-fg: #216e39;
   --color-success-subtle-border: #b7e1c1;
 
   --color-info-subtle: #e8f0fe;