@ktfth/stickjs 3.0.0

package/stick-ui/plugins/data-table.js

@@ -0,0 +1,426 @@
+/*!
+ * Stick UI — Data Table plugin
+ * Provides sort, filter, and pagination for HTML tables.
+ *
+ * Handlers:
+ *   table-sort      click:table-sort:COL_INDEX   — cycle asc/desc/none on column
+ *   table-filter    input:table-filter:.stk-table — substring search across all cells
+ *   table-paginate  click:table-paginate:next     — next/prev/first/last/N
+ *   table-page-size change:table-page-size:.stk-table — change rows per page
+ *
+ * Initialise:  stkDataTable.init(tableEl, { pageSize: 10 })
+ */
+(function (root) {
+  'use strict';
+
+  /* ── State store (WeakMap — no globals on the element) ───── */
+  var STATE = new WeakMap();
+
+  function getState(table) {
+    return STATE.get(table);
+  }
+
+  function ensureState(table, opts) {
+    if (STATE.has(table)) return STATE.get(table);
+    var pageSize = Number(table.getAttribute('data-stk-page-size')) ||
+                   (opts && opts.pageSize) || 10;
+    var state = {
+      currentPage: 1,
+      pageSize: pageSize,
+      sortCol: -1,
+      sortDir: 'none',       // 'none' | 'ascending' | 'descending'
+      filterValue: '',
+      allRows: [],            // original <tr> references (from <tbody>)
+      filteredRows: []
+    };
+    STATE.set(table, state);
+    return state;
+  }
+
+  /* ── Helpers ─────────────────────────────────────────────── */
+
+  function getTable(el, param) {
+    // param may be a CSS selector for the table; fall back to closest table
+    if (param) {
+      var t = document.querySelector(param);
+      if (t) {
+        if (t.tagName === 'TABLE') return t;
+        var inner = t.querySelector('table');
+        if (inner) return inner;
+      }
+    }
+    return el.closest('table') || el.closest('.stk-table-wrapper');
+  }
+
+  function getTableFromSelector(sel) {
+    if (!sel) return null;
+    var el = document.querySelector(sel);
+    if (!el) return null;
+    if (el.tagName === 'TABLE') return el;
+    return el.querySelector('table') || el;
+  }
+
+  function collectRows(table) {
+    var tbody = table.querySelector('tbody');
+    if (!tbody) return [];
+    return Array.prototype.slice.call(tbody.querySelectorAll('tr'));
+  }
+
+  function cellText(row, colIdx) {
+    var cells = row.querySelectorAll('td');
+    if (colIdx < 0 || colIdx >= cells.length) return '';
+    return (cells[colIdx].getAttribute('data-sort-value') || cells[colIdx].textContent || '').trim();
+  }
+
+  function isNumeric(val) {
+    return val !== '' && !isNaN(Number(val));
+  }
+
+  /* ── Sort ────────────────────────────────────────────────── */
+
+  function applySort(table) {
+    var state = getState(table);
+    if (!state) return;
+
+    // Reset aria-sort on all headers
+    var headers = table.querySelectorAll('th[data-stk-sortable]');
+    for (var i = 0; i < headers.length; i++) {
+      headers[i].removeAttribute('aria-sort');
+    }
+
+    if (state.sortCol < 0 || state.sortDir === 'none') {
+      // Restore original order
+      state.filteredRows = filterRows(state.allRows, state.filterValue);
+      applyPagination(table);
+      return;
+    }
+
+    // Mark active header
+    var activeHeader = table.querySelectorAll('th')[state.sortCol];
+    if (activeHeader) {
+      activeHeader.setAttribute('aria-sort', state.sortDir);
+    }
+
+    // Decide numeric vs string
+    var col = state.sortCol;
+    var rows = state.filteredRows.length ? state.filteredRows : filterRows(state.allRows, state.filterValue);
+    var allNumeric = rows.every(function (r) {
+      var v = cellText(r, col);
+      return v === '' || isNumeric(v);
+    });
+
+    var sorted = rows.slice().sort(function (a, b) {
+      var va = cellText(a, col);
+      var vb = cellText(b, col);
+      var cmp;
+      if (allNumeric) {
+        cmp = (Number(va) || 0) - (Number(vb) || 0);
+      } else {
+        cmp = va.localeCompare(vb, undefined, { sensitivity: 'base' });
+      }
+      return state.sortDir === 'descending' ? -cmp : cmp;
+    });
+
+    state.filteredRows = sorted;
+    applyPagination(table);
+  }
+
+  /* ── Filter ──────────────────────────────────────────────── */
+
+  function filterRows(allRows, filterValue) {
+    if (!filterValue) return allRows.slice();
+    var needle = filterValue.toLowerCase();
+    return allRows.filter(function (row) {
+      return (row.textContent || '').toLowerCase().indexOf(needle) !== -1;
+    });
+  }
+
+  function applyFilter(table) {
+    var state = getState(table);
+    if (!state) return;
+    state.filteredRows = filterRows(state.allRows, state.filterValue);
+    state.currentPage = 1;
+    // Re-apply sort on filtered set
+    if (state.sortCol >= 0 && state.sortDir !== 'none') {
+      applySort(table);
+    } else {
+      applyPagination(table);
+    }
+  }
+
+  /* ── Pagination ──────────────────────────────────────────── */
+
+  function totalPages(state) {
+    return Math.max(1, Math.ceil(state.filteredRows.length / state.pageSize));
+  }
+
+  function applyPagination(table) {
+    var state = getState(table);
+    if (!state) return;
+
+    var total = totalPages(state);
+    if (state.currentPage > total) state.currentPage = total;
+    if (state.currentPage < 1) state.currentPage = 1;
+
+    var start = (state.currentPage - 1) * state.pageSize;
+    var end = start + state.pageSize;
+
+    // Hide all rows first
+    state.allRows.forEach(function (row) {
+      row.hidden = true;
+    });
+
+    // Show only current page of filtered rows
+    state.filteredRows.forEach(function (row, idx) {
+      row.hidden = (idx < start || idx >= end);
+    });
+
+    updatePaginationUI(table, state);
+  }
+
+  function updatePaginationUI(table, state) {
+    // Find wrapper
+    var wrapper = table.closest('.stk-table-wrapper') || table.parentElement;
+    if (!wrapper) return;
+
+    var total = totalPages(state);
+    var start = (state.currentPage - 1) * state.pageSize + 1;
+    var end = Math.min(state.currentPage * state.pageSize, state.filteredRows.length);
+    var count = state.filteredRows.length;
+
+    // Update page info text
+    var info = wrapper.querySelector('.stk-table-page-info');
+    if (info) {
+      if (count === 0) {
+        info.textContent = 'No results';
+      } else {
+        info.textContent = 'Showing ' + start + '\u2013' + end + ' of ' + count;
+      }
+    }
+
+    // Enable/disable prev/next buttons
+    var prevBtns = wrapper.querySelectorAll('[data-stk-page="prev"]');
+    var nextBtns = wrapper.querySelectorAll('[data-stk-page="next"]');
+    var firstBtns = wrapper.querySelectorAll('[data-stk-page="first"]');
+    var lastBtns = wrapper.querySelectorAll('[data-stk-page="last"]');
+
+    for (var i = 0; i < prevBtns.length; i++) {
+      prevBtns[i].disabled = (state.currentPage <= 1);
+    }
+    for (i = 0; i < firstBtns.length; i++) {
+      firstBtns[i].disabled = (state.currentPage <= 1);
+    }
+    for (i = 0; i < nextBtns.length; i++) {
+      nextBtns[i].disabled = (state.currentPage >= total);
+    }
+    for (i = 0; i < lastBtns.length; i++) {
+      lastBtns[i].disabled = (state.currentPage >= total);
+    }
+
+    // Update page number indicator if present
+    var pageNum = wrapper.querySelector('.stk-table-page-num');
+    if (pageNum) {
+      pageNum.textContent = 'Page ' + state.currentPage + ' of ' + total;
+    }
+  }
+
+  /* ── Auto-create pagination controls ─────────────────────── */
+
+  function createPaginationControls(table) {
+    var wrapper = table.closest('.stk-table-wrapper') || table.parentElement;
+    if (!wrapper) return;
+    // Only auto-create if data-stk-paginate exists and no pagination bar yet
+    if (!table.hasAttribute('data-stk-paginate') &&
+        !wrapper.hasAttribute('data-stk-paginate')) return;
+    if (wrapper.querySelector('.stk-table-pagination')) return;
+
+    var bar = document.createElement('div');
+    bar.className = 'stk-table-pagination';
+
+    var info = document.createElement('span');
+    info.className = 'stk-table-page-info';
+    info.setAttribute('aria-live', 'polite');
+    info.setAttribute('role', 'status');
+    bar.appendChild(info);
+
+    var nav = document.createElement('span');
+    nav.className = 'stk-table-page-nav';
+
+    var prevBtn = document.createElement('button');
+    prevBtn.className = 'stk-table-page-btn';
+    prevBtn.setAttribute('data-stk-page', 'prev');
+    prevBtn.textContent = '\u2039 Prev';
+    prevBtn.type = 'button';
+
+    var pageNum = document.createElement('span');
+    pageNum.className = 'stk-table-page-num';
+
+    var nextBtn = document.createElement('button');
+    nextBtn.className = 'stk-table-page-btn';
+    nextBtn.setAttribute('data-stk-page', 'next');
+    nextBtn.textContent = 'Next \u203A';
+    nextBtn.type = 'button';
+
+    nav.appendChild(prevBtn);
+    nav.appendChild(pageNum);
+    nav.appendChild(nextBtn);
+    bar.appendChild(nav);
+
+    // Insert after table
+    if (table.nextSibling) {
+      wrapper.insertBefore(bar, table.nextSibling);
+    } else {
+      wrapper.appendChild(bar);
+    }
+
+    // Wire up click handlers on the auto-created buttons
+    prevBtn.addEventListener('click', function () {
+      navigatePage(table, 'prev');
+    });
+    nextBtn.addEventListener('click', function () {
+      navigatePage(table, 'next');
+    });
+  }
+
+  function navigatePage(table, param) {
+    var state = getState(table);
+    if (!state) return;
+    var total = totalPages(state);
+    switch (param) {
+      case 'next':  state.currentPage = Math.min(state.currentPage + 1, total); break;
+      case 'prev':  state.currentPage = Math.max(state.currentPage - 1, 1); break;
+      case 'first': state.currentPage = 1; break;
+      case 'last':  state.currentPage = total; break;
+      default:
+        var n = parseInt(param, 10);
+        if (!isNaN(n) && n >= 1 && n <= total) state.currentPage = n;
+    }
+    applyPagination(table);
+  }
+
+  /* ── Plugin API ──────────────────────────────────────────── */
+
+  var stkDataTable = {
+
+    /**
+     * Register Stick handlers.
+     */
+    install: function (stick) {
+
+      /* table-sort — click:table-sort:COL_INDEX */
+      stick.add('table-sort', function (el, param) {
+        var colIdx = parseInt(param, 10);
+        if (isNaN(colIdx)) return;
+        var table = el.closest('table');
+        if (!table) return;
+
+        var state = getState(table);
+        if (!state) {
+          stkDataTable.init(table);
+          state = getState(table);
+        }
+
+        // Cycle: none → ascending → descending → none
+        if (state.sortCol !== colIdx) {
+          state.sortCol = colIdx;
+          state.sortDir = 'ascending';
+        } else {
+          switch (state.sortDir) {
+            case 'none':       state.sortDir = 'ascending'; break;
+            case 'ascending':  state.sortDir = 'descending'; break;
+            case 'descending': state.sortDir = 'none'; state.sortCol = -1; break;
+          }
+        }
+
+        state.currentPage = 1;
+        // Re-filter then sort
+        state.filteredRows = filterRows(state.allRows, state.filterValue);
+        applySort(table);
+      });
+
+      /* table-filter — input:table-filter:.stk-table */
+      stick.add('table-filter', function (el, param) {
+        var table = getTableFromSelector(param) || el.closest('table');
+        if (!table) return;
+
+        var state = getState(table);
+        if (!state) {
+          stkDataTable.init(table);
+          state = getState(table);
+        }
+
+        state.filterValue = (el.value || '').trim();
+        applyFilter(table);
+      });
+
+      /* table-paginate — click:table-paginate:next */
+      stick.add('table-paginate', function (el, param) {
+        var wrapper = el.closest('.stk-table-wrapper');
+        var table = wrapper ? wrapper.querySelector('table') : el.closest('table');
+        if (!table) return;
+
+        var state = getState(table);
+        if (!state) {
+          stkDataTable.init(table);
+          state = getState(table);
+        }
+
+        navigatePage(table, param);
+      });
+
+      /* table-page-size — change:table-page-size:.stk-table */
+      stick.add('table-page-size', function (el, param) {
+        var table = getTableFromSelector(param) || el.closest('table');
+        if (!table) return;
+
+        var state = getState(table);
+        if (!state) {
+          stkDataTable.init(table);
+          state = getState(table);
+        }
+
+        var newSize = parseInt(el.value, 10);
+        if (isNaN(newSize) || newSize < 1) return;
+        state.pageSize = newSize;
+        state.currentPage = 1;
+        applyPagination(table);
+      });
+    },
+
+    /**
+     * Initialise a table for data-table features.
+     * @param {HTMLTableElement} table
+     * @param {Object} [opts]
+     * @param {number} [opts.pageSize=10]
+     */
+    init: function (table, opts) {
+      if (!table) return;
+      // Resolve table if a wrapper was passed
+      if (table.tagName !== 'TABLE') {
+        var inner = table.querySelector('table');
+        if (inner) table = inner;
+      }
+
+      var state = ensureState(table, opts);
+      state.allRows = collectRows(table);
+      state.filteredRows = state.allRows.slice();
+
+      // Apply page size from options (override default if provided)
+      if (opts && opts.pageSize) {
+        state.pageSize = opts.pageSize;
+      }
+
+      // Auto-create pagination bar if attribute present
+      createPaginationControls(table);
+
+      // Initial render
+      applyPagination(table);
+    }
+  };
+
+  /* ── UMD export ──────────────────────────────────────────── */
+  if (root.Stick) root.Stick.use(stkDataTable);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkDataTable;
+  root.stkDataTable = stkDataTable;
+
+}(typeof window !== 'undefined' ? window : this));

