juxscript 1.0.18 → 1.0.20

package/lib/components/divider.ts

@@ -1,233 +1,151 @@
-/**
- * Divider - Simple horizontal or vertical divider line
- */
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 export interface DividerOptions {
+    text?: string;
     orientation?: 'horizontal' | 'vertical';
-    thickness?: number;
-    color?: string;
-    margin?: string;
     style?: string;
-    className?: string;
+    class?: string;
 }
 
-/**
- * Divider component for visual separation
- * 
- * Usage:
- *   // Simple horizontal divider
- *   jux.divider().render('#container');
- *   
- *   // Vertical divider
- *   jux.divider({ orientation: 'vertical' }).render('#container');
- *   
- *   // Custom styling
- *   jux.divider({ 
- *     thickness: 2,
- *     color: '#3b82f6',
- *     margin: '24px 0'
- *   }).render('#container');
- *   
- *   // With custom class
- *   jux.divider({ className: 'my-divider' }).render('#container');
- */
+type DividerState = {
+    text: string;
+    orientation: string;
+    style: string;
+    class: string;
+};
+
 export class Divider {
-    private options: Required<DividerOptions>;
-
-    constructor(options: DividerOptions = {}) {
-        this.options = {
-            orientation: 'horizontal',
-            thickness: 1,
-            color: '#e5e7eb',
-            margin: '16px 0',
-            style: '',
-            className: '',
-            ...options
+    state: DividerState;
+    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
+    }> = [];
+
+    constructor(id: string, options: DividerOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            text: options.text ?? '',
+            orientation: options.orientation ?? 'horizontal',
+            style: options.style ?? '',
+            class: options.class ?? ''
         };
     }
 
-    /**
-     * Set orientation
-     */
-    orientation(value: 'horizontal' | 'vertical'): this {
-        this.options.orientation = value;
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    /**
-     * Set thickness in pixels
-     */
-    thickness(value: number): this {
-        this.options.thickness = value;
+    orientation(value: 'horizontal' | 'vertical'): this {
+        this.state.orientation = value;
         return this;
     }
 
-    /**
-     * Set color
-     */
-    color(value: string): this {
-        this.options.color = value;
+    style(value: string): this {
+        this.state.style = value;
         return this;
     }
 
-    /**
-     * Set margin
-     */
-    margin(value: string): this {
-        this.options.margin = value;
+    class(value: string): this {
+        this.state.class = value;
         return this;
     }
 
-    /**
-     * Set custom styles
-     */
-    style(value: string): this {
-        this.options.style = value;
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
-    /**
-     * Set class name
-     */
-    className(value: string): this {
-        this.options.className = value;
-        return this;
-    }
-
-    /**
-     * Render divider to target element
-     */
-    render(targetSelector: string): this {
-        const target = document.querySelector(targetSelector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Divider: Target element "${targetSelector}" not found`);
-            return this;
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Divider.sync: Expected a State object for property "${property}"`);
         }
-
-        const divider = document.createElement('hr');
-        divider.className = `jux-divider ${this.options.className}`.trim();
-
-        const isVertical = this.options.orientation === 'vertical';
-
-        const baseStyles = `
-            border: none;
-            background-color: ${this.options.color};
-            margin: ${this.options.margin};
-            ${isVertical ? `
-                width: ${this.options.thickness}px;
-                height: 100%;
-                display: inline-block;
-                vertical-align: middle;
-            ` : `
-                width: 100%;
-                height: ${this.options.thickness}px;
-            `}
-            ${this.options.style}
-        `;
-
-        divider.setAttribute('style', baseStyles);
-
-        target.appendChild(divider);
-
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
-    /**
-     * Replace target content with divider
-     */
-    replace(targetSelector: string): this {
-        const target = document.querySelector(targetSelector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Divider: Target element "${targetSelector}" not found`);
-            return this;
+    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(`Divider: Target "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
         }
-
-        target.innerHTML = '';
-        return this.render(targetSelector);
-    }
-
-    /**
-     * Render before target element
-     */
-    before(targetSelector: string): this {
-        const target = document.querySelector(targetSelector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Divider: Target element "${targetSelector}" not found`);
-            return this;
+        this.container = container;
+
+        // === 2. PREPARE: Destructure state ===
+        const { text, orientation, style, class: className } = this.state;
+
+        // === 3. BUILD: Create DOM elements ===
+        const divider = document.createElement('div');
+        divider.className = `jux-divider jux-divider-${orientation}`;
+        divider.id = this._id;
+        if (className) divider.className += ` ${className}`;
+        if (style) divider.setAttribute('style', style);
+
+        if (text) {
+            const textEl = document.createElement('span');
+            textEl.className = 'jux-divider-text';
+            textEl.textContent = text;
+            divider.appendChild(textEl);
+        } else {
+            const line = document.createElement('hr');
+            line.className = 'jux-divider-line';
+            divider.appendChild(line);
         }
 
-        const divider = document.createElement('hr');
-        divider.className = `jux-divider ${this.options.className}`.trim();
-
-        const isVertical = this.options.orientation === 'vertical';
-
-        const baseStyles = `
-            border: none;
-            background-color: ${this.options.color};
-            margin: ${this.options.margin};
-            ${isVertical ? `
-                width: ${this.options.thickness}px;
-                height: 100%;
-                display: inline-block;
-                vertical-align: middle;
-            ` : `
-                width: 100%;
-                height: ${this.options.thickness}px;
-            `}
-            ${this.options.style}
-        `;
-
-        divider.setAttribute('style', baseStyles);
-        target.parentNode?.insertBefore(divider, target);
-
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            divider.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    const textEl = divider.querySelector('.jux-divider-text');
+                    if (textEl) {
+                        textEl.textContent = transformed;
+                    }
+                    this.state.text = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(divider);
         return this;
     }
 
-    /**
-     * Render after target element
-     */
-    after(targetSelector: string): this {
-        const target = document.querySelector(targetSelector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Divider: Target element "${targetSelector}" not found`);
-            return this;
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Divider.renderTo: Invalid component');
         }
-
-        const divider = document.createElement('hr');
-        divider.className = `jux-divider ${this.options.className}`.trim();
-
-        const isVertical = this.options.orientation === 'vertical';
-
-        const baseStyles = `
-            border: none;
-            background-color: ${this.options.color};
-            margin: ${this.options.margin};
-            ${isVertical ? `
-                width: ${this.options.thickness}px;
-                height: 100%;
-                display: inline-block;
-                vertical-align: middle;
-            ` : `
-                width: 100%;
-                height: ${this.options.thickness}px;
-            `}
-            ${this.options.style}
-        `;
-
-        divider.setAttribute('style', baseStyles);
-        target.parentNode?.insertBefore(divider, target.nextSibling);
-
-        return this;
+        return this.render(`#${juxComponent._id}`);
     }
 }
 
-/**
- * Factory function for quick divider creation
- */
-export function divider(options: DividerOptions = {}): Divider {
-    return new Divider(options);
+export function divider(id: string, options: DividerOptions = {}): Divider {
+    return new Divider(id, options);
 }