@ktfth/stickjs 3.0.0

package/stick-ui/plugins/autocomplete.js

@@ -0,0 +1,422 @@
+/*!
+ * Stick UI — Autocomplete plugin
+ * Usage: data-stick="input:autocomplete:#list-id"
+ *        data-stick="input:autocomplete" data-stk-autocomplete-url="/api/search?q="
+ * API:   stkAutocomplete.setOptions(inputEl, [{label, value}])
+ */
+(function (root) {
+  'use strict';
+
+  var uid = 0;
+  var instances = [];       // track all active autocompletes for click-outside
+
+  /* ── Helpers ─────────────────────────────────────────── */
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  function highlightMatch(text, query) {
+    if (!query) return escapeHTML(text);
+    var idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx === -1) return escapeHTML(text);
+    return escapeHTML(text.substring(0, idx)) +
+      '<mark>' + escapeHTML(text.substring(idx, idx + query.length)) + '</mark>' +
+      escapeHTML(text.substring(idx + query.length));
+  }
+
+  function normalizeOption(item) {
+    if (typeof item === 'string') return { label: item, value: item };
+    return { label: item.label || item.value || '', value: item.value || item.label || '' };
+  }
+
+  function debounce(fn, ms) {
+    var timer;
+    return function () {
+      var ctx = this, args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () { fn.apply(ctx, args); }, ms);
+    };
+  }
+
+  /* ── Instance state ─────────────────────────────────── */
+
+  function getInstance(input) {
+    for (var i = 0; i < instances.length; i++) {
+      if (instances[i].input === input) return instances[i];
+    }
+    return null;
+  }
+
+  function createInstance(input) {
+    var existing = getInstance(input);
+    if (existing) return existing;
+
+    var id = 'stk-ac-' + (++uid);
+
+    // Create dropdown
+    var dropdown = document.createElement('div');
+    dropdown.className = 'stk-autocomplete-dropdown';
+    dropdown.id = id + '-listbox';
+    dropdown.setAttribute('role', 'listbox');
+    dropdown.hidden = true;
+
+    // Insert dropdown after input (inside the .stk-autocomplete wrapper if present)
+    var wrapper = input.closest('.stk-autocomplete');
+    if (wrapper) {
+      wrapper.appendChild(dropdown);
+    } else {
+      input.parentNode.insertBefore(dropdown, input.nextSibling);
+    }
+
+    // ARIA on input
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-controls', dropdown.id);
+    input.setAttribute('autocomplete', 'off');
+
+    var inst = {
+      input: input,
+      dropdown: dropdown,
+      options: [],           // [{label, value}]
+      filtered: [],
+      selectedIndex: -1,
+      remoteUrl: null,
+      minChars: 1,
+      fetching: false
+    };
+
+    instances.push(inst);
+    return inst;
+  }
+
+  /* ── Options loading ────────────────────────────────── */
+
+  function loadStaticOptions(inst, selector) {
+    var src = selector || inst.input.getAttribute('data-stk-autocomplete-src');
+    if (!src) return;
+
+    var el = document.querySelector(src);
+    if (!el) return;
+
+    var items = [];
+    if (el.tagName === 'DATALIST') {
+      var opts = el.querySelectorAll('option');
+      for (var i = 0; i < opts.length; i++) {
+        items.push({ label: opts[i].textContent || opts[i].value, value: opts[i].value || opts[i].textContent });
+      }
+    } else {
+      // <ul> or similar — grab <li> children
+      var lis = el.querySelectorAll('li');
+      for (var j = 0; j < lis.length; j++) {
+        var val = lis[j].getAttribute('data-value') || lis[j].textContent.trim();
+        items.push({ label: lis[j].textContent.trim(), value: val });
+      }
+    }
+
+    inst.options = items;
+  }
+
+  function fetchRemote(inst, query) {
+    if (inst.fetching) return;
+    inst.fetching = true;
+    showLoading(inst);
+
+    var url = inst.remoteUrl + encodeURIComponent(query);
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.setRequestHeader('Accept', 'application/json');
+
+    xhr.onload = function () {
+      inst.fetching = false;
+      hideLoading(inst);
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          var data = JSON.parse(xhr.responseText);
+          if (Array.isArray(data)) {
+            inst.options = data.map(normalizeOption);
+            filterAndRender(inst, query);
+          }
+        } catch (e) { /* ignore parse errors */ }
+      }
+    };
+
+    xhr.onerror = function () {
+      inst.fetching = false;
+      hideLoading(inst);
+    };
+
+    xhr.send();
+  }
+
+  /* ── Rendering ──────────────────────────────────────── */
+
+  function filterAndRender(inst, query) {
+    if (!query || query.length < inst.minChars) {
+      closeDropdown(inst);
+      return;
+    }
+
+    var q = query.toLowerCase();
+    inst.filtered = inst.options.filter(function (opt) {
+      return opt.label.toLowerCase().indexOf(q) !== -1;
+    });
+    inst.selectedIndex = -1;
+
+    renderItems(inst, query);
+
+    if (inst.filtered.length > 0 || query.length >= inst.minChars) {
+      openDropdown(inst);
+    }
+  }
+
+  function renderItems(inst, query) {
+    var dd = inst.dropdown;
+    dd.innerHTML = '';
+
+    if (inst.filtered.length === 0) {
+      var empty = document.createElement('div');
+      empty.className = 'stk-autocomplete-empty';
+      empty.textContent = 'No results found.';
+      dd.appendChild(empty);
+      return;
+    }
+
+    for (var i = 0; i < inst.filtered.length; i++) {
+      var opt = inst.filtered[i];
+      var item = document.createElement('div');
+      item.className = 'stk-autocomplete-item';
+      item.setAttribute('role', 'option');
+      item.setAttribute('aria-selected', 'false');
+      item.id = dd.id + '-opt-' + i;
+      item.dataset.index = String(i);
+      item.innerHTML = highlightMatch(opt.label, query);
+
+      // Click handler (closure)
+      item.addEventListener('mousedown', (function (idx) {
+        return function (e) {
+          e.preventDefault();   // prevent blur on input
+          selectOption(inst, idx);
+        };
+      })(i));
+
+      item.addEventListener('mouseenter', (function (idx) {
+        return function () {
+          setHighlight(inst, idx);
+        };
+      })(i));
+
+      dd.appendChild(item);
+    }
+  }
+
+  function showLoading(inst) {
+    var dd = inst.dropdown;
+    dd.innerHTML = '';
+    var loader = document.createElement('div');
+    loader.className = 'stk-autocomplete-loading';
+    loader.textContent = 'Loading\u2026';
+    dd.appendChild(loader);
+    openDropdown(inst);
+  }
+
+  function hideLoading(inst) {
+    var loader = inst.dropdown.querySelector('.stk-autocomplete-loading');
+    if (loader) loader.remove();
+  }
+
+  /* ── Dropdown open/close ────────────────────────────── */
+
+  function openDropdown(inst) {
+    inst.dropdown.hidden = false;
+    inst.input.setAttribute('aria-expanded', 'true');
+  }
+
+  function closeDropdown(inst) {
+    inst.dropdown.hidden = true;
+    inst.input.setAttribute('aria-expanded', 'false');
+    inst.selectedIndex = -1;
+    inst.input.removeAttribute('aria-activedescendant');
+  }
+
+  /* ── Highlight / select ─────────────────────────────── */
+
+  function setHighlight(inst, idx) {
+    inst.selectedIndex = idx;
+    var items = inst.dropdown.querySelectorAll('.stk-autocomplete-item');
+    for (var i = 0; i < items.length; i++) {
+      items[i].setAttribute('aria-selected', String(i === idx));
+    }
+    if (idx >= 0 && items[idx]) {
+      items[idx].scrollIntoView({ block: 'nearest' });
+      inst.input.setAttribute('aria-activedescendant', items[idx].id);
+    } else {
+      inst.input.removeAttribute('aria-activedescendant');
+    }
+  }
+
+  function selectOption(inst, idx) {
+    var opt = inst.filtered[idx];
+    if (!opt) return;
+    inst.input.value = opt.label;
+    closeDropdown(inst);
+
+    // Dispatch custom event
+    var ev;
+    try {
+      ev = new CustomEvent('autocomplete-selected', { bubbles: true, detail: { value: opt.value, label: opt.label } });
+    } catch (e) {
+      ev = document.createEvent('CustomEvent');
+      ev.initCustomEvent('autocomplete-selected', true, true, { value: opt.value, label: opt.label });
+    }
+    inst.input.dispatchEvent(ev);
+  }
+
+  /* ── Keyboard handler ───────────────────────────────── */
+
+  function onKeydown(inst, e) {
+    var count = inst.filtered.length;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!inst.dropdown.hidden && count) {
+        setHighlight(inst, (inst.selectedIndex + 1) % count);
+      } else if (inst.dropdown.hidden && inst.input.value.length >= inst.minChars) {
+        filterAndRender(inst, inst.input.value);
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (count) {
+        setHighlight(inst, (inst.selectedIndex - 1 + count) % count);
+      }
+    } else if (e.key === 'Enter') {
+      if (inst.selectedIndex >= 0 && !inst.dropdown.hidden) {
+        e.preventDefault();
+        selectOption(inst, inst.selectedIndex);
+      }
+    } else if (e.key === 'Escape') {
+      if (!inst.dropdown.hidden) {
+        e.preventDefault();
+        closeDropdown(inst);
+      }
+    } else if (e.key === 'Tab') {
+      if (inst.selectedIndex >= 0 && !inst.dropdown.hidden) {
+        selectOption(inst, inst.selectedIndex);
+      }
+    }
+  }
+
+  /* ── Click outside ──────────────────────────────────── */
+
+  document.addEventListener('click', function (e) {
+    for (var i = 0; i < instances.length; i++) {
+      var inst = instances[i];
+      if (!inst.dropdown.hidden &&
+          !inst.input.contains(e.target) &&
+          !inst.dropdown.contains(e.target)) {
+        closeDropdown(inst);
+      }
+    }
+  }, true);
+
+  /* ── Public API ──────────────────────────────────────── */
+
+  var stkAutocomplete = {
+    install: function (stick) {
+
+      /* autocomplete handler — called on input events */
+      stick.add('autocomplete', function (el, param, e) {
+        var inst = getInstance(el);
+
+        // First-time init
+        if (!inst) {
+          inst = createInstance(el);
+
+          // Determine data source
+          var remoteUrl = el.getAttribute('data-stk-autocomplete-url');
+          var minAttr = el.getAttribute('data-stk-autocomplete-min');
+          inst.minChars = minAttr ? parseInt(minAttr, 10) : 1;
+
+          if (remoteUrl) {
+            inst.remoteUrl = remoteUrl;
+          } else {
+            loadStaticOptions(inst, param || null);
+          }
+
+          // Attach keydown once
+          el.addEventListener('keydown', function (ke) {
+            onKeydown(inst, ke);
+          });
+
+          // Close on blur (with small delay so click on item registers)
+          el.addEventListener('blur', function () {
+            setTimeout(function () { closeDropdown(inst); }, 150);
+          });
+        }
+
+        // On each input event, filter
+        var query = el.value;
+        if (inst.remoteUrl) {
+          if (query.length >= inst.minChars) {
+            // Use debounced fetch
+            if (!inst._debouncedFetch) {
+              inst._debouncedFetch = debounce(function (q) {
+                fetchRemote(inst, q);
+              }, 300);
+            }
+            inst._debouncedFetch(query);
+          } else {
+            closeDropdown(inst);
+          }
+        } else {
+          filterAndRender(inst, query);
+        }
+      });
+
+      /* autocomplete-select handler — manually trigger selection */
+      stick.add('autocomplete-select', function (el, param, e, target) {
+        // Find the autocomplete input this belongs to
+        var input = target || el.closest('.stk-autocomplete');
+        if (input) input = input.querySelector('[role="combobox"]');
+        if (!input) return;
+
+        var inst = getInstance(input);
+        if (!inst) return;
+
+        var value = param || el.textContent.trim();
+        // Find matching option
+        for (var i = 0; i < inst.filtered.length; i++) {
+          if (inst.filtered[i].value === value || inst.filtered[i].label === value) {
+            selectOption(inst, i);
+            return;
+          }
+        }
+        // Fallback: set raw value
+        input.value = value;
+        closeDropdown(inst);
+      });
+    },
+
+    /**
+     * Set options programmatically for an input element.
+     * @param {HTMLInputElement} inputEl
+     * @param {Array<string|{label:string, value:string}>} options
+     */
+    setOptions: function (inputEl, options) {
+      var inst = getInstance(inputEl);
+      if (!inst) inst = createInstance(inputEl);
+      inst.options = (options || []).map(normalizeOption);
+      // If input has a value, re-filter
+      if (inputEl.value) {
+        filterAndRender(inst, inputEl.value);
+      }
+    }
+  };
+
+  if (root.Stick) root.Stick.use(stkAutocomplete);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkAutocomplete;
+  root.stkAutocomplete = stkAutocomplete;
+}(typeof window !== 'undefined' ? window : this));

