@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/contact-form.d.ts

@@ -0,0 +1,5 @@
+// File: packages/ui/src/contact-form.d.ts
+// Types for the contact form script.
+
+export function initContactForm(form: HTMLFormElement): void;
+export function initContactForms(scope?: ParentNode): void;

package/dist/contact-form.js

@@ -0,0 +1,138 @@
+// File: packages/ui/src/contact-form.js
+// Map: messages -> field errors -> busy -> send (fetch, JSON) -> result / errors -> "send another" -> boot
+// Contact form without a page reload. The form keeps working without this script (POST + redirect); with it, it sends
+// with fetch and shows the result or the errors in place.
+// Protocol: POST the FormData to form.action with "Accept: application/json"; the server answers
+// { sent: true } (200) or { sent: false, errors: { field: "message", form?: "message" } } (422); a list per field
+// (Laravel: { errors: { email: ["…"] } }) shows its first message.
+// Markup (data attributes, all inside [data-contact-root] or the document):
+//   form[data-contact-form]        the form (novalidate); [data-contact-submit] its button, [data-contact-label] the text
+//   [data-contact-body]            what hides after sending (title, intro, alert, form)
+//   [data-contact-success]         the .oc-result that shows after sending (hidden, role="status", tabindex="-1")
+//   [data-contact-alert]           the .oc-alert above the form (hidden), for errors.form or the general message
+//   [data-contact-again]           the "Send another message" link or button in the result
+// Field errors: aria-invalid="true" + aria-describedby on the field and <p class="oc-field-error" id="err-<name>">.
+// Texts: data-busy-label, data-error-fields, data-error-network on the form (English by default).
+
+const TEXT = {
+  busy: "Sending…",
+  fields: "Please check the fields in red.",
+  network: "Sending failed. Check your connection, or mail or call us directly.",
+};
+
+function clearFieldError(field) {
+  field.removeAttribute("aria-invalid");
+  field.removeAttribute("aria-describedby");
+  field.ownerDocument.getElementById(`err-${field.name}`)?.remove();
+}
+
+function setFieldError(field, message) {
+  const error = field.ownerDocument.createElement("p");
+  error.className = "oc-field-error";
+  error.id = `err-${field.name}`;
+  error.textContent = message;
+  field.setAttribute("aria-invalid", "true");
+  field.setAttribute("aria-describedby", error.id);
+  field.insertAdjacentElement("afterend", error);
+}
+
+/** Send one form[data-contact-form] with fetch and show the result or the errors in place. */
+export function initContactForm(form) {
+  if (!form || form.dataset.ocBound !== undefined || typeof fetch === "undefined") return;
+  form.dataset.ocBound = "";
+  const root = form.closest("[data-contact-root]") || form.ownerDocument;
+  const body = root.querySelector("[data-contact-body]");
+  const success = root.querySelector("[data-contact-success]");
+  const alertBox = root.querySelector("[data-contact-alert]");
+  const button = form.querySelector("[data-contact-submit]") || form.querySelector('[type="submit"]');
+  const label = form.querySelector("[data-contact-label]");
+  const idleLabel = label?.textContent ?? "";
+  const text = {
+    busy: form.dataset.busyLabel || TEXT.busy,
+    fields: form.dataset.errorFields || TEXT.fields,
+    network: form.dataset.errorNetwork || TEXT.network,
+  };
+
+  const showAlert = (message) => {
+    if (!alertBox) return;
+    alertBox.textContent = message;
+    alertBox.hidden = message === "";
+  };
+
+  const setBusy = (busy) => {
+    if (button) button.disabled = busy;
+    form.setAttribute("aria-busy", String(busy));
+    if (label) label.textContent = busy ? text.busy : idleLabel;
+  };
+
+  // A field you change loses its error at once.
+  form.addEventListener("input", (event) => {
+    if (event.target.name) clearFieldError(event.target);
+  });
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    form.querySelectorAll("[aria-invalid]").forEach(clearFieldError);
+    showAlert("");
+    setBusy(true);
+    try {
+      const response = await fetch(form.action, {
+        method: (form.getAttribute("method") || "POST").toUpperCase(),
+        body: new FormData(form),
+        headers: { Accept: "application/json" },
+      });
+      const result = await response.json();
+      if (result.sent) {
+        form.reset();
+        if (body) body.hidden = true;
+        if (success) {
+          success.hidden = false;
+          success.focus({ preventScroll: true });
+          success.scrollIntoView?.({ behavior: "smooth", block: "center" });
+        }
+        form.dispatchEvent(new CustomEvent("oc-contact-sent", { bubbles: true }));
+        return;
+      }
+      // Laravel sends a list per field ({ email: ["…"] }): the first message is shown.
+      const first = (message) => (Array.isArray(message) ? message[0] : message);
+      const errors = result.errors || {};
+      for (const [name, message] of Object.entries(errors)) {
+        const field = form.elements.namedItem(name);
+        if (field instanceof HTMLElement && "name" in field) setFieldError(field, first(message));
+      }
+      showAlert(first(errors.form) || text.fields);
+      (form.querySelector('[aria-invalid="true"]') || alertBox)?.focus?.();
+    } catch {
+      showAlert(text.network);
+    } finally {
+      setBusy(false);
+    }
+  });
+
+  // "Send another message": the form comes back without a reload.
+  root.querySelector("[data-contact-again]")?.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (success) success.hidden = true;
+    if (body) body.hidden = false;
+    form.querySelector("input:not([type=hidden]):not([tabindex='-1']), textarea, select")?.focus();
+  });
+}
+
+/** Bind every contact form under scope. */
+export function initContactForms(scope = document) {
+  scope.querySelectorAll("form[data-contact-form]").forEach(initContactForm);
+}
+
+// Starts on its own as /js/oc-contact-form.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-contact-form") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initContactForms(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/data-table.js

