nuxt-ui-elements 0.1.24 → 0.1.25

package/dist/runtime/composables/useUploader/plugins/image-compressor.js

@@ -0,0 +1,111 @@
+export const PluginImageCompressor = (_, pluginOptions) => {
+  const {
+    maxWidth = 1920,
+    maxHeight = 1920,
+    quality = 0.85,
+    outputFormat = "auto",
+    minSizeToCompress = 1e5,
+    // 100KB
+    preserveMetadata = true
+  } = pluginOptions;
+  return {
+    id: "image-compressor",
+    hooks: {
+      process: async (file) => {
+        if (!file.mimeType.startsWith("image/")) {
+          return file;
+        }
+        if (file.mimeType === "image/gif") {
+          return file;
+        }
+        if (file.mimeType === "image/svg+xml") {
+          return file;
+        }
+        if (file.size < minSizeToCompress) {
+          return file;
+        }
+        try {
+          const sourceUrl = URL.createObjectURL(file.data);
+          const image = new Image();
+          image.src = sourceUrl;
+          await new Promise((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = () => reject(new Error("Failed to load image"));
+          });
+          const needsResize = image.width > maxWidth || image.height > maxHeight;
+          if (!needsResize && outputFormat === "auto") {
+            URL.revokeObjectURL(sourceUrl);
+            return file;
+          }
+          let targetWidth = image.width;
+          let targetHeight = image.height;
+          if (needsResize) {
+            const widthRatio = maxWidth / image.width;
+            const heightRatio = maxHeight / image.height;
+            const ratio = Math.min(widthRatio, heightRatio);
+            targetWidth = Math.round(image.width * ratio);
+            targetHeight = Math.round(image.height * ratio);
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = targetWidth;
+          canvas.height = targetHeight;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            throw new Error("Could not get canvas context");
+          }
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = "high";
+          ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+          let mimeType = file.mimeType;
+          if (outputFormat === "jpeg") {
+            mimeType = "image/jpeg";
+          } else if (outputFormat === "webp") {
+            mimeType = "image/webp";
+          } else if (outputFormat === "png") {
+            mimeType = "image/png";
+          }
+          const compressedBlob = await new Promise((resolve, reject) => {
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve(blob);
+                } else {
+                  reject(new Error("Failed to compress image"));
+                }
+              },
+              mimeType,
+              quality
+            );
+          });
+          URL.revokeObjectURL(sourceUrl);
+          if (compressedBlob.size < file.size) {
+            let newId = file.id;
+            if (outputFormat !== "auto" && outputFormat !== file.meta.extension) {
+              const extension = outputFormat === "jpeg" ? "jpg" : outputFormat;
+              newId = file.id.replace(/\.[^.]+$/, `.${extension}`);
+            }
+            file.meta.originalSize = file.size;
+            file.meta.compressionRatio = ((file.size - compressedBlob.size) / file.size * 100).toFixed(1);
+            return {
+              ...file,
+              id: newId,
+              data: compressedBlob,
+              size: compressedBlob.size,
+              mimeType,
+              meta: {
+                ...file.meta,
+                compressed: true,
+                originalSize: file.size,
+                compressionRatio: file.meta.compressionRatio
+              }
+            };
+          }
+          return file;
+        } catch (error) {
+          console.warn(`Image compression failed for ${file.name}:`, error);
+          return file;
+        }
+      }
+    }
+  };
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+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/plugins/thumbnail-generator.js

