@cahyo-dimas/freeday 1.18.0 → 1.20.0

package/src/freeday-select.js

@@ -1,218 +0,0 @@
-/* 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;
-    }
-    // Mark an option selected + reflect it in the button. `silent` skips the change
-    // event, close, and focus — used by the programmatic setValue() below so a host
-    // (e.g. a Blazor/framework wrapper) can push a value in without echoing an event
-    // back to itself or stealing focus. User-driven picks go through choose() (loud).
-    function select(opt, silent) {
-      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');
-      if (!silent) {
-        root.dispatchEvent(new CustomEvent('fdy-change', {
-          bubbles: true,
-          detail: { value: opt.getAttribute('data-value') }
-        }));
-        close();
-        button.focus();
-      }
-    }
-    function choose(opt) { select(opt, false); }
-    // Programmatic set (no event, no focus change). No-op if no option matches.
-    function setValue(value) {
-      for (var i = 0; i < options.length; i++) {
-        if ((options[i].getAttribute('data-value') || '') === String(value)) {
-          select(options[i], true);
-          return;
-        }
-      }
-    }
-
-    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();
-    });
-
-    // Per-instance API for programmatic control (host wrappers / two-way binding).
-    root._fdyCombo = { setValue: setValue };
-  }
-
-  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();
-  }
-
-  // Programmatic set on an already-initialised combo root (no fdy-change dispatched).
-  function setValue(root, value) {
-    if (root && root._fdyCombo) root._fdyCombo.setValue(value);
-  }
-
-  window.FreedayCombo = { init: initCombo, initAll: initAll, setValue: setValue };
-})();

package/src/freeday-slider.js

@@ -1,34 +0,0 @@
-/* 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/src/freeday-stepper.js

@@ -1,90 +0,0 @@
-/* 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 };
-})();