juxscript 1.0.2 → 1.0.4

package/lib/components/paragraph.ts

@@ -0,0 +1,111 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Paragraph options
+ */
+export interface ParagraphOptions {
+    text?: string;
+    class?: string;
+    style?: string;
+}
+
+/**
+ * Paragraph state
+ */
+type ParagraphState = {
+    text: string;
+    class: string;
+    style: string;
+};
+
+/**
+ * Paragraph component - semantic paragraph element
+ * 
+ * Usage:
+ *   jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');
+ *   jux.paragraph('description').text('A simple framework').render('#app');
+ */
+export class Paragraph {
+    state: ParagraphState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: ParagraphOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            text: options.text ?? '',
+            class: options.class ?? '',
+            style: options.style ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string | HTMLElement): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            if (targetId instanceof HTMLElement) {
+                container = targetId;
+            } else {
+                const target = document.querySelector(targetId);
+                if (!target || !(target instanceof HTMLElement)) {
+                    throw new Error(`Paragraph: Target element "${targetId}" not found`);
+                }
+                container = target;
+            }
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { text, class: className, style } = this.state;
+
+        const p = document.createElement('p');
+        p.id = this._id;
+        p.textContent = text;
+
+        if (className) {
+            p.className = className;
+        }
+
+        if (style) {
+            p.setAttribute('style', style);
+        }
+
+        container.appendChild(p);
+
+        return this;
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
+    return new Paragraph(id, options);
+}

package/lib/components/progress.ts

