@progress/kendo-vue-treeview
Version:
295 lines (294 loc) • 8.98 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 { defineComponent as r, createVNode as o } from "vue";
import { Keys as d, canUseDOM as h, classNames as u, kendoThemeMaps as m, templateRendering as I, getListeners as p, validatePackage as f, guid as g, isRtl as b } from "@progress/kendo-vue-common";
import F from "./utils/getItemIdUponKeyboardNavigation.mjs";
import { resolveItemId as E, isEnabledAndAllParentsEnabled as C, hasChildren as k } from "./utils/itemUtils.mjs";
import { TreeViewItem as S } from "./TreeViewItem.mjs";
import { getItemById as x, ZERO_LEVEL_ZERO_NODE_ID as y } from "./utils/itemIdUtils.mjs";
import D from "./utils/FieldsService.mjs";
import { packageMetadata as $ } from "./package-metadata.mjs";
import { CHECK_INDETERMINATE_FIELD as v, CHECK_FIELD as w, DISABLED_FIELD as L, TEXT_FIELD as R, HAS_CHILDREN_FIELD as T, CHILDREN_FIELD as c, SELECT_FIELD as _, EXPAND_FIELD as H } from "./utils/consts.mjs";
const {
sizeMap: B
} = m, G = /* @__PURE__ */ r({
name: "KendoTreeView",
emits: {
blur: null,
focus: null,
itemdragstart: null,
itemdragover: null,
itemdragend: null,
keydown: null,
itemclick: null,
expandchange: null,
checkchange: null
},
props: {
dataItems: Array,
animate: {
type: Boolean,
default: !0
},
id: String,
draggable: Boolean,
tabIndex: Number,
focusIdField: String,
getFocusHierarchicalIndex: Function,
expandField: {
type: String,
default: H
},
selectField: {
type: String,
default: _
},
childrenField: {
type: String,
default: c
},
hasChildrenField: {
type: String,
default: T
},
expandIcons: Boolean,
checkboxes: Boolean,
textField: {
type: String,
default: R
},
disableField: {
type: String,
default: L
},
checkField: {
type: String,
default: w
},
checkIndeterminateField: {
type: String,
default: v
},
item: [Object, String, Function],
ariaMultiSelectable: [String, Boolean],
ariaLabel: String,
ariaLabelledby: String,
size: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
}
},
data() {
return {
currentRtl: !1,
focusedItemId: void 0,
focusedItemPublicId: void 0,
tabbableItemId: y
};
},
mounted() {
this.currentRtl = b(this.$el);
},
computed: {
treeGuid() {
return this.id || this.innerId;
}
},
created() {
f($), this.allowExplicitFocus = !1, this.innerId = g();
},
updated() {
this.allowExplicitFocus = !1, this.refocusDueToFocusIdField();
},
render() {
this.fieldsSvc = new D(this.$props);
const {
size: e
} = this.$props;
return o("div", {
class: u("k-treeview", {
[`k-treeview-${B[e] || e}`]: e,
"k-user-select-none": this.draggable,
"k-rtl": this.currentRtl
}),
onKeydown: this.onKeyDown,
onFocusin: this.onFocus,
onFocusout: this.onBlur,
"aria-multiselectable": this.ariaMultiSelectable ? !0 : void 0,
"aria-label": this.$props["aria-label"],
"aria-labelledby": this.$props["aria-labelledby"],
tabindex: this.$props.tabIndex,
style: {
userSelect: this.draggable ? "none" : void 0
}
}, [o("ul", {
class: "k-treeview-lines k-treeview-group",
role: "tree"
}, [this.dataItems.map(function(t, i) {
const s = I.call(this, this.item, p.call(this));
return o(S, {
item: t,
itemId: i.toString(),
treeGuid: this.treeGuid,
animate: this.$props.animate,
focusedItemId: this.focusedItemId,
tabbableItemId: this.tabbableItemId,
fieldsService: this.fieldsSvc,
itemUI: s,
checkboxes: this.$props.checkboxes,
ariaMultiSelectable: this.ariaMultiSelectable,
onItemClick: this.onItemClick,
onFocusdomelneeded: this.onFocusDomElNeeded,
draggable: this.$props.draggable,
onPress: this.onPress,
onDrag: this.onDrag,
onRelease: this.onRelease,
expandIcons: this.$props.expandIcons,
onExpandChange: this.onExpandChange,
onCheckChange: this.onCheckChange,
key: i,
size: e,
ariaLevel: 1,
isRtl: this.currentRtl
}, null);
}, this)])]);
},
methods: {
onFocusDomElNeeded(e) {
this.allowExplicitFocus && this.focusDomItem(e);
},
onCheckChange(e, t, i) {
this.setFocus(i), this.dispatchCheckChange(e, t, i);
},
onExpandChange(e, t, i) {
this.setFocus(i), this.dispatchExpandChange(e, t, i);
},
onPress(e, t, i) {
this.$emit("itemdragstart", {
target: this,
item: t,
itemHierarchicalIndex: i
});
},
onDrag(e, t, i) {
const {
pageX: s,
pageY: a,
clientX: l,
clientY: n
} = e;
this.$emit("itemdragover", {
target: this,
item: t,
itemHierarchicalIndex: i,
pageX: s,
pageY: a,
clientX: l,
clientY: n
});
},
onRelease(e, t, i) {
const {
pageX: s,
pageY: a,
clientX: l,
clientY: n
} = e;
this.$emit("itemdragend", {
target: this,
item: t,
itemHierarchicalIndex: i,
pageX: s,
pageY: a,
clientX: l,
clientY: n
});
},
onItemClick(e, t, i) {
this.setFocus(i), this.dispatchItemClick(e, t, i);
},
onFocus(e) {
clearTimeout(this.blurRequest), this.focusedItemId === void 0 && this.dataItems.length && this.setFocus(this.tabbableItemId), this.$emit("focus", e);
},
onBlur(e) {
clearTimeout(this.blurRequest), h && (this.blurRequest = window.setTimeout(() => this.setFocus(void 0), 0)), this.$emit("blur", e);
},
onKeyDown(e) {
const t = this.getFocusedItem();
if (t) {
const i = F(t, this.focusedItemId, this.dataItems, e.keyCode, this.fieldsSvc);
i !== this.focusedItemId && (e.preventDefault(), this.allowExplicitFocus = !0, this.setFocus(i)), this.dispatchEventsOnKeyDown(e, t);
}
this.$emit("keydown", e);
},
dispatchEventsOnKeyDown(e, t) {
const i = () => C(this.focusedItemId, this.dataItems, this.fieldsSvc), s = this.fieldsSvc.disabled(t);
e.keyCode === d.left && this.fieldsSvc.expanded(t) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.right && !this.fieldsSvc.expanded(t) && (this.fieldsSvc.hasChildren(t) || k(t, this.$props.childrenField)) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.enter && !s ? this.dispatchItemClick(e, t, this.focusedItemId) : e.keyCode === d.space && !s && (e.preventDefault(), this.dispatchCheckChange(e, t, this.focusedItemId));
},
setFocus(e) {
if (e)
if (this.fieldsSvc.focusIdField) {
const t = this.getItemById(e);
this.focusedItemId = e, this.focusedItemPublicId = this.fieldsSvc.focusId(t);
} else
this.focusedItemId = e;
else {
const t = this.focusedItemId;
this.focusedItemId = void 0, this.focusedItemPublicId = void 0, this.tabbableItemId = t;
}
},
getFocusedItem() {
return this.focusedItemId ? this.getItemById(this.focusedItemId) : void 0;
},
getItemById(e) {
return x(e, this.dataItems, this.$props.childrenField || c);
},
dispatchCheckChange(e, t, i) {
this.$emit("checkchange", {
item: t,
itemHierarchicalIndex: i,
event: e
});
},
dispatchExpandChange(e, t, i) {
this.$emit("expandchange", {
item: t,
itemHierarchicalIndex: i,
event: e
});
},
dispatchItemClick(e, t, i) {
this.$emit("itemclick", {
item: t,
itemHierarchicalIndex: i,
event: e
});
},
refocusDueToFocusIdField() {
if (this.fieldsSvc.focusIdField) {
const e = this.focusedItemPublicId;
if (e) {
const t = this.$props.getFocusHierarchicalIndex ? this.$props.getFocusHierarchicalIndex(e) : E(e, this.fieldsSvc.focusIdField, this.dataItems, this.$props.childrenField);
t !== this.focusedItemId && (this.allowExplicitFocus = !0, this.focusedItemId = t);
}
}
},
focusDomItem(e) {
e.focus();
},
guid() {
return this.treeGuid;
}
}
});
export {
G as TreeView
};