vlite3 1.4.31 → 1.4.33

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.vue.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 y from "../Button.vue.js";
+import A from "./ColorIro.vue2.js";
+/* empty css             */
+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 {