vlite3 0.2.5 → 0.2.7

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
 };

package/components/Input.vue.js

@@ -47,7 +47,7 @@ const Y = ["type", "value", "placeholder", "disabled", "min", "max"], Z = { clas
         "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-primary",
         transparent: "border-none bg-transparent shadow-none"
       }, i = {
-        sm: "h-8 text-xs",
+        sm: "h-7.5 text-xs",
         md: "h-9 text-sm",
         lg: "h-10 text-base"
       };

package/components/Tabes/Tabes.vue.js

@@ -15,7 +15,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
   setup(s, { emit: x }) {
     const r = s, v = x, d = g(null), f = g(/* @__PURE__ */ new Map()), h = (e, n) => {
       e ? f.value.set(n, e) : f.value.delete(n);
-    }, b = g({
+    }, m = g({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
@@ -24,14 +24,14 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       await D();
       const e = d.value, n = f.value.get(r.modelValue);
       if (!e || !n) {
-        b.value.opacity = 0;
+        m.value.opacity = 0;
         return;
       }
-      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), m = t.left - a.left, $ = t.top - a.top, B = t.width, L = t.height;
-      b.value = {
+      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), b = t.left - a.left, $ = t.top - a.top, B = t.width, L = t.height;
+      m.value = {
         width: `${B}px`,
         height: `${L}px`,
-        transform: `translate(${m}px, ${$}px)`,
+        transform: `translate(${b}px, ${$}px)`,
         opacity: 1
       };
     };
@@ -48,8 +48,8 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       line: "bg-transparent gap-6 rounded-none p-0 border-b border-border w-full"
     }[r.variant], r.block ? "flex w-full" : ""]), w = {
       sm: "text-xs px-2.5 py-1",
-      md: "text-xs px-3 py-1",
-      lg: "text-base px-4 py-1.5"
+      md: "-text-fs-2 px-3 py-1",
+      lg: "-text-fs-1 px-4 py-1"
     }, z = p(() => [r.variant === "line" ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"]), V = (e) => {
       const n = e.value === r.modelValue, a = r.variant === "line";
       let t = "";
@@ -81,8 +81,8 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
           }
       else
         t = a ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const m = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [z.value, t, m].join(" ");
+      const b = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [z.value, t, b].join(" ");
     }, R = p(() => {
       const e = "absolute left-0 top-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-0 pointer-events-none";
       return r.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
@@ -104,7 +104,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       s.modelValue !== void 0 ? (i(), u("div", {
         key: 0,
         class: l([R.value, S()]),
-        style: A(b.value)
+        style: A(m.value)
       }, null, 6)) : y("", !0),
       (i(!0), u(E, null, I(s.options, (a) => (i(), u("button", {
         key: a.value,

package/components/ThemeToggle.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
 export default _default;

package/components/ThemeToggle.vue.js

@@ -1,20 +1,18 @@
-import { defineComponent as n, openBlock as c, createElementBlock as i, createVNode as l, unref as e } from "vue";
+import { defineComponent as n, openBlock as i, createBlock as c, unref as e } from "vue";
 import { useTheme as m } from "../composables/useTheme.js";
 import r from "./Button.vue.js";
-const d = /* @__PURE__ */ n({
+const p = /* @__PURE__ */ n({
   __name: "ThemeToggle",
-  setup(a) {
+  setup(l) {
     const { theme: o, toggleTheme: t } = m();
-    return (s, u) => (c(), i("span", null, [
-      l(r, {
-        icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
-        variant: "secondary",
-        title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
-        onClick: e(t)
-      }, null, 8, ["icon", "title", "onClick"])
-    ]));
+    return (a, h) => (i(), c(r, {
+      icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
+      variant: "secondary",
+      title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
+      onClick: e(t)
+    }, null, 8, ["icon", "title", "onClick"]));
   }
 });
 export {
-  d as default
+  p as default
 };

package/components/Workbook/Sheet.vue.d.ts

@@ -12,6 +12,9 @@ interface Props {
         cancel?: string;
     };
     allowIconChange?: boolean;
+    itemClass?: string;
+    activeItemClass?: string;
+    inactiveItemClass?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (id: string) => any;
@@ -30,10 +33,13 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "onEdit-end"?: (id: string) => any;
     onDuplicate?: (id: string) => any;
 }>, {
+    itemClass: string;
     isEditing: boolean;
     canDelete: boolean;
     confirmDelete: boolean;
     allowIconChange: boolean;
+    activeItemClass: string;
+    inactiveItemClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;

package/components/Workbook/Sheet.vue.js

@@ -1,19 +1,19 @@
-import { defineComponent as V, ref as h, computed as x, openBlock as c, createElementBlock as a, normalizeClass as w, createElementVNode as r, withModifiers as g, createBlock as y, withCtx as f, createVNode as d, createCommentVNode as b, withDirectives as N, vModelText as $, toDisplayString as k, unref as j, createTextVNode as M, nextTick as O } from "vue";
+import { defineComponent as S, ref as g, computed as y, openBlock as a, createElementBlock as c, normalizeClass as D, createElementVNode as r, withModifiers as f, createBlock as b, withCtx as v, createVNode as d, createCommentVNode as C, withDirectives as V, vModelText as N, toDisplayString as k, unref as O, createTextVNode as j, nextTick as M } from "vue";
 import u from "../Icon.vue.js";
 import R from "../Dropdown/Dropdown.vue.js";
 import z from "../IconPicker.vue.js";
 const A = {
   type: "button",
   class: "flex items-center justify-center rounded hover:bg-accent transition-colors p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-primary/20 mt-1"
-}, I = {
+}, K = {
   key: 1,
   class: "flex items-center justify-center p-0.5"
-}, K = { class: "flex-1 min-w-0 pr-1" }, U = {
+}, U = { class: "flex-1 min-w-0 pr-1" }, q = {
   key: 1,
   class: "block truncate text-sm font-medium leading-normal"
-}, q = { class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit" }, F = { class: "p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors" }, G = {
-  class: /* @__PURE__ */ w(["flex items-center"])
-}, Q = /* @__PURE__ */ V({
+}, F = { class: "p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors" }, G = {
+  class: /* @__PURE__ */ D(["flex items-center"])
+}, Q = /* @__PURE__ */ S({
   __name: "Sheet",
   props: {
     sheet: {},
@@ -22,23 +22,26 @@ const A = {
     canDelete: { type: Boolean, default: !0 },
     confirmDelete: { type: Boolean, default: !1 },
     confirmDeleteTexts: {},
-    allowIconChange: { type: Boolean, default: !0 }
+    allowIconChange: { type: Boolean, default: !0 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    inactiveItemClass: { default: "" }
   },
   emits: ["select", "update:title", "update:icon", "edit-start", "edit-end", "duplicate", "delete"],
-  setup(t, { emit: D }) {
-    const e = t, o = D, m = h(null), s = h(e.sheet.title), p = () => {
-      s.value = e.sheet.title, o("edit-start", e.sheet.id), O(() => {
+  setup(i, { emit: w }) {
+    const e = i, l = w, m = g(null), s = g(e.sheet.title), p = () => {
+      s.value = e.sheet.title, l("edit-start", e.sheet.id), M(() => {
         m.value?.focus(), m.value?.select();
       });
-    }, v = () => {
+    }, h = () => {
       if (!e.isEditing) return;
-      const i = s.value.trim();
-      i ? o("update:title", e.sheet.id, i) : s.value = e.sheet.title, o("edit-end", e.sheet.id);
+      const t = s.value.trim();
+      t ? l("update:title", e.sheet.id, t) : s.value = e.sheet.title, l("edit-end", e.sheet.id);
     }, E = () => {
-      s.value = e.sheet.title, o("edit-end", e.sheet.id);
-    }, T = (i) => {
-      i.key === "Enter" && v(), i.key === "Escape" && E();
-    }, C = x(() => [
+      s.value = e.sheet.title, l("edit-end", e.sheet.id);
+    }, T = (t) => {
+      t.key === "Enter" && h(), t.key === "Escape" && E();
+    }, B = y(() => [
       { label: "Rename", value: "rename", icon: "lucide:pencil" },
       { label: "Duplicate", value: "duplicate", icon: "lucide:copy" },
       {
@@ -52,76 +55,88 @@ const A = {
           description: e.confirmDeleteTexts?.description,
           confirmText: e.confirmDeleteTexts?.confirm,
           cancelText: e.confirmDeleteTexts?.cancel,
-          variant: "danger"
+          variant: "danger",
+          onConfirm: () => {
+            e.canDelete && l("delete", e.sheet.id);
+          }
         } : void 0
       }
-    ]), B = (i) => {
-      if (i.value === "rename" && p(), i.value === "duplicate" && o("duplicate", e.sheet.id), i.value === "delete") {
-        if (!e.canDelete) return;
-        o("delete", e.sheet.id);
+    ]), I = (t) => {
+      if (t.value === "rename" && p(), t.value === "duplicate" && l("duplicate", e.sheet.id), t.value === "delete") {
+        if (!e.canDelete || e.confirmDelete) return;
+        l("delete", e.sheet.id);
       }
-    }, S = x(() => [
+    }, x = (t) => {
+      t && t.value && t.value !== "delete" || e.canDelete && l("delete", e.sheet.id);
+    }, $ = y(() => [
       "group relative flex items-center min-w-[120px] max-w-[240px] h-9 px-3 border-r border-border select-none cursor-pointer transition-all duration-200 ease-out",
-      e.isActive ? "bg-muted text-foreground ring-1 ring-border ring-b-0 z-10" : "text-muted-foreground hover:bg-accent/50",
+      e.itemClass,
+      e.isActive ? `bg-muted text-foreground ring-1 ring-border ring-b-0 z-10 ${e.activeItemClass}` : `text-muted-foreground hover:bg-accent/50 ${e.inactiveItemClass}`,
       e.isEditing ? "cursor-text" : ""
-    ].join(" "));
-    return (i, n) => (c(), a("div", {
-      class: w(S.value),
-      onClick: n[4] || (n[4] = (l) => o("select", t.sheet.id)),
+    ].filter(Boolean).join(" "));
+    return (t, n) => (a(), c("div", {
+      class: D($.value),
+      onClick: n[5] || (n[5] = (o) => l("select", i.sheet.id)),
       onDblclick: p
     }, [
       r("div", {
-        onClick: n[1] || (n[1] = g(() => {
+        onClick: n[1] || (n[1] = f(() => {
         }, ["stop"])),
         class: "mr-2 flex items-center shrink-0"
       }, [
-        (t.sheet.icon || t.isEditing) && t.allowIconChange ? (c(), y(z, {
+        (i.sheet.icon || i.isEditing) && i.allowIconChange ? (a(), b(z, {
           key: 0,
-          value: t.sheet.icon || "lucide:file",
+          value: i.sheet.icon || "lucide:file",
           position: "bottom-start",
-          onOnSelect: n[0] || (n[0] = (l) => o("update:icon", t.sheet.id, l))
+          onOnSelect: n[0] || (n[0] = (o) => l("update:icon", i.sheet.id, o))
         }, {
-          default: f(() => [
+          default: v(() => [
             r("button", A, [
               d(u, {
-                icon: t.sheet.icon || "lucide:file",
+                icon: i.sheet.icon || "lucide:file",
                 class: "w-4 h-4 opacity-70 hover:opacity-100 transition-opacity"
               }, null, 8, ["icon"])
             ])
           ]),
           _: 1
-        }, 8, ["value"])) : t.sheet.icon ? (c(), a("div", I, [
+        }, 8, ["value"])) : i.sheet.icon ? (a(), c("div", K, [
           d(u, {
-            icon: t.sheet.icon,
+            icon: i.sheet.icon,
             class: "w-4 h-4 opacity-70"
           }, null, 8, ["icon"])
-        ])) : b("", !0)
+        ])) : C("", !0)
       ]),
-      r("div", K, [
-        t.isEditing ? N((c(), a("input", {
+      r("div", U, [
+        i.isEditing ? V((a(), c("input", {
           key: 0,
           ref_key: "inputRef",
           ref: m,
-          "onUpdate:modelValue": n[2] || (n[2] = (l) => s.value = l),
+          "onUpdate:modelValue": n[2] || (n[2] = (o) => s.value = o),
           type: "text",
           class: "w-full bg-transparent border-none outline-none p-0 text-sm font-medium text-foreground placeholder-muted-foreground focus:ring-0",
-          onBlur: v,
+          onBlur: h,
           onKeydown: T,
-          onClick: n[3] || (n[3] = g(() => {
+          onClick: n[3] || (n[3] = f(() => {
           }, ["stop"]))
         }, null, 544)), [
-          [$, s.value]
-        ]) : (c(), a("span", U, k(t.sheet.title), 1))
+          [N, s.value]
+        ]) : (a(), c("span", q, k(i.sheet.title), 1))
       ]),
-      r("div", q, [
-        d(j(R), {
-          options: C.value,
+      r("div", {
+        class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit",
+        onClick: n[4] || (n[4] = f(() => {
+        }, ["stop"]))
+      }, [
+        d(O(R), {
+          options: B.value,
           position: "bottom-end",
           width: "140px",
           teleport: !0,
-          onOnSelect: B
+          onOnSelect: I,
+          onOnConfirm: x,
+          onConfirm: x
         }, {
-          trigger: f(() => [
+          trigger: v(() => [
             r("button", F, [
               d(u, {
                 icon: "lucide:more-vertical",
@@ -129,14 +144,14 @@ const A = {
               })
             ])
           ]),
-          item: f(({ option: l }) => [
+          item: v(({ option: o }) => [
             r("div", G, [
-              l?.icon ? (c(), y(u, {
+              o?.icon ? (a(), b(u, {
                 key: 0,
-                icon: l?.icon,
+                icon: o?.icon,
                 class: "w-3.5 h-3.5 mr-2 opacity-70"
-              }, null, 8, ["icon"])) : b("", !0),
-              M(" " + k(l?.label), 1)
+              }, null, 8, ["icon"])) : C("", !0),
+              j(" " + k(o?.label), 1)
             ])
           ]),
           _: 1

package/components/Workbook/Workbook.vue.d.ts

@@ -33,11 +33,14 @@ declare const __VLS_component: import('vue').DefineComponent<WorkbookProps, {},
     "onUpdate:sheets"?: (sheets: WorkbookSheet[]) => any;
 }>, {
     variant: "chrome" | "folder" | "simple" | "card";
+    itemClass: string;
     modelValue: string;
     editable: boolean;
     draggable: boolean;
     confirmDelete: boolean;
     allowIconChange: boolean;
+    activeItemClass: string;
+    inactiveItemClass: string;
     sheets: WorkbookSheet[];
     addable: boolean;
     addButtonPosition: AddButtonPosition;

package/components/Workbook/Workbook.vue.js

@@ -1,7 +1,7 @@
 import o from "./Workbook.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-ca95fa40"]]);
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-833e6dc5"]]);
 export {
-  m as default
+  _ as default
 };