juxscript 1.1.4 → 1.1.6

package/lib/components/progress.js

@@ -0,0 +1,113 @@
+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;
+    }
+}
+export function progress(id, options = {}) {
+    return new Progress(id, options);
+}

package/lib/components/progress.ts

@@ -0,0 +1,159 @@
+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): 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;
+    }
+}
+
+export function progress(id: string, options: ProgressOptions = {}): Progress {
+    return new Progress(id, options);
+}

package/lib/components/radio.d.ts

@@ -0,0 +1,41 @@
+import { FormInput, FormInputState } from './base/FormInput.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 FormInputState {
+    options: RadioOption[];
+    value: string;
+    orientation: 'vertical' | 'horizontal';
+}
+export declare class Radio extends FormInput<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;
+    protected _validateValue(value: string): boolean | string;
+    protected _buildInputElement(): HTMLElement;
+    render(targetId?: string): this;
+}
+export declare function radio(id: string, options?: RadioOptions): Radio;
+export {};
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAMhE,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,cAAc;IACvC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CAC1C;AAED,qBAAa,KAAM,SAAQ,SAAS,CAAC,UAAU,CAAC;IAC5C,OAAO,CAAC,YAAY,CAA0B;gBAElC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAmBlD,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,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,IAAI;CAkIlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/radio.js

@@ -0,0 +1,203 @@
+import { FormInput } from './base/FormInput.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['change'];
+export class Radio extends FormInput {
+    constructor(id, options = {}) {
+        super(id, {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            label: options.label ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            orientation: options.orientation ?? 'vertical', // ✅ Default to vertical
+            style: options.style ?? '',
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+        this._radioInputs = [];
+        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()
+    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;
+    }
+    _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; // ✅ Destructure orientation
+        // 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;
+            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', () => {
+                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);
+}