@progress/kendo-vue-treeview/TreeView.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 n=require("vue"),s=require("@progress/kendo-vue-common"),u=require("./utils/getItemIdUponKeyboardNavigation.js"),r=require("./utils/itemUtils.js"),I=require("./TreeViewItem.js"),h=require("./utils/itemIdUtils.js"),m=require("./utils/FieldsService.js"),p=require("./package-metadata.js"),d=require("./utils/consts.js"),{sizeMap:f}=s.kendoThemeMaps,g=n.defineComponent({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:d.EXPAND_FIELD},selectField:{type:String,default:d.SELECT_FIELD},childrenField:{type:String,default:d.CHILDREN_FIELD},hasChildrenField:{type:String,default:d.HAS_CHILDREN_FIELD},expandIcons:Boolean,checkboxes:Boolean,textField:{type:String,default:d.TEXT_FIELD},disableField:{type:String,default:d.DISABLED_FIELD},checkField:{type:String,default:d.CHECK_FIELD},checkIndeterminateField:{type:String,default:d.CHECK_INDETERMINATE_FIELD},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:h.ZERO_LEVEL_ZERO_NODE_ID}},mounted(){this.currentRtl=s.isRtl(this.$el)},computed:{treeGuid(){return this.id||this.innerId}},created(){s.validatePackage(p.packageMetadata),this.allowExplicitFocus=!1,this.innerId=s.guid()},updated(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()},render(){this.fieldsSvc=new m(this.$props);const{size:e}=this.$props;return n.createVNode("div",{class:s.classNames("k-treeview",{[`k-treeview-${f[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}},[n.createVNode("ul",{class:"k-treeview-lines k-treeview-group",role:"tree"},[this.dataItems.map(function(t,i){const a=s.templateRendering.call(this,this.item,s.getListeners.call(this));return n.createVNode(I.TreeViewItem,{item:t,itemId:i.toString(),treeGuid:this.treeGuid,animate:this.$props.animate,focusedItemId:this.focusedItemId,tabbableItemId:this.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:a,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:a,pageY:l,clientX:c,clientY:o}=e;this.$emit("itemdragover",{target:this,item:t,itemHierarchicalIndex:i,pageX:a,pageY:l,clientX:c,clientY:o})},onRelease(e,t,i){const{pageX:a,pageY:l,clientX:c,clientY:o}=e;this.$emit("itemdragend",{target:this,item:t,itemHierarchicalIndex:i,pageX:a,pageY:l,clientX:c,clientY:o})},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),s.canUseDOM&&(this.blurRequest=window.setTimeout(()=>this.setFocus(void 0),0)),this.$emit("blur",e)},onKeyDown(e){const t=this.getFocusedItem();if(t){const i=u(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=()=>r.isEnabledAndAllParentsEnabled(this.focusedItemId,this.dataItems,this.fieldsSvc),a=this.fieldsSvc.disabled(t);e.keyCode===s.Keys.left&&this.fieldsSvc.expanded(t)&&i()?this.dispatchExpandChange(e,t,this.focusedItemId):e.keyCode===s.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||r.hasChildren(t,this.$props.childrenField))&&i()?this.dispatchExpandChange(e,t,this.focusedItemId):e.keyCode===s.Keys.enter&&!a?this.dispatchItemClick(e,t,this.focusedItemId):e.keyCode===s.Keys.space&&!a&&(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 h.getItemById(e,this.dataItems,this.$props.childrenField||d.CHILDREN_FIELD)},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):r.resolveItemId(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}}});exports.TreeView=g;