vlite3 1.2.9 → 1.2.12

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

package/components/Workbook/Workbook.vue2.js

@@ -1,14 +1,12 @@
-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 { VueDraggable as q } from "vue-draggable-plus";
-import G from "./Sheet.vue.js";
+import { defineComponent as P, ref as y, shallowRef as A, watch as M, computed as W, openBlock as o, createElementBlock as c, createElementVNode as r, renderSlot as v, createCommentVNode as h, createVNode as g, unref as I, withCtx as Y, Fragment as j, renderList as F, isMemoSame as R, createBlock as q, normalizeClass as G } from "vue";
+import { useScroll as H } from "@vueuse/core";
+import { VueDraggable as J } from "vue-draggable-plus";
+import K from "./Sheet.vue.js";
 import p from "./WorkbookAddButton.vue.js";
-const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-end w-full border-b px-1" }, K = {
+const O = { class: "flex flex-col w-full font-sans" }, Q = { class: "flex items-end w-full border-b px-1" }, X = {
   key: 0,
   class: "flex items-center"
-}, O = {
-  key: 0,
-  class: "shrink-0 mb-1"
-}, 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({
+}, Z = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, _ = { key: 0 }, ee = { key: 1 }, te = { class: "flex-1 relative bg-white w-full" }, de = /* @__PURE__ */ P({
   __name: "Workbook",
   props: {
     modelValue: { default: "" },
@@ -28,141 +26,147 @@ const H = { class: "flex flex-col w-full font-sans" }, J = { class: "flex items-
     allowIconChange: { type: Boolean, default: !0 }
   },
   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(
-      () => i.sheets,
+  setup(l, { emit: D }) {
+    const i = l, s = D, f = y(null), u = y(null), { arrivedState: V } = H(f), d = A([...i.sheets]);
+    M(
+      () => [...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]);
-      },
-      { deep: !0 }
-      // Must be true so parent mutating the array via .push() correctly triggers the watcher
+        n && (d.value = e);
+      }
     );
-    const D = (e) => {
-      s.value = e, d("update:sheets", e);
-    }, V = (e) => {
-      d("update:modelValue", e), d("change", e);
+    const B = (e) => {
+      d.value = e, s("update:sheets", e);
+    }, S = (e) => {
+      s("update:modelValue", e), s("change", e);
     }, x = () => {
-      i.sheets.length >= i.maxSheets || d("add");
-    }, B = (e, n) => {
-      const t = i.sheets.findIndex((l) => l.id === e);
+      i.sheets.length >= i.maxSheets || s("add");
+    }, E = (e, n) => {
+      const t = i.sheets.findIndex((a) => a.id === e);
       if (t !== -1) {
-        const l = [...i.sheets];
-        l[t] = { ...l[t], title: n }, d("update:sheets", l);
+        const a = [...i.sheets];
+        a[t] = { ...a[t], title: n }, s("update:sheets", a);
       }
-    }, S = (e, n) => {
-      const t = i.sheets.findIndex((l) => l.id === e);
+    }, U = (e, n) => {
+      const t = i.sheets.findIndex((a) => a.id === e);
       if (t !== -1) {
-        const l = [...i.sheets];
-        l[t] = { ...l[t], icon: n }, d("update:sheets", l);
+        const a = [...i.sheets];
+        a[t] = { ...a[t], icon: n }, s("update:sheets", a);
       }
-    }, E = (e) => {
-      u.value = e, d("edit-start", e);
-    }, U = (e) => {
-      u.value = null, d("edit-end", e);
     }, $ = (e) => {
-      d("duplicate", e);
+      u.value = e, s("edit-start", e);
     }, T = (e) => {
-      const n = i.sheets.findIndex((l) => l.id === e);
+      u.value = null, s("edit-end", e);
+    }, z = (e) => {
+      s("duplicate", e);
+    }, L = (e) => {
+      const n = i.sheets.findIndex((a) => a.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) {
-        let l = "";
+      if (t.splice(n, 1), s("update:sheets", t), s("delete", e), i.modelValue === e) {
+        let a = "";
         if (t.length > 0) {
           const k = Math.min(n, t.length - 1);
-          l = t[k].id;
+          a = t[k].id;
         }
-        d("update:modelValue", l), d("change", l);
+        s("update:modelValue", a), s("change", a);
       }
-    }, L = (e) => {
-      h.value && e.deltaY !== 0 && (h.value.scrollLeft += e.deltaY, e.preventDefault());
-    }, b = M(() => i.sheets.length > 1);
-    return (e, n) => (o(), c("div", H, [
-      r("div", J, [
-        e.$slots["left-addons"] ? (o(), c("div", K, [
+    }, N = (e) => {
+      f.value && e.deltaY !== 0 && (f.value.scrollLeft += e.deltaY, e.preventDefault());
+    }, b = W(() => i.sheets.length > 1);
+    return (e, n) => (o(), c("div", O, [
+      r("div", Q, [
+        e.$slots["left-addons"] ? (o(), c("div", X, [
           v(e.$slots, "left-addons", {}, void 0, !0)
-        ])) : m("", !0),
+        ])) : h("", !0),
         r("div", {
           ref_key: "scrollContainer",
-          ref: h,
+          ref: f,
           class: "flex-1 flex items-end overflow-x-auto scrollbar-none overscroll-contain sheet-container",
           style: { "scrollbar-width": "none", "-ms-overflow-style": "none" },
-          onWheel: L
+          onWheel: N
         }, [
-          g(W(q), {
-            "model-value": s.value,
-            "onUpdate:modelValue": D,
+          g(I(J), {
+            "model-value": d.value,
+            "onUpdate:modelValue": B,
             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) => {
-                const w = [
+              (o(!0), c(j, null, F(d.value, (t, a, k, m) => {
+                const C = [
                   t.id,
                   t.title,
                   t.icon,
-                  a.modelValue === t.id,
+                  l.modelValue === t.id,
                   u.value === t.id,
                   b.value,
-                  a.confirmDelete,
-                  a.allowIconChange
+                  l.confirmDelete,
+                  l.allowIconChange,
+                  l.itemClass,
+                  l.activeItemClass,
+                  l.inactiveItemClass
                 ];
-                if (f && f.key === t.id && R(f, w)) return f;
-                const C = (o(), j(G, {
+                if (m && m.key === t.id && R(m, C)) return m;
+                const w = (o(), q(K, {
                   key: t.id,
                   sheet: t,
-                  "is-active": a.modelValue === t.id,
+                  "is-active": l.modelValue === t.id,
                   "is-editing": u.value === t.id,
                   "can-delete": b.value,
-                  "confirm-delete": a.confirmDelete,
-                  "confirm-delete-texts": a.confirmDeleteTexts,
-                  "allow-icon-change": a.allowIconChange,
-                  "item-class": a.itemClass,
-                  "active-item-class": a.activeItemClass,
-                  "inactive-item-class": a.inactiveItemClass,
-                  onSelect: V,
-                  "onUpdate:title": B,
-                  "onUpdate:icon": S,
-                  onEditStart: E,
-                  onEditEnd: U,
-                  onDuplicate: $,
-                  onDelete: T
+                  "confirm-delete": l.confirmDelete,
+                  "confirm-delete-texts": l.confirmDeleteTexts,
+                  "allow-icon-change": l.allowIconChange,
+                  "item-class": l.itemClass,
+                  "active-item-class": l.activeItemClass,
+                  "inactive-item-class": l.inactiveItemClass,
+                  onSelect: S,
+                  "onUpdate:title": E,
+                  "onUpdate:icon": U,
+                  onEditStart: $,
+                  onEditEnd: T,
+                  onDuplicate: z,
+                  onDelete: L
                 }, 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 w.memo = C, w;
               }, n, 0), 128))
             ]),
             _: 1
           }, 8, ["model-value", "disabled"]),
-          a.addable && a.addButtonPosition === "attached" ? (o(), c("div", O, [
+          l.addable && l.addButtonPosition === "attached" ? (o(), c("div", {
+            key: 0,
+            class: G(["shrink-0 sticky right-0 z-10 bg-body flex items-center justify-center h-full", {
+              "shadow-[-18px_0_24px_-4px_#fff] dark:shadow-[-18px_0_24px_-4px_#000]": !I(V).right
+            }])
+          }, [
             g(p, { onClick: x })
-          ])) : m("", !0),
+          ], 2)) : h("", !0),
           n[2] || (n[2] = r("div", { class: "w-1 shrink-0" }, null, -1))
         ], 544),
-        r("div", Q, [
-          a.addable && a.addButtonPosition === "fixed-right" ? (o(), c("div", X, [
+        r("div", Z, [
+          l.addable && l.addButtonPosition === "fixed-right" ? (o(), c("div", _, [
             g(p, { onClick: x })
-          ])) : m("", !0),
-          e.$slots["right-addons"] ? (o(), c("div", Z, [
+          ])) : h("", !0),
+          e.$slots["right-addons"] ? (o(), c("div", ee, [
             v(e.$slots, "right-addons", {}, void 0, !0)
-          ])) : m("", !0)
+          ])) : h("", !0)
         ])
       ]),
-      r("div", _, [
+      r("div", te, [
         v(e.$slots, "default", {}, void 0, !0)
       ])
     ]));
   }
 });
 export {
-  ne as default
+  de as default
 };

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.9",
+  "version": "1.2.12",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -28,6 +28,11 @@
       "import": "./index.js",
       "require": "./index.js"
     },
+    "./test": {
+      "types": "./test/index.d.ts",
+      "import": "./test/index.js",
+      "require": "./test/index.js"
+    },
     "./style.css": "./style.css"
   },
   "dependencies": {
@@ -57,15 +62,22 @@
     "xlsx": "^0.18.5"
   },
   "peerDependencies": {
+    "@vue/test-utils": "^2.4.0",
     "vue": "^3.5.24",
     "vue-router": "4"
   },
+  "peerDependenciesMeta": {
+    "@vue/test-utils": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/jsbarcode": "^3.11.4",
     "@types/node": "^25.0.10",
     "@types/qrcode": "^1.5.6",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",