package/stick-ui/plugins/command-palette.js

@@ -0,0 +1,289 @@
+/*!
+ * Stick UI — Command Palette plugin
+ * Usage: data-stick="click:command-palette"
+ * Global shortcut: Ctrl+K (Cmd+K on Mac)
+ * API: stkCommandPalette.register([{ id, label, group?, shortcut?, action }])
+ */
+(function (root) {
+  'use strict';
+
+  var commands = [];
+  var overlay = null;
+  var input = null;
+  var list = null;
+  var selectedIndex = -1;
+  var filtered = [];
+
+  function buildDOM() {
+    if (overlay) return;
+
+    overlay = document.createElement('div');
+    overlay.className = 'stk-command-palette-overlay';
+    overlay.addEventListener('click', function (e) {
+      if (e.target === overlay) close();
+    });
+
+    var dialog = document.createElement('div');
+    dialog.className = 'stk-command-palette';
+    dialog.setAttribute('role', 'dialog');
+    dialog.setAttribute('aria-label', 'Command palette');
+
+    input = document.createElement('input');
+    input.className = 'stk-command-palette-input';
+    input.type = 'text';
+    input.placeholder = 'Type a command\u2026';
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-controls', 'stk-command-palette-listbox');
+    input.addEventListener('input', onInput);
+    input.addEventListener('keydown', onKeydown);
+
+    list = document.createElement('div');
+    list.className = 'stk-command-palette-list';
+    list.id = 'stk-command-palette-listbox';
+    list.setAttribute('role', 'listbox');
+
+    dialog.appendChild(input);
+    dialog.appendChild(list);
+    overlay.appendChild(dialog);
+    document.body.appendChild(overlay);
+  }
+
+  function destroyDOM() {
+    if (overlay && overlay.parentElement) {
+      overlay.parentElement.removeChild(overlay);
+    }
+    overlay = null;
+    input = null;
+    list = null;
+  }
+
+  function isOpen() {
+    return overlay && !overlay.hidden;
+  }
+
+  function open() {
+    buildDOM();
+    overlay.hidden = false;
+    input.value = '';
+    selectedIndex = -1;
+    render('');
+    // Focus after paint so animation + focus work together
+    setTimeout(function () { input.focus(); }, 0);
+  }
+
+  function close() {
+    if (overlay) overlay.hidden = true;
+  }
+
+  function toggle() {
+    if (isOpen()) close(); else open();
+  }
+
+  /* ── Filtering ─────────────────────────────────────── */
+
+  function match(text, query) {
+    return text.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  }
+
+  function getFiltered(query) {
+    if (!query) return commands.slice();
+    return commands.filter(function (cmd) {
+      return match(cmd.label, query) || (cmd.group && match(cmd.group, query));
+    });
+  }
+
+  /* ── Rendering ─────────────────────────────────────── */
+
+  function render(query) {
+    filtered = getFiltered(query);
+    list.innerHTML = '';
+
+    if (filtered.length === 0) {
+      var empty = document.createElement('div');
+      empty.className = 'stk-command-palette-empty';
+      empty.textContent = 'No results found.';
+      list.appendChild(empty);
+      selectedIndex = -1;
+      return;
+    }
+
+    var currentGroup = null;
+    for (var i = 0; i < filtered.length; i++) {
+      var cmd = filtered[i];
+
+      // Group header
+      if (cmd.group && cmd.group !== currentGroup) {
+        currentGroup = cmd.group;
+        var groupEl = document.createElement('div');
+        groupEl.className = 'stk-command-palette-group';
+        groupEl.textContent = currentGroup;
+        list.appendChild(groupEl);
+      }
+
+      var item = document.createElement('div');
+      item.className = 'stk-command-palette-item';
+      item.setAttribute('role', 'option');
+      item.setAttribute('aria-selected', 'false');
+      item.dataset.index = String(i);
+
+      var label = document.createElement('span');
+      label.className = 'stk-command-palette-label';
+      label.textContent = cmd.label;
+      item.appendChild(label);
+
+      if (cmd.shortcut) {
+        var badge = document.createElement('span');
+        badge.className = 'stk-command-palette-shortcut';
+        badge.textContent = cmd.shortcut;
+        item.appendChild(badge);
+      }
+
+      item.addEventListener('click', (function (idx) {
+        return function () { execute(idx); };
+      })(i));
+
+      item.addEventListener('mouseenter', (function (idx) {
+        return function () { select(idx); };
+      })(i));
+
+      list.appendChild(item);
+    }
+
+    // Default select first item
+    if (filtered.length > 0) {
+      selectedIndex = 0;
+      updateSelection();
+    }
+  }
+
+  function updateSelection() {
+    var items = list.querySelectorAll('.stk-command-palette-item');
+    for (var i = 0; i < items.length; i++) {
+      var sel = (i === selectedIndex);
+      items[i].setAttribute('aria-selected', String(sel));
+    }
+    // Scroll selected into view
+    if (selectedIndex >= 0 && items[selectedIndex]) {
+      items[selectedIndex].scrollIntoView({ block: 'nearest' });
+    }
+    // Update aria-activedescendant
+    if (input && selectedIndex >= 0 && items[selectedIndex]) {
+      items[selectedIndex].id = 'stk-cp-opt-' + selectedIndex;
+      input.setAttribute('aria-activedescendant', items[selectedIndex].id);
+    }
+  }
+
+  function select(idx) {
+    selectedIndex = idx;
+    updateSelection();
+  }
+
+  function execute(idx) {
+    var cmd = filtered[idx];
+    if (cmd && typeof cmd.action === 'function') {
+      close();
+      cmd.action();
+    }
+  }
+
+  /* ── Input handlers ────────────────────────────────── */
+
+  function onInput() {
+    selectedIndex = -1;
+    render(input.value);
+  }
+
+  function onKeydown(e) {
+    var count = filtered.length;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (count) {
+        selectedIndex = (selectedIndex + 1) % count;
+        updateSelection();
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (count) {
+        selectedIndex = (selectedIndex - 1 + count) % count;
+        updateSelection();
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0) execute(selectedIndex);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+    }
+  }
+
+  /* ── Global shortcut Ctrl+K / Cmd+K ────────────────── */
+
+  document.addEventListener('keydown', function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      toggle();
+    }
+    // Also close on Escape if palette is open (handles focus outside input)
+    if (e.key === 'Escape' && isOpen()) {
+      close();
+    }
+  });
+
+  /* ── Public API ─────────────────────────────────────── */
+
+  var stkCommandPalette = {
+    install: function (stick) {
+      stick.add('command-palette', function () {
+        toggle();
+      });
+    },
+
+    /**
+     * Register commands.
+     * @param {Array<{id:string, label:string, group?:string, shortcut?:string, action:Function}>} cmds
+     */
+    register: function (cmds) {
+      if (!Array.isArray(cmds)) return;
+      for (var i = 0; i < cmds.length; i++) {
+        var cmd = cmds[i];
+        if (cmd && cmd.id && cmd.label) {
+          // Replace existing command with same id
+          var found = false;
+          for (var j = 0; j < commands.length; j++) {
+            if (commands[j].id === cmd.id) {
+              commands[j] = cmd;
+              found = true;
+              break;
+            }
+          }
+          if (!found) commands.push(cmd);
+        }
+      }
+      // Sort by group then label for consistent ordering
+      commands.sort(function (a, b) {
+        var ga = a.group || '';
+        var gb = b.group || '';
+        if (ga !== gb) return ga < gb ? -1 : 1;
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+      });
+    },
+
+    /** Open the palette programmatically. */
+    open: open,
+
+    /** Close the palette programmatically. */
+    close: close,
+
+    /** Toggle the palette. */
+    toggle: toggle,
+
+    /** Clear all registered commands. */
+    clear: function () {
+      commands = [];
+    }
+  };
+
+  if (root.Stick) root.Stick.use(stkCommandPalette);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkCommandPalette;
+  root.stkCommandPalette = stkCommandPalette;
+}(typeof window !== 'undefined' ? window : this));