juxscript 1.1.4 → 1.1.6

package/lib/components/chart.ts

@@ -0,0 +1,231 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { Chart, ChartConfiguration, ChartType, ChartOptions, ChartData } from 'chart.js/auto';
+
+// filepath: /Users/timkerr/newprojects2025/compile-sqljs/packages/jux/lib/components/chart.ts
+
+export interface ChartState {
+    type: ChartType;
+    data: ChartData;
+    options: ChartOptions;
+    style?: string;
+    class?: string;
+    visible?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+/**
+ * Chart component using Chart.js
+ * Provides fluent API for creating and configuring charts
+ */
+export class ChartComponent extends BaseComponent<ChartState> {
+    private static readonly TRIGGER_EVENTS: readonly string[] = [];
+    private static readonly CALLBACK_EVENTS: readonly string[] = ['render', 'update', 'destroy'];
+    private chartInstance: Chart | null = null;
+
+    constructor(id: string, type: ChartType = 'bar', options?: Partial<ChartState>) {
+        super(id, {
+            type,
+            data: { datasets: [] },
+            options: {},
+            ...options
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return ChartComponent.TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return ChartComponent.CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART TYPE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    type(value: ChartType): this {
+        this.state.type = value;
+        if (this.chartInstance) {
+            // Destroy and recreate chart with new type
+            const canvas = this.chartInstance.canvas;
+            this.chartInstance.destroy();
+            const config: ChartConfiguration = {
+                type: this.state.type,
+                data: this.state.data,
+                options: this.state.options
+            };
+            this.chartInstance = new Chart(canvas, config);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DATA CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    data(value: ChartData): this {
+        this.state.data = value;
+        if (this.chartInstance) {
+            this.chartInstance.data = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    labels(value: string[]): this {
+        this.state.data.labels = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.labels = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    datasets(value: any[]): this {
+        this.state.data.datasets = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    addDataset(dataset: any): this {
+        this.state.data.datasets.push(dataset);
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets.push(dataset);
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * OPTIONS CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    options(value: ChartOptions): this {
+        this.state.options = { ...this.state.options, ...value };
+        if (this.chartInstance) {
+            this.chartInstance.options = this.state.options;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    responsive(value: boolean = true): this {
+        return this.options({ responsive: value });
+    }
+
+    maintainAspectRatio(value: boolean = true): this {
+        return this.options({ maintainAspectRatio: value });
+    }
+
+    title(text: string, display: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                title: { display, text }
+            }
+        });
+    }
+
+    legend(display: boolean = true, position: 'top' | 'bottom' | 'left' | 'right' = 'top'): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                legend: { display, position }
+            }
+        });
+    }
+
+    tooltip(enabled: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                tooltip: { enabled }
+            }
+        });
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART OPERATIONS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
+        if (this.chartInstance) {
+            this.chartInstance.update(mode);
+            this._triggerCallback('update', this.chartInstance);
+        }
+        return this;
+    }
+
+    reset(): this {
+        if (this.chartInstance) {
+            this.chartInstance.reset();
+        }
+        return this;
+    }
+
+    destroy(): this {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = null;
+            this._triggerCallback('destroy');
+        }
+        return this;
+    }
+
+    getChart(): Chart | null {
+        return this.chartInstance;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        // Destroy existing chart
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+        }
+
+        // Clear container and create canvas
+        container.innerHTML = '';
+        const canvas = document.createElement('canvas');
+        canvas.id = `${this._id}-canvas`;
+
+        // Apply styles and classes
+        if (this.state.style) container.setAttribute('style', this.state.style);
+        if (this.state.class) container.className = this.state.class;
+        if (this.state.visible === false) container.style.display = 'none';
+
+        container.appendChild(canvas);
+
+        // Create Chart.js instance
+        const config: ChartConfiguration = {
+            type: this.state.type,
+            data: this.state.data,
+            options: this.state.options
+        };
+
+        this.chartInstance = new Chart(canvas, config);
+
+        // Wire events and syncs
+        this._wireStandardEvents(container);
+        this._wireAllSyncs();
+
+        this._triggerCallback('render', this.chartInstance);
+
+        return this;
+    }
+}
+
+/**
+ * Factory function for creating chart components
+ */
+export function chart(id: string, type: ChartType = 'bar', options?: Partial<ChartState>): ChartComponent {
+    return new ChartComponent(id, type, options);
+}

package/lib/components/checkbox.d.ts

@@ -0,0 +1,31 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+export interface CheckboxOptions {
+    checked?: boolean;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (checked: boolean) => boolean | string;
+}
+interface CheckboxState extends FormInputState {
+    checked: boolean;
+    value: string;
+}
+export declare class Checkbox extends FormInput<CheckboxState> {
+    constructor(id: string, options?: CheckboxOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    checked(value: boolean): this;
+    value(value: string): this;
+    getValue(): boolean;
+    setValue(value: boolean): this;
+    protected _validateValue(checked: boolean): boolean | string;
+    protected _buildInputElement(): HTMLElement;
+    render(targetId?: string): this;
+}
+export declare function checkbox(id: string, options?: CheckboxOptions): Checkbox;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAOhE,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC;CACvD;AAED,UAAU,aAAc,SAAQ,cAAc;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;gBACtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAkBrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B,QAAQ,IAAI,OAAO;IAInB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAQ9B,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;IAiB5D,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAoB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAiHlC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}

package/lib/components/checkbox.js

@@ -0,0 +1,185 @@
+import { FormInput } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change'];
+export class Checkbox extends FormInput {
+    constructor(id, options = {}) {
+        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;
+        }
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        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) {
+        return this.setValue(value);
+    }
+    value(value) {
+        this.state.value = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
+    getValue() {
+        return this.state.checked;
+    }
+    setValue(value) {
+        this.state.checked = value;
+        if (this._inputElement) {
+            this._inputElement.checked = value;
+        }
+        return this;
+    }
+    _validateValue(checked) {
+        const { required } = this.state;
+        if (required && !checked) {
+            return 'This field must be checked';
+        }
+        if (this._onValidate) {
+            const result = this._onValidate(checked);
+            if (result !== true) {
+                return result || 'Invalid value';
+            }
+        }
+        return true;
+    }
+    _buildInputElement() {
+        const { checked, value, required, disabled, name } = this.state;
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-checkbox-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) {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-checkbox';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Checkbox container
+        const checkboxContainer = document.createElement('label');
+        checkboxContainer.className = 'jux-checkbox-container';
+        checkboxContainer.htmlFor = `${this._id}-input`;
+        // Input element
+        const inputEl = this._buildInputElement();
+        this._inputElement = inputEl;
+        checkboxContainer.appendChild(inputEl);
+        // Checkmark (custom styled)
+        const checkmark = document.createElement('span');
+        checkmark.className = 'jux-checkbox-checkmark';
+        checkmark.appendChild(renderIcon('check'));
+        checkboxContainer.appendChild(checkmark);
+        // Label text
+        if (this.state.label) {
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-checkbox-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);
+            }
+            checkboxContainer.appendChild(labelText);
+        }
+        wrapper.appendChild(checkboxContainer);
+        // Error element
+        wrapper.appendChild(this._renderError());
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        // Wire checkbox-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) => v);
+            const transformToComponent = toComponent || ((v) => Boolean(v));
+            let isUpdating = false;
+            // State → Component
+            stateObj.subscribe((val) => {
+                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) => String(v));
+            labelSync.stateObj.subscribe((val) => {
+                this.label(transform(val));
+            });
+        }
+        container.appendChild(wrapper);
+        return this;
+    }
+}
+export function checkbox(id, options = {}) {
+    return new Checkbox(id, options);
+}

