@cahyo-dimas/freeday 1.7.0

package/dist/freeday-select.js

@@ -0,0 +1,194 @@
+/* Freeday — combobox enhancer (optional, zero-dependency).
+ * Implements the WAI-ARIA APG "select-only combobox" pattern for every
+ * [data-fdy-combo] on the page. Progressive enhancement: the markup is the
+ * component, this script wires behavior. In a Vue/React/Blazor app you would
+ * bind your own state instead — this is the framework-agnostic reference.
+ *
+ * Expected markup:
+ *   <div class="fdy-combo" data-fdy-combo data-value="x">
+ *     <button type="button" class="fdy-combo__button" role="combobox"
+ *             aria-haspopup="listbox" aria-expanded="false"
+ *             aria-labelledby="LBL VAL">
+ *       <span class="fdy-combo__value" id="VAL">Label</span>
+ *     </button>
+ *     <ul class="fdy-combo__listbox" role="listbox" hidden>
+ *       <li class="fdy-combo__option" role="option" data-value="x"
+ *           aria-selected="true"><span class="fdy-combo__check">✓</span>Label</li>
+ *     </ul>
+ *   </div>
+ *
+ * Emits a bubbling "fdy-change" CustomEvent on the root with detail.value.
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var openClose = null; // close() of the currently-open combo, or null
+
+  function optionLabel(opt) {
+    var check = opt.querySelector('.fdy-combo__check');
+    var node = check && check.nextSibling ? check.nextSibling.textContent : opt.textContent;
+    return (node || '').trim();
+  }
+
+  function initCombo(root) {
+    if (root.dataset.fdyComboReady === '1') return; // idempotent
+    var button = root.querySelector('.fdy-combo__button');
+    var listbox = root.querySelector('.fdy-combo__listbox');
+    var valueEl = root.querySelector('.fdy-combo__value');
+    var options = Array.prototype.slice.call(root.querySelectorAll('.fdy-combo__option'));
+    if (!button || !listbox || !valueEl || options.length === 0) return;
+    root.dataset.fdyComboReady = '1';
+
+    seq += 1;
+    if (!listbox.id) listbox.id = 'fdy-combo-list-' + seq;
+    button.setAttribute('aria-controls', listbox.id);
+    options.forEach(function (opt, i) {
+      if (!opt.id) opt.id = listbox.id + '-opt-' + i;
+    });
+
+    var typed = '';
+    var typedTimer = null;
+
+    function highlightedIndex() {
+      for (var i = 0; i < options.length; i++) {
+        if (options[i].classList.contains('is-highlighted')) return i;
+      }
+      return -1;
+    }
+    function setHighlight(i) {
+      options.forEach(function (opt, idx) {
+        opt.classList.toggle('is-highlighted', idx === i);
+      });
+      if (i >= 0) {
+        button.setAttribute('aria-activedescendant', options[i].id);
+        options[i].scrollIntoView({ block: 'nearest' });
+      } else {
+        button.removeAttribute('aria-activedescendant');
+      }
+    }
+    function isOpen() {
+      return !listbox.hidden;
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, button); return _pop; }
+    function open() {
+      if (openClose && openClose !== close) openClose();
+      var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
+      button.classList.add('is-open');
+      button.setAttribute('aria-expanded', 'true');
+      var selected = options.findIndex(function (opt) {
+        return opt.getAttribute('aria-selected') === 'true';
+      });
+      setHighlight(selected < 0 ? 0 : selected);
+      openClose = close;
+    }
+    function close() {
+      var p = popCtl(); if (p) p.hide(); else listbox.hidden = true;
+      button.classList.remove('is-open');
+      button.setAttribute('aria-expanded', 'false');
+      button.removeAttribute('aria-activedescendant');
+      setHighlight(-1);
+      if (openClose === close) openClose = null;
+    }
+    function choose(opt) {
+      options.forEach(function (other) {
+        var on = other === opt;
+        other.setAttribute('aria-selected', on ? 'true' : 'false');
+        var check = other.querySelector('.fdy-combo__check');
+        if (check) check.textContent = on ? '✓' : '';
+      });
+      root.setAttribute('data-value', opt.getAttribute('data-value') || '');
+      valueEl.textContent = optionLabel(opt);
+      valueEl.classList.remove('fdy-combo__value--placeholder');
+      root.dispatchEvent(new CustomEvent('fdy-change', {
+        bubbles: true,
+        detail: { value: opt.getAttribute('data-value') }
+      }));
+      close();
+      button.focus();
+    }
+
+    button.addEventListener('click', function () {
+      isOpen() ? close() : open();
+    });
+    // Pressing an option must not blur the button: a blur fires the focusout
+    // handler below, which closes the listbox before the option's click lands —
+    // so the pick is lost (real mouse only; synthetic .click() never blurs).
+    // preventDefault on mousedown keeps focus on the button without blocking click.
+    listbox.addEventListener('mousedown', function (e) { e.preventDefault(); });
+    options.forEach(function (opt, i) {
+      opt.addEventListener('click', function () { choose(opt); });
+      opt.addEventListener('mousemove', function () { setHighlight(i); });
+    });
+
+    root.addEventListener('keydown', function (e) {
+      var hi = highlightedIndex();
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          isOpen() ? setHighlight((hi + 1) % options.length) : open();
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          isOpen() ? setHighlight((hi - 1 + options.length) % options.length) : open();
+          break;
+        case 'Home':
+          if (isOpen()) { e.preventDefault(); setHighlight(0); }
+          break;
+        case 'End':
+          if (isOpen()) { e.preventDefault(); setHighlight(options.length - 1); }
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (isOpen() && hi >= 0) choose(options[hi]); else open();
+          break;
+        case 'Escape':
+          if (isOpen()) { e.preventDefault(); close(); button.focus(); }
+          break;
+        case 'Tab':
+          if (isOpen()) close();
+          break;
+        default:
+          if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            typed += e.key.toLowerCase();
+            clearTimeout(typedTimer);
+            typedTimer = setTimeout(function () { typed = ''; }, 500);
+            var match = options.findIndex(function (opt) {
+              return optionLabel(opt).toLowerCase().indexOf(typed) === 0;
+            });
+            if (match >= 0) { if (!isOpen()) open(); setHighlight(match); }
+          }
+      }
+    });
+
+    // Close when focus leaves the whole combo (e.g. Shift+Tab off the button).
+    root.addEventListener('focusout', function (e) {
+      if (!root.contains(e.relatedTarget)) close();
+    });
+  }
+
+  function initAll(context) {
+    var scope = context || document;
+    Array.prototype.forEach.call(
+      scope.querySelectorAll('[data-fdy-combo]'),
+      initCombo
+    );
+  }
+
+  // One global handler closes the open combo on an outside click.
+  document.addEventListener('click', function (e) {
+    if (openClose && !(e.target.closest && e.target.closest('.fdy-combo'))) {
+      openClose();
+    }
+  });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCombo = { init: initCombo, initAll: initAll };
+})();

package/dist/freeday-slider.js

@@ -0,0 +1,34 @@
+/* Freeday — slider value binding (optional, zero-dependency).
+ * Mirrors a [data-fdy-slider] range input's value into <output for="inputId">, with an
+ * optional prefix/suffix on the output (data-fdy-prefix / data-fdy-suffix). The range itself
+ * is a native input — keyboard and ARIA are built in; this only updates the visible readout.
+ */
+(function () {
+  'use strict';
+
+  function formatted(out, value) {
+    return (out.getAttribute('data-fdy-prefix') || '') + value + (out.getAttribute('data-fdy-suffix') || '');
+  }
+
+  function initSlider(input) {
+    if (input.dataset.fdySliderReady === '1') return;
+    input.dataset.fdySliderReady = '1';
+    var out = input.id ? document.querySelector('output[for="' + input.id + '"]') : null;
+    if (!out) return;
+    function sync() { out.textContent = formatted(out, input.value); }
+    input.addEventListener('input', sync);
+    sync();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-slider]'), initSlider);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedaySlider = { init: initSlider, initAll: initAll };
+})();

