mnfst 0.5.145 → 0.5.147

package/lib/manifest.combobox.js

@@ -0,0 +1,570 @@
+/* Manifest Combobox */
+
+(function () {
+
+// A select-like field with four orthogonal axes:
+//   trigger: input (default) | textarea | button (editor:none, click only)
+//   options: none (free entry) | datalist/select (generated menu) | menu (authored) | async
+//   value:   single (default) | multiple (+ max cap)
+//   display: text (default) | chips
+//
+// Config is the directive value: a bare id string (the options source, like
+// x-dropdown) or a { source, max, filter, separators, min, debounce } object.
+// Modes are modifiers. The dropdown reuses Manifest's menu[popover] styles.
+
+/* ------------------------------------------------------------------ *
+ * Shared localized-UI resolver (byte-identical to the datepicker /
+ * colorpicker copies; first plugin to load defines it).
+ * ------------------------------------------------------------------ */
+if (!window.ManifestUI) {
+    window.ManifestUI = {
+        _loadedSourceNames() {
+            try {
+                const store = window.ManifestDataStore && window.ManifestDataStore.rawDataStore;
+                if (store && typeof store.keys === 'function') return [...store.keys()];
+            } catch (_) { }
+            return [];
+        },
+        resolve(component, fallbacks) {
+            const merged = JSON.parse(JSON.stringify(fallbacks || {}));
+            try {
+                if (!window.Alpine || typeof Alpine.evaluate !== 'function') return merged;
+                try { Alpine.evaluate(document.body, '$locale && $locale.current'); } catch (_) { }
+                for (const name of this._loadedSourceNames()) {
+                    let ui;
+                    try { ui = Alpine.evaluate(document.body, `$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
+                    if (ui && typeof ui === 'object' && !Array.isArray(ui)) this._deepOverlay(merged, ui);
+                }
+            } catch (_) { }
+            return merged;
+        },
+        _deepOverlay(target, src) {
+            for (const k of Object.keys(src)) {
+                if (k.startsWith('$') || k === 'contentType' || k === 'valueOf' || k === 'toString') continue;
+                const v = src[k];
+                if (typeof v === 'function') continue;
+                if (v && typeof v === 'object' && !Array.isArray(v)) {
+                    if (!target[k] || typeof target[k] !== 'object') target[k] = {};
+                    this._deepOverlay(target[k], v);
+                } else if (v !== undefined && v !== null && v !== '') {
+                    target[k] = v;
+                }
+            }
+        }
+    };
+}
+
+// Default English UI chrome; overridable via a data source's `_ui.combobox`.
+const UI_FALLBACK = {
+    empty: 'No matches',
+    add: 'Add “{value}”',
+    loading: 'Searching…',
+    prompt: 'Type to search'
+};
+
+function initializeComboboxPlugin() {
+
+    function ensureAlpineContext() {
+        if (!document.body.hasAttribute('x-data')) document.body.setAttribute('x-data', '{}');
+    }
+
+    ensureAlpineContext();
+
+    const rand = () => Math.random().toString(36).slice(2, 9);
+    const ui = () => window.ManifestUI ? window.ManifestUI.resolve('combobox', UI_FALLBACK) : UI_FALLBACK;
+
+    // Read options from a source element (datalist/select → option, menu → li)
+    function readOptions(src) {
+        if (!src) return [];
+        if (src.tagName === 'MENU') {
+            return Array.from(src.querySelectorAll('li')).map(li => ({
+                value: li.dataset.value != null ? li.dataset.value : li.textContent.trim(),
+                label: li.dataset.label || li.textContent.trim(),
+                pattern: li.dataset.pattern || null,
+                html: li.innerHTML
+            }));
+        }
+        return Array.from(src.querySelectorAll('option')).map(o => ({
+            value: o.value || o.textContent.trim(),
+            label: o.textContent.trim() || o.value,
+            pattern: o.getAttribute('data-pattern') || null,
+            html: null
+        }));
+    }
+
+    Alpine.directive('combobox', (el, { modifiers, expression }) => {
+        // Build after the current tick so sibling sources (datalist/menu) exist.
+        setTimeout(() => build(el, modifiers, expression || ''), 0);
+    });
+
+    function build(el, modifiers, expression) {
+        if (el.__mnfstCombobox) return;
+        el.__mnfstCombobox = true;
+
+        // ----- Config: bare id string, or a { } object -----
+        let cfg = {};
+        const expr = expression.trim();
+        if (expr.startsWith('{')) {
+            try { cfg = window.Alpine.evaluate(el, expr) || {}; } catch (_) { cfg = {}; }
+        } else if (expr) {
+            cfg.source = expr;
+        }
+
+        const editorNone = el.tagName === 'BUTTON';
+        const multiple   = modifiers.includes('multiple');
+        const chips      = modifiers.includes('chips');
+        const strict     = modifiers.includes('strict');
+        const create     = modifiers.includes('create');
+        const isAsync     = modifiers.includes('async');
+        const max        = parseInt(cfg.max, 10) || (multiple ? Infinity : 1);
+        const filterMode = cfg.filter || 'includes';
+        const minChars   = parseInt(cfg.min, 10) || 0;
+        const debounceMs = parseInt(cfg.debounce, 10) || 200;
+        const separators = cfg.separators != null
+            ? String(cfg.separators).split('').filter(c => c.trim() || c === ' ')
+            : (multiple ? [','] : []);
+        const name        = el.getAttribute('name');
+        const placeholder = el.getAttribute('placeholder') || (editorNone ? el.textContent.trim() : '');
+
+        // ----- Source / options -----
+        const sourceId = cfg.source ? String(cfg.source).replace(/^#/, '') : null;
+        const src = sourceId ? document.getElementById(sourceId) : null;
+        let options = readOptions(src);
+        const hasMenu = !!src || isAsync;
+        if (editorNone && !hasMenu) return;     // a button trigger needs a list
+
+        // ----- Shell -----
+        const wrap = document.createElement('div');
+        wrap.className = 'combobox';
+        el.parentNode.insertBefore(wrap, el);
+        wrap.appendChild(el);
+        // The wrapper IS the field, so move the author's sizing (inline style) onto
+        // it. Otherwise the editor/button is constrained inside a full-width field.
+        const authorStyle = el.getAttribute('style');
+        if (authorStyle) { wrap.setAttribute('style', authorStyle); el.removeAttribute('style'); }
+        el.setAttribute('autocomplete', 'off');
+        if (!editorNone) el.removeAttribute('placeholder');
+        if (name) el.removeAttribute('name');   // hidden inputs carry the value(s)
+
+        // Live region for add/remove announcements
+        const live = document.createElement('span');
+        live.setAttribute('role', 'status');
+        wrap.appendChild(live);
+        const announce = (m) => { live.textContent = ''; live.textContent = m; };
+
+        // ----- Selection model -----
+        let selected = [];
+        const isSelected = (v) => selected.some(s => String(s.value).toLowerCase() === String(v).toLowerCase());
+        const atCap = () => multiple && selected.length >= max;
+
+        // ----- Menu -----
+        let menu = null, optionEls = [], createEl = null, emptyEl = null, activeIndex = -1;
+
+        function makeOption(o, i) {
+            const li = document.createElement('li');
+            li.id = menu.id + '-opt-' + i;
+            li.dataset.value = o.value;
+            li.dataset.label = o.label;
+            if (o.pattern) li.dataset.pattern = o.pattern;
+            if (o.html) li.innerHTML = o.html; else li.textContent = o.label;
+            li.setAttribute('role', 'option');
+            li.setAttribute('aria-selected', isSelected(o.value) ? 'true' : 'false');
+            return li;
+        }
+        function setOptions(opts) {
+            optionEls.forEach(li => li.remove());
+            optionEls = opts.map((o, i) => {
+                const li = makeOption(o, i);
+                menu.insertBefore(li, createEl || emptyEl);
+                return li;
+            });
+            activeIndex = -1;
+        }
+
+        if (hasMenu) {
+            if (src && src.tagName === 'MENU') {
+                menu = src;
+            } else {
+                menu = document.createElement('menu');
+                document.body.appendChild(menu);
+                if (src) src.style.setProperty('display', 'none', 'important');
+            }
+            menu.setAttribute('popover', 'manual');
+            if (!menu.id) menu.id = 'combobox-menu-' + rand();
+            menu.setAttribute('role', 'listbox');
+            if (multiple) menu.setAttribute('aria-multiselectable', 'true');
+
+            Array.from(menu.querySelectorAll('li')).forEach(li => li.remove());
+
+            if (create) {
+                createEl = document.createElement('li');
+                createEl.className = 'combobox-create';
+                createEl.setAttribute('role', 'option');
+                createEl.hidden = true;
+                menu.appendChild(createEl);
+            }
+            emptyEl = document.createElement('div');
+            emptyEl.className = 'combobox-empty';
+            emptyEl.hidden = true;
+            menu.appendChild(emptyEl);
+
+            setOptions(options);
+
+            const anchorName = '--combobox-' + rand();
+            wrap.style.setProperty('anchor-name', anchorName);
+            menu.style.setProperty('position-anchor', anchorName);
+
+            el.setAttribute('aria-controls', menu.id);
+            el.setAttribute('aria-expanded', 'false');
+            if (editorNone) {
+                el.setAttribute('aria-haspopup', 'listbox');
+            } else {
+                el.setAttribute('role', 'combobox');
+                el.setAttribute('aria-autocomplete', 'list');
+            }
+
+            menu.addEventListener('mousedown', (e) => e.preventDefault());
+            menu.addEventListener('click', (e) => {
+                const li = e.target.closest('li');
+                if (li && !li.hidden) selectOption(li);
+            });
+        }
+
+        function openMenu() {
+            if (!menu || menu.matches(':popover-open') || atCap()) return;
+            menu.style.minWidth = wrap.offsetWidth + 'px';
+            menu.showPopover();
+            el.setAttribute('aria-expanded', 'true');
+        }
+        function closeMenu() {
+            if (!menu || !menu.matches(':popover-open')) return;
+            menu.hidePopover();
+            el.setAttribute('aria-expanded', 'false');
+            setActive(-1);
+        }
+        function showEmpty(text) {
+            if (emptyEl) { emptyEl.textContent = text; emptyEl.hidden = false; }
+            setActive(-1);
+        }
+
+        function setActive(i) {
+            optionEls.forEach(li => li.removeAttribute('aria-current'));
+            if (createEl) createEl.removeAttribute('aria-current');
+            activeIndex = i;
+            const li = liAt(i);
+            if (li) { li.setAttribute('aria-current', 'true'); el.setAttribute('aria-activedescendant', li.id); }
+            else el.removeAttribute('aria-activedescendant');
+        }
+        function liAt(i) {
+            if (i === -2) return createEl && !createEl.hidden ? createEl : null;
+            return optionEls[i] || null;
+        }
+        function visibleIndexes() {
+            const v = optionEls.map((li, i) => (!li.hidden ? i : -1)).filter(i => i >= 0);
+            if (createEl && !createEl.hidden) v.push(-2);
+            return v;
+        }
+        function moveActive(dir) {
+            const vis = visibleIndexes();
+            if (!vis.length) return;
+            let pos = vis.indexOf(activeIndex);
+            pos = (pos + dir + vis.length) % vis.length;
+            setActive(vis[pos]);
+        }
+
+        function testPattern(p, input) {
+            try { return new RegExp(p, 'i').test(input); } catch { return false; }
+        }
+
+        function filter() {
+            if (!menu) return;
+            const raw = (el.value || '').trim();
+            const q = raw.toLowerCase();
+            let first = -1, anyVisible = false, exact = false;
+            optionEls.forEach((li, i) => {
+                const t = String(li.dataset.label).toLowerCase();
+                let show =
+                    isAsync || editorNone || !q || filterMode === 'none' ? true
+                    : filterMode === 'startswith' ? t.startsWith(q)
+                    : filterMode === 'pattern' ? (li.dataset.pattern ? testPattern(li.dataset.pattern, raw) : t.includes(q))
+                    : t.includes(q);
+                if (show && multiple && isSelected(li.dataset.value)) show = false;
+                li.hidden = !show;
+                if (show) { anyVisible = true; if (first < 0) first = i; }
+                if (t === q) exact = true;
+            });
+            if (createEl) {
+                const show = create && q && !exact;
+                createEl.hidden = !show;
+                createEl.textContent = show ? ui().add.replace('{value}', raw) : '';
+                createEl.dataset.value = raw;
+                if (show) anyVisible = true;
+            }
+            if (emptyEl) { emptyEl.textContent = ui().empty; emptyEl.hidden = anyVisible; }
+            setActive(first >= 0 ? first : (createEl && !createEl.hidden ? -2 : -1));
+        }
+
+        // Show the whole list (single field re-opened on a committed value, so the
+        // choice can be swapped — its current value shouldn't narrow the list to itself).
+        function showAll() {
+            optionEls.forEach(li => { li.hidden = false; });
+            if (createEl) createEl.hidden = true;
+            if (emptyEl) emptyEl.hidden = optionEls.length > 0;
+            const sel = optionEls.findIndex(li => isSelected(li.dataset.value));
+            setActive(sel >= 0 ? sel : (optionEls.length ? 0 : -1));
+        }
+
+        // ----- Async option fetching (Open UI's beforefilter analog) -----
+        let asyncTimer, asyncSeq = 0;
+        function scheduleAsync() {
+            openMenu();
+            clearTimeout(asyncTimer);
+            setOptions([]);                 // drop stale results so nothing flashes
+            showEmpty(ui().loading);
+            asyncTimer = setTimeout(runAsync, debounceMs);
+        }
+        function runAsync() {
+            const seq = ++asyncSeq;
+            const value = (el.value || '').trim();
+            el.dispatchEvent(new CustomEvent('combobox-filter', {
+                bubbles: true,
+                detail: {
+                    value,
+                    setOptions: (opts) => {
+                        if (seq !== asyncSeq) return;       // ignore stale responses
+                        options = (opts || []).map(o => typeof o === 'string' ? { value: o, label: o } : o);
+                        setOptions(options);
+                        filter();
+                    }
+                }
+            }));
+        }
+        // Async: open and either fetch or prompt, depending on the typed length.
+        function asyncRefresh() {
+            openMenu();
+            if ((el.value || '').trim().length >= minChars) scheduleAsync();
+            else { setOptions([]); showEmpty(ui().prompt); }
+        }
+
+        function commitText(raw) {
+            raw = (raw || '').trim();
+            if (!raw) return false;
+            if (strict) {
+                const o = options.find(o => o.label.toLowerCase() === raw.toLowerCase());
+                if (!o) return false;
+                addValue(o.value, o.label);
+            } else {
+                addValue(raw, raw);
+            }
+            if (chips || multiple) el.value = '';
+            if (menu && !isAsync) filter();
+            return true;
+        }
+
+        function selectOption(li) {
+            if (li === createEl) { commitText(li.dataset.value); return refocus(); }
+            addValue(li.dataset.value, li.dataset.label);
+            if (!editorNone && (chips || multiple)) el.value = '';
+            if (!multiple) closeMenu(); else filter();
+            refocus();
+        }
+        // refocus keeps the caret in the field after a pick. Suppress the focus
+        // handler's auto-open for that one tick so a selection doesn't reopen the list.
+        let suppressOpen = false;
+        function refocus() { suppressOpen = true; el.focus(); setTimeout(() => { suppressOpen = false; }, 0); }
+
+        function addValue(value, label) {
+            if (!multiple) { selected = [{ value, label }]; render(); announce(label + ' selected'); return; }
+            if (isSelected(value)) return;
+            if (selected.length >= max) { announce('Maximum of ' + max + ' reached'); return; }
+            selected.push({ value, label });
+            render();
+            announce(label + ' added');
+        }
+        function removeValue(value) {
+            const i = selected.findIndex(s => String(s.value).toLowerCase() === String(value).toLowerCase());
+            if (i < 0) return;
+            const [g] = selected.splice(i, 1);
+            render();
+            announce(g.label + ' removed');
+            if (menu && !isAsync) filter();
+            refocus();
+        }
+
+        function makeChip(s) {
+            const chip = document.createElement('span');
+            chip.className = 'combobox-chip';
+            chip.dataset.value = s.value;
+            const label = document.createElement('span');
+            label.textContent = s.label;
+            const x = document.createElement('button');
+            x.type = 'button';
+            x.setAttribute('aria-label', 'Remove ' + s.label);
+            x.textContent = '×';
+            x.addEventListener('click', () => removeValue(s.value));
+            chip.append(label, x);
+            return chip;
+        }
+        function hidden(value) {
+            const h = document.createElement('input');
+            h.type = 'hidden';
+            h.name = name;
+            h.value = value;
+            h.setAttribute('data-cb', '');
+            return h;
+        }
+
+        function render() {
+            wrap.querySelectorAll('.combobox-chip, input[data-cb]').forEach(n => n.remove());
+            if (chips) {
+                selected.forEach(s => {
+                    wrap.insertBefore(makeChip(s), el);
+                    if (name) wrap.appendChild(hidden(s.value));
+                });
+                if (!editorNone) el.placeholder = selected.length ? '' : placeholder;
+            } else if (!multiple) {
+                if (editorNone) el.textContent = selected[0] ? selected[0].label : placeholder;
+                else { el.value = selected[0] ? selected[0].label : ''; el.placeholder = placeholder; }
+                if (name && selected[0]) wrap.appendChild(hidden(selected[0].value));
+            }
+            optionEls.forEach(li => li.setAttribute('aria-selected', isSelected(li.dataset.value) ? 'true' : 'false'));
+            // At cap: drop the input affordance entirely; a removed chip restores it.
+            el.hidden = atCap();
+            if (el.hidden) closeMenu();
+        }
+
+        // Pull complete tokens (those ended by a separator) out of the field into
+        // chips, leaving any trailing partial. Reading the value here rather than on
+        // keydown avoids the keydown/character-insert race, and covers paste too.
+        function extractTokens() {
+            if (!separators.length) return;
+            const val = el.value;
+            if (!val || ![...val].some(ch => separators.includes(ch))) return;
+            const parts = []; let buf = '';
+            for (const ch of val) {
+                if (separators.includes(ch)) { parts.push(buf); buf = ''; }
+                else buf += ch;
+            }
+            el.value = '';
+            parts.forEach(p => commitText(p));
+            el.value = buf;
+        }
+
+        // Open for fresh entry. A committed single value is shown alongside the full
+        // list so it can be swapped; selectText (keyboard focus) also selects it to type over.
+        function openForEntry(selectText) {
+            const committed = !multiple && selected.length && el.value === selected[0].label;
+            if (committed && selectText) el.select();
+            if (isAsync) {
+                if (committed) { openMenu(); setOptions([]); showEmpty(ui().prompt); }
+                else asyncRefresh();
+            } else {
+                openMenu();
+                if (committed) showAll(); else filter();
+            }
+        }
+
+        // ----- Events -----
+        if (editorNone) {
+            el.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (menu.matches(':popover-open')) closeMenu();
+                else { openMenu(); filter(); }
+            });
+            el.addEventListener('keydown', (e) => {
+                const open = menu.matches(':popover-open');
+                if (!open && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+                    e.preventDefault(); openMenu(); filter(); return;
+                }
+                if (e.key === 'ArrowDown') { e.preventDefault(); moveActive(1); }
+                else if (e.key === 'ArrowUp') { e.preventDefault(); moveActive(-1); }
+                else if (e.key === 'Enter' || e.key === ' ') {
+                    if (activeIndex >= 0 || activeIndex === -2) { e.preventDefault(); selectOption(liAt(activeIndex)); }
+                }
+                else if (e.key === 'Escape') { if (open) { e.preventDefault(); closeMenu(); } }
+            });
+        } else {
+            el.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowDown' && menu) { e.preventDefault(); openMenu(); moveActive(1); }
+                else if (e.key === 'ArrowUp' && menu) { e.preventDefault(); moveActive(-1); }
+                else if (e.key === 'Enter') {
+                    if (menu && menu.matches(':popover-open') && (activeIndex >= 0 || activeIndex === -2)) {
+                        e.preventDefault();
+                        selectOption(liAt(activeIndex));
+                    } else if (!strict || !menu) {
+                        if (commitText(el.value)) e.preventDefault();
+                    }
+                }
+                else if (e.key === 'Escape') { if (menu && menu.matches(':popover-open')) { e.preventDefault(); closeMenu(); } }
+                else if (e.key === 'Backspace' && el.value === '' && chips && selected.length) {
+                    removeValue(selected[selected.length - 1].value);
+                }
+            });
+
+            // Separators (and paste) commit from here, the moment one lands in the value.
+            el.addEventListener('input', () => {
+                extractTokens();
+                if (isAsync) asyncRefresh(); else { openMenu(); filter(); }
+            });
+
+            el.addEventListener('focus', () => { if (!suppressOpen) openForEntry(true); });
+            // Reopen on click even when the field is already focused (focus won't re-fire).
+            el.addEventListener('mousedown', () => { if (menu && !menu.matches(':popover-open') && !suppressOpen) openForEntry(false); });
+        }
+
+        // Close when focus leaves the field entirely (Tab away).
+        el.addEventListener('blur', () => setTimeout(() => {
+            if (menu && !wrap.contains(document.activeElement) && !menu.contains(document.activeElement)) closeMenu();
+        }, 0));
+
+        // Click empty shell → focus the trigger
+        wrap.addEventListener('mousedown', (e) => {
+            if (e.target === wrap) { e.preventDefault(); refocus(); }
+        });
+
+        // Outside dismiss (manual popover)
+        if (menu && !menu.__mnfstCbDismiss) {
+            menu.__mnfstCbDismiss = true;
+            document.addEventListener('pointerdown', (e) => {
+                if (menu.matches(':popover-open') && !menu.contains(e.target) && !wrap.contains(e.target)) closeMenu();
+            });
+        }
+
+        // ----- Seed initial chips from value="a, b" (input triggers only) -----
+        if (!editorNone && chips && el.value) {
+            const seeds = el.value.split(/[,\n;]+/).map(s => s.trim()).filter(Boolean);
+            el.value = '';
+            seeds.forEach(s => commitText(s));
+        }
+        render();
+    }
+}
+
+// ----- Boot (mirrors the dropdowns plugin lifecycle) -----
+let comboboxPluginInitialized = false;
+let alpineHasWalked = false;
+document.addEventListener('alpine:initialized', () => { alpineHasWalked = true; });
+
+function ensureComboboxPluginInitialized() {
+    if (comboboxPluginInitialized) return;
+    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
+    comboboxPluginInitialized = true;
+    initializeComboboxPlugin();
+    if (alpineHasWalked && typeof window.Alpine.initTree === 'function') {
+        document.querySelectorAll('[x-combobox]').forEach(el => { if (!el._x_dataStack) window.Alpine.initTree(el); });
+    }
+}
+window.ensureComboboxPluginInitialized = ensureComboboxPluginInitialized;
+
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ensureComboboxPluginInitialized);
+document.addEventListener('alpine:init', ensureComboboxPluginInitialized);
+if (window.Alpine && typeof window.Alpine.directive === 'function') {
+    setTimeout(ensureComboboxPluginInitialized, 0);
+} else {
+    const t = setInterval(() => {
+        if (window.Alpine && typeof window.Alpine.directive === 'function') { clearInterval(t); ensureComboboxPluginInitialized(); }
+    }, 10);
+    setTimeout(() => clearInterval(t), 5000);
+}
+
+})();