juxscript 1.0.20 → 1.0.21

package/lib/components/divider.ts

@@ -1,45 +1,44 @@
-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 DividerOptions {
     text?: string;
-    orientation?: 'horizontal' | 'vertical';
+    variant?: 'default' | 'dashed' | 'dotted';
+    margin?: string;
     style?: string;
     class?: string;
 }
 
 type DividerState = {
     text: string;
-    orientation: string;
+    variant: string;
+    margin: string;
     style: string;
     class: string;
+    orientation: string;
 };
 
-export class Divider {
-    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 = {
+export class Divider extends BaseComponent<DividerState> {
+    constructor(id: string = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, options: DividerOptions = {}) {
+        super(id, {
             text: options.text ?? '',
-            orientation: options.orientation ?? 'horizontal',
+            variant: options.variant ?? 'default',
+            margin: options.margin ?? '1rem 0',
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
+            class: options.class ?? '',
+            orientation: 'horizontal'
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
     text(value: string): this {
@@ -62,79 +61,29 @@ export class Divider {
         return this;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
-        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}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
-        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);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state ===
-        const { text, orientation, style, class: className } = this.state;
+        const { text, variant, margin, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const divider = document.createElement('div');
-        divider.className = `jux-divider jux-divider-${orientation}`;
+        divider.className = `jux-divider jux-divider-${variant}`;
         divider.id = this._id;
+        divider.style.margin = margin;
         if (className) divider.className += ` ${className}`;
-        if (style) divider.setAttribute('style', style);
+        if (style) divider.setAttribute('style', `${divider.getAttribute('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);
         }
 
-        // === 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 ===
+        this._wireStandardEvents(divider);
         container.appendChild(divider);
+        this._injectDividerStyles();
+
         return this;
     }
 
@@ -144,8 +93,35 @@ export class Divider {
         }
         return this.render(`#${juxComponent._id}`);
     }
+
+    private _injectDividerStyles(): void {
+        if (document.getElementById('jux-divider-styles')) return;
+        
+        const style = document.createElement('style');
+        style.id = 'jux-divider-styles';
+        style.textContent = `
+            .jux-divider {
+                display: flex;
+                align-items: center;
+                border-top: 1px solid #e0e0e0;
+            }
+            .jux-divider-dashed {
+                border-top-style: dashed;
+            }
+            .jux-divider-dotted {
+                border-top-style: dotted;
+            }
+            .jux-divider-text {
+                padding: 0 1rem;
+                background: white;
+                position: relative;
+            }
+        `;
+        document.head.appendChild(style);
+    }
 }
 
-export function divider(id: string, options: DividerOptions = {}): Divider {
-    return new Divider(id, options);
+// ✅ ID is now optional - auto-generated if not provided
+export function divider(options: DividerOptions = {}): Divider {
+    return new Divider(undefined, options);
 }