nuxt-ui-elements 0.1.25 → 0.1.26

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -253,8 +253,8 @@ const module$1 = defineNuxtModule({
     addImportsDir(resolver.resolve("./runtime/composables"));
     addImports([
       {
-        name: "useUploader",
-        from: resolver.resolve("./runtime/composables/useUploader")
+        name: "useUploadManager",
+        from: resolver.resolve("./runtime/composables/useUploadManager")
       }
     ]);
     nuxt.options.alias["#std"] = resolver.resolve("./runtime/utils/std");

package/dist/runtime/composables/{useUploader → useUploadManager}/index.d.ts

@@ -1,5 +1,5 @@
-import type { PluginFn, UploaderEvents, UploadFile, UploadOptions, UploadStatus, UploadFn, GetRemoteFileFn } from "./types.js";
-export declare const useUploader: <TUploadResult = any>(_options?: UploadOptions) => {
+import type { UploaderEvents, UploadFile, UploadOptions, UploadStatus, UploadFn, GetRemoteFileFn, Plugin as UploaderPlugin } from "./types.js";
+export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOptions) => {
     files: Readonly<import("vue").Ref<readonly {
         readonly id: string;
         readonly name: string;
@@ -146,7 +146,7 @@ export declare const useUploader: <TUploadResult = any>(_options?: UploadOptions
     addFile: (file: File) => Promise<UploadFile<any> | null>;
     onGetRemoteFile: (fn: GetRemoteFileFn) => void;
     onUpload: (fn: UploadFn<TUploadResult>) => void;
-    removeFile: (fileId: string) => void;
+    removeFile: (fileId: string) => Promise<void>;
     removeFiles: (fileIds: string[]) => {
         id: string;
         name: string;
@@ -360,9 +360,9 @@ export declare const useUploader: <TUploadResult = any>(_options?: UploadOptions
     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;
+    addPlugin: (plugin: UploaderPlugin<any, any>) => 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;
+        <K extends keyof UploaderEvents<TUploadResult>>(type: K, handler: (event: UploaderEvents<TUploadResult>[K]) => void): void;
+        (type: string, handler: (event: any) => void): void;
     };
 };

package/dist/runtime/composables/{useUploader → useUploadManager}/index.js

@@ -18,11 +18,23 @@ const defaultOptions = {
   imageCompression: false,
   autoProceed: false
 };
-export const useUploader = (_options = {}) => {
+export const useUploadManager = (_options = {}) => {
   const options = { ...defaultOptions, ..._options };
   const files = ref([]);
   const emitter = mitt();
   const status = ref("waiting");
+  const pluginEmitFunctions = /* @__PURE__ */ new Map();
+  const getPluginEmitFn = (pluginId) => {
+    let emitFn = pluginEmitFunctions.get(pluginId);
+    if (!emitFn) {
+      emitFn = (event, payload) => {
+        const prefixedEvent = `${pluginId}:${String(event)}`;
+        emitter.emit(prefixedEvent, payload);
+      };
+      pluginEmitFunctions.set(pluginId, emitFn);
+    }
+    return emitFn;
+  };
   let uploadFn = async () => {
     throw new Error("No uploader configured");
   };
@@ -34,37 +46,71 @@ export const useUploader = (_options = {}) => {
     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);
+  const isStoragePlugin = (plugin) => {
+    return !!(plugin.hooks.upload || plugin.hooks.getRemoteFile || plugin.hooks.remove);
+  };
+  const getStoragePlugin = () => {
+    if (!options.plugins) return null;
+    for (let i = options.plugins.length - 1; i >= 0; i--) {
+      const plugin = options.plugins[i];
+      if (plugin && isStoragePlugin(plugin)) {
+        return plugin;
+      }
+    }
+    return null;
+  };
+  const addPlugin = (plugin) => {
+    if (isStoragePlugin(plugin)) {
+      const existingStorage = options.plugins?.find((p) => isStoragePlugin(p));
+      if (existingStorage && import.meta.dev) {
+        console.warn(
+          `[useUploadManager] Multiple storage plugins detected!
+
+You're trying to add "${plugin.id}" but "${existingStorage.id}" is already registered.
+The LAST storage plugin ("${plugin.id}") will be used for uploads.
+
+\u{1F4A1} If you need multiple storage destinations, create separate uploader instances:
+
+   const s3Uploader = useUploadManager({ plugins: [PluginS3Storage({ ... })] })
+   const azureUploader = useUploadManager({ plugins: [PluginAzureStorage({ ... })] })
+`
+        );
+      }
+    }
+    ;
     options.plugins?.push(plugin);
   };
   if (options.maxFiles !== false && options.maxFiles !== void 0) {
-    addPlugin(ValidatorMaxFiles, { maxFiles: options.maxFiles });
+    addPlugin(ValidatorMaxFiles({ maxFiles: options.maxFiles }));
   }
   if (options.maxFileSize !== false && options.maxFileSize !== void 0) {
-    addPlugin(ValidatorMaxfileSize, { maxFileSize: options.maxFileSize });
+    addPlugin(ValidatorMaxfileSize({ maxFileSize: options.maxFileSize }));
   }
   if (options.allowedFileTypes !== false && options.allowedFileTypes !== void 0 && options.allowedFileTypes.length > 0) {
-    addPlugin(ValidatorAllowedFileTypes, { allowedFileTypes: options.allowedFileTypes });
+    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
-    });
+    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
-    });
+    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 } });
@@ -82,7 +128,21 @@ export const useUploader = (_options = {}) => {
     const initializedfiles = await Promise.all(
       initialFiles.map(async (file) => {
         if (!file.id) return null;
-        const { mimeType, size, remoteUrl } = await getRemoteFileFn(file.id);
+        const storagePlugin = getStoragePlugin();
+        let remoteFileData;
+        if (storagePlugin?.hooks.getRemoteFile) {
+          const context = {
+            files: files.value,
+            options,
+            emit: (event, payload) => {
+              const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
+              emitter.emit(prefixedEvent, payload);
+            }
+          };
+          remoteFileData = await storagePlugin.hooks.getRemoteFile(file.id, context);
+        } else {
+          remoteFileData = await getRemoteFileFn(file.id);
+        }
         const existingFile = {
           ...file,
           id: file.id,
@@ -91,9 +151,9 @@ export const useUploader = (_options = {}) => {
           status: "complete",
           progress: { percentage: 100 },
           meta: {},
-          size,
-          mimeType,
-          remoteUrl
+          size: remoteFileData.size,
+          mimeType: remoteFileData.mimeType,
+          remoteUrl: remoteFileData.remoteUrl
         };
         const processedFile = await runPluginStage("process", existingFile);
         if (!processedFile) return null;
@@ -134,9 +194,25 @@ export const useUploader = (_options = {}) => {
   const addFiles = (newFiles) => {
     return Promise.all(newFiles.map((file) => addFile(file)));
   };
-  const removeFile = (fileId) => {
+  const removeFile = async (fileId) => {
     const file = files.value.find((f) => f.id === fileId);
     if (!file) return;
+    const storagePlugin = getStoragePlugin();
+    if (storagePlugin?.hooks.remove) {
+      try {
+        const context = {
+          files: files.value,
+          options,
+          emit: (event, payload) => {
+            const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
+            emitter.emit(prefixedEvent, payload);
+          }
+        };
+        await storagePlugin.hooks.remove(file, context);
+      } catch (error) {
+        console.error(`Storage plugin remove error:`, error);
+      }
+    }
     files.value = files.value.filter((f) => f.id !== fileId);
     emitter.emit("file:removed", file);
   };
@@ -188,7 +264,22 @@ export const useUploader = (_options = {}) => {
           updateFile(file.id, { progress: { percentage: progress } });
           emitter.emit("upload:progress", { file, progress });
         };
-        const uploadResult = await uploadFn(file, onProgress);
+        const storagePlugin = getStoragePlugin();
+        let uploadResult;
+        if (storagePlugin?.hooks.upload) {
+          const context = {
+            files: files.value,
+            options,
+            onProgress,
+            emit: (event, payload) => {
+              const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
+              emitter.emit(prefixedEvent, payload);
+            }
+          };
+          uploadResult = await storagePlugin.hooks.upload(file, context);
+        } else {
+          uploadResult = await uploadFn(file, onProgress);
+        }
         updateFile(file.id, { status: "complete", uploadResult });
       } catch (err) {
         const error = {
@@ -225,12 +316,16 @@ export const useUploader = (_options = {}) => {
   };
   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 context = {
+            files: files.value,
+            options,
+            emit: getPluginEmitFn(plugin.id)
+          };
           const result = await callPluginHook(hook, stage, currentFile, context);
           if (!result) continue;
           if (currentFile && "id" in result) {
@@ -268,7 +363,7 @@ export const useUploader = (_options = {}) => {
     initializeExistingFiles,
     // Utilities
     addPlugin,
-    // Events
+    // Events - autocomplete for core events, allow arbitrary strings for plugin events
     on: emitter.on
   };
 };

package/dist/runtime/composables/{useUploader → useUploadManager}/plugins/image-compressor.d.ts

@@ -1,4 +1,25 @@
-import type { PluginFn } from "../types.js";
+import type { UploadFile } from "../types.js";
+/**
+ * Events emitted by the image compressor plugin
+ * Note: These are automatically prefixed with "image-compressor:" by the plugin system
+ * e.g., "start" becomes "image-compressor:start"
+ */
+type ImageCompressorEvents = {
+    start: {
+        file: UploadFile;
+        originalSize: number;
+    };
+    complete: {
+        file: UploadFile;
+        originalSize: number;
+        compressedSize: number;
+        savedBytes: number;
+    };
+    skip: {
+        file: UploadFile;
+        reason: string;
+    };
+};
 interface ImageCompressorOptions {
     /**
      * Maximum width in pixels. Images wider than this will be scaled down.
@@ -31,19 +52,5 @@ interface ImageCompressorOptions {
      */
     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 declare const PluginImageCompressor: (options: ImageCompressorOptions) => import("../types.js").Plugin<any, ImageCompressorEvents>;
 export {};

package/dist/runtime/composables/{useUploader → useUploadManager}/plugins/image-compressor.js

@@ -1,29 +1,36 @@
-export const PluginImageCompressor = (_, pluginOptions) => {
+import { defineUploaderPlugin } from "../types.js";
+export const PluginImageCompressor = defineUploaderPlugin((pluginOptions) => {
   const {
     maxWidth = 1920,
     maxHeight = 1920,
     quality = 0.85,
     outputFormat = "auto",
-    minSizeToCompress = 1e5,
+    minSizeToCompress = 1e5
     // 100KB
-    preserveMetadata = true
   } = pluginOptions;
   return {
     id: "image-compressor",
     hooks: {
-      process: async (file) => {
+      process: async (file, context) => {
         if (!file.mimeType.startsWith("image/")) {
           return file;
         }
         if (file.mimeType === "image/gif") {
+          context.emit("skip", { file, reason: "GIF format not supported" });
           return file;
         }
         if (file.mimeType === "image/svg+xml") {
+          context.emit("skip", { file, reason: "SVG already optimized" });
           return file;
         }
         if (file.size < minSizeToCompress) {
+          context.emit("skip", {
+            file,
+            reason: `File size (${file.size} bytes) below minimum threshold`
+          });
           return file;
         }
+        context.emit("start", { file, originalSize: file.size });
         try {
           const sourceUrl = URL.createObjectURL(file.data);
           const image = new Image();
@@ -35,6 +42,10 @@ export const PluginImageCompressor = (_, pluginOptions) => {
           const needsResize = image.width > maxWidth || image.height > maxHeight;
           if (!needsResize && outputFormat === "auto") {
             URL.revokeObjectURL(sourceUrl);
+            context.emit("skip", {
+              file,
+              reason: "Image within size limits and format is auto"
+            });
             return file;
           }
           let targetWidth = image.width;
@@ -79,6 +90,13 @@ export const PluginImageCompressor = (_, pluginOptions) => {
           });
           URL.revokeObjectURL(sourceUrl);
           if (compressedBlob.size < file.size) {
+            const savedBytes = file.size - compressedBlob.size;
+            context.emit("complete", {
+              file,
+              originalSize: file.size,
+              compressedSize: compressedBlob.size,
+              savedBytes
+            });
             let newId = file.id;
             if (outputFormat !== "auto" && outputFormat !== file.meta.extension) {
               const extension = outputFormat === "jpeg" ? "jpg" : outputFormat;
@@ -100,6 +118,10 @@ export const PluginImageCompressor = (_, pluginOptions) => {
               }
             };
           }
+          context.emit("skip", {
+            file,
+            reason: "Compressed version larger than original"
+          });
           return file;
         } catch (error) {
           console.warn(`Image compression failed for ${file.name}:`, error);
@@ -108,4 +130,4 @@ export const PluginImageCompressor = (_, pluginOptions) => {
       }
     }
   };
-};
+});

package/dist/runtime/composables/{useUploader → useUploadManager}/plugins/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./thumbnail-generator.js";
 export * from "./image-compressor.js";
+export * from "./storage/index.js";

package/dist/runtime/composables/{useUploader → useUploadManager}/plugins/index.js

@@ -1,2 +1,3 @@
 export * from "./thumbnail-generator.js";
 export * from "./image-compressor.js";
+export * from "./storage/index.js";

package/dist/runtime/composables/useUploadManager/plugins/storage/azure-datalake.d.ts

@@ -0,0 +1,45 @@
+type PathHttpHeaders = import("@azure/storage-file-datalake").PathHttpHeaders;
+export interface AzureDataLakeOptions {
+    /**
+     * Static SAS URL for Azure Data Lake Storage
+     */
+    sasURL?: string;
+    /**
+     * Function to dynamically fetch SAS URL
+     * Use this to handle token expiration/refreshing.
+     * If provided, it will be called before every file operation.
+     */
+    getSASUrl?: () => Promise<string>;
+    /**
+     * Optional subdirectory path within the container
+     * @example "uploads/images"
+     */
+    path?: string;
+    /**
+     * Custom metadata to attach to uploaded files
+     */
+    metadata?: Record<string, string>;
+    /**
+     * Custom HTTP headers for uploaded files
+     */
+    pathHttpHeaders?: Omit<PathHttpHeaders, "contentType">;
+    /**
+     * Automatically try to create the directory if it doesn't exist.
+     * Disable this if your SAS token only has 'Write' (Blob) permissions
+     * and not 'Create' (Directory) permissions.
+     * @default true
+     */
+    autoCreateDirectory?: boolean;
+}
+export interface AzureUploadResult {
+    /**
+     * Full URL to the uploaded file
+     */
+    url: string;
+    /**
+     * File name/path in the storage
+     */
+    blobPath: string;
+}
+export declare const PluginAzureDataLake: (options: AzureDataLakeOptions) => import("../../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/useUploadManager/plugins/storage/azure-datalake.js

@@ -0,0 +1,108 @@
+import { ref } from "vue";
+import { defineUploaderPlugin } from "../../types.js";
+export const PluginAzureDataLake = defineUploaderPlugin((options) => {
+  let DataLakeDirectoryClient;
+  const sasURL = ref(options.sasURL || "");
+  let refreshPromise = null;
+  const directoryCheckedCache = /* @__PURE__ */ new Set();
+  if (options.getSASUrl && !options.sasURL) {
+    options.getSASUrl().then((url) => {
+      sasURL.value = url;
+    });
+  }
+  const isTokenExpired = (urlStr, bufferMinutes = 5) => {
+    if (!urlStr) return true;
+    try {
+      const url = new URL(urlStr);
+      const expiryStr = url.searchParams.get("se");
+      if (!expiryStr) return true;
+      const expiry = new Date(expiryStr);
+      const now = /* @__PURE__ */ new Date();
+      return now.getTime() + bufferMinutes * 60 * 1e3 > expiry.getTime();
+    } catch {
+      return true;
+    }
+  };
+  const getFileClient = async (blobName) => {
+    if (!DataLakeDirectoryClient) {
+      const module = await import("@azure/storage-file-datalake");
+      DataLakeDirectoryClient = module.DataLakeDirectoryClient;
+    }
+    if (options.getSASUrl && isTokenExpired(sasURL.value)) {
+      if (!refreshPromise) {
+        refreshPromise = options.getSASUrl().then((url) => {
+          refreshPromise = null;
+          return url;
+        });
+      }
+      sasURL.value = await refreshPromise;
+    }
+    let dir = new DataLakeDirectoryClient(sasURL.value);
+    if (options.path) {
+      const cleanPath = options.path.replace(/^\/+|\/+$/g, "");
+      dir = dir.getSubdirectoryClient(cleanPath);
+      const shouldCreateDir = options.autoCreateDirectory ?? true;
+      if (shouldCreateDir && !directoryCheckedCache.has(cleanPath)) {
+        try {
+          await dir.createIfNotExists();
+          directoryCheckedCache.add(cleanPath);
+        } catch (error) {
+          if (import.meta.dev) {
+            console.debug(`Azure directory already exists or couldn't be created: ${cleanPath}`, error);
+          }
+        }
+      }
+    }
+    return dir.getFileClient(blobName);
+  };
+  return {
+    id: "azure-datalake-storage",
+    hooks: {
+      /**
+       * Upload file to Azure Blob Storage
+       */
+      async upload(file, context) {
+        const fileClient = await getFileClient(file.id);
+        await fileClient.upload(file.data, {
+          metadata: {
+            ...options.metadata,
+            mimeType: file.mimeType,
+            size: String(file.size),
+            originalName: file.name
+          },
+          pathHttpHeaders: {
+            ...options.pathHttpHeaders,
+            contentType: file.mimeType
+          },
+          onProgress: ({ loadedBytes }) => {
+            const uploadedPercentage = Math.round(loadedBytes / file.size * 100);
+            context.onProgress(uploadedPercentage);
+          }
+        });
+        return {
+          url: fileClient.url,
+          blobPath: fileClient.name
+        };
+      },
+      /**
+       * Get remote file metadata from Azure
+       */
+      async getRemoteFile(fileId, _context) {
+        const fileClient = await getFileClient(fileId);
+        const properties = await fileClient.getProperties();
+        return {
+          size: properties.contentLength || 0,
+          mimeType: properties.contentType || "application/octet-stream",
+          remoteUrl: fileClient.url
+        };
+      },
+      /**
+       * Delete file from Azure Blob Storage
+       */
+      async remove(file, _context) {
+        const fileClient = await getFileClient(file.id);
+        await fileClient.deleteIfExists();
+      }
+    }
+  };
+});

package/dist/runtime/composables/useUploadManager/plugins/storage/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Storage Adapter Plugins
+ *
+ * These plugins handle the actual upload, download, and deletion of files
+ * to/from various cloud storage providers.
+ *
+ * Only ONE storage plugin should be active per uploader instance.
+ * If you need multiple storage destinations, create multiple uploader instances.
+ */
+export { PluginAzureDataLake, type AzureDataLakeOptions, type AzureUploadResult } from "./azure-datalake.js";

package/dist/runtime/composables/useUploadManager/plugins/storage/index.js

@@ -0,0 +1 @@
+export { PluginAzureDataLake } from "./azure-datalake.js";

package/dist/runtime/composables/useUploadManager/plugins/thumbnail-generator.d.ts

@@ -0,0 +1,7 @@
+interface ThumbnailGeneratorOptions {
+    width?: number;
+    height?: number;
+    quality?: number;
+}
+export declare const PluginThumbnailGenerator: (options: ThumbnailGeneratorOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/{useUploader → useUploadManager}/plugins/thumbnail-generator.js

@@ -1,8 +1,9 @@
-export const PluginThumbnailGenerator = (_options, pluginOptions) => {
+import { defineUploaderPlugin } from "../types.js";
+export const PluginThumbnailGenerator = defineUploaderPlugin((pluginOptions) => {
   return {
     id: "thumbnail-generator",
     hooks: {
-      process: async (file) => {
+      process: async (file, _context) => {
         const { width = 100, height = 100, quality = 0.7 } = pluginOptions;
         const sourceUrl = file.isRemote ? file.remoteUrl : URL.createObjectURL(file.data);
         if (file.mimeType.startsWith("image/")) {
@@ -62,4 +63,4 @@ export const PluginThumbnailGenerator = (_options, pluginOptions) => {
       }
     }
   };
-};
+});

package/dist/runtime/composables/useUploadManager/types.d.ts

@@ -0,0 +1,220 @@
+import type { Emitter } from "mitt";
+/**
+ * PUBLIC API - Types users commonly need
+ * These are exported from the main package
+ */
+export type FileStatus = "waiting" | "preprocessing" | "uploading" | "postprocessing" | "complete" | "error";
+export type UploadStatus = "waiting" | "uploading";
+export interface FileProgress {
+    percentage: number;
+}
+export interface FileError {
+    message: string;
+    details?: unknown;
+}
+export interface UploadFile<TUploadResult = any> {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    data: File | Blob;
+    status: FileStatus;
+    preview?: string;
+    progress: FileProgress;
+    error?: FileError;
+    uploadResult?: TUploadResult;
+    isRemote?: boolean;
+    remoteUrl?: string;
+    meta: Record<string, unknown>;
+}
+export type UploadFn<TUploadResult = any> = (file: UploadFile<TUploadResult>, onProgress: (progress: number) => void) => Promise<TUploadResult>;
+export type GetRemoteFileFn = (fileId: string) => Promise<MinimumRemoteFileAttributes>;
+export interface UploadOptions {
+    /**
+     * Custom plugins to add (in addition to built-in plugins)
+     */
+    plugins?: Plugin<any, any>[];
+    /**
+     * Validate maximum number of files
+     * - false: disabled
+     * - number: enabled with limit
+     * @default false
+     */
+    maxFiles?: false | number;
+    /**
+     * Validate maximum file size in bytes
+     * - false: disabled
+     * - number: enabled with limit
+     * @default false
+     */
+    maxFileSize?: false | number;
+    /**
+     * Validate allowed file MIME types
+     * - false: disabled
+     * - string[]: enabled with allowed types
+     * @default false
+     */
+    allowedFileTypes?: false | string[];
+    /**
+     * Generate thumbnail previews for images/videos
+     * - false: disabled
+     * - true: enabled with defaults
+     * - object: enabled with custom options
+     * @default false
+     */
+    thumbnails?: false | true | ThumbnailOptions;
+    /**
+     * Compress images before upload
+     * - false: disabled
+     * - true: enabled with defaults
+     * - object: enabled with custom options
+     * @default false
+     */
+    imageCompression?: false | true | ImageCompressionOptions;
+    /**
+     * Automatically start upload after files are added
+     * @default false
+     */
+    autoProceed?: boolean;
+}
+export interface ThumbnailOptions {
+    width?: number;
+    height?: number;
+    quality?: number;
+}
+export interface ImageCompressionOptions {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+    outputFormat?: "jpeg" | "webp" | "png" | "auto";
+    minSizeToCompress?: number;
+    preserveMetadata?: boolean;
+}
+type CoreUploaderEvents<TUploadResult = any> = {
+    "file:added": Readonly<UploadFile<TUploadResult>>;
+    "file:removed": Readonly<UploadFile<TUploadResult>>;
+    "file:processing": Readonly<UploadFile<TUploadResult>>;
+    "file:error": {
+        file: Readonly<UploadFile<TUploadResult>>;
+        error: FileError;
+    };
+    "upload:start": Array<Readonly<UploadFile<TUploadResult>>>;
+    "upload:complete": Array<Required<Readonly<UploadFile<TUploadResult>>>>;
+    "upload:error": FileError;
+    "upload:progress": {
+        file: Readonly<UploadFile<TUploadResult>>;
+        progress: number;
+    };
+    "files:reorder": {
+        oldIndex: number;
+        newIndex: number;
+    };
+};
+export type UploaderEvents<TUploadResult = any> = CoreUploaderEvents<TUploadResult>;
+/**
+ * PLUGIN API - Types for building custom plugins
+ * Only needed if users want to create custom validators/processors
+ */
+export type PluginContext<TPluginEvents extends Record<string, any> = Record<string, never>> = {
+    files: UploadFile[];
+    options: UploadOptions;
+    /**
+     * Emit custom plugin events
+     * Events are automatically prefixed with the plugin ID
+     */
+    emit: <K extends keyof TPluginEvents>(event: K, payload: TPluginEvents[K]) => void;
+};
+export type ValidationHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile, context: PluginContext<TPluginEvents>) => Promise<true | UploadFile>;
+export type ProcessingHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile, context: PluginContext<TPluginEvents>) => Promise<UploadFile>;
+export type SetupHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (context: PluginContext<TPluginEvents>) => Promise<void>;
+/**
+ * Storage hooks for handling upload/download/deletion operations
+ */
+export type UploadHook<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile<TUploadResult>, context: PluginContext<TPluginEvents> & {
+    onProgress: (progress: number) => void;
+}) => Promise<TUploadResult>;
+export type GetRemoteFileHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (fileId: string, context: PluginContext<TPluginEvents>) => Promise<MinimumRemoteFileAttributes>;
+export type RemoveHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile, context: PluginContext<TPluginEvents>) => Promise<void>;
+export type PluginLifecycleStage = "validate" | "process" | "upload" | "complete";
+export type PluginHooks<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> = {
+    validate?: ValidationHook<TPluginEvents>;
+    process?: ProcessingHook<TPluginEvents>;
+    upload?: UploadHook<TUploadResult, TPluginEvents>;
+    getRemoteFile?: GetRemoteFileHook<TPluginEvents>;
+    remove?: RemoveHook<TPluginEvents>;
+    complete?: ProcessingHook<TPluginEvents>;
+};
+export interface Plugin<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> {
+    id: string;
+    hooks: PluginHooks<TUploadResult, TPluginEvents>;
+    options?: UploadOptions;
+    events?: TPluginEvents;
+}
+/**
+ * Define an uploader plugin with type safety, context access, and custom events.
+ * This is the universal plugin factory for all plugin types (storage, validators, processors).
+ *
+ * Hooks receive context as a parameter, making it clear when context is available.
+ * Context includes current files, options, and an emit function for custom events.
+ *
+ * @example Basic Plugin
+ * ```typescript
+ * export const ValidatorMaxFiles = defineUploaderPlugin<ValidatorOptions>((options) => ({
+ *   id: 'validator-max-files',
+ *   hooks: {
+ *     validate: async (file, context) => {
+ *       if (context.files.length >= options.maxFiles) {
+ *         throw { message: 'Too many files' }
+ *       }
+ *       return file
+ *     }
+ *   }
+ * }))
+ * ```
+ *
+ * @example Plugin with Custom Events
+ * ```typescript
+ * type CompressionEvents = {
+ *   start: { file: UploadFile; originalSize: number }
+ *   complete: { file: UploadFile; savedBytes: number }
+ * }
+ *
+ * export const PluginImageCompressor = defineUploaderPlugin<
+ *   ImageCompressorOptions,
+ *   CompressionEvents
+ * >((options) => ({
+ *   id: 'image-compressor',
+ *   hooks: {
+ *     process: async (file, context) => {
+ *       context.emit('start', { file, originalSize: file.size })
+ *       // ... compression logic ...
+ *       context.emit('complete', { file, savedBytes: 1000 })
+ *       return file
+ *     }
+ *   }
+ * }))
+ *
+ * // Usage - events are automatically prefixed with plugin ID
+ * uploader.on('image-compressor:complete', ({ file, savedBytes }) => {
+ *   console.log(`Saved ${savedBytes} bytes`)
+ * })
+ * ```
+ */
+export declare function defineUploaderPlugin<TPluginOptions = unknown, TPluginEvents extends Record<string, any> = Record<string, never>>(factory: (options: TPluginOptions) => Plugin<any, TPluginEvents>): (options: TPluginOptions) => Plugin<any, TPluginEvents>;
+/**
+ * INTERNAL TYPES - Not commonly needed by users
+ * Kept exported for edge cases but not primary API
+ */
+export type PreProcessor = (file: UploadFile) => Promise<UploadFile>;
+export type Uploader = (file: Readonly<UploadFile>, emiter: Emitter<Pick<UploaderEvents, "upload:error" | "upload:progress">>) => Promise<string>;
+export type Validator = (file: UploadFile) => Promise<boolean | FileError>;
+export type Processor = (file: UploadFile) => Promise<File | Blob>;
+export interface UploadBlob {
+    blobPath: string;
+}
+type MinimumRemoteFileAttributes = {
+    size: number;
+    mimeType: string;
+    remoteUrl: string;
+};
+export {};

package/dist/runtime/composables/useUploadManager/types.js

@@ -0,0 +1,3 @@
+export function defineUploaderPlugin(factory) {
+  return factory;
+}

package/dist/runtime/composables/useUploadManager/validators/allowed-file-types.d.ts

@@ -0,0 +1,5 @@
+interface ValidatorAllowedFileTypesOptions {
+    allowedFileTypes?: string[];
+}
+export declare const ValidatorAllowedFileTypes: (options: ValidatorAllowedFileTypesOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/{useUploader → useUploadManager}/validators/allowed-file-types.js

@@ -1,12 +1,13 @@
-export const ValidatorAllowedFileTypes = (_, options) => {
+import { defineUploaderPlugin } from "../types.js";
+export const ValidatorAllowedFileTypes = defineUploaderPlugin((options) => {
   return {
     id: "validator-allowed-file-types",
     hooks: {
-      validate: async (file) => {
+      validate: async (file, _context) => {
         if (options.allowedFileTypes && options.allowedFileTypes.includes(file.mimeType) || (options.allowedFileTypes && options.allowedFileTypes.length) === 0)
           return file;
         throw { message: `File type ${file.mimeType} is not allowed` };
       }
     }
   };
-};
+});

package/dist/runtime/composables/useUploadManager/validators/duplicate-file.d.ts

@@ -0,0 +1,13 @@
+interface ValidatorDuplicateFileOptions {
+    /**
+     * Whether to allow duplicate files
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Custom error message for duplicates
+     */
+    errorMessage?: string;
+}
+export declare const ValidatorDuplicateFile: (options: ValidatorDuplicateFileOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/{useUploader → useUploadManager}/validators/duplicate-file.js

@@ -1,13 +1,14 @@
-export const ValidatorDuplicateFile = ({ files }, options) => {
+import { defineUploaderPlugin } from "../types.js";
+export const ValidatorDuplicateFile = defineUploaderPlugin((options) => {
   const { allowDuplicates = false, errorMessage = "This file has already been added" } = options;
   return {
     id: "validator-duplicate-file",
     hooks: {
-      validate: async (file) => {
+      validate: async (file, context) => {
         if (allowDuplicates) {
           return file;
         }
-        const isDuplicate = files.some((existingFile) => {
+        const isDuplicate = context.files.some((existingFile) => {
           const sameSize = existingFile.size === file.size;
           const sameName = existingFile.name === file.name;
           let sameDate = true;
@@ -23,4 +24,4 @@ export const ValidatorDuplicateFile = ({ files }, options) => {
       }
     }
   };
-};
+});

package/dist/runtime/composables/useUploadManager/validators/max-file-size.d.ts

@@ -0,0 +1,5 @@
+interface ValidatorMaxfileSizeOptions {
+    maxFileSize?: number;
+}
+export declare const ValidatorMaxfileSize: (options: ValidatorMaxfileSizeOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/{useUploader → useUploadManager}/validators/max-file-size.js

@@ -1,12 +1,13 @@
-export const ValidatorMaxfileSize = (_, options) => {
+import { defineUploaderPlugin } from "../types.js";
+export const ValidatorMaxfileSize = defineUploaderPlugin((options) => {
   return {
     id: "validator-max-file-size",
     hooks: {
-      validate: async (file) => {
+      validate: async (file, _context) => {
         if (options.maxFileSize && options.maxFileSize !== Infinity && file.size <= options.maxFileSize || options.maxFileSize && options.maxFileSize === Infinity)
           return file;
         throw { message: `File size exceeds the maximum limit of ${options.maxFileSize} bytes` };
       }
     }
   };
-};
+});

package/dist/runtime/composables/useUploadManager/validators/max-files.d.ts

@@ -0,0 +1,5 @@
+interface ValidatorMaxFilesOptions {
+    maxFiles?: number;
+}
+export declare const ValidatorMaxFiles: (options: ValidatorMaxFilesOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export {};

package/dist/runtime/composables/useUploadManager/validators/max-files.js

@@ -0,0 +1,13 @@
+import { defineUploaderPlugin } from "../types.js";
+export const ValidatorMaxFiles = defineUploaderPlugin((options) => {
+  return {
+    id: "validator-max-files",
+    hooks: {
+      validate: async (file, context) => {
+        if (options.maxFiles && options.maxFiles !== Infinity && context.files.length < options.maxFiles || options.maxFiles && options.maxFiles === Infinity)
+          return file;
+        throw { message: `Maximum number of files (${options.maxFiles}) exceeded` };
+      }
+    }
+  };
+});

package/dist/runtime/types/index.d.ts

@@ -1,4 +1,6 @@
 export * from "../components/DialogConfirm.vue.js";
 export * from "../components/DialogAlert.vue.js";
 export * from "./tv.js";
-export * from "../composables/useUploader/types.js";
+export * from "../composables/useUploadManager/types.js";
+export * from "../composables/useUploadManager/plugins/index.js";
+export * from "../composables/useUploadManager/validators/index.js";

package/dist/runtime/types/index.js

@@ -1,4 +1,6 @@
 export * from "../components/DialogConfirm.vue";
 export * from "../components/DialogAlert.vue";
 export * from "./tv.js";
-export * from "../composables/useUploader/types.js";
+export * from "../composables/useUploadManager/types.js";
+export * from "../composables/useUploadManager/plugins/index.js";
+export * from "../composables/useUploadManager/validators/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -34,6 +34,7 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
+    "@azure/storage-file-datalake": "^12.28.1",
     "@nuxt/devtools": "^3.1.1",
     "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
@@ -55,6 +56,11 @@
   "peerDependencies": {
     "@nuxt/ui": "^4.0.0"
   },
+  "peerDependenciesMeta": {
+    "@azure/storage-file-datalake": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",

package/dist/runtime/composables/useUploader/plugins/thumbnail-generator.d.ts

@@ -1,8 +0,0 @@
-import type { PluginFn } from "../types.js";
-interface ThumbnailGeneratorOptions {
-    width?: number;
-    height?: number;
-    quality?: number;
-}
-export declare const PluginThumbnailGenerator: PluginFn<ThumbnailGeneratorOptions>;
-export {};

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

@@ -1,155 +0,0 @@
-import type { Emitter } from "mitt";
-/**
- * PUBLIC API - Types users commonly need
- * These are exported from the main package
- */
-export type FileStatus = "waiting" | "preprocessing" | "uploading" | "postprocessing" | "complete" | "error";
-export type UploadStatus = "waiting" | "uploading";
-export interface FileProgress {
-    percentage: number;
-}
-export interface FileError {
-    message: string;
-    details?: unknown;
-}
-export interface UploadFile<TUploadResult = any> {
-    id: string;
-    name: string;
-    size: number;
-    mimeType: string;
-    data: File | Blob;
-    status: FileStatus;
-    preview?: string;
-    progress: FileProgress;
-    error?: FileError;
-    uploadResult?: TUploadResult;
-    isRemote?: boolean;
-    remoteUrl?: string;
-    meta: Record<string, unknown>;
-}
-export type UploadFn<TUploadResult = any> = (file: UploadFile<TUploadResult>, onProgress: (progress: number) => void) => Promise<TUploadResult>;
-export type GetRemoteFileFn = (fileId: string) => Promise<MinimumRemoteFileAttributes>;
-export interface UploadOptions {
-    /**
-     * Custom plugins to add (in addition to built-in plugins)
-     */
-    plugins?: Plugin[];
-    /**
-     * Validate maximum number of files
-     * - false: disabled
-     * - number: enabled with limit
-     * @default false
-     */
-    maxFiles?: false | number;
-    /**
-     * Validate maximum file size in bytes
-     * - false: disabled
-     * - number: enabled with limit
-     * @default false
-     */
-    maxFileSize?: false | number;
-    /**
-     * Validate allowed file MIME types
-     * - false: disabled
-     * - string[]: enabled with allowed types
-     * @default false
-     */
-    allowedFileTypes?: false | string[];
-    /**
-     * Generate thumbnail previews for images/videos
-     * - false: disabled
-     * - true: enabled with defaults
-     * - object: enabled with custom options
-     * @default false
-     */
-    thumbnails?: false | true | ThumbnailOptions;
-    /**
-     * Compress images before upload
-     * - false: disabled
-     * - true: enabled with defaults
-     * - object: enabled with custom options
-     * @default false
-     */
-    imageCompression?: false | true | ImageCompressionOptions;
-    /**
-     * Automatically start upload after files are added
-     * @default false
-     */
-    autoProceed?: boolean;
-}
-export interface ThumbnailOptions {
-    width?: number;
-    height?: number;
-    quality?: number;
-}
-export interface ImageCompressionOptions {
-    maxWidth?: number;
-    maxHeight?: number;
-    quality?: number;
-    outputFormat?: "jpeg" | "webp" | "png" | "auto";
-    minSizeToCompress?: number;
-    preserveMetadata?: boolean;
-}
-export type UploaderEvents<TUploadResult = any> = {
-    "file:added": Readonly<UploadFile<TUploadResult>>;
-    "file:removed": Readonly<UploadFile<TUploadResult>>;
-    "file:processing": Readonly<UploadFile<TUploadResult>>;
-    "file:error": {
-        file: Readonly<UploadFile<TUploadResult>>;
-        error: FileError;
-    };
-    "upload:start": Array<Readonly<UploadFile<TUploadResult>>>;
-    "upload:complete": Array<Required<Readonly<UploadFile<TUploadResult>>>>;
-    "upload:error": FileError;
-    "upload:progress": {
-        file: Readonly<UploadFile<TUploadResult>>;
-        progress: number;
-    };
-    "files:reorder": {
-        oldIndex: number;
-        newIndex: number;
-    };
-};
-/**
- * PLUGIN API - Types for building custom plugins
- * Only needed if users want to create custom validators/processors
- */
-export type PluginContext = {
-    files: UploadFile[];
-    options: UploadOptions;
-};
-export type ValidationHook = (file: UploadFile, context: PluginContext) => Promise<true | UploadFile>;
-export type ProcessingHook = (file: UploadFile, context: PluginContext) => Promise<UploadFile>;
-export type SetupHook = (context: PluginContext) => Promise<void>;
-export type PluginLifecycleStage = "validate" | "process" | "complete";
-export type PluginHooks = {
-    validate?: ValidationHook;
-    process?: ProcessingHook;
-    complete?: ProcessingHook;
-};
-export interface Plugin {
-    id: string;
-    hooks: PluginHooks;
-    options?: UploadOptions;
-}
-export type PluginFn<TPluginOptions = unknown> = {
-    (context: PluginContext, pluginOptions: TPluginOptions): Plugin;
-    __pluginOptions?: TPluginOptions;
-};
-/**
- * INTERNAL TYPES - Not commonly needed by users
- * Kept exported for edge cases but not primary API
- */
-export type PreProcessor = (file: UploadFile) => Promise<UploadFile>;
-export type Uploader = (file: Readonly<UploadFile>, emiter: Emitter<Pick<UploaderEvents, "upload:error" | "upload:progress">>) => Promise<string>;
-export type Validator = (file: UploadFile) => Promise<boolean | FileError>;
-export type Processor = (file: UploadFile) => Promise<File | Blob>;
-export interface UploadBlob {
-    blobPath: string;
-}
-type MinimumRemoteFileAttributes = {
-    size: number;
-    mimeType: string;
-    remoteUrl: string;
-};
-export {};

package/dist/runtime/composables/useUploader/validators/allowed-file-types.d.ts

@@ -1,6 +0,0 @@
-import type { PluginFn } from "../types.js";
-interface ValidatorAllowedFileTypesOptions {
-    allowedFileTypes?: string[];
-}
-export declare const ValidatorAllowedFileTypes: PluginFn<ValidatorAllowedFileTypesOptions>;
-export {};

package/dist/runtime/composables/useUploader/validators/duplicate-file.d.ts

@@ -1,27 +0,0 @@
-import type { PluginFn } from "../types.js";
-interface ValidatorDuplicateFileOptions {
-    /**
-     * Whether to allow duplicate files
-     * @default false
-     */
-    allowDuplicates?: boolean;
-    /**
-     * Custom error message for duplicates
-     */
-    errorMessage?: string;
-}
-/**
- * Prevents uploading duplicate files based on name, size, and last modified date.
- * Useful for preventing accidental double-uploads in social media scheduling.
- *
- * @example
- * ```ts
- * const uploader = useUpload()
- * uploader.addPlugin(ValidatorDuplicateFile, {
- *   allowDuplicates: false,
- *   errorMessage: 'This file has already been added'
- * })
- * ```
- */
-export declare const ValidatorDuplicateFile: PluginFn<ValidatorDuplicateFileOptions>;
-export {};

package/dist/runtime/composables/useUploader/validators/max-file-size.d.ts

@@ -1,6 +0,0 @@
-import type { PluginFn } from "../types.js";
-interface ValidatorMaxfileSizeOptions {
-    maxFileSize?: number;
-}
-export declare const ValidatorMaxfileSize: PluginFn<ValidatorMaxfileSizeOptions>;
-export {};

package/dist/runtime/composables/useUploader/validators/max-files.d.ts

@@ -1,6 +0,0 @@
-import type { PluginFn } from "../types.js";
-interface ValidatorMaxFilesOptions {
-    maxFiles?: number;
-}
-export declare const ValidatorMaxFiles: PluginFn<ValidatorMaxFilesOptions>;
-export {};

package/dist/runtime/composables/useUploader/validators/max-files.js

@@ -1,12 +0,0 @@
-export const ValidatorMaxFiles = ({ files }, options) => {
-  return {
-    id: "validator-max-files",
-    hooks: {
-      validate: async (file) => {
-        if (options.maxFiles && options.maxFiles !== Infinity && files.length < options.maxFiles || options.maxFiles && options.maxFiles === Infinity)
-          return file;
-        throw { message: `Maximum number of files (${options.maxFiles}) exceeded` };
-      }
-    }
-  };
-};