juxscript 1.0.20 → 1.0.21

package/lib/components/dropdown.ts

@@ -1,189 +1,121 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
-import { renderIcon } from './icons.js';
-
-export interface DropdownOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['select'] as const;
+
+export interface DropdownItem {
+    label?: string;
+    icon?: string;
+    divider?: boolean;
+    click?: () => void;
 }
 
 export interface DropdownOptions {
-    options?: DropdownOption[];
-    value?: string;
-    placeholder?: string;
-    label?: string;
-    disabled?: boolean;
+    trigger?: string;
+    items?: DropdownItem[];
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     style?: string;
     class?: string;
 }
 
-export interface DropdownItem {
-    label: string;
-    value?: string;
-    disabled?: boolean;
-    onClick?: () => void;
-}
-
 type DropdownState = {
-    options: DropdownOption[];
-    value: string;
-    placeholder: string;
-    label: string;
-    disabled: boolean;
+    trigger: string;
+    items: DropdownItem[];
+    position: string;
+    open: boolean;
     style: string;
     class: string;
-    isOpen: boolean;
-    items: any[];
-    trigger: string;
-    position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
 };
 
-export class Dropdown {
-    state: DropdownState;
-    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 Dropdown extends BaseComponent<DropdownState> {
+    private _dropdown: HTMLElement | null = null;
+    private _menu: HTMLElement | null = null;
 
     constructor(id: string, options: DropdownOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
-            options: options.options ?? [],
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select...',
-            label: options.label ?? '',
-            disabled: options.disabled ?? false,
+        super(id, {
+            trigger: options.trigger ?? 'Menu',
+            items: options.items ?? [],
+            position: options.position ?? 'bottom-left',
+            open: false,
             style: options.style ?? '',
-            class: options.class ?? '',
-            isOpen: false,
-            items: [],
-            trigger: '',
-            position: 'bottom-left'
-        };
+            class: options.class ?? ''
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    items(value: DropdownItem[]): this {
-        this.state.items = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    addItem(item: DropdownItem): this {
-        this.state.items = [...this.state.items, item];
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
     trigger(value: string): this {
         this.state.trigger = value;
         return this;
     }
 
-    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this {
-        this.state.position = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
+    items(value: DropdownItem[]): this {
+        this.state.items = value;
         return this;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this {
+        this.state.position = value;
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Dropdown.sync: Expected a State object for property "${property}"`);
+    open(): this {
+        this.state.open = true;
+        if (this._menu) {
+            this._menu.style.display = 'block';
         }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    open(): void {
-        this.state.isOpen = true;
-        const menu = document.getElementById(`${this._id}-menu`);
-        if (menu) {
-            menu.classList.add('jux-dropdown-menu-open');
-        }
-    }
-
-    close(): void {
-        this.state.isOpen = false;
-        const menu = document.getElementById(`${this._id}-menu`);
-        if (menu) {
-            menu.classList.remove('jux-dropdown-menu-open');
+    close(): this {
+        this.state.open = false;
+        if (this._menu) {
+            this._menu.style.display = 'none';
         }
+        return this;
     }
 
-    toggle(): void {
-        if (this.state.isOpen) {
-            this.close();
-        } else {
-            this.open();
-        }
+    toggle(): this {
+        return this.state.open ? this.close() : this.open();
     }
 
-    /* -------------------------
-     * 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(`Dropdown: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state and check sync flags ===
-        const { label, items, style, class: className } = this.state;
-        const hasItemsSync = this._syncBindings.some(b => b.property === 'items');
+        const { trigger, items, position, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-dropdown';
         wrapper.id = this._id;
         if (className) wrapper.className += ` ${className}`;
         if (style) wrapper.setAttribute('style', style);
 
-        const button = document.createElement('button');
-        button.className = 'jux-dropdown-button';
-        button.textContent = label;
+        // Trigger button
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dropdown-trigger';
+        triggerBtn.textContent = trigger;
+        triggerBtn.type = 'button';
 
+        // Dropdown menu
         const menu = document.createElement('div');
-        menu.className = 'jux-dropdown-menu';
+        menu.className = `jux-dropdown-menu jux-dropdown-${position}`;
         menu.style.display = 'none';
+        this._menu = menu;
 
         items.forEach(item => {
             if (item.divider) {
@@ -191,138 +123,161 @@ export class Dropdown {
                 divider.className = 'jux-dropdown-divider';
                 menu.appendChild(divider);
             } else {
-                const menuItem = document.createElement('a');
+                const menuItem = document.createElement('button');
                 menuItem.className = 'jux-dropdown-item';
-
-                if (item.href) {
-                    menuItem.href = item.href;
-                }
+                menuItem.type = 'button';
 
                 if (item.icon) {
                     const icon = document.createElement('span');
                     icon.className = 'jux-dropdown-icon';
-                    icon.appendChild(renderIcon(item.icon));
+                    icon.textContent = item.icon;
                     menuItem.appendChild(icon);
                 }
 
-                const text = document.createElement('span');
-                text.textContent = item.label;
-                menuItem.appendChild(text);
-
-                if (item.click) {
-                    menuItem.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        item.click!();
-                        menu.style.display = 'none';
-                    });
+                if (item.label) {
+                    const label = document.createElement('span');
+                    label.textContent = item.label;
+                    menuItem.appendChild(label);
                 }
 
+                menuItem.addEventListener('click', () => {
+                    // 🎯 Fire the select callback event
+                    this._triggerCallback('select', item);
+
+                    // Then fire item-specific click handler
+                    if (item.click) {
+                        item.click();
+                    }
+
+                    this.close();
+                });
+
                 menu.appendChild(menuItem);
             }
         });
 
-        wrapper.appendChild(button);
-        wrapper.appendChild(menu);
-
-        // Toggle functionality
-        button.addEventListener('click', () => {
-            menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+        // Toggle on trigger click
+        triggerBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
         });
 
         // Close on outside click
         document.addEventListener('click', (e) => {
-            if (!wrapper.contains(e.target as Node)) {
-                menu.style.display = 'none';
+            if (this._dropdown && !this._dropdown.contains(e.target as Node)) {
+                this.close();
             }
         });
 
-        // === 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);
-        });
-
-        // Wire sync bindings from .sync() calls
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'items') {
-                const transformToComponent = toComponent || ((v: any) => v);
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    this.state.items = transformed;
-
-                    // Re-render menu items
-                    menu.innerHTML = '';
-                    transformed.forEach((item: any) => {
-                        if (item.divider) {
-                            const divider = document.createElement('div');
-                            divider.className = 'jux-dropdown-divider';
-                            menu.appendChild(divider);
-                        } else {
-                            const menuItem = document.createElement('a');
-                            menuItem.className = 'jux-dropdown-item';
-
-                            if (item.href) menuItem.href = item.href;
-
-                            if (item.icon) {
-                                const icon = document.createElement('span');
-                                icon.className = 'jux-dropdown-icon';
-                                icon.appendChild(renderIcon(item.icon));
-                                menuItem.appendChild(icon);
-                            }
-
-                            const text = document.createElement('span');
-                            text.textContent = item.label;
-                            menuItem.appendChild(text);
-
-                            if (item.click) {
-                                menuItem.addEventListener('click', (e) => {
-                                    e.preventDefault();
-                                    item.click!();
-                                    menu.style.display = 'none';
-                                });
-                            }
-
-                            menu.appendChild(menuItem);
-                        }
-                    });
-
-                    requestAnimationFrame(() => {
-                        if ((window as any).lucide) {
-                            (window as any).lucide.createIcons();
-                        }
-                    });
-                });
-            }
-            else if (property === 'label') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+        wrapper.appendChild(triggerBtn);
+        wrapper.appendChild(menu);
 
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    button.textContent = transformed;
-                    this.state.label = transformed;
-                });
-            }
-        });
+        this._wireStandardEvents(wrapper);
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
+        this._dropdown = wrapper;
+        this._injectDropdownStyles();
 
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Dropdown.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectDropdownStyles(): void {
+        const styleId = 'jux-dropdown-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+
+      .jux-dropdown-trigger {
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .jux-dropdown-trigger:hover {
+        background: #2563eb;
+      }
+
+      .jux-dropdown-menu {
+        position: absolute;
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        min-width: 200px;
+        z-index: 1000;
+        margin-top: 4px;
+      }
+
+      .jux-dropdown-bottom-left {
+        left: 0;
+        top: 100%;
+      }
+
+      .jux-dropdown-bottom-right {
+        right: 0;
+        top: 100%;
+      }
+
+      .jux-dropdown-top-left {
+        left: 0;
+        bottom: 100%;
+        margin-bottom: 4px;
+      }
+
+      .jux-dropdown-top-right {
+        right: 0;
+        bottom: 100%;
+        margin-bottom: 4px;
+      }
+
+      .jux-dropdown-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 10px 16px;
+        border: none;
+        background: none;
+        text-align: left;
+        cursor: pointer;
+        transition: background 0.2s;
+        font-size: 14px;
+      }
+
+      .jux-dropdown-item:hover {
+        background: #f3f4f6;
+      }
+
+      .jux-dropdown-item:first-child {
+        border-radius: 6px 6px 0 0;
+      }
+
+      .jux-dropdown-item:last-child {
+        border-radius: 0 0 6px 6px;
+      }
+
+      .jux-dropdown-divider {
+        height: 1px;
+        background: #e5e7eb;
+        margin: 4px 0;
+      }
+
+      .jux-dropdown-icon {
+        font-size: 16px;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }