juxscript 1.1.240 → 1.1.244

package/lib/components/progress.js

@@ -1,116 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Progress extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            value: options.value ?? 0,
-            max: options.max ?? 100,
-            variant: options.variant ?? 'default',
-            showPercentage: options.showPercentage ?? false,
-            label: options.label ?? '',
-            size: options.size ?? 'md',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._bar = null;
-        this._label = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    value(val) {
-        this.state.value = Math.max(0, Math.min(val, this.state.max));
-        this._updateProgress();
-        return this;
-    }
-    max(val) {
-        this.state.max = val;
-        this._updateProgress();
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    showPercentage(value) {
-        this.state.showPercentage = value;
-        return this;
-    }
-    label(value) {
-        this.state.label = value;
-        if (this._label) {
-            this._label.textContent = value;
-        }
-        return this;
-    }
-    size(value) {
-        this.state.size = value;
-        return this;
-    }
-    _updateProgress() {
-        if (this._bar) {
-            const percentage = (this.state.value / this.state.max) * 100;
-            this._bar.style.width = `${percentage}%`;
-            if (this._label) {
-                // Use custom label if set, otherwise show percentage
-                this._label.textContent = this.state.label || `${Math.round(percentage)}%`;
-            }
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { value, max, variant, showPercentage, label, size, style, class: className } = this.state;
-        const wrapper = document.createElement('div');
-        wrapper.className = `jux-progress jux-progress-${size}`;
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        const track = document.createElement('div');
-        track.className = 'jux-progress-track';
-        const bar = document.createElement('div');
-        bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
-        const percentage = (value / max) * 100;
-        bar.style.width = `${percentage}%`;
-        this._bar = bar;
-        if (showPercentage || label) {
-            const labelEl = document.createElement('span');
-            labelEl.className = 'jux-progress-label';
-            labelEl.textContent = label || `${Math.round(percentage)}%`;
-            bar.appendChild(labelEl);
-            this._label = labelEl;
-        }
-        track.appendChild(bar);
-        wrapper.appendChild(track);
-        this._wireStandardEvents(wrapper);
-        // Wire sync for value
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transform = toComponent || ((v) => Number(v));
-                stateObj.subscribe((val) => {
-                    this.value(transform(val));
-                });
-            }
-        });
-        container.appendChild(wrapper);
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-export function progress(id, options = {}) {
-    return new Progress(id, options);
-}

package/lib/components/progress.ts

