@progress/kendo-vue-data-tools 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/navigation/TableKeyboardNavigation.js

@@ -0,0 +1,371 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var provide = allVue.provide;
+import { guid, Keys, getDefaultSlots } from '@progress/kendo-vue-common';
+import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from './constants.js';
+import { findId, findNextIdByCellIndex, findNextIdByRowIndex, getBodyElement, getHeaderElement, getNavigatableId, tableKeyboardNavigationTools as navigationTools } from './utils.js';
+/**
+ * @hidden
+ */
+
+var TableKeyboardNavigationProviderVue2 = {
+  name: 'KendoTableKeyboardNavigationProvider',
+  props: {
+    navigatable: {
+      type: Boolean,
+      default: false
+    },
+    id: String
+  },
+  data: function data() {
+    return {
+      scope: undefined,
+      kbContext: undefined,
+      navigation: undefined
+    };
+  },
+  // watch: {
+  //     language: function (this: TableKeyboardNavigationProviderAll, newLanguage: string) {
+  //         this.$data.kendoLocalizationService.language = newLanguage ;
+  //     }
+  // },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3; //     const localizationService = ref(new LocalizationService(props.language));
+    //   provide('kendoLocalizationService', localizationService);
+
+    return {
+      v3: v3
+    };
+  },
+  provide: function provide() {
+    return {
+      getKeyboardNavigationAttributes: this.getKeyboardNavigationAttributes,
+      onNavMount: this.onComponentDidMount,
+      onGetSnapshotBeforeUpdate: this.onGetSnapshotBeforeUpdate,
+      onComponentDidUpdate: this.onComponentDidUpdate,
+      onNavFocus: this.onFocus,
+      onNavKeyDown: this.onKeyDown,
+      generateMatrix: this.generateMatrix,
+      kbContext: this.kbContext,
+      navigation: this.navigation
+    };
+  },
+  created: function created() {
+    var _a = this.$props,
+        navigatable = _a.navigatable,
+        id = _a.id; // v.2: check if nested navigation
+
+    if (navigatable) {
+      this.kbContext = {
+        activeId: '',
+        level: 0
+      };
+      this.navigation = {
+        activeElementIsFocused: false,
+        prevNavigationIndexes: undefined,
+        idPrefix: id || guid(),
+        navigationMatrix: [],
+        lastHeaderIndex: -1
+      };
+    }
+  },
+  methods: {
+    getKeyboardNavigationAttributes: function getKeyboardNavigationAttributes(elementId) {
+      var _a;
+
+      if (!elementId || this.$props.navigatable === false) {
+        return {};
+      }
+
+      return _a = {
+        tabIndex: this.kbContext.activeId && this.kbContext.activeId === elementId ? 0 : -1
+      }, _a[KEYBOARD_NAV_DATA_LEVEL] = this.kbContext.level, _a[KEYBOARD_NAV_DATA_ID] = elementId, _a;
+    },
+    onComponentDidMount: function onComponentDidMount(options) {
+      var _a = options.scope,
+          scope = _a === void 0 ? this.scope : _a;
+
+      if (this.kbContext && this.navigation && scope) {
+        this.scope = scope;
+        this.generateMatrix(options);
+        var firstId = this.navigation.navigationMatrix[0][0];
+        var firstIdElement = navigationTools.getActiveElement(scope, firstId);
+
+        if (firstId && firstIdElement) {
+          this.kbContext.activeId = firstId;
+          firstIdElement.setAttribute('tabIndex', '0');
+        }
+      }
+    },
+    onGetSnapshotBeforeUpdate: function onGetSnapshotBeforeUpdate(options) {
+      var _a = options.kbContext,
+          kbContext = _a === void 0 ? this.kbContext : _a,
+          _b = options.navigation,
+          navigation = _b === void 0 ? this.navigation : _b,
+          document = options.document;
+
+      if (kbContext && navigation && document) {
+        var activeElement = document.activeElement;
+        var activeId = navigationTools.getNavigatableId(activeElement);
+
+        if (activeId && activeId === kbContext.activeId) {
+          navigation.activeElementIsFocused = true;
+        }
+      }
+    },
+    onComponentDidUpdate: function onComponentDidUpdate(options) {
+      var scope = options.scope;
+      this.generateMatrix(options); // check if nested navigation
+
+      if (this.kbContext && this.navigation && scope) {
+        var activeElement = navigationTools.getActiveElement(scope, this.kbContext.activeId);
+
+        if (!activeElement) {
+          var firstId = this.navigation.navigationMatrix[0][0];
+          var firstIdElement = navigationTools.getActiveElement(scope, firstId);
+
+          if (firstId && firstIdElement) {
+            this.kbContext.activeId = firstId;
+            firstIdElement.setAttribute('tabIndex', '0');
+
+            if (this.navigation.activeElementIsFocused) {
+              firstIdElement.focus();
+            }
+          }
+        }
+
+        this.navigation.activeElementIsFocused = false;
+      }
+    },
+    onFocus: function onFocus(event) {
+      var kbContext = this.kbContext;
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (!kbContext) {
+        return;
+      }
+
+      var focusedElement = event.target;
+      var activeId = navigationTools.getNavigatableId(focusedElement);
+
+      if (activeId && activeId !== kbContext.activeId) {
+        var scope = navigationTools.getClosestScope(focusedElement);
+
+        if (!scope) {
+          return;
+        }
+
+        var prevElement = navigationTools.getActiveElement(scope, kbContext.activeId);
+
+        if (prevElement) {
+          prevElement.setAttribute('tabIndex', '-1');
+        }
+
+        focusedElement.setAttribute('tabIndex', '0');
+        kbContext.activeId = activeId;
+      }
+    },
+    onKeyDown: function onKeyDown(event, options) {
+      var _a = options.kbContext,
+          kbContext = _a === void 0 ? this.kbContext : _a,
+          _b = options.navigation,
+          navigation = _b === void 0 ? this.navigation : _b,
+          onNavigationAction = options.onNavigationAction;
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (!kbContext || !navigation) {
+        return;
+      }
+
+      if (event.keyCode === Keys.esc) {
+        // activate navigation
+        var elementForFocus = navigationTools.getClosestNavigatableElement(event.target);
+        navigationTools.focusElement({
+          elementForFocus: elementForFocus,
+          event: event,
+          kbContext: kbContext
+        });
+        return;
+      }
+
+      var element = event.target;
+      var elementId = navigationTools.getNavigatableId(element);
+      var dataLevel = navigationTools.getNavigatableLevel(element);
+      var scope = navigationTools.getClosestScope(element);
+      var matrix = navigation.navigationMatrix;
+
+      if (dataLevel !== undefined && scope) {
+        if (event.keyCode === Keys.enter) {
+          // activate nested navigation or focus focusable element
+          var navigatableElement = navigationTools.getNavigatableElement(element, {
+            level: dataLevel + 1
+          });
+
+          if (navigatableElement) {
+            navigationTools.focusElement({
+              elementForFocus: navigatableElement,
+              event: event,
+              kbContext: kbContext,
+              prevElement: element
+            });
+            return;
+          } else {
+            var elementForFocus = navigationTools.getFocusableElements(element)[0];
+            navigationTools.focusElement({
+              elementForFocus: elementForFocus,
+              event: event,
+              kbContext: kbContext,
+              prevElement: element
+            });
+            return;
+          }
+        }
+
+        if (event.keyCode === Keys.up || event.keyCode === Keys.down || event.keyCode === Keys.left || event.keyCode === Keys.right) {
+          var isReverse = event.keyCode === Keys.up || event.keyCode === Keys.left;
+          var isVertical = event.keyCode === Keys.up || event.keyCode === Keys.down;
+          var currentIdIndexes = void 0;
+
+          if (navigation && navigation.prevNavigationIndexes) {
+            var _c = navigation.prevNavigationIndexes,
+                rowIndex = _c[0],
+                cellIndex = _c[1];
+
+            if (matrix[rowIndex][cellIndex] === elementId) {
+              currentIdIndexes = navigation.prevNavigationIndexes;
+            } else {
+              currentIdIndexes = findId(matrix, elementId);
+            }
+          } else {
+            currentIdIndexes = findId(matrix, elementId);
+          }
+
+          if (currentIdIndexes) {
+            var rowIndex = currentIdIndexes[0],
+                cellIndex = currentIdIndexes[1];
+
+            var _d = isVertical ? findNextIdByRowIndex(rowIndex, cellIndex, elementId, matrix, isReverse) : findNextIdByCellIndex(rowIndex, cellIndex, elementId, matrix, isReverse),
+                idForFocus = _d[0],
+                currentIndexes = _d[1];
+
+            if (idForFocus) {
+              var elementForFocus = navigationTools.getActiveElement(scope, idForFocus); // emit event
+
+              navigationTools.focusElement({
+                elementForFocus: elementForFocus,
+                event: event,
+                kbContext: kbContext,
+                prevElement: element
+              });
+              navigation.prevNavigationIndexes = currentIndexes;
+
+              if (onNavigationAction) {
+                onNavigationAction({
+                  focusElement: elementForFocus,
+                  event: event
+                });
+              }
+            }
+          }
+        }
+      }
+    },
+    generateMatrix: function generateMatrix(options) {
+      var _a = options.navigation,
+          navigation = _a === void 0 ? this.navigation : _a,
+          scope = options.scope;
+
+      if (!navigation || !scope) {
+        return;
+      }
+
+      var matrix = [];
+      var thead = getHeaderElement(scope);
+      var tbody = getBodyElement(scope);
+
+      if (!thead || !tbody) {
+        return;
+      }
+
+      var headerRows = Array.from(thead.children);
+      var bodyRows = Array.from(tbody.children);
+
+      __spreadArray(__spreadArray([], headerRows, true), bodyRows, true).forEach(function (row, rowIndex) {
+        Array.from(row.children).forEach(function (cell) {
+          var cellId = getNavigatableId(cell);
+
+          if (!cellId) {
+            return;
+          } // cell is not navigatable
+
+
+          var rowSpan = cell.rowSpan || 1;
+          var cellSpan = cell.colSpan || 1;
+          var cellIndex;
+
+          for (var depth = rowIndex, maxDepth = rowIndex + rowSpan; depth < maxDepth; depth++) {
+            if (!matrix[depth]) {
+              matrix[depth] = [];
+            }
+
+            if (cellIndex === undefined) {
+              var freeSlotIndex = matrix[depth].findIndex(function (mi) {
+                return !mi;
+              });
+              cellIndex = freeSlotIndex > -1 ? freeSlotIndex : matrix[depth].length;
+            }
+
+            matrix[depth][cellIndex] = cellId || '';
+          }
+
+          for (var depth = cellIndex + 1, maxDepth = cellIndex + cellSpan; depth < maxDepth; depth++) {
+            matrix[rowIndex][depth] = cellId || '';
+          }
+        });
+      });
+
+      navigation.navigationMatrix = matrix.filter(function (row) {
+        return !!row;
+      });
+      navigation.lastHeaderIndex = headerRows.length - 1;
+    }
+  },
+
+  /**
+   * @hidden
+   */
+  // @ts-ignore
+  render: function render(createElement) {
+    // @ts-ignore
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return defaultSlot[0];
+  }
+};
+/**
+ * @hidden
+ */
+
+var TableKeyboardNavigationProvider = TableKeyboardNavigationProviderVue2;
+export { TableKeyboardNavigationProvider, TableKeyboardNavigationProviderVue2 };

