vlite3 1.4.32 → 1.4.33

package/components/ColorPicker/ColorIro.vue2.js

@@ -1,11 +1,12 @@
-import { defineComponent as H, ref as k, computed as E, watch as s, onMounted as B, onUnmounted as T, openBlock as l, createElementBlock as g, createVNode as C, unref as x, createBlock as b, createCommentVNode as u, createElementVNode as P, normalizeStyle as _, renderSlot as M, nextTick as N } from "vue";
-import i from "@jaames/iro";
-import { useEyeDropper as R } from "@vueuse/core";
-import p from "../Button.vue.js";
-const V = { class: "space-y-3 w-max" }, $ = {
+import { defineComponent as T, ref as x, computed as _, watch as u, onMounted as B, onUnmounted as P, openBlock as a, createElementBlock as b, createVNode as R, unref as S, createBlock as z, createCommentVNode as p, createElementVNode as L, normalizeStyle as V, renderSlot as I, nextTick as M } from "vue";
+import c from "@jaames/iro";
+import { useEyeDropper as N } from "@vueuse/core";
+import d from "../Button.vue.js";
+import { COLOR_PICKER_RESET_VALUE as $ } from "./constants.js";
+const D = { class: "space-y-3 w-max" }, F = {
   key: 0,
   class: "flex gap-2 mb-2.5 -text-fs-3 pr-0.5"
-}, U = /* @__PURE__ */ H({
+}, j = /* @__PURE__ */ T({
   __name: "ColorIro",
   props: {
     color: {},
@@ -13,9 +14,14 @@ const V = { class: "space-y-3 w-max" }, $ = {
     size: { default: "md" }
   },
   emits: ["update:color", "close"],
-  setup(n, { emit: S }) {
-    const c = n, a = S, r = k(), e = k(null), { isSupported: d, open: z, sRGBHex: w } = R(), m = E(() => {
-      switch (c.size) {
+  setup(l, { emit: E }) {
+    const n = l, s = E, t = x(), o = x(null);
+    let i = !1;
+    const { isSupported: f, open: w, sRGBHex: H } = N(), m = (e) => {
+      const r = (e || "").toLowerCase();
+      return r === $ || r === "#00000000";
+    }, C = (e) => m(e) || !e ? "#000000" : e, v = _(() => {
+      switch (n.size) {
         case "sm":
           return 140;
         case "lg":
@@ -23,119 +29,127 @@ const V = { class: "space-y-3 w-max" }, $ = {
         default:
           return 162;
       }
-    }), f = {
+    }), y = {
       sm: 120,
       md: 140,
       lg: 150
-    }, v = async () => {
-      if (!(!r.value || e.value)) {
-        await N();
+    }, h = async () => {
+      if (!(!t.value || o.value)) {
+        await M();
         try {
-          e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = ""), e.value = i.ColorPicker(r.value, {
-            width: m.value,
-            color: c.color,
+          o.value && (o.value.off("color:change"), o.value = null), t.value && (t.value.innerHTML = ""), o.value = c.ColorPicker(t.value, {
+            width: v.value,
+            color: C(n.color),
             margin: 9,
-            boxHeight: f[c.size],
+            boxHeight: y[n.size],
             sliderSize: 14,
             layout: [
               {
-                component: i.ui.Box
+                component: c.ui.Box
               },
               {
-                component: i.ui.Slider,
+                component: c.ui.Slider,
                 options: {
                   sliderType: "hue"
                 }
               },
               {
-                component: i.ui.Slider,
+                component: c.ui.Slider,
                 options: {
                   sliderType: "saturation"
                 }
               },
               {
-                component: i.ui.Slider,
+                component: c.ui.Slider,
                 options: {
                   sliderType: "value"
                 }
               }
             ]
-          }), e.value.on("color:change", (o) => {
-            a("update:color", o.hexString);
+          }), o.value.on("color:change", (e) => {
+            i || s("update:color", e.hexString);
           });
-        } catch (o) {
-          console.error("Failed to initialize color picker:", o);
+        } catch (e) {
+          console.error("Failed to initialize color picker:", e);
         }
       }
-    }, h = () => {
-      e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = "");
+    }, k = () => {
+      o.value && (o.value.off("color:change"), o.value = null), t.value && (t.value.innerHTML = "");
     };
-    s(
-      () => c.color,
-      (o) => {
-        if (e.value && e.value.color.hexString !== o)
+    u(
+      () => n.color,
+      (e) => {
+        if (o.value && !m(e) && o.value.color.hexString !== e) {
+          i = !0;
           try {
-            e.value.color.hexString = o;
-          } catch (t) {
-            console.error("Error updating color:", t);
+            o.value.color.hexString = e;
+          } catch (r) {
+            console.error("Error updating color:", r);
+          } finally {
+            i = !1;
           }
+        }
       }
-    ), s(
-      () => c.size,
+    ), u(
+      () => n.size,
       () => {
-        h(), v();
+        k(), h();
       }
-    ), s(w, (o) => {
-      if (o && (a("update:color", o), e.value))
+    ), u(H, (e) => {
+      if (e && (s("update:color", e), o.value)) {
+        i = !0;
         try {
-          e.value.color.hexString = o;
-        } catch (t) {
-          console.error("Error updating color from eyedropper:", t);
+          o.value.color.hexString = e;
+        } catch (r) {
+          console.error("Error updating color from eyedropper:", r);
+        } finally {
+          i = !1;
         }
+      }
     });
-    const y = async () => {
+    const g = async () => {
       try {
-        await z();
-      } catch (o) {
-        console.error("Error opening eyedropper:", o);
+        await w();
+      } catch (e) {
+        console.error("Error opening eyedropper:", e);
       }
     };
     return B(() => {
-      v();
-    }), T(() => {
       h();
-    }), (o, t) => (l(), g("div", V, [
-      n.showHeader ? (l(), g("div", $, [
-        C(p, {
+    }), P(() => {
+      k();
+    }), (e, r) => (a(), b("div", D, [
+      l.showHeader ? (a(), b("div", F, [
+        R(d, {
           icon: "typcn:arrow-back",
-          onClick: t[0] || (t[0] = (D) => a("close")),
+          onClick: r[0] || (r[0] = (O) => s("close")),
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         }),
-        x(d) ? (l(), b(p, {
+        S(f) ? (a(), z(d, {
           key: 0,
-          onClick: y,
+          onClick: g,
           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"
-        })) : u("", !0)
-      ])) : u("", !0),
-      P("div", {
+        })) : p("", !0)
+      ])) : p("", !0),
+      L("div", {
         ref_key: "pickerRef",
-        ref: r,
-        style: _({ width: m.value + "px", minHeight: f[n.size] + "px" })
+        ref: t,
+        style: V({ width: v.value + "px", minHeight: y[l.size] + "px" })
       }, null, 4),
-      M(o.$slots, "bottom", {}, () => [
-        x(d) && !n.showHeader ? (l(), b(p, {
+      I(e.$slots, "bottom", {}, () => [
+        S(f) && !l.showHeader ? (a(), z(d, {
           key: 0,
-          onClick: y,
+          onClick: g,
           icon: "pepicons-pop:color-picker",
           variant: "outline",
           size: "sm",
           class: "w-full"
-        })) : u("", !0)
+        })) : p("", !0)
       ])
     ]));
   }
 });
 export {
-  U as default
+  j as default
 };

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

@@ -10,6 +10,8 @@ interface Props {
     btnProps?: ButtonProps;
     showInput?: boolean;
     trigger?: 'input' | 'button' | 'swatch';
+    /** When true, shows a reset control that sets the value to `#0000` (transparent). */
+    allowReset?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -23,9 +25,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    reset: (value: string) => any;
     change: (value: string) => any;
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onReset?: (value: string) => any;
     onChange?: (value: string) => any;
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
@@ -37,6 +41,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     trigger: "input" | "button" | "swatch";
     position: TooltTipPlacement;
     showInput: boolean;
+    allowReset: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,22 +1,26 @@
-import { defineComponent as B, ref as v, watch as u, openBlock as t, createBlock as c, unref as g, withCtx as m, createElementBlock as i, createVNode as f, createCommentVNode as p, createElementVNode as n, renderSlot as O, mergeProps as E, normalizeStyle as h, toDisplayString as P, normalizeClass as S } from "vue";
-import D from "../Dropdown/Dropdown.vue.js";
-import "@iconify/vue";
-import y from "../Input.vue.js";
+import { defineComponent as S, ref as k, computed as w, watch as v, openBlock as o, createBlock as c, unref as V, withCtx as h, createElementBlock as s, createVNode as u, createCommentVNode as n, renderSlot as j, mergeProps as D, createElementVNode as m, normalizeStyle as C, toDisplayString as L, normalizeClass as N } from "vue";
+import U from "../Dropdown/Dropdown.vue.js";
+import z from "../Icon.vue.js";
+import R from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                            */
-import k from "../Button.vue.js";
-import N from "./ColorIro.vue2.js";
+import y from "../Button.vue.js";
+import A from "./ColorIro.vue2.js";
 /* empty css             */
-import { useEyeDropper as j } from "@vueuse/core";
-const I = ["disabled", "aria-label"], U = { class: "min-w-0 truncate text-foreground" }, A = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, F = {
+import { useEyeDropper as T } from "@vueuse/core";
+import { COLOR_PICKER_RESET_VALUE as g } from "./constants.js";
+const F = ["disabled", "aria-label"], G = { class: "min-w-0 flex-1 truncate text-foreground" }, K = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, q = {
   key: 0,
   class: "p-1 w-max flex flex-col justify-center"
-}, G = {
+}, J = {
   key: 0,
   class: "flex items-center gap-1.5 w-full"
-}, R = { class: "flex-1 w-0 min-w-0" }, _ = /* @__PURE__ */ B({
+}, M = {
+  key: 1,
+  class: "flex-1 w-0 min-w-0"
+}, ne = /* @__PURE__ */ S({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
@@ -27,45 +31,51 @@ const I = ["disabled", "aria-label"], U = { class: "min-w-0 truncate text-foregr
     position: { default: "bottom" },
     btnProps: {},
     showInput: { type: Boolean, default: !0 },
-    trigger: { default: "input" }
+    trigger: { default: "input" },
+    allowReset: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: x }) {
-    const r = e, b = x, d = v(!1), l = v(r.modelValue || "#000000"), { isSupported: w, open: V, sRGBHex: z } = j();
-    u(z, (o) => {
-      o && (l.value = o);
+  emits: ["update:modelValue", "change", "reset"],
+  setup(e, { emit: $ }) {
+    const l = e, f = $, p = k(!1), a = k(l.modelValue || "#000000"), x = w(() => {
+      const t = (l.modelValue || "").toLowerCase();
+      return !t || t === g;
+    }), d = w(() => l.allowReset && !l.disabled && !x.value), { isSupported: E, open: O, sRGBHex: B } = T();
+    v(B, (t) => {
+      t && (a.value = t);
     });
-    const C = async () => {
+    const P = async () => {
       try {
-        await V();
-      } catch (o) {
-        console.error("Error opening eyedropper:", o);
+        await O();
+      } catch (t) {
+        console.error("Error opening eyedropper:", t);
       }
     };
-    u(
-      () => r.modelValue,
-      (o) => {
-        o && o !== l.value && (l.value = o);
+    v(
+      () => l.modelValue,
+      (t) => {
+        t && t !== a.value && (a.value = t);
       }
-    ), u(l, (o) => {
-      /^#([0-9A-F]{3,8})$/i.test(o) && o !== r.modelValue && (b("update:modelValue", o), b("change", o));
+    ), v(a, (t) => {
+      /^#([0-9A-F]{3,8})$/i.test(t) && t !== l.modelValue && (f("update:modelValue", t), f("change", t));
     });
-    const $ = (o) => {
-      l.value = o;
+    const I = (t) => {
+      a.value = t;
+    }, b = (t) => {
+      t?.stopPropagation(), t?.preventDefault(), !(!l.allowReset || l.disabled) && (x.value || (a.value = g, f("reset", g)));
     };
-    return (o, a) => (t(), c(g(D), {
+    return (t, r) => (o(), c(V(U), {
       disabled: e.disabled,
       class: "w-full",
       position: e.position,
       offset: [0, 8],
       searchable: !1,
       "close-on-select": !1,
-      onOnOpen: a[1] || (a[1] = (s) => d.value = !0),
-      onOnClose: a[2] || (a[2] = (s) => d.value = !1)
+      onOnOpen: r[1] || (r[1] = (i) => p.value = !0),
+      onOnClose: r[2] || (r[2] = (i) => p.value = !1)
     }, {
-      trigger: m(({ isOpen: s }) => [
-        O(o.$slots, "trigger", { isOpen: s }, () => [
-          e.trigger === "button" ? (t(), c(k, E({
+      trigger: h(({ isOpen: i }) => [
+        j(t.$slots, "trigger", { isOpen: i }, () => [
+          e.trigger === "button" ? (o(), c(y, D({
             key: 0,
             style: { backgroundColor: e.modelValue }
           }, {
@@ -74,24 +84,37 @@ const I = ["disabled", "aria-label"], U = { class: "min-w-0 truncate text-foregr
             icon: " ",
             variant: "outline",
             ...e.btnProps || {}
-          }), null, 16, ["style"])) : e.trigger === "swatch" ? (t(), i("button", {
+          }), null, 16, ["style"])) : e.trigger === "swatch" ? (o(), s("button", {
             key: 1,
             type: "button",
             disabled: e.disabled,
             "aria-label": `Choose color ${e.modelValue}`,
             class: "flex min-h-10 w-full items-center gap-2.5 px-3 text-left font-mono text-xs uppercase transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
           }, [
-            n("span", {
+            m("span", {
               "aria-hidden": "true",
               class: "h-5 w-5 shrink-0 rounded-full border border-black/10 shadow-sm dark:border-white/15",
-              style: h({ backgroundColor: e.modelValue })
+              style: C({ backgroundColor: e.modelValue })
             }, null, 4),
-            n("span", U, P(e.modelValue), 1)
-          ], 8, I)) : (t(), i("div", {
+            m("span", G, L(e.modelValue), 1),
+            d.value ? (o(), s("span", {
+              key: 0,
+              role: "button",
+              tabindex: "-1",
+              "aria-label": "Reset color",
+              class: "shrink-0 flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none",
+              onClick: b
+            }, [
+              u(z, {
+                icon: "lucide:x-circle",
+                class: "h-4 w-4"
+              })
+            ])) : n("", !0)
+          ], 8, F)) : (o(), s("div", {
             key: 2,
-            class: S(["w-full relative cursor-pointer", [e.disabled ? "opacity-50 pointer-events-none" : ""]])
+            class: N(["w-full relative cursor-pointer", [e.disabled ? "opacity-50 pointer-events-none" : ""]])
           }, [
-            f(y, {
+            u(R, {
               "model-value": e.modelValue,
               readonly: "",
               disabled: e.disabled,
@@ -99,56 +122,79 @@ const I = ["disabled", "aria-label"], U = { class: "min-w-0 truncate text-foregr
               variant: e.variant,
               rounded: e.rounded,
               class: "pointer-events-none",
-              "input-class": "pl-9 font-mono uppercase cursor-pointer"
-            }, null, 8, ["model-value", "disabled", "size", "variant", "rounded"]),
-            n("div", A, [
-              n("div", {
+              "input-class": d.value ? "pl-9 pr-9 font-mono uppercase cursor-pointer" : "pl-9 font-mono uppercase cursor-pointer"
+            }, null, 8, ["model-value", "disabled", "size", "variant", "rounded", "input-class"]),
+            m("div", K, [
+              m("div", {
                 class: "w-4 h-4 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]",
-                style: h({ backgroundColor: e.modelValue })
+                style: C({ backgroundColor: e.modelValue })
               }, null, 4)
-            ])
+            ]),
+            d.value ? (o(), s("button", {
+              key: 0,
+              type: "button",
+              tabindex: "-1",
+              "aria-label": "Reset color",
+              class: "absolute right-2.5 top-1/2 -translate-y-1/2 z-20 flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none pointer-events-auto",
+              onClick: b
+            }, [
+              u(z, {
+                icon: "lucide:x-circle",
+                class: "h-4 w-4"
+              })
+            ])) : n("", !0)
           ], 2))
         ])
       ]),
-      default: m(() => [
-        d.value ? (t(), i("div", F, [
-          f(N, {
+      default: h(() => [
+        p.value ? (o(), s("div", q, [
+          u(A, {
             color: e.modelValue,
             "show-header": !1,
             size: e.size,
-            "onUpdate:color": $
+            "onUpdate:color": I
           }, {
-            bottom: m(() => [
-              e.showInput ? (t(), i("div", G, [
-                g(w) ? (t(), c(k, {
+            bottom: h(() => [
+              e.showInput || e.allowReset ? (o(), s("div", J, [
+                e.showInput && V(E) ? (o(), c(y, {
                   key: 0,
-                  onClick: C,
+                  onClick: P,
                   icon: "pepicons-pop:color-picker",
                   variant: "outline",
                   size: "sm",
                   class: "px-2 shrink-0"
-                })) : p("", !0),
-                n("div", R, [
-                  f(y, {
-                    modelValue: l.value,
-                    "onUpdate:modelValue": a[0] || (a[0] = (s) => l.value = s),
+                })) : n("", !0),
+                e.showInput ? (o(), s("div", M, [
+                  u(R, {
+                    modelValue: a.value,
+                    "onUpdate:modelValue": r[0] || (r[0] = (i) => a.value = i),
                     size: "sm",
                     "show-clear-button": !1,
                     placeholder: "#000000",
                     class: "w-full",
                     "input-class": "font-mono text-xs uppercase "
                   }, null, 8, ["modelValue"])
-                ])
-              ])) : p("", !0)
+                ])) : n("", !0),
+                d.value ? (o(), c(y, {
+                  key: 2,
+                  onClick: b,
+                  icon: "lucide:rotate-ccw",
+                  variant: "outline",
+                  size: "sm",
+                  class: "px-2 shrink-0",
+                  "aria-label": "Reset color",
+                  title: "Reset to transparent"
+                })) : n("", !0)
+              ])) : n("", !0)
             ]),
             _: 1
           }, 8, ["color", "size"])
-        ])) : p("", !0)
+        ])) : n("", !0)
       ]),
       _: 3
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  _ as default
+  ne as default
 };

package/components/ColorPicker/constants.d.ts

@@ -0,0 +1,2 @@
+/** Transparent hex written on reset (`#RGBA` with zero alpha). */
+export declare const COLOR_PICKER_RESET_VALUE = "#0000";

package/components/ColorPicker/constants.js

@@ -0,0 +1,4 @@
+const E = "#0000";
+export {
+  E as COLOR_PICKER_RESET_VALUE
+};

package/components/ColorPicker/index.d.ts

@@ -1 +1,2 @@
 export { default as ColorPicker } from './ColorPicker.vue';
+export { COLOR_PICKER_RESET_VALUE } from './constants';

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/80 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 {