package/stick-ui/plugins/dropdown.js

@@ -0,0 +1,70 @@
+/*!
+ * Stick UI — Dropdown plugin
+ * Usage: data-stick="click:dropdown" data-stick-target="#menu"
+ * Features: click-outside close, Escape key, group exclusivity
+ */
+(function (root) {
+  'use strict';
+
+  var stkDropdown = {
+    install: function(stick) {
+      var openMenus = [];
+
+      function closeAll() {
+        openMenus.forEach(function(entry) {
+          entry.menu.hidden = true;
+          entry.trigger.setAttribute('aria-expanded', 'false');
+        });
+        openMenus = [];
+      }
+
+      document.addEventListener('click', function(e) {
+        var remaining = [];
+        openMenus.forEach(function(entry) {
+          if (!entry.trigger.contains(e.target) && !entry.menu.contains(e.target)) {
+            entry.menu.hidden = true;
+            entry.trigger.setAttribute('aria-expanded', 'false');
+          } else {
+            remaining.push(entry);
+          }
+        });
+        openMenus = remaining;
+      }, true);
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && openMenus.length) {
+          var last = openMenus[openMenus.length - 1];
+          closeAll();
+          last.trigger.focus();
+        }
+      });
+
+      stick.add('dropdown', function(el, p, e, target) {
+        var isOpen = !target.hidden;
+
+        // Close others in same group
+        var group = target.dataset.stickGroup;
+        if (group) {
+          document.querySelectorAll('[data-stick-group="' + group + '"]').forEach(function(m) {
+            if (m !== target) m.hidden = true;
+          });
+        }
+
+        target.hidden = isOpen;
+        el.setAttribute('aria-expanded', String(!isOpen));
+
+        if (!isOpen) {
+          openMenus.push({ trigger: el, menu: target });
+          var first = target.querySelector('[role="menuitem"]');
+          if (first) first.focus();
+        } else {
+          openMenus = openMenus.filter(function(entry) { return entry.menu !== target; });
+        }
+      });
+    }
+  };
+
+  if (root.Stick) root.Stick.use(stkDropdown);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkDropdown;
+  root.stkDropdown = stkDropdown;
+}(typeof window !== 'undefined' ? window : this));

