@fkui/vue-labs 6.24.1 → 6.25.0

package/dist/cjs/index.cjs.js

@@ -3685,6 +3685,131 @@ function normalizeTableColumns(columns) {
     return normalizeTableColumn(column);
   });
 }
+function useTabstop(tableRef, metaRows) {
+  let pendingRowRemoval = false;
+  const renderOptions = vue.ref({
+    fallbackToFirstCell: false,
+    focus: false
+  });
+  function fallbackToFirstCell(newRows, oldRows, focus) {
+    logic.assertRef(tableRef);
+    const newFirstRowOldIndex = oldRows.findIndex((it) => it.key === newRows[0].key);
+    if (newFirstRowOldIndex > -1) {
+      const target = getCellTarget(tableRef.value, newFirstRowOldIndex + 1, 0);
+      activateCell(target, {
+        focus
+      });
+    } else {
+      renderOptions.value.focus = focus;
+      renderOptions.value.fallbackToFirstCell = true;
+    }
+  }
+  vue.watch(metaRows, (newRows, oldRows) => {
+    const tabFallback = pendingRowRemoval ? "sticky" : "first-cell";
+    pendingRowRemoval = false;
+    logic.assertRef(tableRef);
+    const oldTabstopElement = tableRef.value.querySelector(`[tabindex="0"]`);
+    logic.assertSet(oldTabstopElement);
+    const oldTabstopFocused = oldTabstopElement === document.activeElement;
+    if (oldTabstopElement.closest("th")) {
+      return;
+    }
+    if (oldRows.length === 0 || newRows.length === 0) {
+      renderOptions.value.fallbackToFirstCell = true;
+      renderOptions.value.focus = oldTabstopFocused;
+      return;
+    }
+    const oldTabstopTd = oldTabstopElement.closest("td");
+    logic.assertSet(oldTabstopTd);
+    const oldTabstopTr = oldTabstopTd.parentElement;
+    const oldTabstopRowKey = oldRows[oldTabstopTr.rowIndex - 1].key;
+    const isBeingRemoved = !newRows.some((it) => it.key === oldTabstopRowKey);
+    if (oldTabstopFocused && !isBeingRemoved) {
+      return;
+    }
+    if (!isBeingRemoved) {
+      if (oldTabstopFocused) {
+        return;
+      } else {
+        fallbackToFirstCell(newRows, oldRows, false);
+        return;
+      }
+    }
+    if (tabFallback === "first-cell") {
+      fallbackToFirstCell(newRows, oldRows, oldTabstopFocused);
+      return;
+    }
+    if (oldTabstopTr.rowIndex === 1) {
+      const hasRowBelowInNewRows = newRows.some((it) => it.key === oldRows[1].key);
+      if (hasRowBelowInNewRows) {
+        const {
+          cell
+        } = getVerticalNavIndex(tableRef.value, {
+          row: 1,
+          cell: oldTabstopTd.cellIndex
+        }, {
+          row: 2,
+          cell: oldTabstopTd.cellIndex
+        });
+        const fallback = getCellTarget(tableRef.value, 2, cell);
+        activateCell(fallback, {
+          focus: true
+        });
+      } else {
+        fallbackToFirstCell(newRows, oldRows, true);
+      }
+    } else {
+      const hasRowAboveInNewRows = newRows.some((it) => it.key === oldRows[oldTabstopTr.rowIndex - 2].key);
+      if (hasRowAboveInNewRows) {
+        const {
+          row,
+          cell
+        } = getVerticalNavIndex(tableRef.value, {
+          row: oldTabstopTr.rowIndex,
+          cell: oldTabstopTd.cellIndex
+        }, {
+          row: oldTabstopTr.rowIndex - 1,
+          cell: oldTabstopTd.cellIndex
+        });
+        const fallback = getCellTarget(tableRef.value, row, cell);
+        activateCell(fallback, {
+          focus: true
+        });
+      } else {
+        fallbackToFirstCell(newRows, oldRows, true);
+      }
+    }
+  });
+  vue.onUpdated(() => {
+    if (!renderOptions.value.fallbackToFirstCell) {
+      return;
+    }
+    logic.assertRef(tableRef);
+    const target = getCellTarget(tableRef.value, 1, 0);
+    if (metaRows.value.length === 0) {
+      target.tabIndex = 0;
+      target.focus();
+    } else {
+      activateCell(target, {
+        focus: renderOptions.value.focus
+      });
+    }
+    renderOptions.value.fallbackToFirstCell = false;
+  });
+  async function withTabstopBehaviour(behaviour, action) {
+    if (behaviour === "row-removal") {
+      pendingRowRemoval = true;
+    }
+    try {
+      await action();
+    } finally {
+      pendingRowRemoval = false;
+    }
+  }
+  return {
+    withTabstopBehaviour
+  };
+}
 const _hoisted_1 = ["role", "aria-rowcount"];
 const _hoisted_2 = {
   class: "table-ng__row",
@@ -3730,7 +3855,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     "selectedRowsModifiers": {}
   }),
   emits: ["update:selectedRows"],
-  setup(__props) {
+  setup(__props, {
+    expose: __expose
+  }) {
     const selectedRows = vue.useModel(__props, "selectedRows");
     const $t = vue$1.useTranslate();
     const tableRef = vue.useTemplateRef("table");
@@ -3860,6 +3987,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         });
       }
     }
+    function onTableFocusin(e) {
+      logic.assertRef(tableRef);
+      tableRef.value.querySelectorAll(`[tabindex="0"]`).forEach((it) => {
+        if (it !== e.target) {
+          it.setAttribute("tabindex", "-1");
+        }
+      });
+    }
     function isInExpandable(el) {
       if (!el.parentElement) {
         return false;
@@ -3878,7 +4013,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (isInExpandable(target)) {
         return;
       }
-      logic.assertRef(tableRef);
+      if (!tableRef.value) {
+        return;
+      }
       const outsideTable = !relatedTarget || !tableRef.value.contains(relatedTarget);
       if (outsideTable) {
         const td = target.closest("td");
@@ -3949,6 +4086,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       bindCellApiRef(ref2);
       selectAllRef.value = vue.toValue(ref2.tabstopEl);
     }
+    const tableApi = useTabstop(tableRef, metaRows);
+    __expose(tableApi);
     vue.onMounted(() => {
       logic.assertRef(tableRef);
       registerCallbackOnMount(callbackSortableColumns);
@@ -3961,6 +4100,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         role: role.value,
         class: vue.normalizeClass(tableClasses.value),
         "aria-rowcount": ariaRowcount.value,
+        onFocusin: onTableFocusin,
         onFocusout: onTableFocusout,
         onClick,
         onKeydown