@@ -0,0 +1,65 @@
+export const PluginThumbnailGenerator = (_options, pluginOptions) => {
+  return {
+    id: "thumbnail-generator",
+    hooks: {
+      process: async (file) => {
+        const { width = 100, height = 100, quality = 0.7 } = pluginOptions;
+        const sourceUrl = file.isRemote ? file.remoteUrl : URL.createObjectURL(file.data);
+        if (file.mimeType.startsWith("image/")) {
+          const image = new Image();
+          image.crossOrigin = "anonymous";
+          image.src = sourceUrl;
+          await new Promise((resolve) => {
+            image.onload = resolve;
+          });
+          const aspectRatio = image.width / image.height;
+          let targetWidth = width;
+          let targetHeight = height;
+          if (aspectRatio > 1) {
+            targetHeight = width / aspectRatio;
+          } else {
+            targetWidth = height * aspectRatio;
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = targetWidth;
+          canvas.height = targetHeight;
+          const ctx = canvas.getContext("2d");
+          if (ctx) {
+            ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+            const thumbnailPreviewUrl = canvas.toDataURL("image/jpeg", quality);
+            file.preview = thumbnailPreviewUrl;
+          }
+        } else if (file.mimeType.startsWith("video/")) {
+          const video = document.createElement("video");
+          video.src = sourceUrl;
+          video.crossOrigin = "anonymous";
+          video.currentTime = 1;
+          await new Promise((resolve) => {
+            video.onloadeddata = () => {
+              video.onseeked = resolve;
+              video.currentTime = 1;
+            };
+          });
+          const aspectRatio = video.videoWidth / video.videoHeight;
+          let targetWidth = width;
+          let targetHeight = height;
+          if (aspectRatio > 1) {
+            targetHeight = width / aspectRatio;
+          } else {
+            targetWidth = height * aspectRatio;
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = targetWidth;
+          canvas.height = targetHeight;
+          const ctx = canvas.getContext("2d");
+          if (ctx) {
+            ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
+            const thumbnailPreviewUrl = canvas.toDataURL("image/jpeg", quality);
+            file.preview = thumbnailPreviewUrl;
+          }
+        }
+        return file;
+      }
+    }
+  };
+};

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

@@ -0,0 +1,155 @@
+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

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

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

@@ -0,0 +1,12 @@
+export const ValidatorAllowedFileTypes = (_, options) => {
+  return {
+    id: "validator-allowed-file-types",
+    hooks: {
+      validate: async (file) => {
+        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/useUploader/validators/duplicate-file.d.ts

@@ -0,0 +1,27 @@
+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/duplicate-file.js

@@ -0,0 +1,26 @@
+export const ValidatorDuplicateFile = ({ files }, options) => {
+  const { allowDuplicates = false, errorMessage = "This file has already been added" } = options;
+  return {
+    id: "validator-duplicate-file",
+    hooks: {
+      validate: async (file) => {
+        if (allowDuplicates) {
+          return file;
+        }
+        const isDuplicate = files.some((existingFile) => {
+          const sameSize = existingFile.size === file.size;
+          const sameName = existingFile.name === file.name;
+          let sameDate = true;
+          if (file.data instanceof File && existingFile.data instanceof File) {
+            sameDate = existingFile.data.lastModified === file.data.lastModified;
+          }
+          return sameSize && sameName && sameDate;
+        });
+        if (isDuplicate) {
+          throw { message: errorMessage, details: { fileName: file.name } };
+        }
+        return file;
+      }
+    }
+  };
+};

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

@@ -0,0 +1,4 @@
+export * from "./allowed-file-types.js";
+export * from "./max-file-size.js";
+export * from "./max-files.js";
+export * from "./duplicate-file.js";

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

@@ -0,0 +1,4 @@
+export * from "./allowed-file-types.js";
+export * from "./max-file-size.js";
+export * from "./max-files.js";
+export * from "./duplicate-file.js";

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

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

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

@@ -0,0 +1,12 @@
+export const ValidatorMaxfileSize = (_, options) => {
+  return {
+    id: "validator-max-file-size",
+    hooks: {
+      validate: async (file) => {
+        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/useUploader/validators/max-files.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+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` };
+      }
+    }
+  };
+};

package/dist/runtime/index.d.ts

@@ -0,0 +1 @@
+export * from "./types/index.js";

package/dist/runtime/index.js

@@ -0,0 +1 @@
+export * from "./types/index.js";

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

@@ -1,3 +1,4 @@
 export * from "../components/DialogConfirm.vue.js";
 export * from "../components/DialogAlert.vue.js";
 export * from "./tv.js";
+export * from "../composables/useUploader/types.js";

package/dist/runtime/types/index.js

@@ -1,3 +1,4 @@
 export * from "../components/DialogConfirm.vue";
 export * from "../components/DialogAlert.vue";
 export * from "./tv.js";
+export * from "../composables/useUploader/types.js";

package/dist/types.d.mts

@@ -1,3 +1,5 @@
 export { default } from './module.mjs'
 
 export { type ModuleOptions } from './module.mjs'
+
+export * from '../dist/runtime/types/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -28,6 +28,7 @@
     "@internationalized/date": "^3.10.1",
     "@nuxt/kit": "^4.2.2",
     "@sindresorhus/slugify": "^3.0.0",
+    "mitt": "^3.0.1",
     "plur": "^6.0.0",
     "scule": "^1.3.0",
     "tailwind-variants": "^3.2.2"
@@ -37,7 +38,7 @@
     "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.2",
-    "@nuxt/test-utils": "^3.22.0",
+    "@nuxt/test-utils": "^3.23.0",
     "@types/culori": "^4.0.1",
     "@types/node": "latest",
     "@vitest/coverage-v8": "^4.0.16",