juxscript 1.1.3 → 1.1.4

package/lib/components/element.ts

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

@@ -1,309 +0,0 @@
-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);
-}