vlite3 1.4.5 → 1.4.7

package/components/FilePicker/FilePickerInput.vue.js

@@ -0,0 +1,147 @@
+import { defineComponent as w, computed as o, openBlock as s, createElementBlock as r, createElementVNode as a, withKeys as y, withModifiers as c, normalizeClass as u, createVNode as m, unref as k, toDisplayString as g, createBlock as F, createCommentVNode as x } from "vue";
+import d from "../Icon.vue.js";
+import { formatFileSize as S, getFileIcon as p } from "./utils.js";
+const z = { class: "relative" }, C = ["aria-disabled", "aria-label", "data-testid"], P = {
+  key: 0,
+  class: "flex min-w-0 flex-1 items-center gap-2.5"
+}, T = ["src", "alt"], B = { class: "min-w-0 flex-1 flex flex-col contain-inline-size" }, V = { class: "truncate min-w-0 font-medium leading-tight text-foreground" }, D = { class: "truncate min-w-0 text-[11px] leading-tight text-muted-foreground" }, N = {
+  key: 1,
+  class: "flex min-w-0 flex-1 items-center gap-2 text-muted-foreground"
+}, j = { class: "truncate min-w-0 flex-1" }, $ = {
+  key: 0,
+  class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background"
+}, K = /* @__PURE__ */ w({
+  __name: "FilePickerInput",
+  props: {
+    displayFiles: {},
+    firstDisplayFile: {},
+    hasValue: { type: Boolean },
+    multiSelect: { type: Boolean },
+    loading: { type: Boolean },
+    isProcessing: { type: Boolean },
+    disabled: { type: Boolean },
+    displayPlaceholder: {},
+    acceptedFileSummary: {},
+    size: {},
+    rounded: {},
+    getPreviewSrc: { type: Function },
+    dataTestid: {},
+    triggerAriaLabel: {},
+    onTrigger: { type: Function },
+    onClear: { type: Function }
+  },
+  setup(e) {
+    const n = e, b = o(() => {
+      const i = "group flex w-full min-w-0 items-center bg-background text-sm ring-offset-background transition-all focus-visible:outline-none cursor-pointer", t = {
+        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"
+      }, l = {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        full: "rounded-full"
+      };
+      return [
+        i,
+        "border border-input focus-visible:border-primary",
+        t[n.size],
+        l[n.rounded],
+        "pr-10 text-left",
+        n.disabled ? "cursor-not-allowed opacity-50" : ""
+      ].join(" ");
+    }), f = o(() => ({
+      sm: "h-6 w-6 rounded",
+      md: "h-7 w-7 rounded-md",
+      lg: "h-8 w-8 rounded-md"
+    })[n.size]), h = o(() => {
+      if (!n.hasValue) return "";
+      const i = n.displayFiles, t = i[0]?.fileName || "";
+      return !n.multiSelect || i.length <= 1 ? t : `${t} +${i.length - 1}`;
+    }), v = o(() => {
+      const i = n.displayFiles;
+      if (!i.length) return n.acceptedFileSummary;
+      if (n.multiSelect && i.length > 1) return `${i.length} files selected`;
+      const t = i[0];
+      return S(t.fileSize) || t.fileType || "";
+    });
+    return (i, t) => (s(), r("div", z, [
+      a("div", {
+        role: "button",
+        tabindex: "0",
+        "aria-disabled": e.disabled || e.loading || e.isProcessing,
+        "aria-label": e.triggerAriaLabel,
+        class: u(b.value),
+        "data-testid": e.dataTestid,
+        onClick: t[0] || (t[0] = //@ts-ignore
+        (...l) => e.onTrigger && e.onTrigger(...l)),
+        onKeydown: [
+          t[1] || (t[1] = y(c(
+            //@ts-ignore
+            (...l) => e.onTrigger && e.onTrigger(...l),
+            ["prevent"]
+          ), ["enter"])),
+          t[2] || (t[2] = y(c(
+            //@ts-ignore
+            (...l) => e.onTrigger && e.onTrigger(...l),
+            ["prevent"]
+          ), ["space"]))
+        ]
+      }, [
+        e.hasValue && e.firstDisplayFile ? (s(), r("div", P, [
+          e.getPreviewSrc(e.firstDisplayFile) ? (s(), r("img", {
+            key: 0,
+            src: e.getPreviewSrc(e.firstDisplayFile),
+            alt: e.firstDisplayFile.fileName,
+            class: u(["shrink-0 border border-border bg-muted object-cover", f.value])
+          }, null, 10, T)) : (s(), r("div", {
+            key: 1,
+            class: u(["shrink-0 border border-primary/15 bg-primary/10 text-primary flex items-center justify-center", f.value])
+          }, [
+            m(d, {
+              icon: k(p)(e.firstDisplayFile),
+              class: "h-4 w-4"
+            }, null, 8, ["icon"])
+          ], 2)),
+          a("div", B, [
+            a("p", V, g(h.value), 1),
+            a("p", D, g(v.value), 1)
+          ])
+        ])) : (s(), r("div", N, [
+          m(d, {
+            icon: "lucide:upload",
+            class: "h-4 w-4 shrink-0"
+          }),
+          a("span", j, g(e.displayPlaceholder), 1)
+        ]))
+      ], 42, C),
+      e.loading || e.isProcessing || e.hasValue && !e.disabled ? (s(), r("div", $, [
+        e.loading || e.isProcessing ? (s(), F(d, {
+          key: 0,
+          icon: "lucide:loader-2",
+          class: "h-4 w-4 animate-spin text-muted-foreground"
+        })) : e.hasValue && !e.disabled ? (s(), r("button", {
+          key: 1,
+          type: "button",
+          class: "text-muted-foreground hover:text-foreground focus:outline-none",
+          onClick: t[3] || (t[3] = c(
+            //@ts-ignore
+            (...l) => e.onClear && e.onClear(...l),
+            ["stop"]
+          ))
+        }, [
+          m(d, {
+            icon: "lucide:x-circle",
+            class: "h-4 w-4"
+          })
+        ])) : x("", !0)
+      ])) : x("", !0)
+    ]));
+  }
+});
+export {
+  K as default
+};

