juxscript 1.0.20 → 1.0.21

package/lib/components/loading.ts

@@ -1,263 +1,194 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Loading component options
- */
 export interface LoadingOptions {
-    variant?: 'spinner' | 'dots' | 'pulse' | 'skeleton';
+    variant?: 'spinner' | 'dots' | 'pulse';
     size?: 'sm' | 'md' | 'lg';
-    text?: string;
-    fullscreen?: boolean;
     style?: string;
     class?: string;
 }
 
-/**
- * Loading component state
- */
 type LoadingState = {
     variant: string;
     size: string;
-    text: string;
-    fullscreen: boolean;
     style: string;
     class: string;
 };
 
-/**
- * Loading component - Spinners, skeletons, loading indicators
- * 
- * Usage:
- *   jux.loading('my-spinner', {
- *     variant: 'spinner',
- *     size: 'lg',
- *     text: 'Loading...'
- *   }).render('#app');
- * 
- *   // Fullscreen overlay
- *   jux.loading('loading-overlay', {
- *     variant: 'spinner',
- *     fullscreen: true,
- *     text: 'Please wait...'
- *   }).render();
- * 
- * Variants: spinner, dots, pulse, skeleton
- */
-export class Loading {
-    state: LoadingState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
+export class Loading extends BaseComponent<LoadingState> {
     constructor(id: string, options: LoadingOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             variant: options.variant ?? 'spinner',
             size: options.size ?? 'md',
-            text: options.text ?? '',
-            fullscreen: options.fullscreen ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    variant(value: 'spinner' | 'dots' | 'pulse' | 'skeleton'): this {
-        this.state.variant = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    size(value: 'sm' | 'md' | 'lg'): this {
-        this.state.size = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    fullscreen(value: boolean): this {
-        this.state.fullscreen = value;
-        return this;
-    }
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - visible(), show(), hide()
 
-    style(value: string): this {
-        this.state.style = value;
+    variant(value: 'spinner' | 'dots' | 'pulse'): this {
+        this.state.variant = value;
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
         return this;
     }
 
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    /**
-     * Show the loading indicator
-     */
-    show(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.style.display = 'flex';
-        }
-    }
-
-    /**
-     * Hide the loading indicator
-     */
-    hide(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.style.display = 'none';
-        }
-    }
-
-    /**
-     * Remove the loading indicator
-     */
-    remove(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.remove();
-        }
-    }
-
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _renderSpinner(): HTMLElement {
-        const spinner = document.createElement('div');
-        spinner.className = 'jux-loading-spinner';
-        return spinner;
-    }
-
-    private _renderDots(): HTMLElement {
-        const dots = document.createElement('div');
-        dots.className = 'jux-loading-dots';
-        for (let i = 0; i < 3; i++) {
-            const dot = document.createElement('div');
-            dot.className = 'jux-loading-dot';
-            dots.appendChild(dot);
-        }
-        return dots;
-    }
-
-    private _renderPulse(): HTMLElement {
-        const pulse = document.createElement('div');
-        pulse.className = 'jux-loading-pulse';
-        return pulse;
-    }
-
-    private _renderSkeleton(): HTMLElement {
-        const skeleton = document.createElement('div');
-        skeleton.className = 'jux-loading-skeleton';
-
-        // Create 3 skeleton lines
-        for (let i = 0; i < 3; i++) {
-            const line = document.createElement('div');
-            line.className = 'jux-loading-skeleton-line';
-            if (i === 2) line.style.width = '60%'; // Last line shorter
-            skeleton.appendChild(line);
-        }
-        return skeleton;
-    }
-
-    /* -------------------------
-     * 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(`Loading: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-
-        this.container = container;
-        const { variant, size, text, fullscreen, style, class: className } = this.state;
+        const { variant, size, style, class: className } = this.state;
 
         const loading = document.createElement('div');
-        loading.className = `jux-loading jux-loading-${size}`;
+        loading.className = `jux-loading jux-loading-${variant} jux-loading-${size}`;
         loading.id = this._id;
-
-        if (fullscreen) {
-            loading.className += ' jux-loading-fullscreen';
-        }
-
-        if (className) {
-            loading.className += ` ${className}`;
-        }
-
-        if (style) {
-            loading.setAttribute('style', style);
-        }
-
-        // Render appropriate variant
-        let indicator: HTMLElement;
-        switch (variant) {
-            case 'dots':
-                indicator = this._renderDots();
-                break;
-            case 'pulse':
-                indicator = this._renderPulse();
-                break;
-            case 'skeleton':
-                indicator = this._renderSkeleton();
-                break;
-            case 'spinner':
-            default:
-                indicator = this._renderSpinner();
+        if (className) loading.className += ` ${className}`;
+        if (style) loading.setAttribute('style', style);
+
+        // Build variant-specific content
+        if (variant === 'spinner') {
+            const spinner = document.createElement('div');
+            spinner.className = 'jux-loading-spinner';
+            loading.appendChild(spinner);
+        } else if (variant === 'dots') {
+            for (let i = 0; i < 3; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'jux-loading-dot';
+                loading.appendChild(dot);
+            }
+        } else if (variant === 'pulse') {
+            const pulse = document.createElement('div');
+            pulse.className = 'jux-loading-pulse';
+            loading.appendChild(pulse);
         }
 
-        loading.appendChild(indicator);
-
-        // Optional text
-        if (text) {
-            const textEl = document.createElement('div');
-            textEl.className = 'jux-loading-text';
-            textEl.textContent = text;
-            loading.appendChild(textEl);
-        }
+        this._wireStandardEvents(loading);
 
         container.appendChild(loading);
+        this._injectLoadingStyles();
+
         return this;
     }
 
-    /**
-     * Render to another Jux component's container
-     */
-    renderTo(juxComponent: any): this {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('Loading.renderTo: Invalid component - not an object');
-        }
-
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('Loading.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
-
-        return this.render(`#${juxComponent._id}`);
+    private _injectLoadingStyles(): void {
+        const styleId = 'jux-loading-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-loading {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+      }
+
+      .jux-loading-sm { width: 20px; height: 20px; }
+      .jux-loading-md { width: 40px; height: 40px; }
+      .jux-loading-lg { width: 60px; height: 60px; }
+
+      /* Spinner */
+      .jux-loading-spinner {
+        width: 30px;
+        height: 30px;
+        border: 2px solid #e5e7eb;
+        border-top-color: #3b82f6;
+        border-radius: 50%;
+        animation: jux-spin 0.8s linear infinite;
+      }
+
+      .jux-loading-sm .jux-loading-spinner {
+        border-width: 2px;
+      }
+
+      .jux-loading-md .jux-loading-spinner {
+        border-width: 3px;
+      }
+
+      .jux-loading-lg .jux-loading-spinner {
+        border-width: 4px;
+      }
+
+      @keyframes jux-spin {
+        to { transform: rotate(360deg); }
+      }
+
+      /* Dots */
+      .jux-loading-dot {
+        width: 8px;
+        height: 8px;
+        background: #3b82f6;
+        border-radius: 50%;
+        animation: jux-bounce 1.4s infinite ease-in-out both;
+      }
+
+      .jux-loading-sm .jux-loading-dot {
+        width: 5px;
+        height: 5px;
+      }
+
+      .jux-loading-md .jux-loading-dot {
+        width: 8px;
+        height: 8px;
+      }
+
+      .jux-loading-lg .jux-loading-dot {
+        width: 12px;
+        height: 12px;
+      }
+
+      .jux-loading-dot:nth-child(1) { animation-delay: -0.32s; }
+      .jux-loading-dot:nth-child(2) { animation-delay: -0.16s; }
+
+      @keyframes jux-bounce {
+        0%, 80%, 100% { transform: scale(0); }
+        40% { transform: scale(1); }
+      }
+
+      /* Pulse */
+      .jux-loading-pulse {
+        width: 100%;
+        height: 100%;
+        background: #3b82f6;
+        border-radius: 50%;
+        animation: jux-pulse 1.5s ease-in-out infinite;
+      }
+
+      @keyframes jux-pulse {
+        0%, 100% { opacity: 1; transform: scale(0.8); }
+        50% { opacity: 0.5; transform: scale(1.2); }
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 
-/**
- * Factory helper
- */
 export function loading(id: string, options: LoadingOptions = {}): Loading {
     return new Loading(id, options);
 }