juxscript 1.0.20 → 1.0.21

package/lib/components/tooltip.ts

@@ -1,222 +1,109 @@
-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 TooltipOptions {
     text?: string;
     position?: 'top' | 'bottom' | 'left' | 'right';
-    trigger?: 'hover' | 'click' | 'focus';
     style?: string;
     class?: string;
 }
 
 type TooltipState = {
     text: string;
-    content?: string;
-    position: 'top' | 'bottom' | 'left' | 'right';
-    trigger: 'hover' | 'click' | 'focus';
+    position: string;
     style: string;
     class: string;
-    isVisible: boolean;
 };
 
-export class Tooltip {
-    state: TooltipState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _tooltipElement: HTMLElement | null = null;
-    private _targetElement: HTMLElement | null = null;
-
-    // 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 Tooltip extends BaseComponent<TooltipState> {
+    private _tooltip: HTMLElement | null = null;
+    private _target: HTMLElement | null = null;
 
     constructor(id: string, options: TooltipOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             text: options.text ?? '',
             position: options.position ?? 'top',
-            trigger: options.trigger ?? 'hover',
             style: options.style ?? '',
-            class: options.class ?? '',
-            isVisible: false
-        };
-    }
-
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    text(value: string): this {
-        this.state.text = value;
-        if (this._tooltipElement) {
-            this._tooltipElement.textContent = value;
-        }
-        return this;
-    }
-
-    position(value: 'top' | 'bottom' | 'left' | 'right'): this {
-        this.state.position = value;
-        return this;
+            class: options.class ?? ''
+        });
     }
 
