@cahyo-dimas/freeday 1.7.0

package/dist/freeday-form.js

@@ -0,0 +1,181 @@
+/* Freeday — form validation enhancer (optional, zero-dependency).
+ * Wires the native Constraint Validation API to accessible inline errors on any
+ * [data-fdy-validate] <form>. Native-first: constraints come from the standard
+ * markup attributes (required, type, pattern, min/max, minlength/maxlength, step);
+ * this only handles presentation + the accessible plumbing.
+ *
+ * Per control it toggles aria-invalid (which the CSS mirrors to the --error border)
+ * and shows the message in a linked [data-fdy-error] element (auto-created inside
+ * the .fdy-field if absent, and wired via aria-describedby).
+ *
+ * Custom messages via data attributes on the control (first match wins):
+ *   data-fdy-msg-required | -type | -pattern | -minlength | -maxlength |
+ *   data-fdy-msg-min | -max | -step | -mismatch, then generic data-fdy-msg.
+ * Cross-field match (e.g. confirm password): data-fdy-match="#otherId".
+ *
+ * Timing: validates on submit (blocks + focuses the first invalid control); after
+ * the first submit attempt each field re-validates on input/blur so errors clear
+ * live. Add data-fdy-eager to validate on blur from the start.
+ *
+ * Emits bubbling CustomEvents on the form: "fdy-form-invalid" (detail {invalid:[]})
+ * and "fdy-form-valid". Exposes window.FreedayForm.
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+
+  // ValidityState key -> friendly data-attribute alias.
+  var ALIAS = {
+    valueMissing: 'required',
+    typeMismatch: 'type',
+    patternMismatch: 'pattern',
+    tooShort: 'minlength',
+    tooLong: 'maxlength',
+    rangeUnderflow: 'min',
+    rangeOverflow: 'max',
+    stepMismatch: 'step',
+    badInput: 'type',
+    customError: 'mismatch'
+  };
+  var DEFAULTS = {
+    required: 'Wajib diisi.',
+    type: 'Format tidak valid.',
+    pattern: 'Format tidak sesuai.',
+    minlength: 'Terlalu pendek.',
+    maxlength: 'Terlalu panjang.',
+    min: 'Nilai terlalu kecil.',
+    max: 'Nilai terlalu besar.',
+    step: 'Nilai tidak sesuai kelipatan.',
+    mismatch: 'Nilai tidak cocok.'
+  };
+  var VALIDITY_KEYS = ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooShort', 'tooLong', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch', 'badInput'];
+
+  function isCandidate(el) {
+    if (el.disabled || el.type === 'hidden' || el.type === 'submit' || el.type === 'button' || el.type === 'reset') return false;
+    return typeof el.checkValidity === 'function' && el.willValidate;
+  }
+
+  function fieldOf(el) { return el.closest('.fdy-field') || el.parentElement; }
+
+  function ensureErrorEl(el) {
+    var field = fieldOf(el);
+    var errEl = field ? field.querySelector('[data-fdy-error]') : null;
+    if (!errEl) {
+      errEl = document.createElement('p');
+      errEl.className = 'fdy-help fdy-help--error';
+      errEl.setAttribute('data-fdy-error', '');
+      errEl.hidden = true;
+      (field || el.parentElement).appendChild(errEl);
+    }
+    if (!errEl.id) { seq += 1; errEl.id = 'fdy-err-' + seq; }
+    // Link the control to its message without clobbering existing describedby.
+    var described = (el.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+    if (described.indexOf(errEl.id) === -1) { described.push(errEl.id); el.setAttribute('aria-describedby', described.join(' ')); }
+    return errEl;
+  }
+
+  function messageFor(el) {
+    // Cross-field match runs first (drives customError via setCustomValidity).
+    el.setCustomValidity('');
+    var matchSel = el.getAttribute('data-fdy-match');
+    if (matchSel) {
+      var other = document.querySelector(matchSel);
+      if (other && el.value !== other.value) {
+        el.setCustomValidity(el.getAttribute('data-fdy-msg-mismatch') || el.getAttribute('data-fdy-msg') || DEFAULTS.mismatch);
+      }
+    }
+    if (el.validity.valid) return '';
+    var alias = el.validity.customError ? 'mismatch' : null;
+    if (!alias) {
+      for (var i = 0; i < VALIDITY_KEYS.length; i++) {
+        if (el.validity[VALIDITY_KEYS[i]]) { alias = ALIAS[VALIDITY_KEYS[i]]; break; }
+      }
+    }
+    var custom = alias ? el.getAttribute('data-fdy-msg-' + alias) : null;
+    return custom || el.getAttribute('data-fdy-msg') || (alias && DEFAULTS[alias]) || el.validationMessage || 'Tidak valid.';
+  }
+
+  function paint(el, message) {
+    var errEl = ensureErrorEl(el);
+    if (message) {
+      el.setAttribute('aria-invalid', 'true');
+      errEl.textContent = message;
+      errEl.hidden = false;
+    } else {
+      el.removeAttribute('aria-invalid');
+      errEl.textContent = '';
+      errEl.hidden = true;
+    }
+  }
+
+  function initForm(form) {
+    if (form.dataset.fdyFormReady === '1') return;
+    form.dataset.fdyFormReady = '1';
+    form.setAttribute('novalidate', '');
+    var eager = form.hasAttribute('data-fdy-eager');
+    var submitted = false;
+
+    function controls() {
+      return Array.prototype.filter.call(form.elements, isCandidate);
+    }
+    function validateOne(el) {
+      var msg = messageFor(el);
+      paint(el, msg);
+      return !msg;
+    }
+    function liveBind(el) {
+      if (el.dataset.fdyFieldBound === '1') return;
+      el.dataset.fdyFieldBound = '1';
+      var live = function () { if (submitted || eager) validateOne(el); };
+      el.addEventListener('blur', live, true);
+      el.addEventListener('input', function () { if ((submitted || eager) && el.getAttribute('aria-invalid') === 'true') validateOne(el); });
+    }
+
+    Array.prototype.forEach.call(controls(), liveBind);
+
+    form.addEventListener('submit', function (e) {
+      submitted = true;
+      var invalid = [];
+      Array.prototype.forEach.call(controls(), function (el) {
+        liveBind(el);
+        if (!validateOne(el)) invalid.push(el);
+      });
+      if (invalid.length) {
+        e.preventDefault();
+        invalid[0].focus();
+        form.dispatchEvent(new CustomEvent('fdy-form-invalid', { bubbles: true, detail: { invalid: invalid } }));
+      } else {
+        form.dispatchEvent(new CustomEvent('fdy-form-valid', { bubbles: true }));
+      }
+    });
+
+    var api = {
+      form: form,
+      validate: function () {
+        submitted = true;
+        var invalid = [];
+        Array.prototype.forEach.call(controls(), function (el) { if (!validateOne(el)) invalid.push(el); });
+        return invalid;
+      },
+      reset: function () {
+        submitted = false;
+        Array.prototype.forEach.call(controls(), function (el) { paint(el, ''); });
+      }
+    };
+    form._fdyForm = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-validate]'), initForm);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayForm = { init: initForm, initAll: initAll };
+})();

package/dist/freeday-mask.js

@@ -0,0 +1,114 @@
+/* Freeday — input mask + password reveal enhancer (optional, zero-dependency).
+ *
+ * [data-fdy-mask]="pattern" formats a text input as you type. Placeholders:
+ *   #  a digit (0-9)      A  a letter (a-z/A-Z)      *  a letter or digit
+ * Any other pattern char is a literal, inserted automatically
+ *   (e.g. "####-####-####", "(###) ###-####", "##/##/####").
+ * The raw (unmasked) value is mirrored to el.dataset.fdyRaw and the bubbling
+ * "fdy-mask" CustomEvent (detail {value, raw}). A native input event is
+ * re-dispatched so validation / framework bindings observe the change.
+ *
+ * [data-fdy-password] on a password <input class="fdy-input"> wraps it in the
+ * input-group chrome and adds a show/hide toggle (type swap + aria-pressed).
+ */
+(function () {
+  'use strict';
+
+  var EYE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>';
+  var EYE_OFF = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4M6.1 6.1A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 4-.85"></path><path d="m3 3 18 18"></path></svg>';
+
+  function matches(placeholder, ch) {
+    if (placeholder === '#') return /\d/.test(ch);
+    if (placeholder === 'A') return /[a-zA-Z]/.test(ch);
+    if (placeholder === '*') return /[a-zA-Z0-9]/.test(ch);
+    return false;
+  }
+  function isPlaceholder(ch) { return ch === '#' || ch === 'A' || ch === '*'; }
+
+  // Keep only characters the pattern's placeholders could accept.
+  function rawOf(pattern, value) {
+    var allowDigit = pattern.indexOf('#') !== -1 || pattern.indexOf('*') !== -1;
+    var allowAlpha = pattern.indexOf('A') !== -1 || pattern.indexOf('*') !== -1;
+    var out = '';
+    for (var i = 0; i < value.length; i++) {
+      var c = value[i];
+      if ((allowDigit && /\d/.test(c)) || (allowAlpha && /[a-zA-Z]/.test(c))) out += c;
+    }
+    return out;
+  }
+  function format(pattern, raw) {
+    var out = '', ri = 0;
+    for (var pi = 0; pi < pattern.length && ri < raw.length; pi++) {
+      var p = pattern[pi];
+      if (isPlaceholder(p)) {
+        while (ri < raw.length && !matches(p, raw[ri])) ri++;
+        if (ri < raw.length) { out += raw[ri]; ri++; }
+      } else {
+        out += p;
+      }
+    }
+    return out;
+  }
+
+  function initMask(el) {
+    if (el.dataset.fdyMaskReady === '1') return;
+    el.dataset.fdyMaskReady = '1';
+    var pattern = el.getAttribute('data-fdy-mask') || '';
+    if (!pattern) return;
+    el.setAttribute('inputmode', pattern.indexOf('A') === -1 ? 'numeric' : 'text');
+
+    function apply() {
+      var raw = rawOf(pattern, el.value);
+      var formatted = format(pattern, raw);
+      if (formatted !== el.value) {
+        el.value = formatted;
+        // Masked entry is left-to-right; park the caret at the end.
+        try { el.setSelectionRange(formatted.length, formatted.length); } catch (err) { /* number/date inputs */ }
+      }
+      el.dataset.fdyRaw = raw;
+      el.dispatchEvent(new CustomEvent('fdy-mask', { bubbles: true, detail: { value: formatted, raw: raw } }));
+    }
+    el.addEventListener('input', apply);
+    if (el.value) apply();
+  }
+
+  function initReveal(input) {
+    if (input.dataset.fdyPwReady === '1') return;
+    input.dataset.fdyPwReady = '1';
+
+    var group = document.createElement('span');
+    group.className = 'fdy-input-group';
+    input.parentNode.insertBefore(group, input);
+    group.appendChild(input);
+
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'fdy-input-group__btn';
+    btn.setAttribute('aria-pressed', 'false');
+    btn.setAttribute('aria-label', 'Tampilkan kata sandi');
+    btn.innerHTML = EYE;
+    btn.addEventListener('click', function () {
+      var reveal = input.type === 'password';
+      input.type = reveal ? 'text' : 'password';
+      btn.setAttribute('aria-pressed', reveal ? 'true' : 'false');
+      btn.setAttribute('aria-label', reveal ? 'Sembunyikan kata sandi' : 'Tampilkan kata sandi');
+      btn.innerHTML = reveal ? EYE_OFF : EYE;
+      input.focus();
+    });
+    group.appendChild(btn);
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-mask]'), initMask);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-password]'), initReveal);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayMask = { initMask: initMask, initReveal: initReveal, initAll: initAll };
+})();

