@progress/kendo-vue-data-tools
Version:
220 lines (219 loc) • 7.05 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { getDefaultSlots as E, Keys as l, guid as y } from "@progress/kendo-vue-common";
import { KEYBOARD_NAV_DATA_ID as k, KEYBOARD_NAV_DATA_LEVEL as N } from "./constants.mjs";
import { getHeaderElement as A, getBodyElement as F, getNavigatableId as D, tableKeyboardNavigationTools as o, findId as I, findNextIdByRowIndex as S, findNextIdByCellIndex as K } from "./utils.mjs";
import { defineComponent as M } from "vue";
const _ = /* @__PURE__ */ M({
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 || y(),
navigationMatrix: [],
lastHeaderIndex: -1
});
},
methods: {
getKeyboardNavigationAttributes(e) {
return !e || this.$props.navigatable === !1 ? {} : {
tabIndex: this.kbContext.activeId && this.kbContext.activeId === e ? 0 : -1,
[N]: this.kbContext.level,
[k]: e
};
},
onComponentDidMount(e) {
const {
scope: n = this.scope
} = e;
if (this.kbContext && this.navigation && n) {
this.scope = n, this.generateMatrix(e);
const i = this.navigation.navigationMatrix[0][0], t = o.getActiveElement(n, i);
i && t && (this.kbContext.activeId = i, t.setAttribute("tabIndex", "0"));
}
},
onGetSnapshotBeforeUpdate(e) {
const {
kbContext: n = this.kbContext,
navigation: i = this.navigation,
document: t
} = e;
if (n && i && t) {
const s = t.activeElement, a = o.getNavigatableId(s);
a && a === n.activeId && (i.activeElementIsFocused = !0);
}
},
onComponentDidUpdate(e) {
const {
scope: n
} = e;
if (this.generateMatrix(e), this.kbContext && this.navigation && n) {
if (!o.getActiveElement(n, this.kbContext.activeId)) {
const t = this.navigation.navigationMatrix[0][0], s = o.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 i = e.target, t = o.getNavigatableId(i);
if (t && t !== n.activeId) {
const s = o.getClosestScope(i);
if (!s)
return;
const a = o.getActiveElement(s, n.activeId);
a && a.setAttribute("tabIndex", "-1"), i.setAttribute("tabIndex", "0"), n.activeId = t;
}
},
onKeyDown(e, n) {
const {
kbContext: i = this.kbContext,
navigation: t = this.navigation,
onNavigationAction: s
} = n;
if (e.defaultPrevented || !i || !t)
return;
if (e.keyCode === l.esc) {
const d = o.getClosestNavigatableElement(e.target);
o.focusElement({
elementForFocus: d,
event: e,
kbContext: i
});
return;
}
const a = e.target, g = o.getNavigatableId(a), b = o.getNavigatableLevel(a), m = o.getClosestScope(a), f = t.navigationMatrix;
if (b !== void 0 && m) {
if (e.keyCode === l.enter) {
const d = o.getNavigatableElement(a, {
level: b + 1
});
if (d) {
o.focusElement({
elementForFocus: d,
event: e,
kbContext: i,
prevElement: a
});
return;
} else {
const v = o.getFocusableElements(a)[0];
o.focusElement({
elementForFocus: v,
event: e,
kbContext: i,
prevElement: a
});
return;
}
}
if (e.keyCode === l.up || e.keyCode === l.down || e.keyCode === l.left || e.keyCode === l.right) {
const d = e.keyCode === l.up || e.keyCode === l.left, v = e.keyCode === l.up || e.keyCode === l.down;
let u;
if (t && t.prevNavigationIndexes) {
const [x, c] = t.prevNavigationIndexes;
f[x][c] === g ? u = t.prevNavigationIndexes : u = I(f, g);
} else
u = I(f, g);
if (u) {
const [x, c] = u, [r, h] = v ? S(x, c, g, f, d) : K(x, c, g, f, d);
if (r) {
const p = o.getActiveElement(m, r);
o.focusElement({
elementForFocus: p,
event: e,
kbContext: i,
prevElement: a
}), t.prevNavigationIndexes = h, s && s({
focusElement: p,
event: e
});
}
}
}
}
},
generateMatrix(e) {
const {
navigation: n = this.navigation,
scope: i
} = e;
if (!n || !i)
return;
const t = [], s = A(i), a = F(i);
if (!s || !a)
return;
const g = Array.from(s.children), b = Array.from(a.children);
[...g, ...b].forEach((m, f) => {
Array.from(m.children).forEach((d) => {
const v = D(d);
if (!v)
return;
const u = d.rowSpan || 1, x = d.colSpan || 1;
let c;
for (let r = f, h = f + u; r < h; r++) {
if (t[r] || (t[r] = []), c === void 0) {
const p = t[r].findIndex((C) => !C);
c = p > -1 ? p : t[r].length;
}
t[r][c] = v || "";
}
for (let r = c + 1, h = c + x; r < h; r++)
t[f][r] = v || "";
});
}), n.navigationMatrix = t.filter((m) => !!m), n.lastHeaderIndex = g.length - 1;
}
},
/**
* @hidden
*/
render() {
return E(this)[0];
}
});
export {
_ as TableKeyboardNavigationProvider
};