package/dist/esm/navigation/TableKeyboardNavigationContextType.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @hidden
+ */
+export interface TableKeyboardNavigationContextType {
+    activeId: string | undefined;
+    level: number;
+}

package/dist/esm/navigation/TableKeyboardNavigationContextType.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/navigation/TableKeyboardNavigationStateType.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export interface TableKeyboardNavigationStateType {
+    activeElementIsFocused: boolean;
+    prevNavigationIndexes?: [number, number];
+    idPrefix: string;
+    navigationMatrix: string[][];
+    lastHeaderIndex: number;
+}

package/dist/esm/navigation/TableKeyboardNavigationStateType.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/navigation/constants.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_LEVEL = "data-keyboardnavlevel";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_SCOPE = "data-keyboardnavscope";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_HEADER = "data-keyboardnavheader";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_BODY = "data-keyboardnavbody";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_ID = "data-keyboardnavid";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_DATA_ZONE = "data-keyboardnavzone";
+/**
+ * @hidden
+ */
+export declare const KEYBOARD_NAV_FILTER_COL_SUFFIX = "_filter";
+/**
+ * @hidden
+ */
+export declare const FOCUSABLE_ELEMENTS: string[];
+/**
+ * @hidden
+ */
+export declare const TABBABLE_ELEMENTS: string[];
+/**
+ * @hidden
+ */
+export declare const tableKeyboardNavigationScopeAttributes: {
+    "data-keyboardnavscope": boolean;
+};
+/**
+ * @hidden
+ */
+export declare const tableKeyboardNavigationHeaderAttributes: {
+    "data-keyboardnavheader": boolean;
+};
+/**
+ * @hidden
+ */
+export declare const tableKeyboardNavigationBodyAttributes: {
+    "data-keyboardnavbody": boolean;
+};