package/components/FilePicker/FilePickerInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FilePickerInput.vue.js";
+export {
+  f as default
+};

package/components/FilePicker/FilePreview.vue.d.ts

@@ -0,0 +1,21 @@
+import { FilePickerValue } from './types';
+interface Props {
+    file: FilePickerValue;
+    index: number;
+    allowRename: boolean;
+    disabled: boolean;
+    loading: boolean;
+    isProcessing: boolean;
+    multiSelect: boolean;
+    enterFileNameLabel: string;
+    renameFileLabel: string;
+    getPreviewSrc: (file: FilePickerValue) => string;
+    isImage: (file: FilePickerValue) => boolean;
+    onRemove: (index: number) => void;
+    onRename: (index: number, newName: string) => void;
+    onTrigger: () => void;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileNameInput: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/components/FilePicker/FilePreview.vue.js

@@ -0,0 +1,95 @@
+import { defineComponent as b, ref as h, computed as u, openBlock as n, createElementBlock as r, normalizeClass as p, createElementVNode as t, createVNode as f, toDisplayString as s, withModifiers as a, unref as w, createBlock as g, createCommentVNode as y } from "vue";
+import d from "../Icon.vue.js";
+import k from "../Button.vue.js";
+import { formatFileSize as F } from "./utils.js";
+const N = { class: "shrink-0 mr-3" }, B = { class: "p-2 bg-primary-light rounded text-primary-fg-light" }, C = { class: "flex-1 min-w-0 flex flex-col items-start overflow-hidden contain-inline-size" }, R = {
+  key: 0,
+  class: "inline-flex items-center group/rename w-fit max-w-full mb-0.5"
+}, P = { class: "grid relative w-fit max-w-full items-center -ml-1" }, S = { 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" }, z = ["value", "placeholder"], L = ["title"], I = {
+  key: 1,
+  class: "text-sm font-medium text-foreground truncate w-full min-w-0"
+}, $ = { class: "text-xs text-muted-foreground -mt-1" }, V = { class: "shrink-0 ml-3 flex gap-2 items-center" }, q = /* @__PURE__ */ b({
+  __name: "FilePreview",
+  props: {
+    file: {},
+    index: {},
+    allowRename: { type: Boolean },
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    isProcessing: { type: Boolean },
+    multiSelect: { type: Boolean },
+    enterFileNameLabel: {},
+    renameFileLabel: {},
+    getPreviewSrc: { type: Function },
+    isImage: { type: Function },
+    onRemove: { type: Function },
+    onRename: { type: Function },
+    onTrigger: { type: Function }
+  },
+  setup(e) {
+    const o = e, c = h(null), x = u(() => o.file.fileName || o.enterFileNameLabel), m = u(
+      () => !o.multiSelect && !o.disabled && !o.loading && !o.isProcessing
+    ), v = () => {
+      c.value?.focus();
+    };
+    return (E, i) => (n(), r("div", {
+      class: p(["relative flex items-center min-w-0 p-3 border border-border rounded-lg bg-body transition-colors group", m.value ? "cursor-pointer hover:border-primary/50" : ""]),
+      onClick: i[3] || (i[3] = (l) => m.value ? e.onTrigger() : null)
+    }, [
+      t("div", N, [
+        t("div", B, [
+          f(d, {
+            icon: "lucide:file-text",
+            class: "w-5 h-5"
+          })
+        ])
+      ]),
+      t("div", C, [
+        e.allowRename && !e.disabled && !e.loading && !e.isProcessing ? (n(), r("div", R, [
+          t("div", P, [
+            t("span", S, s(x.value), 1),
+            t("input", {
+              ref_key: "fileNameInput",
+              ref: c,
+              value: e.file.fileName,
+              onClick: i[0] || (i[0] = a(() => {
+              }, ["stop"])),
+              onInput: i[1] || (i[1] = (l) => e.onRename(e.index, l.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: e.enterFileNameLabel
+            }, null, 40, z)
+          ]),
+          t("div", {
+            class: "shrink-0 ml-1 text-muted-foreground/50 group-hover/rename:text-foreground transition-colors cursor-text",
+            title: e.renameFileLabel,
+            onClick: a(v, ["stop"])
+          }, [
+            f(d, {
+              icon: "lucide:pencil",
+              class: "w-3 h-3"
+            })
+          ], 8, L)
+        ])) : (n(), r("p", I, s(e.file.fileName), 1)),
+        t("p", $, s(w(F)(e.file.fileSize)), 1)
+      ]),
+      t("div", V, [
+        e.loading || e.isProcessing ? (n(), g(d, {
+          key: 0,
+          icon: "lucide:loader-2",
+          class: "w-4 h-4 animate-spin text-primary"
+        })) : e.disabled ? y("", !0) : (n(), g(k, {
+          key: 1,
+          size: "xs",
+          variant: "ghost",
+          icon: "lucide:x",
+          rounded: "full",
+          class: "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+          onClick: i[2] || (i[2] = a((l) => e.onRemove(e.index), ["stop"]))
+        }))
+      ])
+    ], 2));
+  }
+});
+export {
+  q as default
+};

package/components/FilePicker/FilePreview.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FilePreview.vue.js";
+export {
+  f as default
+};

package/components/FilePicker/composables/useFileProcessing.d.ts

@@ -0,0 +1,65 @@
+import { Ref, ComputedRef } from 'vue';
+import { FilePickerValue, FilePickerModelValue } from '../types';
+/**
+ * Getter functions for each reactive prop. Using getters (rather than a
+ * snapshot object) is what keeps the composable reactive: the parent
+ * passes `() => props.modelValue`, and the composable's `computed`s call
+ * the getter to read the current value at evaluation time, so Vue's
+ * dependency tracking sees the actual reactive read.
+ *
+ * If we had captured the values directly (e.g. `modelValue: props.modelValue`),
+ * the composable's computeds would read a stale snapshot — props.modelValue
+ * never changes inside the composable because it's a plain value, not a
+ * reactive proxy. That was the bug in the previous revision: a file was
+ * picked, the emit went out, but the composable's `displayFiles` never
+ * updated because it was reading a frozen snapshot of the original null
+ * value.
+ */
+export interface UseFileProcessingGetters {
+    modelValue: () => FilePickerModelValue;
+    multiSelect: () => boolean;
+    fileTypes: () => string[];
+    maxSize: () => number | undefined;
+    maxFiles: () => number | undefined;
+    returnFormat: () => 'file' | 'base64';
+    disabled: () => boolean;
+    loading: () => boolean;
+    unknownFileFallback: () => string;
+}
+export interface UseFileProcessingReturn {
+    /** Normalized list of files for rendering. */
+    displayFiles: ComputedRef<FilePickerValue[]>;
+    /** True if a value is present. */
+    hasValue: ComputedRef<boolean>;
+    /** The first file (used by the input variant for the trigger button). */
+    firstDisplayFile: ComputedRef<FilePickerValue | undefined>;
+    /** Whether async processing is in-flight. */
+    isProcessing: Ref<boolean>;
+    /** Imperative API */
+    triggerInput: (fileInput: HTMLInputElement | null) => void;
+    processFiles: (fileList: FileList) => Promise<void>;
+    removeFile: (index: number) => void;
+    clearAll: () => void;
+    handleFileNameChange: (index: number, newName: string) => void;
+    /** Comma-separated file-types for the `accept` attribute on the hidden <input>. */
+    acceptAttribute: ComputedRef<string>;
+    /** Summary for the trigger meta line, e.g. ".png, .jpg" or "1.2 MB". */
+    acceptedFileSummary: ComputedRef<string>;
+    /** Preview src for image files; empty string for non-images. */
+    getPreviewSrc: (file: FilePickerValue) => string;
+}
+/**
+ * Owns the FilePicker's reactive state and the imperative operations that
+ * mutate the model value (via emitted events). The orchestrator component
+ * passes the result of this composable down to FilePickerInput and
+ * FilePickerDropzone so neither subcomponent has to know about processing
+ * logic — they just render props and call back into the API.
+ *
+ * Emits are passed in as a callback so this composable stays UI-framework
+ * agnostic (the same pattern can be unit-tested without mounting a component).
+ */
+export declare const useFileProcessing: (get: UseFileProcessingGetters, emit: {
+    (e: "update:modelValue", value: FilePickerModelValue): void;
+    (e: "change", value: FilePickerModelValue): void;
+    (e: "error", error: string): void;
+}) => UseFileProcessingReturn;

package/components/FilePicker/composables/useFileProcessing.js

@@ -0,0 +1,141 @@
+import { ref as x, onBeforeUnmount as T, computed as f } from "vue";
+import { normalizeForDisplay as U, isImageFile as j, readFileAsBase64 as z } from "../utils.js";
+const N = (e, o) => {
+  const c = x(!1), p = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new Set();
+  T(() => {
+    m.forEach((l) => URL.revokeObjectURL(l)), m.clear();
+  });
+  const v = f(() => e.fileTypes().join(",")), b = f(() => {
+    const l = e.modelValue();
+    return Array.isArray(l) ? l.length > 0 : l !== null;
+  }), y = f(() => {
+    const l = e.modelValue(), s = [];
+    return Array.isArray(l) ? s.push(...l) : l && s.push(l), s.map((r) => U(r, e.unknownFileFallback()));
+  }), S = f(() => y.value[0]), V = f(() => e.fileTypes().join(", "));
+  return {
+    displayFiles: y,
+    hasValue: b,
+    firstDisplayFile: S,
+    isProcessing: c,
+    triggerInput: (l) => {
+      if (!(e.disabled() || e.loading() || c.value)) {
+        if (e.multiSelect() && e.maxFiles()) {
+          const s = e.modelValue();
+          if ((Array.isArray(s) ? s.length : s ? 1 : 0) >= e.maxFiles()) {
+            o("error", `Maximum ${e.maxFiles()} files allowed`);
+            return;
+          }
+        }
+        l?.click();
+      }
+    },
+    processFiles: async (l) => {
+      if (l.length === 0) return;
+      c.value = !0;
+      const s = [], r = [], a = Array.from(l);
+      let d = e.multiSelect() ? a : [a[0]];
+      if (e.multiSelect() && e.maxFiles()) {
+        const i = e.modelValue(), n = Array.isArray(i) ? i.length : i ? 1 : 0, t = e.maxFiles() - n;
+        if (t <= 0) {
+          o("error", `Maximum ${e.maxFiles()} files allowed`), c.value = !1;
+          return;
+        }
+        d.length > t && (r.push(`Only ${t} more file(s) allowed. Maximum ${e.maxFiles()} files.`), d = d.slice(0, t));
+      }
+      try {
+        for (const i of d) {
+          const n = e.fileTypes();
+          if (n.length > 0 && !n.some((u) => {
+            if (u.startsWith(".")) return i.name.toLowerCase().endsWith(u.toLowerCase());
+            if (u.endsWith("/*")) {
+              const w = u.split("/")[0];
+              return i.type.startsWith(w);
+            }
+            return i.type === u;
+          })) {
+            r.push(`File type not allowed: ${i.name}`);
+            continue;
+          }
+          let t = !1;
+          const h = e.maxSize();
+          h && i.size > h && (r.push(`File too large: ${i.name}`), t = !0);
+          let F = "";
+          if (e.returnFormat() === "base64" && !t)
+            try {
+              F = await z(i);
+            } catch (A) {
+              console.error("Base64 read failed", A);
+            }
+          s.push({
+            fileName: i.name,
+            fileType: i.type,
+            fileSize: i.size,
+            file: i,
+            base64: F
+          });
+        }
+        if (r.length > 0 && o("error", r.join("; ")), s.length > 0) {
+          let i;
+          if (e.multiSelect()) {
+            const n = e.modelValue();
+            i = [...Array.isArray(n) ? n : n ? [n] : [], ...s];
+          } else
+            i = s[0];
+          o("update:modelValue", i), o("change", i);
+        }
+      } catch (i) {
+        console.error("Error processing files:", i), o("error", "Failed to process files");
+      } finally {
+        c.value = !1;
+      }
+    },
+    removeFile: (l) => {
+      if (e.disabled() || e.loading()) return;
+      const s = e.modelValue();
+      if (e.multiSelect() && Array.isArray(s)) {
+        const r = [...s];
+        r.splice(l, 1), o("update:modelValue", r), o("change", r);
+      } else
+        o("update:modelValue", null), o("change", null);
+    },
+    clearAll: () => {
+      e.disabled() || e.loading() || (o("update:modelValue", null), o("change", null));
+    },
+    handleFileNameChange: (l, s) => {
+      if (e.disabled() || e.loading() || c.value) return;
+      const r = e.modelValue();
+      let a;
+      e.multiSelect() && Array.isArray(r) ? (a = [...r], typeof a[l] == "object" && a[l] !== null ? a[l] = { ...a[l], fileName: s } : typeof a[l] == "string" && (a[l] = {
+        fileName: s,
+        fileType: "unknown",
+        fileSize: 0,
+        file: null,
+        base64: a[l],
+        isUrl: !0
+      })) : r && typeof r == "object" && !Array.isArray(r) ? a = { ...r, fileName: s } : typeof r == "string" && (a = {
+        fileName: s,
+        fileType: "unknown",
+        fileSize: 0,
+        file: null,
+        base64: r,
+        isUrl: !0
+      }), a !== void 0 && (o("update:modelValue", a), o("change", a));
+    },
+    acceptAttribute: v,
+    acceptedFileSummary: V,
+    getPreviewSrc: (l) => {
+      if (!j(l)) return "";
+      if (l.base64?.startsWith("data:image/") || l.isUrl) return l.base64;
+      if (typeof File < "u" && l.file instanceof File) {
+        const s = p.get(l.file);
+        if (s) return s;
+        const r = URL.createObjectURL(l.file);
+        return p.set(l.file, r), m.add(r), r;
+      }
+      return "";
+    }
+  };
+};
+export {
+  N as useFileProcessing
+};

package/components/FilePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { default as FilePicker } from './FilePicker.vue';
-export type { FilePickerValue } from './FilePicker.vue';
+export { default as FilePicker } from './index.vue';
+export type { FilePickerValue, FilePickerModelValue } from './types';

package/components/FilePicker/{FilePicker.vue.d.ts → index.vue.d.ts}

@@ -1,14 +1,7 @@
+import { FilePickerValue, FilePickerModelValue } from './types';
 import { InputSize, InputRounded } from '../../types';
-export interface FilePickerValue {
-    fileName: string;
-    fileType: string;
-    fileSize: number;
-    file: File | null;
-    base64: string;
-    isUrl?: boolean;
-}
 interface Props {
-    modelValue?: FilePickerValue | FilePickerValue[] | null;
+    modelValue?: FilePickerModelValue;
     multiSelect?: boolean;
     fileTypes?: string[];
     returnFormat?: 'file' | 'base64';
@@ -31,23 +24,23 @@ declare function __VLS_template(): {
             trigger: () => void;
             isDragging: boolean;
             isLoading: boolean;
-            files: any[];
+            files: FilePickerValue[];
         }): any;
     };
     refs: {
         fileInput: HTMLInputElement;
     };
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     error: (error: string) => any;
-    change: (value: FilePickerValue | FilePickerValue[]) => any;
-    "update:modelValue": (value: FilePickerValue | FilePickerValue[]) => any;
+    change: (value: FilePickerModelValue) => any;
+    "update:modelValue": (value: FilePickerModelValue) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onError?: (error: string) => any;
-    onChange?: (value: FilePickerValue | FilePickerValue[]) => any;
-    "onUpdate:modelValue"?: (value: FilePickerValue | FilePickerValue[]) => any;
+    onChange?: (value: FilePickerModelValue) => any;
+    "onUpdate:modelValue"?: (value: FilePickerModelValue) => any;
 }>, {
     variant: "dropzone" | "input";
     size: InputSize;
@@ -55,13 +48,13 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     loading: boolean;
     disabled: boolean;
     multiSelect: boolean;
-    modelValue: FilePickerValue | FilePickerValue[] | null;
+    modelValue: FilePickerModelValue;
+    allowRename: boolean;
     fileTypes: string[];
     returnFormat: "file" | "base64";
-    allowRename: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     fileInput: HTMLInputElement;
-}, HTMLDivElement>;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {