juxscript 1.0.20 → 1.0.21

package/lib/components/progress.ts

@@ -1,15 +1,14 @@
-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;
 
 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;
 }
@@ -17,233 +16,176 @@ export interface ProgressOptions {
 type ProgressState = {
     value: number;
     max: number;
-    label: string;
-    showPercentage: boolean;
     variant: string;
-    size: string;
-    striped: boolean;
-    animated: boolean;
+    showPercentage: boolean;
     style: string;
     class: string;
 };
 
-export class Progress {
-    state: ProgressState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // CRITICAL: Store bind/sync instructions for deferred wiring
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
+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 = value;
-        this._updateProgress();
-        return this;
-    }
-
-    max(value: number): this {
-        this.state.max = value;
-        this._updateProgress();
-        return this;
-    }
-
-    label(value: string): this {
-        this.state.label = value;
-        return this;
-    }
-
-    showPercentage(value: boolean): this {
-        this.state.showPercentage = value;
-        return this;
-    }
-
-    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
-        this.state.variant = value;
-        return this;
+        });
     }
 
-    size(value: 'sm' | 'md' | 'lg'): this {
-        this.state.size = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    striped(value: boolean): this {
-        this.state.striped = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    animated(value: boolean): this {
-        this.state.animated = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    style(value: string): this {
-        this.state.style = value;
+    value(val: number): this {
+        this.state.value = Math.max(0, Math.min(val, this.state.max));
+        this._updateProgress();
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
+    max(val: number): this {
+        this.state.max = val;
+        this._updateProgress();
         return this;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    variant(value: 'default' | 'success' | 'warning' | 'error'): this {
+        this.state.variant = value;
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Progress.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
+    showPercentage(value: boolean): this {
+        this.state.showPercentage = value;
         return this;
     }
 
-    getPercentage(): number {
-        return Math.round((this.state.value / this.state.max) * 100);
-    }
-
     private _updateProgress(): void {
-        const bar = document.getElementById(`${this._id}-bar`);
-        const percentageEl = document.getElementById(`${this._id}-percentage`);
-
-        if (bar) {
-            const percentage = this.getPercentage();
-            bar.style.width = `${percentage}%`;
-
-            if (percentageEl) {
-                percentageEl.textContent = `${percentage}%`;
+        if (this._bar) {
+            const percentage = (this.state.value / this.state.max) * 100;
+            this._bar.style.width = `${percentage}%`;
+            if (this._label) {
+                this._label.textContent = `${Math.round(percentage)}%`;
             }
         }
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Progress: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state ===
-        const { value, max, variant, showPercentage, label, style, class: className } = this.state;
-        const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+        const { value, max, variant, showPercentage, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-progress';
         wrapper.id = this._id;
         if (className) wrapper.className += ` ${className}`;
         if (style) wrapper.setAttribute('style', style);
 
-        if (showPercentage || label) {
-            const labelEl = document.createElement('div');
-            labelEl.className = 'jux-progress-label';
-            labelEl.textContent = label || `${Math.round(percentage)}%`;
-            wrapper.appendChild(labelEl);
-        }
-
         const track = document.createElement('div');
         track.className = 'jux-progress-track';
 
         const bar = document.createElement('div');
         bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
-        bar.id = `${this._id}-bar`;
+        const percentage = (value / max) * 100;
         bar.style.width = `${percentage}%`;
+        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);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            wrapper.addEventListener(event, handler as EventListener);
-        });
+        this._wireStandardEvents(wrapper);
 
-        // Wire sync bindings from .sync() calls
+        // Wire sync for value
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'value') {
-                const transformToComponent = toComponent || ((v: any) => Number(v));
-
+                const transform = toComponent || ((v: any) => Number(v));
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    this.state.value = transformed;
-                    const newPercentage = Math.min(100, Math.max(0, (transformed / this.state.max) * 100));
-                    bar.style.width = `${newPercentage}%`;
-
-                    if (showPercentage && !label) {
-                        const labelEl = wrapper.querySelector('.jux-progress-label');
-                        if (labelEl) {
-                            labelEl.textContent = `${Math.round(newPercentage)}%`;
-                        }
-                    }
-                });
-            }
-            else if (property === 'label') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    const labelEl = wrapper.querySelector('.jux-progress-label');
-                    if (labelEl) {
-                        labelEl.textContent = transformed;
-                    }
-                    this.state.label = transformed;
+                    this.value(transform(val));
                 });
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         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);
     }
 }