package/dist/freeday-stepper.js

@@ -0,0 +1,90 @@
+/* Freeday — stepper/wizard enhancer (optional, zero-dependency).
+ * Drives a step header + panels: prev/next navigation, completed/active state, and
+ * clicking a reached step to revisit it (linear — can't skip ahead). Auto-inits
+ * [data-fdy-stepper].
+ *
+ * Markup: <div data-fdy-stepper>
+ *   <ol class="fdy-stepper">
+ *     <li class="fdy-step"><button class="fdy-step__btn"><span class="fdy-step__marker">1</span>
+ *       <span class="fdy-step__label">…</span></button></li>… </ol>
+ *   <div class="fdy-step-panels">
+ *     <div class="fdy-step-panel">…</div>… </div>
+ *   <div class="fdy-step-nav"><button data-fdy-step-prev>…</button>
+ *     <button data-fdy-step-next>…</button></div></div>
+ * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step).
+ */
+(function () {
+  'use strict';
+
+  var CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>';
+
+  function initStepper(root) {
+    if (root.dataset.fdyStepperReady === '1') return;
+    root.dataset.fdyStepperReady = '1';
+
+    var steps = Array.prototype.slice.call(root.querySelectorAll('.fdy-step'));
+    var panels = Array.prototype.slice.call(root.querySelectorAll('.fdy-step-panel'));
+    var prevBtn = root.querySelector('[data-fdy-step-prev]');
+    var nextBtn = root.querySelector('[data-fdy-step-next]');
+    if (!steps.length) return;
+
+    var active = 0;
+    for (var i = 0; i < steps.length; i++) {
+      if (steps[i].classList.contains('is-active')) { active = i; break; }
+    }
+    var maxReached = active;
+    var nextLabel = nextBtn ? nextBtn.textContent : '';
+
+    steps.forEach(function (s) {
+      var marker = s.querySelector('.fdy-step__marker');
+      if (marker && marker.dataset.num == null) marker.dataset.num = marker.textContent.trim();
+    });
+
+    function render() {
+      steps.forEach(function (s, i) {
+        s.classList.toggle('is-active', i === active);
+        s.classList.toggle('is-complete', i < active);
+        if (i === active) s.setAttribute('aria-current', 'step'); else s.removeAttribute('aria-current');
+        var marker = s.querySelector('.fdy-step__marker');
+        if (marker) marker.innerHTML = i < active ? CHECK : (marker.dataset.num || String(i + 1));
+        var btn = s.querySelector('.fdy-step__btn');
+        if (btn) btn.disabled = i > maxReached;
+      });
+      panels.forEach(function (p, i) { p.hidden = i !== active; });
+      if (prevBtn) prevBtn.disabled = active === 0;
+      if (nextBtn) nextBtn.textContent = active === steps.length - 1 ? 'Selesai' : (nextLabel || 'Lanjut');
+      root.dispatchEvent(new CustomEvent('fdy-step-change', { bubbles: true, detail: { index: active } }));
+    }
+
+    function go(i) {
+      if (i < 0 || i >= steps.length) return;
+      active = i;
+      if (active > maxReached) maxReached = active;
+      render();
+    }
+
+    if (prevBtn) prevBtn.addEventListener('click', function () { go(active - 1); });
+    if (nextBtn) nextBtn.addEventListener('click', function () {
+      if (active < steps.length - 1) go(active + 1);
+      else root.dispatchEvent(new CustomEvent('fdy-step-finish', { bubbles: true }));
+    });
+    steps.forEach(function (s, i) {
+      var btn = s.querySelector('.fdy-step__btn');
+      if (btn) btn.addEventListener('click', function () { if (i <= maxReached) go(i); });
+    });
+
+    render();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-stepper]'), initStepper);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayStepper = { init: initStepper, initAll: initAll };
+})();