juxscript 1.1.240 → 1.1.244

package/lib/components/chart.js

@@ -1,205 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { Chart } from 'chart.js/auto';
-/**
- * Chart component using Chart.js
- * Provides fluent API for creating and configuring charts
- */
-export class ChartComponent extends BaseComponent {
-    constructor(id, type = 'bar', options) {
-        super(id, {
-            type,
-            data: { datasets: [] },
-            options: {},
-            ...options
-        });
-        this.chartInstance = null;
-    }
-    getTriggerEvents() {
-        return ChartComponent.TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return ChartComponent.CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * CHART TYPE
-     * ═════════════════════════════════════════════════════════════════ */
-    type(value) {
-        this.state.type = value;
-        if (this.chartInstance) {
-            // Destroy and recreate chart with new type
-            const canvas = this.chartInstance.canvas;
-            this.chartInstance.destroy();
-            const config = {
-                type: this.state.type,
-                data: this.state.data,
-                options: this.state.options
-            };
-            this.chartInstance = new Chart(canvas, config);
-        }
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * DATA CONFIGURATION
-     * ═════════════════════════════════════════════════════════════════ */
-    data(value) {
-        this.state.data = value;
-        if (this.chartInstance) {
-            this.chartInstance.data = value;
-            this.chartInstance.update();
-        }
-        return this;
-    }
-    labels(value) {
-        this.state.data.labels = value;
-        if (this.chartInstance) {
-            this.chartInstance.data.labels = value;
-            this.chartInstance.update();
-        }
-        return this;
-    }
-    datasets(value) {
-        this.state.data.datasets = value;
-        if (this.chartInstance) {
-            this.chartInstance.data.datasets = value;
-            this.chartInstance.update();
-        }
-        return this;
-    }
-    addDataset(dataset) {
-        this.state.data.datasets.push(dataset);
-        if (this.chartInstance) {
-            this.chartInstance.data.datasets.push(dataset);
-            this.chartInstance.update();
-        }
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * OPTIONS CONFIGURATION
-     * ═════════════════════════════════════════════════════════════════ */
-    options(value) {
-        this.state.options = { ...this.state.options, ...value };
-        if (this.chartInstance) {
-            this.chartInstance.options = this.state.options;
-            this.chartInstance.update();
-        }
-        return this;
-    }
-    responsive(value = true) {
-        return this.options({ responsive: value });
-    }
-    maintainAspectRatio(value = true) {
-        return this.options({ maintainAspectRatio: value });
-    }
-    title(text, display = true) {
-        return this.options({
-            plugins: {
-                ...this.state.options.plugins,
-                title: { display, text }
-            }
-        });
-    }
-    legend(display = true, position = 'top') {
-        return this.options({
-            plugins: {
-                ...this.state.options.plugins,
-                legend: { display, position }
-            }
-        });
-    }
-    tooltip(enabled = true) {
-        return this.options({
-            plugins: {
-                ...this.state.options.plugins,
-                tooltip: { enabled }
-            }
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * CHART OPERATIONS
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Update chart with new data or configuration
-     */
-    updateChart(mode) {
-        if (this.chartInstance) {
-            this.chartInstance.update(mode);
-        }
-        return this;
-    }
-    reset() {
-        if (this.chartInstance) {
-            this.chartInstance.reset();
-        }
-        return this;
-    }
-    destroy() {
-        if (this.chartInstance) {
-            this.chartInstance.destroy();
-            this.chartInstance = null;
-            this._triggerCallback('destroy');
-        }
-        return this;
-    }
-    getChart() {
-        return this.chartInstance;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        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 = {
-            type: this.state.type,
-            data: this.state.data,
-            options: this.state.options
-        };
-        this.chartInstance = new Chart(canvas, config);
-        // Wire sync for data
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'data') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.data = transformed;
-                    if (this.chartInstance) {
-                        this.chartInstance.data = transformed;
-                        this.chartInstance.update();
-                    }
-                });
-            }
-        });
-        // Wire events and syncs
-        this._wireStandardEvents(container);
-        this._wireAllSyncs();
-        this._triggerCallback('render', this.chartInstance);
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed - uses manual updateChart()
-    }
-}
-ChartComponent.TRIGGER_EVENTS = [];
-ChartComponent.CALLBACK_EVENTS = ['render', 'update', 'destroy'];
-/**
- * Factory function for creating chart components
- */
-export function chart(id, type = 'bar', options) {
-    return new ChartComponent(id, type, options);
-}

package/lib/components/chart.ts

@@ -1,254 +0,0 @@
-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 chart with new data or configuration
-     */
-    updateChart(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
-        if (this.chartInstance) {
-            this.chartInstance.update(mode);
-        }
-        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 | HTMLElement | BaseComponent<any>): 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 sync for data
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'data') {
-                const transform = toComponent || ((v: any) => v);
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    this.state.data = transformed;
-
-                    if (this.chartInstance) {
-                        this.chartInstance.data = transformed;
-                        this.chartInstance.update();
-                    }
-                });
-            }
-        });
-
-        // Wire events and syncs
-        this._wireStandardEvents(container);
-        this._wireAllSyncs();
-
-        this._triggerCallback('render', this.chartInstance);
-
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed - uses manual updateChart()
-    }
-}
-
-/**
- * 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

@@ -1,33 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.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 BaseState {
-    checked: boolean;
-    value: string;
-}
-export declare class Checkbox extends BaseComponent<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;
-    validate(): boolean;
-    isValid(): boolean;
-    protected _validateValue(checked: boolean): boolean | string;
-    protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function checkbox(id: string, options?: CheckboxOptions): Checkbox;
-export {};
-//# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,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,SAAS;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;gBAC1C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAqBrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,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,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,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,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAmHrE;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}

package/lib/components/checkbox.js

@@ -1,202 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change'];
-export class Checkbox extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            checked: options.checked ?? false,
-            value: options.value ?? 'on'
-        });
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    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;
-    }
-    validate() {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-        if (result === true) {
-            this._clearError();
-            return true;
-        }
-        else {
-            this._showError(result);
-            return false;
-        }
-    }
-    isValid() {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-    _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', (e) => {
-                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, e, this);
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        }
-        else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', (e) => {
-                this.state.checked = inputEl.checked;
-                this._clearError();
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked, e, this);
-            });
-        }
-        // Always add blur validation
-        inputEl.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                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);
-}