nuxt-ui-elements 0.1.22 → 0.1.25

package/dist/runtime/composables/useUploader/index.d.ts

@@ -0,0 +1,368 @@
+import type { PluginFn, UploaderEvents, UploadFile, UploadOptions, UploadStatus, UploadFn, GetRemoteFileFn } from "./types.js";
+export declare const useUploader: <TUploadResult = any>(_options?: UploadOptions) => {
+    files: Readonly<import("vue").Ref<readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly size: number;
+        readonly mimeType: string;
+        readonly data: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            readonly arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            readonly bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            readonly slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            readonly stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            readonly text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | {
+            readonly size: number;
+            readonly type: string;
+            readonly arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            readonly bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            readonly slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            readonly stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            readonly text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        readonly status: import("./types.js").FileStatus;
+        readonly preview?: string | undefined;
+        readonly progress: {
+            readonly percentage: number;
+        };
+        readonly error?: {
+            readonly message: string;
+            readonly details?: Readonly<unknown> | undefined;
+        } | undefined;
+        readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
+        readonly isRemote?: boolean | undefined;
+        readonly remoteUrl?: string | undefined;
+        readonly meta: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    }[], readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly size: number;
+        readonly mimeType: string;
+        readonly data: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            readonly arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            readonly bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            readonly slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            readonly stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            readonly text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | {
+            readonly size: number;
+            readonly type: string;
+            readonly arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            readonly bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            readonly slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            readonly stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            readonly text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        readonly status: import("./types.js").FileStatus;
+        readonly preview?: string | undefined;
+        readonly progress: {
+            readonly percentage: number;
+        };
+        readonly error?: {
+            readonly message: string;
+            readonly details?: Readonly<unknown> | undefined;
+        } | undefined;
+        readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
+        readonly isRemote?: boolean | undefined;
+        readonly remoteUrl?: string | undefined;
+        readonly meta: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    }[]>>;
+    totalProgress: import("vue").ComputedRef<number>;
+    addFiles: (newFiles: File[]) => Promise<(UploadFile<any> | null)[]>;
+    addFile: (file: File) => Promise<UploadFile<any> | null>;
+    onGetRemoteFile: (fn: GetRemoteFileFn) => void;
+    onUpload: (fn: UploadFn<TUploadResult>) => void;
+    removeFile: (fileId: string) => void;
+    removeFiles: (fileIds: string[]) => {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        data: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | {
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        isRemote?: boolean | undefined;
+        remoteUrl?: string | undefined;
+        meta: Record<string, unknown>;
+    }[];
+    clearFiles: () => {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        data: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | {
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        isRemote?: boolean | undefined;
+        remoteUrl?: string | undefined;
+        meta: Record<string, unknown>;
+    }[];
+    reorderFile: (oldIndex: number, newIndex: number) => void;
+    getFile: (fileId: string) => {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        data: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        } | {
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        isRemote?: boolean | undefined;
+        remoteUrl?: string | undefined;
+        meta: Record<string, unknown>;
+    } | undefined;
+    upload: () => Promise<void>;
+    reset: () => void;
+    status: import("vue").Ref<UploadStatus, UploadStatus>;
+    updateFile: (fileId: string, updatedFile: Partial<UploadFile<TUploadResult>>) => void;
+    initializeExistingFiles: (initialFiles: Array<Partial<UploadFile>>) => Promise<void>;
+    addPlugin: <TOptions>(fn: PluginFn<TOptions>, pluginOptions: TOptions) => void;
+    on: {
+        <Key extends keyof UploaderEvents<TUploadResult>>(type: Key, handler: import("mitt").Handler<UploaderEvents<TUploadResult>[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<UploaderEvents<TUploadResult>>): void;
+    };
+};

package/dist/runtime/composables/useUploader/index.js

@@ -0,0 +1,274 @@
+import mitt from "mitt";
+import { computed, readonly, ref } from "vue";
+import { ValidatorAllowedFileTypes, ValidatorMaxfileSize, ValidatorMaxFiles } from "./validators/index.js";
+import { PluginThumbnailGenerator, PluginImageCompressor } from "./plugins/index.js";
+function getExtension(fullFileName) {
+  const lastDot = fullFileName.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === fullFileName.length - 1) {
+    throw new Error("Invalid file name");
+  }
+  return fullFileName.slice(lastDot + 1).toLocaleLowerCase();
+}
+const defaultOptions = {
+  plugins: [],
+  maxFileSize: false,
+  allowedFileTypes: false,
+  maxFiles: false,
+  thumbnails: false,
+  imageCompression: false,
+  autoProceed: false
+};
+export const useUploader = (_options = {}) => {
+  const options = { ...defaultOptions, ..._options };
+  const files = ref([]);
+  const emitter = mitt();
+  const status = ref("waiting");
+  let uploadFn = async () => {
+    throw new Error("No uploader configured");
+  };
+  let getRemoteFileFn = async () => {
+    throw new Error("Function to get remote file not configured");
+  };
+  const totalProgress = computed(() => {
+    if (files.value.length === 0) return 0;
+    const sum = files.value.reduce((acc, file) => acc + file.progress.percentage, 0);
+    return Math.round(sum / files.value.length);
+  });
+  const addPlugin = (fn, pluginOptions) => {
+    const plugin = fn({ files: files.value, options }, pluginOptions);
+    options.plugins?.push(plugin);
+  };
+  if (options.maxFiles !== false && options.maxFiles !== void 0) {
+    addPlugin(ValidatorMaxFiles, { maxFiles: options.maxFiles });
+  }
+  if (options.maxFileSize !== false && options.maxFileSize !== void 0) {
+    addPlugin(ValidatorMaxfileSize, { maxFileSize: options.maxFileSize });
+  }
+  if (options.allowedFileTypes !== false && options.allowedFileTypes !== void 0 && options.allowedFileTypes.length > 0) {
+    addPlugin(ValidatorAllowedFileTypes, { allowedFileTypes: options.allowedFileTypes });
+  }
+  if (options.thumbnails !== false && options.thumbnails !== void 0) {
+    const thumbOpts = options.thumbnails === true ? {} : options.thumbnails || {};
+    addPlugin(PluginThumbnailGenerator, {
+      width: thumbOpts.width ?? 128,
+      height: thumbOpts.height ?? 128,
+      quality: thumbOpts.quality ?? 1
+    });
+  }
+  if (options.imageCompression !== false && options.imageCompression !== void 0) {
+    const compressionOpts = options.imageCompression === true ? {} : options.imageCompression || {};
+    addPlugin(PluginImageCompressor, {
+      maxWidth: compressionOpts.maxWidth ?? 1920,
+      maxHeight: compressionOpts.maxHeight ?? 1920,
+      quality: compressionOpts.quality ?? 0.85,
+      outputFormat: compressionOpts.outputFormat ?? "auto",
+      minSizeToCompress: compressionOpts.minSizeToCompress ?? 1e5,
+      preserveMetadata: compressionOpts.preserveMetadata ?? true
+    });
+  }
+  emitter.on("upload:progress", ({ file, progress }) => {
+    updateFile(file.id, { progress: { percentage: progress } });
+  });
+  const updateFile = (fileId, updatedFile) => {
+    files.value = files.value.map((file) => file.id === fileId ? { ...file, ...updatedFile } : file);
+  };
+  const onUpload = (fn) => {
+    uploadFn = fn;
+  };
+  const onGetRemoteFile = (fn) => {
+    getRemoteFileFn = fn;
+  };
+  const initializeExistingFiles = async (initialFiles) => {
+    const initializedfiles = await Promise.all(
+      initialFiles.map(async (file) => {
+        if (!file.id) return null;
+        const { mimeType, size, remoteUrl } = await getRemoteFileFn(file.id);
+        const existingFile = {
+          ...file,
+          id: file.id,
+          name: file.id,
+          data: new Blob(),
+          status: "complete",
+          progress: { percentage: 100 },
+          meta: {},
+          size,
+          mimeType,
+          remoteUrl
+        };
+        const processedFile = await runPluginStage("process", existingFile);
+        if (!processedFile) return null;
+        return processedFile;
+      })
+    );
+    const filteredFiles = initializedfiles.filter((f) => f !== null);
+    files.value = [...filteredFiles];
+  };
+  const addFile = async (file) => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const extension = getExtension(file.name);
+    const uploadFile = {
+      id: `${id}.${extension}`,
+      progress: {
+        percentage: 0
+      },
+      name: file.name,
+      size: file.size,
+      status: "waiting",
+      mimeType: file.type,
+      data: file,
+      meta: {
+        extension
+      }
+    };
+    const validatedFile = await runPluginStage("validate", uploadFile);
+    if (!validatedFile) return null;
+    const processedFile = await runPluginStage("process", validatedFile);
+    if (!processedFile) return null;
+    files.value.push(processedFile);
+    emitter.emit("file:added", processedFile);
+    if (options.autoProceed) {
+      upload();
+    }
+    return processedFile;
+  };
+  const addFiles = (newFiles) => {
+    return Promise.all(newFiles.map((file) => addFile(file)));
+  };
+  const removeFile = (fileId) => {
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) return;
+    files.value = files.value.filter((f) => f.id !== fileId);
+    emitter.emit("file:removed", file);
+  };
+  const removeFiles = (fileIds) => {
+    const removedFiles = files.value.filter((f) => fileIds.includes(f.id));
+    files.value = files.value.filter((f) => !fileIds.includes(f.id));
+    removedFiles.forEach((file) => {
+      emitter.emit("file:removed", file);
+    });
+    return removedFiles;
+  };
+  const clearFiles = () => {
+    const allFiles = [...files.value];
+    files.value = [];
+    allFiles.forEach((file) => {
+      emitter.emit("file:removed", file);
+    });
+    return allFiles;
+  };
+  const reorderFile = (oldIndex, newIndex) => {
+    if (oldIndex === newIndex) {
+      if (import.meta.dev) {
+        console.warn("Cannot reorder file to the same index");
+      }
+      return;
+    }
+    if (oldIndex < 0 || oldIndex >= files.value.length || newIndex < 0 || newIndex >= files.value.length) {
+      if (import.meta.dev) {
+        console.warn(`Cannot reorder file from ${oldIndex} to ${newIndex} since it is out of bounds`);
+      }
+      return;
+    }
+    const filesCopy = [...files.value];
+    const [movedFile] = filesCopy.splice(oldIndex, 1);
+    filesCopy.splice(newIndex, 0, movedFile);
+    files.value = filesCopy;
+    emitter.emit("files:reorder", { oldIndex, newIndex });
+  };
+  const getFile = (fileId) => {
+    return files.value.find((f) => f.id === fileId);
+  };
+  const upload = async () => {
+    const filesToUpload = files.value.filter((f) => f.status === "waiting");
+    emitter.emit("upload:start", filesToUpload);
+    for (const file of filesToUpload) {
+      try {
+        updateFile(file.id, { status: "uploading" });
+        const onProgress = (progress) => {
+          updateFile(file.id, { progress: { percentage: progress } });
+          emitter.emit("upload:progress", { file, progress });
+        };
+        const uploadResult = await uploadFn(file, onProgress);
+        updateFile(file.id, { status: "complete", uploadResult });
+      } catch (err) {
+        const error = {
+          message: err instanceof Error ? err.message : "Unknown upload error",
+          details: {
+            fileName: file.name,
+            fileSize: file.size,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          }
+        };
+        updateFile(file.id, { status: "error", error });
+        emitter.emit("file:error", { file, error });
+      }
+    }
+    const completed = files.value.filter((f) => f.status === "complete");
+    emitter.emit("upload:complete", completed);
+  };
+  const reset = () => {
+    files.value = [];
+  };
+  const callPluginHook = async (hook, stage, file, context) => {
+    switch (stage) {
+      case "validate":
+        await hook(file, context);
+        return file;
+      case "process":
+      case "complete":
+        if (!file) throw new Error("File is required for this hook type");
+        await hook(file, context);
+        return file;
+      default:
+        return file;
+    }
+  };
+  async function runPluginStage(stage, file) {
+    if (!options.plugins) return file;
+    const context = { files: files.value, options };
+    let currentFile = file;
+    for (const plugin of options.plugins) {
+      const hook = plugin.hooks[stage];
+      if (hook) {
+        try {
+          const result = await callPluginHook(hook, stage, currentFile, context);
+          if (!result) continue;
+          if (currentFile && "id" in result) {
+            currentFile = result;
+          }
+        } catch (error) {
+          if (currentFile) {
+            emitter.emit("file:error", { file: currentFile, error });
+          }
+          console.error(`Plugin ${plugin.id} ${stage} hook error:`, error);
+          return null;
+        }
+      }
+    }
+    return currentFile;
+  }
+  return {
+    // State
+    files: readonly(files),
+    totalProgress,
+    // Core Methods
+    addFiles,
+    addFile,
+    onGetRemoteFile,
+    onUpload,
+    removeFile,
+    removeFiles,
+    clearFiles,
+    reorderFile,
+    getFile,
+    upload,
+    reset,
+    status,
+    updateFile,
+    initializeExistingFiles,
+    // Utilities
+    addPlugin,
+    // Events
+    on: emitter.on
+  };
+};

