vlite3 0.3.1 → 0.3.4

package/components/FilePicker/FilePicker.vue.js

@@ -1,19 +1,19 @@
-import { defineComponent as K, ref as S, useSlots as O, computed as v, openBlock as a, createElementBlock as u, createElementVNode as s, renderSlot as q, normalizeClass as z, createBlock as y, withModifiers as D, createVNode as b, createTextVNode as H, toDisplayString as F, createCommentVNode as x, Fragment as J, renderList as Q } from "vue";
-import f from "../Icon.vue.js";
-import T from "../Button.vue.js";
-const X = { class: "w-full" }, Y = ["multiple", "accept"], Z = ["value", "placeholder", "disabled"], _ = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background" }, ee = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, le = { class: "space-y-1" }, te = {
+import { defineComponent as q, ref as F, useSlots as H, computed as y, openBlock as r, createElementBlock as c, createElementVNode as n, renderSlot as J, normalizeClass as S, createBlock as x, withModifiers as D, createVNode as k, createTextVNode as Q, toDisplayString as A, createCommentVNode as w, Fragment as X, renderList as Y } from "vue";
+import g from "../Icon.vue.js";
+import $ from "../Button.vue.js";
+const Z = { class: "w-full" }, _ = ["multiple", "accept"], ee = ["value", "placeholder", "disabled"], le = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background" }, te = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, ae = { class: "space-y-1" }, ie = {
   key: 0,
   class: "text-xs text-muted-foreground"
 }, oe = {
   key: 1,
   class: "space-y-2"
-}, ie = { class: "shrink-0 mr-3" }, re = { class: "p-2 bg-primary-light rounded text-primary-fg-light" }, ae = { class: "flex-1 min-w-0" }, ne = { class: "text-sm font-medium text-foreground truncate" }, se = { class: "text-xs text-muted-foreground" }, de = { class: "flex-shrink-0 ml-3 flex gap-2" }, ue = {
+}, re = { class: "shrink-0 mr-3" }, se = { class: "p-2 bg-primary-light rounded text-primary-fg-light" }, ne = { class: "flex-1 min-w-0" }, de = { class: "text-sm font-medium text-foreground truncate" }, ue = { class: "text-xs text-muted-foreground" }, ce = { class: "flex-shrink-0 ml-3 flex gap-2" }, fe = {
   key: 0,
   class: "flex gap-2"
-}, ce = {
+}, me = {
   key: 2,
   class: "absolute inset-0 bg-white/60 backdrop-blur-[1px] flex items-center justify-center rounded-lg z-10"
-}, fe = { class: "bg-white p-2 rounded-full shadow-lg" }, ve = /* @__PURE__ */ K({
+}, ge = { class: "bg-white p-2 rounded-full shadow-lg" }, ye = /* @__PURE__ */ q({
   name: "FilePicker",
   __name: "FilePicker",
   props: {
@@ -24,106 +24,126 @@ const X = { class: "w-full" }, Y = ["multiple", "accept"], Z = ["value", "placeh
     loading: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     maxSize: {},
+    maxFiles: {},
     variant: { default: "dropzone" },
     placeholder: {},
     size: { default: "md" },
     rounded: { default: "md" }
   },
   emits: ["update:modelValue", "change", "error"],
-  setup(o, { emit: B }) {
-    const e = o, c = B, C = S(null), m = S(!1), d = S(!1);
-    O();
-    const N = v(() => e.fileTypes.join(",")), k = v(() => Array.isArray(e.modelValue) ? e.modelValue.length > 0 : e.modelValue !== null), w = v(() => {
-      let t = [];
-      return Array.isArray(e.modelValue) ? t = e.modelValue : e.modelValue && (t = [e.modelValue]), t.map((l) => {
-        if (typeof l == "string") {
-          const r = l.split("/").pop() || "Unknown File";
+  setup(a, { emit: M }) {
+    const e = a, d = M, C = F(null), h = F(!1), u = F(!1);
+    H();
+    const N = y(() => e.fileTypes.join(",")), V = y(() => Array.isArray(e.modelValue) ? e.modelValue.length > 0 : e.modelValue !== null), b = y(() => {
+      let l = [];
+      return Array.isArray(e.modelValue) ? l = e.modelValue : e.modelValue && (l = [e.modelValue]), l.map((t) => {
+        if (typeof t == "string") {
+          const o = t.split("/").pop() || "Unknown File";
           return {
-            fileName: decodeURIComponent(r),
+            fileName: decodeURIComponent(o),
             fileType: "unknown",
             fileSize: 0,
             file: null,
-            base64: l,
+            base64: t,
             isUrl: !0
           };
         }
-        return l;
+        return t;
       });
-    }), g = () => {
-      e.disabled || e.loading || d.value || C.value?.click();
-    }, j = (t) => {
-      t.preventDefault(), !(e.disabled || e.loading) && (m.value = !0);
-    }, $ = (t) => {
-      t.preventDefault(), m.value = !1;
-    }, M = (t) => {
-      t.preventDefault(), m.value = !1, !(e.disabled || e.loading || d.value) && t.dataTransfer?.files && A(t.dataTransfer.files);
-    }, I = (t) => {
-      const l = t.target;
-      l.files && A(l.files), l.value = "";
-    }, L = (t) => {
-      if (t === 0 || !t) return "";
-      const l = 1024, r = ["Bytes", "KB", "MB", "GB", "TB"], n = Math.floor(Math.log(t) / Math.log(l));
-      return parseFloat((t / Math.pow(l, n)).toFixed(2)) + " " + r[n];
-    }, P = (t) => new Promise((l, r) => {
-      const n = new FileReader();
-      n.readAsDataURL(t), n.onload = () => {
-        typeof n.result == "string" ? l(n.result) : r(new Error("Failed to read file as base64"));
-      }, n.onerror = (p) => r(p);
-    }), A = async (t) => {
-      if (t.length === 0) return;
-      d.value = !0;
-      const l = [], r = [], n = Array.from(t), p = e.multiSelect ? n : [n[0]];
+    }), p = () => {
+      if (!(e.disabled || e.loading || u.value)) {
+        if (e.multiSelect && e.maxFiles && (Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0) >= e.maxFiles) {
+          d("error", `Maximum ${e.maxFiles} files allowed`);
+          return;
+        }
+        C.value?.click();
+      }
+    }, j = (l) => {
+      l.preventDefault(), !(e.disabled || e.loading) && (h.value = !0);
+    }, L = (l) => {
+      l.preventDefault(), h.value = !1;
+    }, I = (l) => {
+      l.preventDefault(), h.value = !1, !(e.disabled || e.loading || u.value) && l.dataTransfer?.files && z(l.dataTransfer.files);
+    }, P = (l) => {
+      const t = l.target;
+      t.files && z(t.files), t.value = "";
+    }, E = (l) => {
+      if (l === 0 || !l) return "";
+      const t = 1024, o = ["Bytes", "KB", "MB", "GB", "TB"], s = Math.floor(Math.log(l) / Math.log(t));
+      return parseFloat((l / Math.pow(t, s)).toFixed(2)) + " " + o[s];
+    }, U = (l) => new Promise((t, o) => {
+      const s = new FileReader();
+      s.readAsDataURL(l), s.onload = () => {
+        typeof s.result == "string" ? t(s.result) : o(new Error("Failed to read file as base64"));
+      }, s.onerror = (f) => o(f);
+    }), z = async (l) => {
+      if (l.length === 0) return;
+      u.value = !0;
+      const t = [], o = [], s = Array.from(l);
+      let f = e.multiSelect ? s : [s[0]];
+      if (e.multiSelect && e.maxFiles) {
+        const i = Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0, m = e.maxFiles - i;
+        if (m <= 0) {
+          d("error", `Maximum ${e.maxFiles} files allowed`), u.value = !1;
+          return;
+        }
+        f.length > m && (o.push(`Only ${m} more file(s) allowed. Maximum ${e.maxFiles} files.`), f = f.slice(0, m));
+      }
       try {
-        for (const i of p) {
-          if (e.fileTypes.length > 0 && !e.fileTypes.some((h) => {
-            if (h.startsWith("."))
-              return i.name.toLowerCase().endsWith(h.toLowerCase());
-            if (h.endsWith("/*")) {
-              const G = h.split("/")[0];
-              return i.type.startsWith(G);
+        for (const i of f) {
+          if (e.fileTypes.length > 0 && !e.fileTypes.some((v) => {
+            if (v.startsWith("."))
+              return i.name.toLowerCase().endsWith(v.toLowerCase());
+            if (v.endsWith("/*")) {
+              const K = v.split("/")[0];
+              return i.type.startsWith(K);
             }
-            return i.type === h;
+            return i.type === v;
           })) {
-            r.push(`File type not allowed: ${i.name}`);
+            o.push(`File type not allowed: ${i.name}`);
             continue;
           }
-          if (e.maxSize && i.size > e.maxSize) {
-            r.push(`File too large: ${i.name}`);
-            continue;
-          }
-          let V = "";
-          e.returnFormat === "base64" && (V = await P(i)), l.push({
+          let m = !1;
+          e.maxSize && i.size > e.maxSize && (o.push(`File too large: ${i.name}`), m = !0);
+          let T = "";
+          if (e.returnFormat === "base64" && !m)
+            try {
+              T = await U(i);
+            } catch (B) {
+              console.error("Base64 read failed", B);
+            }
+          t.push({
             fileName: i.name,
             fileType: i.type,
             fileSize: i.size,
             file: i,
-            base64: V
+            base64: T
           });
         }
-        if (r.length > 0 && c("error", r.join("; ")), l.length > 0) {
+        if (o.length > 0 && d("error", o.join("; ")), t.length > 0) {
           let i;
-          e.multiSelect ? i = [...Array.isArray(e.modelValue) ? e.modelValue : [], ...l] : i = l[0], c("update:modelValue", i), c("change", i);
+          e.multiSelect ? i = [...Array.isArray(e.modelValue) ? e.modelValue : e.modelValue ? [e.modelValue] : [], ...t] : i = t[0], d("update:modelValue", i), d("change", i);
         }
       } catch (i) {
-        console.error("Error processing files:", i), c("error", "Failed to process files");
+        console.error("Error processing files:", i), d("error", "Failed to process files");
       } finally {
-        d.value = !1;
+        u.value = !1;
       }
-    }, E = (t) => {
+    }, W = (l) => {
       if (!(e.disabled || e.loading))
         if (e.multiSelect && Array.isArray(e.modelValue)) {
-          const l = [...e.modelValue];
-          l.splice(t, 1), c("update:modelValue", l), c("change", l);
+          const t = [...e.modelValue];
+          t.splice(l, 1), d("update:modelValue", t), d("change", t);
         } else
-          c("update:modelValue", null), c("change", null);
-    }, U = () => {
-      e.disabled || e.loading || (c("update:modelValue", null), c("change", null));
-    }, W = v(() => k.value ? w.value.map((l) => l.fileName).join(", ") : ""), R = v(() => {
-      const t = "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", l = {
+          d("update:modelValue", null), d("change", null);
+    }, R = () => {
+      e.disabled || e.loading || (d("update:modelValue", null), d("change", null));
+    }, O = y(() => V.value ? b.value.map((t) => t.fileName).join(", ") : ""), G = y(() => {
+      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"
-      }, r = {
+      }, o = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded-md",
@@ -133,153 +153,153 @@ const X = { class: "w-full" }, Y = ["multiple", "accept"], Z = ["value", "placeh
         full: "rounded-full"
       };
       return [
-        t,
+        l,
         "border border-input focus-visible:border-primary",
         // Default outline style
-        l[e.size],
-        r[e.rounded],
+        t[e.size],
+        o[e.rounded],
         "pr-10",
         // Space for icon
         e.disabled ? "cursor-not-allowed opacity-50" : ""
       ].join(" ");
     });
-    return (t, l) => (a(), u("div", X, [
-      s("input", {
+    return (l, t) => (r(), c("div", Z, [
+      n("input", {
         ref_key: "fileInput",
         ref: C,
         type: "file",
-        multiple: o.multiSelect,
+        multiple: a.multiSelect,
         accept: N.value,
         class: "hidden",
-        onChange: I
-      }, null, 40, Y),
-      q(t.$slots, "trigger", {
-        trigger: g,
-        isDragging: m.value,
-        isLoading: o.loading || d.value,
-        files: w.value
+        onChange: P
+      }, null, 40, _),
+      J(l.$slots, "trigger", {
+        trigger: p,
+        isDragging: h.value,
+        isLoading: a.loading || u.value,
+        files: b.value
       }, () => [
-        o.variant === "input" ? (a(), u("div", {
+        a.variant === "input" ? (r(), c("div", {
           key: 0,
           class: "relative",
-          onClick: g
+          onClick: p
         }, [
-          s("input", {
+          n("input", {
             type: "text",
-            value: W.value,
-            placeholder: o.placeholder || "Select file...",
+            value: O.value,
+            placeholder: a.placeholder || "Select file...",
             readonly: "",
-            class: z(R.value),
-            disabled: o.disabled || o.loading || d.value
-          }, null, 10, Z),
-          s("div", _, [
-            o.loading || d.value ? (a(), y(f, {
+            class: S(G.value),
+            disabled: a.disabled || a.loading || u.value
+          }, null, 10, ee),
+          n("div", le, [
+            a.loading || u.value ? (r(), x(g, {
               key: 0,
               icon: "lucide:loader-2",
               class: "h-4 w-4 animate-spin text-muted-foreground"
-            })) : k.value && !o.disabled ? (a(), u("button", {
+            })) : V.value && !a.disabled ? (r(), c("button", {
               key: 1,
               type: "button",
               class: "text-muted-foreground hover:text-foreground focus:outline-none",
-              onClick: D(U, ["stop"])
+              onClick: D(R, ["stop"])
             }, [
-              b(f, {
+              k(g, {
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })
-            ])) : (a(), y(f, {
+            ])) : (r(), x(g, {
               key: 2,
               icon: "lucide:upload",
               class: "h-4 w-4 text-muted-foreground"
             }))
           ])
-        ])) : (a(), u("div", {
+        ])) : (r(), c("div", {
           key: 1,
           class: "relative",
           onDragover: j,
-          onDragleave: $,
-          onDrop: M
+          onDragleave: L,
+          onDrop: I
         }, [
-          k.value ? (a(), u("div", oe, [
-            (a(!0), u(J, null, Q(w.value, (r, n) => (a(), u("div", {
-              key: n,
-              class: z(["relative flex items-center p-3 border border-border rounded-lg bg-card shadow-sm transition-colors group", [!o.multiSelect && !o.disabled ? "cursor-pointer hover:border-primary/50" : ""]]),
-              onClick: l[0] || (l[0] = (p) => !o.multiSelect && !o.disabled ? g() : null)
+          V.value ? (r(), c("div", oe, [
+            (r(!0), c(X, null, Y(b.value, (o, s) => (r(), c("div", {
+              key: s,
+              class: S(["relative flex items-center p-3 border border-border rounded-lg bg-card shadow-sm transition-colors group", [!a.multiSelect && !a.disabled ? "cursor-pointer hover:border-primary/50" : ""]]),
+              onClick: t[0] || (t[0] = (f) => !a.multiSelect && !a.disabled ? p() : null)
             }, [
-              s("div", ie, [
-                s("div", re, [
-                  b(f, {
+              n("div", re, [
+                n("div", se, [
+                  k(g, {
                     icon: "lucide:file-text",
                     class: "w-5 h-5"
                   })
                 ])
               ]),
-              s("div", ae, [
-                s("p", ne, F(r.fileName), 1),
-                s("p", se, F(L(r.fileSize)), 1)
+              n("div", ne, [
+                n("p", de, A(o.fileName), 1),
+                n("p", ue, A(E(o.fileSize)), 1)
               ]),
-              s("div", de, [
-                !o.disabled && !o.loading ? (a(), y(T, {
+              n("div", ce, [
+                !a.disabled && !a.loading ? (r(), x($, {
                   key: 0,
                   size: "xs",
                   variant: "ghost",
                   icon: "lucide:x",
                   rounded: "full",
                   class: "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
-                  onClick: D((p) => E(n), ["stop"])
-                }, null, 8, ["onClick"])) : x("", !0)
+                  onClick: D((f) => W(s), ["stop"])
+                }, null, 8, ["onClick"])) : w("", !0)
               ])
             ], 2))), 128)),
-            o.multiSelect ? (a(), u("div", ue, [
-              b(T, {
+            a.multiSelect && (!a.maxFiles || b.value.length < a.maxFiles) ? (r(), c("div", fe, [
+              k($, {
                 size: "sm",
                 variant: "outline",
                 icon: "lucide:plus",
                 text: "Add more",
-                disabled: o.disabled || o.loading || d.value,
-                onClick: g
+                disabled: a.disabled || a.loading || u.value,
+                onClick: p
               }, null, 8, ["disabled"])
-            ])) : x("", !0)
-          ])) : (a(), u("div", {
+            ])) : w("", !0)
+          ])) : (r(), c("div", {
             key: 0,
-            class: z(["border-2 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", [
-              m.value ? "border-primary bg-primary/5" : "hover:border-primary/50 hover:bg-muted/50",
-              o.disabled || o.loading || d.value ? "opacity-50 cursor-not-allowed" : ""
+            class: S(["border-2 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", [
+              h.value ? "border-primary bg-primary/5" : "hover:border-primary/50 hover:bg-muted/50",
+              a.disabled || a.loading || u.value ? "opacity-50 cursor-not-allowed" : ""
             ]]),
-            onClick: g
+            onClick: p
           }, [
-            s("div", ee, [
-              o.loading || d.value ? (a(), y(f, {
+            n("div", te, [
+              a.loading || u.value ? (r(), x(g, {
                 key: 0,
                 icon: "lucide:loader-2",
                 class: "w-6 h-6 animate-spin"
-              })) : (a(), y(f, {
+              })) : (r(), x(g, {
                 key: 1,
                 icon: "lucide:upload-cloud",
                 class: "w-6 h-6"
               }))
             ]),
-            s("div", le, [
-              l[1] || (l[1] = s("p", { class: "text-sm font-medium text-foreground" }, [
-                s("span", { class: "text-primary hover:underline" }, "Click to upload"),
-                H(" or drag and drop ")
+            n("div", ae, [
+              t[1] || (t[1] = n("p", { class: "text-sm font-medium text-foreground" }, [
+                n("span", { class: "text-primary hover:underline" }, "Click to upload"),
+                Q(" or drag and drop ")
               ], -1)),
-              o.fileTypes.length ? (a(), u("p", te, F(o.fileTypes.join(", ")), 1)) : x("", !0)
+              a.fileTypes.length ? (r(), c("p", ie, A(a.fileTypes.join(", ")), 1)) : w("", !0)
             ])
           ], 2)),
-          o.loading || d.value ? (a(), u("div", ce, [
-            s("div", fe, [
-              b(f, {
+          a.loading || u.value ? (r(), c("div", me, [
+            n("div", ge, [
+              k(g, {
                 icon: "lucide:loader-2",
                 class: "w-6 h-6 animate-spin text-primary"
               })
             ])
-          ])) : x("", !0)
+          ])) : w("", !0)
         ], 32))
       ])
     ]));
   }
 });
 export {
-  ve as default
+  ye as default
 };