package/dist/freeday-menu.js

@@ -0,0 +1,93 @@
+/* Freeday — menu enhancer (optional, zero-dependency).
+ * Menu-button pattern (WAI-ARIA APG): a trigger with aria-haspopup="menu" toggles a
+ * role="menu" popup of role="menuitem" buttons. Also powers the split button
+ * (main action + attached caret toggle). Auto-inits [data-fdy-menu].
+ *
+ * Markup: <div data-fdy-menu><button aria-haspopup="menu" aria-expanded="false">…</button>
+ *   <ul class="fdy-menu" role="menu" hidden><li role="none">
+ *     <button class="fdy-menu__item" role="menuitem">…</button></li>…</ul></div>
+ * Keyboard: trigger ↓/Enter/Space opens to first item, ↑ opens to last; in the menu
+ * ↑/↓/Home/End move, Esc closes (focus → trigger), Tab closes; activating an item closes.
+ */
+(function () {
+  'use strict';
+
+  function menuItems(menu) {
+    return Array.prototype.slice.call(menu.querySelectorAll('[role="menuitem"]'))
+      .filter(function (i) { return !i.disabled && !i.hidden; });
+  }
+
+  function initMenu(wrap) {
+    if (wrap.dataset.fdyMenuReady === '1') return;
+    wrap.dataset.fdyMenuReady = '1';
+    var trigger = wrap.querySelector('[aria-haspopup="menu"]');
+    var menu = wrap.querySelector('.fdy-menu, [role="menu"]');
+    if (!trigger || !menu) return;
+
+    Array.prototype.forEach.call(menu.querySelectorAll('[role="menuitem"]'), function (i) {
+      i.setAttribute('tabindex', '-1');
+    });
+    menu.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+
+    function focusAt(index) {
+      var its = menuItems(menu);
+      if (!its.length) return;
+      its[(index + its.length) % its.length].focus();
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(menu, trigger, { matchWidth: false }); return _pop; }
+    function open(index) {
+      var p = popCtl(); if (p) p.show(); else menu.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      document.addEventListener('click', onDocClick, true);
+      focusAt(index);
+    }
+    function close(returnFocus) {
+      if (menu.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else menu.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      document.removeEventListener('click', onDocClick, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDocClick(e) { if (!wrap.contains(e.target)) close(false); }
+
+    trigger.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (menu.hidden) open(0); else close(false);
+    });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(0); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); open(-1); }
+    });
+    menu.addEventListener('keydown', function (e) {
+      var its = menuItems(menu);
+      var cur = its.indexOf(document.activeElement);
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); focusAt(cur + 1); break;
+        case 'ArrowUp': e.preventDefault(); focusAt(cur - 1); break;
+        case 'Home': e.preventDefault(); focusAt(0); break;
+        case 'End': e.preventDefault(); focusAt(its.length - 1); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    menu.addEventListener('click', function (e) {
+      var item = e.target.closest('[role="menuitem"]');
+      if (item && !item.disabled) close(true);
+    });
+  }
+
+  function initAll(ctx) {
+    Array.prototype.forEach.call((ctx || document).querySelectorAll('[data-fdy-menu]'), initMenu);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayMenu = { init: initMenu, initAll: initAll };
+})();

