vlite3 0.2.6 → 0.2.8

package/components/Button.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as v, useSlots as x, computed as s, withDirectives as y, openBlock as r, createElementBlock as w, normalizeClass as i, createBlock as a, createCommentVNode as u, renderSlot as p, createTextVNode as k, toDisplayString as z, unref as B } from "vue";
-import c from "./Icon.vue.js";
+import { defineComponent as v, useSlots as x, computed as c, withDirectives as w, openBlock as i, createElementBlock as y, normalizeClass as o, createBlock as l, createCommentVNode as u, renderSlot as p, createTextVNode as z, toDisplayString as k, unref as B } from "vue";
+import d from "./Icon.vue.js";
 import { vRipple as C } from "../directives/vRipple.js";
-const R = ["type", "disabled"], D = /* @__PURE__ */ v({
+const S = ["type", "disabled"], D = /* @__PURE__ */ v({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,8 +16,8 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
     rounded: { default: "md" }
   },
   setup(e) {
-    const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", d = {
+    const t = e, g = x(), s = c(() => t.icon && !t.text && !g.default), h = c(() => {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", r = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -43,13 +43,13 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
         md: "h-9 px-4 py-2",
         lg: "h-10 px-6",
         xl: "h-12 px-10"
-      }, b = {
-        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
-        sm: "h-8 w-8 min-h-9 min-w-9",
-        md: "h-9 w-9 min-h-9 min-w-9",
-        lg: "h-10 w-10 min-h-11 min-w-11",
-        xl: "h-12 w-12 min-h-12 min-w-12"
       }, m = {
+        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
+        sm: "h-7 w-7 min-h-7 min-w-7",
+        md: "h-7.5 w-7.5 min-h-7.5 min-w-7.5",
+        lg: "h-8 w-8 min-h-8 min-w-8",
+        xl: "h-8.5 w-8.5 min-h-8.5 min-w-8.5"
+      }, b = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded",
@@ -60,44 +60,53 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
       };
       return [
         n,
-        d[t.variant],
-        m[t.rounded],
-        l.value ? b[t.size] : f[t.size],
+        r[t.variant],
+        b[t.rounded],
+        s.value ? m[t.size] : f[t.size],
         t.class
       ].join(" ");
-    }), o = s(() => ({
-      xs: "w-3 h-3",
-      sm: "w-4 h-4",
-      md: "w-4 h-4",
-      lg: "w-4 h-4",
-      xl: "w-4 h-4"
-    })[t.size]);
-    return (n, d) => y((r(), w("button", {
+    }), a = c(() => {
+      const n = {
+        xs: "w-3 h-3",
+        sm: "w-4 h-4",
+        md: "w-4 h-4",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      }, r = {
+        xs: "w-3 h-3",
+        sm: "w-3.5 h-3.5",
+        md: "w-3.5 h-3.5",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      };
+      return s.value ? r[t.size] : n[t.size];
+    });
+    return (n, r) => w((i(), y("button", {
       type: e.type,
-      class: i(h.value),
+      class: o(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (r(), a(c, {
+      e.loading ? (i(), l(d, {
         key: 0,
         icon: "lucide:loader-2",
-        class: i(["animate-spin", { [o.value]: !0 }])
-      }, null, 8, ["class"])) : e.icon ? (r(), a(c, {
+        class: o(["animate-spin", { [a.value]: !0 }])
+      }, null, 8, ["class"])) : e.icon ? (i(), l(d, {
         key: 1,
         icon: e.icon,
-        class: i({
-          "mx-auto": l.value,
-          [o.value]: !0
+        class: o({
+          "mx-auto": s.value,
+          [a.value]: !0
         })
       }, null, 8, ["icon", "class"])) : u("", !0),
       p(n.$slots, "default", {}, () => [
-        k(z(e.text), 1)
+        z(k(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (r(), a(c, {
+      e.iconRight && !e.loading ? (i(), l(d, {
         key: 2,
         icon: e.iconRight,
-        class: i([o.value, "h-4 w-4"])
+        class: o([a.value, "h-4 w-4"])
       }, null, 8, ["icon", "class"])) : u("", !0)
-    ], 10, R)), [
+    ], 10, S)), [
       [B(C)]
     ]);
   }

package/components/Carousel/Carousel.vue.d.ts

@@ -50,6 +50,7 @@ declare function __VLS_template(): {
                 readonly autoFocus: boolean;
                 readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+                readonly updateKey?: string | number;
                 readonly paginationBackground?: boolean;
                 readonly "onSlide-change"?: ((index: number) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -147,6 +148,9 @@ declare function __VLS_template(): {
                     type: import('vue').PropType<number>;
                     default: number;
                 };
+                updateKey: {
+                    type: import('vue').PropType<string | number>;
+                };
                 autoFocus: {
                     type: import('vue').PropType<boolean>;
                     default: boolean;
@@ -325,6 +329,9 @@ declare function __VLS_template(): {
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -469,6 +476,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             readonly autoFocus: boolean;
             readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+            readonly updateKey?: string | number;
             readonly paginationBackground?: boolean;
             readonly "onSlide-change"?: ((index: number) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -566,6 +574,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -744,6 +755,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             type: import('vue').PropType<number>;
             default: number;
         };
+        updateKey: {
+            type: import('vue').PropType<string | number>;
+        };
         autoFocus: {
             type: import('vue').PropType<boolean>;
             default: boolean;

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, computed as y, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as x } from "vue";
+import { defineComponent as w, computed as x, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as y } from "vue";
 import m from "../Icon.vue.js";
 const K = { class: "w-full" }, N = {
   key: 0,
@@ -14,7 +14,7 @@ const K = { class: "w-full" }, N = {
   class: "shrink-0 pt-0.5"
 }, q = { class: "flex flex-col" }, z = { class: "flex items-center gap-2" }, D = {
   key: 0,
-  class: "mt-1 text-sm text-muted-foreground leading-relaxed"
+  class: "mt-1 -text-fs-3 text-muted leading-relaxed"
 }, F = {
   key: 0,
   class: "absolute top-4 right-4 text-primary"
@@ -31,18 +31,18 @@ const K = { class: "w-full" }, N = {
     gap: { default: 4 }
   },
   emits: ["update:modelValue", "change"],
-  setup(r, { emit: h }) {
-    const s = r, g = h, n = (l) => Array.isArray(s.modelValue) ? s.modelValue.includes(l) : s.modelValue === l, f = (l) => {
-      if (s.disabled || s.options.find((d) => d.id === l)?.disabled) return;
+  setup(s, { emit: h }) {
+    const r = s, g = h, n = (l) => Array.isArray(r.modelValue) ? r.modelValue.includes(l) : r.modelValue === l, f = (l) => {
+      if (r.disabled || r.options.find((d) => d.id === l)?.disabled) return;
       let e;
-      if (s.multiple) {
-        const d = Array.isArray(s.modelValue) ? [...s.modelValue] : [], p = d.indexOf(l);
+      if (r.multiple) {
+        const d = Array.isArray(r.modelValue) ? [...r.modelValue] : [], p = d.indexOf(l);
         p === -1 ? d.push(l) : d.splice(p, 1), e = d;
       } else
         e = l;
       g("update:modelValue", e), g("change", e);
-    }, b = y(() => {
-      switch (s.grid) {
+    }, b = x(() => {
+      switch (r.grid) {
         case 1:
           return "grid-cols-1";
         case 2:
@@ -54,8 +54,8 @@ const K = { class: "w-full" }, N = {
         default:
           return "grid-cols-1";
       }
-    }), v = y(() => {
-      switch (s.gap) {
+    }), v = x(() => {
+      switch (r.gap) {
         case 2:
           return "gap-2";
         case 3:
@@ -71,18 +71,18 @@ const K = { class: "w-full" }, N = {
       }
     });
     return (l, k) => (t(), i("div", K, [
-      r.title || r.description ? (t(), i("div", N, [
-        r.title ? (t(), i("h3", $, o(r.title), 1)) : a("", !0),
-        r.description ? (t(), i("p", E, o(r.description), 1)) : a("", !0)
+      s.title || s.description ? (t(), i("div", N, [
+        s.title ? (t(), i("h3", $, o(s.title), 1)) : a("", !0),
+        s.description ? (t(), i("p", E, o(s.description), 1)) : a("", !0)
       ])) : a("", !0),
       c("div", {
         class: u(["grid", [b.value, v.value]])
       }, [
-        (t(!0), i(V, null, _(r.options, (e) => (t(), i("div", {
+        (t(!0), i(V, null, _(s.options, (e) => (t(), i("div", {
           key: e.id,
           class: u(["relative flex cursor-pointer rounded-xl border border-border p-4 transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
             n(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
-            r.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
+            s.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
           ]]),
           onClick: (d) => f(e.id),
           tabindex: "0",
@@ -105,7 +105,7 @@ const K = { class: "w-full" }, N = {
             c("div", q, [
               c("div", z, [
                 c("span", {
-                  class: u(["font-semibold text-foreground", {
+                  class: u(["font-semibold text-foreground text-fs-1", {
                     "text-primary": n(e.id)
                   }])
                 }, o(e.title), 3),
@@ -121,11 +121,11 @@ const K = { class: "w-full" }, N = {
             ])
           ]),
           n(e.id) ? (t(), i("div", F, [
-            r.multiple ? (t(), x(m, {
+            s.multiple ? (t(), y(m, {
               key: 0,
               icon: "lucide:check-square",
               class: "h-5 w-5"
-            })) : (t(), x(m, {
+            })) : (t(), y(m, {
               key: 1,
               icon: "lucide:check-circle-2",
               class: "h-5 w-5"

package/components/ColorPicker/ColorIro.vue.d.ts

@@ -3,7 +3,18 @@ type __VLS_Props = {
     showHeader?: boolean;
     size?: 'sm' | 'md' | 'lg';
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        bottom?(_: {}): any;
+    };
+    refs: {
+        pickerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
     "update:color": (color: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -15,4 +26,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     pickerRef: HTMLDivElement;
 }, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ColorPicker/ColorIro.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as B, defineAsyncComponent as E, ref as h, computed as C, watch as u, onMounted as H, onUnmounted as _, openBlock as i, createElementBlock as g, createVNode as P, unref as c, createBlock as x, createCommentVNode as d, createElementVNode as T, normalizeClass as N, nextTick as R } from "vue";
-import n from "@jaames/iro";
-import { useEyeDropper as V } from "@vueuse/core";
-const D = { class: "space-y-3" }, $ = {
+import { defineComponent as H, defineAsyncComponent as B, ref as g, computed as E, watch as p, onMounted as T, onUnmounted as C, openBlock as a, createElementBlock as x, createVNode as P, unref as c, createBlock as b, createCommentVNode as d, createElementVNode as M, normalizeStyle as N, renderSlot as R, nextTick as V } from "vue";
+import i from "@jaames/iro";
+import { useEyeDropper as D } from "@vueuse/core";
+const L = { class: "space-y-3 w-max" }, _ = {
   key: 0,
   class: "flex gap-2 mb-2.5 -text-fs-3 pr-0.5"
-}, M = /* @__PURE__ */ B({
+}, I = /* @__PURE__ */ H({
   __name: "ColorIro",
   props: {
     color: {},
@@ -12,9 +12,9 @@ const D = { class: "space-y-3" }, $ = {
     size: { default: "md" }
   },
   emits: ["update:color", "close"],
-  setup(l, { emit: b }) {
-    const a = E(() => import("../Button.vue2.js")), t = l, s = b, p = h(), e = h(null), { isSupported: m, open: z, sRGBHex: S } = V(), f = C(() => {
-      switch (t.size) {
+  setup(l, { emit: S }) {
+    const s = B(() => import("../Button.vue2.js")), n = l, u = S, r = g(), e = g(null), { isSupported: m, open: z, sRGBHex: w } = D(), f = E(() => {
+      switch (n.size) {
         case "sm":
           return 140;
         case "lg":
@@ -22,121 +22,119 @@ const D = { class: "space-y-3" }, $ = {
         default:
           return 162;
       }
-    }), w = {
+    }), v = {
       sm: 120,
       md: 140,
       lg: 150
-    }, v = async () => {
-      if (!(!p.value || e.value)) {
-        await R();
+    }, y = async () => {
+      if (!(!r.value || e.value)) {
+        await V();
         try {
-          e.value && (e.value.off("color:change"), e.value = null), e.value = n.ColorPicker(p.value, {
+          e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = ""), e.value = i.ColorPicker(r.value, {
             width: f.value,
-            color: t.color,
+            color: n.color,
             margin: 9,
-            boxHeight: w[t?.size],
-            // Auto-scale or keep ratio? default is usually width.
-            // Let's rely on default square-ish box unless specified.
-            // But for small size, maybe we want to keep it compact.
-            // iro defaults boxHeight to width if not specified.
+            boxHeight: v[n.size],
             sliderSize: 14,
             layout: [
               {
-                component: n.ui.Box
+                component: i.ui.Box
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "hue"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "saturation"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "value"
                 }
               }
             ]
           }), e.value.on("color:change", (o) => {
-            s("update:color", o.hexString);
+            u("update:color", o.hexString);
           });
         } catch (o) {
           console.error("Failed to initialize color picker:", o);
         }
       }
-    }, k = () => {
-      e.value && (e.value.off("color:change"), e.value = null);
+    }, h = () => {
+      e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = "");
     };
-    u(
-      () => t.color,
+    p(
+      () => n.color,
       (o) => {
         if (e.value && e.value.color.hexString !== o)
           try {
             e.value.color.hexString = o;
-          } catch (r) {
-            console.error("Error updating color:", r);
+          } catch (t) {
+            console.error("Error updating color:", t);
           }
       }
-    ), u(
-      () => t.size,
+    ), p(
+      () => n.size,
       () => {
-        k(), v();
+        h(), y();
       }
-    ), u(S, (o) => {
-      if (o && (s("update:color", o), e.value))
+    ), p(w, (o) => {
+      if (o && (u("update:color", o), e.value))
         try {
           e.value.color.hexString = o;
-        } catch (r) {
-          console.error("Error updating color from eyedropper:", r);
+        } catch (t) {
+          console.error("Error updating color from eyedropper:", t);
         }
     });
-    const y = async () => {
+    const k = async () => {
       try {
         await z();
       } catch (o) {
         console.error("Error opening eyedropper:", o);
       }
     };
-    return H(() => {
-      v();
-    }), _(() => {
-      k();
-    }), (o, r) => (i(), g("div", D, [
-      l.showHeader ? (i(), g("div", $, [
-        P(c(a), {
+    return T(() => {
+      y();
+    }), C(() => {
+      h();
+    }), (o, t) => (a(), x("div", L, [
+      l.showHeader ? (a(), x("div", _, [
+        P(c(s), {
           icon: "typcn:arrow-back",
-          onClick: r[0] || (r[0] = (A) => s("close")),
+          onClick: t[0] || (t[0] = ($) => u("close")),
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         }),
-        c(m) ? (i(), x(c(a), {
+        c(m) ? (a(), b(c(s), {
           key: 0,
-          onClick: y,
+          onClick: k,
           icon: "pepicons-pop:color-picker",
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         })) : d("", !0)
       ])) : d("", !0),
-      T("div", {
+      M("div", {
         ref_key: "pickerRef",
-        ref: p,
-        class: N(`w-[${f.value}px]`)
-      }, null, 2),
-      c(m) && !l.showHeader ? (i(), x(c(a), {
-        key: 1,
-        onClick: y,
-        icon: "pepicons-pop:color-picker",
-        variant: "outline",
-        size: "xs",
-        class: "w-full"
-      })) : d("", !0)
+        ref: r,
+        style: N({ width: f.value + "px", minHeight: v[l.size] + "px" })
+      }, null, 4),
+      R(o.$slots, "bottom", {}, () => [
+        c(m) && !l.showHeader ? (a(), b(c(s), {
+          key: 0,
+          onClick: k,
+          icon: "pepicons-pop:color-picker",
+          variant: "outline",
+          size: "sm",
+          class: "w-full"
+        })) : d("", !0)
+      ])
     ]));
   }
 });
 export {
-  M as default
+  I as default
 };

package/components/ColorPicker/ColorPicker.vue.d.ts

@@ -6,6 +6,7 @@ interface Props {
     size?: 'sm' | 'md' | 'lg';
     position?: TooltTipPlacement;
     btnProps?: ButtonProps;
+    showInput?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -18,5 +19,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     size: "sm" | "md" | "lg";
     modelValue: string;
     position: TooltTipPlacement;
+    showInput: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,56 +1,111 @@
-import { defineComponent as n, openBlock as d, createBlock as r, unref as c, withCtx as l, createElementVNode as m, createVNode as a, mergeProps as u } from "vue";
-import f from "../Dropdown/Dropdown.vue.js";
+import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as d, createElementVNode as $, mergeProps as w } from "vue";
+import B from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import p from "../Button.vue.js";
-import h from "./ColorIro.vue.js";
+import O from "../Input.vue.js";
+import y from "../Button.vue.js";
+import E from "./ColorIro.vue.js";
 /* empty css              */
-const b = { class: "p-1.5" }, w = /* @__PURE__ */ n({
+import { useEyeDropper as P } from "@vueuse/core";
+const I = {
+  key: 0,
+  class: "p-2 w-max flex flex-col justify-center"
+}, N = {
+  key: 0,
+  class: "flex items-center gap-1.5 w-full"
+}, D = { class: "w-32" }, q = /* @__PURE__ */ z({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
     disabled: { type: Boolean, default: !1 },
     size: { default: "md" },
     position: { default: "bottom" },
-    btnProps: {}
+    btnProps: {},
+    showInput: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: s }) {
-    const t = s, i = (o) => {
-      t("update:modelValue", o), t("change", o);
+  setup(o, { emit: V }) {
+    const n = o, m = V, r = p(!1), t = p(n.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
+    i(k, (e) => {
+      e && (t.value = e);
+    });
+    const x = async () => {
+      try {
+        await g();
+      } catch (e) {
+        console.error("Error opening eyedropper:", e);
+      }
     };
-    return (o, g) => (d(), r(c(f), {
-      disabled: e.disabled,
+    i(
+      () => n.modelValue,
+      (e) => {
+        e && e !== t.value && (t.value = e);
+      }
+    ), i(t, (e) => {
+      /^#([0-9A-F]{3,8})$/i.test(e) && e !== n.modelValue && (m("update:modelValue", e), m("change", e));
+    });
+    const C = (e) => {
+      t.value = e;
+    };
+    return (e, l) => (a(), f(v(B), {
+      disabled: o.disabled,
       class: "w-auto",
-      position: e.position,
+      position: o.position,
       offset: [0, 8],
       searchable: !1,
-      "close-on-select": !1
+      "close-on-select": !1,
+      onOnOpen: l[1] || (l[1] = (s) => r.value = !0),
+      onOnClose: l[2] || (l[2] = (s) => r.value = !1)
     }, {
-      trigger: l(({ isOpen: V }) => [
-        a(p, u({
-          style: { backgroundColor: e.modelValue }
+      trigger: u(({ isOpen: s }) => [
+        c(y, w({
+          style: { backgroundColor: o.modelValue }
         }, {
           rounded: "full",
           size: "xs",
           icon: " ",
           variant: "outline",
-          ...e.btnProps || {}
+          ...o.btnProps || {}
         }), null, 16, ["style"])
       ]),
-      default: l(() => [
-        m("div", b, [
-          a(h, {
-            color: e.modelValue,
+      default: u(() => [
+        r.value ? (a(), h("div", I, [
+          c(E, {
+            color: o.modelValue,
             "show-header": !1,
-            size: e.size,
-            "onUpdate:color": i
-          }, null, 8, ["color", "size"])
-        ])
+            size: o.size,
+            "onUpdate:color": C
+          }, {
+            bottom: u(() => [
+              o.showInput ? (a(), h("div", N, [
+                v(b) ? (a(), f(y, {
+                  key: 0,
+                  onClick: x,
+                  icon: "pepicons-pop:color-picker",
+                  variant: "outline",
+                  size: "sm",
+                  class: "px-2 shrink-0"
+                })) : d("", !0),
+                $("div", D, [
+                  c(O, {
+                    modelValue: t.value,
+                    "onUpdate:modelValue": l[0] || (l[0] = (s) => t.value = s),
+                    size: "sm",
+                    "show-clear-button": !1,
+                    placeholder: "#000000",
+                    class: "flex-1 w-full",
+                    "input-class": "font-mono text-xs uppercase "
+                  }, null, 8, ["modelValue"])
+                ])
+              ])) : d("", !0)
+            ]),
+            _: 1
+          }, 8, ["color", "size"])
+        ])) : d("", !0)
       ]),
       _: 1
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  w as default
+  q as default
 };