juxscript 1.0.132 → 1.1.2

package/lib/componentsv2/list/ListSkin.js

@@ -1,345 +0,0 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _ListSkin_instances, _ListSkin_showSearch, _ListSkin_showAdd, _ListSkin_showDelete, _ListSkin_showEdit, _ListSkin_showMove, _ListSkin_showSort, _ListSkin_dragSourceIndex, _ListSkin_toolbar, _ListSkin_listContainer, _ListSkin_searchInput, _ListSkin_addBtn, _ListSkin_sortBtn, _ListSkin_openEditModal, _ListSkin_renderToolbar, _ListSkin_renderListItem;
-import { BaseSkin } from '../base/BaseSkin.js';
-import structureCss from './structure.css';
-export class ListSkin extends BaseSkin {
-    constructor(engine) {
-        super(engine);
-        _ListSkin_instances.add(this);
-        // UI Feature Flags
-        _ListSkin_showSearch.set(this, false);
-        _ListSkin_showAdd.set(this, false);
-        _ListSkin_showDelete.set(this, false);
-        _ListSkin_showEdit.set(this, false);
-        _ListSkin_showMove.set(this, false);
-        _ListSkin_showSort.set(this, false);
-        // Internal Drag State
-        _ListSkin_dragSourceIndex.set(this, null);
-        // DOM References (Stable elements to prevent re-render thrashing)
-        _ListSkin_toolbar.set(this, null);
-        _ListSkin_listContainer.set(this, null);
-        // Toolbar Componenets
-        _ListSkin_searchInput.set(this, null);
-        _ListSkin_addBtn.set(this, null);
-        _ListSkin_sortBtn.set(this, null);
-    }
-    // --- Public UI API ---
-    enableSearch(enabled) { __classPrivateFieldSet(this, _ListSkin_showSearch, enabled, "f"); __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderToolbar).call(this); }
-    enableAdd(enabled) { __classPrivateFieldSet(this, _ListSkin_showAdd, enabled, "f"); __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderToolbar).call(this); }
-    enableDelete(enabled) { __classPrivateFieldSet(this, _ListSkin_showDelete, enabled, "f"); this.updateSkin(this.engine.state); }
-    enableMove(enabled) { __classPrivateFieldSet(this, _ListSkin_showMove, enabled, "f"); this.updateSkin(this.engine.state); }
-    enableSort(enabled) { __classPrivateFieldSet(this, _ListSkin_showSort, enabled, "f"); __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderToolbar).call(this); }
-    enableNoItems(message = 'No items found.') { this.engine.enableNoItems(message); }
-    enableEdit(enabled) {
-        __classPrivateFieldSet(this, _ListSkin_showEdit, enabled, "f");
-        this.updateSkin(this.engine.state);
-    }
-    get structureCss() {
-        return structureCss;
-    }
-    // --- Template Skin Implementation ---
-    bindEvents(root) {
-        // 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) => {
-            const target = e.target;
-            if (target.matches('.jux-search-input')) {
-                this.engine.filter(target.value);
-            }
-        });
-        root.addEventListener('click', (e) => {
-            const target = e.target;
-            // Toolbar: Add
-            if (target.closest('.jux-action-add')) {
-                this.engine.addItem('New Item');
-                const newIndex = this.engine.state.items.length - 1;
-                if (newIndex >= 0)
-                    __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_openEditModal).call(this, 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')) {
-                __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_openEditModal).call(this, index);
-                e.stopImmediatePropagation();
-                return;
-            }
-            // List Item: Selection
-            if (!target.closest('.jux-control')) {
-                this.engine.toggleSelection(index);
-            }
-        });
-        // 2. Drag & Drop Logic
-        root.addEventListener('dragstart', (e) => {
-            if (!__classPrivateFieldGet(this, _ListSkin_showMove, "f"))
-                return;
-            const li = e.target.closest('li');
-            if (li) {
-                __classPrivateFieldSet(this, _ListSkin_dragSourceIndex, parseInt(li.dataset.index || '-1', 10), "f");
-                e.dataTransfer.effectAllowed = 'move';
-                e.dataTransfer.setData('text/plain', li.dataset.index || '');
-                requestAnimationFrame(() => li.classList.add('jux-dragging'));
-            }
-        });
-        root.addEventListener('dragend', (e) => {
-            const li = e.target.closest('li');
-            if (li)
-                li.classList.remove('jux-dragging');
-            root.querySelectorAll('.jux-item-drop-target').forEach(el => el.classList.remove('jux-item-drop-target'));
-            __classPrivateFieldSet(this, _ListSkin_dragSourceIndex, null, "f");
-        });
-        root.addEventListener('dragover', (e) => {
-            if (!__classPrivateFieldGet(this, _ListSkin_showMove, "f"))
-                return;
-            e.preventDefault();
-            const li = e.target.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) => {
-            if (!__classPrivateFieldGet(this, _ListSkin_showMove, "f"))
-                return;
-            e.preventDefault();
-            const li = e.target.closest('li');
-            if (li && __classPrivateFieldGet(this, _ListSkin_dragSourceIndex, "f") !== null) {
-                const toIndex = parseInt(li.dataset.index || '-1', 10);
-                if (toIndex !== -1 && __classPrivateFieldGet(this, _ListSkin_dragSourceIndex, "f") !== toIndex) {
-                    this.engine.moveItem(__classPrivateFieldGet(this, _ListSkin_dragSourceIndex, "f"), toIndex);
-                }
-            }
-        });
-    }
-    /**
-     * Skin Contract: Update/Changes
-     */
-    updateSkin(state) {
-        if (!this.root)
-            return;
-        // ✅ Ensure standard ID is set
-        this.root.id = state.id;
-        // Perform the DOM Update
-        const performUpdate = () => {
-            this.applySkinAttributes(this.root, state);
-            // Lazy Creation
-            if (!__classPrivateFieldGet(this, _ListSkin_listContainer, "f")) {
-                this.root.innerHTML = '';
-                __classPrivateFieldSet(this, _ListSkin_toolbar, document.createElement('div'), "f");
-                __classPrivateFieldGet(this, _ListSkin_toolbar, "f").className = 'jux-list-toolbar';
-                this.root.appendChild(__classPrivateFieldGet(this, _ListSkin_toolbar, "f"));
-                __classPrivateFieldSet(this, _ListSkin_listContainer, document.createElement('div'), "f");
-                this.root.appendChild(__classPrivateFieldGet(this, _ListSkin_listContainer, "f"));
-                __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderToolbar).call(this); // Initial render
-            }
-            // Always update toolbar state (e.g. icon direction) without destroying inputs
-            __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderToolbar).call(this);
-            // Container Classes
-            const classes = [...state.classes];
-            if (state.selectionMode !== 'none')
-                classes.push('jux-list-selectable');
-            __classPrivateFieldGet(this, _ListSkin_listContainer, "f").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) {
-                __classPrivateFieldGet(this, _ListSkin_listContainer, "f").innerHTML = `<div class="jux-list-empty-state">${state.noItemsMessage}</div>`;
-            }
-            else {
-                const tag = state.listType === 'ordered' ? 'ol' : 'ul';
-                const html = visibleItems
-                    .map(({ item, originalIndex }) => __classPrivateFieldGet(this, _ListSkin_instances, "m", _ListSkin_renderListItem).call(this, item, originalIndex, state))
-                    .join('');
-                __classPrivateFieldGet(this, _ListSkin_listContainer, "f").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 === __classPrivateFieldGet(this, _ListSkin_searchInput, "f"));
-        if (!isSearching && typeof document !== 'undefined' && 'startViewTransition' in document) {
-            // @ts-ignore
-            document.startViewTransition(performUpdate);
-        }
-        else {
-            performUpdate();
-        }
-    }
-}
-_ListSkin_showSearch = new WeakMap(), _ListSkin_showAdd = new WeakMap(), _ListSkin_showDelete = new WeakMap(), _ListSkin_showEdit = new WeakMap(), _ListSkin_showMove = new WeakMap(), _ListSkin_showSort = new WeakMap(), _ListSkin_dragSourceIndex = new WeakMap(), _ListSkin_toolbar = new WeakMap(), _ListSkin_listContainer = new WeakMap(), _ListSkin_searchInput = new WeakMap(), _ListSkin_addBtn = new WeakMap(), _ListSkin_sortBtn = new WeakMap(), _ListSkin_instances = new WeakSet(), _ListSkin_openEditModal = function _ListSkin_openEditModal(index) {
-    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');
-    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);
-}, _ListSkin_renderToolbar = function _ListSkin_renderToolbar() {
-    if (!__classPrivateFieldGet(this, _ListSkin_toolbar, "f"))
-        return;
-    // 1. Search Logic
-    if (__classPrivateFieldGet(this, _ListSkin_showSearch, "f")) {
-        if (!__classPrivateFieldGet(this, _ListSkin_searchInput, "f")) {
-            __classPrivateFieldSet(this, _ListSkin_searchInput, document.createElement('input'), "f");
-            __classPrivateFieldGet(this, _ListSkin_searchInput, "f").type = 'text';
-            __classPrivateFieldGet(this, _ListSkin_searchInput, "f").className = 'jux-search-input';
-            __classPrivateFieldGet(this, _ListSkin_searchInput, "f").placeholder = 'Filter items...';
-            // Insert at start
-            __classPrivateFieldGet(this, _ListSkin_toolbar, "f").prepend(__classPrivateFieldGet(this, _ListSkin_searchInput, "f"));
-        }
-    }
-    else if (__classPrivateFieldGet(this, _ListSkin_searchInput, "f")) {
-        __classPrivateFieldGet(this, _ListSkin_searchInput, "f").remove();
-        __classPrivateFieldSet(this, _ListSkin_searchInput, null, "f");
-    }
-    // 2. Sort Logic
-    if (__classPrivateFieldGet(this, _ListSkin_showSort, "f")) {
-        if (!__classPrivateFieldGet(this, _ListSkin_sortBtn, "f")) {
-            __classPrivateFieldSet(this, _ListSkin_sortBtn, document.createElement('button'), "f");
-            __classPrivateFieldGet(this, _ListSkin_sortBtn, "f").className = 'jux-action-sort';
-            __classPrivateFieldGet(this, _ListSkin_sortBtn, "f").type = 'button';
-            __classPrivateFieldGet(this, _ListSkin_sortBtn, "f").ariaLabel = 'Sort';
-            __classPrivateFieldGet(this, _ListSkin_toolbar, "f").appendChild(__classPrivateFieldGet(this, _ListSkin_sortBtn, "f"));
-        }
-        // Update Icon state
-        const s = this.engine.state.sorted;
-        const icon = s === 'asc' ? '↑' : (s === 'desc' ? '↓' : '↕');
-        if (__classPrivateFieldGet(this, _ListSkin_sortBtn, "f").textContent !== icon) {
-            __classPrivateFieldGet(this, _ListSkin_sortBtn, "f").textContent = icon;
-        }
-    }
-    else if (__classPrivateFieldGet(this, _ListSkin_sortBtn, "f")) {
-        __classPrivateFieldGet(this, _ListSkin_sortBtn, "f").remove();
-        __classPrivateFieldSet(this, _ListSkin_sortBtn, null, "f");
-    }
-    // 3. Add Logic
-    if (__classPrivateFieldGet(this, _ListSkin_showAdd, "f")) {
-        if (!__classPrivateFieldGet(this, _ListSkin_addBtn, "f")) {
-            __classPrivateFieldSet(this, _ListSkin_addBtn, document.createElement('button'), "f");
-            __classPrivateFieldGet(this, _ListSkin_addBtn, "f").className = 'jux-action-add';
-            __classPrivateFieldGet(this, _ListSkin_addBtn, "f").type = 'button';
-            __classPrivateFieldGet(this, _ListSkin_addBtn, "f").ariaLabel = 'Add Item';
-            __classPrivateFieldGet(this, _ListSkin_addBtn, "f").textContent = '+';
-            __classPrivateFieldGet(this, _ListSkin_toolbar, "f").appendChild(__classPrivateFieldGet(this, _ListSkin_addBtn, "f"));
-        }
-    }
-    else if (__classPrivateFieldGet(this, _ListSkin_addBtn, "f")) {
-        __classPrivateFieldGet(this, _ListSkin_addBtn, "f").remove();
-        __classPrivateFieldSet(this, _ListSkin_addBtn, null, "f");
-    }
-    // Parent Visibility
-    const hasChildren = __classPrivateFieldGet(this, _ListSkin_showSearch, "f") || __classPrivateFieldGet(this, _ListSkin_showSort, "f") || __classPrivateFieldGet(this, _ListSkin_showAdd, "f");
-    __classPrivateFieldGet(this, _ListSkin_toolbar, "f").style.display = hasChildren ? 'flex' : 'none';
-    // ensure Search input is first by re-prepending if it exists
-    if (__classPrivateFieldGet(this, _ListSkin_searchInput, "f") && __classPrivateFieldGet(this, _ListSkin_toolbar, "f").firstChild !== __classPrivateFieldGet(this, _ListSkin_searchInput, "f")) {
-        __classPrivateFieldGet(this, _ListSkin_toolbar, "f").prepend(__classPrivateFieldGet(this, _ListSkin_searchInput, "f"));
-    }
-}, _ListSkin_renderListItem = function _ListSkin_renderListItem(item, index, state) {
-    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 = __classPrivateFieldGet(this, _ListSkin_showMove, "f") ? `<span class="jux-action-drag jux-control" title="Drag to reorder">≡</span>` : '';
-    const editBtn = __classPrivateFieldGet(this, _ListSkin_showEdit, "f") ? `<button class="jux-action-edit jux-control" aria-label="Edit">✎</button>` : '';
-    const deleteBtn = __classPrivateFieldGet(this, _ListSkin_showDelete, "f") ? `<button class="jux-action-delete jux-control" aria-label="Delete">×</button>` : '';
-    const draggableAttr = __classPrivateFieldGet(this, _ListSkin_showMove, "f") ? '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>`;
-};
-//# sourceMappingURL=ListSkin.js.map