vlite3 0.2.5 → 0.2.7

package/components/Workbook/Workbook.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as T, ref as v, watch as p, nextTick as _, computed as U, openBlock as a, createElementBlock as i, createElementVNode as c, renderSlot as m, createCommentVNode as u, Fragment as A, renderList as L, unref as P, createBlock as J, createVNode as x } from "vue";
-import { useDragAndDrop as O } from "@formkit/drag-and-drop/vue";
-import { animations as W } from "@formkit/drag-and-drop";
-import Y from "./Sheet.vue.js";
+import { defineComponent as T, ref as g, watch as x, nextTick as U, computed as A, openBlock as d, createElementBlock as o, createElementVNode as c, renderSlot as m, createCommentVNode as u, Fragment as P, renderList as J, unref as O, createBlock as W, createVNode as p } from "vue";
+import { useDragAndDrop as Y } from "@formkit/drag-and-drop/vue";
+import { animations as z } from "@formkit/drag-and-drop";
+import F from "./Sheet.vue.js";
 import b from "./WorkbookAddButton.vue.js";
-const z = { class: "flex flex-col w-full font-sans" }, F = { class: "flex items-end w-full border-b px-1 gap-2" }, M = {
+const L = { class: "flex flex-col w-full font-sans" }, M = { class: "flex items-end w-full border-b px-1" }, j = {
   key: 0,
-  class: "flex items-center mb-1 mr-2"
-}, j = {
+  class: "flex items-center"
+}, q = {
   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" }, G = { key: 0 }, H = { key: 1 }, K = { class: "flex-1 relative bg-white w-full" }, te = /* @__PURE__ */ T({
+}, G = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, H = { key: 0 }, K = { key: 1 }, Q = { class: "flex-1 relative bg-white w-full" }, te = /* @__PURE__ */ T({
   __name: "Workbook",
   props: {
     modelValue: { default: "" },
@@ -21,20 +21,23 @@ const z = { class: "flex flex-col w-full font-sans" }, F = { class: "flex items-
     maxSheets: { default: 50 },
     variant: { default: "chrome" },
     class: {},
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    inactiveItemClass: { default: "" },
     confirmDelete: { type: Boolean, default: !1 },
     confirmDeleteTexts: {},
     allowIconChange: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "update:sheets", "change", "add", "delete", "duplicate", "edit-start", "edit-end"],
-  setup(d, { emit: k }) {
-    const l = d, s = k, f = v(null), r = v(null), [w, h] = O(l.sheets, {
-      plugins: [W()],
+  setup(i, { emit: k }) {
+    const l = i, a = k, f = g(null), r = g(null), [w, h] = Y(l.sheets, {
+      plugins: [z()],
       draggable: (e) => l.draggable && !r.value,
       onSort: (e) => {
-        s("update:sheets", e.values);
+        a("update:sheets", e.values);
       }
     });
-    p(
+    x(
       () => l.sheets,
       (e) => {
         JSON.stringify(e) !== JSON.stringify(h.value) && (h.value = [...e]);
@@ -42,44 +45,44 @@ const z = { class: "flex flex-col w-full font-sans" }, F = { class: "flex items-
       { deep: !0 }
     );
     const y = (e) => {
-      s("update:modelValue", e), s("change", e);
-    }, g = () => {
-      l.sheets.length >= l.maxSheets || s("add");
-    }, S = (e, o) => {
-      const t = l.sheets.findIndex((n) => n.id === e);
+      a("update:modelValue", e), a("change", e);
+    }, v = () => {
+      l.sheets.length >= l.maxSheets || a("add");
+    }, C = (e, n) => {
+      const t = l.sheets.findIndex((s) => s.id === e);
       if (t !== -1) {
-        const n = [...l.sheets];
-        n[t] = { ...n[t], title: o }, s("update:sheets", n);
+        const s = [...l.sheets];
+        s[t] = { ...s[t], title: n }, a("update:sheets", s);
       }
-    }, D = (e, o) => {
-      const t = l.sheets.findIndex((n) => n.id === e);
+    }, S = (e, n) => {
+      const t = l.sheets.findIndex((s) => s.id === e);
       if (t !== -1) {
-        const n = [...l.sheets];
-        n[t] = { ...n[t], icon: o }, s("update:sheets", n);
+        const s = [...l.sheets];
+        s[t] = { ...s[t], icon: n }, a("update:sheets", s);
       }
+    }, I = (e) => {
+      r.value = e, a("edit-start", e);
+    }, D = (e) => {
+      r.value = null, a("edit-end", e);
     }, B = (e) => {
-      r.value = e, s("edit-start", e);
+      a("duplicate", e);
     }, V = (e) => {
-      r.value = null, s("edit-end", e);
-    }, I = (e) => {
-      s("duplicate", e);
-    }, C = (e) => {
-      const o = l.sheets.findIndex((n) => n.id === e);
-      if (o === -1) return;
+      const n = l.sheets.findIndex((s) => s.id === e);
+      if (n === -1) return;
       const t = [...l.sheets];
-      if (t.splice(o, 1), s("update:sheets", t), s("delete", e), l.modelValue === e) {
-        let n = "";
+      if (t.splice(n, 1), a("update:sheets", t), a("delete", e), l.modelValue === e) {
+        let s = "";
         if (t.length > 0) {
-          const N = Math.min(o, t.length - 1);
-          n = t[N].id;
+          const N = Math.min(n, t.length - 1);
+          s = t[N].id;
         }
-        s("update:modelValue", n), s("change", n);
+        a("update:modelValue", s), a("change", s);
       }
     };
-    p(
+    x(
       () => l.sheets.length,
-      (e, o) => {
-        e > o && l.addable && _(() => {
+      (e, n) => {
+        n !== void 0 && n > 0 && e === n + 1 && l.addable && U(() => {
           const t = l.sheets[l.sheets.length - 1];
           t.id === l.modelValue && (r.value = t.id);
         });
@@ -87,10 +90,10 @@ const z = { class: "flex flex-col w-full font-sans" }, F = { class: "flex items-
     );
     const E = (e) => {
       f.value && e.deltaY !== 0 && (f.value.scrollLeft += e.deltaY, e.preventDefault());
-    }, $ = U(() => l.sheets.length > 1);
-    return (e, o) => (a(), i("div", z, [
-      c("div", F, [
-        e.$slots["left-addons"] ? (a(), i("div", M, [
+    }, $ = A(() => l.sheets.length > 1);
+    return (e, n) => (d(), o("div", L, [
+      c("div", M, [
+        e.$slots["left-addons"] ? (d(), o("div", j, [
           m(e.$slots, "left-addons", {}, void 0, !0)
         ])) : u("", !0),
         c("div", {
@@ -105,39 +108,42 @@ const z = { class: "flex flex-col w-full font-sans" }, F = { class: "flex items-
             ref: w,
             class: "flex items-end"
           }, [
-            (a(!0), i(A, null, L(P(h), (t) => (a(), J(Y, {
+            (d(!0), o(P, null, J(O(h), (t) => (d(), W(F, {
               key: t.id,
               sheet: t,
-              "is-active": d.modelValue === t.id,
+              "is-active": i.modelValue === t.id,
               "is-editing": r.value === t.id,
               "can-delete": $.value,
-              "confirm-delete": d.confirmDelete,
-              "confirm-delete-texts": d.confirmDeleteTexts,
-              "allow-icon-change": d.allowIconChange,
+              "confirm-delete": i.confirmDelete,
+              "confirm-delete-texts": i.confirmDeleteTexts,
+              "allow-icon-change": i.allowIconChange,
+              "item-class": i.itemClass,
+              "active-item-class": i.activeItemClass,
+              "inactive-item-class": i.inactiveItemClass,
               onSelect: y,
-              "onUpdate:title": S,
-              "onUpdate:icon": D,
-              onEditStart: B,
-              onEditEnd: V,
-              onDuplicate: I,
-              onDelete: C
-            }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change"]))), 128))
+              "onUpdate:title": C,
+              "onUpdate:icon": S,
+              onEditStart: I,
+              onEditEnd: D,
+              onDuplicate: B,
+              onDelete: V
+            }, 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"]))), 128))
           ], 512),
-          d.addable && d.addButtonPosition === "attached" ? (a(), i("div", j, [
-            x(b, { onClick: g })
+          i.addable && i.addButtonPosition === "attached" ? (d(), o("div", q, [
+            p(b, { onClick: v })
           ])) : u("", !0),
-          o[0] || (o[0] = c("div", { class: "w-1 shrink-0" }, null, -1))
+          n[0] || (n[0] = c("div", { class: "w-1 shrink-0" }, null, -1))
         ], 544),
-        c("div", q, [
-          d.addable && d.addButtonPosition === "fixed-right" ? (a(), i("div", G, [
-            x(b, { onClick: g })
+        c("div", G, [
+          i.addable && i.addButtonPosition === "fixed-right" ? (d(), o("div", H, [
+            p(b, { onClick: v })
           ])) : u("", !0),
-          e.$slots["right-addons"] ? (a(), i("div", H, [
+          e.$slots["right-addons"] ? (d(), o("div", K, [
             m(e.$slots, "right-addons", {}, void 0, !0)
           ])) : u("", !0)
         ])
       ]),
-      c("div", K, [
+      c("div", Q, [
         m(e.$slots, "default", {}, void 0, !0)
       ])
     ]));

package/components/Workbook/types.d.ts

@@ -19,6 +19,9 @@ export interface WorkbookProps {
     maxSheets?: number;
     variant?: 'chrome' | 'folder' | 'simple' | 'card';
     class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    inactiveItemClass?: string;
     confirmDelete?: boolean;
     confirmDeleteTexts?: {
         title?: string;

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -42,7 +42,7 @@
     "tailwindcss": "^4.1.18",
     "v-datepicker-lite": "^0.1.6",
     "v-tooltip-lite": "^0.1.9",
-    "vue-carousel-lite": "^0.2.3",
+    "vue-carousel-lite": "^0.2.6",
     "vue3-google-signin": "^2.1.1"
   },
   "peerDependencies": {

package/style.css

@@ -315,6 +315,10 @@
   --color-success-dark: #00613f;
 }
 
+@utility -text-fs-* {
+  font-size: calc(--value(--text--fs- *, [length], [number]));
+}
+
 
 .dark .modal-body,
 .dark .sidepanel-body {