-    trigger(value: 'hover' | 'click' | 'focus'): this {
-        this.state.trigger = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Tooltip.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
+    position(value: 'top' | 'bottom' | 'left' | 'right'): this {
+        this.state.position = value;
         return this;
     }
 
-    /**
-     * Attach tooltip to an element
-     */
-    attachTo(target: string | HTMLElement | any): this {
-        let targetElement: HTMLElement | null = null;
-
-        if (typeof target === 'string') {
-            const el = document.querySelector(target);
-            if (!el || !(el instanceof HTMLElement)) {
-                throw new Error(`Tooltip: Target element "${target}" not found`);
-            }
-            targetElement = el;
-        } else if (target instanceof HTMLElement) {
-            targetElement = target;
-        } else if (target && target.container) {
-            targetElement = target.container;
-        } else if (target && target._id) {
-            const el = document.getElementById(target._id);
-            if (!el) {
-                throw new Error(`Tooltip: Target element with id "${target._id}" not found`);
-            }
-            targetElement = el;
-        } else {
-            throw new Error('Tooltip: Invalid target element');
-        }
-
-        this._targetElement = targetElement;
-        this._createTooltip();
-        this._attachEventListeners();
+    attachTo(target: HTMLElement | null): this {
+        if (!target) return this;
 
+        this._target = target;
+        this._setupTooltip();
         return this;
     }
 
-    show(): void {
-        if (!this._tooltipElement || !this._targetElement) return;
-
-        this.state.isVisible = true;
-        this._tooltipElement.classList.add('jux-tooltip-visible');
-        this._positionTooltip();
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
-    hide(): void {
-        if (!this._tooltipElement) return;
-
-        this.state.isVisible = false;
-        this._tooltipElement.classList.remove('jux-tooltip-visible');
-    }
+    private _setupTooltip(): void {
+        if (!this._target) return;
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _createTooltip(): void {
         const { text, position, style, class: className } = this.state;
 
+        // Create tooltip element
         const tooltip = document.createElement('div');
         tooltip.className = `jux-tooltip jux-tooltip-${position}`;
-        tooltip.id = `${this._id}-tooltip`;
+        tooltip.id = this._id;
+        if (className) tooltip.className += ` ${className}`;
+        if (style) tooltip.setAttribute('style', style);
         tooltip.textContent = text;
-
-        if (className) {
-            tooltip.className += ` ${className}`;
-        }
-
-        if (style) {
-            tooltip.setAttribute('style', style);
-        }
+        tooltip.style.display = 'none';
+        this._tooltip = tooltip;
 
         document.body.appendChild(tooltip);
-        this._tooltipElement = tooltip;
-
-        this._injectDefaultStyles();
-    }
-
-    private _attachEventListeners(): void {
-        if (!this._targetElement) return;
-
-        const { trigger } = this.state;
 
-        if (trigger === 'hover') {
-            this._targetElement.addEventListener('mouseenter', () => this.show());
-            this._targetElement.addEventListener('mouseleave', () => this.hide());
-        } else if (trigger === 'click') {
-            this._targetElement.addEventListener('click', () => {
-                if (this.state.isVisible) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            });
-        } else if (trigger === 'focus') {
-            this._targetElement.addEventListener('focus', () => this.show());
-            this._targetElement.addEventListener('blur', () => this.hide());
-        }
-
-        // Wire up sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'text') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+        // Show on hover
+        this._target.addEventListener('mouseenter', () => {
+            this._show();
+        });
 
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    if (this._tooltipElement) {
-                        this._tooltipElement.textContent = transformed;
-                    }
-                    this.state.text = transformed;
-                });
-            }
+        this._target.addEventListener('mouseleave', () => {
+            this._hide();
         });
+
+        this._injectTooltipStyles();
     }
 
-    private _positionTooltip(): void {
-        if (!this._targetElement || !this._tooltipElement) return;
+    private _show(): void {
+        if (!this._tooltip || !this._target) return;
 
-        const targetRect = this._targetElement.getBoundingClientRect();
-        const tooltipRect = this._tooltipElement.getBoundingClientRect();
-        const { position } = this.state;
+        const targetRect = this._target.getBoundingClientRect();
+        const tooltipRect = this._tooltip.getBoundingClientRect();
 
         let top = 0;
         let left = 0;
 
-        switch (position) {
+        switch (this.state.position) {
             case 'top':
                 top = targetRect.top - tooltipRect.height - 8;
                 left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
@@ -235,168 +122,50 @@ export class Tooltip {
                 break;
         }
 
-        this._tooltipElement.style.top = `${top + window.scrollY}px`;
-        this._tooltipElement.style.left = `${left + window.scrollX}px`;
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._tooltip.style.display = 'block';
+    }
+
+    private _hide(): void {
+        if (this._tooltip) {
+            this._tooltip.style.display = 'none';
+        }
+    }
+
+    render(targetId?: string): this {
+        // Tooltips don't render to containers, they attach to targets
+        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
+        return this;
     }
 
-    private _injectDefaultStyles(): void {
+    private _injectTooltipStyles(): void {
         const styleId = 'jux-tooltip-styles';
         if (document.getElementById(styleId)) return;
 
         const style = document.createElement('style');
         style.id = styleId;
         style.textContent = `
-            .jux-tooltip {
-                position: absolute;
-                background: #1f2937;
-                color: white;
-                padding: 8px 12px;
-                border-radius: 6px;
-                font-size: 13px;
-                white-space: nowrap;
-                z-index: 10000;
-                pointer-events: none;
-                opacity: 0;
-                transition: opacity 0.2s;
-            }
-
-            .jux-tooltip-visible {
-                opacity: 1;
-            }
-
-            .jux-tooltip-top::after {
-                content: '';
-                position: absolute;
-                top: 100%;
-                left: 50%;
-                transform: translateX(-50%);
-                border: 5px solid transparent;
-                border-top-color: #1f2937;
-            }
-
-            .jux-tooltip-bottom::after {
-                content: '';
-                position: absolute;
-                bottom: 100%;
-                left: 50%;
-                transform: translateX(-50%);
-                border: 5px solid transparent;
-                border-bottom-color: #1f2937;
-            }
-
-            .jux-tooltip-left::after {
-                content: '';
-                position: absolute;
-                left: 100%;
-                top: 50%;
-                transform: translateY(-50%);
-                border: 5px solid transparent;
-                border-left-color: #1f2937;
-            }
-
-            .jux-tooltip-right::after {
-                content: '';
-                position: absolute;
-                right: 100%;
-                top: 50%;
-                transform: translateY(-50%);
-                border: 5px solid transparent;
-                border-right-color: #1f2937;
-            }
-        `;
+      .jux-tooltip {
+        position: fixed;
+        background: #1f2937;
+        color: white;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        z-index: 10000;
+        pointer-events: none;
+        animation: jux-tooltip-fade 0.2s;
+      }
+
+      @keyframes jux-tooltip-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    `;
         document.head.appendChild(style);
     }
-
-    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(`Tooltip: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
-
-        // === 2. PREPARE: Destructure state ===
-        const { text, content, position, trigger, style, class: className } = this.state;
-
-        // === 3. BUILD: Create DOM elements ===
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-tooltip-wrapper';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const contentEl = document.createElement('div');
-        contentEl.className = 'jux-tooltip-content';
-        contentEl.innerHTML = content;
-        wrapper.appendChild(contentEl);
-
-        const tooltip = document.createElement('div');
-        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
-        tooltip.id = `${this._id}-tooltip`;
-        tooltip.textContent = text;
-        tooltip.style.display = 'none';
-        wrapper.appendChild(tooltip);
-
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Tooltip trigger behavior
-        if (trigger === 'hover') {
-            wrapper.addEventListener('mouseenter', () => {
-                tooltip.style.display = 'block';
-            });
-            wrapper.addEventListener('mouseleave', () => {
-                tooltip.style.display = 'none';
-            });
-        } else if (trigger === 'click') {
-            wrapper.addEventListener('click', () => {
-                tooltip.style.display = tooltip.style.display === 'none' ? 'block' : 'none';
-            });
-        }
-
-        // 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 === 'text') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    tooltip.textContent = transformed;
-                    this.state.text = transformed;
-                });
-            }
-            else if (property === 'content') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    contentEl.innerHTML = transformed;
-                    this.state.content = transformed;
-                });
-            }
-        });
-
-        // === 5. RENDER: Append to DOM and finalize ===
-        container.appendChild(wrapper);
-        return this;
-    }
-
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Tooltip.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
-    }
 }
 
 export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {