juxscript 1.1.4 → 1.1.6

package/lib/components/list.js

@@ -0,0 +1,311 @@
+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;
+    }
+}
+export function list(id, options = {}) {
+    return new List(id, options);
+}