npm - @featherk/composables - Versions diffs - 0.0.4 - Mend

@featherk/composables 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/featherk-composables.es.js +343 -0
package/dist/featherk-composables.umd.js +1 -0
package/dist/index.d.ts +2 -0
package/dist/types/kendo.d.ts +22 -0
package/dist/useGridA11y.d.ts +16 -0
package/dist/useGridComposableEx.d.ts +11 -0
package/package.json +34 -0

package/dist/featherk-composables.es.js ADDED Viewed

@@ -0,0 +1,343 @@
+import { ref as E, onMounted as S, onBeforeUnmount as M, nextTick as p, onUnmounted as N } from "vue";
+const G = (m) => {
+  const l = E(null);
+  let d = null, u = null;
+  const f = [], v = ".k-table-row[data-grid-row-index] [tabindex]", k = () => m?.value?.columns, h = (e) => {
+    const o = e.key || e.code;
+    [" ", "Spacebar", "Space", "Enter"].includes(o) && (e.preventDefault(), e.stopPropagation(), l.value = e.target, e.target.click());
+  }, g = (e) => {
+    if (!l.value) return;
+    if (e.code === "Escape") {
+      e.preventDefault(), e.stopPropagation(), l.value && l.value.focus();
+      return;
+    }
+    const o = Array.from(
+      document.querySelectorAll(
+        ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
+      )
+    ), t = document.querySelector(".k-filter-menu-container");
+    if (t) {
+      if (e.code === "Tab") {
+        const r = [
+          ".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])"
+        ], n = Array.from(
+          t.querySelectorAll(r.join(","))
+        );
+        if (n.length === 0) return;
+        const a = n.findIndex(
+          (s) => s === document.activeElement
+        );
+        let i;
+        a === -1 ? i = 0 : e.shiftKey ? i = (a - 1 + n.length) % n.length : i = (a + 1) % n.length, e.preventDefault(), e.stopPropagation(), n[i]?.focus();
+        return;
+      }
+    } else if (e.code === "ArrowUp" || e.code === "ArrowDown") {
+      e.preventDefault(), e.stopPropagation();
+      const r = o.findIndex(
+        (a) => a === document.activeElement
+      );
+      let n = r;
+      e.code === "ArrowUp" ? n = r > 0 ? r - 1 : o.length - 1 : e.code === "ArrowDown" && (n = r < o.length - 1 ? r + 1 : 0), o[n]?.focus();
+      return;
+    }
+    e.code === "Tab" && (e.preventDefault(), e.stopPropagation(), e.shiftKey ? (l.value?.previousElementSibling).focus() : (l.value?.nextElementSibling).focus());
+  }, x = () => {
+    d = new MutationObserver((e) => {
+      e.forEach((o) => {
+        o.addedNodes.forEach((t) => {
+          if (t.nodeType === Node.ELEMENT_NODE) {
+            const r = t;
+            if (r.classList.contains("k-animation-container")) {
+              const a = l.value;
+              a && (a.dataset.featherKSortable === "true" || p(() => {
+                r.querySelectorAll(
+                  ".k-columnmenu-item-wrapper"
+                ).forEach((b) => {
+                  b.textContent?.toLowerCase().includes("sort") && b.remove();
+                });
+              })), r.addEventListener(
+                "keydown",
+                g
+              ), p(() => {
+                const i = () => {
+                  const s = Array.from(
+                    r.querySelectorAll(
+                      ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
+                    )
+                  );
+                  if (s.length === 1)
+                    s[0].focus(), s[0].click(), i.attempts = 0;
+                  else if (s.length > 1) {
+                    i.attempts = 0;
+                    return;
+                  } else
+                    i.attempts === void 0 && (i.attempts = 0), i.attempts++ < 3 && setTimeout(i, 200);
+                };
+                i();
+              });
+            }
+            r.querySelectorAll(
+              ".k-animation-container"
+            ).forEach((a) => {
+              a.addEventListener(
+                "keydown",
+                g
+              );
+            });
+          }
+        }), o.removedNodes.forEach((t) => {
+          if (t.nodeType === Node.ELEMENT_NODE) {
+            const r = t;
+            r.classList.contains("k-animation-container") && r.removeEventListener(
+              "keydown",
+              g
+            ), r.querySelectorAll(
+              ".k-animation-container"
+            ).forEach((a) => {
+              a.removeEventListener(
+                "keydown",
+                g
+              );
+            });
+          }
+        });
+      });
+    }), d.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }, L = (e) => {
+    if (!e.type || !e)
+      return;
+    console.log("handleGridKeyDown", e, e.code);
+    const o = e.target;
+    if (o && [
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "Enter",
+      "Space"
+    ].includes(e.code)) {
+      if (e.preventDefault(), o.classList.contains("k-grid-header-menu") && o.classList.contains("k-grid-column-menu")) {
+        l.value = o;
+        return;
+      }
+      const t = o.closest(
+        ".k-table-row[data-grid-row-index]"
+      );
+      if (t) {
+        if (["ArrowDown", "ArrowUp"].includes(e.code)) {
+          let r = null;
+          e.code === "ArrowDown" ? r = t.nextElementSibling : e.code === "ArrowUp" && (r = t.previousElementSibling), r && r.hasAttribute("tabindex") && (t.setAttribute("tabindex", "-1"), r.setAttribute("tabindex", "0"), r.focus());
+          return;
+        }
+        if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
+          e.preventDefault();
+          const r = t.querySelectorAll(
+            v
+          );
+          if (r.length === 0) return;
+          let n = Array.from(r).findIndex(
+            (a) => a === document.activeElement
+          );
+          if (n === -1 && document.activeElement === t) {
+            r[0].focus();
+            return;
+          }
+          e.code === "ArrowRight" ? n = n === r.length - 1 ? 0 : n + 1 : e.code === "ArrowLeft" && (n = n === r.length - 1 ? n - 1 : r.length - 1), r[n].focus();
+          return;
+        }
+      }
+    }
+  }, D = () => {
+    p(() => {
+      const e = m.value.$el.closest(".k-grid");
+      e && e.classList.add("fk-grid");
+    });
+  }, T = () => {
+    try {
+      const e = () => {
+        try {
+          const r = Array.from(
+            m.value.$el.querySelectorAll(
+              ".k-table-row[data-grid-row-index]"
+            )
+          );
+          if (!r || r.length === 0 || r.filter(
+            (i) => i.getAttribute("tabindex") === "0"
+          ).length === 1) return;
+          const a = r.find(
+            (i) => i === document.activeElement || i.contains(document.activeElement)
+          );
+          if (r.forEach((i) => i.setAttribute("tabindex", "-1")), a) {
+            a.setAttribute("tabindex", "0");
+            return;
+          }
+          r[0].setAttribute("tabindex", "0");
+        } catch (r) {
+          console.error("ensureSingleTabindex error:", r);
+        }
+      }, o = Array.from(
+        m.value.$el.querySelectorAll(
+          ".k-table-row[data-grid-row-index]"
+        )
+      );
+      o.length > 0 && o.forEach((r, n) => {
+        r.setAttribute("tabindex", n === 0 ? "0" : "-1");
+      });
+      const t = m.value.$el.querySelector(".k-table-tbody");
+      t && (u = new MutationObserver(() => {
+        e();
+      }), u.observe(t, { childList: !0, subtree: !0 }));
+    } catch (e) {
+      console.error("Error setting up row navigation:", e);
+    }
+  }, q = () => {
+    p(() => {
+      const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+      o && o.forEach((t) => {
+        t.setAttribute("role", "button"), t.addEventListener(
+          "keydown",
+          h
+        );
+      }), x(), I();
+    });
+  }, C = () => {
+    const o = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+    o && o.forEach((t) => {
+      t.removeEventListener(
+        "keydown",
+        h
+      );
+    }), d && (d.disconnect(), d = null), u && (u.disconnect(), u = null), f.forEach((t) => t()), f.length = 0;
+  }, I = () => {
+    document.querySelectorAll(
+      ".k-grid-header .k-table-thead th"
+    ).forEach((t, r) => {
+      const n = t.querySelector(
+        ".k-grid-header-menu.k-grid-column-menu"
+      );
+      if (!n) return;
+      const a = k();
+      if (a && a[r]) {
+        const c = a[r].field ?? "";
+        t.setAttribute("data-feather-k-field", c), t.setAttribute(
+          "data-feather-k-filterable",
+          a[r].filterable === !1 ? "false" : "true"
+        ), t.setAttribute(
+          "data-feather-k-sortable",
+          a[r].sortable === !1 ? "false" : "true"
+        );
+      }
+      const i = t.dataset.featherKFilterable !== "false", s = t.dataset.featherKSortable !== "false";
+      n.setAttribute("tabindex", "-1"), i ? (t.setAttribute("tabindex", "0"), t.setAttribute("role", "button"), t.setAttribute("aria-haspopup", "menu"), t.style.cursor = "pointer") : (t.setAttribute("tabindex", "0"), t.setAttribute("role", "columnheader"), t.removeAttribute("aria-haspopup"), t.style.cursor = "default");
+      const b = (c) => {
+        c.target?.closest(".k-column-resizer") || (l.value = t, n.click());
+      }, w = (c) => {
+        if (i)
+          l.value = t, c.preventDefault(), c.stopPropagation(), b(c);
+        else if (s) {
+          l.value = t;
+          const y = new KeyboardEvent("keydown", {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            which: 13,
+            bubbles: !0,
+            cancelable: !0
+          });
+          t.dispatchEvent(y);
+        }
+      };
+      t.addEventListener("click", w), f.push(() => {
+        t.removeEventListener("click", w);
+      });
+      const A = (c) => {
+        if ((c.code === "Enter" || c.code === "Space") && (i || s)) {
+          if (l.value = t, l.value.focus(), i)
+            c.preventDefault(), c.stopPropagation(), b(c);
+          else if (s) {
+            const y = t.querySelector(".k-link");
+            y && y.click();
+          }
+        }
+      };
+      t.addEventListener("keydown", A, !0), f.push(() => {
+        t.removeEventListener("keydown", A, !0);
+      });
+    });
+    const o = document.querySelector(".k-grid-header .k-table-thead");
+    if (o) {
+      const t = (r) => {
+        const n = r.target.closest("th");
+        n && (r.code === "Enter" || r.code === "Space") && n.dataset.featherKFilterable === "false" && n.dataset.featherKSortable === "false" && (r.preventDefault(), r.stopImmediatePropagation());
+      };
+      o.addEventListener(
+        "keydown",
+        t,
+        !0
+        // NOTE: capture phase
+      ), f.push(() => {
+        o.removeEventListener(
+          "keydown",
+          t,
+          !0
+        );
+      });
+    }
+  }, K = function(e, o) {
+    const t = e?.event.event.target, r = k();
+    if (!t || !r) return;
+    const n = t.classList.contains("k-link"), a = t.classList.contains("k-columnmenu-item"), i = r.find((s) => s.field === e.event.field)?.sortable && !0;
+    if (!n) {
+      if (a && !i) {
+        (e.event.sort && void 0)?.filter(
+          (b) => b.field !== e.event.field
+        );
+        return;
+      }
+      typeof o == "function" && p(() => {
+        l.value && l.value.focus(), o(e);
+      });
+    }
+  };
+  return S(() => {
+    D(), T(), q();
+  }), M(() => {
+    C();
+  }), {
+    activeFilterButton: l,
+    handleGridKeyDown: L,
+    handleSortChange: K
+  };
+};
+function B(m = {}) {
+  const { activeByDefault: l = !1, autoActivateDelay: d = 0 } = m, u = E(l);
+  function f() {
+    u.value = !0;
+  }
+  function v() {
+    u.value = !1;
+  }
+  function k() {
+    u.value = !u.value;
+  }
+  return S(() => {
+    d > 0 && !l && setTimeout(() => {
+      f();
+    }, d);
+  }), N(() => {
+  }), {
+    isGridActive: u,
+    activateGrid: f,
+    deactivateGrid: v,
+    toggleGrid: k
+  };
+}
+export {
+  G as useGridA11y,
+  B as useGridComposableEx
+};

