juxscript 1.1.4 → 1.1.6

package/lib/components/switch.ts

@@ -0,0 +1,246 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
+
+export interface SwitchOptions {
+    checked?: boolean;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (checked: boolean) => boolean | string;
+}
+
+interface SwitchState extends FormInputState {
+    checked: boolean;
+    value: string;
+}
+
+export class Switch extends FormInput<SwitchState> {
+    constructor(id: string, options: SwitchOptions = {}) {
+        super(id, {
+            checked: options.checked ?? false,
+            value: options.value ?? 'on',
+            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()
+
+    checked(value: boolean): this {
+        return this.setValue(value);
+    }
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    toggle(): this {
+        return this.setValue(!this.state.checked);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    getValue(): boolean {
+        return this.state.checked;
+    }
+
+    setValue(value: boolean): this {
+        this.state.checked = value;
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).checked = value;
+        }
+        return this;
+    }
+
+    protected _validateValue(checked: boolean): boolean | string {
+        const { required } = this.state;
+
+        if (required && !checked) {
+            return 'This field must be enabled';
+        }
+
+        if (this._onValidate) {
+            const result = this._onValidate(checked);
+            if (result !== true) {
+                return result || 'Invalid value';
+            }
+        }
+
+        return true;
+    }
+
+    protected _buildInputElement(): HTMLElement {
+        const { checked, value, required, disabled, name } = this.state;
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-switch-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.checked = checked;
+        input.required = required;
+        input.disabled = disabled;
+
+        return input;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { style, class: className } = this.state;
+
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-switch';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Switch container
+        const switchContainer = document.createElement('label');
+        switchContainer.className = 'jux-switch-container';
+        switchContainer.htmlFor = `${this._id}-input`;
+
+        // Input element
+        const inputEl = this._buildInputElement() as HTMLInputElement;
+        this._inputElement = inputEl;
+        switchContainer.appendChild(inputEl);
+
+        // Toggle slider
+        const slider = document.createElement('span');
+        slider.className = 'jux-switch-slider';
+        switchContainer.appendChild(slider);
+
+        // Label text
+        if (this.state.label) {
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-switch-label-text';
+            labelText.textContent = this.state.label;
+            if (this.state.required) {
+                const requiredSpan = document.createElement('span');
+                requiredSpan.className = 'jux-input-required';
+                requiredSpan.textContent = ' *';
+                labelText.appendChild(requiredSpan);
+            }
+            switchContainer.appendChild(labelText);
+        }
+
+        wrapper.appendChild(switchContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire switch-specific sync (maps 'checked' to 'value' property for consistency)
+        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            const transformToState = toState || ((v: boolean) => v);
+            const transformToComponent = toComponent || ((v: any) => Boolean(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 checked = inputEl.checked;
+                this.state.checked = checked;
+                this._clearError();
+
+                const transformed = transformToState(checked);
+                stateObj.set(transformed);
+
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', checked);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputEl.addEventListener('change', () => {
+                this.state.checked = inputEl.checked;
+                this._clearError();
+
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', inputEl.checked);
+            });
+        }
+
+        // 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;
+    }
+}
+
+export function switchComponent(id: string, options: SwitchOptions = {}): Switch {
+    return new Switch(id, options);
+}
+

package/lib/components/table.d.ts

@@ -0,0 +1,137 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export type SelectionBehaviorOnDataChange = 'clear' | 'preserve';
+export type SelectionTrigger = 'row' | 'checkbox';
+export interface ColumnDef {
+    key: string;
+    label: string;
+    width?: string;
+    render?: (value: any, row: any) => string | HTMLElement;
+    computed?: boolean;
+}
+export interface ComputedColumnDef {
+    key: string;
+    label: string;
+    compute: (row: any, rowIndex: number) => any;
+    render?: (value: any, row: any, rowIndex: number) => string | HTMLElement;
+    width?: string;
+}
+export interface TableOptions {
+    columns?: (string | ColumnDef)[];
+    rows?: any[][];
+    headers?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    compact?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+    selectable?: boolean;
+    multiSelect?: boolean;
+    showCheckboxes?: boolean;
+    showBulkCheckbox?: boolean;
+    selectionTrigger?: SelectionTrigger;
+    style?: string;
+    class?: string;
+    rowIdField?: string;
+    selectionBehavior?: SelectionBehaviorOnDataChange;
+}
+type TableState = {
+    columns: ColumnDef[];
+    rows: any[][];
+    computedColumns: Map<string, ComputedColumnDef>;
+    headers: boolean;
+    striped: boolean;
+    hoverable: boolean;
+    bordered: boolean;
+    compact: boolean;
+    sortable: boolean;
+    filterable: boolean;
+    paginated: boolean;
+    rowsPerPage: number;
+    currentPage: number;
+    sortColumn: string | null;
+    sortDirection: 'asc' | 'desc';
+    filterText: string;
+    selectable: boolean;
+    multiSelect: boolean;
+    showCheckboxes: boolean;
+    showBulkCheckbox: boolean;
+    selectionTrigger: SelectionTrigger;
+    selectedIndexes: Set<number>;
+    style: string;
+    class: string;
+    rowIdField?: string;
+    selectionBehavior: SelectionBehaviorOnDataChange;
+};
+export declare class Table extends BaseComponent<TableState> {
+    private _tableElement;
+    constructor(id: string, options?: TableOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    columns(value: (string | ColumnDef)[]): this;
+    rows(value: any[][]): this;
+    /**
+     * Add a computed column that evaluates dynamically at render time
+     *
+     * @param key - Unique key for the column
+     * @param label - Display label in header
+     * @param compute - Function to compute value from row data
+     * @param render - Optional custom renderer for the computed value
+     * @param width - Optional column width
+     */
+    computedColumn(key: string, label: string, compute: (row: any, rowIndex: number) => any, render?: (value: any, row: any, rowIndex: number) => string | HTMLElement, width?: string): this;
+    /**
+     * Remove a computed column
+     */
+    removeComputedColumn(key: string): this;
+    headers(value: boolean): this;
+    striped(value: boolean): this;
+    hoverable(value: boolean): this;
+    bordered(value: boolean): this;
+    compact(value: boolean): this;
+    sortable(value: boolean): this;
+    filterable(value: boolean): this;
+    paginated(value: boolean): this;
+    rowsPerPage(value: number): this;
+    selectable(value: boolean): this;
+    multiSelect(value: boolean): this;
+    showCheckboxes(value: boolean): this;
+    showBulkCheckbox(value: boolean): this;
+    selectionTrigger(value: SelectionTrigger): this;
+    selectAll(): this;
+    deselectAll(): this;
+    clearSelection(): this;
+    selectRows(indexes: number[]): this;
+    deselectRows(indexes: number[]): this;
+    getSelectedIndexes(): number[];
+    getSelectedRows(): any[];
+    render(targetId?: string): this;
+    protected _setupContainer(targetId?: string): HTMLElement;
+    private _buildWrapper;
+    private _buildFilterInput;
+    private _buildTable;
+    private _buildTableHeader;
+    private _buildBulkCheckboxCell;
+    private _buildColumnHeader;
+    private _wireAllEvents;
+    private _wireTriggerEvents;
+    private _wireSyncBindings;
+    private _wireSyncRows;
+    private _wireSyncColumns;
+    private _getFilteredRows;
+    private _getSortedRows;
+    private _getPaginatedRows;
+    private _updateTable;
+    private _renderTableBody;
+    private _updateHeaderCheckbox;
+    private _updateBulkCheckboxState;
+    private _updateRowSelectionUI;
+    private _preserveSelections;
+    private _updatePagination;
+    renderTo(juxComponent: any): this;
+}
+export declare function table(id: string, options?: TableOptions): Table;
+export {};
+//# sourceMappingURL=table.d.ts.map

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

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