package/dist/runtime/composables/useUploader/plugins/image-compressor.d.ts

@@ -0,0 +1,49 @@
+import type { PluginFn } from "../types.js";
+interface ImageCompressorOptions {
+    /**
+     * Maximum width in pixels. Images wider than this will be scaled down.
+     * @default 1920
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height in pixels. Images taller than this will be scaled down.
+     * @default 1920
+     */
+    maxHeight?: number;
+    /**
+     * JPEG/WebP quality (0-1). Lower values = smaller files but worse quality.
+     * @default 0.85
+     */
+    quality?: number;
+    /**
+     * Output format. Use 'auto' to preserve original format.
+     * @default 'auto'
+     */
+    outputFormat?: "jpeg" | "webp" | "png" | "auto";
+    /**
+     * Only compress images larger than this size (in bytes).
+     * @default 100000 (100KB)
+     */
+    minSizeToCompress?: number;
+    /**
+     * Preserve EXIF metadata (orientation, etc)
+     * @default true
+     */
+    preserveMetadata?: boolean;
+}
+/**
+ * Compresses images before upload to reduce bandwidth and storage costs.
+ * Particularly useful for social media scheduling where images are often large.
+ *
+ * @example
+ * ```ts
+ * const uploader = useUpload()
+ * uploader.addPlugin(PluginImageCompressor, {
+ *   maxWidth: 2048,
+ *   quality: 0.85,
+ *   outputFormat: 'webp'
+ * })
+ * ```
+ */
+export declare const PluginImageCompressor: PluginFn<ImageCompressorOptions>;
+export {};