package/stick-ui/plugins/stepper.js

@@ -0,0 +1,155 @@
+/*!
+ * Stick UI — Stepper / Wizard plugin
+ * Usage:
+ *   data-stick="click:step-next" data-stick-target="#my-stepper"
+ *   data-stick="click:step-prev" data-stick-target="#my-stepper"
+ *   data-stick="click:step-goto:2" data-stick-target="#my-stepper"
+ *
+ * Markup:
+ *   <div id="my-stepper" class="stk-stepper" data-stk-stepper role="group" aria-label="...">
+ *     <div class="stk-stepper-header">
+ *       <div class="stk-stepper-indicator" data-stk-step-indicator aria-current="step">1</div>
+ *       <div class="stk-stepper-connector"></div>
+ *       <div class="stk-stepper-indicator" data-stk-step-indicator>2</div>
+ *       ...
+ *     </div>
+ *     <div class="stk-stepper-body">
+ *       <div class="stk-stepper-step" data-stk-step>Step 1 content</div>
+ *       <div class="stk-stepper-step" data-stk-step hidden>Step 2 content</div>
+ *       ...
+ *     </div>
+ *   </div>
+ */
+(function (root) {
+  'use strict';
+
+  var state = new WeakMap();
+
+  function getState(container) {
+    if (!state.has(container)) {
+      var steps = container.querySelectorAll('[data-stk-step]');
+      state.set(container, { currentStep: 0, totalSteps: steps.length });
+    }
+    return state.get(container);
+  }
+
+  function getSteps(container) {
+    return container.querySelectorAll('[data-stk-step]');
+  }
+
+  function getIndicators(container) {
+    return container.querySelectorAll('[data-stk-step-indicator]');
+  }
+
+  function getConnectors(container) {
+    return container.querySelectorAll('.stk-stepper-connector');
+  }
+
+  /**
+   * Validate required fields in the given step element.
+   * Returns true if all required fields have values, false otherwise.
+   */
+  function validateStep(stepEl) {
+    var required = stepEl.querySelectorAll('[required]');
+    var valid = true;
+    for (var i = 0; i < required.length; i++) {
+      var input = required[i];
+      if (!input.value || !input.value.trim()) {
+        valid = false;
+        input.classList.add('stk-stepper-invalid');
+        // Remove the class after the animation plays
+        (function (el) {
+          setTimeout(function () { el.classList.remove('stk-stepper-invalid'); }, 800);
+        })(input);
+      }
+    }
+    return valid;
+  }
+
+  /**
+   * Navigate to a specific step index.
+   * @param {Element} container - The stepper container
+   * @param {number}  index     - 0-based target step
+   * @param {boolean} skipValidation - skip validation (used for going backward)
+   */
+  function goTo(container, index, skipValidation) {
+    var s = getState(container);
+    var steps = getSteps(container);
+    var indicators = getIndicators(container);
+    var connectors = getConnectors(container);
+
+    if (index < 0 || index >= s.totalSteps) return;
+
+    // Validate current step when moving forward
+    if (!skipValidation && index > s.currentStep) {
+      if (!validateStep(steps[s.currentStep])) return;
+    }
+
+    // Hide all steps, show target
+    for (var i = 0; i < steps.length; i++) {
+      steps[i].hidden = (i !== index);
+    }
+
+    // Update indicators
+    for (var j = 0; j < indicators.length; j++) {
+      indicators[j].removeAttribute('aria-current');
+      if (j < index) {
+        indicators[j].setAttribute('data-stk-step-complete', '');
+      } else {
+        indicators[j].removeAttribute('data-stk-step-complete');
+      }
+      if (j === index) {
+        indicators[j].setAttribute('aria-current', 'step');
+      }
+    }
+
+    // Update connectors — connector at index i sits between indicator i and i+1
+    for (var k = 0; k < connectors.length; k++) {
+      if (k < index) {
+        connectors[k].setAttribute('data-complete', '');
+      } else {
+        connectors[k].removeAttribute('data-complete');
+      }
+    }
+
+    s.currentStep = index;
+  }
+
+  var stkStepper = {
+    install: function (stick) {
+
+      stick.add('step-next', function (el, param, e, target) {
+        var container = target && target.hasAttribute('data-stk-stepper') ? target : el.closest('[data-stk-stepper]');
+        if (!container) return;
+        var s = getState(container);
+        if (s.currentStep >= s.totalSteps - 1) {
+          // Already on the last step — emit completion event
+          container.dispatchEvent(new CustomEvent('stepper-complete', { bubbles: true }));
+          return;
+        }
+        goTo(container, s.currentStep + 1, false);
+      });
+
+      stick.add('step-prev', function (el, param, e, target) {
+        var container = target && target.hasAttribute('data-stk-stepper') ? target : el.closest('[data-stk-stepper]');
+        if (!container) return;
+        var s = getState(container);
+        goTo(container, s.currentStep - 1, true);
+      });
+
+      stick.add('step-goto', function (el, param, e, target) {
+        var container = target && target.hasAttribute('data-stk-stepper') ? target : el.closest('[data-stk-stepper]');
+        if (!container) return;
+        var index = parseInt(param, 10);
+        if (isNaN(index)) return;
+        var s = getState(container);
+        var skipValidation = index <= s.currentStep;
+        goTo(container, index, skipValidation);
+      });
+    }
+  };
+
+  if (root.Stick) root.Stick.use(stkStepper);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkStepper;
+  root.stkStepper = stkStepper;
+}(typeof window !== 'undefined' ? window : this));