@@ -0,0 +1,276 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Progress component options
+ */
+export interface ProgressOptions {
+    value?: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    striped?: boolean;
+    animated?: boolean;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Progress component state
+ */
+type ProgressState = {
+    value: number;
+    max: number;
+    label: string;
+    showPercentage: boolean;
+    variant: string;
+    size: string;
+    striped: boolean;
+    animated: boolean;
+    style: string;
+    class: string;
+};
+
+/**
+ * Progress component - Progress bar for loading/completion
+ * 
+ * Usage:
+ *   jux.progress('upload', {
+ *     value: 45,
+ *     max: 100,
+ *     label: 'Uploading...',
+ *     showPercentage: true,
+ *     animated: true
+ *   }).render('#app');
+ * 
+ *   // Update progress
+ *   const prog = jux.progress('upload').render('#app');
+ *   prog.value(75);
+ */
+export class Progress {
+    state: ProgressState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _boundState?: State<number>;
+
+    constructor(id: string, options: ProgressOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            value: options.value ?? 0,
+            max: options.max ?? 100,
+            label: options.label ?? '',
+            showPercentage: options.showPercentage ?? false,
+            variant: options.variant ?? 'default',
+            size: options.size ?? 'md',
+            striped: options.striped ?? false,
+            animated: options.animated ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    value(value: number): this {
+        this.state.value = Math.max(0, Math.min(value, this.state.max));
+        this._updateElement();
+        return this;
+    }
+
+    max(value: number): this {
+        this.state.max = value;
+        return this;
+    }
+
+    label(value: string): this {
+        this.state.label = value;
+        this._updateElement();
+        return this;
+    }
+
+    showPercentage(value: boolean): this {
+        this.state.showPercentage = value;
+        this._updateElement();
+        return this;
+    }
+
+    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
+        this.state.variant = value;
+        this._updateElement();
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    striped(value: boolean): this {
+        this.state.striped = value;
+        this._updateElement();
+        return this;
+    }
+
+    animated(value: boolean): this {
+        this.state.animated = value;
+        this._updateElement();
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<number>): this {
+        this._boundState = stateObj;
+
+        stateObj.subscribe((val) => {
+            this.value(val);
+        });
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const wrapper = document.getElementById(this._id);
+        const bar = document.getElementById(`${this._id}-bar`);
+        const labelEl = document.getElementById(`${this._id}-label`);
+
+        // If element has a value attribute set externally (e.g., by bindValue), sync state
+        if (wrapper && wrapper.hasAttribute('data-value')) {
+            const externalValue = parseFloat(wrapper.getAttribute('data-value') || '0');
+            this.state.value = externalValue;
+        }
+
+        if (bar) {
+            const percentage = (this.state.value / this.state.max) * 100;
+            bar.style.width = `${percentage}%`;
+            bar.setAttribute('aria-valuenow', this.state.value.toString());
+            bar.className = `jux-progress-bar jux-progress-bar-${this.state.variant}`;
+
+            if (this.state.striped) {
+                bar.classList.add('jux-progress-bar-striped');
+            }
+            if (this.state.animated) {
+                bar.classList.add('jux-progress-bar-animated');
+            }
+        }
+
+        if (labelEl) {
+            const percentage = Math.round((this.state.value / this.state.max) * 100);
+            const text = this.state.showPercentage
+                ? `${this.state.label} ${percentage}%`.trim()
+                : this.state.label;
+            labelEl.textContent = text;
+        }
+    }
+
+    getPercentage(): number {
+        return Math.round((this.state.value / this.state.max) * 100);
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Progress: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { value, max, label, showPercentage, variant, size, striped, animated, 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);
+        }
+
+        // Label
+        if (label || showPercentage) {
+            const labelEl = document.createElement('div');
+            labelEl.className = 'jux-progress-label';
+            labelEl.id = `${this._id}-label`;
+            const percentage = Math.round((value / max) * 100);
+            const text = showPercentage
+                ? `${label} ${percentage}%`.trim()
+                : label;
+            labelEl.textContent = text;
+            wrapper.appendChild(labelEl);
+        }
+
+        // Progress track
+        const track = document.createElement('div');
+        track.className = 'jux-progress-track';
+
+        // Progress bar
+        const bar = document.createElement('div');
+        bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
+        bar.id = `${this._id}-bar`;
+        bar.setAttribute('role', 'progressbar');
+        bar.setAttribute('aria-valuenow', value.toString());
+        bar.setAttribute('aria-valuemin', '0');
+        bar.setAttribute('aria-valuemax', max.toString());
+
+        const percentage = (value / max) * 100;
+        bar.style.width = `${percentage}%`;
+
+        if (striped) {
+            bar.classList.add('jux-progress-bar-striped');
+        }
+        if (animated) {
+            bar.classList.add('jux-progress-bar-animated');
+        }
+
+        track.appendChild(bar);
+        wrapper.appendChild(track);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Progress.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function progress(id: string, options: ProgressOptions = {}): Progress {
+    return new Progress(id, options);
+}

package/lib/components/radio.ts

@@ -0,0 +1,236 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Radio option
+ */
+export interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+/**
+ * Radio component options
+ */
+export interface RadioOptions {
+    options?: RadioOption[];
+    value?: string;
+    name?: string;
+    onChange?: (value: string) => void;
+    orientation?: 'vertical' | 'horizontal';
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Radio component state
+ */
+type RadioState = {
+    options: RadioOption[];
+    value: string;
+    name: string;
+    orientation: string;
+    style: string;
+    class: string;
+};
+
+/**
+ * Radio component - Radio button group
+ * 
+ * Usage:
+ *   jux.radio('size', {
+ *     options: [
+ *       { label: 'Small', value: 's' },
+ *       { label: 'Medium', value: 'm' },
+ *       { label: 'Large', value: 'l' }
+ *     ],
+ *     value: 'm',
+ *     onChange: (val) => console.log(val)
+ *   }).render('#form');
+ * 
+ *   // Two-way binding
+ *   const sizeState = state('m');
+ *   jux.radio('size').bind(sizeState).render('#form');
+ */
+export class Radio {
+    state: RadioState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (value: string) => void;
+    private _boundState?: State<string>;
+
+    constructor(id: string, options: RadioOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            name: options.name ?? id,
+            orientation: options.orientation ?? 'vertical',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    options(value: RadioOption[]): this {
+        this.state.options = value;
+        return this;
+    }
+
+    addOption(option: RadioOption): this {
+        this.state.options = [...this.state.options, option];
+        return this;
+    }
+
+    value(value: string): this {
+        this.state.value = value;
+        this._updateElement();
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    orientation(value: 'vertical' | 'horizontal'): this {
+        this.state.orientation = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    onChange(handler: (value: string) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<string>): this {
+        this._boundState = stateObj;
+
+        // Update radio when state changes
+        stateObj.subscribe((val) => {
+            this.state.value = val;
+            this._updateElement();
+        });
+
+        // Update state when radio changes
+        this.onChange((value) => stateObj.set(value));
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const inputs = document.querySelectorAll(`input[name="${this.state.name}"]`);
+        inputs.forEach((input) => {
+            const radioInput = input as HTMLInputElement;
+            radioInput.checked = radioInput.value === this.state.value;
+        });
+    }
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Radio: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { options, value, name, orientation, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-radio jux-radio-${orientation}`;
+        wrapper.id = this._id;
+        wrapper.setAttribute('role', 'radiogroup');
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        options.forEach((opt, index) => {
+            const label = document.createElement('label');
+            label.className = 'jux-radio-label';
+
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.className = 'jux-radio-input';
+            input.id = `${this._id}-${index}`;
+            input.name = name;
+            input.value = opt.value;
+            input.checked = opt.value === value;
+            input.disabled = opt.disabled ?? false;
+
+            input.addEventListener('change', (e) => {
+                const target = e.target as HTMLInputElement;
+                this.state.value = target.value;
+                if (this._onChange) {
+                    this._onChange(target.value);
+                }
+            });
+
+            label.appendChild(input);
+
+            const span = document.createElement('span');
+            span.className = 'jux-radio-text';
+            span.textContent = opt.label;
+            label.appendChild(span);
+
+            wrapper.appendChild(label);
+        });
+
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Radio.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function radio(id: string, options: RadioOptions = {}): Radio {
+    return new Radio(id, options);
+}