package/dist/esm/navigation/constants.js

@@ -0,0 +1,75 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+
+var _a, _b, _c;
+/**
+ * @hidden
+ */
+
+
+export var KEYBOARD_NAV_DATA_LEVEL = 'data-keyboardnavlevel';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_DATA_SCOPE = 'data-keyboardnavscope';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_DATA_HEADER = 'data-keyboardnavheader';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_DATA_BODY = 'data-keyboardnavbody';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_DATA_ID = 'data-keyboardnavid';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_DATA_ZONE = 'data-keyboardnavzone';
+/**
+ * @hidden
+ */
+
+export var KEYBOARD_NAV_FILTER_COL_SUFFIX = '_filter';
+var FOCUSABLE_ELEMENTS_BASE = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]'];
+/**
+ * @hidden
+ */
+
+export var FOCUSABLE_ELEMENTS = __spreadArray(__spreadArray([], FOCUSABLE_ELEMENTS_BASE, true), ['[tabindex]'], false);
+/**
+ * @hidden
+ */
+
+export var TABBABLE_ELEMENTS = __spreadArray(__spreadArray([], FOCUSABLE_ELEMENTS_BASE, true), ['[tabindex]'], false).map(function (selector) {
+  return selector + ':not([tabindex="-1"])';
+});
+/**
+ * @hidden
+ */
+
+export var tableKeyboardNavigationScopeAttributes = (_a = {}, _a[KEYBOARD_NAV_DATA_SCOPE] = true, _a);
+/**
+ * @hidden
+ */
+
+export var tableKeyboardNavigationHeaderAttributes = (_b = {}, _b[KEYBOARD_NAV_DATA_HEADER] = true, _b);
+/**
+ * @hidden
+ */
+
+export var tableKeyboardNavigationBodyAttributes = (_c = {}, _c[KEYBOARD_NAV_DATA_BODY] = true, _c);