@@ -1,10 +1,11 @@
 // File: packages/ui/src/data-table.js
-// Map: page numbers -> compare -> csv -> row filter -> bind one table (search, sort, pages, columns, resize, drag, trash, bulk) -> boot
-// The list table used in Korrekt and OmniaDesk. Markup stays plain HTML.
+// Map: page numbers -> compare -> csv -> row filter -> bind one table (search, column filters, sort, pages, columns, trash,
+//      bulk, cards) -> boot. Column width and row drag are OmniaUI Pro (data-table-pro.js).
+// The list table for business apps. Markup stays plain HTML.
 // This script adds the behaviour. Excel, PDF and the real delete API stay in the app:
-// listen for oc-datatable-bulk, oc-datatable-reorder, oc-datatable-search and oc-datatable-import.
+// listen for oc-datatable-bulk, oc-datatable-row, oc-datatable-search and oc-datatable-import.
 
-/** Page numbers with ellipses, same window as OmniaDesk (current and last are 1-based). */
+/** Page numbers with ellipses, a window around the current page (current and last are 1-based). */
 export function pageItems(current, last) {
   if (last < 1) return [];
   if (last === 1) return [1];
@@ -110,13 +111,20 @@ export function bindDataTable(root) {
   let query = "";
   let filter = root.querySelector("[data-oc-filter][aria-current='true']")?.dataset.ocFilter
     || (root.querySelector("[data-oc-filter]") ? "active" : "all");
-  let sortKey = "";
-  let sortDir = "asc";
+  // Column filters: a <select data-oc-col-filter="type"> or tab buttons with data-oc-col-filter="type" data-oc-value="…".
+  // A row passes when its cell in that column has that value (data-oc-value or its text); "" means all.
+  const colFilters = new Map();
+  root.querySelectorAll("select[data-oc-col-filter]").forEach((sel) => colFilters.set(sel.dataset.ocColFilter, sel.value));
+  root.querySelectorAll("[data-oc-col-filter][aria-selected='true']").forEach((tab) => colFilters.set(tab.dataset.ocColFilter, tab.dataset.ocValue ?? ""));
+  // aria-sort on a header in the HTML: that column is sorted when the table starts.
+  const sortedTh = [...table.tHead.rows[0].cells].find((th) => th.dataset.ocCol && th.hasAttribute("aria-sort"));
+  let sortKey = sortedTh ? sortedTh.dataset.ocCol : "";
+  let sortDir = sortedTh?.getAttribute("aria-sort") === "descending" ? "desc" : "asc";
   let page = 0;
   let pageSize = Number(pageSelect?.value || root.dataset.pageSize || 15);
   const selected = new Set();
 
-  // Remembered choices from the last visit: page size, density, view, column widths, hidden columns.
+  // Remembered choices from the last visit: page size, density, view, hidden columns.
   const savedSize = readStore(id, "pageSize");
   if (savedSize && pageSelect?.querySelector(`option[value="${savedSize}"]`)) {
     pageSelect.value = String(savedSize);
@@ -124,19 +132,30 @@ export function bindDataTable(root) {
   }
   if (readStore(id, "density") === "compact") root.classList.add("oc-data-table--compact");
   if (readStore(id, "view") === "grid") root.classList.add("oc-data-table--grid");
-  const savedWidths = readStore(id, "widths") || {};
-  for (const th of table.tHead.rows[0].cells) {
-    if (savedWidths[th.dataset.ocCol]) {
-      th.style.width = savedWidths[th.dataset.ocCol];
-      table.classList.add("oc-data-table-table--sized");
-    }
-  }
   const savedCols = readStore(id, "cols") || {};
   root.querySelectorAll("[data-col]").forEach((box) => {
     if (!box.disabled && savedCols[box.dataset.col] != null) box.checked = savedCols[box.dataset.col];
   });
 
   const rows = () => [...tbody.querySelectorAll("[data-oc-row]")];
+  // Move a row to the end without taking it out of the page (Element.moveBefore), so <iconify-icon> and other web
+  // components keep their content; where moveBefore is missing, append and let the icons draw again.
+  // <iconify-icon> empties itself while its row is hidden (another page, another filter) and does not always draw
+  // again when the row comes back: set its icon again so it renders.
+  const redrawIcons = (row) => {
+    row.querySelectorAll("iconify-icon[icon]").forEach((icon) => {
+      if (icon.shadowRoot?.querySelector("svg")) return;
+      const name = icon.getAttribute("icon");
+      icon.removeAttribute("icon");
+      icon.setAttribute("icon", name);
+    });
+  };
+  const moveRow = (row) => {
+    if (tbody.lastElementChild === row) return;
+    if (typeof tbody.moveBefore === "function") { tbody.moveBefore(row, null); return; }
+    tbody.append(row);
+    redrawIcons(row);
+  };
   const textOf = (row) => [...row.cells]
     .filter((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol))
     .map((td) => td.dataset.ocValue || td.textContent)
@@ -145,7 +164,8 @@ export function bindDataTable(root) {
     const td = [...row.cells].find((cell) => cell.dataset.ocCol === key);
     return td ? (td.dataset.ocValue || td.textContent.trim()) : "";
   };
-  const matched = () => rows().filter((row) => rowPasses(row.dataset.ocStatus, filter, textOf(row), query));
+  const passesColumns = (row) => [...colFilters].every(([key, want]) => !want || valueOf(row, key) === want);
+  const matched = () => rows().filter((row) => rowPasses(row.dataset.ocStatus, filter, textOf(row), query) && passesColumns(row));
 
   function paintChecks() {
     for (const row of rows()) {
@@ -202,17 +222,51 @@ export function bindDataTable(root) {
     }
     if (!grid) return;
     const onPage = new Set(list.map((row) => row.dataset.ocKey));
+    const heads = [...table.tHead.rows[0].cells];
+    const hiddenCols = new Set([...root.querySelectorAll("[data-col]:not(:checked)")].map((box) => box.dataset.col));
     grid.replaceChildren();
     for (const row of rows()) {
       if (!onPage.has(row.dataset.ocKey)) continue;
       const card = document.createElement("article");
       card.className = "oc-data-table-card";
       card.dataset.ocKey = row.dataset.ocKey;
-      const title = document.createElement("h3");
+      const cells = [...row.cells];
+      const name = cells.find((td) => td.dataset.ocCol === "name") || cells.find((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol));
+      // Title: the rich name cell (avatar, badge, second line) when there is one, else its text.
+      const title = document.createElement("div");
       title.className = "oc-data-table-card-title";
-      const name = [...row.cells].find((td) => td.dataset.ocCol === "name") || [...row.cells].find((td) => td.dataset.ocCol && !SKIP_COL.has(td.dataset.ocCol));
-      title.textContent = name ? name.textContent.trim() : row.dataset.ocKey;
+      if (name?.querySelector(".oc-data-table-name")) title.append(name.querySelector(".oc-data-table-name").cloneNode(true));
+      else title.textContent = name ? name.textContent.trim() : row.dataset.ocKey;
       card.append(title);
+      // The other visible columns as label / value.
+      const fields = document.createElement("dl");
+      fields.className = "oc-data-table-card-fields";
+      cells.forEach((td, index) => {
+        const col = td.dataset.ocCol;
+        if (!col || td === name || SKIP_COL.has(col) || hiddenCols.has(String(index + 1))) return;
+        const dt = document.createElement("dt");
+        dt.textContent = heads[index]?.textContent.trim() || col;
+        const dd = document.createElement("dd");
+        dd.append(...[...td.childNodes].map((node) => node.cloneNode(true)));
+        if (dd.textContent.trim()) fields.append(dt, dd);
+      });
+      if (fields.childElementCount) card.append(fields);
+      // Row actions (buttons and links; popover ids are not copied).
+      const actions = cells.find((td) => td.dataset.ocCol === "actions");
+      if (actions?.children.length) {
+        const bar = document.createElement("div");
+        bar.className = "oc-data-table-card-actions";
+        const trashed = row.dataset.ocStatus === "deleted";
+        for (const el of actions.querySelectorAll("button, a")) {
+          const when = el.closest("[data-oc-when]")?.dataset.ocWhen;
+          if (when && (when === "deleted") !== trashed) continue;
+          const copy = el.cloneNode(true);
+          copy.removeAttribute("id");
+          copy.removeAttribute("popovertarget");
+          bar.append(copy);
+        }
+        card.append(bar);
+      }
       grid.append(card);
     }
   }
@@ -226,18 +280,23 @@ export function bindDataTable(root) {
       const dir = sortDir === "desc" ? -1 : 1;
       list.sort((a, b) => dir * compareValues(valueOf(a, sortKey), valueOf(b, sortKey), numeric));
       const rest = all.filter((row) => !list.includes(row));
-      for (const row of [...list, ...rest]) tbody.append(row);
+      for (const row of [...list, ...rest]) moveRow(row);
     }
     const last = pageSize > 0 ? Math.max(1, Math.ceil(list.length / pageSize)) : 1;
     if (page > last - 1) page = Math.max(0, last - 1);
     const start = pageSize > 0 ? page * pageSize : 0;
     const visible = new Set((pageSize > 0 ? list.slice(start, start + pageSize) : list));
-    for (const row of all) row.hidden = !visible.has(row);
+    for (const row of all) {
+      const shown = visible.has(row);
+      if (row.hidden && shown) queueMicrotask(() => redrawIcons(row));
+      row.hidden = !shown;
+    }
     if (empty) empty.hidden = list.length !== 0;
     if (summary) {
-      summary.textContent = list.length === 0
-        ? "Showing 0 of 0"
-        : `Showing ${start + 1}–${start + visible.size} of ${list.length}`;
+      // data-oc-summary="Toont {from} t/m {to} van {total} resultaten" translates the line; empty = English.
+      const template = summary.dataset.ocSummary || "Showing {from}–{to} of {total}";
+      const values = { from: list.length ? start + 1 : 0, to: start + visible.size, total: list.length };
+      summary.textContent = template.replace(/\{(from|to|total)\}/g, (_, key) => String(values[key]));
     }
     if (sortSummary) {
       const label = sortKey ? table.querySelector(`th[data-oc-col="${sortKey}"] .oc-table-sort`)?.textContent?.trim() : "";
@@ -301,6 +360,11 @@ export function bindDataTable(root) {
       writeStore(id, "pageSize", pageSize);
       apply();
     }
+    if (target.matches?.("select[data-oc-col-filter]")) {
+      colFilters.set(target.dataset.ocColFilter, target.value);
+      page = 0;
+      apply();
+    }
     if (target.matches?.("[data-col]")) {
       const cols = {};
       root.querySelectorAll("[data-col]").forEach((box) => { cols[box.dataset.col] = box.checked; });
@@ -335,7 +399,10 @@ export function bindDataTable(root) {
   });
 
   root.addEventListener("click", (event) => {
-    const sortBtn = event.target.closest(".oc-table-sort");
+    // The whole header cell sorts, not only its label (wide columns leave a lot of empty cell around the label).
+    const headCell = event.target.closest("thead th");
+    const sortBtn = event.target.closest(".oc-table-sort")
+      || (headCell && !event.target.closest("a, button, input, select, label, .oc-data-table-resize") ? headCell.querySelector(".oc-table-sort") : null);
     if (sortBtn && root.contains(sortBtn)) {
       const th = sortBtn.closest("th");
       if (!th?.dataset.ocCol) return;
@@ -359,6 +426,40 @@ export function bindDataTable(root) {
       apply();
       return;
     }
+    // Per-row actions of a trashed row: data-oc-row-action="restore" or "delete" fires oc-datatable-row { action, key };
+    // in the demo (data-oc-live) restore makes the row active again and delete removes it.
+    const rowBtn = event.target.closest("[data-oc-row-action]");
+    if (rowBtn && root.contains(rowBtn)) {
+      const row = rowBtn.closest("[data-oc-row]");
+      if (!row) return;
+      const action = rowBtn.dataset.ocRowAction;
+      emit("oc-datatable-row", { action, key: row.dataset.ocKey });
+      if (live && action === "restore") row.dataset.ocStatus = "active";
+      if (live && action === "delete") { selected.delete(row.dataset.ocKey); row.remove(); }
+      apply();
+      return;
+    }
+    // The sliders button next to the title shows or hides the filter row.
+    const filtersBtn = event.target.closest("[data-oc-filters-toggle]");
+    if (filtersBtn && root.contains(filtersBtn)) {
+      const row = root.querySelector(".oc-data-table-filters");
+      if (row) {
+        row.hidden = !row.hidden;
+        filtersBtn.setAttribute("aria-expanded", row.hidden ? "false" : "true");
+      }
+      return;
+    }
+    const colTab = event.target.closest("button[data-oc-col-filter]");
+    if (colTab && root.contains(colTab)) {
+      const key = colTab.dataset.ocColFilter;
+      colFilters.set(key, colTab.dataset.ocValue ?? "");
+      root.querySelectorAll(`button[data-oc-col-filter="${key}"]`).forEach((tab) => {
+        tab.setAttribute("aria-selected", tab === colTab ? "true" : "false");
+      });
+      page = 0;
+      apply();
+      return;
+    }
     const viewBtn = event.target.closest("[data-oc-view]");
     if (viewBtn && root.contains(viewBtn)) {
       const mode = viewBtn.dataset.ocView;
@@ -386,12 +487,6 @@ export function bindDataTable(root) {
       exportCsv(null);
       return;
     }
-    if (event.target.closest("[data-oc-reset-widths]")) {
-      for (const th of table.tHead.rows[0].cells) th.style.width = "";
-      table.classList.remove("oc-data-table-table--sized");
-      writeStore(id, "widths", {});
-      return;
-    }
     if (event.target.closest("[data-oc-import]")) {
       root.querySelector("[data-oc-file]")?.click();
       return;
@@ -415,73 +510,15 @@ export function bindDataTable(root) {
     else window.location.href = row.dataset.ocHref;
   });
 
-  // Column resize: drag the handle on the header. Width is remembered per table id.
-  root.addEventListener("pointerdown", (event) => {
-    const handle = event.target.closest(".oc-data-table-resize");
-    if (!handle || !root.contains(handle)) return;
-    const th = handle.closest("th");
-    if (!th) return;
-    event.preventDefault();
-    const startX = event.clientX;
-    const startW = th.getBoundingClientRect().width;
-    const min = Number(th.dataset.ocMin || 64);
-    root.classList.add("is-resizing");
-    table.classList.add("oc-data-table-table--sized");
-    const move = (ev) => {
-      const width = Math.max(min, Math.round(startW + ev.clientX - startX));
-      th.style.width = `${width}px`;
-    };
-    const up = () => {
-      root.classList.remove("is-resizing");
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      const widths = {};
-      for (const head of table.tHead.rows[0].cells) if (head.style.width) widths[head.dataset.ocCol] = head.style.width;
-      writeStore(id, "widths", widths);
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-  });
+  // OmniaUI Pro (data-table-pro.js) changes the rows (drag) and asks the table to show them again.
+  root.addEventListener("oc-datatable-refresh", () => apply());
 
-  // Row drag starts from the grip only, so selecting text in a cell still works.
-  let dragKey = "";
-  root.addEventListener("pointerdown", (event) => {
-    const grip = event.target.closest(".oc-sortable-row-grip");
-    const row = grip?.closest("[data-oc-row]");
-    if (row && root.contains(row)) row.draggable = true;
-  });
-  root.addEventListener("dragstart", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    if (!row?.draggable) return;
-    dragKey = row.dataset.ocKey;
-    row.classList.add("is-dragging", "oc-sortable-row");
-    event.dataTransfer.effectAllowed = "move";
-  });
-  root.addEventListener("dragover", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    if (!row || !dragKey || row.dataset.ocKey === dragKey) return;
-    event.preventDefault();
-    const box = row.getBoundingClientRect();
-    const after = event.clientY > box.top + box.height / 2;
-    tbody.querySelectorAll(".is-drop-before, .is-drop-after").forEach((el) => el.classList.remove("is-drop-before", "is-drop-after"));
-    row.classList.add("oc-sortable-row", after ? "is-drop-after" : "is-drop-before");
-  });
-  root.addEventListener("drop", (event) => {
-    const row = event.target.closest?.("[data-oc-row]");
-    const from = dragKey ? tbody.querySelector(`[data-oc-key="${CSS.escape(dragKey)}"]`) : null;
-    if (!row || !from || row === from) return;
-    event.preventDefault();
-    tbody.insertBefore(from, row.classList.contains("is-drop-after") ? row.nextSibling : row);
-    emit("oc-datatable-reorder", { keys: rows().map((item) => item.dataset.ocKey) });
-    apply();
-  });
-  root.addEventListener("dragend", () => {
-    dragKey = "";
-    for (const row of rows()) {
-      row.draggable = false;
-      row.classList.remove("is-dragging", "is-drop-before", "is-drop-after");
-    }
-  });
+  // Column widths from all rows (every page, also the trash), measured before the first page is shown, so the header
+  // does not jump when sorting or paging brings other rows. Pro column resizing sets its own widths.
+  for (const th of table.tHead.rows[0].cells) {
+    const width = th.getBoundingClientRect().width;
+    if (width && !th.style.width) th.style.minWidth = `${Math.ceil(width)}px`;
+  }
 
   root.querySelectorAll("[data-oc-view]").forEach((btn) => {
     const on = (btn.dataset.ocView === "grid") === root.classList.contains("oc-data-table--grid");
@@ -492,9 +529,9 @@ export function bindDataTable(root) {
   controls.set(root, { apply });
 }
 
-/** Wire every table under scope that is not wired yet. */
+/** Wire every table under scope that is not wired yet (also the data table block: [data-oc-data-table]). */
 export function initDataTables(scope = document) {
-  scope.querySelectorAll(".oc-data-table").forEach((root) => bindDataTable(root));
+  scope.querySelectorAll(".oc-data-table, [data-oc-data-table]").forEach((root) => bindDataTable(root));
 }
 
 // Starts on its own when loaded straight from a <script type="module"> tag: as /js/oc-data-table.js (the docs site,

package/dist/fly.d.ts

@@ -0,0 +1,4 @@
+// File: packages/ui/src/fly.d.ts
+// Types for the fly-in script.
+
+export function initFly(scope?: ParentNode): () => void;

package/dist/fly.js

@@ -0,0 +1,80 @@
+// File: packages/ui/src/fly.js
+// Map: row of a card (index, count) -> start offset -> delay -> observe (once or both ways) -> boot
+// Cards that fly in (.oc-reveal--fly): each card starts from the middle of its row (--oc-fly-x) and flies to its place
+// when it scrolls into view (.is-visible). Adds .oc-fly-ready on <html> first, so without this script, or with
+// "reduce motion", nothing is hidden.
+// Options (CSS custom properties on a card or a parent, and one attribute):
+//   --oc-fly-step: 45px     start offset per column from the middle of the row (instead of the full distance)
+//   --oc-fly-stagger: 90ms  delay per column, so a row lands from left to right
+//   data-oc-fly-repeat      the cards fly out again when they leave the view (both scroll directions)
+
+/** Index of the card in its row (cards with the same top in the same parent) and the number of cards in that row. */
+function rowOf(card) {
+  const top = card.offsetTop;
+  const row = [...(card.parentElement?.children ?? [])].filter((el) => el.classList.contains("oc-reveal--fly") && el.offsetTop === top);
+  return { index: Math.max(0, row.indexOf(card)), count: row.length || 1 };
+}
+
+/** Horizontal distance from the card to the middle of its parent, so the row opens from the center. */
+function flyOffset(card, step, index, count) {
+  if (step) return Math.round(((count - 1) / 2 - index) * step);
+  const box = card.getBoundingClientRect();
+  const parent = card.parentElement?.getBoundingClientRect();
+  if (!parent || !box.width) return 0;
+  return Math.round(parent.left + parent.width / 2 - (box.left + box.width / 2));
+}
+
+/** "90ms", "0.09s" or "45px" -> number (ms or px); 0 when empty. */
+function num(value, unitS = false) {
+  const v = String(value).trim();
+  const n = parseFloat(v);
+  if (!v || Number.isNaN(n)) return 0;
+  return unitS && /\ds$/.test(v) ? n * 1000 : n;
+}
+
+/** Let every .oc-reveal--fly under scope fly in once it comes into view. Returns a function that stops watching. */
+export function initFly(scope = document) {
+  const doc = scope.ownerDocument || scope;
+  const win = doc.defaultView;
+  const cards = [...scope.querySelectorAll(".oc-reveal--fly:not(.is-visible)")];
+  if (!cards.length || !win) return () => {};
+  if (!("IntersectionObserver" in win) || win.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    cards.forEach((c) => c.classList.add("is-visible"));
+    return () => {};
+  }
+  for (const card of cards) {
+    const style = win.getComputedStyle(card);
+    const { index, count } = rowOf(card);
+    card.style.setProperty("--oc-fly-x", `${flyOffset(card, num(style.getPropertyValue("--oc-fly-step")), index, count)}px`);
+    const stagger = num(style.getPropertyValue("--oc-fly-stagger"), true);
+    if (stagger) card.style.setProperty("--oc-fly-delay", `${index * stagger}ms`);
+  }
+  doc.documentElement.classList.add("oc-fly-ready");
+  const io = new win.IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const repeat = entry.target.closest("[data-oc-fly-repeat]");
+      if (entry.isIntersecting) {
+        entry.target.classList.add("is-visible");
+        if (!repeat) io.unobserve(entry.target);
+      } else if (repeat) {
+        entry.target.classList.remove("is-visible");
+      }
+    }
+  }, { rootMargin: "0px 0px -10% 0px", threshold: 0.12 });
+  cards.forEach((c) => io.observe(c));
+  return () => io.disconnect();
+}
+
+// Starts on its own as /js/oc-fly.js (`npx omniaui copy-js`), with ?auto in the URL or data-oc-auto on the tag.
+function autoStart() {
+  if (typeof document === "undefined") return false;
+  const url = String(import.meta.url);
+  if (url.includes("oc-fly") || /[?&]auto(=|&|$)/.test(url)) return true;
+  const file = url.split(/[?#]/)[0];
+  return [...document.querySelectorAll("script[data-oc-auto][src]")].some((s) => s.src.split(/[?#]/)[0] === file);
+}
+if (autoStart()) {
+  const boot = () => initFly(document);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+}

package/dist/form-extras.d.ts

@@ -0,0 +1,11 @@
+// File: packages/ui/src/form-extras.d.ts
+// Types for the date field (ISO week), name card (rename), avatar picker (preview) and quantity (step) helpers.
+
+export function isoWeek(date: Date): { week: number; year: number };
+export function bindDateField(root: HTMLElement): void;
+export function bindNameCard(root: HTMLElement): void;
+export function acceptsFile(file: { type?: string; name?: string } | null | undefined, accept?: string): boolean;
+export function bindAvatarPicker(root: HTMLElement): void;
+export function stepQuantity(value: number, direction: -1 | 1, limits?: { min?: number; max?: number; step?: number }): number;
+export function bindQuantity(root: HTMLElement): void;
+export function initFormExtras(scope?: ParentNode): void;