@@ -1,163 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface ProgressOptions {
-    value?: number;
-    max?: number;
-    variant?: 'default' | 'success' | 'warning' | 'error';
-    showPercentage?: boolean;
-    label?: string;
-    size?: 'sm' | 'md' | 'lg';
-    style?: string;
-    class?: string;
-}
-
-type ProgressState = {
-    value: number;
-    max: number;
-    variant: string;
-    showPercentage: boolean;
-    label: string;
-    size: string;
-    style: string;
-    class: string;
-};
-
-export class Progress extends BaseComponent<ProgressState> {
-    private _bar: HTMLElement | null = null;
-    private _label: HTMLElement | null = null;
-
-    constructor(id: string, options: ProgressOptions = {}) {
-        super(id, {
-            value: options.value ?? 0,
-            max: options.max ?? 100,
-            variant: options.variant ?? 'default',
-            showPercentage: options.showPercentage ?? false,
-            label: options.label ?? '',
-            size: options.size ?? 'md',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    value(val: number): this {
-        this.state.value = Math.max(0, Math.min(val, this.state.max));
-        this._updateProgress();
-        return this;
-    }
-
-    max(val: number): this {
-        this.state.max = val;
-        this._updateProgress();
-        return this;
-    }
-
-    variant(value: 'default' | 'success' | 'warning' | 'error'): this {
-        this.state.variant = value;
-        return this;
-    }
-
-    showPercentage(value: boolean): this {
-        this.state.showPercentage = value;
-        return this;
-    }
-
-    label(value: string): this {
-        this.state.label = value;
-        if (this._label) {
-            this._label.textContent = value;
-        }
-        return this;
-    }
-
-    size(value: 'sm' | 'md' | 'lg'): this {
-        this.state.size = value;
-        return this;
-    }
-
-    private _updateProgress(): void {
-        if (this._bar) {
-            const percentage = (this.state.value / this.state.max) * 100;
-            this._bar.style.width = `${percentage}%`;
-            if (this._label) {
-                // Use custom label if set, otherwise show percentage
-                this._label.textContent = this.state.label || `${Math.round(percentage)}%`;
-            }
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { value, max, variant, showPercentage, label, size, style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = `jux-progress jux-progress-${size}`;
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const track = document.createElement('div');
-        track.className = 'jux-progress-track';
-
-        const bar = document.createElement('div');
-        bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
-        const percentage = (value / max) * 100;
-        bar.style.width = `${percentage}%`;
-        this._bar = bar;
-
-        if (showPercentage || label) {
-            const labelEl = document.createElement('span');
-            labelEl.className = 'jux-progress-label';
-            labelEl.textContent = label || `${Math.round(percentage)}%`;
-            bar.appendChild(labelEl);
-            this._label = labelEl;
-        }
-
-        track.appendChild(bar);
-        wrapper.appendChild(track);
-
-        this._wireStandardEvents(wrapper);
-
-        // Wire sync for value
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transform = toComponent || ((v: any) => Number(v));
-                stateObj.subscribe((val: any) => {
-                    this.value(transform(val));
-                });
-            }
-        });
-
-        container.appendChild(wrapper);
-
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        // No reactive updates needed
-    }
-}
-
-export function progress(id: string, options: ProgressOptions = {}): Progress {
-    return new Progress(id, options);
-}

package/lib/components/radio.d.ts

@@ -1,43 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface RadioOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-export interface RadioOptions {
-    options?: RadioOption[];
-    value?: string;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    orientation?: 'vertical' | 'horizontal';
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-interface RadioState extends BaseState {
-    options: RadioOption[];
-    value: string;
-    orientation: 'vertical' | 'horizontal';
-}
-export declare class Radio extends BaseComponent<RadioState> {
-    private _radioInputs;
-    constructor(id: string, options?: RadioOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    options(value: RadioOption[]): this;
-    value(value: string): this;
-    addOption(option: RadioOption): this;
-    orientation(value: 'vertical' | 'horizontal'): this;
-    getValue(): string;
-    setValue(value: string): this;
-    validate(): boolean;
-    isValid(): boolean;
-    protected _validateValue(value: string): boolean | string;
-    protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function radio(id: string, options?: RadioOptions): Radio;
-export {};
-//# sourceMappingURL=radio.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,UAAW,SAAQ,SAAS;IAClC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CAC1C;AAED,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,YAAY,CAA0B;gBAElC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAsBlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAKnC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKpC,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI;IASnD,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAsBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAW3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAoIrE;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/radio.js

@@ -1,226 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change'];
-export class Radio 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,
-            options: options.options ?? [],
-            value: options.value ?? '',
-            orientation: options.orientation ?? 'vertical'
-        });
-        this._radioInputs = [];
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    //BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-    options(value) {
-        this.state.options = value;
-        return this;
-    }
-    value(value) {
-        return this.setValue(value);
-    }
-    addOption(option) {
-        this.state.options = [...this.state.options, option];
-        return this;
-    }
-    orientation(value) {
-        this.state.orientation = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-    getValue() {
-        return this.state.value;
-    }
-    setValue(value) {
-        this.state.value = value;
-        // Update all radio inputs
-        this._radioInputs.forEach(input => {
-            input.checked = input.value === 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(value) {
-        const { required, options } = this.state;
-        if (required && !value) {
-            return 'Please select an option';
-        }
-        // Validate that value is one of the options
-        if (value && !options.some(opt => opt.value === value)) {
-            return 'Invalid option selected';
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-        return true;
-    }
-    _buildInputElement() {
-        // Radio uses a container, not a single input
-        const container = document.createElement('div');
-        container.className = 'jux-radio-options';
-        return container;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { options, value, name, disabled, orientation, style, class: className } = this.state;
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-radio';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // Label
-        if (this.state.label) {
-            wrapper.appendChild(this._renderLabel());
-        }
-        // Radio options container
-        const optionsContainer = document.createElement('div');
-        optionsContainer.className = `jux-radio-options jux-radio-${orientation}`; // ✅ Add orientation class
-        this._inputElement = optionsContainer;
-        this._radioInputs = [];
-        options.forEach((option, index) => {
-            const radioWrapper = document.createElement('label');
-            radioWrapper.className = 'jux-radio-option';
-            const input = document.createElement('input');
-            input.type = 'radio';
-            input.className = 'jux-radio-input';
-            input.id = `${this._id}-option-${index}`;
-            input.name = name; // ✅ Non-null assertion (name is always set in constructor)
-            input.value = option.value;
-            input.checked = option.value === value;
-            input.disabled = disabled || option.disabled || false;
-            this._radioInputs.push(input);
-            const radioMark = document.createElement('span');
-            radioMark.className = 'jux-radio-mark';
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-radio-label-text';
-            labelText.textContent = option.label;
-            radioWrapper.appendChild(input);
-            radioWrapper.appendChild(radioMark);
-            radioWrapper.appendChild(labelText);
-            optionsContainer.appendChild(radioWrapper);
-        });
-        wrapper.appendChild(optionsContainer);
-        // Error element
-        wrapper.appendChild(this._renderError());
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        // Wire radio-specific sync
-        const valueSync = this._syncBindings.find(b => b.property === 'value');
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-            const transformToState = toState || ((v) => v);
-            const transformToComponent = toComponent || ((v) => String(v));
-            let isUpdating = false;
-            // State → Component
-            stateObj.subscribe((val) => {
-                if (isUpdating)
-                    return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-            // Component → State
-            this._radioInputs.forEach(input => {
-                input.addEventListener('change', () => {
-                    if (isUpdating)
-                        return;
-                    isUpdating = true;
-                    const selectedValue = input.value;
-                    this.state.value = selectedValue;
-                    this._clearError();
-                    const transformed = transformToState(selectedValue);
-                    stateObj.set(transformed);
-                    // 🎯 Fire the change callback event
-                    this._triggerCallback('change', selectedValue);
-                    setTimeout(() => { isUpdating = false; }, 0);
-                });
-            });
-        }
-        else {
-            // Default behavior without sync
-            this._radioInputs.forEach(input => {
-                input.addEventListener('change', () => {
-                    this.state.value = input.value;
-                    this._clearError();
-                    // 🎯 Fire the change callback event
-                    this._triggerCallback('change', input.value);
-                });
-            });
-        }
-        // Always add blur validation
-        this._radioInputs.forEach(input => {
-            input.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 radio(id, options = {}) {
-    return new Radio(id, options);
-}