package/dist/freeday-popover.js

@@ -0,0 +1,69 @@
+/* Freeday — popover positioning helper (optional, zero-dependency).
+ * Lifts a dropdown panel into the top layer via the native Popover API so it escapes ANY
+ * ancestor overflow clip (a .fdy-card with overflow:hidden, an app-shell main with
+ * overflow:auto, …), then positions it `fixed` against its trigger — flipping above when
+ * there is no room below, and matching the trigger width. The panel stays a DOM child of its
+ * component, so focus, outside-click (.closest), and ARIA relationships keep working unchanged.
+ *
+ * Used by the select/combo, datepicker, timepicker, cascade, autocomplete and menu enhancers;
+ * the freeday/vue adapter ships an equivalent `usePopover` composable.
+ *
+ * attach(panel, trigger) -> { show(), hide() }. show()/hide() also toggle the panel's [hidden]
+ * attribute so callers keep using `!panel.hidden` for open-state and the `:not([hidden])`
+ * entrance animation still fires. On browsers without the Popover API it degrades to that
+ * [hidden] toggle over the panel's existing absolute-positioned CSS (clipped, but functional).
+ */
+(function () {
+  'use strict';
+
+  var GAP = 4; // ~ --space-1, breathing room between trigger and panel
+  var supported = typeof HTMLElement !== 'undefined'
+    && typeof HTMLElement.prototype.showPopover === 'function';
+
+  // Position `panel` (already shown, so it has a measurable box) against `trigger`'s rect.
+  // matchWidth (default true) floors the panel to the trigger width — right for input-shaped
+  // dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
+  function place(panel, trigger, matchWidth) {
+    var r = trigger.getBoundingClientRect();
+    panel.style.position = 'fixed';
+    panel.style.margin = '0';
+    panel.style.inset = 'auto';                 // clear the UA popover centering
+    if (matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
+    var ph = panel.offsetHeight, pw = panel.offsetWidth;
+    var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
+    var below = vh - r.bottom - GAP, above = r.top - GAP;
+    // Prefer below; flip above only when it doesn't fit below and above has more room.
+    var top = (ph <= below || below >= above) ? (r.bottom + GAP) : Math.max(GAP, r.top - GAP - ph);
+    var left = r.left;
+    if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw); // keep within the viewport
+    panel.style.top = Math.round(top) + 'px';
+    panel.style.left = Math.round(left) + 'px';
+  }
+
+  function attach(panel, trigger, opts) {
+    var matchWidth = !(opts && opts.matchWidth === false);
+    if (supported) panel.setAttribute('popover', 'manual');
+    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, matchWidth); }
+    return {
+      show: function () {
+        panel.hidden = false;
+        if (supported) {
+          if (!panel.matches(':popover-open')) panel.showPopover();
+          place(panel, trigger, matchWidth);
+          window.addEventListener('scroll', reposition, true); // capture: any scrolling ancestor
+          window.addEventListener('resize', reposition);
+        }
+      },
+      hide: function () {
+        if (supported) {
+          window.removeEventListener('scroll', reposition, true);
+          window.removeEventListener('resize', reposition);
+          if (panel.matches(':popover-open')) panel.hidePopover();
+        }
+        panel.hidden = true;
+      }
+    };
+  }
+
+  window.FreedayPopover = { attach: attach, place: place, supported: supported };
+})();

