handy-uploader 1.1.8 → 2.0.1

package/dist/lib/language.d.ts

@@ -0,0 +1,39 @@
+interface Translation {
+    insertFile: string;
+    insertNewFile: string;
+    add: string;
+    delete: string;
+    edit: string;
+    deleteDialog: {
+        message: string;
+        cancel: string;
+    };
+    table: {
+        thumb: string;
+        name: string;
+        size: string;
+        tags?: string;
+        action: {
+            action: string;
+            deleteTooltip: string;
+        };
+    };
+    size: {
+        kb: string;
+        mb: string;
+    };
+    maxFileSizeAlert?: string;
+    maxFileCountAlert: string;
+    fileName: string;
+    fileDescription: string;
+    fileTags: string;
+}
+interface Language {
+    en: Translation;
+    fa: Translation;
+    fr: Translation;
+    ch: Translation;
+    ar: Translation;
+}
+export declare const languages: Language;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,129 @@
+export interface FileData {
+    name: string;
+    format: string;
+    base64: string;
+    size: number;
+    tags: string[];
+    description: string | null;
+    showDetailState: boolean;
+}
+export interface DocumentAttachment {
+    file: FileData;
+}
+export type FileUploaderType = 'simple' | 'thumbnail' | 'table';
+export type CardType = 'default' | 'outlined' | 'shaped' | 'raised' | 'tile';
+export type LanguageCode = 'en' | 'fa' | 'fr' | 'ch' | 'ar';
+export interface FileSizeResult {
+    text: string;
+    color: string;
+}
+export interface FileIconProps {
+    icon: string;
+    color: string;
+}
+export interface Translation {
+    insertFile: string;
+    insertNewFile: string;
+    add: string;
+    delete: string;
+    edit: string;
+    deleteDialog: {
+        message: string;
+        cancel: string;
+    };
+    table: {
+        thumb: string;
+        name: string;
+        size: string;
+        tags?: string;
+        action: {
+            action: string;
+            deleteTooltip: string;
+        };
+    };
+    size: {
+        kb: string;
+        mb: string;
+    };
+    maxFileSizeAlert?: string;
+    maxFileCountAlert: string;
+    fileName: string;
+    fileDescription: string;
+    fileTags: string;
+}
+export interface LanguageCollection {
+    [key: string]: Translation;
+}
+export interface BaseUploaderProps {
+    documentAttachment: DocumentAttachment[];
+    lang?: LanguageCode;
+    thumb?: boolean;
+    cols?: number;
+    editPermission?: boolean;
+    deletePermission?: boolean;
+    selectedLang: LanguageCollection;
+}
+export interface CardThemeProps {
+    cardType?: CardType;
+    outlined?: boolean;
+    raised?: boolean;
+    shaped?: boolean;
+    tile?: boolean;
+}
+export interface HandyUploaderProps extends BaseUploaderProps, CardThemeProps {
+    maxFileSize?: number;
+    fileUploaderType?: FileUploaderType;
+    maxFileCount?: number;
+    badgeCounter?: boolean;
+    btnColor?: string;
+    imageCompressor?: boolean;
+    imageCompressLevel?: number;
+    fileAccept?: string;
+    tableThumbColumn?: boolean;
+    tableFixedHeader?: boolean;
+    tableHeight?: number;
+    rtlSupport?: boolean;
+    changeFileName?: boolean;
+    addFileDescription?: boolean;
+    addFileTag?: boolean;
+    tags?: string[];
+    customLang?: LanguageCollection | null;
+    insertPermission?: boolean;
+}
+export interface UploaderEvents {
+    openDeleteDialog: (index: number, deleteId: string) => void;
+    openEditDocumentDialog: (item: DocumentAttachment, index: number) => void;
+    setCardTheme?: () => void;
+}
+export interface HandyUploaderEvents extends UploaderEvents {
+    updateCardType: (value: CardType) => void;
+    updateBadgeCounter: (value: boolean) => void;
+    updateMaxFileCount: (value: number) => void;
+    updateMaxFileSize: (value: number) => void;
+    updateImageCompressor: (value: boolean) => void;
+    updateImageCompressLevel: (value: number) => void;
+    updateFileAccept: (value: string) => void;
+    updateThumb: (value: boolean) => void;
+    updateChangeFileName: (value: boolean) => void;
+    updateAddFileDescription: (value: boolean) => void;
+    updateTableThumbColumn: (value: boolean) => void;
+    updateTableFixedHeader: (value: boolean) => void;
+    updateTableHeight: (value: number) => void;
+    updateLang: (value: LanguageCode) => void;
+    updateDocumentAttachment: (value: DocumentAttachment[]) => void;
+}
+export type MimeType = 'image/jpeg' | 'image/png' | 'image/tiff' | 'image/bmp' | string;
+export interface ProcessedFile {
+    base64: string;
+    size: string;
+    name: string;
+    tags: string[];
+    description: string;
+    showDetailState: boolean;
+    format: string;
+}
+export interface SnackbarConfig {
+    show: boolean;
+    text: string;
+    color: string;
+}

