juxscript 1.1.239 → 1.1.243

package/lib/components/modal.js

@@ -1,463 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['open', 'close'];
-export class Modal extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            title: options.title ?? '',
-            content: options.content ?? '',
-            icon: options.icon ?? undefined,
-            close: options.close ?? true,
-            backdropClose: options.backdropClose ?? true,
-            position: options.position,
-            size: options.size ?? 'medium',
-            open: false,
-            actions: options.actions ?? [],
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._overlay = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE (Precision DOM edits)
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        super.update(prop, value);
-        if (!this._overlay)
-            return;
-        const modal = this._overlay.querySelector('.jux-modal');
-        if (!modal)
-            return;
-        switch (prop) {
-            case 'open':
-                this._overlay.style.display = value ? 'flex' : 'none';
-                if (value) {
-                    this._triggerCallback('open');
-                }
-                else {
-                    this._triggerCallback('close');
-                }
-                break;
-            case 'title':
-                this._updateTitle(value);
-                break;
-            case 'content':
-                this._updateContent(value);
-                break;
-            case 'icon':
-                this._updateIcon(value);
-                break;
-            case 'size':
-                modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
-                break;
-            case 'position':
-                // Remove existing position classes
-                this._overlay.className = this._overlay.className
-                    .split(' ')
-                    .filter(c => !c.startsWith('jux-modal-position-'))
-                    .join(' ');
-                // Add new position class
-                if (value) {
-                    this._overlay.classList.add(`jux-modal-position-${value}`);
-                }
-                break;
-            case 'actions':
-                this._rebuildActions();
-                break;
-        }
-    }
-    _updateTitle(value) {
-        let headerEl = this._overlay.querySelector('.jux-modal-header');
-        if (!headerEl && value) {
-            // Create header if it doesn't exist
-            headerEl = document.createElement('div');
-            headerEl.className = 'jux-modal-header';
-            const modal = this._overlay.querySelector('.jux-modal');
-            const body = modal.querySelector('.jux-modal-body');
-            modal.insertBefore(headerEl, body);
-        }
-        if (headerEl) {
-            // Preserve icon if exists
-            const iconEl = headerEl.querySelector('.jux-modal-header-icon');
-            headerEl.innerHTML = '';
-            if (iconEl) {
-                headerEl.appendChild(iconEl);
-            }
-            const titleEl = document.createElement('span');
-            titleEl.className = 'jux-modal-header-title';
-            titleEl.textContent = value;
-            headerEl.appendChild(titleEl);
-        }
-    }
-    _updateIcon(value) {
-        const headerEl = this._overlay.querySelector('.jux-modal-header');
-        if (!headerEl)
-            return;
-        let iconEl = headerEl.querySelector('.jux-modal-header-icon');
-        if (value) {
-            if (!iconEl) {
-                iconEl = document.createElement('span');
-                iconEl.className = 'jux-modal-header-icon';
-                headerEl.insertBefore(iconEl, headerEl.firstChild);
-            }
-            iconEl.innerHTML = '';
-            iconEl.appendChild(renderIcon(value.icon, value.collection));
-        }
-        else if (iconEl) {
-            iconEl.remove();
-        }
-    }
-    _updateContent(value) {
-        const contentEl = this._overlay.querySelector('.jux-modal-content');
-        if (!contentEl)
-            return;
-        contentEl.innerHTML = '';
-        const items = Array.isArray(value) ? value : [value];
-        items.forEach(item => {
-            if (typeof item === 'string') {
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = item;
-                while (tempDiv.firstChild) {
-                    contentEl.appendChild(tempDiv.firstChild);
-                }
-            }
-            else if (item instanceof BaseComponent) {
-                item.render(contentEl);
-            }
-        });
-    }
-    _rebuildActions() {
-        const modal = this._overlay.querySelector('.jux-modal');
-        if (!modal)
-            return;
-        let footerEl = modal.querySelector('.jux-modal-footer');
-        if (this.state.actions.length === 0) {
-            if (footerEl)
-                footerEl.remove();
-            return;
-        }
-        if (!footerEl) {
-            footerEl = document.createElement('div');
-            footerEl.className = 'jux-modal-footer';
-            modal.appendChild(footerEl);
-        }
-        footerEl.innerHTML = '';
-        this.state.actions.forEach(action => {
-            // Check if it's an array of BaseComponents
-            if (Array.isArray(action)) {
-                action.forEach(component => {
-                    if (component instanceof BaseComponent) {
-                        component.render(footerEl);
-                    }
-                });
-            }
-            // Otherwise it's an action object with label property
-            else if ('label' in action) {
-                const btn = document.createElement('button');
-                btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
-                btn.textContent = action.label;
-                btn.type = 'button';
-                btn.addEventListener('click', () => {
-                    if (action.click)
-                        action.click();
-                });
-                footerEl.appendChild(btn);
-            }
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API (Just set state, update() handles DOM)
-     * ═════════════════════════════════════════════════════════════════ */
-    title(value) {
-        this.state.title = value;
-        return this;
-    }
-    content(value) {
-        this.state.content = value;
-        return this;
-    }
-    icon(value) {
-        this.state.icon = value;
-        return this;
-    }
-    close(value) {
-        this.state.close = value;
-        return this;
-    }
-    backdropClose(value) {
-        this.state.backdropClose = value;
-        return this;
-    }
-    size(value) {
-        this.state.size = value;
-        return this;
-    }
-    position(value) {
-        this.state.position = value;
-        return this;
-    }
-    actions(value) {
-        this.state.actions = value;
-        return this;
-    }
-    addAction(action) {
-        this.state.actions = [...this.state.actions, action];
-        return this;
-    }
-    open() {
-        this.state.open = true;
-        this._triggerCallback('open', true, null, this);
-        return this;
-    }
-    closeModal() {
-        this.state.open = false;
-        this._triggerCallback('close', false, null, this);
-        return this;
-    }
-    toggle() {
-        this.state.open = !this.state.open;
-        return this;
-    }
-    /**
-     * Check if modal is currently open
-     */
-    isOpen() {
-        return this.state.open;
-    }
-    /**
-     * Check if modal is currently closed
-     */
-    isClosed() {
-        return !this.state.open;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * DYNAMIC CONTENT ADDITION (Like tabs.addTabContent)
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Add content to modal (supports strings and BaseComponents)
-     */
-    addContent(content) {
-        const contentEl = this._overlay?.querySelector('.jux-modal-content');
-        if (!contentEl) {
-            console.warn('[Modal] Content element not found');
-            return this;
-        }
-        const items = Array.isArray(content) ? content : [content];
-        items.forEach(item => {
-            if (typeof item === 'string') {
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = item;
-                while (tempDiv.firstChild) {
-                    contentEl.appendChild(tempDiv.firstChild);
-                }
-            }
-            else if (item instanceof BaseComponent) {
-                item.render(contentEl);
-            }
-        });
-        return this;
-    }
-    /**
-     * Clear all content from modal
-     */
-    clearContent() {
-        const contentEl = this._overlay?.querySelector('.jux-modal-content');
-        if (contentEl) {
-            contentEl.innerHTML = '';
-        }
-        return this;
-    }
-    /**
-     * Get the modal content element ID for rendering child components
-     */
-    contentId() {
-        return `${this._id}-content`;
-    }
-    /**
-     * Get the modal content element (only available after render)
-     */
-    getContentElement() {
-        return document.getElementById(this.contentId());
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
-        const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
-        const overlay = document.createElement('div');
-        overlay.className = 'jux-modal-overlay';
-        overlay.id = this._id;
-        overlay.style.display = open ? 'flex' : 'none';
-        // Add position class
-        if (position) {
-            overlay.classList.add(`jux-modal-position-${position}`);
-        }
-        if (className)
-            overlay.className += ` ${className}`;
-        if (style)
-            overlay.setAttribute('style', style);
-        this._overlay = overlay;
-        const modal = document.createElement('div');
-        modal.className = `jux-modal jux-modal-${size}`;
-        if (close) {
-            const closeButton = document.createElement('button');
-            closeButton.className = 'jux-modal-close';
-            closeButton.innerHTML = '×';
-            closeButton.type = 'button';
-            modal.appendChild(closeButton);
-        }
-        if (title || icon) {
-            const header = document.createElement('div');
-            header.className = 'jux-modal-header';
-            if (icon) {
-                const iconEl = document.createElement('span');
-                iconEl.className = 'jux-modal-header-icon';
-                iconEl.appendChild(renderIcon(icon.icon, icon.collection));
-                header.appendChild(iconEl);
-            }
-            if (title) {
-                const titleEl = document.createElement('span');
-                titleEl.className = 'jux-modal-header-title';
-                titleEl.textContent = title;
-                header.appendChild(titleEl);
-            }
-            modal.appendChild(header);
-        }
-        const contentElement = document.createElement('div');
-        contentElement.className = 'jux-modal-content';
-        contentElement.id = this.contentId();
-        modal.appendChild(contentElement);
-        // Render initial content
-        if (content) {
-            const items = Array.isArray(content) ? content : [content];
-            items.forEach(item => {
-                if (typeof item === 'string') {
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = item;
-                    while (tempDiv.firstChild) {
-                        contentElement.appendChild(tempDiv.firstChild);
-                    }
-                }
-                else if (item instanceof BaseComponent) {
-                    item.render(contentElement);
-                }
-            });
-        }
-        if (actions.length > 0) {
-            const footer = document.createElement('div');
-            footer.className = 'jux-modal-footer';
-            actions.forEach(action => {
-                // Check if it's an array of BaseComponents
-                if (Array.isArray(action)) {
-                    action.forEach(component => {
-                        if (component instanceof BaseComponent) {
-                            component.render(footer);
-                        }
-                    });
-                }
-                // Otherwise it's an action object with label property
-                else if ('label' in action) {
-                    const btn = document.createElement('button');
-                    btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
-                    btn.textContent = action.label;
-                    btn.type = 'button';
-                    btn.addEventListener('click', () => {
-                        if (action.click)
-                            action.click();
-                    });
-                    footer.appendChild(btn);
-                }
-            });
-            modal.appendChild(footer);
-        }
-        overlay.appendChild(modal);
-        // Default dismiss behavior (only if NOT using sync)
-        if (!hasOpenSync) {
-            if (close) {
-                const closeButton = modal.querySelector('.jux-modal-close');
-                closeButton?.addEventListener('click', () => {
-                    this.state.open = false;
-                });
-            }
-            if (backdropClose) {
-                overlay.addEventListener('click', (e) => {
-                    if (e.target === overlay) {
-                        this.state.open = false;
-                    }
-                });
-            }
-        }
-        this._wireStandardEvents(overlay);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'open') {
-                const transformToState = toState || ((v) => Boolean(v));
-                const transformToComponent = toComponent || ((v) => Boolean(v));
-                let isUpdating = false;
-                stateObj.subscribe((val) => {
-                    if (isUpdating)
-                        return;
-                    const transformed = transformToComponent(val);
-                    this.state.open = transformed;
-                });
-                if (close) {
-                    const closeButton = modal.querySelector('.jux-modal-close');
-                    closeButton?.addEventListener('click', () => {
-                        if (isUpdating)
-                            return;
-                        isUpdating = true;
-                        this.state.open = false;
-                        stateObj.set(transformToState(false));
-                        setTimeout(() => { isUpdating = false; }, 0);
-                    });
-                }
-                if (backdropClose) {
-                    overlay.addEventListener('click', (e) => {
-                        if (e.target === overlay) {
-                            if (isUpdating)
-                                return;
-                            isUpdating = true;
-                            this.state.open = false;
-                            stateObj.set(transformToState(false));
-                            setTimeout(() => { isUpdating = false; }, 0);
-                        }
-                    });
-                }
-            }
-            else if (property === 'content') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.content = transformed;
-                });
-            }
-            else if (property === 'title') {
-                const transform = toComponent || ((v) => String(v));
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.title = transformed;
-                });
-            }
-        });
-        container.appendChild(overlay);
-        requestAnimationFrame(() => {
-            if (window.Iconify) {
-                window.Iconify.scan();
-            }
-        });
-        return this;
-    }
-}
-export function modal(id, options = {}) {
-    return new Modal(id, options);
-}