juxscript 1.0.19 → 1.0.21

package/lib/components/fileupload.ts

@@ -1,79 +1,71 @@
-import { getOrCreateContainer } from './helpers.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear'] as const;
 
-/**
- * FileUpload component options
- */
 export interface FileUploadOptions {
+    label?: string;
     accept?: string;
     multiple?: boolean;
-    maxSize?: number;
     disabled?: boolean;
-    text?: string;
-    dragText?: string;
-    onChange?: (files: FileList) => void;
-    onError?: (error: string) => void;
+    name?: string;
+    icon?: string;
+    required?: boolean;
     style?: string;
     class?: string;
+    onValidate?: (files: File[]) => boolean | string;
 }
 
-/**
- * FileUpload component state
- */
-type FileUploadState = {
+interface FileUploadState extends FormInputState {
+    files: File[];
     accept: string;
     multiple: boolean;
-    maxSize: number;
-    disabled: boolean;
-    text: string;
-    dragText: string;
-    style: string;
-    class: string;
-    files: File[];
-};
-
-/**
- * FileUpload component - Drag & drop file input
- * 
- * Usage:
- *   jux.fileupload('docs', {
- *     accept: '.pdf,.doc,.docx',
- *     multiple: true,
- *     maxSize: 5242880, // 5MB
- *     text: 'Click to upload or drag and drop',
- *     onChange: (files) => console.log(files),
- *     onError: (err) => console.error(err)
- *   }).render('#form');
- */
-export class FileUpload {
-    state: FileUploadState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _onChange?: (files: FileList) => void;
-    private _onError?: (error: string) => void;
+    icon: string;
+}
 
-    constructor(id: string, options: FileUploadOptions = {}) {
-        this._id = id;
-        this.id = id;
-        this._onChange = options.onChange;
-        this._onError = options.onError;
+export class FileUpload extends FormInput<FileUploadState> {
+    private _fileListElement: HTMLElement | null = null;
 
-        this.state = {
-            accept: options.accept ?? '*',
+    constructor(id: string, options: FileUploadOptions = {}) {
+        super(id, {
+            files: [],
+            accept: options.accept ?? '',
             multiple: options.multiple ?? false,
-            maxSize: options.maxSize ?? 10485760, // 10MB default
+            icon: options.icon ?? 'upload',
+            label: options.label ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
-            text: options.text ?? 'Click to upload or drag and drop',
-            dragText: options.dragText ?? 'Drop files here',
+            name: options.name ?? id,
             style: options.style ?? '',
             class: options.class ?? '',
-            files: []
-        };
+            errorMessage: undefined
+        });
+
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
 
     accept(value: string): this {
         this.state.accept = value;
@@ -85,232 +77,297 @@ export class FileUpload {
         return this;
     }
 
-    maxSize(value: number): this {
-        this.state.maxSize = value;
+    icon(value: string): this {
+        this.state.icon = value;
         return this;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
+    clear(): this {
+        this.state.files = [];
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).value = '';
+        }
+        if (this._fileListElement) {
+            this._updateFileList([]);
+        }
+        // 🎯 Fire the clear callback event
+        this._triggerCallback('clear');
         return this;
     }
 
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-    dragText(value: string): this {
-        this.state.dragText = value;
-        return this;
+    getValue(): File[] {
+        return this.state.files;
     }
 
-    style(value: string): this {
-        this.state.style = value;
+    setValue(files: File[]): this {
+        this.state.files = files;
+        if (this._fileListElement) {
+            this._updateFileList(files);
+        }
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+    getFiles(): File[] {
+        return this.getValue();
     }
 
-    onChange(handler: (files: FileList) => void): this {
-        this._onChange = handler;
-        return this;
-    }
+    protected _validateValue(files: File[]): boolean | string {
+        const { required } = this.state;
 
-    onError(handler: (error: string) => void): this {
-        this._onError = handler;
-        return this;
-    }
+        if (required && files.length === 0) {
+            return 'Please select at least one file';
+        }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _validateFiles(files: FileList): boolean {
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            if (file.size > this.state.maxSize) {
-                const maxMB = Math.round(this.state.maxSize / 1048576);
-                const error = `File "${file.name}" exceeds maximum size of ${maxMB}MB`;
-                if (this._onError) {
-                    this._onError(error);
-                }
-                return false;
+        if (this._onValidate) {
+            const result = this._onValidate(files);
+            if (result !== true) {
+                return result || 'Invalid files';
             }
         }
+
         return true;
     }
 
-    private _handleFiles(files: FileList): void {
-        if (this._validateFiles(files)) {
-            this.state.files = Array.from(files);
-            this._updateFileList();
-            if (this._onChange) {
-                this._onChange(files);
-            }
-        }
-    }
+    protected _buildInputElement(): HTMLElement {
+        const { accept, multiple, required, disabled, name } = this.state;
 
-    private _updateFileList(): void {
-        const fileList = document.getElementById(`${this._id}-list`);
-        if (fileList) {
-            fileList.innerHTML = '';
-            this.state.files.forEach((file, index) => {
-                const item = document.createElement('div');
-                item.className = 'jux-fileupload-file';
-
-                const name = document.createElement('span');
-                name.className = 'jux-fileupload-file-name';
-                name.textContent = file.name;
-
-                const size = document.createElement('span');
-                size.className = 'jux-fileupload-file-size';
-                const sizeKB = Math.round(file.size / 1024);
-                size.textContent = `${sizeKB} KB`;
-
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'jux-fileupload-file-remove';
-                removeBtn.textContent = '×';
-                removeBtn.addEventListener('click', () => {
-                    this.state.files.splice(index, 1);
-                    this._updateFileList();
-                });
-
-                item.appendChild(name);
-                item.appendChild(size);
-                item.appendChild(removeBtn);
-                fileList.appendChild(item);
-            });
-        }
-    }
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.className = 'jux-fileupload-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.required = required;
+        input.disabled = disabled;
 
-    getFiles(): File[] {
-        return this.state.files;
-    }
+        if (accept) input.accept = accept;
+        if (multiple) input.multiple = multiple;
 
-    clear(): void {
-        this.state.files = [];
-        this._updateFileList();
-        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
-        if (input) {
-            input.value = '';
-        }
+        return input;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`FileUpload: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { accept, multiple, disabled, text, dragText, style, class: className } = this.state;
+        const { icon, style, class: className } = this.state;
 
+        // Build wrapper
         const wrapper = document.createElement('div');
-        wrapper.className = 'jux-fileupload';
+        wrapper.className = 'jux-input jux-fileupload';
         wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        if (className) {
-            wrapper.className += ` ${className}`;
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
         }
 
-        if (style) {
-            wrapper.setAttribute('style', style);
+        // Hidden file input
+        const inputEl = this._buildInputElement() as HTMLInputElement;
+        this._inputElement = inputEl;
+        wrapper.appendChild(inputEl);
+
+        // Button container
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'jux-fileupload-button-container';
+
+        if (icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'jux-fileupload-icon';
+            iconEl.appendChild(renderIcon(icon));
+            buttonContainer.appendChild(iconEl);
         }
 
-        // Hidden file input
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.className = 'jux-fileupload-input';
-        input.id = `${this._id}-input`;
-        input.accept = accept;
-        input.multiple = multiple;
-        input.disabled = disabled;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'jux-fileupload-button';
+        button.textContent = 'Choose File(s)';
+        button.disabled = this.state.disabled;
 
-        input.addEventListener('change', (e) => {
-            const target = e.target as HTMLInputElement;
-            if (target.files && target.files.length > 0) {
-                this._handleFiles(target.files);
-            }
-        });
+        buttonContainer.appendChild(button);
+        wrapper.appendChild(buttonContainer);
 
-        // Drop zone
-        const dropzone = document.createElement('div');
-        dropzone.className = 'jux-fileupload-dropzone';
+        // File list
+        const fileList = document.createElement('div');
+        fileList.className = 'jux-fileupload-list';
+        this._fileListElement = fileList;
+        wrapper.appendChild(fileList);
 
-        const icon = document.createElement('div');
-        icon.className = 'jux-fileupload-icon';
-        icon.textContent = '📁';
+        // Error element
+        wrapper.appendChild(this._renderError());
 
-        const textEl = document.createElement('div');
-        textEl.className = 'jux-fileupload-text';
-        textEl.textContent = text;
+        // Button click triggers file input
+        button.addEventListener('click', () => inputEl.click());
 
-        dropzone.appendChild(icon);
-        dropzone.appendChild(textEl);
+        // Wire events
+        this._wireStandardEvents(wrapper);
 
-        // Click to open file dialog
-        dropzone.addEventListener('click', () => {
-            if (!disabled) {
-                input.click();
-            }
-        });
+        // Wire file-specific sync
+        const filesSync = this._syncBindings.find(b => b.property === 'files' || b.property === 'value');
 
-        // Drag & drop
-        dropzone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            if (!disabled) {
-                dropzone.classList.add('jux-fileupload-dropzone-active');
-                textEl.textContent = dragText;
-            }
-        });
+        if (filesSync) {
+            const { stateObj, toState, toComponent } = filesSync;
 
-        dropzone.addEventListener('dragleave', () => {
-            dropzone.classList.remove('jux-fileupload-dropzone-active');
-            textEl.textContent = text;
-        });
+            const transformToState = toState || ((v: File[]) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
 
-        dropzone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropzone.classList.remove('jux-fileupload-dropzone-active');
-            textEl.textContent = text;
+            let isUpdating = false;
 
-            if (!disabled && e.dataTransfer?.files) {
-                this._handleFiles(e.dataTransfer.files);
-            }
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputEl.addEventListener('change', () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const files = Array.from(inputEl.files || []);
+                this.state.files = files;
+                this._updateFileList(files);
+                this._clearError();
+
+                const transformed = transformToState(files);
+                stateObj.set(transformed);
+
+                // 🎯 Fire the callback events
+                this._triggerCallback('change', files);
+                this._triggerCallback('filesSelected', files);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputEl.addEventListener('change', () => {
+                const files = Array.from(inputEl.files || []);
+                this.state.files = files;
+                this._updateFileList(files);
+                this._clearError();
+
+                // 🎯 Fire the callback events
+                this._triggerCallback('change', files);
+                this._triggerCallback('filesSelected', files);
+            });
+        }
+
+        // Always add blur validation
+        inputEl.addEventListener('blur', () => {
+            this.validate();
         });
 
-        // File list
-        const fileList = document.createElement('div');
-        fileList.className = 'jux-fileupload-list';
-        fileList.id = `${this._id}-list`;
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v: any) => String(v));
+            labelSync.stateObj.subscribe((val: any) => {
+                this.label(transform(val));
+            });
+        }
 
-        wrapper.appendChild(input);
-        wrapper.appendChild(dropzone);
-        wrapper.appendChild(fileList);
         container.appendChild(wrapper);
+        this._injectFileUploadStyles();
+        this._injectFormStyles();
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('FileUpload.renderTo: Invalid component');
+    private _updateFileList(files: File[]): void {
+        if (!this._fileListElement) return;
+
+        this._fileListElement.innerHTML = '';
+
+        if (files.length === 0) {
+            this._fileListElement.textContent = 'No files selected';
+            return;
         }
-        return this.render(`#${juxComponent._id}`);
+
+        files.forEach(file => {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'jux-fileupload-item';
+            fileItem.textContent = `${file.name} (${this._formatFileSize(file.size)})`;
+            this._fileListElement!.appendChild(fileItem);
+        });
+    }
+
+    private _formatFileSize(bytes: number): string {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+
+    private _injectFileUploadStyles(): void {
+        const styleId = 'jux-fileupload-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-fileupload-input {
+        display: none;
+      }
+
+      .jux-fileupload-button-container {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .jux-fileupload-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .jux-fileupload-button {
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .jux-fileupload-button:hover:not(:disabled) {
+        background: #2563eb;
+      }
+
+      .jux-fileupload-button:disabled {
+        background: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .jux-fileupload-list {
+        margin-top: 12px;
+        font-size: 14px;
+        color: #6b7280;
+      }
+
+      .jux-fileupload-item {
+        padding: 8px;
+        background: #f3f4f6;
+        border-radius: 4px;
+        margin-bottom: 4px;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }