juxscript 1.1.239 → 1.1.243

package/lib/components/list.js

@@ -1,314 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['itemClick', 'itemDoubleClick', 'selectionChange'];
-export class List extends BaseComponent {
-    constructor(id, options = {}) {
-        // ✅ Normalize items - convert strings to ListItem objects
-        const normalizedItems = (options.items ?? []).map(item => typeof item === 'string' ? { title: item } : item);
-        super(id, {
-            items: normalizedItems,
-            header: options.header ?? '',
-            gap: options.gap ?? '0.5rem',
-            direction: options.direction ?? 'vertical',
-            selectable: options.selectable ?? false,
-            multiSelect: options.multiSelect ?? false,
-            selectedIndex: options.selectedIndex ?? null,
-            selectedIndices: options.selectedIndices ?? [],
-            ordered: options.ordered ?? false,
-            striped: options.striped ?? false,
-            hoverable: options.hoverable ?? true,
-            bordered: options.bordered ?? false,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._onItemClick = null;
-        this._onItemDoubleClick = null;
-        this._onSelectionChange = null;
-        this._listElement = null;
-        this._onItemClick = options.onItemClick ?? null;
-        this._onItemDoubleClick = options.onItemDoubleClick ?? null;
-        this._onSelectionChange = options.onSelectionChange ?? null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
-    items(value) {
-        // ✅ Normalize items when setting via fluent API
-        this.state.items = value.map(item => typeof item === 'string' ? { title: item } : item);
-        this._updateList();
-        return this;
-    }
-    addItem(value) {
-        // ✅ Normalize single item
-        const normalizedItem = typeof value === 'string' ? { title: value } : value;
-        this.state.items = [...this.state.items, normalizedItem];
-        this._updateList();
-        return this;
-    }
-    removeItem(index) {
-        this.state.items = this.state.items.filter((_, i) => i !== index);
-        this._updateList();
-        return this;
-    }
-    updateItem(index, updates) {
-        this.state.items = this.state.items.map((item, i) => i === index ? { ...item, ...updates } : item);
-        this._updateList();
-        return this;
-    }
-    clearItems() {
-        this.state.items = [];
-        this._updateList();
-        return this;
-    }
-    itemClass(className) {
-        this.state.items = this.state.items.map(item => ({
-            ...item,
-            itemClass: className
-        }));
-        this._updateList();
-        return this;
-    }
-    ordered(value) {
-        this.state.ordered = value;
-        return this;
-    }
-    selectable(value) {
-        this.state.selectable = value;
-        return this;
-    }
-    multiSelect(value) {
-        this.state.multiSelect = value;
-        return this;
-    }
-    striped(value) {
-        this.state.striped = value;
-        return this;
-    }
-    hoverable(value) {
-        this.state.hoverable = value;
-        return this;
-    }
-    bordered(value) {
-        this.state.bordered = value;
-        return this;
-    }
-    selectItem(index) {
-        if (!this.state.selectable)
-            return this;
-        if (this.state.multiSelect) {
-            if (!this.state.selectedIndices.includes(index)) {
-                this.state.selectedIndices = [...this.state.selectedIndices, index];
-            }
-        }
-        else {
-            this.state.selectedIndex = index;
-            this.state.selectedIndices = [index];
-        }
-        this._updateSelection();
-        this._triggerSelectionChange();
-        return this;
-    }
-    deselectItem(index) {
-        if (!this.state.selectable)
-            return this;
-        if (this.state.multiSelect) {
-            this.state.selectedIndices = this.state.selectedIndices.filter(i => i !== index);
-        }
-        else {
-            this.state.selectedIndex = null;
-            this.state.selectedIndices = [];
-        }
-        this._updateSelection();
-        this._triggerSelectionChange();
-        return this;
-    }
-    clearSelection() {
-        this.state.selectedIndex = null;
-        this.state.selectedIndices = [];
-        this._updateSelection();
-        this._triggerSelectionChange();
-        return this;
-    }
-    getSelectedItems() {
-        return this.state.selectedIndices.map(i => this.state.items[i]).filter(Boolean);
-    }
-    getSelectedIndices() {
-        return this.state.selectedIndices;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-    _updateList() {
-        if (!this._listElement)
-            return;
-        this._listElement.innerHTML = '';
-        this._renderItems(this._listElement);
-    }
-    _updateSelection() {
-        if (!this._listElement)
-            return;
-        const items = this._listElement.querySelectorAll('.jux-list-item');
-        items.forEach((el, index) => {
-            const isSelected = this.state.selectedIndices.includes(index);
-            el.classList.toggle('jux-list-item-selected', isSelected);
-        });
-    }
-    _triggerSelectionChange() {
-        const selectedItems = this.getSelectedItems();
-        const selectedIndices = this.getSelectedIndices();
-        if (this._onSelectionChange) {
-            this._onSelectionChange(selectedItems, selectedIndices);
-        }
-        // 🎯 Fire the selectionChange callback event
-        this._triggerCallback('selectionChange', { items: selectedItems, indices: selectedIndices });
-    }
-    _renderItems(list) {
-        const { items, selectable, hoverable, striped, bordered } = this.state;
-        items.forEach((item, index) => {
-            const li = document.createElement('li');
-            li.className = 'jux-list-item';
-            if (item.itemClass)
-                li.className += ` ${item.itemClass}`;
-            if (item.type && item.type !== 'default')
-                li.classList.add(`jux-list-item-${item.type}`);
-            if (item.disabled)
-                li.classList.add('jux-list-item-disabled');
-            if (this.state.selectedIndices.includes(index))
-                li.classList.add('jux-list-item-selected');
-            if (hoverable && !item.disabled)
-                li.classList.add('jux-list-item-hoverable');
-            if (striped && index % 2 === 1)
-                li.classList.add('jux-list-item-striped');
-            if (bordered)
-                li.classList.add('jux-list-item-bordered');
-            // Content container
-            const content = document.createElement('div');
-            content.className = 'jux-list-item-content';
-            // Icon
-            if (item.icon) {
-                const iconEl = document.createElement('span');
-                iconEl.className = 'jux-list-item-icon';
-                iconEl.appendChild(renderIcon(item.icon));
-                content.appendChild(iconEl);
-            }
-            // Text content
-            const textContainer = document.createElement('div');
-            textContainer.className = 'jux-list-item-text';
-            if (item.title) {
-                const titleEl = document.createElement('div');
-                titleEl.className = 'jux-list-item-title';
-                titleEl.textContent = item.title;
-                textContainer.appendChild(titleEl);
-            }
-            if (item.body) {
-                const bodyEl = document.createElement('div');
-                bodyEl.className = 'jux-list-item-body';
-                bodyEl.textContent = item.body;
-                textContainer.appendChild(bodyEl);
-            }
-            content.appendChild(textContainer);
-            // Metadata
-            if (item.metadata) {
-                const metaEl = document.createElement('div');
-                metaEl.className = 'jux-list-item-metadata';
-                metaEl.textContent = item.metadata;
-                content.appendChild(metaEl);
-            }
-            li.appendChild(content);
-            // Click handlers
-            if (!item.disabled) {
-                li.addEventListener('click', (e) => {
-                    if (selectable) {
-                        if (this.state.selectedIndices.includes(index)) {
-                            this.deselectItem(index);
-                        }
-                        else {
-                            if (!this.state.multiSelect) {
-                                this.clearSelection();
-                            }
-                            this.selectItem(index);
-                        }
-                    }
-                    if (this._onItemClick) {
-                        this._onItemClick(item, index, e);
-                    }
-                    // 🎯 Fire the itemClick callback event
-                    this._triggerCallback('itemClick', { item, index, event: e });
-                });
-                li.addEventListener('dblclick', (e) => {
-                    if (this._onItemDoubleClick) {
-                        this._onItemDoubleClick(item, index, e);
-                    }
-                    // 🎯 Fire the itemDoubleClick callback event
-                    this._triggerCallback('itemDoubleClick', { item, index, event: e });
-                });
-            }
-            list.appendChild(li);
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { header, ordered, style, class: className } = this.state;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-list-wrapper';
-        wrapper.id = `${this._id}-wrapper`;
-        // Header
-        if (header) {
-            const headerEl = document.createElement('div');
-            headerEl.className = 'jux-list-header';
-            headerEl.textContent = header;
-            wrapper.appendChild(headerEl);
-        }
-        // List
-        const list = document.createElement(ordered ? 'ol' : 'ul');
-        list.className = `jux-list ${ordered ? 'jux-list-ordered' : 'jux-list-unordered'}`;
-        list.id = this._id;
-        if (className)
-            list.className += ` ${className}`;
-        if (style)
-            list.setAttribute('style', style);
-        this._listElement = list;
-        this._renderItems(list);
-        wrapper.appendChild(list);
-        this._wireStandardEvents(list);
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'items') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.items = transformed;
-                    this._updateList();
-                });
-            }
-            else if (property === 'selectedIndices') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.selectedIndices = transformed;
-                    this._updateSelection();
-                });
-            }
-        });
-        container.appendChild(wrapper);
-        return this;
-    }
-    update(prop, value) {
-        // No reactive updates needed
-    }
-}
-export function list(id, options = {}) {
-    return new List(id, options);
-}