@progress/kendo-vue-grid/GridNav.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as d, createVNode as s, ref as c } from "vue";
import { noop as a, getDefaultSlots as l } from "@progress/kendo-vue-common";
const v = /* @__PURE__ */ d({
  name: "KendoGridNav",
  props: {
    columnsRef: Array,
    dataRef: Array,
    id: String,
    dir: String
  },
  emits: ["keydown", "navigationaction", "keyboardselectionchange", "movetonextpage", "movetoprevpage", "columnreorder", "setcurrentontop"],
  inject: {
    onNavKeyDown: {
      default: a
    },
    onNavFocus: {
      default: a
    },
    onNavMount: {
      default: a
    },
    onNavBeforeUpdate: {
      default: a
    },
    onNavUpdate: {
      default: a
    },
    handleDispatchFocus: {
      default: a
    },
    kbContext: {
      default: null
    },
    navigation: {
      default: null
    }
  },
  mounted() {
    this.onNavMount({
      scope: this.$el || void 0
    });
  },
  updated() {
    this.onNavUpdate({
      scope: this.$el || void 0
    }), this.handlePendingStickyNav();
  },
  setup(e, n) {
    return {
      pendingStickyNavRef: c(null)
    };
  },
  methods: {
    handleStickyKeyDown(e) {
      var t, r;
      const n = e.target;
      if ((e.keyCode === 38 || e.keyCode === 40) && n.closest(".k-grid-sticky-container")) {
        const o = parseInt(((t = n.closest("tr")) == null ? void 0 : t.getAttribute("absolute-row-index")) || "", 10), i = n.getAttribute("data-keyboardnavid");
        if (!isNaN(o) && i && !((r = this.$el) == null ? void 0 : r.querySelector(`.k-grid-content .k-table-tbody>tr[absolute-row-index="${o}"]`)))
          return this.pendingStickyNavRef = {
            navId: i,
            key: e.key,
            code: e.code,
            keyCode: e.keyCode
          }, e.preventDefault(), e.stopPropagation(), this.$emit("setcurrentontop", {
            rowIndex: o
          }), !0;
      }
      return !1;
    },
    handlePendingStickyNav() {
      var i;
      if (!this.pendingStickyNavRef || !this.$el)
        return;
      const {
        navId: e,
        key: n,
        code: t,
        keyCode: r
      } = this.pendingStickyNavRef, o = (i = this.$el) == null ? void 0 : i.querySelector(`.k-grid-content .k-table-tbody td[data-keyboardnavid="${e}"]`);
      o && o.dispatchEvent(new KeyboardEvent("keydown", {
        key: n,
        code: t,
        keyCode: r,
        bubbles: !0,
        cancelable: !0
      })), this.pendingStickyNavRef = null;
    },
    onKeyDown(e) {
      this.handleStickyKeyDown(e) || (this.onNavKeyDown(e, {
        navigation: this.navigation,
        kbContext: this.kbContext,
        onNavigationAction: this.onNavigationAction
      }), this.onNavBeforeUpdate({
        scope: this.$el || void 0,
        kbContext: this.kbContext,
        navigation: this.navigation
      }), this.$emit("keydown", {
        dataItems: this.getLeafDataItems(),
        componentId: this._gridId,
        selectedField: this.$props.selectedField,
        event: e
      }));
    },
    onFocus(e) {
      this.onNavFocus(e, {
        kbContext: this.kbContext
      });
    },
    onNavigationAction(e) {
      const {
        columnsRef: n
      } = this.$props;
      if (e.action === "moveToNextPage" && this.$emit("movetonextpage", e.event), e.action === "moveToPrevPage" && this.$emit("movetoprevpage", e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
        const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
        if (!n[t].reorderable)
          return;
        if (e.action === "reorderToRight" && t < this.$props.columnsRef.length - 1) {
          if (n[t + 1].disableReorder)
            return;
          this.$emit("columnreorder", t, t + 1, e.event);
        }
        if (e.action === "reorderToLeft" && t > 0) {
          if (n[t - 1].disableReorder)
            return;
          this.$emit("columnreorder", t, t - 1, e.event);
        }
      }
      e.action === "select" && this.$emit("keyboardselectionchange", e.event), this.$emit("navigationaction", {
        focusElement: e.focusElement,
        event: e.event
      });
    },
    getLeafDataItems() {
      return this.$props.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem);
    }
  },
  render() {
    const e = l(this);
    return s("div", {
      onKeydown: this.onKeyDown,
      onFocusin: this.onFocus,
      id: this.$props.id,
      dir: this.$props.dir,
      "data-keyboardnavscope": !0
    }, [e]);
  }
});
export {
  v as GridNav
};