package/dist/featherk-composables.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useGridA11y } from './useGridA11y';
2	+ export { useGridComposableEx } from './useGridComposableEx';

package/dist/types/kendo.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Minimal Kendo UI type definitions for FeatherK composables
+ * These types are extracted from @progress/kendo-* packages for development use only
+ */
+export interface SortDescriptor {
+    field?: string;
+    dir?: 'asc' | 'desc';
+}
+export interface GridColumnProps {
+    field?: string;
+    title?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    [key: string]: any;
+}
+export interface GridSortChangeEvent {
+    event?: {
+        event: Event;
+        field: string;
+        sort: SortDescriptor[];
+    };
+}

package/dist/useGridA11y.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * useGridA11y
+ *
+ * Composable that augments a Kendo-based grid with accessible keyboard navigation,
+ * focus management, and custom behaviors for column header menus (filter/sort).
+ *
+ * (Contents preserved from previous grid-keyboard-navigation.ts; only the export name
+ * and filename were changed to reflect the new composable name.)
+ */
+import { type Ref } from "vue";
+import type { GridSortChangeEvent } from "./types/kendo";
+export declare const useGridA11y: (gridRef: Ref<any>) => {
+    activeFilterButton: Ref<HTMLElement, HTMLElement>;
+    handleGridKeyDown: (e: KeyboardEvent) => void;
+    handleSortChange: (event?: GridSortChangeEvent, customHandler?: any) => void;
+};

package/dist/useGridComposableEx.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+interface GridAccessibilityOptions {
+    activeByDefault?: boolean;
+    autoActivateDelay?: number;
+}
+export declare function useGridComposableEx(options?: GridAccessibilityOptions): {
+    isGridActive: import("vue").Ref<boolean, boolean>;
+    activateGrid: () => void;
+    deactivateGrid: () => void;
+    toggleGrid: () => void;
+};
+export {};

package/package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "@featherk/composables",
+  "version": "0.0.4",
+  "main": "dist/featherk-composables.umd.js",
+  "module": "dist/featherk-composables.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && npm run build:types",
+    "build:types": "vue-tsc --emitDeclarationOnly --declaration --declarationDir dist",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.vue",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^8.0.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}