@cahyo-dimas/freeday 2.2.0 → 3.0.0

package/adapters/vue/components/FdyTable.vue

@@ -76,6 +76,23 @@ const props = withDefaults(defineProps<{
   rowClass?: (row: Row) => string | undefined;
   /** Controlled: row keys whose `row-detail` slot is shown as a full-width row beneath them. */
   expandedKeys?: ReadonlyArray<string | number>;
+  /** Zebra-stripe the body rows. */
+  striped?: boolean;
+  /** Render the checkbox column and the bulk bar. */
+  selectable?: boolean;
+  /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
+   *  still works with nothing wired). */
+  selectedKeys?: ReadonlyArray<string | number>;
+  /** Bulk-bar count, `{n}` substituted. Default `{n} selected`. */
+  selectedText?: string;
+  /** Bulk-bar clear button. Default `Clear`. */
+  clearSelectionText?: string;
+  /** Accessible name of the header checkbox. Default `Select all rows on this page`. */
+  selectAllLabel?: string;
+  /** Accessible name of each row checkbox. Default `Select row`. */
+  selectRowLabel?: string;
+  /** Accessible name of the bulk bar region. Default `Bulk actions`. */
+  bulkLabel?: string;
 }>(), { pager: true });
 
 const emit = defineEmits<{
@@ -90,6 +107,9 @@ const emit = defineEmits<{
   'update:pageSize': [size: number];
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   'row-activate': [row: Row];
+  /** Selection changed, as `rowKey` values. Fires in both modes, so a screen can watch the
+   *  selection without owning it. */
+  'update:selectedKeys': [keys: Array<string | number>];
   /** The processed page of rows (after filter/sort/paginate) plus the total row count, fires in
    *  BOTH modes whenever they change. Lets a consumer render the SAME processed set elsewhere
    *  (a `< md` card list, a "selected" summary, export-to-CSV) without re-deriving the pipeline. */
@@ -262,6 +282,65 @@ function onRowKeydown(e: KeyboardEvent, row: Row): void {
 function isExpanded(row: Row): boolean {
   return props.expandedKeys?.includes(props.rowKey(row)) === true;
 }
+
+/* Selection is keyed by `rowKey`, exactly as `expandedKeys` is, and for the same reason: a key
+ * survives the re-fetch that replaces every row object, an object identity does not. Controlled when
+ * `selectedKeys` is provided, internal otherwise, so the column works with nothing wired. */
+const internalSelectedKeys: Ref<Array<string | number>> = ref([]);
+const selectionControlled: ComputedRef<boolean> = computed((): boolean => props.selectedKeys !== undefined);
+const effectiveSelectedKeys: ComputedRef<ReadonlyArray<string | number>> = computed(
+  (): ReadonlyArray<string | number> =>
+    selectionControlled.value ? (props.selectedKeys as ReadonlyArray<string | number>) : internalSelectedKeys.value,
+);
+const selectedCount: ComputedRef<number> = computed((): number => effectiveSelectedKeys.value.length);
+/* The select-all box acts on the CURRENT PAGE, not on every filtered row: a header checkbox that
+ * silently selects rows the reader cannot see is how bulk deletes go wrong. Keys picked on other
+ * pages are preserved rather than dropped, so paging away and back does not lose them. */
+const pageKeys: ComputedRef<Array<string | number>> = computed((): Array<string | number> =>
+  displayRows.value.map((row: Row): string | number => props.rowKey(row)),
+);
+const allPageSelected: ComputedRef<boolean> = computed((): boolean =>
+  pageKeys.value.length > 0 && pageKeys.value.every((k: string | number): boolean => effectiveSelectedKeys.value.includes(k)),
+);
+const somePageSelected: ComputedRef<boolean> = computed((): boolean =>
+  !allPageSelected.value && pageKeys.value.some((k: string | number): boolean => effectiveSelectedKeys.value.includes(k)),
+);
+
+/* Always emits, controlled or not — the same call the `update:pageSize` control makes, and for the
+ * same reason: a screen that only wants to WATCH the selection (a summary line, an export button)
+ * should not have to take ownership of it to hear about it. */
+function setSelection(keys: Array<string | number>): void {
+  if (!selectionControlled.value) internalSelectedKeys.value = keys;
+  emit('update:selectedKeys', keys);
+}
+function isSelected(row: Row): boolean {
+  return effectiveSelectedKeys.value.includes(props.rowKey(row));
+}
+function toggleRow(row: Row, checked: boolean): void {
+  const key: string | number = props.rowKey(row);
+  const next: Array<string | number> = effectiveSelectedKeys.value.filter((k: string | number): boolean => k !== key);
+  if (checked) next.push(key);
+  setSelection(next);
+}
+function toggleAllOnPage(checked: boolean): void {
+  const onPage: Set<string | number> = new Set(pageKeys.value);
+  const offPage: Array<string | number> = effectiveSelectedKeys.value.filter(
+    (k: string | number): boolean => !onPage.has(k),
+  );
+  setSelection(checked ? offPage.concat(pageKeys.value) : offPage);
+}
+function clearSelection(): void {
+  setSelection([]);
+}
+function selectedLabel(n: number): string {
+  return (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+}
+
+/* The checkbox column widens every full-width row (loading, empty, row detail) by one. Deriving it
+ * once is what keeps a later column change from leaving one of the three behind. */
+const colSpan: ComputedRef<number> = computed((): number =>
+  props.columns.length + (props.selectable === true ? 1 : 0),
+);
 </script>
 
 <template>
@@ -270,10 +349,38 @@ function isExpanded(row: Row): boolean {
       <slot name="toolbar" />
     </div>
 
+    <div
+      v-if="selectable"
+      class="fdy-table-bulkbar"
+      :hidden="selectedCount === 0"
+      role="region"
+      :aria-label="bulkLabel ?? 'Bulk actions'"
+    >
+      <span class="fdy-table-bulkbar__count" aria-live="polite">{{ selectedLabel(selectedCount) }}</span>
+      <span class="fdy-table-bulkbar__spacer"></span>
+      <div class="fdy-table-bulkbar__actions">
+        <slot name="bulk-actions" :keys="effectiveSelectedKeys" :clear="clearSelection" />
+        <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--sm" @click="clearSelection">
+          {{ clearSelectionText ?? 'Clear' }}
+        </button>
+      </div>
+    </div>
+
     <div class="fdy-table-scroll">
-      <table class="fdy-table" :aria-label="ariaLabel">
+      <table class="fdy-table" :class="{ 'fdy-table--striped': striped }" :aria-label="ariaLabel">
         <thead>
           <tr>
+            <th v-if="selectable" class="fdy-table__selcol" scope="col">
+              <input
+                type="checkbox"
+                class="fdy-checkbox"
+                data-fdy-select-all
+                :checked="allPageSelected"
+                :indeterminate.prop="somePageSelected"
+                :aria-label="selectAllLabel ?? 'Select all rows on this page'"
+                @change="toggleAllOnPage(($event.target as HTMLInputElement).checked)"
+              >
+            </th>
             <th v-for="col in columns" :key="col.key" scope="col" :style="alignStyle(col)" :aria-sort="ariaSortOf(col)">
               <button
                 v-if="col.sortable"
@@ -295,10 +402,10 @@ function isExpanded(row: Row): boolean {
         </thead>
         <tbody>
           <tr v-if="loading">
-            <td :colspan="columns.length" class="fdy-table__state" role="status">Loading…</td>
+            <td :colspan="colSpan" class="fdy-table__state" role="status">Loading…</td>
           </tr>
           <tr v-else-if="displayRows.length === 0">
-            <td :colspan="columns.length" class="fdy-table__state">
+            <td :colspan="colSpan" class="fdy-table__state">
               <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
@@ -308,15 +415,29 @@ function isExpanded(row: Row): boolean {
                 :class="rowClasses(row)"
                 :tabindex="rowActivatable ? 0 : undefined"
                 :aria-expanded="$slots['row-detail'] ? (isExpanded(row) ? 'true' : 'false') : undefined"
+                :aria-selected="selectable ? (isSelected(row) ? 'true' : 'false') : undefined"
                 @click="onRowClick(row)"
                 @keydown="onRowKeydown($event, row)"
               >
+                <td v-if="selectable" class="fdy-table__selcol">
+                  <!-- `.stop`: without it, ticking a checkbox in an activatable row also fires
+                       `row-activate`, so selecting a row would navigate away from it. -->
+                  <input
+                    type="checkbox"
+                    class="fdy-checkbox"
+                    data-fdy-row-select
+                    :checked="isSelected(row)"
+                    :aria-label="selectRowLabel ?? 'Select row'"
+                    @click.stop
+                    @change="toggleRow(row, ($event.target as HTMLInputElement).checked)"
+                  >
+                </td>
                 <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
                   <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
                 </td>
               </tr>
               <tr v-if="$slots['row-detail'] && isExpanded(row)" class="fdy-table__detailrow">
-                <td :colspan="columns.length"><slot name="row-detail" :row="row" /></td>
+                <td :colspan="colSpan"><slot name="row-detail" :row="row" /></td>
               </tr>
             </template>
           </template>

package/dist/freeday-app-shell.js

@@ -60,7 +60,13 @@
 
     function isOverlayOpen() { return app.classList.contains('fdy-app--nav-open'); }
     function isCollapsed() { return app.classList.contains('fdy-app--nav-collapsed'); }
-    function navVisible() { return mqWide.matches ? !isCollapsed() : isOverlayOpen(); }
+    /* Whether the nav FLOATS. Two ways to be true, and only one of them is the viewport: below the
+       breakpoint it is off-canvas by definition, and above it `--nav-overlay` says the app chose to
+       float a nav that could have been a column. Everything downstream — which class means visible,
+       what the toggle does, whether the content goes inert — asks this instead of the media query,
+       so overlay mode reuses the drawer's whole code path rather than growing a second one. */
+    function isOverlayMode() { return !mqWide.matches || app.classList.contains('fdy-app--nav-overlay'); }
+    function navVisible() { return isOverlayMode() ? isOverlayOpen() : !isCollapsed(); }
 
     /* aria-expanded answers "is the nav showing?" in BOTH modes, the two state classes are the
        kit's business, not the reader's. */
@@ -68,7 +74,7 @@
       var visible = navVisible();
       toggle.setAttribute('aria-expanded', String(visible));
       setInert(sidebar, !visible);
-      setInert(content, !mqWide.matches && visible);
+      setInert(content, isOverlayMode() && visible);
       /* Announce only real changes. The first sync() runs at init to describe the state the markup
          arrived in, which is not something a host asked for and must not look like one. */
       if (lastVisible !== null && visible !== lastVisible) {
@@ -106,7 +112,7 @@
     }
 
     toggle.addEventListener('click', function () {
-      if (mqWide.matches) {
+      if (!isOverlayMode()) {
         app.classList.toggle('fdy-app--nav-collapsed');
         sync();
       } else if (isOverlayOpen()) {
@@ -154,7 +160,10 @@
        content inert forever: the panel becomes a static column again, and the page it is covering
        can no longer be clicked or read. */
     mqWide.addEventListener('change', function () {
-      if (mqWide.matches && isOverlayOpen()) close(false);
+      /* Only when the panel stops floating. In overlay MODE it floats at every width, so widening
+         must leave an open panel exactly as it is — closing it there would be the shell overruling
+         a reader who never asked for anything. */
+      if (mqWide.matches && !isOverlayMode() && isOverlayOpen()) close(false);
       else sync();
     });
 
@@ -164,9 +173,14 @@
        own state needs to drive this without reaching for the class names the kit reserves. */
     app._fdyAppShell = {
       isVisible: navVisible,
+      /* Re-read the DOM and reconcile `inert` + `aria-expanded`. Needed when something OUTSIDE the
+         enhancer changes what the state classes mean — switching `--nav-overlay` on or off does
+         exactly that, because it moves the answer to "is the nav visible?" from `--nav-collapsed`
+         to `--nav-open`. Without this a mode switch leaves a visible sidebar marked inert. */
+      refresh: sync,
       setVisible: function (visible) {
         if (visible === navVisible()) return;
-        if (mqWide.matches) {
+        if (!isOverlayMode()) {
           app.classList.toggle('fdy-app--nav-collapsed', !visible);
           sync();
         } else if (visible) {
@@ -203,5 +217,9 @@
     isVisible: function (root) {
       return !!(root && root._fdyAppShell && root._fdyAppShell.isVisible());
     },
+    /* Call after changing `--nav-overlay` from outside; see the note on the handle above. */
+    refresh: function (root) {
+      if (root && root._fdyAppShell) root._fdyAppShell.refresh();
+    },
   };
 })();

package/dist/freeday-busy.js

@@ -0,0 +1,168 @@
+/* Freeday, busy overlay (optional, zero-dependency).
+ *
+ * Freeday.busy({ caption, delay, mark })  block the screen while an operation runs
+ * Freeday.idle()                          release it
+ *
+ * Imperative on purpose, like Freeday.toast(): a component API invites two instances, and two
+ * blocking overlays with two captions is the failure this exists to prevent. A second busy() while
+ * one is up REPLACES the caption rather than stacking.
+ *
+ *   caption  what is happening. Announced politely, so make it a sentence a reader would want read
+ *            out, not a spinner label. Omitted, it falls back to the kit default, which a page
+ *            overrides once with `data-fdy-text-caption` on <html>.
+ *   delay    ms to wait before it appears (default 120; 0 shows immediately). An operation that
+ *            finishes in 80ms should never flash a scrim — that reads as a glitch, not as progress.
+ *   mark     an Element to use instead of the default spinner. Element only, never an HTML string:
+ *            a string here would be an injection point in every app that passed user text through.
+ *
+ * Not a dialog. Interaction is removed with `inert` on everything else, so there is nothing to trap
+ * focus against and nothing to dismiss. Focus is parked on the panel and given back on idle(),
+ * because the element it was on is inert by then and the browser would otherwise drop it to <body>.
+ */
+(function () {
+  'use strict';
+
+  var DEFAULT_DELAY = 120;
+
+  var TEXT = {
+    caption: 'Working…'
+  };
+  /* The overlay has no root of its own to carry an override — it is created, not hydrated — so the
+     lookup goes to <html>, the one element every page has before this runs. Kebab-cased for the
+     same reason as everywhere else: HTML lowercases attribute names, so a camelCase key could only
+     ever be written run-together and the override would fail silently. */
+  function textOf(key) {
+    var root = document.documentElement;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    var custom = kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+    return custom != null && custom !== '' ? custom : TEXT[key];
+  }
+
+  var node = null;
+  var showTimer = null;
+  var inerted = [];
+  var returnFocusTo = null;
+
+  function build() {
+    var el = document.createElement('div');
+    el.className = 'fdy-busy';
+    el.setAttribute('popover', 'manual');
+    el.setAttribute('aria-busy', 'true');
+    el.tabIndex = -1;
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-busy__panel';
+
+    var mark = document.createElement('div');
+    mark.className = 'fdy-busy__mark';
+    // aria-hidden: the caption below is the message. A second announcement from the spinner's own
+    // role="status" would say "busy" twice and name nothing.
+    mark.setAttribute('aria-hidden', 'true');
+    mark.appendChild(defaultMark());
+
+    var caption = document.createElement('p');
+    caption.className = 'fdy-busy__caption';
+    // role="status" rather than a dialog role: this reports a state, it does not ask a question.
+    caption.setAttribute('role', 'status');
+
+    panel.appendChild(mark);
+    panel.appendChild(caption);
+    el.appendChild(panel);
+    return el;
+  }
+
+  function defaultMark() {
+    var spinner = document.createElement('span');
+    spinner.className = 'fdy-spinner fdy-spinner--lg';
+    return spinner;
+  }
+
+  /** inert everything else, remembering ONLY what we set so an app's own inert is never cleared. */
+  function block(on) {
+    var i;
+    if (on) {
+      var kids = document.body.children;
+      for (i = 0; i < kids.length; i++) {
+        var child = kids[i];
+        if (child === node || child.hasAttribute('inert')) continue;
+        child.setAttribute('inert', '');
+        inerted.push(child);
+      }
+      return;
+    }
+    for (i = 0; i < inerted.length; i++) inerted[i].removeAttribute('inert');
+    inerted = [];
+  }
+
+  function isOpen() {
+    return node !== null && node.classList.contains('is-open');
+  }
+
+  function setCaption(text) {
+    node.querySelector('.fdy-busy__caption').textContent = text;
+  }
+
+  function setMark(el) {
+    var slot = node.querySelector('.fdy-busy__mark');
+    while (slot.firstChild) slot.removeChild(slot.firstChild);
+    slot.appendChild(el instanceof Element ? el : defaultMark());
+  }
+
+  function show(opts) {
+    showTimer = null;
+    setCaption(opts.caption == null ? textOf('caption') : String(opts.caption));
+    if (opts.mark !== undefined) setMark(opts.mark);
+
+    returnFocusTo = document.activeElement;
+    document.body.appendChild(node);
+    node.classList.add('is-open');
+    // Top layer, so it also covers an open <dialog>. Where the API is missing the z-index in
+    // busy.css is the fallback; it cannot clear a modal, and that is stated in COMPONENTS.md.
+    if (typeof node.showPopover === 'function') {
+      try { node.showPopover(); } catch (e) { /* already open, or not connected yet */ }
+    }
+    block(true);
+    node.focus();
+  }
+
+  function busy(options) {
+    var opts = options || {};
+    if (node === null) node = build();
+
+    // Already up: this is a second owner talking. Update what it says, do not stack.
+    if (isOpen()) {
+      if (opts.caption != null) setCaption(String(opts.caption));
+      if (opts.mark !== undefined) setMark(opts.mark);
+      return node;
+    }
+
+    var delay = opts.delay == null ? DEFAULT_DELAY : Number(opts.delay);
+    if (showTimer !== null) clearTimeout(showTimer);
+    if (delay > 0) showTimer = setTimeout(function () { show(opts); }, delay);
+    else show(opts);
+    return node;
+  }
+
+  function idle() {
+    // Cancels a pending show too: an operation that beat the delay must leave nothing behind.
+    if (showTimer !== null) { clearTimeout(showTimer); showTimer = null; }
+    if (node === null || !isOpen()) return;
+
+    block(false);
+    if (typeof node.hidePopover === 'function') {
+      try { node.hidePopover(); } catch (e) { /* was never in the top layer */ }
+    }
+    node.classList.remove('is-open');
+    if (node.parentNode !== null) node.parentNode.removeChild(node);
+
+    // Give focus back to whatever had it, now that its ancestor is no longer inert.
+    if (returnFocusTo !== null && typeof returnFocusTo.focus === 'function' && returnFocusTo.isConnected) {
+      returnFocusTo.focus();
+    }
+    returnFocusTo = null;
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.busy = busy;
+  window.Freeday.idle = idle;
+})();

package/dist/freeday-stepper.js

@@ -11,7 +11,9 @@
  *     <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).
+ * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step), and a
+ * cancelable "fdy-step-before-change" {from, to, waitFor} that a guard refuses with
+ * preventDefault() or defers by assigning a promise to detail.waitFor.
  */
 (function () {
   'use strict';
@@ -90,14 +92,62 @@
       render();
     }
 
+    /* Leaving a step is REFUSABLE, because a wizard whose Next cannot be stopped is a wizard that
+     * validates nothing. Two ways to refuse, and the second is why an event alone was not enough:
+     *
+     *   sync   handler calls ev.preventDefault()      — the answer is already known
+     *   async  handler sets ev.detail.waitFor = promise — the answer is a server round-trip away
+     *
+     * Resolving to `false` refuses; anything else advances, so a handler that forgets to return is
+     * not read as a rejection. HOW validity is decided stays entirely with the app: the kit has no
+     * opinion about form libraries and this is the line that keeps it that way. */
+    var deciding = false;
+
+    function lock(on) {
+      deciding = on;
+      var list = root.querySelector('.fdy-stepper');
+      if (list) { if (on) list.setAttribute('aria-busy', 'true'); else list.removeAttribute('aria-busy'); }
+      if (prevBtn) prevBtn.disabled = on || active === 0;
+      if (nextBtn) nextBtn.disabled = on;
+    }
+
+    function request(to, onAllowed) {
+      if (deciding) return;
+      var ev = new CustomEvent('fdy-step-before-change', {
+        bubbles: true,
+        cancelable: true,
+        detail: { from: active, to: to, waitFor: null },
+      });
+      root.dispatchEvent(ev);
+      if (ev.defaultPrevented) return;
+
+      var pending = ev.detail.waitFor;
+      if (pending === null || typeof pending.then !== 'function') { onAllowed(); return; }
+
+      lock(true);
+      pending.then(
+        function (ok) { lock(false); if (ok !== false) onAllowed(); },
+        // A guard that THREW decided nothing, so it must not advance. Staying put with the nav
+        // released is the only safe reading; the app's own error handling reports the failure.
+        function () { lock(false); },
+      );
+    }
+
     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 }));
+      if (active < steps.length - 1) request(active + 1, function () { go(active + 1); });
+      else request(active + 1, function () { 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); });
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        if (i > maxReached) return;
+        // Going BACK is always allowed — nothing is being committed. Jumping forward to a step
+        // already reached still leaves the current one behind, so it asks the guard like Next does.
+        if (i <= active) go(i);
+        else request(i, function () { go(i); });
+      });
     });
 
     render();