package/dist/esm/navigation/utils.d.ts

@@ -0,0 +1,161 @@
+import { TableKeyboardNavigationContextType } from './TableKeyboardNavigationContextType';
+import { TableKeyboardNavigationStateType } from './TableKeyboardNavigationStateType';
+/**
+ * @hidden
+ */
+export declare const generateNavigatableId: (navigationId: string, idPrefix: string, type?: 'column' | 'cell') => string;
+/**
+ * @hidden
+ */
+export declare const getNavigatableLevel: (element: Element | null) => number;
+/**
+ * @hidden
+ */
+export declare const getNavigatableId: (element: Element | null) => string;
+/**
+ * @hidden
+ */
+export declare const isNavigatable: (element: Element | null) => boolean;
+/**
+ * @hidden
+ */
+export declare const getNavigatableElement: (scope: HTMLElement, options?: {
+    level: number;
+}) => HTMLElement;
+/**
+ * @hidden
+ */
+export declare const getClosestNavigatableElement: (target: HTMLElement) => Element;
+/**
+ * @hidden
+ */
+export declare const getActiveElement: (scope: HTMLElement, activeId?: string) => HTMLElement;
+/**
+ * @hidden
+ */
+export declare const getClosestScope: (target: HTMLElement) => Element;
+/**
+ * @hidden
+ */
+export declare const getHeaderElement: (scope: HTMLElement) => Element;
+/**
+ * @hidden
+ */
+export declare const getBodyElement: (scope: HTMLElement) => Element;
+/**
+ * @hidden
+ */
+export declare const getFocusableElements: (scope: HTMLElement, options?: {
+    focusable: boolean;
+}) => Element[];
+/**
+ * @hidden
+ */
+export declare const getNavigatableElements: (scope: HTMLElement | null, options?: {
+    level: number;
+}) => any[];
+/**
+ * @hidden
+ */
+export declare const filterNavigatableElements: (options?: {
+    level: number;
+}) => (element: HTMLElement) => boolean;
+/**
+ * @hidden
+ */
+export declare const focusElement: (options: {
+    elementForFocus: HTMLElement;
+    prevElement?: HTMLElement;
+    kbContext?: TableKeyboardNavigationContextType;
+    event: any;
+}) => void;
+/**
+ * @hidden
+ */
+export declare const getIdPrefix: (navigation?: TableKeyboardNavigationStateType) => string;
+/**
+ * @hidden
+ */
+export declare const findNextIdByRowIndex: (initialRowIndex: number, cellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
+    string,
+    [
+        number,
+        number
+    ]
+] | [
+];
+/**
+ * @hidden
+ */
+export declare const findNextIdByCellIndex: (rowIndex: number, initialCellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
+    string,
+    [
+        number,
+        number
+    ]
+] | [
+];
+/**
+ * @hidden
+ */
+export declare const findId: (navigationMatrix: string[][], cellId?: string) => number[] | undefined;
+/**
+ * @hidden
+ */
+export declare const getNextNavigationIndex: (navigation?: TableKeyboardNavigationStateType) => number;
+/**
+ * @hidden
+ */
+export declare const getFilterColumnId: (columnId: string) => string;
+/**
+ * @hidden
+ */
+export declare const tableKeyboardNavigationTools: {
+    generateNavigatableId: (navigationId: string, idPrefix: string, type?: 'column' | 'cell') => string;
+    getNavigatableId: (element: Element | null) => string;
+    getNavigatableLevel: (element: Element | null) => number;
+    getNavigatableElement: (scope: HTMLElement, options?: {
+        level: number;
+    }) => HTMLElement;
+    getClosestNavigatableElement: (target: HTMLElement) => Element;
+    getActiveElement: (scope: HTMLElement, activeId?: string) => HTMLElement;
+    getClosestScope: (target: HTMLElement) => Element;
+    getHeaderElement: (scope: HTMLElement) => Element;
+    getBodyElement: (scope: HTMLElement) => Element;
+    getFocusableElements: (scope: HTMLElement, options?: {
+        focusable: boolean;
+    }) => Element[];
+    getNavigatableElements: (scope: HTMLElement | null, options?: {
+        level: number;
+    }) => any[];
+    filterNavigatableElements: (options?: {
+        level: number;
+    }) => (element: HTMLElement) => boolean;
+    focusElement: (options: {
+        elementForFocus: HTMLElement;
+        prevElement?: HTMLElement;
+        kbContext?: TableKeyboardNavigationContextType;
+        event: any;
+    }) => void;
+    getIdPrefix: (navigation?: TableKeyboardNavigationStateType) => string;
+    isNavigatable: (element: Element | null) => boolean;
+    findNextIdByRowIndex: (initialRowIndex: number, cellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
+        string,
+        [
+            number,
+            number
+        ]
+    ] | [
+    ];
+    findNextIdByCellIndex: (rowIndex: number, initialCellIndex: number, elementId: string | undefined, matrix: string[][], isReverse: boolean) => [
+        string,
+        [
+            number,
+            number
+        ]
+    ] | [
+    ];
+    findId: (navigationMatrix: string[][], cellId?: string) => number[] | undefined;
+    getNextNavigationIndex: (navigation?: TableKeyboardNavigationStateType) => number;
+    getFilterColumnId: (columnId: string) => string;
+};