juxscript 1.0.19 → 1.0.21

package/lib/components/progress.ts

@@ -1,273 +1,191 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Progress component options
- */
 export interface ProgressOptions {
     value?: number;
     max?: number;
-    label?: string;
+    variant?: 'default' | 'success' | 'warning' | 'error';
     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;
+    showPercentage: 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>;
+export class Progress extends BaseComponent<ProgressState> {
+    private _bar: HTMLElement | null = null;
+    private _label: HTMLElement | null = null;
 
     constructor(id: string, options: ProgressOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             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,
+            showPercentage: options.showPercentage ?? 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;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
-        this.state.variant = value;
-        this._updateElement();
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    size(value: 'sm' | 'md' | 'lg'): this {
-        this.state.size = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    striped(value: boolean): this {
-        this.state.striped = value;
-        this._updateElement();
+    value(val: number): this {
+        this.state.value = Math.max(0, Math.min(val, this.state.max));
+        this._updateProgress();
         return this;
     }
 
-    animated(value: boolean): this {
-        this.state.animated = value;
-        this._updateElement();
+    max(val: number): this {
+        this.state.max = val;
+        this._updateProgress();
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
+    variant(value: 'default' | 'success' | 'warning' | 'error'): this {
+        this.state.variant = value;
         return this;
     }
 
-    /**
-     * Two-way binding to state
-     */
-    bind(stateObj: State<number>): this {
-        this._boundState = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.value(val);
-        });
-
+    showPercentage(value: boolean): this {
+        this.state.showPercentage = value;
         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) {
+    private _updateProgress(): void {
+        if (this._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');
+            this._bar.style.width = `${percentage}%`;
+            if (this._label) {
+                this._label.textContent = `${Math.round(percentage)}%`;
             }
         }
-
-        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
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
+        const container = this._setupContainer(targetId);
 
-        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 { value, max, variant, showPercentage, style, class: className } = this.state;
 
         const wrapper = document.createElement('div');
-        wrapper.className = `jux-progress jux-progress-${size}`;
+        wrapper.className = 'jux-progress';
         wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        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');
+        this._bar = bar;
+
+        if (showPercentage) {
+            const label = document.createElement('span');
+            label.className = 'jux-progress-label';
+            label.textContent = `${Math.round(percentage)}%`;
+            bar.appendChild(label);
+            this._label = label;
         }
 
         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);
+        this._injectProgressStyles();
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Progress.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectProgressStyles(): void {
+        const styleId = 'jux-progress-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-progress {
+        width: 100%;
+        margin-bottom: 1rem;
+      }
+
+      .jux-progress-track {
+        width: 100%;
+        height: 1.5rem;
+        background-color: #e5e7eb;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+
+      .jux-progress-bar {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 600;
+        transition: width 0.3s ease;
+      }
+
+      .jux-progress-bar-default {
+        background-color: #3b82f6;
+      }
+
+      .jux-progress-bar-success {
+        background-color: #10b981;
+      }
+
+      .jux-progress-bar-warning {
+        background-color: #f59e0b;
+      }
+
+      .jux-progress-bar-error {
+        background-color: #ef4444;
+      }
+
+      .jux-progress-label {
+        padding: 0 0.5rem;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }