juxscript 1.1.80 → 1.1.81

package/lib/components/fileupload.js

@@ -1,22 +1,26 @@
-import { FormInput } from './base/FormInput.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear'];
-export class FileUpload extends FormInput {
+export class FileUpload extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
+            name: options.name ?? id,
+            errorMessage: undefined,
             files: [],
             accept: options.accept ?? '',
             multiple: options.multiple ?? false,
-            icon: options.icon ?? 'upload',
-            label: options.label ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
+            icon: options.icon ?? 'upload'
         });
         this._fileListElement = null;
         if (options.onValidate) {
@@ -32,12 +36,6 @@ export class FileUpload extends FormInput {
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
     accept(value) {
         this.state.accept = value;
         return this;
@@ -56,9 +54,8 @@ export class FileUpload extends FormInput {
             this._inputElement.value = '';
         }
         if (this._fileListElement) {
-            this._updateFileList([]);
+            this._fileListElement.innerHTML = '';
         }
-        // 🎯 Fire the clear callback event
         this._triggerCallback('clear');
         return this;
     }
@@ -70,13 +67,25 @@ export class FileUpload extends FormInput {
     }
     setValue(files) {
         this.state.files = files;
-        if (this._fileListElement) {
-            this._updateFileList(files);
-        }
+        this._updateFileList();
         return this;
     }
-    getFiles() {
-        return this.getValue();
+    validate() {
+        this._hasBeenValidated = true;
+        const files = this.getValue();
+        const result = this._validateValue(files);
+        if (result === true) {
+            this._clearError();
+            return true;
+        }
+        else {
+            this._showError(result);
+            return false;
+        }
+    }
+    isValid() {
+        const files = this.getValue();
+        return this._validateValue(files) === true;
     }
     _validateValue(files) {
         const { required } = this.state;
@@ -98,14 +107,45 @@ export class FileUpload extends FormInput {
         input.className = 'jux-fileupload-input';
         input.id = `${this._id}-input`;
         input.name = name;
+        input.accept = accept;
+        input.multiple = multiple;
         input.required = required;
         input.disabled = disabled;
-        if (accept)
-            input.accept = accept;
-        if (multiple)
-            input.multiple = multiple;
+        input.style.display = 'none'; // Hidden, triggered by button
         return input;
     }
+    _updateFileList() {
+        if (!this._fileListElement)
+            return; // Safety check
+        this._fileListElement.innerHTML = '';
+        if (this.state.files.length === 0) {
+            return;
+        }
+        this.state.files.forEach((file, index) => {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'jux-fileupload-item';
+            fileItem.innerHTML = `
+                <span class="jux-fileupload-filename">${file.name}</span>
+                <span class="jux-fileupload-filesize">${this._formatFileSize(file.size)}</span>
+                <button class="jux-fileupload-remove" data-index="${index}">×</button>
+            `;
+            const removeBtn = fileItem.querySelector('.jux-fileupload-remove');
+            removeBtn?.addEventListener('click', () => {
+                this.state.files = this.state.files.filter((_, i) => i !== index);
+                this._updateFileList();
+                this._triggerCallback('change', this.state.files);
+            });
+            this._fileListElement.appendChild(fileItem); // ✅ Non-null assertion safe here
+        });
+    }
+    _formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
@@ -176,7 +216,7 @@ export class FileUpload extends FormInput {
                 isUpdating = true;
                 const files = Array.from(inputEl.files || []);
                 this.state.files = files;
-                this._updateFileList(files);
+                this._updateFileList();
                 this._clearError();
                 const transformed = transformToState(files);
                 stateObj.set(transformed);
@@ -191,7 +231,7 @@ export class FileUpload extends FormInput {
             inputEl.addEventListener('change', () => {
                 const files = Array.from(inputEl.files || []);
                 this.state.files = files;
-                this._updateFileList(files);
+                this._updateFileList();
                 this._clearError();
                 // 🎯 Fire the callback events
                 this._triggerCallback('change', files);
@@ -200,7 +240,9 @@ export class FileUpload extends FormInput {
         }
         // Always add blur validation
         inputEl.addEventListener('blur', () => {
-            this.validate();
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
         });
         // Sync label changes
         const labelSync = this._syncBindings.find(b => b.property === 'label');
@@ -211,29 +253,12 @@ export class FileUpload extends FormInput {
             });
         }
         container.appendChild(wrapper);
-        return this;
-    }
-    _updateFileList(files) {
-        if (!this._fileListElement)
-            return;
-        this._fileListElement.innerHTML = '';
-        if (files.length === 0) {
-            this._fileListElement.textContent = 'No files selected';
-            return;
-        }
-        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);
+        requestAnimationFrame(() => {
+            if (window.lucide) {
+                window.lucide.createIcons();
+            }
         });
-    }
-    _formatFileSize(bytes) {
-        if (bytes < 1024)
-            return `${bytes} B`;
-        if (bytes < 1024 * 1024)
-            return `${(bytes / 1024).toFixed(1)} KB`;
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        return this;
     }
 }
 export function fileupload(id, options = {}) {

package/lib/components/fileupload.ts

@@ -1,6 +1,6 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
-import { BaseComponent } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -19,29 +19,32 @@ export interface FileUploadOptions {
     onValidate?: (files: File[]) => boolean | string;
 }
 
-interface FileUploadState extends FormInputState {
+interface FileUploadState extends BaseState {
     files: File[];
     accept: string;
     multiple: boolean;
     icon: string;
 }
 
-export class FileUpload extends FormInput<FileUploadState> {
+export class FileUpload extends BaseComponent<FileUploadState> {
     private _fileListElement: HTMLElement | null = null;
 
     constructor(id: string, options: FileUploadOptions = {}) {
         super(id, {
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
+            name: options.name ?? id,
+            errorMessage: undefined,
             files: [],
             accept: options.accept ?? '',
             multiple: options.multiple ?? false,
-            icon: options.icon ?? 'upload',
-            label: options.label ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
+            icon: options.icon ?? 'upload'
         });
 
         if (options.onValidate) {
@@ -61,13 +64,6 @@ export class FileUpload extends FormInput<FileUploadState> {
      * 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;
         return this;
@@ -89,9 +85,8 @@ export class FileUpload extends FormInput<FileUploadState> {
             (this._inputElement as HTMLInputElement).value = '';
         }
         if (this._fileListElement) {
-            this._updateFileList([]);
+            this._fileListElement.innerHTML = '';
         }
-        // 🎯 Fire the clear callback event
         this._triggerCallback('clear');
         return this;
     }
@@ -106,14 +101,27 @@ export class FileUpload extends FormInput<FileUploadState> {
 
     setValue(files: File[]): this {
         this.state.files = files;
-        if (this._fileListElement) {
-            this._updateFileList(files);
-        }
+        this._updateFileList();
         return this;
     }
 
-    getFiles(): File[] {
-        return this.getValue();
+    validate(): boolean {
+        this._hasBeenValidated = true;
+        const files = this.getValue();
+        const result = this._validateValue(files);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    isValid(): boolean {
+        const files = this.getValue();
+        return this._validateValue(files) === true;
     }
 
     protected _validateValue(files: File[]): boolean | string {
@@ -140,16 +148,53 @@ export class FileUpload extends FormInput<FileUploadState> {
         input.type = 'file';
         input.className = 'jux-fileupload-input';
         input.id = `${this._id}-input`;
-        input.name = name;
-        input.required = required;
-        input.disabled = disabled;
-
-        if (accept) input.accept = accept;
-        if (multiple) input.multiple = multiple;
+        input.name = name!;
+        input.accept = accept;
+        input.multiple = multiple;
+        input.required = required!;
+        input.disabled = disabled!;
+        input.style.display = 'none'; // Hidden, triggered by button
 
         return input;
     }
 
+    private _updateFileList(): void {
+        if (!this._fileListElement) return; // Safety check
+
+        this._fileListElement.innerHTML = '';
+
+        if (this.state.files.length === 0) {
+            return;
+        }
+
+        this.state.files.forEach((file, index) => {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'jux-fileupload-item';
+            fileItem.innerHTML = `
+                <span class="jux-fileupload-filename">${file.name}</span>
+                <span class="jux-fileupload-filesize">${this._formatFileSize(file.size)}</span>
+                <button class="jux-fileupload-remove" data-index="${index}">×</button>
+            `;
+
+            const removeBtn = fileItem.querySelector('.jux-fileupload-remove');
+            removeBtn?.addEventListener('click', () => {
+                this.state.files = this.state.files.filter((_, i) => i !== index);
+                this._updateFileList();
+                this._triggerCallback('change', this.state.files);
+            });
+
+            this._fileListElement!.appendChild(fileItem); // ✅ Non-null assertion safe here
+        });
+    }
+
+    private _formatFileSize(bytes: number): string {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
@@ -191,7 +236,7 @@ export class FileUpload extends FormInput<FileUploadState> {
         button.type = 'button';
         button.className = 'jux-fileupload-button';
         button.textContent = 'Choose File(s)';
-        button.disabled = this.state.disabled;
+        button.disabled = this.state.disabled!;
 
         buttonContainer.appendChild(button);
         wrapper.appendChild(buttonContainer);
@@ -236,7 +281,7 @@ export class FileUpload extends FormInput<FileUploadState> {
 
                 const files = Array.from(inputEl.files || []);
                 this.state.files = files;
-                this._updateFileList(files);
+                this._updateFileList();
                 this._clearError();
 
                 const transformed = transformToState(files);
@@ -253,7 +298,7 @@ export class FileUpload extends FormInput<FileUploadState> {
             inputEl.addEventListener('change', () => {
                 const files = Array.from(inputEl.files || []);
                 this.state.files = files;
-                this._updateFileList(files);
+                this._updateFileList();
                 this._clearError();
 
                 // 🎯 Fire the callback events
@@ -264,7 +309,9 @@ export class FileUpload extends FormInput<FileUploadState> {
 
         // Always add blur validation
         inputEl.addEventListener('blur', () => {
-            this.validate();
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
         });
 
         // Sync label changes
@@ -277,31 +324,14 @@ export class FileUpload extends FormInput<FileUploadState> {
         }
 
         container.appendChild(wrapper);
-        return this;
-    }
 
-    private _updateFileList(files: File[]): void {
-        if (!this._fileListElement) return;
-
-        this._fileListElement.innerHTML = '';
-
-        if (files.length === 0) {
-            this._fileListElement.textContent = 'No files selected';
-            return;
-        }
-
-        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);
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
         });
-    }
 
-    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`;
+        return this;
     }
 }
 

package/lib/components/input.d.ts

@@ -1,5 +1,4 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface InputOptions {
     type?: string;
     value?: string;
@@ -20,7 +19,7 @@ export interface InputOptions {
     style?: string;
     class?: string;
 }
-interface InputState extends FormInputState {
+interface InputState extends BaseState {
     type: string;
     value: string;
     placeholder: string;
@@ -33,7 +32,7 @@ interface InputState extends FormInputState {
     maxLength?: number;
     pattern?: string;
 }
-export declare class Input extends FormInput<InputState> {
+export declare class Input extends BaseComponent<InputState> {
     constructor(id: string, options?: InputOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -51,6 +50,8 @@ export declare class Input extends FormInput<InputState> {
     getValue(): string;
     setValue(value: string): this;
     getNumericValue(): number | null;
+    validate(): boolean;
+    isValid(): boolean;
     protected _validateValue(value: string): boolean | string;
     protected _buildInputElement(): HTMLElement;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;

package/lib/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"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"}

package/lib/components/input.js

@@ -1,29 +1,36 @@
-import { FormInput } from './base/FormInput.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['change', 'input'];
-export class Input extends FormInput {
+export class Input extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
+            // ✅ BaseState properties
+            visible: true,
+            disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            // ✅ Form-specific BaseState properties
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate if not provided
+            required: options.required ?? false,
+            name: options.name ?? id,
+            errorMessage: undefined,
+            // ✅ Input-specific properties
             type: options.type ?? 'text',
             value: options.value ?? '',
             placeholder: options.placeholder ?? '',
-            label: options.label ?? '', // ✅ Empty string = auto-generate in _renderLabel()
             icon: options.icon ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
             rows: options.rows ?? 3,
             min: options.min,
             max: options.max,
             step: options.step,
             minLength: options.minLength,
             maxLength: options.maxLength,
-            pattern: options.pattern,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
+            pattern: options.pattern
         });
         if (options.onValidate) {
             this._onValidate = options.onValidate;
@@ -38,12 +45,6 @@ export class Input extends FormInput {
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
     type(value) {
         this.state.type = value;
         return this;
@@ -88,7 +89,7 @@ export class Input extends FormInput {
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
+     * FORM INPUT IMPLEMENTATION (Override BaseComponent methods)
      * ═════════════════════════════════════════════════════════════════ */
     getValue() {
         return this.state.value;
@@ -104,6 +105,23 @@ export class Input extends FormInput {
         const num = Number(this.state.value);
         return isNaN(num) ? null : num;
     }
+    validate() {
+        this._hasBeenValidated = true;
+        const value = this.getValue();
+        const result = this._validateValue(value);
+        if (result === true) {
+            this._clearError();
+            return true;
+        }
+        else {
+            this._showError(result);
+            return false;
+        }
+    }
+    isValid() {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
     _validateValue(value) {
         const { required, type, min, max, minLength, maxLength, pattern } = this.state;
         if (required && !value.trim()) {
@@ -188,7 +206,7 @@ export class Input extends FormInput {
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { icon, maxLength, type, style, class: className } = this.state;
+        const { icon, maxLength, type, style, class: className, label } = this.state;
         // Build wrapper
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-input';
@@ -197,8 +215,8 @@ export class Input extends FormInput {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        // Label
-        if (this.state.label) {
+        // ✅ Label - always render if exists or can be auto-generated
+        if (label || !label) { // Always render label
             wrapper.appendChild(this._renderLabel());
         }
         // Input container
@@ -231,23 +249,19 @@ export class Input extends FormInput {
                 const input = inputEl;
                 counterEl.textContent = `${input.value.length}/${maxLength}`;
                 this.state.value = input.value;
-                // 🎯 Fire the input callback event
                 this._triggerCallback('input', input.value);
             });
         }
         else {
-            // Fire input event even without counter
             inputEl.addEventListener('input', () => {
                 const input = inputEl;
                 this.state.value = input.value;
-                // 🎯 Fire the input callback event
                 this._triggerCallback('input', input.value);
             });
         }
         // Fire change event on blur
         inputEl.addEventListener('change', () => {
             const input = inputEl;
-            // 🎯 Fire the change callback event
             this._triggerCallback('change', input.value);
         });
         // Wire events