juxscript 1.1.4 → 1.1.6

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);
+}

package/lib/components/grid.d.ts

@@ -0,0 +1,87 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface GridRowConfig {
+    height?: string;
+    style?: string;
+    class?: string;
+}
+export interface GridColumnConfig {
+    width?: string;
+    style?: string;
+    class?: string;
+}
+export interface GridItemConfig {
+    target: string;
+    text?: string;
+    html?: string;
+    component?: any;
+}
+export interface GridCreateConfig {
+    columns?: GridColumnConfig[] | number;
+    rows?: GridRowConfig[] | number;
+    items?: GridItemConfig[];
+}
+export interface GridOptions {
+    columns?: GridColumnConfig[] | number;
+    rows?: GridRowConfig[] | number;
+    width?: string;
+    height?: string;
+    gap?: string;
+    style?: string;
+    class?: string;
+}
+type GridState = {
+    rows: GridRowConfig[];
+    columns: GridColumnConfig[];
+    boundary: {
+        width: string;
+        height: string;
+    };
+    gap: string;
+    cells: Map<string, HTMLElement>;
+    style: string;
+    class: string;
+    gridder: boolean;
+};
+export declare class Grid extends BaseComponent<GridState> {
+    constructor(id: string, options?: GridOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    width(value: string): this;
+    height(value: string): this;
+    gap(value: string): this;
+    /**
+     * Define rows (SETTER)
+     * @param config - Number (creates N equal rows) or Array of row configs
+     */
+    rows(config: GridRowConfig[] | number): this;
+    /**
+     * Define columns (SETTER)
+     * @param config - Number (creates N equal columns) or Array of column configs
+     */
+    columns(config: GridColumnConfig[] | number): this;
+    /**
+     * Get the cell ID for a specific coordinate
+     */
+    getCellId(row: number, col: number): string;
+    /**
+     * Get the DOM element for a specific cell
+     */
+    getCell(row: number, col: number): HTMLElement | undefined;
+    /**
+     * ✅ Enable blueprint/wireframe visualization
+     * Shows grid structure, cell coordinates, and geometric borders
+     */
+    gridder(value?: boolean): this;
+    /**
+     * Pattern B: The Static Orchestration
+     * Creates the grid and populates it with items in one operation
+     */
+    create(config: GridCreateConfig): this;
+    render(targetId?: string): this;
+}
+/**
+ * Factory function
+ */
+export declare function grid(id: string, options?: GridOptions): Grid;
+export {};
+//# sourceMappingURL=grid.d.ts.map

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

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

package/lib/components/grid.js

@@ -0,0 +1,205 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions - Grid is layout-only, no interactive events
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Grid extends BaseComponent {
+    constructor(id, options = {}) {
+        // Normalize columns/rows to config arrays
+        const columnsConfig = normalizeTrackConfig(options.columns || 1);
+        const rowsConfig = normalizeTrackConfig(options.rows || 1);
+        super(id, {
+            rows: rowsConfig,
+            columns: columnsConfig,
+            boundary: {
+                width: options.width ?? '', // ✅ CHANGE: Empty = inherit parent
+                height: options.height ?? '' // ✅ CHANGE: Empty = inherit parent
+            },
+            gap: options.gap ?? '0',
+            cells: new Map(),
+            style: options.style ?? '',
+            class: options.class ?? '',
+            gridder: false
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PROPS ACCESSOR - Inherited from BaseComponent
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Already available via BaseComponent.props getter
+    // Access: grid.props.rows, grid.props.columns, grid.props.gap, etc.
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API - The Blueprint (Setters)
+     * ═════════════════════════════════════════════════════════════════ */
+    width(value) {
+        this.state.boundary.width = value;
+        return this;
+    }
+    height(value) {
+        this.state.boundary.height = value;
+        return this;
+    }
+    gap(value) {
+        this.state.gap = value;
+        return this;
+    }
+    /**
+     * Define rows (SETTER)
+     * @param config - Number (creates N equal rows) or Array of row configs
+     */
+    rows(config) {
+        this.state.rows = normalizeTrackConfig(config);
+        return this;
+    }
+    /**
+     * Define columns (SETTER)
+     * @param config - Number (creates N equal columns) or Array of column configs
+     */
+    columns(config) {
+        this.state.columns = normalizeTrackConfig(config);
+        return this;
+    }
+    /**
+     * Get the cell ID for a specific coordinate
+     */
+    getCellId(row, col) {
+        return `${this._id}-${row}-${col}`;
+    }
+    /**
+     * Get the DOM element for a specific cell
+     */
+    getCell(row, col) {
+        const cellId = this.getCellId(row, col);
+        return this.state.cells.get(cellId);
+    }
+    /**
+     * ✅ Enable blueprint/wireframe visualization
+     * Shows grid structure, cell coordinates, and geometric borders
+     */
+    gridder(value = true) {
+        this.state.gridder = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * ORCHESTRATION - The Execution
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Pattern B: The Static Orchestration
+     * Creates the grid and populates it with items in one operation
+     */
+    create(config) {
+        // Apply configuration
+        if (config.columns) {
+            this.columns(config.columns);
+        }
+        if (config.rows) {
+            this.rows(config.rows);
+        }
+        // Render the grid structure
+        this.render();
+        // Populate items
+        if (config.items) {
+            config.items.forEach(item => {
+                const targetId = item.target.replace(/^#/, '');
+                const cell = document.getElementById(targetId);
+                if (!cell) {
+                    console.warn(`[Grid] Cell not found: ${item.target}`);
+                    return;
+                }
+                if (item.component) {
+                    // Render Jux component
+                    item.component.render(`#${targetId}`);
+                }
+                else if (item.html) {
+                    cell.innerHTML = item.html;
+                }
+                else if (item.text) {
+                    cell.textContent = item.text;
+                }
+            });
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { rows, columns, boundary, gap, style, class: className, gridder } = this.state;
+        // Build grid container
+        const grid = document.createElement('div');
+        grid.className = 'jux-grid';
+        grid.id = this._id;
+        if (gridder)
+            grid.classList.add('jux-grid-gridder');
+        if (className)
+            grid.className += ` ${className}`;
+        // Apply grid styles
+        const gridTemplateRows = rows.map(r => r.height || '1fr').join(' ');
+        const gridTemplateColumns = columns.map(c => c.width || '1fr').join(' ');
+        const gridStyle = `
+            display: grid;
+            grid-template-rows: ${gridTemplateRows};
+            grid-template-columns: ${gridTemplateColumns};
+            gap: ${gap};
+            ${boundary.width ? `width: ${boundary.width};` : ''}  /* ✅ CHANGE: Only apply if set */
+            ${boundary.height ? `height: ${boundary.height};` : ''} /* ✅ CHANGE: Only apply if set */
+            ${style}
+        `;
+        grid.setAttribute('style', gridStyle.trim());
+        // Generate cells with coordinate-based IDs
+        this.state.cells.clear();
+        rows.forEach((row, rowIndex) => {
+            columns.forEach((col, colIndex) => {
+                const cell = document.createElement('div');
+                const cellId = this.getCellId(rowIndex, colIndex);
+                cell.id = cellId;
+                cell.className = 'jux-grid-cell';
+                cell.setAttribute('data-row', String(rowIndex));
+                cell.setAttribute('data-col', String(colIndex));
+                // ✅ CHANGE: Use title attribute instead of DOM element
+                if (gridder) {
+                    cell.setAttribute('title', `Cell [${rowIndex},${colIndex}] — #${cellId}`);
+                }
+                // Apply row-specific styles
+                if (row.style) {
+                    cell.setAttribute('style', (cell.getAttribute('style') || '') + row.style);
+                }
+                if (row.class) {
+                    cell.className += ` ${row.class}`;
+                }
+                // Apply column-specific styles
+                if (col.style) {
+                    cell.setAttribute('style', (cell.getAttribute('style') || '') + col.style);
+                }
+                if (col.class) {
+                    cell.className += ` ${col.class}`;
+                }
+                this.state.cells.set(cellId, cell);
+                grid.appendChild(cell);
+            });
+        });
+        this._wireStandardEvents(grid);
+        container.appendChild(grid);
+        return this;
+    }
+}
+/**
+ * Normalize track configuration to array format
+ */
+function normalizeTrackConfig(config) {
+    if (typeof config === 'number') {
+        return Array(config).fill({});
+    }
+    return config;
+}
+/**
+ * Factory function
+ */
+export function grid(id, options = {}) {
+    return new Grid(id, options);
+}