vlite3 1.2.8 → 1.2.10

package/components/Workbook/Sheet.vue.js

@@ -1,22 +1,23 @@
-import { defineComponent as N, ref as g, computed as v, openBlock as a, createElementBlock as d, normalizeClass as D, createElementVNode as c, withModifiers as p, createBlock as y, withCtx as h, createVNode as u, createCommentVNode as w, withDirectives as O, vModelText as j, toDisplayString as C, unref as M, createTextVNode as R, nextTick as z } from "vue";
-import m from "../Icon.vue.js";
+import { defineComponent as N, ref as y, computed as f, openBlock as a, createElementBlock as d, normalizeClass as D, createElementVNode as c, withModifiers as v, createBlock as g, withCtx as p, createVNode as u, createCommentVNode as w, withDirectives as O, vModelText as j, toDisplayString as C, unref as z, createTextVNode as M, nextTick as R } from "vue";
+import h from "../Icon.vue.js";
 import A from "../Dropdown/Dropdown.vue.js";
 import { $t as s } from "../../utils/i18n.js";
 /* empty css            */
 /* empty css                            */
-import K from "../IconPicker.vue.js";
-const U = {
+import K from "../Button.vue.js";
+import U from "../IconPicker.vue.js";
+const q = {
   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"
-}, q = {
+}, F = {
   key: 1,
   class: "flex items-center justify-center p-0.5"
-}, F = { class: "flex-1 min-w-0 pr-1" }, G = {
+}, G = { class: "flex-1 min-w-0 pr-1" }, H = {
   key: 1,
   class: "block truncate text-sm font-medium leading-normal"
-}, H = { class: "p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors" }, J = {
+}, J = {
   class: /* @__PURE__ */ D(["flex items-center"])
-}, _ = /* @__PURE__ */ N({
+}, ee = /* @__PURE__ */ N({
   __name: "Sheet",
   props: {
     sheet: {},
@@ -31,20 +32,22 @@ const U = {
     inactiveItemClass: { default: "" }
   },
   emits: ["select", "update:title", "update:icon", "edit-start", "edit-end", "duplicate", "delete"],
-  setup(o, { emit: E }) {
-    const e = o, n = E, f = g(null), r = g(e.sheet.title), T = v(() => e.sheet.titleI18n ? s(e.sheet.titleI18n) : e.sheet.title), k = () => {
-      r.value = e.sheet.title, n("edit-start", e.sheet.id), z(() => {
-        f.value?.focus(), f.value?.select();
+  setup(n, { emit: E }) {
+    const e = n, o = E, m = y(null), r = y(e.sheet.title), T = f(
+      () => e.sheet.titleI18n ? s(e.sheet.titleI18n) : e.sheet.title
+    ), k = () => {
+      r.value = e.sheet.title, o("edit-start", e.sheet.id), R(() => {
+        m.value?.focus(), m.value?.select();
       });
-    }, b = () => {
+    }, x = () => {
       if (!e.isEditing) return;
       const t = r.value.trim();
-      t ? n("update:title", e.sheet.id, t) : r.value = e.sheet.title, n("edit-end", e.sheet.id);
+      t ? o("update:title", e.sheet.id, t) : r.value = e.sheet.title, o("edit-end", e.sheet.id);
     }, B = () => {
-      r.value = e.sheet.title, n("edit-end", e.sheet.id);
+      r.value = e.sheet.title, o("edit-end", e.sheet.id);
     }, I = (t) => {
-      t.key === "Enter" && b(), t.key === "Escape" && B();
-    }, $ = v(() => [
+      t.key === "Enter" && x(), t.key === "Escape" && B();
+    }, $ = f(() => [
       {
         label: s("vlite.workbook.rename") !== "vlite.workbook.rename" ? s("vlite.workbook.rename") : "Rename",
         value: "rename",
@@ -68,18 +71,18 @@ const U = {
           cancelText: e.confirmDeleteTexts?.cancel,
           variant: "danger",
           onConfirm: () => {
-            e.canDelete && n("delete", e.sheet.id);
+            e.canDelete && o("delete", e.sheet.id);
           }
         } : void 0
       }
     ]), S = (t) => {
-      if (t.value === "rename" && k(), t.value === "duplicate" && n("duplicate", e.sheet.id), t.value === "delete") {
+      if (t.value === "rename" && k(), t.value === "duplicate" && o("duplicate", e.sheet.id), t.value === "delete") {
         if (!e.canDelete || e.confirmDelete) return;
-        n("delete", e.sheet.id);
+        o("delete", e.sheet.id);
       }
-    }, x = (t) => {
-      t && t.value && t.value !== "delete" || e.canDelete && n("delete", e.sheet.id);
-    }, V = v(() => [
+    }, b = (t) => {
+      t && t.value && t.value !== "delete" || e.canDelete && o("delete", e.sheet.id);
+    }, V = f(() => [
       "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.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}`,
@@ -87,82 +90,83 @@ const U = {
     ].filter(Boolean).join(" "));
     return (t, i) => (a(), d("div", {
       class: D(V.value),
-      onClick: i[5] || (i[5] = (l) => n("select", o.sheet.id)),
+      onClick: i[5] || (i[5] = (l) => o("select", n.sheet.id)),
       onDblclick: k
     }, [
       c("div", {
-        onClick: i[1] || (i[1] = p(() => {
+        onClick: i[1] || (i[1] = v(() => {
         }, ["stop"])),
         class: "mr-2 flex items-center shrink-0"
       }, [
-        (o.sheet.icon || o.isEditing) && o.allowIconChange ? (a(), y(K, {
+        (n.sheet.icon || n.isEditing) && n.allowIconChange ? (a(), g(U, {
           key: 0,
-          value: o.sheet.icon || "lucide:file",
+          value: n.sheet.icon || "lucide:file",
           position: "bottom-start",
-          onOnSelect: i[0] || (i[0] = (l) => n("update:icon", o.sheet.id, l))
+          onOnSelect: i[0] || (i[0] = (l) => o("update:icon", n.sheet.id, l))
         }, {
-          default: h(() => [
-            c("button", U, [
-              u(m, {
-                icon: o.sheet.icon || "lucide:file",
+          default: p(() => [
+            c("button", q, [
+              u(h, {
+                icon: n.sheet.icon || "lucide:file",
                 class: "w-4 h-4 opacity-70 hover:opacity-100 transition-opacity"
               }, null, 8, ["icon"])
             ])
           ]),
           _: 1
-        }, 8, ["value"])) : o.sheet.icon ? (a(), d("div", q, [
-          u(m, {
-            icon: o.sheet.icon,
+        }, 8, ["value"])) : n.sheet.icon ? (a(), d("div", F, [
+          u(h, {
+            icon: n.sheet.icon,
             class: "w-4 h-4 opacity-70"
           }, null, 8, ["icon"])
         ])) : w("", !0)
       ]),
-      c("div", F, [
-        o.isEditing ? O((a(), d("input", {
+      c("div", G, [
+        n.isEditing ? O((a(), d("input", {
           key: 0,
           ref_key: "inputRef",
-          ref: f,
+          ref: m,
           "onUpdate:modelValue": i[2] || (i[2] = (l) => r.value = l),
           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: b,
+          onBlur: x,
           onKeydown: I,
-          onClick: i[3] || (i[3] = p(() => {
+          onClick: i[3] || (i[3] = v(() => {
           }, ["stop"]))
         }, null, 544)), [
           [j, r.value]
-        ]) : (a(), d("span", G, C(T.value), 1))
+        ]) : (a(), d("span", H, C(T.value), 1))
       ]),
       c("div", {
-        class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit",
-        onClick: i[4] || (i[4] = p(() => {
+        class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 -mr-2 flex items-center",
+        onClick: i[4] || (i[4] = v(() => {
         }, ["stop"]))
       }, [
-        u(M(A), {
+        u(z(A), {
           options: $.value,
           position: "bottom-end",
           width: "140px",
           teleport: !0,
           onOnSelect: S,
-          onOnConfirm: x,
-          onConfirm: x
+          onOnConfirm: b,
+          onConfirm: b
         }, {
-          trigger: h(() => [
-            c("button", H, [
-              u(m, {
-                icon: "lucide:more-vertical",
-                class: "w-3.5 h-3.5"
-              })
-            ])
+          trigger: p(() => [
+            u(K, {
+              icon: "lucide:more-vertical",
+              asIcon: "",
+              size: "xs",
+              rounded: "full",
+              variant: "ghost"
+            })
           ]),
-          item: h(({ option: l }) => [
+          item: p(({ option: l }) => [
             c("div", J, [
-              l?.icon ? (a(), y(m, {
+              l?.icon ? (a(), g(h, {
                 key: 0,
                 icon: l?.icon,
                 class: "w-3.5 h-3.5 mr-2 opacity-70"
               }, null, 8, ["icon"])) : w("", !0),
-              R(" " + C(l?.label), 1)
+              M(" " + C(l?.label), 1)
             ])
           ]),
           _: 1
@@ -172,5 +176,5 @@ const U = {
   }
 });
 export {
-  _ as default
+  ee as default
 };

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-a5e9ca6f"]]);
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-8d484d8e"]]);
 export {
-  m as default
+  _ as default
 };

package/components/Workbook/Workbook.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as N, ref as y, shallowRef as P, watch as A, computed as M, openBlock as o, createElementBlock as c, createElementVNode as r, renderSlot as v, createCommentVNode as m, createVNode as g, unref as W, withCtx as Y, Fragment as z, renderList as F, isMemoSame as R, createBlock as j } from "vue";
+import { defineComponent as N, ref as C, shallowRef as P, watch as z, computed as A, openBlock as o, createElementBlock as c, createElementVNode as r, renderSlot as v, createCommentVNode as m, createVNode as g, unref as M, withCtx as W, Fragment as Y, renderList as j, isMemoSame as F, createBlock as R } from "vue";
 import { VueDraggable as q } from "vue-draggable-plus";
 import G from "./Sheet.vue.js";
 import p from "./WorkbookAddButton.vue.js";
@@ -7,7 +7,7 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
   class: "flex items-center"
 }, O = {
   key: 0,
-  class: "shrink-0 mb-1"
+  class: "shrink-0 sticky right-0 z-10 bg-white flex items-center justify-center h-full"
 }, Q = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, X = { key: 0 }, Z = { key: 1 }, _ = { class: "flex-1 relative bg-white w-full" }, ne = /* @__PURE__ */ N({
   __name: "Workbook",
   props: {
@@ -29,63 +29,63 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
   },
   emits: ["update:modelValue", "update:sheets", "change", "add", "delete", "duplicate", "edit-start", "edit-end"],
   setup(a, { emit: I }) {
-    const i = a, d = I, h = y(null), u = y(null), s = P([...i.sheets]);
-    A(
+    const i = a, s = I, h = C(null), u = C(null), d = P([...i.sheets]);
+    z(
       () => i.sheets,
       (e) => {
         let n = !1;
-        if (e.length !== s.value.length)
+        if (e.length !== d.value.length)
           n = !0;
         else
           for (let t = 0; t < e.length; t++)
-            if (e[t] !== s.value[t] || e[t].id !== s.value[t].id) {
+            if (e[t] !== d.value[t] || e[t].id !== d.value[t].id) {
               n = !0;
               break;
             }
-        n && (s.value = [...e]);
+        n && (d.value = [...e]);
       },
       { deep: !0 }
       // Must be true so parent mutating the array via .push() correctly triggers the watcher
     );
     const D = (e) => {
-      s.value = e, d("update:sheets", e);
+      d.value = e, s("update:sheets", e);
     }, V = (e) => {
-      d("update:modelValue", e), d("change", e);
+      s("update:modelValue", e), s("change", e);
     }, x = () => {
-      i.sheets.length >= i.maxSheets || d("add");
+      i.sheets.length >= i.maxSheets || s("add");
     }, B = (e, n) => {
       const t = i.sheets.findIndex((l) => l.id === e);
       if (t !== -1) {
         const l = [...i.sheets];
-        l[t] = { ...l[t], title: n }, d("update:sheets", l);
+        l[t] = { ...l[t], title: n }, s("update:sheets", l);
       }
     }, S = (e, n) => {
       const t = i.sheets.findIndex((l) => l.id === e);
       if (t !== -1) {
         const l = [...i.sheets];
-        l[t] = { ...l[t], icon: n }, d("update:sheets", l);
+        l[t] = { ...l[t], icon: n }, s("update:sheets", l);
       }
     }, E = (e) => {
-      u.value = e, d("edit-start", e);
+      u.value = e, s("edit-start", e);
     }, U = (e) => {
-      u.value = null, d("edit-end", e);
+      u.value = null, s("edit-end", e);
     }, $ = (e) => {
-      d("duplicate", e);
+      s("duplicate", e);
     }, T = (e) => {
       const n = i.sheets.findIndex((l) => l.id === e);
       if (n === -1) return;
       const t = [...i.sheets];
-      if (t.splice(n, 1), d("update:sheets", t), d("delete", e), i.modelValue === e) {
+      if (t.splice(n, 1), s("update:sheets", t), s("delete", e), i.modelValue === e) {
         let l = "";
         if (t.length > 0) {
           const k = Math.min(n, t.length - 1);
           l = t[k].id;
         }
-        d("update:modelValue", l), d("change", l);
+        s("update:modelValue", l), s("change", l);
       }
     }, L = (e) => {
       h.value && e.deltaY !== 0 && (h.value.scrollLeft += e.deltaY, e.preventDefault());
-    }, b = M(() => i.sheets.length > 1);
+    }, b = A(() => i.sheets.length > 1);
     return (e, n) => (o(), c("div", H, [
       r("div", J, [
         e.$slots["left-addons"] ? (o(), c("div", K, [
@@ -98,15 +98,15 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
           style: { "scrollbar-width": "none", "-ms-overflow-style": "none" },
           onWheel: L
         }, [
-          g(W(q), {
-            "model-value": s.value,
+          g(M(q), {
+            "model-value": d.value,
             "onUpdate:modelValue": D,
             disabled: !i.draggable || !!u.value,
             animation: 150,
             class: "flex items-end min-w-max"
           }, {
-            default: Y(() => [
-              (o(!0), c(z, null, F(s.value, (t, l, k, f) => {
+            default: W(() => [
+              (o(!0), c(Y, null, j(d.value, (t, l, k, f) => {
                 const w = [
                   t.id,
                   t.title,
@@ -117,8 +117,8 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
                   a.confirmDelete,
                   a.allowIconChange
                 ];
-                if (f && f.key === t.id && R(f, w)) return f;
-                const C = (o(), j(G, {
+                if (f && f.key === t.id && F(f, w)) return f;
+                const y = (o(), R(G, {
                   key: t.id,
                   sheet: t,
                   "is-active": a.modelValue === t.id,
@@ -138,7 +138,7 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
                   onDuplicate: $,
                   onDelete: T
                 }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change", "item-class", "active-item-class", "inactive-item-class"]));
-                return C.memo = w, C;
+                return y.memo = w, y;
               }, n, 0), 128))
             ]),
             _: 1

package/components/Workbook/WorkbookAddButton.vue.js

@@ -1,24 +1,25 @@
-import { defineComponent as c, computed as l, openBlock as m, createBlock as s } from "vue";
-import d from "../Button.vue.js";
+import { defineComponent as l, computed as c, openBlock as s, createBlock as d } from "vue";
+import m from "../Button.vue.js";
 import { $t as u } from "../../utils/i18n.js";
-const f = /* @__PURE__ */ c({
+const _ = /* @__PURE__ */ l({
   __name: "WorkbookAddButton",
   emits: ["click"],
-  setup(k, { emit: o }) {
-    const n = o, i = l(() => {
+  setup(a, { emit: o }) {
+    const n = o, i = c(() => {
       const t = u("vlite.workbook.addSheet");
       return t !== "vlite.workbook.addSheet" ? t : "Add New Sheet";
     });
-    return (t, e) => (m(), s(d, {
+    return (t, e) => (s(), d(m, {
       variant: "ghost",
-      size: "sm",
+      size: "md",
       icon: "lucide:plus",
       title: i.value,
       rounded: "none",
+      class: "h-full!",
       onClick: e[0] || (e[0] = (r) => n("click", r))
     }, null, 8, ["title"]));
   }
 });
 export {
-  f as default
+  _ as default
 };

package/directives/vRipple.d.ts

@@ -2,7 +2,9 @@ interface RippleElement extends HTMLElement {
     _rippleHandler?: (ev: MouseEvent) => void;
 }
 export declare const vRipple: {
-    mounted(el: RippleElement): void;
+    mounted(el: RippleElement, binding: {
+        value?: boolean;
+    }): void;
     unmounted(el: RippleElement): void;
 };
 export {};

package/directives/vRipple.js

@@ -1,8 +1,8 @@
-const y = (e, t) => {
-  const i = t.getBoundingClientRect(), p = e.clientX - i.left, d = e.clientY - i.top, s = Math.max(i.width, i.height), c = s / 2;
+const f = (e, t) => {
+  const o = t.getBoundingClientRect(), p = e.clientX - o.left, d = e.clientY - o.top, s = Math.max(o.width, o.height), c = s / 2;
   t.querySelectorAll(".ripple").forEach((r) => r.remove());
-  const o = document.createElement("span");
-  o.style.cssText = `
+  const n = document.createElement("span");
+  n.style.cssText = `
     width: ${s}px;
     height: ${s}px;
     left: ${p - c}px;
@@ -14,22 +14,22 @@ const y = (e, t) => {
     opacity: 0;
     will-change: transform, opacity;
     background-color: rgba(255, 255, 255, 1);
-  `, o.classList.add("ripple"), t.appendChild(o);
+  `, n.classList.add("ripple"), t.appendChild(n);
   let a = null;
   const m = 400, l = (r) => {
     a || (a = r);
-    const n = Math.min((r - a) / m, 1), u = (1 - Math.pow(1 - n, 3)) * 2.5, h = n < 0.4 ? n * 0.2 : 0.08 * (1 - (n - 0.4) / 0.6);
-    o.style.transform = `scale(${u})`, o.style.opacity = `${h}`, n < 1 ? requestAnimationFrame(l) : o.remove();
+    const i = Math.min((r - a) / m, 1), u = (1 - Math.pow(1 - i, 3)) * 2.5, h = i < 0.4 ? i * 0.2 : 0.08 * (1 - (i - 0.4) / 0.6);
+    n.style.transform = `scale(${u})`, n.style.opacity = `${h}`, i < 1 ? requestAnimationFrame(l) : n.remove();
   };
   requestAnimationFrame(l);
-}, g = {
-  mounted(e) {
-    window.getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.overflow = "hidden", e._rippleHandler = (t) => y(t, e), e.addEventListener("click", e._rippleHandler);
+}, v = {
+  mounted(e, t) {
+    t.value !== !1 && (window.getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.overflow = "hidden", e._rippleHandler = (o) => f(o, e), e.addEventListener("click", e._rippleHandler));
   },
   unmounted(e) {
     e._rippleHandler && e.removeEventListener("click", e._rippleHandler), e.querySelectorAll(".ripple").forEach((t) => t.remove());
   }
 };
 export {
-  g as vRipple
+  v as vRipple
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "type": "module",
   "main": "index.js",
   "module": "index.js",