juxscript 1.0.62 → 1.0.64

package/lib/componentsv2/list/skin.ts

@@ -0,0 +1,367 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { ListEngine, ListState, ListItem } from './engine.js';
+
+export class ListSkin extends BaseSkin<ListState, ListEngine> {
+    // UI Feature Flags
+    #showSearch = false;
+    #showAdd = false;
+    #showDelete = false;
+    #showEdit = false;
+    #showMove = false;
+    #showSort = false;
+
+    // Internal Drag State
+    #dragSourceIndex: number | null = null;
+
+    // DOM References (Stable elements to prevent re-render thrashing)
+    #toolbar: HTMLElement | null = null;
+    #listContainer: HTMLElement | null = null;
+
+    // Toolbar Componenets
+    #searchInput: HTMLInputElement | null = null;
+    #addBtn: HTMLButtonElement | null = null;
+    #sortBtn: HTMLButtonElement | null = null;
+
+    constructor(engine: ListEngine) {
+        super(engine);
+    }
+
+    // ✅ Implements Contract: Points to ./structure.css at runtime
+    protected get structureCss(): string {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+
+    // --- Public UI API ---
+    enableSearch(enabled: boolean): void { this.#showSearch = enabled; this.#renderToolbar(); }
+    enableAdd(enabled: boolean): void { this.#showAdd = enabled; this.#renderToolbar(); }
+    enableDelete(enabled: boolean): void { this.#showDelete = enabled; this.updateSkin(this.engine.state); }
+    enableMove(enabled: boolean): void { this.#showMove = enabled; this.updateSkin(this.engine.state); }
+    enableSort(enabled: boolean): void { this.#showSort = enabled; this.#renderToolbar(); }
+    enableNoItems(message: string = 'No items found.'): void { this.engine.enableNoItems(message); }
+
+    enableEdit(enabled: boolean): void {
+        this.#showEdit = enabled;
+        this.updateSkin(this.engine.state);
+    }
+
+    // --- Template Skin Implementation ---
+
+    protected bindEvents(root: HTMLElement): void {
+        // 1. Delegation: Toolbar Events (Handled via direct element ref where possible now, or delegation fallback)
+
+        // We attach the input listener globally on root for delegation,
+        // but now that we hold the #searchInput ref, we could bind directly.
+        // Delegation is still safer if elements are recreated.
+        root.addEventListener('input', (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            if (target.matches('.jux-search-input')) {
+                this.engine.filter(target.value);
+            }
+        });
+
+        root.addEventListener('click', (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+
+            // Toolbar: Add
+            if (target.closest('.jux-action-add')) {
+                this.engine.addItem('New Item');
+                const newIndex = this.engine.state.items.length - 1;
+                if (newIndex >= 0) this.#openEditModal(newIndex);
+                return;
+            }
+
+            // Toolbar: Sort
+            if (target.closest('.jux-action-sort')) {
+                this.engine.toggleSort();
+                return;
+            }
+
+            // List Item Actions
+            const li = target.closest('li');
+            if (!li) return;
+
+            // ✅ USE ID for robust targeting
+            const id = li.dataset.id;
+            const indexStr = li.dataset.index;
+            if (!indexStr || !id) return;
+
+            const index = parseInt(indexStr, 10);
+
+            // Action: Delete
+            if (target.closest('.jux-action-delete')) {
+                this.engine.removeItem(id); // ✅ Valid per new engine signature
+                e.stopImmediatePropagation();
+                return;
+            }
+
+            // Action: Edit
+            if (target.closest('.jux-action-edit')) {
+                this.#openEditModal(index);
+                e.stopImmediatePropagation();
+                return;
+            }
+
+            // List Item: Selection
+            if (!target.closest('.jux-control')) {
+                this.engine.toggleSelection(index);
+            }
+        });
+
+        // 2. Drag & Drop Logic
+        root.addEventListener('dragstart', (e: DragEvent) => {
+            if (!this.#showMove) return;
+            const li = (e.target as HTMLElement).closest('li');
+            if (li) {
+                this.#dragSourceIndex = parseInt(li.dataset.index || '-1', 10);
+                e.dataTransfer!.effectAllowed = 'move';
+                e.dataTransfer!.setData('text/plain', li.dataset.index || '');
+                requestAnimationFrame(() => li.classList.add('jux-dragging'));
+            }
+        });
+
+        root.addEventListener('dragend', (e: DragEvent) => {
+            const li = (e.target as HTMLElement).closest('li');
+            if (li) li.classList.remove('jux-dragging');
+            root.querySelectorAll('.jux-item-drop-target').forEach(el => el.classList.remove('jux-item-drop-target'));
+            this.#dragSourceIndex = null;
+        });
+
+        root.addEventListener('dragover', (e: DragEvent) => {
+            if (!this.#showMove) return;
+            e.preventDefault();
+            const li = (e.target as HTMLElement).closest('li');
+            if (li && !li.classList.contains('jux-dragging')) {
+                e.dataTransfer!.dropEffect = 'move';
+                root.querySelectorAll('.jux-item-drop-target').forEach(el => el.classList.remove('jux-item-drop-target'));
+                li.classList.add('jux-item-drop-target');
+            }
+        });
+
+        root.addEventListener('drop', (e: DragEvent) => {
+            if (!this.#showMove) return;
+            e.preventDefault();
+            const li = (e.target as HTMLElement).closest('li');
+            if (li && this.#dragSourceIndex !== null) {
+                const toIndex = parseInt(li.dataset.index || '-1', 10);
+                if (toIndex !== -1 && this.#dragSourceIndex !== toIndex) {
+                    this.engine.moveItem(this.#dragSourceIndex, toIndex);
+                }
+            }
+        });
+    }
+
+    // --- Internals: Modal Editing ---
+    #openEditModal(index: number): void {
+        const item = this.engine.state.items[index];
+        if (!item) return;
+
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-modal-overlay';
+        overlay.innerHTML = `
+            <div class="jux-modal">
+                <h3>Edit Item</h3>
+                <input type="text" id="jux-edit-input" value="${item.text.replace(/"/g, '&quot;')}" />
+                <div class="jux-modal-actions">
+                    <button class="jux-modal-btn jux-btn-cancel" id="jux-edit-cancel">Cancel</button>
+                    <button class="jux-modal-btn jux-btn-save" id="jux-edit-save">Save</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+        const input = overlay.querySelector('#jux-edit-input') as HTMLInputElement;
+        const close = () => document.body.removeChild(overlay);
+        const save = () => {
+            if (input.value.trim()) this.engine.updateItem(index, input.value);
+            close();
+        };
+
+        overlay.querySelector('#jux-edit-cancel')?.addEventListener('click', close);
+        overlay.querySelector('#jux-edit-save')?.addEventListener('click', save);
+        overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') save();
+            if (e.key === 'Escape') close();
+        });
+        setTimeout(() => { input.focus(); input.select(); }, 0);
+    }
+
+    /**
+     * Skin Contract: Update/Changes
+     */
+    protected updateSkin(state: ListState): void {
+        if (!this.root) return;
+
+        // Perform the DOM Update
+        const performUpdate = () => {
+            this.applySkinAttributes(this.root!, state);
+
+            // Lazy Creation
+            if (!this.#listContainer) {
+                this.root!.innerHTML = '';
+                this.#toolbar = document.createElement('div');
+                this.#toolbar.className = 'jux-list-toolbar';
+                this.root!.appendChild(this.#toolbar);
+
+                this.#listContainer = document.createElement('div');
+                this.root!.appendChild(this.#listContainer);
+                this.#renderToolbar(); // Initial render
+            }
+
+            // Always update toolbar state (e.g. icon direction) without destroying inputs
+            this.#renderToolbar();
+
+            // Container Classes
+            const classes = [...state.classes];
+            if (state.selectionMode !== 'none') classes.push('jux-list-selectable');
+            this.#listContainer!.className = classes.join(' ');
+
+            // Filtering
+            const visibleItems = state.items
+                .map((item, originalIndex) => ({ item, originalIndex }))
+                .filter(({ item }) =>
+                    state.filterText
+                        ? item.text.toLowerCase().includes(state.filterText.toLowerCase())
+                        : true
+                );
+
+            // Rendering Content
+            if (visibleItems.length === 0 && state.noItemsMessage) {
+                this.#listContainer!.innerHTML = `<div class="jux-list-empty-state">${state.noItemsMessage}</div>`;
+            } else {
+                const tag = state.listType === 'ordered' ? 'ol' : 'ul';
+                const html = visibleItems
+                    .map(({ item, originalIndex }) => this.#renderListItem(item, originalIndex, state))
+                    .join('');
+
+                this.#listContainer!.innerHTML = `<${tag} class="jux-list-element jux-list-type-${tag}">${html}</${tag}>`;
+            }
+        };
+
+        // ✨ View Transitions Logic
+        // We SKIP transition if the search input is focused, otherwise typing janks the UI.
+        const isSearching = document.activeElement &&
+            (document.activeElement === this.#searchInput);
+
+        if (!isSearching && typeof document !== 'undefined' && 'startViewTransition' in document) {
+            // @ts-ignore
+            document.startViewTransition(performUpdate);
+        } else {
+            performUpdate();
+        }
+    }
+
+    // --- DOM-Based Toolbar Rendering ---
+    #renderToolbar(): void {
+        if (!this.#toolbar) return;
+
+        // 1. Search Logic
+        if (this.#showSearch) {
+            if (!this.#searchInput) {
+                this.#searchInput = document.createElement('input');
+                this.#searchInput.type = 'text';
+                this.#searchInput.className = 'jux-search-input';
+                this.#searchInput.placeholder = 'Filter items...';
+                // Insert at start
+                this.#toolbar.prepend(this.#searchInput);
+            }
+        } else if (this.#searchInput) {
+            this.#searchInput.remove();
+            this.#searchInput = null;
+        }
+
+        // 2. Sort Logic
+        if (this.#showSort) {
+            if (!this.#sortBtn) {
+                this.#sortBtn = document.createElement('button');
+                this.#sortBtn.className = 'jux-action-sort';
+                this.#sortBtn.type = 'button';
+                this.#sortBtn.ariaLabel = 'Sort';
+                this.#toolbar.appendChild(this.#sortBtn);
+            }
+            // Update Icon state
+            const s = this.engine.state.sorted;
+            const icon = s === 'asc' ? '↑' : (s === 'desc' ? '↓' : '↕');
+            if (this.#sortBtn.textContent !== icon) {
+                this.#sortBtn.textContent = icon;
+            }
+        } else if (this.#sortBtn) {
+            this.#sortBtn.remove();
+            this.#sortBtn = null;
+        }
+
+        // 3. Add Logic
+        if (this.#showAdd) {
+            if (!this.#addBtn) {
+                this.#addBtn = document.createElement('button');
+                this.#addBtn.className = 'jux-action-add';
+                this.#addBtn.type = 'button';
+                this.#addBtn.ariaLabel = 'Add Item';
+                this.#addBtn.textContent = '+';
+                this.#toolbar.appendChild(this.#addBtn);
+            }
+        } else if (this.#addBtn) {
+            this.#addBtn.remove();
+            this.#addBtn = null;
+        }
+
+        // Parent Visibility
+        const hasChildren = this.#showSearch || this.#showSort || this.#showAdd;
+        this.#toolbar.style.display = hasChildren ? 'flex' : 'none';
+
+        // ensure Search input is first by re-prepending if it exists
+        if (this.#searchInput && this.#toolbar.firstChild !== this.#searchInput) {
+            this.#toolbar.prepend(this.#searchInput);
+        }
+    }
+
+    #renderListItem(item: ListItem, index: number, state: ListState): string {
+        const css = [
+            'jux-list-item',
+            item.selected ? 'jux-selected' : '',
+            ...(item.classes || [])
+        ].filter(Boolean).join(' ');
+
+        // ✅ Determine Content based on Columns configuration
+        let content = item.text;
+
+        if (state.columns && state.columns.length > 0) {
+            content = state.columns.map(col => {
+                const key = typeof col === 'string' ? col : col.key;
+                const cssClass = (typeof col === 'object' && col.label) ? `jux-col-${key}` : ''; // Basic class hook
+                const value = item[key] ?? '';
+                // If complex object, stringify or fallback
+                const displayVal = (typeof value === 'object') ? JSON.stringify(value) : String(value);
+
+                return `<span class="jux-col ${cssClass}">${displayVal}</span>`;
+            }).join(' <span class="jux-col-sep"> </span> ');
+        } else {
+            // Default Fallback logic: If no columns but item.text is boring ("[object Object]"), try to find keys
+            if (content === '[object Object]') {
+                const keys = Object.keys(item).filter(k =>
+                    k !== 'id' && k !== 'selected' && k !== 'classes' && k !== 'text' && k !== 'value'
+                );
+                if (keys.length > 0) {
+                    content = `${item[keys[0]]}`;
+                }
+            }
+        }
+
+        const moveBtn = this.#showMove ? `<span class="jux-action-drag jux-control" title="Drag to reorder">≡</span>` : '';
+        const editBtn = this.#showEdit ? `<button class="jux-action-edit jux-control" aria-label="Edit">✎</button>` : '';
+        const deleteBtn = this.#showDelete ? `<button class="jux-action-delete jux-control" aria-label="Delete">×</button>` : '';
+        const draggableAttr = this.#showMove ? 'draggable="true"' : '';
+        const transitionName = `jux-item-${item.id.replace(/[^a-zA-Z0-9-_]/g, '-')}`;
+
+        return `
+            <li data-id="${item.id}" data-index="${index}" class="${css}" ${draggableAttr} style="view-transition-name: ${transitionName}">
+                <div class="jux-list-item-content">
+                    ${content}
+                </div>
+                <div class="jux-item-controls">
+                    ${moveBtn}
+                    ${editBtn}
+                    ${deleteBtn}
+                </div>
+            </li>`;
+    }
+}