package/lib/components/checkbox.ts

@@ -0,0 +1,242 @@
+import { FormInput, FormInputState } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
+
+export interface CheckboxOptions {
+    checked?: boolean;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    style?: string;
+    class?: string;
+    onValidate?: (checked: boolean) => boolean | string;
+}
+
+interface CheckboxState extends FormInputState {
+    checked: boolean;
+    value: string;
+}
+
+export class Checkbox extends FormInput<CheckboxState> {
+    constructor(id: string, options: CheckboxOptions = {}) {
+        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;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * 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 checked';
+        }
+
+        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-checkbox-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-checkbox';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Checkbox container
+        const checkboxContainer = document.createElement('label');
+        checkboxContainer.className = 'jux-checkbox-container';
+        checkboxContainer.htmlFor = `${this._id}-input`;
+
+        // Input element
+        const inputEl = this._buildInputElement() as HTMLInputElement;
+        this._inputElement = inputEl;
+        checkboxContainer.appendChild(inputEl);
+
+        // Checkmark (custom styled)
+        const checkmark = document.createElement('span');
+        checkmark.className = 'jux-checkbox-checkmark';
+        checkmark.appendChild(renderIcon('check'));
+        checkboxContainer.appendChild(checkmark);
+
+        // Label text
+        if (this.state.label) {
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-checkbox-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);
+            }
+            checkboxContainer.appendChild(labelText);
+        }
+
+        wrapper.appendChild(checkboxContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire checkbox-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 checkbox(id: string, options: CheckboxOptions = {}): Checkbox {
+    return new Checkbox(id, options);
+}