@sit-onyx/headless 0.7.1-dev-20260316075404 → 0.7.1

package/dist/composables/dataGrid/createDataGrid.d.ts

@@ -1,8 +1,8 @@
 import { MaybeRefOrGetter, Ref } from 'vue';
 type RequestLazyLoad = (colIndex: number, rowIndex: number) => Promise<void>;
 type CellIdentifier = {
-    rowId: string;
-    colKey: string;
+    rowId: PropertyKey;
+    colKey: PropertyKey;
 };
 export type LazyOptions<Lazy extends boolean> = Lazy extends true ? {
     lazy: MaybeRefOrGetter<{
@@ -29,7 +29,7 @@ export type CreateDataGridOptions<Lazy extends boolean> = {
      */
     multiselectable?: boolean;
     loading?: MaybeRefOrGetter<boolean>;
-    selectedCell?: Ref<CellIdentifier>;
+    selectedCell?: Ref<CellIdentifier | undefined>;
 } & LazyOptions<Lazy>;
 export type TrOptions<Lazy extends boolean> = {
     rowId: PropertyKey;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './composables/calendar/createCalendar.js';
 export * from './composables/comboBox/createComboBox.js';
+export * from './composables/dataGrid/createDataGrid.js';
 export * from './composables/helpers/useGlobalListener.js';
 export * from './composables/helpers/useOutsideClick.js';
 export * from './composables/listbox/createListbox.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { shallowRef, computed, toValue, ref, watch, nextTick, reactive, onBeforeMount, watchEffect, onBeforeUnmount, unref, useId, toRef } from "vue";
+import { shallowRef, computed, toValue, ref, watch, nextTick, reactive, onBeforeMount, watchEffect, onBeforeUnmount, unref, useId, toRef, onMounted } from "vue";
 const createBuilder = (builder) => builder;
 function createElRef() {
   const elementRef = shallowRef(null);
@@ -747,6 +747,247 @@ const createComboBox = createBuilder(
     };
   }
 );
+const useAllSettled = (cb) => {
+  const active = ref(false);
+  const allPromises = [];
+  let latestPromise = Promise.resolve();
+  const add = (promise) => {
+    active.value = true;
+    allPromises.push(promise);
+    const newAllSettled = Promise.allSettled(allPromises).then(() => {
+      if (newAllSettled === latestPromise) {
+        active.value = false;
+        allPromises.splice(0, allPromises.length);
+      }
+    });
+    latestPromise = newAllSettled;
+  };
+  return { add, active };
+};
+const useLastSettled = (cb) => {
+  const active = ref(false);
+  let lastId = -1;
+  const add = (promise) => {
+    const promiseId = ++lastId;
+    active.value = true;
+    const onFinally = (success) => (resolved) => {
+      if (promiseId === lastId) {
+        active.value = false;
+        if (success) {
+          cb(success, resolved);
+        } else {
+          cb(success);
+        }
+      }
+    };
+    promise.then(onFinally(true)).catch(onFinally(false));
+  };
+  const cancel = () => {
+    active.value = false;
+    lastId++;
+  };
+  return { active, add, cancel };
+};
+const COL_KEY_DATA_ATTR = "data-onyx-col-key";
+const COL_INDEX_ARIA_ATTR = "aria-colindex";
+const ROW_ID_DATA_ATTR = "data-onyx-row-id";
+const ROW_INDEX_ARIA_ATTR = "aria-rowindex";
+const StaticResolver = {
+  mapCellToIndex: (cell) => Array.from(cell.closest("tr")?.cells ?? []).indexOf(cell),
+  mapRowToIndex: (row) => Array.from(row.closest("table")?.rows ?? []).indexOf(row),
+  resolveCell: async (cellIndex, rowIndex, table) => table.rows.item(rowIndex)?.cells.item(cellIndex),
+  getTotalRows: (table) => table.rows.length,
+  getTotalCols: (table) => table.rows.item(0)?.cells.length ?? 0
+};
+const LazyResolverFactory = ({
+  rows,
+  cols,
+  requestLazyLoad
+}) => ({
+  mapCellToIndex: (cell) => Number(cell.getAttribute(COL_INDEX_ARIA_ATTR)) - 1,
+  mapRowToIndex: (row) => Number(row.getAttribute(ROW_INDEX_ARIA_ATTR)) - 1,
+  resolveCell: async (cellIndex, rowIndex, table) => {
+    const queryCell = () => table.querySelector(
+      `*[${ROW_INDEX_ARIA_ATTR}="${rowIndex + 1}"] *[${COL_INDEX_ARIA_ATTR}="${cellIndex + 1}"]`
+    );
+    let cell = queryCell();
+    if (cell) {
+      return cell;
+    }
+    await requestLazyLoad(cellIndex, rowIndex);
+    cell = queryCell();
+    if (cell) {
+      return cell;
+    }
+    throw new Error(
+      `Table cell with row index "${rowIndex}" and column index "${cellIndex}" was not found after requested lazy loading and is unable to be focused!`
+    );
+  },
+  getTotalRows: () => toValue(rows),
+  getTotalCols: () => toValue(cols)
+});
+const createDataGrid = createBuilder(
+  (options) => {
+    const tableElement = createElRef();
+    const lazy = options.lazy && toRef(options.lazy);
+    const busy = computed(() => toValue(options.loading) ?? busySet.active.value);
+    const resolver = lazy ? LazyResolverFactory({
+      cols: () => lazy.value.totalCols,
+      rows: () => lazy.value.totalRows,
+      requestLazyLoad: lazy.value.requestLazyLoad
+    }) : StaticResolver;
+    const labelId = useId();
+    const selectedCell = options.selectedCell || ref();
+    const selectedCellEl = createElRef();
+    const focusQueue = useLastSettled((success, cell) => {
+      if (success) {
+        cell?.focus();
+      }
+    });
+    const busySet = useAllSettled();
+    const findFirstCell = () => tableElement.value?.querySelector?.(
+      `[${ROW_ID_DATA_ATTR}] [${COL_KEY_DATA_ATTR}]`
+    );
+    const setSelected = (element) => {
+      const colKey = element.closest(`[${COL_KEY_DATA_ATTR}]`)?.getAttribute(COL_KEY_DATA_ATTR);
+      const rowId = element.closest(`[${ROW_ID_DATA_ATTR}]`)?.getAttribute(ROW_ID_DATA_ATTR);
+      if (colKey && rowId) {
+        selectedCell.value = {
+          rowId,
+          colKey
+        };
+      }
+    };
+    const ensureTabTarget = () => {
+      if (selectedCell.value && selectedCellEl.value?.isConnected) {
+        return;
+      }
+      const firstCell = findFirstCell();
+      if (firstCell) {
+        setSelected(firstCell);
+      }
+    };
+    let mutationObserver;
+    onMounted(() => {
+      ensureTabTarget();
+      mutationObserver = new MutationObserver(ensureTabTarget);
+      watch(
+        tableElement,
+        () => {
+          if (!tableElement.value) {
+            return;
+          }
+          mutationObserver?.disconnect();
+          mutationObserver?.observe(tableElement.value, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["value"]
+          });
+        },
+        { immediate: true }
+      );
+    });
+    onBeforeUnmount(() => {
+      mutationObserver?.disconnect();
+    });
+    const onFocusin = (event) => {
+      setSelected(event.target);
+      focusQueue.cancel();
+    };
+    const onKeydown = (event) => {
+      const target = event.target;
+      const cellElement = target.closest("td, th");
+      const rowElement = target.closest("tr");
+      const tableElement2 = target.closest("table");
+      if (!cellElement || !rowElement || !tableElement2) {
+        return;
+      }
+      const { getTotalRows, getTotalCols, mapRowToIndex, mapCellToIndex, resolveCell } = resolver;
+      const colIndex = mapCellToIndex(cellElement);
+      const rowIndex = mapRowToIndex(rowElement);
+      const totalRows = getTotalRows(tableElement2);
+      const totalCols = getTotalCols(tableElement2);
+      let newColIndex = colIndex;
+      let newRowIndex = rowIndex;
+      if (wasKeyPressed(event, { ctrlKey: true, key: "Home" })) {
+        newColIndex = 0;
+        newRowIndex = 0;
+      } else if (wasKeyPressed(event, { ctrlKey: true, key: "End" })) {
+        newColIndex = totalCols === "unknown" ? Infinity : totalCols - 1;
+        newRowIndex = totalRows === "unknown" ? Infinity : totalRows - 1;
+      } else if (wasKeyPressed(event, "ArrowUp")) {
+        newRowIndex = rowIndex - 1;
+      } else if (wasKeyPressed(event, "ArrowDown")) {
+        newRowIndex = rowIndex + 1;
+      } else if (wasKeyPressed(event, "ArrowLeft")) {
+        newColIndex = colIndex - 1;
+      } else if (wasKeyPressed(event, "ArrowRight")) {
+        newColIndex = colIndex + 1;
+      } else if (wasKeyPressed(event, "Home")) {
+        newColIndex = 0;
+      } else if (wasKeyPressed(event, "End")) {
+        newColIndex = totalCols === "unknown" ? Infinity : totalCols - 1;
+      } else {
+        return;
+      }
+      event.preventDefault();
+      const maxRows = totalRows === "unknown" ? Infinity : totalRows - 1;
+      newRowIndex = Math.max(Math.min(newRowIndex, maxRows), 0);
+      const maxCols = totalCols === "unknown" ? Infinity : totalCols - 1;
+      newColIndex = Math.max(Math.min(newColIndex, maxCols), 0);
+      (async () => {
+        const promiseResolveCell = resolveCell(newColIndex, newRowIndex, tableElement2);
+        focusQueue.add(promiseResolveCell);
+        busySet.add(promiseResolveCell);
+      })();
+    };
+    return {
+      elements: {
+        label: {
+          id: labelId
+        },
+        table: computed(
+          () => ({
+            ref: tableElement,
+            onFocusin,
+            onKeydown,
+            role: "grid",
+            "aria-busy": busy.value,
+            "aria-labelledby": labelId,
+            "aria-rowcount": lazy?.value.totalRows === "unknown" ? -1 : lazy?.value.totalRows,
+            "aria-colcount": lazy?.value.totalCols === "unknown" ? -1 : lazy?.value.totalCols
+          })
+        ),
+        tr: ({ rowId, rowIndex }) => ({
+          [ROW_ID_DATA_ATTR]: rowId.toString(),
+          "aria-rowindex": rowIndex == void 0 ? void 0 : rowIndex + 1,
+          role: "row"
+        }),
+        td: computed(() => ({ rowId, colKey, colIndex }) => {
+          const isSelected = colKey.toString() === selectedCell.value?.colKey.toString() && rowId.toString() === selectedCell.value?.rowId.toString();
+          return {
+            tabindex: isSelected ? "0" : "-1",
+            ref: isSelected ? selectedCellEl : void 0,
+            [COL_KEY_DATA_ATTR]: colKey.toString(),
+            // TODO: handle symbols
+            "aria-colindex": colIndex == void 0 ? void 0 : colIndex + 1,
+            role: "cell"
+          };
+        })
+      },
+      state: {
+        /**
+         * Indicates that the data grid expects a content change soon, e.g. because more or other data is loaded.
+         * If `loading` is passed in via the options, this will mirror its value.
+         * Otherwise it will be dynamically set based on the running state of the `requestLazyLoad` promises.
+         */
+        busy
+      },
+      internals: {}
+    };
+  }
+);
 const createMenuButton = createBuilder((options) => {
   const rootId = useId();
   const menuId = useId();
@@ -1426,6 +1667,7 @@ export {
   _unstableCreateCalendar,
   createBuilder,
   createComboBox,
+  createDataGrid,
   createElRef,
   createListbox,
   createMenuButton,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.7.1-dev-20260316075404",
+  "version": "0.7.1",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",