vlite3 1.4.40 → 1.4.41

package/components/AttachmentsList/AttachmentsList.vue.js

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