@cahyo-dimas/freeday 1.7.0

package/dist/freeday-autocomplete.js

@@ -0,0 +1,135 @@
+/* Freeday — autocomplete enhancer (optional, zero-dependency).
+ * Editable combobox (WAI-ARIA APG): a text input filters a role="listbox" of role="option"
+ * items as you type; select fills the input. Auto-inits [data-fdy-autocomplete]. Options are
+ * static markup filtered client-side — in an app, fetch/filter server-side and re-render options.
+ *
+ * Markup: <div data-fdy-autocomplete class="fdy-autocomplete">
+ *   <input class="fdy-input" role="combobox" aria-expanded="false" aria-autocomplete="list"
+ *          aria-controls="listId" autocomplete="off">
+ *   <ul class="fdy-autocomplete__listbox" id="listId" role="listbox" hidden>
+ *     <li class="fdy-autocomplete__option" role="option">…</li>…
+ *     <li class="fdy-autocomplete__empty" hidden>Tak ada hasil</li></ul></div>
+ * Emits a bubbling "fdy-autocomplete-select" CustomEvent (detail {value, option}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+
+  function initAutocomplete(root) {
+    if (root.dataset.fdyAcReady === '1') return;
+    root.dataset.fdyAcReady = '1';
+
+    var input = root.querySelector('input[role="combobox"]') || root.querySelector('input');
+    var listbox = root.querySelector('[role="listbox"]');
+    if (!input || !listbox) return;
+    var options = Array.prototype.slice.call(listbox.querySelectorAll('[role="option"]'));
+    var emptyEl = listbox.querySelector('.fdy-autocomplete__empty');
+    var active = -1;
+
+    options.forEach(function (o) {
+      if (!o.id) { seq += 1; o.id = 'fdy-ac-opt-' + seq; }
+      o.dataset.label = o.textContent.trim();
+    });
+    listbox.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+
+    function visible() { return options.filter(function (o) { return !o.hidden; }); }
+    function clearHighlight() { options.forEach(function (o) { o.classList.remove('is-highlighted'); }); }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, input); return _pop; }
+    function open() {
+      if (!listbox.hidden) return;
+      var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
+      input.setAttribute('aria-expanded', 'true');
+      document.addEventListener('click', onDocClick, true);
+    }
+    function close() {
+      if (listbox.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else listbox.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      input.removeAttribute('aria-activedescendant');
+      active = -1;
+      clearHighlight();
+      document.removeEventListener('click', onDocClick, true);
+    }
+    function onDocClick(e) { if (!root.contains(e.target)) close(); }
+
+    function highlight(i) {
+      var vis = visible();
+      clearHighlight();
+      if (!vis.length || i < 0 || i >= vis.length) { active = -1; input.removeAttribute('aria-activedescendant'); return; }
+      active = i;
+      vis[i].classList.add('is-highlighted');
+      input.setAttribute('aria-activedescendant', vis[i].id);
+      vis[i].scrollIntoView({ block: 'nearest' });
+    }
+
+    function applyFilter() {
+      var q = input.value.trim().toLowerCase();
+      var shown = 0;
+      options.forEach(function (o) {
+        var match = !q || o.dataset.label.toLowerCase().indexOf(q) !== -1;
+        o.hidden = !match;
+        if (match) shown++;
+      });
+      if (emptyEl) emptyEl.hidden = shown !== 0;
+      active = -1;
+      input.removeAttribute('aria-activedescendant');
+      clearHighlight();
+      open();
+    }
+
+    function choose(opt) {
+      input.value = opt.dataset.label;
+      options.forEach(function (o) { o.setAttribute('aria-selected', o === opt ? 'true' : 'false'); });
+      close();
+      root.dispatchEvent(new CustomEvent('fdy-autocomplete-select', { bubbles: true, detail: { value: opt.dataset.label, option: opt } }));
+    }
+
+    input.addEventListener('input', applyFilter);
+    input.addEventListener('focus', function () { applyFilter(); });
+    input.addEventListener('keydown', function (e) {
+      var vis = visible();
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          if (listbox.hidden) open();
+          highlight(active + 1 < vis.length ? active + 1 : 0);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          if (listbox.hidden) open();
+          highlight(active - 1 >= 0 ? active - 1 : vis.length - 1);
+          break;
+        case 'Enter':
+          if (!listbox.hidden && active >= 0) { e.preventDefault(); choose(vis[active]); }
+          break;
+        case 'Escape':
+          if (!listbox.hidden) { e.preventDefault(); close(); }
+          break;
+        case 'Tab':
+          close();
+          break;
+        default: break;
+      }
+    });
+    listbox.addEventListener('click', function (e) {
+      var opt = e.target.closest('[role="option"]');
+      if (opt && !opt.hidden) choose(opt);
+    });
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-autocomplete]'), initAutocomplete);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll };
+})();

package/dist/freeday-breakpoint.js

@@ -0,0 +1,51 @@
+/* Freeday — breakpoint provider (optional, zero-dependency).
+ * The MudBreakpointProvider equivalent for JS consumers: stamps the current breakpoint on
+ * <html data-breakpoint="xs|sm|md|lg|xl"> and emits a bubbling "fdy-breakpoint-change"
+ * CustomEvent (detail {breakpoint}) whenever it changes. Also fills any element with
+ * [data-fdy-breakpoint-label] with the current name. Read it live via FreedayBreakpoint.get().
+ * Scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920 (matches breakpoints.css).
+ */
+(function () {
+  'use strict';
+
+  var STEPS = [['xl', 1920], ['lg', 1280], ['md', 960], ['sm', 600], ['xs', 0]];
+
+  function current() {
+    var w = window.innerWidth;
+    for (var i = 0; i < STEPS.length; i++) {
+      if (w >= STEPS[i][1]) return STEPS[i][0];
+    }
+    return 'xs';
+  }
+
+  var root = document.documentElement;
+  var last = null;
+
+  function update() {
+    var bp = current();
+    if (bp === last) return;
+    last = bp;
+    root.setAttribute('data-breakpoint', bp);
+    Array.prototype.forEach.call(document.querySelectorAll('[data-fdy-breakpoint-label]'), function (el) {
+      el.textContent = bp;
+    });
+    root.dispatchEvent(new CustomEvent('fdy-breakpoint-change', { bubbles: true, detail: { breakpoint: bp } }));
+  }
+
+  window.addEventListener('resize', update, { passive: true });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', update);
+  } else {
+    update();
+  }
+
+  window.FreedayBreakpoint = {
+    get: function () { return last || current(); },
+    current: current,
+    // true if the current breakpoint is `name` or wider (e.g. is('md') → md, lg, or xl)
+    isUp: function (name) {
+      var order = ['xs', 'sm', 'md', 'lg', 'xl'];
+      return order.indexOf(this.get()) >= order.indexOf(name);
+    }
+  };
+})();

