vlite3 1.0.10 → 1.1.2

package/components/Tabes/Tabes.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, ref as b, watch as l, onMounted as D, computed as g, openBlock as i, createElementBlock as p, normalizeClass as u, normalizeStyle as N, createCommentVNode as y, Fragment as O, renderList as P, createBlock as x, resolveDynamicComponent as T, mergeProps as F, withCtx as _, createElementVNode as q, toDisplayString as G, nextTick as H } from "vue";
+import { defineComponent as E, ref as m, watch as l, onMounted as D, computed as g, openBlock as i, createElementBlock as p, normalizeClass as u, normalizeStyle as N, createCommentVNode as y, Fragment as O, renderList as P, createBlock as x, resolveDynamicComponent as T, mergeProps as F, withCtx as _, createElementVNode as q, toDisplayString as G, nextTick as H } from "vue";
 import { useResizeObserver as J } from "@vueuse/core";
 import K from "../Icon.vue.js";
 import { $t as Q } from "../../utils/i18n.js";
@@ -11,37 +11,38 @@ const Z = /* @__PURE__ */ E({
     variant: { default: "surface" },
     block: { type: Boolean, default: !1 },
     textClass: {},
-    wrap: { type: Boolean, default: !1 }
+    wrap: { type: Boolean, default: !1 },
+    tabClass: {}
   },
   emits: ["update:modelValue", "change"],
   setup(s, { emit: h }) {
-    const a = s, v = h, d = b(null), f = b(/* @__PURE__ */ new Map()), k = (e, n) => {
+    const r = s, v = h, d = m(null), f = m(/* @__PURE__ */ new Map()), k = (e, n) => {
       e ? f.value.set(n, e) : f.value.delete(n);
-    }, m = b({
+    }, b = m({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
     }), o = async () => {
       await H();
-      const e = d.value, n = f.value.get(a.modelValue);
+      const e = d.value, n = f.value.get(r.modelValue);
       if (!e || !n) {
-        m.value.opacity = 0;
+        b.value.opacity = 0;
         return;
       }
-      const t = e.getBoundingClientRect(), r = n.getBoundingClientRect(), c = r.left - t.left, M = r.top - t.top, j = r.width, A = r.height;
-      m.value = {
+      const t = e.getBoundingClientRect(), a = n.getBoundingClientRect(), c = a.left - t.left, M = a.top - t.top, j = a.width, A = a.height;
+      b.value = {
         width: `${j}px`,
         height: `${A}px`,
         transform: `translate(${c}px, ${M}px)`,
         opacity: 1
       };
     };
-    J(d, o), l(() => a.modelValue, o), l(() => a.options, o, { deep: !0 }), l(() => a.size, o), l(() => a.block, o), l(() => a.wrap, o), D(o);
+    J(d, o), l(() => r.modelValue, o), l(() => r.options, o, { deep: !0 }), l(() => r.size, o), l(() => r.block, o), l(() => r.wrap, o), D(o);
     const C = (e) => {
       e.disabled || (v("update:modelValue", e.value), v("change", e.value));
     }, w = g(() => {
-      const e = a.variant === "line", n = {
+      const e = r.variant === "line", n = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -49,51 +50,51 @@ const Z = /* @__PURE__ */ E({
         success: "bg-success/10 p-1",
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
-      }, t = a.wrap && !e ? "flex-wrap" : "";
-      return [`${a.block || e ? "flex w-full" : "inline-flex"} rounded-lg relative isolate ${t}`, n[a.variant]];
+      }, t = r.wrap && !e ? "flex-wrap" : "";
+      return [`${r.block || e ? "flex w-full" : "inline-flex"} rounded-lg relative isolate ${t}`, n[r.variant]];
     }), z = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
     }, $ = g(() => {
-      const e = a.variant === "line", n = e ? "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 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", t = (a.block || a.wrap) && !e ? "flex-1" : "";
+      const e = r.variant === "line", n = e ? "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 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", t = (r.block || r.wrap) && !e ? "flex-1" : "";
       return [n, t];
     }), V = (e) => {
-      const n = e.value === a.modelValue, t = a.variant === "line";
-      let r = "";
+      const n = e.value === r.modelValue, t = r.variant === "line";
+      let a = "";
       if (n)
         if (t)
-          r = "text-primary";
+          a = "text-primary";
         else
-          switch (a.variant) {
+          switch (r.variant) {
             case "surface":
-              r = "text-foreground";
+              a = "text-foreground";
               break;
             case "primary":
-              r = "text-primary-foreground";
+              a = "text-primary-foreground";
               break;
             case "secondary":
-              r = "text-secondary";
+              a = "text-secondary";
               break;
             case "danger":
-              r = "text-danger-fg";
+              a = "text-danger-fg";
               break;
             case "success":
-              r = "text-success-fg";
+              a = "text-success-fg";
               break;
             case "outline":
-              r = "text-accent-foreground";
+              a = "text-accent-foreground";
               break;
             default:
-              r = "text-foreground";
+              a = "text-foreground";
           }
       else
-        r = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+        a = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
       const c = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [$.value, r, c].join(" ");
+      return [$.value, a, r?.tabClass, c].join(" ");
     }, R = g(() => {
       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 a.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
+      return r.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
     }), B = () => ({
       surface: "bg-background",
       primary: "bg-primary",
@@ -102,7 +103,7 @@ const Z = /* @__PURE__ */ E({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[a.variant], S = (e) => e.labelI18n ? Q(e.labelI18n) : e.label, I = (e) => e.to ? "router-link" : e.href ? "a" : "button", L = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
+    })[r.variant], S = (e) => e.labelI18n ? Q(e.labelI18n) : e.label, I = (e) => e.to ? "router-link" : e.href ? "a" : "button", L = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
     return (e, n) => (i(), p("div", {
       ref_key: "containerRef",
       ref: d,
@@ -113,18 +114,18 @@ const Z = /* @__PURE__ */ E({
       s.modelValue !== void 0 && !s.wrap ? (i(), p("div", {
         key: 0,
         class: u([R.value, B()]),
-        style: N(m.value)
+        style: N(b.value)
       }, null, 6)) : y("", !0),
       (i(!0), p(O, null, P(s.options, (t) => (i(), x(T(I(t)), F({
         key: t.value,
         ref_for: !0,
-        ref: (r) => k(r?.$el || r, t.value),
+        ref: (a) => k(a?.$el || a, t.value),
         role: "tab",
         "aria-selected": s.modelValue === t.value,
         disabled: t.disabled,
-        class: [V(t), z[a.size]]
+        class: [V(t), z[r.size]]
       }, { ref_for: !0 }, L(t), {
-        onClick: (r) => C(t)
+        onClick: (a) => C(t)
       }), {
         default: _(() => [
           t.icon ? (i(), x(K, {

package/components/ThumbnailSelector/ThumbnailSelector.vue.d.ts

@@ -27,9 +27,9 @@ declare const _default: import('vue').DefineComponent<ThumbnailSelectorProps, {}
     "onUpdate:images"?: (value: string[]) => any;
     "onUpdate:thumbnail"?: (value: string) => any;
 }>, {
-    disabled: boolean;
     loading: boolean;
-    images: string[];
     thumbnail: string | null;
+    disabled: boolean;
+    images: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/ThumbnailSelector/ThumbnailSelector.vue.js

@@ -1,7 +1,7 @@
 import o from "./ThumbnailSelector.vue2.js";
 /* empty css                       */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-72ffdc55"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-74a988ab"]]);
 export {
-  f as default
+  e as default
 };

package/components/ThumbnailSelector/ThumbnailSelector.vue2.js

@@ -1,23 +1,21 @@
-import { defineComponent as R, ref as w, watch as _, computed as m, openBlock as o, createElementBlock as u, toDisplayString as f, createCommentVNode as v, createElementVNode as h, createVNode as p, Fragment as A, renderList as E, normalizeClass as k, withModifiers as L, createBlock as y, withCtx as P } from "vue";
-import g from "../Icon.vue.js";
-import D from "../FilePicker/FilePicker.vue.js";
-import { $t as S } from "../../utils/i18n.js";
-const F = { class: "vl-thumbnail-selector flex flex-col gap-3" }, M = {
+import { defineComponent as L, ref as w, watch as _, computed as m, openBlock as i, createElementBlock as d, toDisplayString as p, createCommentVNode as g, createElementVNode as v, createVNode as f, unref as P, withCtx as k, Fragment as V, renderList as F, normalizeClass as S, withModifiers as C, createBlock as y } from "vue";
+import h from "../Icon.vue.js";
+import M from "../FilePicker/FilePicker.vue.js";
+import { VueDraggable as O } from "vue-draggable-plus";
+import { $t as z } from "../../utils/i18n.js";
+const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
   key: 0,
   class: "text-sm font-medium text-foreground"
-}, O = {
+}, H = {
   class: "vl-thumbnail-selector__preview w-full rounded-lg border border-border bg-muted/30 overflow-hidden flex items-center justify-center",
   style: { "aspect-ratio": "1/1" }
-}, q = ["src", "alt"], G = {
+}, J = ["src", "alt"], K = {
   key: 1,
   class: "flex flex-col items-center gap-2 text-muted-foreground/40 select-none"
-}, H = { class: "text-xs" }, J = {
-  class: "vl-thumbnail-selector__grid grid grid-cols-3 sm:grid-cols-4 gap-2",
-  style: { "will-change": "transform", contain: "layout style" }
-}, K = ["onClick"], Q = ["src", "alt"], V = ["title", "onClick"], W = {
-  key: 1,
+}, Q = { class: "text-xs" }, W = ["onClick"], X = ["src", "alt"], Y = ["title"], Z = ["title", "onClick"], ee = {
+  key: 2,
   class: "absolute bottom-0.5 left-0.5 z-10 w-4 h-4 flex items-center justify-center rounded-full bg-primary pointer-events-none"
-}, X = ["onClick"], Y = { class: "text-[10px] mt-0.5 leading-tight" }, ie = /* @__PURE__ */ R({
+}, te = ["onClick"], le = { class: "text-[10px] mt-0.5 leading-tight" }, de = /* @__PURE__ */ L({
   name: "ThumbnailSelector",
   __name: "ThumbnailSelector",
   props: {
@@ -29,130 +27,158 @@ const F = { class: "vl-thumbnail-selector flex flex-col gap-3" }, M = {
     label: {}
   },
   emits: ["update:images", "update:thumbnail", "change"],
-  setup(a, { emit: C }) {
-    const s = a, r = C, c = w([...s.images || []]), i = w(s.thumbnail ?? null);
+  setup(l, { emit: j }) {
+    const c = l, n = j, r = w([...c.images || []]), o = w(c.thumbnail ?? null);
     _(
-      () => s.images,
-      (t) => {
-        c.value = [...t || []];
+      () => c.images,
+      (e) => {
+        r.value = [...e || []];
       }
     ), _(
-      () => s.thumbnail,
-      (t) => {
-        i.value = t ?? null;
+      () => c.thumbnail,
+      (e) => {
+        o.value = e ?? null;
       }
     );
-    const x = m(() => i.value || c.value[0] || null), b = (t, d, e) => {
-      const l = e ? S(t, e) : S(t);
-      return l !== t ? l : d;
-    }, I = m(() => b("vlite.thumbnailSelector.preview", "Thumbnail preview")), j = m(() => b("vlite.thumbnailSelector.noImageSelected", "No image selected")), z = m(() => b("vlite.thumbnailSelector.image", "Image")), T = m(() => b("vlite.thumbnailSelector.removeImage", "Remove image")), U = m(() => b("vlite.thumbnailSelector.upload", "Upload")), $ = (t) => {
-      s.disabled || s.loading || (i.value = t, r("update:thumbnail", t), r("change", { images: c.value, thumbnail: t }));
-    }, B = (t, d) => {
-      if (d.stopPropagation(), s.disabled || s.loading) return;
-      const e = c.value.filter((n) => n !== t);
-      c.value = e;
-      let l = i.value;
-      i.value === t && (l = e[0] ?? null, i.value = l, r("update:thumbnail", l)), r("update:images", e), r("change", { images: e, thumbnail: l });
-    }, N = (t) => {
-      if (!t) return;
-      const d = Array.isArray(t) ? t : [t], e = [];
-      for (const n of d)
-        if (n.base64)
-          e.push(n.base64);
-        else if (n.file)
+    const x = m(() => o.value || r.value[0] || null), b = (e, u, t) => {
+      const a = t ? z(e, t) : z(e);
+      return a !== e ? a : u;
+    }, T = m(() => b("vlite.thumbnailSelector.preview", "Thumbnail preview")), U = m(() => b("vlite.thumbnailSelector.noImageSelected", "No image selected")), I = m(() => b("vlite.thumbnailSelector.image", "Image")), R = m(() => b("vlite.thumbnailSelector.removeImage", "Remove image")), $ = m(() => b("vlite.thumbnailSelector.upload", "Upload")), B = m(() => b("vlite.thumbnailSelector.dragToReorder", "Drag to reorder")), D = (e) => {
+      c.disabled || c.loading || (o.value = e, n("update:thumbnail", e), n("change", { images: r.value, thumbnail: e }));
+    }, N = (e, u) => {
+      if (u.stopPropagation(), c.disabled || c.loading) return;
+      const t = r.value.filter((s) => s !== e);
+      r.value = t;
+      let a = o.value;
+      o.value === e && (a = t[0] ?? null, o.value = a, n("update:thumbnail", a)), n("update:images", t), n("change", { images: t, thumbnail: a });
+    }, A = (e) => {
+      if (!e) return;
+      const u = Array.isArray(e) ? e : [e], t = [];
+      for (const s of u)
+        if (s.base64)
+          t.push(s.base64);
+        else if (s.file)
           try {
-            e.push(URL.createObjectURL(n.file));
+            t.push(URL.createObjectURL(s.file));
           } catch {
           }
-      if (e.length === 0) return;
-      const l = [...c.value, ...e];
-      c.value = l, i.value || (i.value = e[0], r("update:thumbnail", e[0])), r("update:images", l), r("change", { images: l, thumbnail: i.value });
+      if (t.length === 0) return;
+      const a = [...r.value, ...t];
+      r.value = a, o.value || (o.value = t[0], n("update:thumbnail", t[0])), n("update:images", a), n("change", { images: a, thumbnail: o.value });
+    }, E = (e) => {
+      r.value = e, n("update:images", e), n("change", { images: e, thumbnail: o.value });
     };
-    return (t, d) => (o(), u("div", F, [
-      a.label ? (o(), u("p", M, f(a.label), 1)) : v("", !0),
-      h("div", O, [
-        x.value ? (o(), u("img", {
+    return (e, u) => (i(), d("div", q, [
+      l.label ? (i(), d("p", G, p(l.label), 1)) : g("", !0),
+      v("div", H, [
+        x.value ? (i(), d("img", {
           key: 0,
           src: x.value,
           class: "w-full h-full object-cover",
-          alt: I.value
-        }, null, 8, q)) : (o(), u("div", G, [
-          p(g, {
+          alt: T.value
+        }, null, 8, J)) : (i(), d("div", K, [
+          f(h, {
             icon: "lucide:image",
             class: "w-10 h-10"
           }),
-          h("span", H, f(j.value), 1)
+          v("span", Q, p(U.value), 1)
         ]))
       ]),
-      h("div", J, [
-        (o(!0), u(A, null, E(c.value, (e, l) => (o(), u("div", {
-          key: e + l,
-          class: k(["vl-thumbnail-selector__card relative rounded-md overflow-hidden cursor-pointer border-2 transition-all duration-150 w-full", [
-            i.value === e ? "border-primary shadow-sm shadow-primary/20" : "border-border",
-            a.disabled || a.loading ? "pointer-events-none opacity-60" : ""
-          ]]),
-          style: { "aspect-ratio": "1/1" },
-          onClick: (n) => $(e)
-        }, [
-          h("img", {
-            src: e,
-            class: "w-full h-full object-cover",
-            alt: `${z.value} ${l + 1}`
-          }, null, 8, Q),
-          a.disabled ? v("", !0) : (o(), u("button", {
-            key: 0,
-            type: "button",
-            class: "vl-thumbnail-selector__delete absolute top-0.5 right-0.5 z-10 w-5 h-5 flex items-center justify-center rounded-full bg-background/90 border border-border text-muted-foreground shadow-sm opacity-0 transition-opacity duration-150 hover:text-destructive hover:border-destructive",
-            title: T.value,
-            onClick: L((n) => B(e, n), ["stop"])
+      f(P(O), {
+        "model-value": r.value,
+        "onUpdate:modelValue": E,
+        animation: 150,
+        disabled: l.disabled || l.loading,
+        draggable: ".vl-thumbnail-selector__card",
+        handle: ".drag-handle",
+        filter: ".vl-thumbnail-selector__filepicker-inline, .vl-thumbnail-selector__upload",
+        "ghost-class": "opacity-50",
+        class: "vl-thumbnail-selector__grid grid grid-cols-3 sm:grid-cols-4 gap-2",
+        style: { "will-change": "transform", contain: "layout style" }
+      }, {
+        default: k(() => [
+          (i(!0), d(V, null, F(r.value, (t, a) => (i(), d("div", {
+            key: t,
+            class: S(["vl-thumbnail-selector__card relative rounded-md overflow-hidden cursor-pointer border-2 transition-all duration-150 w-full", [
+              o.value === t ? "border-primary shadow-sm shadow-primary/20" : "border-border",
+              l.disabled || l.loading ? "pointer-events-none opacity-60" : ""
+            ]]),
+            style: { "aspect-ratio": "1/1" },
+            onClick: (s) => D(t)
           }, [
-            p(g, {
-              icon: "lucide:x",
-              class: "w-3 h-3"
-            })
-          ], 8, V)),
-          i.value === e ? (o(), u("div", W, [
-            p(g, {
-              icon: "lucide:check",
-              class: "w-2.5 h-2.5 text-primary-foreground"
-            })
-          ])) : v("", !0)
-        ], 10, K))), 128)),
-        a.disabled ? v("", !0) : (o(), y(D, {
-          key: 0,
-          disabled: a.disabled || a.loading,
-          "return-format": "base64",
-          "file-types": ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"],
-          "max-size": a.maxSize ? a.maxSize * 1024 * 1024 : void 0,
-          "multi-select": !0,
-          class: "vl-thumbnail-selector__filepicker-inline",
-          onChange: N
-        }, {
-          trigger: P(({ trigger: e, isLoading: l }) => [
-            h("button", {
+            v("img", {
+              src: t,
+              class: "w-full h-full object-cover",
+              alt: `${I.value} ${a + 1}`
+            }, null, 8, X),
+            l.disabled ? g("", !0) : (i(), d("div", {
+              key: 0,
+              class: "drag-handle vl-thumbnail-selector__drag-handle absolute top-1 left-1 z-10 w-6 h-6 flex items-center justify-center rounded bg-background/60 backdrop-blur-sm border border-border text-muted-foreground shadow-sm cursor-grab active:cursor-grabbing hover:bg-background/90 hover:text-foreground opacity-0 transition-opacity duration-150",
+              title: B.value,
+              onClick: u[0] || (u[0] = C(() => {
+              }, ["stop"]))
+            }, [
+              f(h, {
+                icon: "lucide:grip-horizontal",
+                class: "w-3.5 h-3.5"
+              })
+            ], 8, Y)),
+            l.disabled ? g("", !0) : (i(), d("button", {
+              key: 1,
               type: "button",
-              class: k(["vl-thumbnail-selector__upload flex flex-col items-center justify-center rounded-md border-2 border-dashed border-border text-muted-foreground/60 hover:border-primary/50 hover:text-primary/60 transition-all cursor-pointer w-full", l || a.loading ? "opacity-60 pointer-events-none" : ""]),
-              style: { "aspect-ratio": "1/1" },
-              onClick: e
+              class: "vl-thumbnail-selector__delete absolute top-0.5 right-0.5 z-10 w-5 h-5 flex items-center justify-center rounded-full bg-background/90 border border-border text-muted-foreground shadow-sm opacity-0 transition-opacity duration-150 hover:text-destructive hover:border-destructive",
+              title: R.value,
+              onClick: C((s) => N(t, s), ["stop"])
             }, [
-              l || a.loading ? (o(), y(g, {
-                key: 0,
-                icon: "lucide:loader-2",
-                class: "w-5 h-5 animate-spin"
-              })) : (o(), y(g, {
-                key: 1,
-                icon: "lucide:plus",
-                class: "w-5 h-5"
-              })),
-              h("span", Y, f(U.value), 1)
-            ], 10, X)
-          ]),
-          _: 1
-        }, 8, ["disabled", "max-size"]))
-      ])
+              f(h, {
+                icon: "lucide:x",
+                class: "w-3 h-3"
+              })
+            ], 8, Z)),
+            o.value === t ? (i(), d("div", ee, [
+              f(h, {
+                icon: "lucide:check",
+                class: "w-2.5 h-2.5 text-primary-foreground"
+              })
+            ])) : g("", !0)
+          ], 10, W))), 128)),
+          l.disabled ? g("", !0) : (i(), y(M, {
+            key: 0,
+            disabled: l.disabled || l.loading,
+            "return-format": "base64",
+            "file-types": ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"],
+            "max-size": l.maxSize ? l.maxSize * 1024 * 1024 : void 0,
+            "multi-select": !0,
+            class: "vl-thumbnail-selector__filepicker-inline",
+            onChange: A
+          }, {
+            trigger: k(({ trigger: t, isLoading: a }) => [
+              v("button", {
+                type: "button",
+                class: S(["vl-thumbnail-selector__upload flex flex-col items-center justify-center rounded-md border-2 border-dashed border-border text-muted-foreground/60 hover:border-primary/50 hover:text-primary/60 transition-all cursor-pointer w-full", a || l.loading ? "opacity-60 pointer-events-none" : ""]),
+                style: { "aspect-ratio": "1/1" },
+                onClick: t
+              }, [
+                a || l.loading ? (i(), y(h, {
+                  key: 0,
+                  icon: "lucide:loader-2",
+                  class: "w-5 h-5 animate-spin"
+                })) : (i(), y(h, {
+                  key: 1,
+                  icon: "lucide:plus",
+                  class: "w-5 h-5"
+                })),
+                v("span", le, p($.value), 1)
+              ], 10, te)
+            ]),
+            _: 1
+          }, 8, ["disabled", "max-size"]))
+        ]),
+        _: 1
+      }, 8, ["model-value", "disabled"])
     ]));
   }
 });
 export {
-  ie as default
+  de as default
 };

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

@@ -13,18 +13,18 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<WorkbookProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    change: (id: string) => any;
     delete: (id: string) => any;
     add: () => any;
+    change: (id: string) => any;
     "update:modelValue": (id: string) => any;
     "edit-start": (id: string) => any;
     "edit-end": (id: string) => any;
     duplicate: (id: string) => any;
     "update:sheets": (sheets: WorkbookSheet[]) => any;
 }, string, import('vue').PublicProps, Readonly<WorkbookProps> & Readonly<{
-    onChange?: (id: string) => any;
     onDelete?: (id: string) => any;
     onAdd?: () => any;
+    onChange?: (id: string) => any;
     "onUpdate:modelValue"?: (id: string) => any;
     "onEdit-start"?: (id: string) => any;
     "onEdit-end"?: (id: string) => any;
@@ -32,10 +32,10 @@ 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;
-    itemClass: string;
     confirmDelete: boolean;
     allowIconChange: boolean;
     activeItemClass: string;

package/core/config.d.ts

@@ -43,6 +43,44 @@ export declare const configState: {
             hideIcon?: boolean;
             customStatuses?: Record<string, import('..').CustomStatusConfig>;
         };
+        attachmentsList?: {
+            variant?: "default" | "list" | "inline" | "card";
+            size?: "sm" | "md" | "lg";
+            canView?: boolean;
+            canDownload?: boolean;
+            clickToPreview?: boolean;
+            showDownloadInList?: boolean;
+            rootClass?: string;
+            gridClass?: string;
+            cardClass?: string;
+            cardThumbnailClass?: string;
+            cardInfoClass?: string;
+            cardActionsClass?: string;
+            listClass?: string;
+            itemClass?: string;
+            itemIconBoxClass?: string;
+            itemNameClass?: string;
+            itemSizeClass?: string;
+            itemActionsClass?: string;
+            emptyClass?: string;
+        };
+        list?: {
+            title?: string;
+            class?: string;
+            titleI18n?: string;
+            variant?: import('..').ListVariant;
+            titleIcon?: string;
+            columns?: import('..').ListColumns;
+            showColon?: boolean;
+            loading?: boolean;
+            skeletonRows?: number;
+            stackedBorderStyle?: import('..').StackedBorderStyle;
+        };
+        invoice?: {
+            variant?: import('..').InvoiceVariant;
+            compact?: boolean;
+            displayBarcodeValue?: boolean;
+        };
     };
 };
 /**
@@ -88,5 +126,43 @@ export declare function useVLiteConfig(): {
             hideIcon?: boolean;
             customStatuses?: Record<string, import('..').CustomStatusConfig>;
         };
+        attachmentsList?: {
+            variant?: "default" | "list" | "inline" | "card";
+            size?: "sm" | "md" | "lg";
+            canView?: boolean;
+            canDownload?: boolean;
+            clickToPreview?: boolean;
+            showDownloadInList?: boolean;
+            rootClass?: string;
+            gridClass?: string;
+            cardClass?: string;
+            cardThumbnailClass?: string;
+            cardInfoClass?: string;
+            cardActionsClass?: string;
+            listClass?: string;
+            itemClass?: string;
+            itemIconBoxClass?: string;
+            itemNameClass?: string;
+            itemSizeClass?: string;
+            itemActionsClass?: string;
+            emptyClass?: string;
+        };
+        list?: {
+            title?: string;
+            class?: string;
+            titleI18n?: string;
+            variant?: import('..').ListVariant;
+            titleIcon?: string;
+            columns?: import('..').ListColumns;
+            showColon?: boolean;
+            loading?: boolean;
+            skeletonRows?: number;
+            stackedBorderStyle?: import('..').StackedBorderStyle;
+        };
+        invoice?: {
+            variant?: import('..').InvoiceVariant;
+            compact?: boolean;
+            displayBarcodeValue?: boolean;
+        };
     };
 };

package/core/index.js

@@ -1,6 +1,6 @@
 import { configState as t, VLITE_CONFIG_KEY as s } from "./config.js";
-import { updateConfig as n, useVLiteConfig as p } from "./config.js";
-function o(e = {}) {
+import { updateConfig as i, useVLiteConfig as r } from "./config.js";
+function n(e = {}) {
   return {
     install(m) {
       e && (e.services && (t.services = { ...t.services, ...e.services }), e.importData && (t.importData = { ...t.importData, ...e.importData }), e.exportData && (t.exportData = { ...t.exportData, ...e.exportData }), e.components && (t.components = {
@@ -29,6 +29,18 @@ function o(e = {}) {
             ...t.components?.statusChip?.customStatuses || {},
             ...e.components.statusChip?.customStatuses || {}
           }
+        },
+        attachmentsList: {
+          ...t.components?.attachmentsList || {},
+          ...e.components.attachmentsList || {}
+        },
+        list: {
+          ...t.components?.list || {},
+          ...e.components.list || {}
+        },
+        invoice: {
+          ...t.components?.invoice || {},
+          ...e.components.invoice || {}
         }
       })), m.provide(s, t), m.config.globalProperties.$vlite = t;
     }
@@ -37,7 +49,7 @@ function o(e = {}) {
 export {
   s as VLITE_CONFIG_KEY,
   t as configState,
-  o as createVLite,
-  n as updateConfig,
-  p as useVLiteConfig
+  n as createVLite,
+  i as updateConfig,
+  r as useVLiteConfig
 };