juxscript 1.0.132 → 1.1.2

package/lib/components/element.ts

@@ -0,0 +1,267 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;  // Element has no trigger events
+const CALLBACK_EVENTS = [] as const; // Element has no callback events
+
+export interface ElementOptions {
+    tagType?: string;
+    className?: string;
+    text?: string;
+    innerHTML?: string;
+    attributes?: Record<string, string>;
+    styles?: Record<string, string>;
+    style?: string;
+    class?: string;
+}
+
+type ElementState = {
+    tagType: string;
+    className: string;
+    text: string;
+    innerHTML: string;
+    attributes: Record<string, string>;
+    styles: Record<string, string>;
+    style: string;
+    class: string;
+};
+
+export class Element extends BaseComponent<ElementState> {
+    private _element: HTMLElement | null = null;
+
+    constructor(id: string, options: ElementOptions = {}) {
+        super(id, {
+            tagType: options.tagType ?? 'div',
+            className: options.className ?? '',
+            text: options.text ?? '',
+            innerHTML: options.innerHTML ?? '',
+            attributes: options.attributes ?? {},
+            styles: options.styles ?? {},
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading()
+    // - focus(), blur()
+    // - remove()
+    // - bind(), sync(), renderTo()
+
+    tagType(value: string): Element {
+        this.state.tagType = value;
+        return this;
+    }
+
+    className(value: string): Element {
+        this.state.className = value;
+        return this;
+    }
+
+    text(value: string): Element {
+        this.state.text = value;
+        this.state.innerHTML = '';
+        return this;
+    }
+
+    innerHTML(value: string): Element {
+        this.state.innerHTML = value;
+        this.state.text = '';
+        return this;
+    }
+
+    write(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        if (!this._element) {
+            console.warn(`Element.write: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
+
+        if (asHTML) {
+            this._element.insertAdjacentHTML('beforeend', contentWithBreak);
+        } else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.appendChild(textNode);
+        }
+
+        return this;
+    }
+
+    prepend(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        if (!this._element) {
+            console.warn(`Element.prepend: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
+
+        if (asHTML) {
+            this._element.insertAdjacentHTML('afterbegin', contentWithBreak);
+        } else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.insertBefore(textNode, this._element.firstChild);
+        }
+
+        return this;
+    }
+
+    clear(): Element {
+        if (!this._element) {
+            console.warn(`Element.clear: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        this._element.innerHTML = '';
+        return this;
+    }
+
+    /**
+     * Append child component or HTML element
+     */
+    append(child: any): Element {
+        if (!this._element) {
+            console.warn(`Element.append: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        if (child instanceof HTMLElement) {
+            this._element.appendChild(child);
+        } else if (child?._element) {
+            // Another Jux component
+            this._element.appendChild(child._element);
+        } else if (typeof child === 'string') {
+            const div = document.createElement('div');
+            div.innerHTML = child;
+            this._element.appendChild(div.firstChild || div);
+        }
+
+        return this;
+    }
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
+
+        // Build element
+        const element = document.createElement(tagType);
+        element.id = this._id;
+
+        if (className) element.className = className;
+        if (classValue) element.className = `${element.className} ${classValue}`.trim();
+
+        if (text) {
+            element.textContent = text;
+        } else if (innerHTML) {
+            element.innerHTML = innerHTML;
+        }
+
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
+        });
+
+        const styleString = Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
+
+        if (styleString || style) {
+            element.setAttribute('style', `${styleString}; ${style}`.trim());
+        }
+
+        // Wire events using inherited method
+        this._wireStandardEvents(element);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            const transform = toComponent || ((v: any) => v);
+
+            stateObj.subscribe((val: any) => {
+                const transformed = transform(val);
+
+                if (property === 'text') {
+                    element.textContent = String(transformed);
+                    this.state.text = String(transformed);
+                } else if (property === 'innerHTML') {
+                    element.innerHTML = String(transformed);
+                    this.state.innerHTML = String(transformed);
+                } else if (property === 'class') {
+                    element.className = String(transformed);
+                    this.state.class = String(transformed);
+                }
+            });
+        });
+
+        container.appendChild(element);
+        this._element = element;
+
+        return this;
+    }
+}
+
+export function element(id: string, options: ElementOptions = {}): Element {
+    return new Element(id, options);
+}
+
+// Semantic HTML element factories with default classes
+export function header(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-header';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'header', class: mergedClass });
+}
+
+export function footer(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-footer';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'footer', class: mergedClass });
+}
+
+export function main(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-main';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'main', class: mergedClass });
+}
+
+export function aside(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-aside';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'aside', class: mergedClass });
+}
+
+export function section(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-section';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'section', class: mergedClass });
+}
+
+export function article(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-article';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'article', class: mergedClass });
+}
+
+export function div(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'div' });
+}
+
+export function span(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'span' });
+}
+