package/dist/utils/documentation.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Component documentation and usage examples
+ */
+export interface PropDocumentation {
+    name: string;
+    type: string;
+    required: boolean;
+    default?: any;
+    description: string;
+    examples?: any[];
+    validation?: string;
+}
+export interface ComponentDocumentation {
+    name: string;
+    description: string;
+    props: PropDocumentation[];
+    events: EventDocumentation[];
+    slots: SlotDocumentation[];
+    examples: ComponentExample[];
+}
+export interface EventDocumentation {
+    name: string;
+    description: string;
+    payload?: string;
+    example?: string;
+}
+export interface SlotDocumentation {
+    name: string;
+    description: string;
+    props?: string;
+    example?: string;
+}
+export interface ComponentExample {
+    title: string;
+    description: string;
+    code: string;
+}
+/**
+ * HandyUploader component documentation
+ */
+export declare const handyUploaderDocumentation: ComponentDocumentation;
+/**
+ * Usage examples for different scenarios
+ */
+export declare const usageExamples: {
+    /**
+     * Basic file upload
+     */
+    basic: string;
+    /**
+     * Advanced configuration
+     */
+    advanced: string;
+    /**
+     * TypeScript usage
+     */
+    typescript: string;
+};
+/**
+ * Best practices and recommendations
+ */
+export declare const bestPractices: {
+    performance: string[];
+    accessibility: string[];
+    userExperience: string[];
+    security: string[];
+};
+/**
+ * Troubleshooting guide
+ */
+export declare const troubleshooting: {
+    commonIssues: {
+        issue: string;
+        solutions: string[];
+    }[];
+};
+/**
+ * Migration guide for upgrading
+ */
+export declare const migrationGuide: {
+    fromV1: string[];
+    breakingChanges: string[];
+};
+/**
+ * Get documentation for a specific component
+ */
+export declare function getComponentDocumentation(componentName: string): ComponentDocumentation | null;
+/**
+ * Generate prop validation code
+ */
+export declare function generatePropValidation(props: PropDocumentation[]): string;
+/**
+ * Generate TypeScript interface from props
+ */
+export declare function generateTypeScriptInterface(componentName: string, props: PropDocumentation[]): string;

package/dist/utils/fileUtils.d.ts

@@ -0,0 +1,41 @@
+import type { FileSizeResult, FileIconProps, MimeType } from '../types';
+/**
+ * Formats file size into human-readable format with appropriate color coding
+ */
+export declare function formatFileSize(size: number): FileSizeResult;
+/**
+ * Determines file type based on file extension or MIME type
+ */
+export declare function getFileType(fileName: string, mimeType?: string): string;
+/**
+ * Gets appropriate icon and color for file type
+ */
+export declare function getFileIcon(fileName: string, mimeType?: string): FileIconProps;
+/**
+ * Checks if file is an image type
+ */
+export declare function isImageFile(fileName: string, mimeType?: string): boolean;
+/**
+ * Validates file size against maximum allowed size
+ */
+export declare function validateFileSize(fileSize: number, maxSize: number): boolean;
+/**
+ * Validates file count against maximum allowed count
+ */
+export declare function validateFileCount(currentCount: number, maxCount: number): boolean;
+/**
+ * Gets MIME type from file extension
+ */
+export declare function getMimeTypeFromExtension(fileName: string): MimeType;
+/**
+ * Constructs proper data URL for base64 image data
+ */
+export declare function constructImageDataUrl(base64: string, format: string): string;
+/**
+ * Compresses image using canvas
+ */
+export declare function compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<string>;
+/**
+ * Converts file to base64 string
+ */
+export declare function fileToBase64(file: File): Promise<string>;