package/stick-ui/plugins/toast.js

@@ -0,0 +1,51 @@
+/*!
+ * Stick UI — Toast plugin
+ * Usage: data-stick="click:toast:Message here"
+ *        data-stick="click:toast:success:Saved!"
+ * Container: auto-created, or add <div id="stk-toast-zone"></div>
+ */
+(function (root) {
+  'use strict';
+
+  function getContainer() {
+    var c = document.getElementById('stk-toast-zone');
+    if (!c) {
+      c = document.createElement('div');
+      c.id = 'stk-toast-zone';
+      c.className = 'stk-toast-zone';
+      document.body.appendChild(c);
+    }
+    return c;
+  }
+
+  function dismiss(t) {
+    t.classList.add('stk-toast-exit');
+    t.addEventListener('animationend', function() { t.remove(); }, { once: true });
+    setTimeout(function() { if (t.parentElement) t.remove(); }, 500);
+  }
+
+  var stkToast = {
+    install: function(stick) {
+      stick.add('toast', function(el, param) {
+        var variant = '', message = param;
+        var match = param.match(/^(success|error|warning|info):(.+)/);
+        if (match) { variant = match[1]; message = match[2]; }
+
+        var container = getContainer();
+        var toast = document.createElement('div');
+        toast.className = 'stk-toast' + (variant ? ' stk-toast-' + variant : '');
+        toast.setAttribute('role', 'status');
+        toast.setAttribute('aria-live', 'polite');
+        toast.innerHTML = '<span class="stk-toast-message">' + message + '</span>' +
+          '<button class="stk-toast-dismiss" aria-label="Dismiss">&times;</button>';
+        toast.querySelector('.stk-toast-dismiss').addEventListener('click', function() { dismiss(toast); });
+        container.appendChild(toast);
+        setTimeout(function() { dismiss(toast); }, 3000);
+      });
+    }
+  };
+
+  if (root.Stick) root.Stick.use(stkToast);
+  if (typeof module !== 'undefined' && module.exports) module.exports = stkToast;
+  root.stkToast = stkToast;
+}(typeof window !== 'undefined' ? window : this));