vlite3 1.4.3 → 1.4.5

package/components/FilePicker/FilePicker.vue.js

@@ -1,23 +1,32 @@
-import { defineComponent as te, computed as f, ref as $, useSlots as ie, openBlock as n, createElementBlock as m, createElementVNode as d, renderSlot as ae, normalizeClass as C, createBlock as h, withModifiers as V, createVNode as F, toDisplayString as y, createTextVNode as oe, createCommentVNode as T, Fragment as re, renderList as ne } from "vue";
-import p from "../Icon.vue.js";
-import P from "../Button.vue.js";
-import { $t as S } from "../../utils/i18n.js";
-const se = { class: "w-full" }, de = ["multiple", "accept", "data-testid"], ue = ["data-testid"], ce = ["value", "placeholder", "disabled"], fe = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background" }, me = ["data-testid"], ge = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, pe = { class: "space-y-1" }, ve = { class: "text-sm font-medium text-foreground" }, he = { class: "text-primary hover:underline" }, ye = {
+import { defineComponent as pe, computed as s, ref as N, useSlots as ge, onBeforeUnmount as ve, openBlock as r, createElementBlock as c, normalizeClass as k, createElementVNode as o, renderSlot as he, withKeys as q, withModifiers as w, createVNode as F, toDisplayString as g, createBlock as A, createCommentVNode as z, createTextVNode as ye, Fragment as xe, renderList as be } from "vue";
+import v from "../Icon.vue.js";
+import G from "../Button.vue.js";
+import { $t as C } from "../../utils/i18n.js";
+const ke = ["multiple", "accept", "data-testid"], we = ["data-testid"], Fe = ["aria-disabled", "aria-label", "onKeydown"], Ve = {
+  key: 0,
+  class: "flex min-w-0 flex-1 items-center gap-2.5"
+}, Se = ["src", "alt"], $e = { class: "min-w-0 flex-1" }, Ae = { class: "truncate font-medium leading-tight text-foreground" }, ze = { class: "truncate text-[11px] leading-tight text-muted-foreground" }, Ce = {
+  key: 1,
+  class: "flex min-w-0 flex-1 items-center gap-2 text-muted-foreground"
+}, Te = { class: "truncate" }, De = {
+  key: 0,
+  class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background"
+}, Ne = ["data-testid"], je = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, Pe = { class: "space-y-1" }, Be = { class: "text-sm font-medium text-foreground" }, Ue = { class: "text-primary hover:underline" }, Ie = {
   key: 0,
   class: "text-xs text-muted-foreground"
-}, be = {
+}, Me = {
   key: 1,
   class: "space-y-2"
-}, xe = { class: "shrink-0 mr-3" }, ke = { class: "p-2 bg-primary-light rounded text-primary-fg-light" }, we = { class: "flex-1 min-w-0 flex flex-col items-start overflow-hidden" }, Ve = {
+}, Le = { class: "shrink-0 mr-3" }, Re = { class: "p-2 bg-primary-light rounded text-primary-fg-light" }, We = { class: "flex-1 min-w-0 flex flex-col items-start overflow-hidden" }, Ee = {
   key: 0,
   class: "inline-flex items-center group/rename w-fit max-w-full mb-0.5"
-}, Fe = { class: "grid relative w-fit max-w-full items-center -ml-1" }, Se = { class: "invisible whitespace-pre col-start-1 row-start-1 text-sm font-medium px-1 py-0.5 max-w-full overflow-hidden text-ellipsis" }, Ae = ["value", "onInput", "placeholder"], $e = ["title"], Ce = {
+}, Ke = { class: "grid relative w-fit max-w-full items-center -ml-1" }, Oe = { class: "invisible whitespace-pre col-start-1 row-start-1 text-sm font-medium px-1 py-0.5 max-w-full overflow-hidden text-ellipsis" }, qe = ["value", "onInput", "placeholder"], Ge = ["title"], He = {
   key: 1,
   class: "text-sm font-medium text-foreground truncate w-full"
-}, Te = { class: "text-xs text-muted-foreground -mt-1" }, ze = { class: "shrink-0 ml-3 flex gap-2 items-center" }, De = {
+}, Je = { class: "text-xs text-muted-foreground -mt-1" }, Qe = { class: "shrink-0 ml-3 flex gap-2 items-center" }, Xe = {
   key: 0,
   class: "flex gap-2"
-}, Me = /* @__PURE__ */ te({
+}, tt = /* @__PURE__ */ pe({
   name: "FilePicker",
   __name: "FilePicker",
   props: {
@@ -38,141 +47,176 @@ const se = { class: "w-full" }, de = ["multiple", "accept", "data-testid"], ue =
     allowRename: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change", "error"],
-  setup(a, { emit: M }) {
-    const e = a, u = M, v = (l, t, i) => {
-      const r = i ? S(l, i) : S(l);
-      return r !== l ? r : t;
-    }, j = f(
-      () => e.placeholderI18n ? S(e.placeholderI18n) : e.placeholder !== void 0 ? e.placeholder : v("vlite.filePicker.selectFile", "Select file...")
-    ), U = f(() => e.textI18n ? S(e.textI18n) : v("vlite.filePicker.clickToUpload", "Click to upload")), E = f(() => v("vlite.filePicker.dragAndDrop", "or drag and drop")), R = f(() => v("vlite.filePicker.addMore", "Add more")), L = f(() => v("vlite.filePicker.unknownFile", "Unknown File")), z = f(() => v("vlite.filePicker.enterFileName", "Enter file name")), W = f(() => v("vlite.filePicker.renameFile", "Rename file")), D = $(null), b = $(!1), s = $(!1);
-    ie();
-    const O = f(() => e.fileTypes.join(",")), A = f(() => Array.isArray(e.modelValue) ? e.modelValue.length > 0 : e.modelValue !== null), w = f(() => {
-      let l = [];
-      return Array.isArray(e.modelValue) ? l = e.modelValue : e.modelValue && (l = [e.modelValue]), l.map((t) => {
-        if (typeof t == "string") {
-          const i = t.split("/").pop() || L.value;
+  setup(a, { emit: H }) {
+    const t = a, f = H, p = (e, l, i) => {
+      const d = i ? C(e, i) : C(e);
+      return d !== e ? d : l;
+    }, j = s(
+      () => t.placeholderI18n ? C(t.placeholderI18n) : t.placeholder !== void 0 ? t.placeholder : p("vlite.filePicker.selectFile", "Select file...")
+    ), J = s(() => t.textI18n ? C(t.textI18n) : p("vlite.filePicker.clickToUpload", "Click to upload")), Q = s(() => p("vlite.filePicker.dragAndDrop", "or drag and drop")), X = s(() => p("vlite.filePicker.addMore", "Add more")), T = s(() => p("vlite.filePicker.unknownFile", "Unknown File")), P = s(() => p("vlite.filePicker.enterFileName", "Enter file name")), Y = s(() => p("vlite.filePicker.renameFile", "Rename file"));
+    s(() => p("vlite.filePicker.emptyTitle", "No file selected")), s(
+      () => p("vlite.filePicker.emptyDescription", "Drop a file here or browse from your device")
+    );
+    const B = N(null), V = N(!1), u = N(!1), U = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new Set();
+    ge();
+    const Z = s(() => t.fileTypes.join(",")), b = s(() => Array.isArray(t.modelValue) ? t.modelValue.length > 0 : t.modelValue !== null), y = s(() => {
+      let e = [];
+      return Array.isArray(t.modelValue) ? e = t.modelValue : t.modelValue && (e = [t.modelValue]), e.map((l) => {
+        if (typeof l == "string") {
+          const i = l.split("/").pop() || T.value;
           return {
             fileName: decodeURIComponent(i),
             fileType: "unknown",
             fileSize: 0,
             file: null,
-            base64: t,
+            base64: l,
             isUrl: !0
           };
         }
-        return t;
+        return l;
       });
     }), x = () => {
-      if (!(e.disabled || e.loading || s.value)) {
-        if (e.multiSelect && e.maxFiles && (Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0) >= e.maxFiles) {
-          u("error", `Maximum ${e.maxFiles} files allowed`);
+      if (!(t.disabled || t.loading || u.value)) {
+        if (t.multiSelect && t.maxFiles && (Array.isArray(t.modelValue) ? t.modelValue.length : t.modelValue ? 1 : 0) >= t.maxFiles) {
+          f("error", `Maximum ${t.maxFiles} files allowed`);
           return;
         }
-        D.value?.click();
+        B.value?.click();
       }
-    }, q = (l) => {
-      l.preventDefault(), !(e.disabled || e.loading) && (b.value = !0);
-    }, G = (l) => {
-      l.preventDefault(), b.value = !1;
-    }, K = (l) => {
-      l.preventDefault(), b.value = !1, !(e.disabled || e.loading || s.value) && l.dataTransfer?.files && B(l.dataTransfer.files);
-    }, H = (l) => {
-      const t = l.target;
-      t.files && B(t.files), t.value = "";
-    }, J = (l) => {
-      if (l === 0 || !l) return "";
-      const t = 1024, i = ["Bytes", "KB", "MB", "GB", "TB"], r = Math.floor(Math.log(l) / Math.log(t));
-      return parseFloat((l / Math.pow(t, r)).toFixed(2)) + " " + i[r];
-    }, Q = (l) => new Promise((t, i) => {
-      const r = new FileReader();
-      r.readAsDataURL(l), r.onload = () => {
-        typeof r.result == "string" ? t(r.result) : i(new Error("Failed to read file as base64"));
-      }, r.onerror = (c) => i(c);
-    }), B = async (l) => {
-      if (l.length === 0) return;
-      s.value = !0;
-      const t = [], i = [], r = Array.from(l);
-      let c = e.multiSelect ? r : [r[0]];
-      if (e.multiSelect && e.maxFiles) {
-        const o = Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0, g = e.maxFiles - o;
-        if (g <= 0) {
-          u("error", `Maximum ${e.maxFiles} files allowed`), s.value = !1;
+    }, _ = (e) => {
+      e.preventDefault(), !(t.disabled || t.loading) && (V.value = !0);
+    }, ee = (e) => {
+      e.preventDefault(), V.value = !1;
+    }, te = (e) => {
+      e.preventDefault(), V.value = !1, !(t.disabled || t.loading || u.value) && e.dataTransfer?.files && W(e.dataTransfer.files);
+    }, le = (e) => {
+      const l = e.target;
+      l.files && W(l.files), l.value = "";
+    }, I = (e) => {
+      if (e === 0 || !e) return "";
+      const l = 1024, i = ["Bytes", "KB", "MB", "GB", "TB"], d = Math.floor(Math.log(e) / Math.log(l));
+      return parseFloat((e / Math.pow(l, d)).toFixed(2)) + " " + i[d];
+    }, M = (e = "") => e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase() || "", L = (e) => {
+      const l = e.fileType || "", i = M(e.fileName || e.base64 || "");
+      return l.startsWith("image/") || e.base64?.startsWith("data:image/") || ["apng", "avif", "gif", "jpg", "jpeg", "png", "svg", "webp"].includes(i);
+    }, R = (e) => {
+      if (!L(e)) return "";
+      if (e.base64?.startsWith("data:image/") || e.isUrl) return e.base64;
+      if (typeof File < "u" && e.file instanceof File) {
+        const l = U.get(e.file);
+        if (l) return l;
+        const i = URL.createObjectURL(e.file);
+        return U.set(e.file, i), D.add(i), i;
+      }
+      return "";
+    }, ie = (e) => {
+      const l = e.fileType || "", i = M(e.fileName || e.base64 || "");
+      return L(e) ? "lucide:image" : l.includes("pdf") || i === "pdf" || l.includes("word") || l.includes("document") || ["doc", "docx", "odt", "rtf"].includes(i) ? "lucide:file-text" : l.includes("spreadsheet") || l.includes("excel") || ["csv", "xls", "xlsx", "ods"].includes(i) ? "lucide:table" : l.includes("presentation") || ["ppt", "pptx", "odp", "key"].includes(i) ? "lucide:presentation" : l.startsWith("video/") || ["mp4", "mov", "webm", "avi", "mkv"].includes(i) ? "lucide:file-video" : l.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a"].includes(i) ? "lucide:file-audio" : ["zip", "rar", "7z", "tar", "gz"].includes(i) ? "lucide:file-archive" : ["js", "ts", "vue", "html", "css", "json", "xml"].includes(i) ? "lucide:file-code" : "lucide:file";
+    }, ae = s(() => t.fileTypes.join(", ")), re = (e) => new Promise((l, i) => {
+      const d = new FileReader();
+      d.readAsDataURL(e), d.onload = () => {
+        typeof d.result == "string" ? l(d.result) : i(new Error("Failed to read file as base64"));
+      }, d.onerror = (m) => i(m);
+    });
+    ve(() => {
+      D.forEach((e) => URL.revokeObjectURL(e)), D.clear();
+    });
+    const W = async (e) => {
+      if (e.length === 0) return;
+      u.value = !0;
+      const l = [], i = [], d = Array.from(e);
+      let m = t.multiSelect ? d : [d[0]];
+      if (t.multiSelect && t.maxFiles) {
+        const n = Array.isArray(t.modelValue) ? t.modelValue.length : t.modelValue ? 1 : 0, h = t.maxFiles - n;
+        if (h <= 0) {
+          f("error", `Maximum ${t.maxFiles} files allowed`), u.value = !1;
           return;
         }
-        c.length > g && (i.push(`Only ${g} more file(s) allowed. Maximum ${e.maxFiles} files.`), c = c.slice(0, g));
+        m.length > h && (i.push(`Only ${h} more file(s) allowed. Maximum ${t.maxFiles} files.`), m = m.slice(0, h));
       }
       try {
-        for (const o of c) {
-          if (e.fileTypes.length > 0 && !e.fileTypes.some((k) => {
-            if (k.startsWith("."))
-              return o.name.toLowerCase().endsWith(k.toLowerCase());
-            if (k.endsWith("/*")) {
-              const le = k.split("/")[0];
-              return o.type.startsWith(le);
+        for (const n of m) {
+          if (t.fileTypes.length > 0 && !t.fileTypes.some(($) => {
+            if ($.startsWith("."))
+              return n.name.toLowerCase().endsWith($.toLowerCase());
+            if ($.endsWith("/*")) {
+              const me = $.split("/")[0];
+              return n.type.startsWith(me);
             }
-            return o.type === k;
+            return n.type === $;
           })) {
-            i.push(`File type not allowed: ${o.name}`);
+            i.push(`File type not allowed: ${n.name}`);
             continue;
           }
-          let g = !1;
-          e.maxSize && o.size > e.maxSize && (i.push(`File too large: ${o.name}`), g = !0);
-          let N = "";
-          if (e.returnFormat === "base64" && !g)
+          let h = !1;
+          t.maxSize && n.size > t.maxSize && (i.push(`File too large: ${n.name}`), h = !0);
+          let K = "";
+          if (t.returnFormat === "base64" && !h)
             try {
-              N = await Q(o);
-            } catch (I) {
-              console.error("Base64 read failed", I);
+              K = await re(n);
+            } catch (O) {
+              console.error("Base64 read failed", O);
             }
-          t.push({
-            fileName: o.name,
-            fileType: o.type,
-            fileSize: o.size,
-            file: o,
-            base64: N
+          l.push({
+            fileName: n.name,
+            fileType: n.type,
+            fileSize: n.size,
+            file: n,
+            base64: K
           });
         }
-        if (i.length > 0 && u("error", i.join("; ")), t.length > 0) {
-          let o;
-          e.multiSelect ? o = [...Array.isArray(e.modelValue) ? e.modelValue : e.modelValue ? [e.modelValue] : [], ...t] : o = t[0], u("update:modelValue", o), u("change", o);
+        if (i.length > 0 && f("error", i.join("; ")), l.length > 0) {
+          let n;
+          t.multiSelect ? n = [...Array.isArray(t.modelValue) ? t.modelValue : t.modelValue ? [t.modelValue] : [], ...l] : n = l[0], f("update:modelValue", n), f("change", n);
         }
-      } catch (o) {
-        console.error("Error processing files:", o), u("error", "Failed to process files");
+      } catch (n) {
+        console.error("Error processing files:", n), f("error", "Failed to process files");
       } finally {
-        s.value = !1;
+        u.value = !1;
       }
-    }, X = (l) => {
-      if (!(e.disabled || e.loading))
-        if (e.multiSelect && Array.isArray(e.modelValue)) {
-          const t = [...e.modelValue];
-          t.splice(l, 1), u("update:modelValue", t), u("change", t);
+    }, ne = (e) => {
+      if (!(t.disabled || t.loading))
+        if (t.multiSelect && Array.isArray(t.modelValue)) {
+          const l = [...t.modelValue];
+          l.splice(e, 1), f("update:modelValue", l), f("change", l);
         } else
-          u("update:modelValue", null), u("change", null);
-    }, Y = () => {
-      e.disabled || e.loading || (u("update:modelValue", null), u("change", null));
-    }, Z = (l, t) => {
-      if (e.disabled || e.loading || s.value) return;
+          f("update:modelValue", null), f("change", null);
+    }, se = () => {
+      t.disabled || t.loading || (f("update:modelValue", null), f("change", null));
+    }, oe = (e, l) => {
+      if (t.disabled || t.loading || u.value) return;
       let i;
-      e.multiSelect && Array.isArray(e.modelValue) ? (i = [...e.modelValue], typeof i[l] == "object" && i[l] !== null ? i[l] = { ...i[l], fileName: t } : typeof i[l] == "string" && (i[l] = {
-        fileName: t,
+      t.multiSelect && Array.isArray(t.modelValue) ? (i = [...t.modelValue], typeof i[e] == "object" && i[e] !== null ? i[e] = { ...i[e], fileName: l } : typeof i[e] == "string" && (i[e] = {
+        fileName: l,
         fileType: "unknown",
         fileSize: 0,
         file: null,
-        base64: i[l],
+        base64: i[e],
         isUrl: !0
-      })) : e.modelValue && typeof e.modelValue == "object" && !Array.isArray(e.modelValue) ? i = { ...e.modelValue, fileName: t } : typeof e.modelValue == "string" && (i = {
-        fileName: t,
+      })) : t.modelValue && typeof t.modelValue == "object" && !Array.isArray(t.modelValue) ? i = { ...t.modelValue, fileName: l } : typeof t.modelValue == "string" && (i = {
+        fileName: l,
         fileType: "unknown",
         fileSize: 0,
         file: null,
-        base64: e.modelValue,
+        base64: t.modelValue,
         isUrl: !0
-      }), i !== void 0 && (u("update:modelValue", i), u("change", i));
-    }, _ = f(() => A.value ? w.value.map((t) => t.fileName).join(", ") : ""), ee = f(() => {
-      const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 transition-all focus-visible:outline-none cursor-pointer", t = {
-        sm: "h-8 text-xs",
-        md: "h-10 text-sm",
-        lg: "h-12 text-base"
+      }), i !== void 0 && (f("update:modelValue", i), f("change", i));
+    }, de = s(() => b.value ? y.value.map((l) => l.fileName).join(", ") : ""), S = s(() => y.value[0]), ue = s(() => {
+      if (!b.value) return "";
+      const e = y.value, l = e[0]?.fileName || T.value;
+      return !t.multiSelect || e.length <= 1 ? l : `${l} +${e.length - 1}`;
+    }), ce = s(() => {
+      const e = y.value;
+      if (!e.length) return ae.value;
+      if (t.multiSelect && e.length > 1)
+        return `${e.length} files selected`;
+      const l = e[0];
+      return I(l.fileSize) || l.fileType || T.value;
+    }), fe = s(() => {
+      const e = "group flex w-full items-center bg-background text-sm ring-offset-background transition-all focus-visible:outline-none cursor-pointer", l = {
+        sm: "min-h-8 px-2 py-1 text-xs gap-2",
+        md: "min-h-10 px-3 py-1.5 text-sm gap-2.5",
+        lg: "min-h-12 px-3 py-2 text-base gap-3"
       }, i = {
         none: "rounded-none",
         sm: "rounded-sm",
@@ -183,179 +227,211 @@ const se = { class: "w-full" }, de = ["multiple", "accept", "data-testid"], ue =
         full: "rounded-full"
       };
       return [
-        l,
+        e,
         "border border-input focus-visible:border-primary",
         // Default outline style
-        t[e.size],
-        i[e.rounded],
-        "pr-10",
-        // Space for icon
-        e.disabled ? "cursor-not-allowed opacity-50" : ""
+        l[t.size],
+        i[t.rounded],
+        "pr-10 text-left",
+        // Space for action icon
+        t.disabled ? "cursor-not-allowed opacity-50" : ""
       ].join(" ");
-    });
-    return (l, t) => (n(), m("div", se, [
-      d("input", {
+    }), E = s(() => ({
+      sm: "h-6 w-6 rounded",
+      md: "h-7 w-7 rounded-md",
+      lg: "h-8 w-8 rounded-md"
+    })[t.size]);
+    return (e, l) => (r(), c("div", {
+      class: k(["vl-file-picker w-full", { "vl-file-picker--input": a.variant === "input" }])
+    }, [
+      o("input", {
         ref_key: "fileInput",
-        ref: D,
+        ref: B,
         type: "file",
         multiple: a.multiSelect,
-        accept: O.value,
+        accept: Z.value,
         class: "hidden",
-        "data-testid": l.$attrs["data-testid"] ? `${l.$attrs["data-testid"]}-input` : l.$attrs.name ? `filepicker-input-${l.$attrs.name}` : "filepicker-input",
-        onChange: H
-      }, null, 40, de),
-      ae(l.$slots, "trigger", {
+        "data-testid": e.$attrs["data-testid"] ? `${e.$attrs["data-testid"]}-input` : e.$attrs.name ? `filepicker-input-${e.$attrs.name}` : "filepicker-input",
+        onChange: le
+      }, null, 40, ke),
+      he(e.$slots, "trigger", {
         trigger: x,
-        isDragging: b.value,
-        isLoading: a.loading || s.value,
-        files: w.value
+        isDragging: V.value,
+        isLoading: a.loading || u.value,
+        files: y.value
       }, () => [
-        a.variant === "input" ? (n(), m("div", {
+        a.variant === "input" ? (r(), c("div", {
           key: 0,
           class: "relative",
-          onClick: x,
-          "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `filepicker-${l.$attrs.name}` : "filepicker")
+          "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `filepicker-${e.$attrs.name}` : "filepicker")
         }, [
-          d("input", {
-            type: "text",
-            value: _.value,
-            placeholder: j.value,
-            readonly: "",
-            class: C(ee.value),
-            disabled: a.disabled || a.loading || s.value
-          }, null, 10, ce),
-          d("div", fe, [
-            a.loading || s.value ? (n(), h(p, {
+          o("div", {
+            role: "button",
+            tabindex: "0",
+            "aria-disabled": a.disabled || a.loading || u.value,
+            "aria-label": de.value || j.value,
+            class: k(fe.value),
+            onClick: x,
+            onKeydown: [
+              q(w(x, ["prevent"]), ["enter"]),
+              q(w(x, ["prevent"]), ["space"])
+            ]
+          }, [
+            b.value && S.value ? (r(), c("div", Ve, [
+              R(S.value) ? (r(), c("img", {
+                key: 0,
+                src: R(S.value),
+                alt: S.value.fileName,
+                class: k(["shrink-0 border border-border bg-muted object-cover", E.value])
+              }, null, 10, Se)) : (r(), c("div", {
+                key: 1,
+                class: k(["shrink-0 border border-primary/15 bg-primary/10 text-primary flex items-center justify-center", E.value])
+              }, [
+                F(v, {
+                  icon: ie(S.value),
+                  class: "h-4 w-4"
+                }, null, 8, ["icon"])
+              ], 2)),
+              o("div", $e, [
+                o("p", Ae, g(ue.value), 1),
+                o("p", ze, g(ce.value), 1)
+              ])
+            ])) : (r(), c("div", Ce, [
+              F(v, {
+                icon: "lucide:upload",
+                class: "h-4 w-4 shrink-0"
+              }),
+              o("span", Te, g(j.value), 1)
+            ]))
+          ], 42, Fe),
+          a.loading || u.value || b.value && !a.disabled ? (r(), c("div", De, [
+            a.loading || u.value ? (r(), A(v, {
               key: 0,
               icon: "lucide:loader-2",
               class: "h-4 w-4 animate-spin text-muted-foreground"
-            })) : A.value && !a.disabled ? (n(), m("button", {
+            })) : b.value && !a.disabled ? (r(), c("button", {
               key: 1,
               type: "button",
               class: "text-muted-foreground hover:text-foreground focus:outline-none",
-              onClick: V(Y, ["stop"])
+              onClick: w(se, ["stop"])
             }, [
-              F(p, {
+              F(v, {
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })
-            ])) : (n(), h(p, {
-              key: 2,
-              icon: "lucide:upload",
-              class: "h-4 w-4 text-muted-foreground"
-            }))
-          ])
-        ], 8, ue)) : (n(), m("div", {
+            ])) : z("", !0)
+          ])) : z("", !0)
+        ], 8, we)) : (r(), c("div", {
           key: 1,
           class: "relative",
-          onDragover: q,
-          onDragleave: G,
-          onDrop: K,
-          "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `filepicker-${l.$attrs.name}` : "filepicker")
+          onDragover: _,
+          onDragleave: ee,
+          onDrop: te,
+          "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `filepicker-${e.$attrs.name}` : "filepicker")
         }, [
-          A.value ? (n(), m("div", be, [
-            (n(!0), m(re, null, ne(w.value, (i, r) => (n(), m("div", {
-              key: r,
-              class: C(["relative flex items-center p-3 border border-border rounded-lg bg-body transition-colors group", [
-                !a.multiSelect && !a.disabled && !a.loading && !s.value ? "cursor-pointer hover:border-primary/50" : ""
+          b.value ? (r(), c("div", Me, [
+            (r(!0), c(xe, null, be(y.value, (i, d) => (r(), c("div", {
+              key: d,
+              class: k(["relative flex items-center p-3 border border-border rounded-lg bg-body transition-colors group", [
+                !a.multiSelect && !a.disabled && !a.loading && !u.value ? "cursor-pointer hover:border-primary/50" : ""
               ]]),
-              onClick: t[2] || (t[2] = (c) => !a.multiSelect && !a.disabled && !a.loading && !s.value ? x() : null)
+              onClick: l[2] || (l[2] = (m) => !a.multiSelect && !a.disabled && !a.loading && !u.value ? x() : null)
             }, [
-              d("div", xe, [
-                d("div", ke, [
-                  F(p, {
+              o("div", Le, [
+                o("div", Re, [
+                  F(v, {
                     icon: "lucide:file-text",
                     class: "w-5 h-5"
                   })
                 ])
               ]),
-              d("div", we, [
-                a.allowRename && !a.disabled && !a.loading && !s.value ? (n(), m("div", Ve, [
-                  d("div", Fe, [
-                    d("span", Se, y(i.fileName || z.value), 1),
-                    d("input", {
+              o("div", We, [
+                a.allowRename && !a.disabled && !a.loading && !u.value ? (r(), c("div", Ee, [
+                  o("div", Ke, [
+                    o("span", Oe, g(i.fileName || P.value), 1),
+                    o("input", {
                       value: i.fileName,
-                      onClick: t[0] || (t[0] = V(() => {
+                      onClick: l[0] || (l[0] = w(() => {
                       }, ["stop"])),
-                      onInput: (c) => Z(r, c.target.value),
+                      onInput: (m) => oe(d, m.target.value),
                       class: "col-start-1 row-start-1 w-auto min-w-[2ch] text-sm font-medium text-foreground bg-transparent border-b border-transparent hover:border-border focus:border-primary outline-none transition-colors py-0.5 px-1",
-                      placeholder: z.value
-                    }, null, 40, Ae)
+                      placeholder: P.value
+                    }, null, 40, qe)
                   ]),
-                  d("div", {
+                  o("div", {
                     class: "shrink-0 ml-1 text-muted-foreground/50 group-hover/rename:text-foreground transition-colors cursor-text",
-                    onClick: t[1] || (t[1] = V(
-                      (c) => c.currentTarget.previousElementSibling?.querySelector("input")?.focus(),
+                    onClick: l[1] || (l[1] = w(
+                      (m) => m.currentTarget.previousElementSibling?.querySelector("input")?.focus(),
                       ["stop"]
                     )),
-                    title: W.value
+                    title: Y.value
                   }, [
-                    F(p, {
+                    F(v, {
                       icon: "lucide:pencil",
                       class: "w-3 h-3"
                     })
-                  ], 8, $e)
-                ])) : (n(), m("p", Ce, y(i.fileName), 1)),
-                d("p", Te, y(J(i.fileSize)), 1)
+                  ], 8, Ge)
+                ])) : (r(), c("p", He, g(i.fileName), 1)),
+                o("p", Je, g(I(i.fileSize)), 1)
               ]),
-              d("div", ze, [
-                a.loading || s.value ? (n(), h(p, {
+              o("div", Qe, [
+                a.loading || u.value ? (r(), A(v, {
                   key: 0,
                   icon: "lucide:loader-2",
                   class: "w-4 h-4 animate-spin text-primary"
-                })) : a.disabled ? T("", !0) : (n(), h(P, {
+                })) : a.disabled ? z("", !0) : (r(), A(G, {
                   key: 1,
                   size: "xs",
                   variant: "ghost",
                   icon: "lucide:x",
                   rounded: "full",
                   class: "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
-                  onClick: V((c) => X(r), ["stop"])
+                  onClick: w((m) => ne(d), ["stop"])
                 }, null, 8, ["onClick"]))
               ])
             ], 2))), 128)),
-            a.multiSelect && (!a.maxFiles || w.value.length < a.maxFiles) ? (n(), m("div", De, [
-              F(P, {
+            a.multiSelect && (!a.maxFiles || y.value.length < a.maxFiles) ? (r(), c("div", Xe, [
+              F(G, {
                 size: "sm",
                 variant: "outline",
                 icon: "lucide:plus",
-                text: R.value,
-                disabled: a.disabled || a.loading || s.value,
+                text: X.value,
+                disabled: a.disabled || a.loading || u.value,
                 onClick: x
               }, null, 8, ["text", "disabled"])
-            ])) : T("", !0)
-          ])) : (n(), m("div", {
+            ])) : z("", !0)
+          ])) : (r(), c("div", {
             key: 0,
-            class: C(["border-2 bg-body border-dashed border-border rounded-lg p-6 transition-all duration-200 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center gap-2", [
-              b.value ? "border-primary bg-primary/5" : "hover:border-primary/50 ",
-              a.disabled || a.loading || s.value ? "opacity-50 cursor-not-allowed" : ""
+            class: k(["border-2 bg-body border-dashed border-border rounded-lg p-6 transition-all duration-200 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center gap-2", [
+              V.value ? "border-primary bg-primary/5" : "hover:border-primary/50 ",
+              a.disabled || a.loading || u.value ? "opacity-50 cursor-not-allowed" : ""
             ]]),
             onClick: x
           }, [
-            d("div", ge, [
-              a.loading || s.value ? (n(), h(p, {
+            o("div", je, [
+              a.loading || u.value ? (r(), A(v, {
                 key: 0,
                 icon: "lucide:loader-2",
                 class: "w-6 h-6 animate-spin"
-              })) : (n(), h(p, {
+              })) : (r(), A(v, {
                 key: 1,
                 icon: "lucide:upload-cloud",
                 class: "w-6 h-6"
               }))
             ]),
-            d("div", pe, [
-              d("p", ve, [
-                d("span", he, y(U.value), 1),
-                oe(" " + y(E.value), 1)
+            o("div", Pe, [
+              o("p", Be, [
+                o("span", Ue, g(J.value), 1),
+                ye(" " + g(Q.value), 1)
               ]),
-              a.fileTypes.length ? (n(), m("p", ye, y(a.fileTypes.join(", ")), 1)) : T("", !0)
+              a.fileTypes.length ? (r(), c("p", Ie, g(a.fileTypes.join(", ")), 1)) : z("", !0)
             ])
           ], 2))
-        ], 40, me))
+        ], 40, Ne))
       ])
-    ]));
+    ], 2));
   }
 });
 export {
-  Me as default
+  tt as default
 };