package/dist/freeday-carousel.js

@@ -0,0 +1,111 @@
+/* Freeday — carousel enhancer (optional, zero-dependency).
+ * Scroll-snap slider with prev/next arrows, generated dot indicators, keyboard (←/→),
+ * and optional autoplay (data-fdy-autoplay="4000", pauses on hover/focus). Auto-inits
+ * [data-fdy-carousel].
+ *
+ * Markup: <div class="fdy-carousel" data-fdy-carousel role="region"
+ *            aria-roledescription="carousel" aria-label="…" tabindex="0">
+ *   <button class="fdy-carousel__arrow fdy-carousel__arrow--prev" aria-label="Sebelumnya">…</button>
+ *   <div class="fdy-carousel__viewport">
+ *     <div class="fdy-carousel__slide" role="group" aria-roledescription="slide">…</div>…
+ *   </div>
+ *   <button class="fdy-carousel__arrow fdy-carousel__arrow--next" aria-label="Berikutnya">…</button>
+ *   <div class="fdy-carousel__dots"></div>   <!-- dots generated here -->
+ * </div>
+ * Emits a bubbling "fdy-carousel-change" CustomEvent (detail {index}).
+ */
+(function () {
+  'use strict';
+
+  function initCarousel(root) {
+    if (root.dataset.fdyCarouselReady === '1') return;
+    root.dataset.fdyCarouselReady = '1';
+
+    var viewport = root.querySelector('.fdy-carousel__viewport');
+    var slides = Array.prototype.slice.call(root.querySelectorAll('.fdy-carousel__slide'));
+    if (!viewport || !slides.length) return;
+    var prev = root.querySelector('.fdy-carousel__arrow--prev');
+    var next = root.querySelector('.fdy-carousel__arrow--next');
+    var dotsWrap = root.querySelector('.fdy-carousel__dots');
+    var index = 0;
+
+    slides.forEach(function (s, i) {
+      if (!s.hasAttribute('aria-label')) s.setAttribute('aria-label', (i + 1) + ' dari ' + slides.length);
+    });
+
+    var dots = [];
+    if (dotsWrap) {
+      slides.forEach(function (s, i) {
+        var b = document.createElement('button');
+        b.type = 'button';
+        b.className = 'fdy-carousel__dot';
+        b.setAttribute('aria-label', 'Slide ' + (i + 1));
+        b.addEventListener('click', function () { goTo(i); });
+        dotsWrap.appendChild(b);
+        dots.push(b);
+      });
+    }
+
+    function clamp(i) { return Math.max(0, Math.min(slides.length - 1, i)); }
+
+    function sync() {
+      dots.forEach(function (d, i) { d.setAttribute('aria-current', i === index ? 'true' : 'false'); });
+      if (prev) prev.disabled = index === 0;
+      if (next) next.disabled = index === slides.length - 1;
+    }
+
+    function goTo(i) {
+      index = clamp(i);
+      viewport.scrollTo({ left: index * viewport.clientWidth, behavior: 'smooth' });
+      sync();
+      root.dispatchEvent(new CustomEvent('fdy-carousel-change', { bubbles: true, detail: { index: index } }));
+    }
+
+    if (prev) prev.addEventListener('click', function () { goTo(index - 1); });
+    if (next) next.addEventListener('click', function () { goTo(index + 1); });
+    root.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(index - 1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); goTo(index + 1); }
+    });
+
+    // Keep index in sync when the user swipes/scrolls the viewport directly.
+    var ticking = false;
+    viewport.addEventListener('scroll', function () {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(function () {
+        ticking = false;
+        var w = viewport.clientWidth || 1;
+        var i = clamp(Math.round(viewport.scrollLeft / w));
+        if (i !== index) { index = i; sync(); }
+      });
+    }, { passive: true });
+
+    var autoplay = parseInt(root.getAttribute('data-fdy-autoplay'), 10);
+    if (autoplay > 0) {
+      var timer = null;
+      var start = function () { if (!timer) timer = setInterval(function () { goTo(index >= slides.length - 1 ? 0 : index + 1); }, autoplay); };
+      var stop = function () { if (timer) { clearInterval(timer); timer = null; } };
+      root.addEventListener('mouseenter', stop);
+      root.addEventListener('mouseleave', start);
+      root.addEventListener('focusin', stop);
+      root.addEventListener('focusout', start);
+      var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (!reduce) start();
+    }
+
+    sync();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-carousel]'), initCarousel);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCarousel = { init: initCarousel, initAll: initAll };
+})();