package/dist/utils/propValidation.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Validation utilities for component props
+ */
+export interface ValidationResult {
+    isValid: boolean;
+    errors: string[];
+    warnings: string[];
+}
+/**
+ * Validates file uploader type
+ */
+export declare function validateFileUploaderType(value: any): ValidationResult;
+/**
+ * Validates card type
+ */
+export declare function validateCardType(value: any): ValidationResult;
+/**
+ * Validates language code
+ */
+export declare function validateLanguageCode(value: any): ValidationResult;
+/**
+ * Validates file size (in bytes)
+ */
+export declare function validateFileSize(value: any): ValidationResult;
+/**
+ * Validates file count
+ */
+export declare function validateFileCount(value: any): ValidationResult;
+/**
+ * Validates image compression level
+ */
+export declare function validateCompressionLevel(value: any): ValidationResult;
+/**
+ * Validates file accept pattern
+ */
+export declare function validateFileAccept(value: any): ValidationResult;
+/**
+ * Validates columns count for grid layout
+ */
+export declare function validateColumns(value: any): ValidationResult;
+/**
+ * Validates table height
+ */
+export declare function validateTableHeight(value: any): ValidationResult;
+/**
+ * Validates document attachment array
+ */
+export declare function validateDocumentAttachment(value: any): ValidationResult;
+/**
+ * Comprehensive prop validation for HandyUploader component
+ */
+export declare function validateHandyUploaderProps(props: Record<string, any>): ValidationResult;
+/**
+ * Creates a prop validator function for Vue components
+ */
+export declare function createPropValidator<T>(validator: (value: any) => ValidationResult): (value: T) => boolean;
+/**
+ * Prop validators for Vue components
+ */
+export declare const propValidators: {
+    fileUploaderType: (value: unknown) => boolean;
+    cardType: (value: unknown) => boolean;
+    languageCode: (value: unknown) => boolean;
+    fileSize: (value: unknown) => boolean;
+    fileCount: (value: unknown) => boolean;
+    compressionLevel: (value: unknown) => boolean;
+    fileAccept: (value: unknown) => boolean;
+    columns: (value: unknown) => boolean;
+    tableHeight: (value: unknown) => boolean;
+    documentAttachment: (value: unknown) => boolean;
+};

package/package.json

@@ -1,71 +1,74 @@
 {
   "name": "handy-uploader",
-  "version": "1.1.8",
-  "description": "Complete and simple file uploader with an image compressor in Vue.js. Choice Theme : Thumbnail, Simple, Table, Add custom fields, Image compressor, Manage files count, Manage files size, Multi language support , ...",
-  "author": "ali jahanpak",
-  "license": "MIT",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build-package": "vue-cli-service build --target lib --name handyUploader ./src/components/index.js"
-  },
-  "main": "dist/handyUploader.common.js",
-  "dependencies": {
-    "core-js": "^3.15.2",
-    "css-loader": "^3.6.0",
-    "vue": "^2.6.14",
-    "vuetify": "^2.5.6"
-  },
-  "devDependencies": {
-    "@mdi/font": "^5.8.55",
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "sass": "^1.35.2",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-vuetify": "^2.4.1",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.3.0"
+  "version": "2.0.1",
+  "description": "A comprehensive Vue 3 file uploader component library with video thumbnail generation and multiple upload styles",
+  "main": "dist/handy-uploader.umd.js",
+  "module": "dist/handy-uploader.es.js",
+  "types": "dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/handy-uploader.es.js",
+      "require": "./dist/handy-uploader.umd.js",
+      "types": "./dist/lib/index.d.ts"
+    }
   },
   "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
+    "dist"
   ],
   "keywords": [
-    "vue.js",
     "vue",
-    "nuxt",
-    "image",
-    "responsive",
-    "fileUploader",
-    "vue-file-upload",
-    "vue-file-component",
-    "vue-image-upload",
-    "upload",
+    "vue3",
     "uploader",
-    "easy-upload",
-    "component",
-    "vue-component",
-    "multiple",
-    "compressor",
-    "vuetify"
+    "file-upload",
+    "video-thumbnail",
+    "drag-drop",
+    "vuetify",
+    "typescript",
+    "component-library"
   ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/alijahanpak/handy-uploader.git"
+    "url": "https://github.com/yourusername/handy-uploader.git"
   },
+  "homepage": "https://github.com/yourusername/handy-uploader#readme",
   "bugs": {
-    "url": "https://github.com/alijahanpak/handy-uploader/issues"
+    "url": "https://github.com/yourusername/handy-uploader/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-lib && npm run build-types",
+    "build-lib": "vite build --mode lib",
+    "build-types": "vue-tsc --project tsconfig.build.json",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build"
   },
-  "homepage": "https://github.com/alijahanpak/handy-uploader#readme"
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.4.47",
+    "@rushstack/eslint-patch": "^1.7.2",
+    "@types/node": "^20.11.9",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.4",
+    "typescript": "~5.3.3",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15",
+    "vue-tsc": "^1.8.27",
+    "vuetify": "^3.5.1"
+  }
 }

package/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
-};

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 ali jahanpak
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>handyUploader demo</title>
-<script src="./handyUploader.umd.js"></script>
-
-<link rel="stylesheet" href="./handyUploader.css">
-
-
-<script>
-console.log(handyUploader)
-</script>