@featherk/composables 0.17.1 → 0.18.1

package/dist/chunks/useGridRowAction-akjwkV_F.mjs

@@ -0,0 +1,532 @@
+import { ref as P, onBeforeUnmount as M, nextTick as N } from "vue";
+const _ = (l, y) => {
+  const d = P(null);
+  let L = !1, h = null, k = null;
+  const A = [], q = ".k-table-row[data-grid-row-index] [tabindex]", v = () => {
+    const e = l?.value?.$el;
+    return e ? e.closest(".k-grid") : null;
+  }, X = (e) => {
+    const n = v();
+    if (!n) return !1;
+    const t = e.closest(".k-grid-aria-root");
+    if (t)
+      return n.contains(t);
+    const o = e.closest(
+      ".k-grid-header, .k-grid-content, .k-grid-content-locked"
+    );
+    return o ? n.contains(o) : !1;
+  }, T = (e) => e.key === "Enter" || e.code === "Enter" || e.code === "NumpadEnter", D = () => l?.value?.columns, R = (e) => {
+    const n = e.key || e.code;
+    ([" ", "Spacebar", "Space"].includes(n) || T(e)) && (e.preventDefault(), e.stopPropagation(), d.value = e.target, e.target.click());
+  }, I = (e) => {
+    if (!d.value) return;
+    if (e.code === "Escape") {
+      e.stopPropagation(), d.value && d.value.focus();
+      return;
+    }
+    const n = Array.from(
+      document.querySelectorAll(
+        ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
+      )
+    ), t = document.querySelector(
+      ".k-animation-container .k-popup .k-column-menu .k-filter-menu-container"
+    );
+    if (t) {
+      if (e.code === "Tab") {
+        const o = [
+          // ".k-filter-menu-container .k-dropdownlist[tabindex='0']",
+          // ".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",
+          // ".k-filter-menu-container button:not([tabindex='-1']):not([disabled])",
+          // ".k-checkbox",
+          ".k-dropdownlist[tabindex='0']",
+          "input.k-input-inner:not([tabindex='-1']):not([disabled])",
+          "button:not([tabindex='-1']):not([disabled])",
+          ".k-checkbox"
+        ], a = y?.focusableMenuSelectors ?? o, i = Array.from(
+          t.querySelectorAll(a.join(","))
+        );
+        if (i.length === 0) return;
+        const c = i.findIndex(
+          (m) => m === document.activeElement
+        );
+        let f;
+        c === -1 ? f = 0 : e.shiftKey ? f = (c - 1 + i.length) % i.length : f = (c + 1) % i.length, e.preventDefault(), e.stopPropagation(), i[f]?.focus();
+      }
+    } else if (e.code === "ArrowUp" || e.code === "ArrowDown") {
+      e.preventDefault(), e.stopPropagation();
+      const o = n.findIndex(
+        (i) => i === document.activeElement
+      );
+      let a = o;
+      e.code === "ArrowUp" ? a = o > 0 ? o - 1 : n.length - 1 : e.code === "ArrowDown" && (a = o < n.length - 1 ? o + 1 : 0), n[a]?.focus();
+      return;
+    }
+    if (e.code === "Tab") {
+      e.preventDefault(), e.stopPropagation();
+      const o = d.value?.parentElement;
+      (e.shiftKey ? o?.previousElementSibling : o?.nextElementSibling)?.querySelector(
+        "button, [role='button'], .k-link"
+      )?.focus();
+    }
+  }, Y = () => {
+    h = new MutationObserver((e) => {
+      e.forEach((n) => {
+        n.addedNodes.forEach((t) => {
+          if (t.nodeType === Node.ELEMENT_NODE) {
+            const o = t;
+            if (o.classList.contains("k-animation-container")) {
+              const i = d.value;
+              i && (i.dataset.featherKSortable === "true" || N(() => {
+                o.querySelectorAll(
+                  ".k-columnmenu-item-wrapper"
+                ).forEach((m) => {
+                  m.textContent?.toLowerCase().includes("sort") && m.remove();
+                });
+              })), o.addEventListener(
+                "keydown",
+                I
+              ), N(() => {
+                const c = () => {
+                  const f = Array.from(
+                    o.querySelectorAll(
+                      ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
+                    )
+                  );
+                  if (f.length === 1)
+                    f[0].focus(), f[0].click(), c.attempts = 0;
+                  else if (f.length > 1) {
+                    c.attempts = 0;
+                    return;
+                  } else
+                    c.attempts === void 0 && (c.attempts = 0), c.attempts++ < 3 && setTimeout(c, 200);
+                };
+                c();
+              });
+            }
+            o.querySelectorAll(
+              ".k-animation-container"
+            ).forEach((i) => {
+              i.addEventListener(
+                "keydown",
+                I
+              );
+            });
+          }
+        }), n.removedNodes.forEach((t) => {
+          if (t.nodeType === Node.ELEMENT_NODE) {
+            const o = t;
+            o.classList.contains("k-animation-container") && o.removeEventListener(
+              "keydown",
+              I
+            ), o.querySelectorAll(
+              ".k-animation-container"
+            ).forEach((i) => {
+              i.removeEventListener(
+                "keydown",
+                I
+              );
+            });
+          }
+        });
+      });
+    }), h.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }, r = (e) => {
+    const n = e.tagName.toLowerCase();
+    return !!(["input", "textarea", "select", "button"].includes(n) || e.closest(
+      '.k-picker-wrap, .k-input-inner, .k-textbox, [role="combobox"]'
+    ));
+  }, s = (e) => {
+    if (!e.type || !e)
+      return;
+    const n = e.target;
+    if (!n) return;
+    const t = n.closest(
+      ".k-table-row[data-grid-row-index]"
+    );
+    if (!X(n))
+      return;
+    const o = ["ArrowLeft", "ArrowRight"].includes(
+      e.code
+    );
+    if (!(r(n) && !(t && o))) {
+      if (e.code === "Escape") {
+        const a = document.activeElement?.closest(".k-table-row[data-grid-row-index]");
+        if (a) {
+          e.preventDefault(), e.stopPropagation();
+          try {
+            Array.from(
+              l?.value.$el.querySelectorAll(
+                ".k-table-row[data-grid-row-index]"
+              )
+            ).forEach((c) => c.setAttribute("tabindex", "-1"));
+          } catch {
+          }
+          a.setAttribute("tabindex", "0"), a.focus();
+          return;
+        }
+      }
+      if ([
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "Enter",
+        "NumpadEnter",
+        "Space"
+      ].includes(e.code)) {
+        if (n.classList.contains("k-grid-header-menu") && n.classList.contains("k-grid-column-menu")) {
+          d.value = n;
+          return;
+        }
+        if (t) {
+          if (["ArrowDown", "ArrowUp"].includes(e.code)) {
+            e.preventDefault(), e.stopPropagation();
+            const a = (c, f) => {
+              let m = f === "next" ? c.nextElementSibling : c.previousElementSibling;
+              for (; m; ) {
+                const K = m;
+                try {
+                  if (K.classList.contains("k-table-row"))
+                    return K;
+                } catch {
+                }
+                m = f === "next" ? m.nextElementSibling : m.previousElementSibling;
+              }
+              return null;
+            }, i = e.code === "ArrowDown" ? a(t, "next") : a(t, "previous");
+            i && (t.setAttribute("tabindex", "-1"), i.setAttribute("tabindex", "0"), i.focus());
+            return;
+          }
+          if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
+            e.preventDefault(), e.stopPropagation();
+            const a = t.querySelectorAll(
+              q
+            );
+            if (a.length === 0) return;
+            let i = Array.from(a).findIndex(
+              (c) => c === document.activeElement
+            );
+            if (i === -1 && document.activeElement === t) {
+              a[0].focus();
+              return;
+            }
+            e.code === "ArrowRight" ? i = i === a.length - 1 ? 0 : i + 1 : e.code === "ArrowLeft" && (i = i === 0 ? a.length - 1 : i - 1), a[i].focus();
+            return;
+          }
+        }
+      }
+    }
+  }, u = () => {
+    N(() => {
+      const e = l.value?.$el;
+      if (!e || typeof e.closest != "function") return;
+      const n = e.closest(".k-grid");
+      n && n.classList.add("fk-grid");
+    });
+  }, p = () => {
+    if (!k)
+      try {
+        const e = () => {
+          try {
+            const o = Array.from(
+              l.value.$el.querySelectorAll(
+                ".k-table-row[data-grid-row-index]"
+              )
+            );
+            if (!o || o.length === 0 || o.filter(
+              (c) => c.getAttribute("tabindex") === "0"
+            ).length === 1) return;
+            const i = o.find(
+              (c) => c === document.activeElement || c.contains(document.activeElement)
+            );
+            if (o.forEach((c) => c.setAttribute("tabindex", "-1")), i) {
+              i.setAttribute("tabindex", "0");
+              return;
+            }
+            o[0].setAttribute("tabindex", "0");
+          } catch (o) {
+            console.error("ensureSingleTabindex error:", o);
+          }
+        }, n = Array.from(
+          l.value.$el.querySelectorAll(
+            ".k-table-row[data-grid-row-index]"
+          )
+        );
+        n.length > 0 && n.forEach((o, a) => {
+          o.setAttribute("tabindex", a === 0 ? "0" : "-1");
+        });
+        const t = l.value.$el.querySelector(".k-table-tbody");
+        t && (k = new MutationObserver(() => {
+          e();
+        }), k.observe(t, { childList: !0, subtree: !0 }));
+      } catch (e) {
+        console.error("Error setting up row navigation:", e);
+      }
+  }, g = () => {
+    N(() => {
+      const n = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+      n && n.forEach((t) => {
+        t.setAttribute("role", "button"), t.addEventListener(
+          "keydown",
+          R
+        );
+      }), Y(), E();
+    });
+  }, w = () => {
+    const n = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+    n && n.forEach((t) => {
+      t.removeEventListener(
+        "keydown",
+        R
+      );
+    }), h && (h.disconnect(), h = null), k && (k.disconnect(), k = null), A.forEach((t) => t()), A.length = 0;
+  }, E = () => {
+    document.querySelectorAll(
+      ".k-grid-header .k-table-thead th"
+    ).forEach((t, o) => {
+      if (t.dataset.featherKHeaderBound === "true")
+        return;
+      const a = t.querySelector(
+        ".k-grid-header-menu.k-grid-column-menu"
+      );
+      if (!a) return;
+      const i = D();
+      if (i && i[o]) {
+        const b = i[o].field ?? "";
+        t.setAttribute("data-feather-k-field", b), t.setAttribute(
+          "data-feather-k-filterable",
+          i[o].filterable === !1 ? "false" : "true"
+        ), t.setAttribute(
+          "data-feather-k-sortable",
+          i[o].sortable === !1 ? "false" : "true"
+        );
+      }
+      const c = t.dataset.featherKFilterable !== "false", f = t.dataset.featherKSortable !== "false";
+      a.setAttribute("tabindex", "-1"), c || f ? t.style.cursor = "pointer" : t.style.cursor = "default", c ? (t.setAttribute("tabindex", "0"), t.setAttribute("role", "button"), t.setAttribute("aria-haspopup", "menu")) : (t.setAttribute("tabindex", "0"), t.setAttribute("role", "columnheader"), t.removeAttribute("aria-haspopup"));
+      const m = (b) => {
+        b.target?.closest(".k-column-resizer") || (d.value = t, a.click());
+      }, K = (b) => {
+        if (c)
+          d.value = t, b.preventDefault(), b.stopPropagation(), m(b);
+        else if (f) {
+          d.value = t;
+          const C = t.querySelector(".k-link");
+          C && C.click();
+        }
+      };
+      t.addEventListener("click", K), A.push(() => {
+        t.removeEventListener("click", K);
+      });
+      const F = (b) => {
+        if ((T(b) || b.code === "Space") && (c || f)) {
+          if (b.preventDefault(), b.stopPropagation(), d.value = t, d.value.focus(), c)
+            m(b);
+          else if (f) {
+            const C = t.querySelector(".k-link");
+            C && C.click();
+          }
+        }
+      };
+      t.addEventListener("keydown", F, !0), A.push(() => {
+        t.removeEventListener("keydown", F, !0);
+      }), t.dataset.featherKHeaderBound = "true";
+    });
+    const n = document.querySelector(".k-grid-header .k-table-thead");
+    if (n && n.dataset.featherKHeaderBound !== "true") {
+      const t = (o) => {
+        const a = o.target.closest("th");
+        a && (T(o) || o.code === "Space") && a.dataset.featherKFilterable === "false" && a.dataset.featherKSortable === "false" && (o.preventDefault(), o.stopImmediatePropagation());
+      };
+      n.addEventListener(
+        "keydown",
+        t,
+        !0
+        // NOTE: capture phase
+      ), A.push(() => {
+        n.removeEventListener(
+          "keydown",
+          t,
+          !0
+        );
+      }), n.dataset.featherKHeaderBound = "true";
+    }
+  }, S = function(e, n) {
+    const t = e?.event?.event.target, o = D();
+    if (!t || !o) return;
+    const a = t.classList.contains("k-grid-header-menu"), i = t.classList.contains("k-columnmenu-item"), c = o.find((f) => f.field === e?.event?.field)?.sortable && !0;
+    if (!a) {
+      if (i && !c) {
+        e?.event?.sort?.filter(
+          (m) => m.field !== e?.event?.field
+        );
+        return;
+      }
+      typeof n == "function" && N(() => {
+        d.value && d.value.focus(), n(e), N(() => {
+          E();
+        });
+      });
+    }
+  }, x = () => {
+    if (!L)
+      try {
+        u(), p(), g(), L = !0;
+      } catch (e) {
+        console.error("initA11y failed:", e), w();
+      }
+  };
+  return M(() => {
+    w();
+  }), {
+    activeFilterButton: d,
+    handleGridKeyDown: s,
+    handleSortChange: S,
+    initA11y: x
+  };
+}, O = (l) => !!l && typeof l == "object" && "filters" in l && Array.isArray(l.filters), G = (l) => !!l && typeof l == "object" && "field" in l, B = (l, y) => !l || typeof l != "object" ? !1 : O(l) ? l.filters.some(
+  (d) => B(d, y)
+) : G(l) ? l.field === y : !1, $ = (l) => (y) => l.value?.filters && l.value.filters.some(
+  (d) => B(d, y)
+) ? "active" : "", H = [
+  "button",
+  "a",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="option"]',
+  ".k-checkbox",
+  ".k-button",
+  ".k-dropdown",
+  ".k-picker",
+  ".k-hierarchy-cell",
+  ".k-grid-header-menu",
+  ".k-column-menu"
+], j = (l) => {
+  const {
+    onRowAction: y,
+    gridRef: d,
+    dataItems: L,
+    ignoreSelectors: h = [],
+    shouldIgnoreTarget: k,
+    enableKeyboardAction: A = !0
+  } = l, q = [
+    ...H,
+    ...h
+  ], v = (r, s) => {
+    if (!r) return !1;
+    const u = q.join(",");
+    return r.closest && r.closest(u) ? !0 : k && s ? k(r, s) : !1;
+  }, X = (r) => {
+    const u = r?.closest?.(
+      ".k-table-row[data-grid-row-index]"
+    )?.getAttribute("data-grid-row-index");
+    if (u == null) return;
+    const p = parseInt(u, 10);
+    return Number.isNaN(p) ? void 0 : p;
+  }, T = (r) => {
+    if (!r || typeof r.clientX != "number")
+      return;
+    const s = typeof window < "u" && window.scrollX || 0, u = typeof window < "u" && window.scrollY || 0, p = typeof window < "u" && window.screenX || 0, g = typeof window < "u" && window.screenY || 0;
+    return {
+      clientX: r.clientX,
+      clientY: r.clientY,
+      pageX: typeof r.pageX == "number" ? r.pageX : r.clientX + s,
+      pageY: typeof r.pageY == "number" ? r.pageY : r.clientY + u,
+      screenX: typeof r.screenX == "number" ? r.screenX : r.clientX + p,
+      screenY: typeof r.screenY == "number" ? r.screenY : r.clientY + g
+    };
+  }, D = (r) => {
+    if (!r || typeof r.getBoundingClientRect != "function")
+      return;
+    const s = r.getBoundingClientRect();
+    if (!s) return;
+    const u = s.left, p = s.bottom, g = typeof window < "u" && window.scrollX || 0, w = typeof window < "u" && window.scrollY || 0;
+    return {
+      clientX: u,
+      clientY: p,
+      pageX: u + g,
+      pageY: p + w,
+      screenX: u,
+      screenY: p
+    };
+  }, R = (r) => {
+    if (typeof window > "u") return !1;
+    const s = window.getSelection();
+    if (!s || s.isCollapsed || !s.toString().trim())
+      return !1;
+    if (r && s.anchorNode && s.focusNode) {
+      const u = r.closest(".k-table-row") || r.closest(".k-grid") || r, p = s.anchorNode.nodeType === Node.ELEMENT_NODE ? s.anchorNode : s.anchorNode.parentElement, g = s.focusNode.nodeType === Node.ELEMENT_NODE ? s.focusNode : s.focusNode.parentElement, w = !!(p && u.contains(p)), E = !!(g && u.contains(g));
+      return w || E;
+    }
+    return !0;
+  };
+  return {
+    handleRowClick: (r) => {
+      const s = r?.htmlEvent || r?.event || r?.nativeEvent || (r instanceof Event ? r : void 0);
+      if (s && s.button !== void 0 && s.button !== 0)
+        return;
+      const u = s?.target || r?.target;
+      if (u && v(u, s || r) || R(u))
+        return;
+      const p = {
+        dataItem: r.dataItem,
+        rowIndex: r.rowIndex ?? X(u),
+        field: r.field,
+        event: s || r,
+        triggerType: "click",
+        ctrlKey: !!s?.ctrlKey,
+        shiftKey: !!s?.shiftKey,
+        metaKey: !!s?.metaKey,
+        altKey: !!s?.altKey,
+        coordinates: T(s) ?? D(u)
+      };
+      y(r.dataItem, p);
+    },
+    handleRowKeyDown: (r, s) => {
+      if (!A) return;
+      const u = r.key || r.code;
+      if (!(u === "Enter" || u === "NumpadEnter" || u === " " || u === "Space" || r.code === "Enter" || r.code === "NumpadEnter" || r.code === "Space")) return;
+      const g = r.target;
+      if (!g) return;
+      const w = g.closest(
+        ".k-table-row[data-grid-row-index], .k-table-row"
+      );
+      if (!w || v(g, r))
+        return;
+      r.preventDefault(), r.stopPropagation();
+      const E = w.getAttribute("data-grid-row-index"), S = E !== null ? parseInt(E, 10) : void 0;
+      let x = s;
+      if (x === void 0) {
+        const n = (Array.isArray(L) ? L : L?.value) || d?.value?.props?.dataItems || d?.value?.dataItems;
+        n && S !== void 0 && S >= 0 && S < n.length && (x = n[S]);
+      }
+      if (x === void 0) return;
+      const e = {
+        dataItem: x,
+        rowIndex: S,
+        event: r,
+        triggerType: "keyboard",
+        ctrlKey: !!r.ctrlKey,
+        shiftKey: !!r.shiftKey,
+        metaKey: !!r.metaKey,
+        altKey: !!r.altKey,
+        coordinates: D(w)
+      };
+      y(x, e);
+    },
+    isIgnoredTarget: v
+  };
+};
+export {
+  $ as a,
+  j as b,
+  _ as u
+};
+//# sourceMappingURL=useGridRowAction-akjwkV_F.mjs.map