vlite3 1.1.2 → 1.1.4

package/components/AttachmentsList/AttachmentsList.vue.d.ts

@@ -4,5 +4,5 @@ declare const _default: import('vue').DefineComponent<AttachmentsListProps, {},
     canDownload: boolean;
     clickToPreview: boolean;
     showDownloadInList: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/AttachmentsList/AttachmentsList.vue.js

@@ -1,19 +1,25 @@
-import { defineComponent as ne, computed as a, ref as ie, openBlock as t, createElementBlock as l, normalizeClass as n, Fragment as x, renderList as $, createElementVNode as B, createBlock as u, unref as c, withCtx as j, createVNode as I, createCommentVNode as r, withModifiers as G, toDisplayString as b } from "vue";
-import C from "../Modal.vue.js";
-import D from "../Icon.vue.js";
-import A from "../Button.vue.js";
-import { $t as v } from "../../utils/i18n.js";
-import { downloadFile as re } from "../../utils/functions.js";
-import { getComponentConfig as ce } from "../../utils/configUtils.js";
-import k from "../FilePreview/FilePreview.vue.js";
-import { getFileTypeIcon as K } from "./fileTypeIcon.js";
-const de = ["onClick"], me = ["src"], ue = ["title"], ve = {
+import { defineComponent as de, computed as o, ref as K, openBlock as t, createElementBlock as s, normalizeClass as i, Fragment as x, renderList as L, createElementVNode as U, createVNode as N, createCommentVNode as c, createBlock as p, unref as d, withCtx as V, withModifiers as O, toDisplayString as z } from "vue";
+import P from "../Modal.vue.js";
+import f from "../Icon.vue.js";
+import j from "../Button.vue.js";
+import { $t as w } from "../../utils/i18n.js";
+import { downloadFile as me } from "../../utils/functions.js";
+import { getComponentConfig as ve } from "../../utils/configUtils.js";
+import I from "../FilePreview/FilePreview.vue.js";
+import { getFileTypeIcon as R } from "./fileTypeIcon.js";
+const pe = ["onClick"], he = {
+  key: 0,
+  class: "absolute inset-0 bg-background/50 flex items-center justify-center z-10 backdrop-blur-[2px] transition-all"
+}, we = ["src"], ye = ["title"], ge = {
   key: 1,
   class: "vl-attachments-list__item-size text-xs text-muted-foreground mt-0.5"
-}, pe = ["onClick"], he = { class: "flex items-center gap-3 overflow-hidden min-w-0 flex-1" }, we = ["src"], ye = {
+}, be = ["onClick"], xe = { class: "flex items-center gap-3 overflow-hidden min-w-0 flex-1" }, fe = {
+  key: 0,
+  class: "absolute inset-0 bg-background/60 flex items-center justify-center z-10 backdrop-blur-[1px] transition-all"
+}, _e = ["src"], Ce = {
   key: 0,
   class: "flex flex-col overflow-hidden leading-tight min-w-0"
-}, xe = ["title"], ge = ["aria-label"], fe = ["aria-label", "onClick"], De = /* @__PURE__ */ ne({
+}, ke = ["title"], Ne = ["aria-label"], ze = ["aria-label", "onClick"], $e = /* @__PURE__ */ de({
   __name: "AttachmentsList",
   props: {
     attachments: {},
@@ -37,29 +43,74 @@ const de = ["onClick"], me = ["src"], ue = ["title"], ve = {
     itemActionsClass: {},
     emptyClass: {}
   },
-  setup(W) {
-    const s = W, i = ce("attachmentsList") || {}, p = a(() => s.canView ?? i.canView ?? !0), h = a(() => s.canDownload ?? i.canDownload ?? !0), w = a(() => s.variant ?? i.variant ?? "default"), L = a(() => s.size ?? i.size ?? "md"), y = a(() => s.clickToPreview ?? i.clickToPreview ?? !1), q = a(
-      () => s.showDownloadInList ?? i.showDownloadInList ?? !0
-    ), H = a(() => s.rootClass ?? i.rootClass ?? ""), J = a(() => s.gridClass ?? i.gridClass ?? ""), O = a(() => s.cardClass ?? i.cardClass ?? ""), Q = a(
-      () => s.cardThumbnailClass ?? i.cardThumbnailClass ?? ""
-    ), R = a(() => s.cardInfoClass ?? i.cardInfoClass ?? ""), X = a(
-      () => s.cardActionsClass ?? i.cardActionsClass ?? ""
-    ), Y = a(() => s.listClass ?? i.listClass ?? ""), Z = a(() => s.itemClass ?? i.itemClass ?? ""), ee = a(
-      () => s.itemIconBoxClass ?? i.itemIconBoxClass ?? ""
-    ), te = a(() => s.itemNameClass ?? i.itemNameClass ?? ""), ae = a(() => s.itemSizeClass ?? i.itemSizeClass ?? ""), se = a(
-      () => s.itemActionsClass ?? i.itemActionsClass ?? ""
-    ), oe = a(() => s.emptyClass ?? i.emptyClass ?? ""), N = ie(null), z = a(() => s.attachments ? Array.isArray(s.attachments) ? s.attachments : [s.attachments] : []), V = (o) => {
-      if (!o) return "0 Bytes";
-      const _ = 1024, e = ["Bytes", "KB", "MB", "GB"], d = Math.floor(Math.log(o) / Math.log(_));
-      return parseFloat((o / Math.pow(_, d)).toFixed(2)) + " " + e[d];
-    }, U = async (o) => {
-      o.fileUrl && o.fileUrl !== "#" && await re(o.fileUrl, o.fileName || "attachment");
-    }, F = (o) => o.fileType && o.fileType.startsWith("image/") ? !0 : /\.(jpg|jpeg|png|gif|webp|svg|bmp)(\?.*)?$/i.test(o.fileUrl || ""), g = (o) => o.fileName !== void 0 && o.fileName !== null && String(o.fileName).trim() !== "", f = (o) => o.fileSize !== void 0 && o.fileSize !== null && String(o.fileSize).trim() !== "", M = (o) => {
-      y.value && p.value && (N.value = o);
-    }, E = () => {
-      N.value = null;
-    }, m = a(() => {
-      switch (L.value) {
+  setup(X) {
+    const l = X, r = ve("attachmentsList") || {}, y = o(() => l.canView ?? r.canView ?? !0), h = o(() => l.canDownload ?? r.canDownload ?? !0), g = o(() => l.variant ?? r.variant ?? "default"), E = o(() => l.size ?? r.size ?? "md"), b = o(() => l.clickToPreview ?? r.clickToPreview ?? !1), q = o(
+      () => l.showDownloadInList ?? r.showDownloadInList ?? !0
+    ), H = o(() => l.rootClass ?? r.rootClass ?? ""), J = o(() => l.gridClass ?? r.gridClass ?? ""), Q = o(() => l.cardClass ?? r.cardClass ?? ""), Y = o(
+      () => l.cardThumbnailClass ?? r.cardThumbnailClass ?? ""
+    ), Z = o(() => l.cardInfoClass ?? r.cardInfoClass ?? ""), ee = o(
+      () => l.cardActionsClass ?? r.cardActionsClass ?? ""
+    ), te = o(() => l.listClass ?? r.listClass ?? ""), ae = o(() => l.itemClass ?? r.itemClass ?? ""), se = o(
+      () => l.itemIconBoxClass ?? r.itemIconBoxClass ?? ""
+    ), oe = o(() => l.itemNameClass ?? r.itemNameClass ?? ""), le = o(() => l.itemSizeClass ?? r.itemSizeClass ?? ""), ne = o(
+      () => l.itemActionsClass ?? r.itemActionsClass ?? ""
+    ), ie = o(() => l.emptyClass ?? r.emptyClass ?? ""), B = K(null), v = K(/* @__PURE__ */ new Set()), re = [
+      "pdf",
+      "docx",
+      "xlsx",
+      "xls",
+      "csv",
+      "jpg",
+      "jpeg",
+      "png",
+      "webp",
+      "gif",
+      "svg",
+      "mp4",
+      "webm",
+      "ogg",
+      "mov",
+      "mp3",
+      "wav",
+      "json",
+      "js",
+      "ts",
+      "vue",
+      "html",
+      "css",
+      "txt",
+      "md"
+    ], S = o(() => l.attachments ? Array.isArray(l.attachments) ? l.attachments : [l.attachments] : []), F = (a) => {
+      if (!a) return "0 Bytes";
+      const u = 1024, e = ["Bytes", "KB", "MB", "GB"], n = Math.floor(Math.log(a) / Math.log(u));
+      return parseFloat((a / Math.pow(u, n)).toFixed(2)) + " " + e[n];
+    }, ce = (a) => {
+      if (!a) return "";
+      const u = a.split("?")[0].split("#")[0], e = u.lastIndexOf(".");
+      return e !== -1 ? u.slice(e + 1).toLowerCase() : "";
+    }, _ = (a) => {
+      const u = ce(a.fileName || a.fileUrl);
+      return re.includes(u);
+    }, A = async (a, u) => {
+      if (a.fileUrl && a.fileUrl !== "#")
+        try {
+          if (u !== void 0) {
+            const e = new Set(v.value);
+            e.add(u), v.value = e;
+          }
+          await me(a.fileUrl, a.fileName || "attachment");
+        } finally {
+          if (u !== void 0) {
+            const e = new Set(v.value);
+            e.delete(u), v.value = e;
+          }
+        }
+    }, M = (a) => a.fileType && a.fileType.startsWith("image/") ? !0 : /\.(jpg|jpeg|png|gif|webp|svg|bmp)(\?.*)?$/i.test(a.fileUrl || ""), C = (a) => a.fileName !== void 0 && a.fileName !== null && String(a.fileName).trim() !== "", k = (a) => a.fileSize !== void 0 && a.fileSize !== null && String(a.fileSize).trim() !== "", W = async (a, u) => {
+      b.value && (y.value && _(u) ? B.value = a : h.value && await A(u, a));
+    }, G = () => {
+      B.value = null;
+    }, m = o(() => {
+      switch (E.value) {
         case "sm":
           return {
             item: "pl-2 pr-2.5 py-1.5 gap-1.5",
@@ -91,48 +142,54 @@ const de = ["onClick"], me = ["src"], ue = ["title"], ve = {
             actionIcon: "w-4 h-4"
           };
       }
-    }), S = a(() => p.value && !y.value), T = a(() => h.value && q.value), le = a(() => S.value || T.value);
-    return (o, _) => (t(), l("div", {
-      class: n(["vl-attachments-list w-full", H.value])
+    }), T = o(() => y.value && !b.value), $ = o(() => h.value && q.value), ue = o(() => T.value || $.value);
+    return (a, u) => (t(), s("div", {
+      class: i(["vl-attachments-list w-full", H.value])
     }, [
-      z.value.length > 0 ? (t(), l(x, { key: 0 }, [
-        w.value === "card" ? (t(), l("div", {
+      S.value.length > 0 ? (t(), s(x, { key: 0 }, [
+        g.value === "card" ? (t(), s("div", {
           key: 0,
-          class: n(["vl-attachments-list__grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", J.value])
+          class: i(["vl-attachments-list__grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", J.value])
         }, [
-          (t(!0), l(x, null, $(z.value, (e, d) => (t(), l("div", {
-            key: d,
-            class: n(["vl-attachments-list__card relative group rounded-xl border border-border bg-body overflow-hidden hover:shadow-md transition-all flex flex-col", [{ "cursor-pointer": y.value && p.value }, O.value]]),
-            onClick: (P) => M(d)
+          (t(!0), s(x, null, L(S.value, (e, n) => (t(), s("div", {
+            key: n,
+            class: i(["vl-attachments-list__card relative group rounded-xl border border-border bg-body overflow-hidden hover:shadow-md transition-all flex flex-col", [{ "cursor-pointer": b.value && (y.value || h.value) }, Q.value]]),
+            onClick: (D) => W(n, e)
           }, [
-            B("div", {
-              class: n(["vl-attachments-list__card-thumbnail h-40 w-full bg-muted/30 flex items-center justify-center overflow-hidden relative", [
-                Q.value,
-                g(e) || f(e) ? "border-b border-border" : ""
+            U("div", {
+              class: i(["vl-attachments-list__card-thumbnail h-40 w-full bg-muted/30 flex items-center justify-center overflow-hidden relative", [
+                Y.value,
+                C(e) || k(e) ? "border-b border-border" : ""
               ]])
             }, [
-              F(e) ? (t(), l("img", {
-                key: 0,
+              v.value.has(n) ? (t(), s("div", he, [
+                N(f, {
+                  icon: "lucide:loader-2",
+                  class: "w-8 h-8 text-primary animate-spin"
+                })
+              ])) : c("", !0),
+              M(e) ? (t(), s("img", {
+                key: 1,
                 src: e.thumbnailUrl || e.fileUrl,
                 class: "w-full h-full object-cover transition-transform group-hover:scale-105"
-              }, null, 8, me)) : (t(), u(D, {
-                key: 1,
-                icon: c(K)(e.fileName, e.fileUrl, e.fileType),
+              }, null, 8, we)) : (t(), p(f, {
+                key: 2,
+                icon: d(R)(e.fileName, e.fileUrl, e.fileType),
                 class: "w-12 h-12 text-muted-foreground/40 transition-transform group-hover:scale-110"
               }, null, 8, ["icon"])),
-              y.value ? r("", !0) : (t(), l("div", {
-                key: 2,
-                class: n(["vl-attachments-list__card-actions absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", X.value])
+              b.value ? c("", !0) : (t(), s("div", {
+                key: 3,
+                class: i(["vl-attachments-list__card-actions absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", ee.value])
               }, [
-                p.value ? (t(), u(C, {
+                y.value && _(e) ? (t(), p(P, {
                   key: 0,
-                  title: e.fileName || c(v)("common.words.preview", "Preview"),
+                  title: e.fileName || d(w)("common.words.preview", "Preview"),
                   "max-width": "max-w-3xl",
-                  body: c(k),
+                  body: d(I),
                   bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value }
                 }, {
-                  trigger: j(() => [
-                    I(A, {
+                  trigger: V(() => [
+                    N(j, {
                       variant: "secondary",
                       size: "xs",
                       icon: "lucide:eye",
@@ -140,176 +197,193 @@ const de = ["onClick"], me = ["src"], ue = ["title"], ve = {
                     })
                   ]),
                   _: 1
-                }, 8, ["title", "body", "bodyProps"])) : r("", !0),
-                h.value ? (t(), u(A, {
+                }, 8, ["title", "body", "bodyProps"])) : c("", !0),
+                h.value ? (t(), p(j, {
                   key: 1,
                   variant: "secondary",
                   size: "xs",
-                  icon: "lucide:download",
+                  icon: v.value.has(n) ? "lucide:loader-2" : "lucide:download",
+                  loading: v.value.has(n),
                   class: "h-7 w-7 px-0 rounded-md shadow-sm",
-                  onClick: G((P) => U(e), ["stop"])
-                }, null, 8, ["onClick"])) : r("", !0)
+                  onClick: O((D) => A(e, n), ["stop"])
+                }, null, 8, ["icon", "loading", "onClick"])) : c("", !0)
               ], 2))
             ], 2),
-            g(e) || f(e) ? (t(), l("div", {
+            C(e) || k(e) ? (t(), s("div", {
               key: 0,
-              class: n(["vl-attachments-list__card-info p-3 flex flex-col min-w-0", R.value])
+              class: i(["vl-attachments-list__card-info p-3 flex flex-col min-w-0", Z.value])
             }, [
-              g(e) ? (t(), l("span", {
+              C(e) ? (t(), s("span", {
                 key: 0,
                 class: "vl-attachments-list__item-name text-sm font-medium truncate",
                 title: e.fileName
-              }, b(e.fileName), 9, ue)) : r("", !0),
-              f(e) ? (t(), l("span", ve, b(V(e.fileSize)), 1)) : r("", !0)
-            ], 2)) : r("", !0),
-            y.value && p.value ? (t(), u(C, {
+              }, z(e.fileName), 9, ye)) : c("", !0),
+              k(e) ? (t(), s("span", ge, z(F(e.fileSize)), 1)) : c("", !0)
+            ], 2)) : c("", !0),
+            b.value && y.value && _(e) ? (t(), p(P, {
               key: 1,
-              show: N.value === d,
-              title: e.fileName || c(v)("common.words.preview", "Preview"),
+              show: B.value === n,
+              title: e.fileName || d(w)("common.words.preview", "Preview"),
               "max-width": "max-w-3xl",
-              body: c(k),
+              body: d(I),
               bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value },
-              onClose: E
-            }, null, 8, ["show", "title", "body", "bodyProps"])) : r("", !0)
-          ], 10, de))), 128))
-        ], 2)) : (t(), l("div", {
+              onClose: G
+            }, null, 8, ["show", "title", "body", "bodyProps"])) : c("", !0)
+          ], 10, pe))), 128))
+        ], 2)) : (t(), s("div", {
           key: 1,
-          class: n(["vl-attachments-list__list flex flex-col gap-1.5", Y.value])
+          class: i(["vl-attachments-list__list flex flex-col gap-1.5", te.value])
         }, [
-          (t(!0), l(x, null, $(z.value, (e, d) => (t(), l("div", {
-            key: d,
-            class: n(["vl-attachments-list__item flex items-center justify-between transition-colors rounded-lg", [
-              w.value === "inline" ? "bg-[#79797924] hover:bg-[#7979793f]" : "border border-border bg-muted/20 hover:bg-muted/40",
+          (t(!0), s(x, null, L(S.value, (e, n) => (t(), s("div", {
+            key: n,
+            class: i(["vl-attachments-list__item flex items-center justify-between transition-colors rounded-lg", [
+              g.value === "inline" ? "bg-[#79797924] hover:bg-[#7979793f]" : "border border-border bg-muted/20 hover:bg-muted/40",
               m.value.item,
-              y.value && p.value ? "cursor-pointer select-none" : "",
-              Z.value
+              b.value && (y.value || h.value) ? "cursor-pointer select-none" : "",
+              ae.value
             ]]),
-            onClick: (P) => M(d)
+            onClick: (D) => W(n, e)
           }, [
-            B("div", he, [
-              B("div", {
-                class: n(["vl-attachments-list__item-icon-box flex items-center justify-center shrink-0 overflow-hidden relative", [
+            U("div", xe, [
+              U("div", {
+                class: i(["vl-attachments-list__item-icon-box flex items-center justify-center shrink-0 overflow-hidden relative", [
                   m.value.iconBox,
-                  w.value === "inline" ? "bg-[#79797924] hover:bg-[#7979793f]" : "bg-primary/10",
-                  ee.value
+                  g.value === "inline" ? "bg-[#79797924] hover:bg-[#7979793f]" : "bg-primary/10",
+                  se.value
                 ]])
               }, [
-                F(e) ? (t(), l("img", {
-                  key: 0,
+                v.value.has(n) ? (t(), s("div", fe, [
+                  N(f, {
+                    icon: "lucide:loader-2",
+                    class: i([m.value.icon, "text-primary animate-spin"])
+                  }, null, 8, ["class"])
+                ])) : c("", !0),
+                M(e) ? (t(), s("img", {
+                  key: 1,
                   src: e.thumbnailUrl || e.fileUrl,
                   class: "w-full h-full object-cover"
-                }, null, 8, we)) : (t(), u(D, {
-                  key: 1,
-                  icon: c(K)(e.fileName, e.fileUrl, e.fileType),
-                  class: n([m.value.icon, w.value === "inline" ? "opacity-75" : "text-primary"])
+                }, null, 8, _e)) : (t(), p(f, {
+                  key: 2,
+                  icon: d(R)(e.fileName, e.fileUrl, e.fileType),
+                  class: i([m.value.icon, g.value === "inline" ? "opacity-75" : "text-primary"])
                 }, null, 8, ["icon", "class"]))
               ], 2),
-              g(e) || f(e) ? (t(), l("div", ye, [
-                g(e) ? (t(), l("span", {
+              C(e) || k(e) ? (t(), s("div", Ce, [
+                C(e) ? (t(), s("span", {
                   key: 0,
-                  class: n(["vl-attachments-list__item-name font-medium truncate block", [
+                  class: i(["vl-attachments-list__item-name font-medium truncate block", [
                     m.value.text,
-                    w.value === "inline" ? "" : "text-foreground",
-                    te.value
+                    g.value === "inline" ? "" : "text-foreground",
+                    oe.value
                   ]]),
                   title: e.fileName
-                }, b(e.fileName), 11, xe)) : r("", !0),
-                f(e) ? (t(), l("span", {
+                }, z(e.fileName), 11, ke)) : c("", !0),
+                k(e) ? (t(), s("span", {
                   key: 1,
-                  class: n(["vl-attachments-list__item-size mt-0.5", [
+                  class: i(["vl-attachments-list__item-size mt-0.5", [
                     m.value.subtext,
-                    w.value === "inline" ? "opacity-50" : "text-muted-foreground",
-                    ae.value
+                    g.value === "inline" ? "opacity-50" : "text-muted-foreground",
+                    le.value
                   ]])
-                }, b(V(e.fileSize)), 3)) : r("", !0)
-              ])) : r("", !0)
+                }, z(F(e.fileSize)), 3)) : c("", !0)
+              ])) : c("", !0)
             ]),
-            le.value ? (t(), l("div", {
+            ue.value ? (t(), s("div", {
               key: 0,
-              class: n(["vl-attachments-list__item-actions flex items-center shrink-0 ml-2", [L.value !== "lg" ? "gap-0.5" : "gap-0", se.value]]),
-              onClick: _[0] || (_[0] = G(() => {
+              class: i(["vl-attachments-list__item-actions flex items-center shrink-0 ml-2", [E.value !== "lg" ? "gap-0.5" : "gap-0", ne.value]]),
+              onClick: u[0] || (u[0] = O(() => {
               }, ["stop"]))
             }, [
-              w.value === "inline" ? (t(), l(x, { key: 0 }, [
-                S.value ? (t(), u(C, {
+              g.value === "inline" ? (t(), s(x, { key: 0 }, [
+                T.value && _(e) ? (t(), p(P, {
                   key: 0,
-                  title: e.fileName || c(v)("common.words.preview", "Preview"),
+                  title: e.fileName || d(w)("common.words.preview", "Preview"),
                   "max-width": "max-w-3xl",
-                  body: c(k),
+                  body: d(I),
                   bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value }
                 }, {
-                  trigger: j(() => [
-                    B("button", {
+                  trigger: V(() => [
+                    U("button", {
                       type: "button",
-                      class: n(["inline-flex items-center justify-center rounded opacity-60 hover:opacity-100 bg-transparent! transition-all", m.value.actions]),
-                      "aria-label": c(v)("common.words.preview", "Preview")
+                      class: i(["inline-flex items-center justify-center rounded opacity-60 hover:opacity-100 bg-transparent! transition-all", m.value.actions]),
+                      "aria-label": d(w)("common.words.preview", "Preview")
                     }, [
-                      I(D, {
+                      N(f, {
                         icon: "lucide:eye",
-                        class: n(m.value.actionIcon)
+                        class: i(m.value.actionIcon)
                       }, null, 8, ["class"])
-                    ], 10, ge)
+                    ], 10, Ne)
                   ]),
                   _: 1
-                }, 8, ["title", "body", "bodyProps"])) : r("", !0),
-                T.value ? (t(), l("button", {
+                }, 8, ["title", "body", "bodyProps"])) : c("", !0),
+                $.value ? (t(), s("button", {
                   key: 1,
                   type: "button",
-                  class: n(["inline-flex items-center justify-center rounded opacity-60 hover:opacity-100 bg-transparent! transition-all", m.value.actions]),
-                  "aria-label": c(v)("common.words.download", "Download"),
-                  onClick: (P) => U(e)
+                  class: i(["inline-flex items-center justify-center rounded opacity-60 hover:opacity-100 bg-transparent! transition-all", m.value.actions]),
+                  "aria-label": d(w)("common.words.download", "Download"),
+                  onClick: (D) => A(e, n)
                 }, [
-                  I(D, {
+                  v.value.has(n) ? (t(), p(f, {
+                    key: 0,
+                    icon: "lucide:loader-2",
+                    class: i([m.value.actionIcon, "animate-spin"])
+                  }, null, 8, ["class"])) : (t(), p(f, {
+                    key: 1,
                     icon: "lucide:download",
-                    class: n(m.value.actionIcon)
-                  }, null, 8, ["class"])
-                ], 10, fe)) : r("", !0)
-              ], 64)) : (t(), l(x, { key: 1 }, [
-                S.value ? (t(), u(C, {
+                    class: i(m.value.actionIcon)
+                  }, null, 8, ["class"]))
+                ], 10, ze)) : c("", !0)
+              ], 64)) : (t(), s(x, { key: 1 }, [
+                T.value && _(e) ? (t(), p(P, {
                   key: 0,
-                  title: e.fileName || c(v)("common.words.preview", "Preview"),
+                  title: e.fileName || d(w)("common.words.preview", "Preview"),
                   "max-width": "max-w-3xl",
-                  body: c(k),
+                  body: d(I),
                   bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value }
                 }, {
-                  trigger: j(() => [
-                    I(A, {
+                  trigger: V(() => [
+                    N(j, {
                       variant: "ghost",
                       size: "xs",
-                      class: n([m.value.actions, "px-0"]),
+                      class: i([m.value.actions, "px-0"]),
                       icon: "lucide:eye"
                     }, null, 8, ["class"])
                   ]),
                   _: 1
-                }, 8, ["title", "body", "bodyProps"])) : r("", !0),
-                T.value ? (t(), u(A, {
+                }, 8, ["title", "body", "bodyProps"])) : c("", !0),
+                $.value ? (t(), p(j, {
                   key: 1,
                   variant: "ghost",
                   size: "xs",
-                  class: n([m.value.actions, "px-0"]),
-                  icon: "lucide:download",
-                  onClick: (P) => U(e)
-                }, null, 8, ["class", "onClick"])) : r("", !0)
+                  class: i([m.value.actions, "px-0"]),
+                  icon: v.value.has(n) ? "lucide:loader-2" : "lucide:download",
+                  loading: v.value.has(n),
+                  onClick: (D) => A(e, n)
+                }, null, 8, ["class", "icon", "loading", "onClick"])) : c("", !0)
               ], 64))
-            ], 2)) : r("", !0)
-          ], 10, pe))), 128)),
-          y.value && p.value ? (t(!0), l(x, { key: 0 }, $(z.value, (e, d) => (t(), u(C, {
-            key: `preview-${d}`,
-            show: N.value === d,
-            title: e.fileName || c(v)("common.words.preview", "Preview"),
-            "max-width": "max-w-3xl",
-            body: c(k),
-            bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value },
-            onClose: E
-          }, null, 8, ["show", "title", "body", "bodyProps"]))), 128)) : r("", !0)
+            ], 2)) : c("", !0)
+          ], 10, be))), 128)),
+          b.value ? (t(!0), s(x, { key: 0 }, L(S.value, (e, n) => (t(), s(x, {
+            key: `preview-${n}`
+          }, [
+            y.value && _(e) ? (t(), p(P, {
+              key: 0,
+              show: B.value === n,
+              title: e.fileName || d(w)("common.words.preview", "Preview"),
+              "max-width": "max-w-3xl",
+              body: d(I),
+              bodyProps: { url: e.fileUrl, name: e.fileName, canDownload: h.value },
+              onClose: G
+            }, null, 8, ["show", "title", "body", "bodyProps"])) : c("", !0)
+          ], 64))), 128)) : c("", !0)
         ], 2))
-      ], 64)) : (t(), l("div", {
+      ], 64)) : (t(), s("div", {
         key: 1,
-        class: n(["vl-attachments-list__empty text-sm text-muted-foreground italic bg-muted/10 p-4 rounded-lg border border-dashed border-border text-center", oe.value])
-      }, b(c(v)("common.words.noAttachments", "No attachments found.")), 3))
+        class: i(["vl-attachments-list__empty text-sm text-muted-foreground italic bg-muted/10 p-4 rounded-lg border border-dashed border-border text-center", ie.value])
+      }, z(d(w)("common.words.noAttachments", "No attachments found.")), 3))
     ], 2));
   }
 });
 export {
-  De as default
+  $e as default
 };

package/components/Avatar.vue.js

@@ -30,7 +30,7 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
     }), x = {
       xs: "h-6 w-6 text-[10px]",
       sm: "h-7.5 w-7.5 text-xs",
-      md: "h-10 w-10 text-sm",
+      md: "h-9.5 w-9.5 text-sm",
       lg: "h-14 w-14 text-base",
       xl: "h-18 w-18 text-lg",
       "2xl": "h-22 w-22 text-xl"