@progress/kendo-vue-data-tools/navigation/TableKeyboardNavigation.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@progress/kendo-vue-common"),p=require("./constants.js"),o=require("./utils.js"),N=require("vue"),K=N.defineComponent({name:"KendoTableKeyboardNavigationProvider",props:{navigatable:{type:Boolean,default:!1},id:String},data:function(){return{scope:void 0,kbContext:void 0,navigation:void 0}},provide:function(){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(){const{navigatable:e,id:n}=this.$props;e&&(this.kbContext={activeId:"",level:0},this.navigation={activeElementIsFocused:!1,prevNavigationIndexes:void 0,idPrefix:n||d.guid(),navigationMatrix:[],lastHeaderIndex:-1})},methods:{getKeyboardNavigationAttributes(e){return!e||this.$props.navigatable===!1?{}:{tabIndex:this.kbContext.activeId&&this.kbContext.activeId===e?0:-1,[p.KEYBOARD_NAV_DATA_LEVEL]:this.kbContext.level,[p.KEYBOARD_NAV_DATA_ID]:e}},onComponentDidMount(e){const{scope:n=this.scope}=e;if(this.kbContext&&this.navigation&&n){this.scope=n,this.generateMatrix(e);const a=this.navigation.navigationMatrix[0][0],t=o.tableKeyboardNavigationTools.getActiveElement(n,a);a&&t&&(this.kbContext.activeId=a,t.setAttribute("tabIndex","0"))}},onGetSnapshotBeforeUpdate(e){const{kbContext:n=this.kbContext,navigation:a=this.navigation,document:t}=e;if(n&&a&&t){const s=t.activeElement,i=o.tableKeyboardNavigationTools.getNavigatableId(s);i&&i===n.activeId&&(a.activeElementIsFocused=!0)}},onComponentDidUpdate(e){const{scope:n}=e;if(this.generateMatrix(e),this.kbContext&&this.navigation&&n){if(!o.tableKeyboardNavigationTools.getActiveElement(n,this.kbContext.activeId)){const t=this.navigation.navigationMatrix[0][0],s=o.tableKeyboardNavigationTools.getActiveElement(n,t);t&&s&&(this.kbContext.activeId=t,s.setAttribute("tabIndex","0"),this.navigation.activeElementIsFocused&&s.focus())}this.navigation.activeElementIsFocused=!1}},onFocus(e){const n=this.kbContext;if(e.defaultPrevented||!n)return;const a=e.target,t=o.tableKeyboardNavigationTools.getNavigatableId(a);if(t&&t!==n.activeId){const s=o.tableKeyboardNavigationTools.getClosestScope(a);if(!s)return;const i=o.tableKeyboardNavigationTools.getActiveElement(s,n.activeId);i&&i.setAttribute("tabIndex","-1"),a.setAttribute("tabIndex","0"),n.activeId=t}},onKeyDown(e,n){const{kbContext:a=this.kbContext,navigation:t=this.navigation,onNavigationAction:s}=n;if(e.defaultPrevented||!a||!t)return;if(e.keyCode===d.Keys.esc){const l=o.tableKeyboardNavigationTools.getClosestNavigatableElement(e.target);o.tableKeyboardNavigationTools.focusElement({elementForFocus:l,event:e,kbContext:a});return}const i=e.target,v=o.tableKeyboardNavigationTools.getNavigatableId(i),m=o.tableKeyboardNavigationTools.getNavigatableLevel(i),u=o.tableKeyboardNavigationTools.getClosestScope(i),g=t.navigationMatrix;if(m!==void 0&&u){if(e.keyCode===d.Keys.enter){const l=o.tableKeyboardNavigationTools.getNavigatableElement(i,{level:m+1});if(l){o.tableKeyboardNavigationTools.focusElement({elementForFocus:l,event:e,kbContext:a,prevElement:i});return}else{const b=o.tableKeyboardNavigationTools.getFocusableElements(i)[0];o.tableKeyboardNavigationTools.focusElement({elementForFocus:b,event:e,kbContext:a,prevElement:i});return}}if(e.keyCode===d.Keys.up||e.keyCode===d.Keys.down||e.keyCode===d.Keys.left||e.keyCode===d.Keys.right){const l=e.keyCode===d.Keys.up||e.keyCode===d.Keys.left,b=e.keyCode===d.Keys.up||e.keyCode===d.Keys.down;let f;if(t&&t.prevNavigationIndexes){const[y,c]=t.prevNavigationIndexes;g[y][c]===v?f=t.prevNavigationIndexes:f=o.findId(g,v)}else f=o.findId(g,v);if(f){const[y,c]=f,[r,h]=b?o.findNextIdByRowIndex(y,c,v,g,l):o.findNextIdByCellIndex(y,c,v,g,l);if(r){const x=o.tableKeyboardNavigationTools.getActiveElement(u,r);o.tableKeyboardNavigationTools.focusElement({elementForFocus:x,event:e,kbContext:a,prevElement:i}),t.prevNavigationIndexes=h,s&&s({focusElement:x,event:e})}}}}},generateMatrix(e){const{navigation:n=this.navigation,scope:a}=e;if(!n||!a)return;const t=[],s=o.getHeaderElement(a),i=o.getBodyElement(a);if(!s||!i)return;const v=Array.from(s.children),m=Array.from(i.children);[...v,...m].forEach((u,g)=>{Array.from(u.children).forEach(l=>{const b=o.getNavigatableId(l);if(!b)return;const f=l.rowSpan||1,y=l.colSpan||1;let c;for(let r=g,h=g+f;r<h;r++){if(t[r]||(t[r]=[]),c===void 0){const x=t[r].findIndex(I=>!I);c=x>-1?x:t[r].length}t[r][c]=b||""}for(let r=c+1,h=c+y;r<h;r++)t[g][r]=b||""})}),n.navigationMatrix=t.filter(u=>!!u),n.lastHeaderIndex=v.length-1}},render(){return d.getDefaultSlots(this)[0]}});exports.TableKeyboardNavigationProvider=K;