juxscript 1.0.19 → 1.0.21

package/lib/components/divider.ts

@@ -1,233 +1,127 @@
-/**
- * Divider - Simple horizontal or vertical divider line
- */
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
 export interface DividerOptions {
-    orientation?: 'horizontal' | 'vertical';
-    thickness?: number;
-    color?: string;
+    text?: string;
+    variant?: 'default' | 'dashed' | 'dotted';
     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');
- */
-export class Divider {
-    private options: Required<DividerOptions>;
-
-    constructor(options: DividerOptions = {}) {
-        this.options = {
-            orientation: 'horizontal',
-            thickness: 1,
-            color: '#e5e7eb',
-            margin: '16px 0',
-            style: '',
-            className: '',
-            ...options
-        };
+type DividerState = {
+    text: string;
+    variant: string;
+    margin: string;
+    style: string;
+    class: string;
+    orientation: string;
+};
+
+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 ?? '',
+            variant: options.variant ?? 'default',
+            margin: options.margin ?? '1rem 0',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            orientation: 'horizontal'
+        });
     }
 
-    /**
-     * Set orientation
-     */
-    orientation(value: 'horizontal' | 'vertical'): this {
-        this.options.orientation = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    /**
-     * Set thickness in pixels
-     */
-    thickness(value: number): this {
-        this.options.thickness = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    /**
-     * Set color
-     */
-    color(value: string): this {
-        this.options.color = value;
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    /**
-     * Set margin
-     */
-    margin(value: string): this {
-        this.options.margin = value;
+    orientation(value: 'horizontal' | 'vertical'): this {
+        this.state.orientation = value;
         return this;
     }
 
-    /**
-     * Set custom styles
-     */
     style(value: string): this {
-        this.options.style = value;
+        this.state.style = value;
         return this;
     }
 
-    /**
-     * Set class name
-     */
-    className(value: string): this {
-        this.options.className = value;
+    class(value: string): this {
+        this.state.class = 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;
-        }
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-        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);
-
-        return this;
-    }
+        const { text, variant, margin, style, class: className } = this.state;
 
-    /**
-     * Replace target content with divider
-     */
-    replace(targetSelector: string): this {
-        const target = document.querySelector(targetSelector);
+        const divider = document.createElement('div');
+        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', `${divider.getAttribute('style')}; ${style}`);
 
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Divider: Target element "${targetSelector}" not found`);
-            return this;
+        if (text) {
+            const textEl = document.createElement('span');
+            textEl.className = 'jux-divider-text';
+            textEl.textContent = text;
+            divider.appendChild(textEl);
         }
 
-        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;
-        }
-
-        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);
+        this._wireStandardEvents(divider);
+        container.appendChild(divider);
+        this._injectDividerStyles();
 
         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');
         }
+        return this.render(`#${juxComponent._id}`);
+    }
 
-        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}
+    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;
+            }
         `;
-
-        divider.setAttribute('style', baseStyles);
-        target.parentNode?.insertBefore(divider, target.nextSibling);
-
-        return this;
+        document.head.appendChild(style);
     }
 }
 
-/**
- * Factory function for quick divider creation
- */
+// ✅ ID is now optional - auto-generated if not provided
 export function divider(options: DividerOptions = {}): Divider {
-    return new Divider(options);
+    return new Divider(undefined, options);
 }