package/lib/components/fileupload.ts

@@ -0,0 +1,309 @@
+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;
+
+export interface FileUploadOptions {
+    label?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    name?: string;
+    icon?: string;
+    required?: boolean;
+    style?: string;
+    class?: string;
+    onValidate?: (files: File[]) => boolean | string;
+}
+
+interface FileUploadState extends FormInputState {
+    files: File[];
+    accept: string;
+    multiple: boolean;
+    icon: string;
+}
+
+export class FileUpload extends FormInput<FileUploadState> {
+    private _fileListElement: HTMLElement | null = null;
+
+    constructor(id: string, options: FileUploadOptions = {}) {
+        super(id, {
+            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
+        });
+
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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;
+    }
+
+    multiple(value: boolean): this {
+        this.state.multiple = value;
+        return this;
+    }
+
+    icon(value: string): this {
+        this.state.icon = value;
+        return this;
+    }
+
+    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;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    getValue(): File[] {
+        return this.state.files;
+    }
+
+    setValue(files: File[]): this {
+        this.state.files = files;
+        if (this._fileListElement) {
+            this._updateFileList(files);
+        }
+        return this;
+    }
+
+    getFiles(): File[] {
+        return this.getValue();
+    }
+
+    protected _validateValue(files: File[]): boolean | string {
+        const { required } = this.state;
+
+        if (required && files.length === 0) {
+            return 'Please select at least one file';
+        }
+
+        if (this._onValidate) {
+            const result = this._onValidate(files);
+            if (result !== true) {
+                return result || 'Invalid files';
+            }
+        }
+
+        return true;
+    }
+
+    protected _buildInputElement(): HTMLElement {
+        const { accept, multiple, required, disabled, name } = this.state;
+
+        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;
+
+        if (accept) input.accept = accept;
+        if (multiple) input.multiple = multiple;
+
+        return input;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { icon, style, class: className } = this.state;
+
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input jux-fileupload';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+
+        // 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);
+        }
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'jux-fileupload-button';
+        button.textContent = 'Choose File(s)';
+        button.disabled = this.state.disabled;
+
+        buttonContainer.appendChild(button);
+        wrapper.appendChild(buttonContainer);
+
+        // File list
+        const fileList = document.createElement('div');
+        fileList.className = 'jux-fileupload-list';
+        this._fileListElement = fileList;
+        wrapper.appendChild(fileList);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Button click triggers file input
+        button.addEventListener('click', () => inputEl.click());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire file-specific sync
+        const filesSync = this._syncBindings.find(b => b.property === 'files' || b.property === 'value');
+
+        if (filesSync) {
+            const { stateObj, toState, toComponent } = filesSync;
+
+            const transformToState = toState || ((v: File[]) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // 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();
+        });
+
+        // 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));
+            });
+        }
+
+        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);
+        });
+    }
+
+    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`;
+    }
+}
+
+export function fileupload(id: string, options: FileUploadOptions = {}): FileUpload {
+    return new FileUpload(id, options);
+}