package/dist/freeday-cascade.js

@@ -0,0 +1,256 @@
+/* Freeday — cascade select enhancer (optional, zero-dependency).
+ * Turns a [data-fdy-cascade] wrapper into a hierarchical drill-down picker. The
+ * data model is a hidden nested <ul> inside the wrapper: a <li> with a child <ul>
+ * is a branch (drills in), a <li> without is a leaf (selects). Each <li> carries
+ * its value in data-value; its own text (before any nested <ul>) is the label.
+ *
+ * The popover shows one level at a time (a listbox); a branch drills in, the back
+ * control ascends, a leaf selects and stores the full path as the value.
+ * Attributes: data-label, data-placeholder, data-value (pre-select a leaf value),
+ * data-separator (path separator in the display, default " / ").
+ *
+ * Keyboard: trigger opens on click / Enter / Space / ArrowDown. In the list:
+ * Up/Down move, Home/End jump, ArrowRight/Enter/Space drill into a branch or
+ * select a leaf, ArrowLeft/Backspace go up a level, Esc closes (focus returns to
+ * the trigger). Emits a bubbling "fdy-cascade-change" (detail {value, path, labels}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var BACK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg>';
+
+  // Own text of an <li>, excluding any nested <ul>.
+  function ownLabel(li) {
+    var s = '';
+    Array.prototype.forEach.call(li.childNodes, function (n) {
+      if (n.nodeType === 3) s += n.textContent;
+      else if (n.nodeType === 1 && n.tagName !== 'UL') s += n.textContent;
+    });
+    return s.trim();
+  }
+  function parse(ul) {
+    var nodes = [];
+    Array.prototype.forEach.call(ul.children, function (li) {
+      if (li.tagName !== 'LI') return;
+      var childUl = li.querySelector(':scope > ul');
+      nodes.push({
+        label: ownLabel(li),
+        value: li.getAttribute('data-value') || ownLabel(li),
+        children: childUl ? parse(childUl) : null
+      });
+    });
+    return nodes;
+  }
+  // Depth-first search for the stack of labels leading to a leaf value.
+  function pathTo(nodes, value, trail) {
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      var here = trail.concat([n]);
+      if (!n.children && n.value === value) return here;
+      if (n.children) { var found = pathTo(n.children, value, here); if (found) return found; }
+    }
+    return null;
+  }
+
+  function initCascade(wrap) {
+    if (wrap.dataset.fdyCascadeReady === '1') return;
+    wrap.dataset.fdyCascadeReady = '1';
+    wrap.classList.add('fdy-cascade');
+
+    var sourceUl = wrap.querySelector('ul');
+    var root = sourceUl ? parse(sourceUl) : [];
+    if (sourceUl) sourceUl.remove();
+
+    var label = wrap.getAttribute('data-label') || 'Pilih';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih…';
+    var sep = wrap.getAttribute('data-separator') || ' / ';
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-cascade__trigger';
+    trigger.setAttribute('aria-haspopup', 'true');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-cascade__value';
+    trigger.appendChild(valueSpan);
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-cascade__panel';
+    panel.hidden = true;
+    var head = document.createElement('div');
+    head.className = 'fdy-cascade__head';
+    var back = document.createElement('button');
+    back.type = 'button';
+    back.className = 'fdy-cascade__back';
+    back.setAttribute('aria-label', 'Kembali satu tingkat');
+    back.innerHTML = BACK;
+    back.hidden = true;
+    var crumb = document.createElement('span');
+    crumb.className = 'fdy-cascade__crumb';
+    crumb.setAttribute('aria-live', 'polite');
+    head.appendChild(back);
+    head.appendChild(crumb);
+    var list = document.createElement('ul');
+    seq += 1;
+    list.className = 'fdy-cascade__list';
+    list.id = 'fdy-cascade-list-' + seq;
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', label);
+    list.tabIndex = -1;
+    panel.appendChild(head);
+    panel.appendChild(list);
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    var stack = [];        // branch nodes drilled through (context)
+    var current = root;    // nodes at the visible level
+    var opts = [];         // rendered <li> elements
+    var active = -1;
+    var selectedValue = wrap.getAttribute('data-value') || '';
+
+    function render() {
+      list.innerHTML = '';
+      opts = [];
+      back.hidden = stack.length === 0;
+      crumb.textContent = stack.length ? stack.map(function (n) { return n.label; }).join(sep) : label;
+      current.forEach(function (node, i) {
+        var li = document.createElement('li');
+        seq += 1; li.id = 'fdy-cascade-opt-' + seq;
+        li.className = 'fdy-cascade__opt';
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-index', String(i));
+        var isBranch = !!node.children;
+        li.setAttribute('aria-selected', (!isBranch && node.value === selectedValue) ? 'true' : 'false');
+        if (isBranch) li.setAttribute('aria-label', node.label + ', submenu');
+        var lbl = document.createElement('span');
+        lbl.className = 'fdy-cascade__opt-label';
+        lbl.textContent = node.label;
+        li.appendChild(lbl);
+        if (isBranch) {
+          var arrow = document.createElement('span');
+          arrow.className = 'fdy-cascade__opt-arrow';
+          arrow.setAttribute('aria-hidden', 'true');
+          li.appendChild(arrow);
+        }
+        list.appendChild(li);
+        opts.push(li);
+      });
+      setActive(0);
+    }
+    function setActive(i) {
+      if (active >= 0 && opts[active]) opts[active].classList.remove('is-active');
+      active = Math.max(-1, Math.min(opts.length - 1, i));
+      if (active >= 0) {
+        opts[active].classList.add('is-active');
+        list.setAttribute('aria-activedescendant', opts[active].id);
+        opts[active].scrollIntoView({ block: 'nearest' });
+      } else {
+        list.removeAttribute('aria-activedescendant');
+      }
+    }
+    function drill(i) {
+      var node = current[i];
+      if (!node || !node.children) return;
+      stack.push(node);
+      current = node.children;
+      render();
+    }
+    function ascend() {
+      if (!stack.length) return;
+      stack.pop();
+      current = stack.length ? stack[stack.length - 1].children : root;
+      render();
+    }
+    function activate(i) {
+      var node = current[i];
+      if (!node) return;
+      if (node.children) { drill(i); return; }
+      selectedValue = node.value;
+      var labels = stack.map(function (n) { return n.label; }).concat([node.label]);
+      valueSpan.textContent = labels.join(sep);
+      valueSpan.classList.remove('fdy-cascade__value--placeholder');
+      wrap.dispatchEvent(new CustomEvent('fdy-cascade-change', { bubbles: true, detail: { value: node.value, path: labels.join(sep), labels: labels } }));
+      close(true);
+    }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      // Re-open at the selected leaf's level for quick re-selection.
+      var trail = selectedValue ? pathTo(root, selectedValue, []) : null;
+      if (trail && trail.length > 1) { stack = trail.slice(0, -1); current = stack[stack.length - 1].children; }
+      else { stack = []; current = root; }
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      render();
+      list.focus();
+      document.addEventListener('click', onDoc, true);
+    }
+    function close(returnFocus) {
+      if (panel.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.classList.remove('is-open');
+      document.removeEventListener('click', onDoc, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDoc(e) { if (!wrap.contains(e.target)) close(false); }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
+    });
+    back.addEventListener('click', function () { ascend(); list.focus(); });
+    list.addEventListener('keydown', function (e) {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); setActive(active + 1); break;
+        case 'ArrowUp': e.preventDefault(); setActive(active - 1); break;
+        case 'Home': e.preventDefault(); setActive(0); break;
+        case 'End': e.preventDefault(); setActive(opts.length - 1); break;
+        case 'ArrowRight': case 'Enter': case ' ': e.preventDefault(); if (active >= 0) activate(active); break;
+        case 'ArrowLeft': case 'Backspace': e.preventDefault(); ascend(); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    list.addEventListener('click', function (e) {
+      var li = e.target.closest('[role="option"]');
+      if (li) activate(opts.indexOf(li));
+    });
+
+    // Initial display: pre-selected leaf shows its full path, else placeholder.
+    var initTrail = selectedValue ? pathTo(root, selectedValue, []) : null;
+    if (initTrail) {
+      valueSpan.textContent = initTrail.map(function (n) { return n.label; }).join(sep);
+    } else {
+      valueSpan.textContent = placeholder;
+      valueSpan.classList.add('fdy-cascade__value--placeholder');
+    }
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return selectedValue; },
+      clear: function () { selectedValue = ''; valueSpan.textContent = placeholder; valueSpan.classList.add('fdy-cascade__value--placeholder'); }
+    };
+    wrap._fdyCascade = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-cascade]'), initCascade);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCascade = { init: initCascade, initAll: initAll };
+})();