package/dist/freeday-rating.js

@@ -0,0 +1,50 @@
+/* Freeday — rating enhancer (optional, zero-dependency).
+ * Fills stars up to the checked radio (and previews on hover) for an interactive
+ * [data-fdy-rating] radio group; for [data-fdy-readonly] it fills from data-value.
+ * The radios are native — arrow-key selection and form association come for free.
+ */
+(function () {
+  'use strict';
+
+  function initRating(root) {
+    if (root.dataset.fdyRatingReady === '1') return;
+    root.dataset.fdyRatingReady = '1';
+
+    var stars = Array.prototype.slice.call(root.querySelectorAll('.fdy-rating__star'));
+    if (!stars.length) return;
+
+    function fill(n) {
+      stars.forEach(function (s, i) { s.classList.toggle('is-filled', i < n); });
+    }
+
+    if (root.hasAttribute('data-fdy-readonly')) {
+      fill(parseInt(root.getAttribute('data-value'), 10) || 0);
+      return;
+    }
+
+    var inputs = stars.map(function (s) { return s.querySelector('input'); });
+    function current() {
+      for (var i = 0; i < inputs.length; i++) { if (inputs[i] && inputs[i].checked) return i + 1; }
+      return 0;
+    }
+
+    fill(current());
+    root.addEventListener('change', function () { fill(current()); });
+    stars.forEach(function (s, i) {
+      s.addEventListener('mouseenter', function () { fill(i + 1); });
+    });
+    root.addEventListener('mouseleave', function () { fill(current()); });
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-rating]'), initRating);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayRating = { init: initRating, initAll: initAll };
+})();