@progress/kendo-vue-treeview 8.0.3-develop.2 → 8.0.3-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ItemRenderProps.d.ts +20 -0
- package/TreeView.d.ts +241 -0
- package/TreeView.mjs +3 -3
- package/TreeViewDragAnalyzer.d.ts +70 -0
- package/TreeViewDragClue.d.ts +48 -0
- package/TreeViewItem.d.ts +127 -0
- package/TreeViewOperationDescriptors.d.ts +83 -0
- package/TreeViewProps.d.ts +133 -0
- package/dist/cdn/js/kendo-vue-treeview.js +1 -1
- package/events.d.ts +150 -0
- package/handleTreeViewCheckChange.d.ts +56 -0
- package/index.d.mts +12 -937
- package/index.d.ts +12 -937
- package/moveTreeViewItem.d.ts +53 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +12 -6
- package/processTreeViewItems.d.ts +31 -0
- package/utils/FieldsService.d.ts +33 -0
- package/utils/SortedPublicItemIds.d.ts +15 -0
- package/utils/consts.d.ts +47 -0
- package/utils/getItemIdUponKeyboardNavigation.d.ts +12 -0
- package/utils/getItemIdUponKeyboardNavigation.mjs +1 -1
- package/utils/itemIdUtils.d.ts +67 -0
- package/utils/itemIdUtils.mjs +51 -51
- package/utils/itemUtils.d.ts +52 -0
- package/utils/misc.d.ts +16 -0
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { TreeViewCheckChangeEvent, TreeViewExpandChangeEvent, TreeViewItemClickEvent, TreeViewItemDragEndEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent } from './events';
|
|
9
|
+
/**
|
|
10
|
+
* Represents the props of the [Kendo UI for Vue TreeView component]({% slug overview_treeview %}).
|
|
11
|
+
*/
|
|
12
|
+
export interface TreeViewProps {
|
|
13
|
+
/**
|
|
14
|
+
* Sets the data of the TreeView ([more information and examples]({% slug databinding_treeview %})).
|
|
15
|
+
*/
|
|
16
|
+
dataItems?: any[] | null;
|
|
17
|
+
/**
|
|
18
|
+
* Controls the animation. By default, the expand and collapse animations are enabled.
|
|
19
|
+
*/
|
|
20
|
+
animate?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Sets a tabIndex of the TreeView DOM element.
|
|
23
|
+
*/
|
|
24
|
+
tabIndex?: number;
|
|
25
|
+
/**
|
|
26
|
+
* The TreeView has a built-in implementation of focusing and keyboard navigation. By default, the component uses hierarchical indices to uniquely match the focused item. You can use the `focusIdField` prop for specifying the name of the field which will uniquely describe an item as an alternative to its hierarchical index.
|
|
27
|
+
*/
|
|
28
|
+
focusIdField?: string;
|
|
29
|
+
/**
|
|
30
|
+
* When `focusIdField` is set, the TreeView executes a depth-first search on the data to find the currently focused item. The `getFocusHierarchicalIndex` prop specifies the function that will be used as an alternative to the default search algorithm.
|
|
31
|
+
*/
|
|
32
|
+
getFocusHierarchicalIndex?: (itemId: any) => string | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered ([see example]({% slug expansion_ways_treeview %})).
|
|
35
|
+
*/
|
|
36
|
+
expandIcons?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Fires when the expanding or collapsing of an item is requested ([see example]({% slug expansion_ways_treeview %})).
|
|
39
|
+
*/
|
|
40
|
+
onExpandChange?: (event: TreeViewExpandChangeEvent) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Fires when an item is clicked or when `Enter` is pressed on a focused item ([see example]({% slug selection_ways_treeview %})).
|
|
43
|
+
*/
|
|
44
|
+
onItemClick?: (event: TreeViewItemClickEvent) => void;
|
|
45
|
+
/**
|
|
46
|
+
* Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
|
|
47
|
+
*/
|
|
48
|
+
expandField?: string;
|
|
49
|
+
/**
|
|
50
|
+
* Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
|
|
51
|
+
*/
|
|
52
|
+
selectField?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
|
|
55
|
+
*/
|
|
56
|
+
hasChildrenField?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Specifies the name of the field which will provide an array representation of the item children.
|
|
59
|
+
*/
|
|
60
|
+
childrenField?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.
|
|
63
|
+
*/
|
|
64
|
+
textField?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
|
|
67
|
+
*/
|
|
68
|
+
disableField?: string;
|
|
69
|
+
/**
|
|
70
|
+
* Defines the component that will be used for rendering each of the TreeView items ([see example]({% slug rendering_treeview %})).
|
|
71
|
+
*/
|
|
72
|
+
item?: any;
|
|
73
|
+
/**
|
|
74
|
+
* Indicates that the user can select more than one TreeView items. If the TreeView is in a multiple selection mode, set the `aria-multiselectable` prop to `true` ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
|
|
75
|
+
*/
|
|
76
|
+
ariaMultiSelectable?: boolean | 'false' | 'true' | string;
|
|
77
|
+
/**
|
|
78
|
+
* Defines a string value that labels the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
|
|
79
|
+
*/
|
|
80
|
+
ariaLabel?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Identifies the element or elements which will label the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
|
|
83
|
+
*/
|
|
84
|
+
ariaLabelledby?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Controls the rendering of checkboxes. By default, the checkboxes are not rendered ([see example]({% slug checkboxes_treeview %})).
|
|
87
|
+
*/
|
|
88
|
+
checkboxes?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
|
|
91
|
+
*/
|
|
92
|
+
checkField?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. Defaults to `checkIndeterminate`.
|
|
95
|
+
*/
|
|
96
|
+
checkIndeterminateField?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Fires when a checkbox is clicked or when `Space` is pressed on a focused item ([see example]({% slug checkboxes_treeview %})).
|
|
99
|
+
*/
|
|
100
|
+
onCheckChange?: (event: TreeViewCheckChangeEvent) => void;
|
|
101
|
+
/**
|
|
102
|
+
* Controls the unique id of the TreeView component.
|
|
103
|
+
*/
|
|
104
|
+
id?: string;
|
|
105
|
+
/**
|
|
106
|
+
* Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched ([see example]({% slug dragdrop_treeview %})).
|
|
107
|
+
*/
|
|
108
|
+
draggable?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Fires when the dragging of an item has started.
|
|
111
|
+
*/
|
|
112
|
+
onItemDragStart?: (event: TreeViewItemDragStartEvent) => void;
|
|
113
|
+
/**
|
|
114
|
+
* Fires when a dragged item changes its position ([see example]({% slug dragdrop_treeview %})).
|
|
115
|
+
*/
|
|
116
|
+
onItemDragOver?: (event: TreeViewItemDragOverEvent) => void;
|
|
117
|
+
/**
|
|
118
|
+
* Fires when a dragged item is dropped ([see example]({% slug dragdrop_treeview %})).
|
|
119
|
+
*/
|
|
120
|
+
onItemDragEnd?: (event: TreeViewItemDragEndEvent) => void;
|
|
121
|
+
/**
|
|
122
|
+
* Configures the `size` of the TreeView.
|
|
123
|
+
*
|
|
124
|
+
* The available options are:
|
|
125
|
+
* - small
|
|
126
|
+
* - medium
|
|
127
|
+
* - large
|
|
128
|
+
* - undefined—Does not set a size `className`.
|
|
129
|
+
*
|
|
130
|
+
* @default `undefined`
|
|
131
|
+
*/
|
|
132
|
+
size?: 'small' | 'medium' | 'large';
|
|
133
|
+
}
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-animation"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-animation","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueTreeview={},e.Vue,e.KendoVueCommon,e.KendoVueAnimation,e.KendoSVGIcons)}(this,(function(e,t,i,s,n){"use strict";const d="",r="_";function o(e,t,i){if(p(e))return t[Number(e)];{const s=t[Number(c(e))],n=s&&s[i]||[];return n.length?o(l(e),n,i):void 0}}function c(e){return m(e)?e:e.split(r)[0]}function l(e){if(m(e))return e;{const t=e.indexOf(r);return e.substring(t+1)}}function a(e){return h("0",e)}function h(e,t){return e=e.toString(),t?t+r+e:e}function u(e){const t=e.lastIndexOf(r);return t<0?d:e.substring(0,t)}function m(e){return e===d||e.indexOf(r)<0}function p(e){return e!==d&&e.indexOf(r)<0}function f(e){return e.split(r)}function g(e){const t=e.lastIndexOf(r);return t<0?e:e.substring(t+1)}function I(e,t){const i=t;t="r"+r+t;const s=u(e="r"+r+e)+r;if(t.startsWith(s)){const i=t.substring(s.length);if(i){const t=c(i);if(Number(g(e))<Number(t)){return l(s+(Number(t)-1).toString()+i.substring(t.length))}}}return i}var b=Object.defineProperty,v=(e,t,i)=>((e,t,i)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,t+"",i);let k=class{constructor(){v(this,"objects",[])}init(e){let t;for(let i=0;i<e.length;i++)i%5e4==0&&(t={},this.objects.push(t)),t[e[i]]=!0}hasId(e){return this.objects.some((t=>t[e]))}};function x(e,t){const i=(e||"").split(".");let s=t;return i.forEach((e=>{s=s?s[e]:void 0})),s}function F(e){return void 0!==e.length}function C(e,t){const i=x(t,e);return!(!i||!i.length)}function S(e,t){return t.expanded(e)&&C(e,t.getChildrenField())}function $(e,t,i,s){const n=[],r=new k;return r.init(e),E(r,t,i,d,n,s),n}function y(e,t,i,s,n){const d=Number(c(t));if(d>=e.length)return e;let r=e,o=e[d];return o[s]||(r=e.slice(),o=r[d]=Object.assign({},o,{[s]:!0})),p(t)?i(o):o[n]&&(o[n]=y(o[n],l(t),i,s,n)),r}function w(e,t,i){const s=f(e);let n=t;for(let e=0;e<s.length;e++){const t=n[Number(s[e])];if(i.disabled(t))return!1;n=t[i.getChildrenField()]}return!0}function N(e,t,i,s,n){return(e[s]||[]).every(((e,s)=>n.indexOf(i?x(i,e):h(s,t))>-1))}function D(e,t,i){const s=i.slice();if(p(e))s.splice(Number(e),1);else{const i=Number(c(e)),n=s[i]={...s[i]};n[t]=D(l(e),t,n[t])}return s}function V(e,t,i,s,n){const d=n.slice();if(p(s))if("child"===t){const t=d[Number(s)]={...d[Number(s)]};t[i]?(t[i]=t[i].slice(),t[i].push(e)):t[i]=[e]}else d.splice(Number(s)+("after"===t?1:0),0,e);else{const n=Number(c(s)),r=d[n]={...d[n]};r[i]=V(e,t,i,l(s),r[i])}return d}function E(e,t,i,s,n,d){for(let r=0;r<i.length;r++){const o=i[r],c=h(r,s);e.hasId(x(t,o))&&n.push(c),C(o,d)&&E(e,t,x(d,o),c,n,d)}}function R(e,t,s,n,d){switch(n){case i.Keys.left:return p(t)||d.expanded(e)&&w(t,s,d)?t:u(t);case i.Keys.right:return S(e,d)?a(t):t;case i.Keys.up:return function(){const e=Number(g(t)),i=u(t);return e?T(h(e-1,i),s,d):p(t)?t:i}();case i.Keys.down:return S(e,d)?a(t):O(t,s,d)||t;case i.Keys.home:return"0";case i.Keys.end:return function(){let e,t=(s.length-1).toString(),i=s[s.length-1];for(;S(i,d);)e=i[d.getChildrenField()],t=h(e.length-1,t),i=e[e.length-1];return t}();default:return t}}function O(e,t,i){const s=u(e),n=s?o(s,t,i.getChildrenField()):void 0,d=n?n[i.getChildrenField()]:t,r=Number(g(e));return r<d.length-1?h(r+1,s):n?O(s,t,i):void 0}function T(e,t,i){const s=o(e,t,i.getChildrenField());return S(s,i)?T(h(s[i.getChildrenField()].length-1,e),t,i):e}const M="expanded",G="items",K="selected",P="checked",B="checkIndeterminate",j="_kendoItemId",z="_kendoTreeViewGuid";function H(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const{sizeMap:_}=i.kendoThemeMaps,U=t.defineComponent({name:"KendoTreeViewItem",props:{item:Object,itemId:String,treeGuid:String,animate:Boolean,focusedItemId:String,tabbableItemId:String,fieldsService:Object,itemUI:Object,ariaMultiSelectable:Boolean,expandIcons:Boolean,checkboxes:Boolean,onFocusDomElNeeded:Object,draggable:Boolean,isRtl:Boolean,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},disabled:Boolean,ariaLevel:Number,onItemClick:Function,onExpandChange:Function,onCheckChange:Function,onPress:Function,onDrag:Function,onRelease:Function,onFocusdomelneeded:Function},computed:{fieldsSvc(){return this.$props.fieldsService},currentTabIndex(){return(this.$props.focusedItemId||this.$props.tabbableItemId)===this.itemId?0:-1},ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||C(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0},ariaChecked(){if(this.$props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"},ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.$props.ariaMultiSelectable?!!this.computedDisabled&&void 0:void 0)},computedDisabled(){const e=this.fieldsSvc.disabled(this.item);return void 0!==e?e:this.disabled}},created(){this.itemGuid=i.guid(),this.prevFocusedItemId=this.focusedItemId,this.prevFieldsService=this.fieldsService,this.prevItem=this.item},data:()=>({isMounted:!1}),watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t},fieldsService:function(e,t){this.prevFieldsService=t},item:function(e,t){this.prevItem=t}},mounted(){const e=this.$props.focusedItemId,t=this.itemId;e&&e===t&&this.$emit("focusDomElNeeded",this.$el),this.checkboxElement=i.getRef(this,"checkboxElement"),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item)),this.assignDraggableMeta(this.$refs.treeviewitemcontent),this.isMounted=!0},updated(){const e=this.$props.focusedItemId;if(e&&e!==this.prevFocusedItemId&&e===this.itemId&&this.$emit("focusdomelneeded",this.$el),this.checkboxElement=i.getRef(this,"checkboxElement"),this.checkboxElement){const e=this.fieldsSvc.checkIndeterminate(this.item);e!==this.prevFieldsService.checkIndeterminate(this.prevItem)&&(this.checkboxElement.indeterminate=e)}this.assignDraggableMeta(this.$refs.treeviewitemcontent)},render(){let e,n;const d=function(){return S(this.item,this.fieldsSvc)?t.createVNode("ul",{class:"k-treeview-group",role:"group"},[this.fieldsSvc.children(this.item).map((function(e,i){return t.createVNode(U,{item:e,itemId:h(i,this.itemId),treeGuid:this.$props.treeGuid,animate:this.$props.animate,focusedItemId:this.$props.focusedItemId,tabbableItemId:this.$props.tabbableItemId,fieldsService:this.$props.fieldsService,itemUI:this.$props.itemUI,checkboxes:this.$props.checkboxes,ariaMultiSelectable:this.$props.ariaMultiSelectable,ariaLevel:this.$props.ariaLevel+1,onItemClick:this.handleItemClick,onFocusdomelneeded:this.handleFocusDomElNeeded,draggable:this.$props.draggable,onPress:this.handlePress,onDrag:this.handleDrag,onRelease:this.handleRelease,expandIcons:this.$props.expandIcons,onExpandChange:this.handleExpandChange,onCheckChange:this.handleCheckChange,key:i,size:this.$props.size,disabled:this.computedDisabled,isRtl:this.$props.isRtl},null)}),this)]):void 0},r=i.getTemplate.call(this,{h:t.h,template:this.$props.itemUI,defaultRendering:this.fieldsSvc.text(this.item),additionalProps:{item:this.item,itemHierarchicalIndex:this.itemId}}),o=function(){return t.createVNode("span",{class:"k-treeview-leaf",style:{touchAction:"none"}},[t.createVNode("span",{class:"k-treeview-leaf-text"},[r])])},c=this.itemId.split("_").length;return t.createVNode("li",{class:i.classNames("k-treeview-item"),style:{"--kendo-treeview-level":c},tabindex:this.currentTabIndex,role:"treeitem","aria-level":this.$props.ariaLevel,"aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.computedDisabled||void 0},[t.createVNode("span",{class:this.getContentClassName(),ref:"treeviewitemcontent",onClick:this.handleItemContentClick},[function(){return this.$props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||C(this.item,this.fieldsSvc.getChildrenField()))&&t.createVNode("span",{class:i.classNames("k-treeview-toggle",{"k-disabled":this.computedDisabled})},[t.createVNode(i.Icon,{name:this.getIconClassName(),icon:this.getIconSVG(),onClick:this.handleExpandChange},null)])}.call(this),function(){if(this.$props.checkboxes){const e=this.$props.size,s=!!this.fieldsSvc.checked(this.item);return t.createVNode("span",{class:"k-checkbox-wrap",role:"presentation"},[t.createVNode("input",{type:"checkbox",class:i.classNames("k-checkbox",{[`k-checkbox-${_[e]||e}`]:e,"k-disabled":this.computedDisabled,"k-checked":s}),"aria-label":this.item.text,checked:s,id:this.itemGuid,tabindex:-1,onChange:this.handleCheckChange,ref:i.setRef(this,"checkboxElement")},null),t.createVNode("label",{class:"k-checkbox-label",for:this.itemGuid},null)])}}.call(this),this.$props.draggable?t.createVNode(i.Draggable,{onPress:e=>this.handlePress(e),onDrag:e=>this.handleDrag(e),onRelease:e=>this.handleRelease(e)},H(e=o.call(this))?e:{default:()=>[e]}):o.call(this)]),this.$props.animate&&this.isMounted?t.createVNode(s.Reveal,{appear:this.ariaExpanded,transitionEnterDuration:200,transitionExitDuration:200,key:this.itemGuid+"_animation",style:{display:"block"}},H(n=d.call(this))?n:{default:()=>[n]}):d.call(this)])},methods:{handleItemContentClick(e){e.target.closest(".k-treeview-toggle")||(this.$props.checkboxes&&!this.computedDisabled&&!e.target.closest(".k-checkbox-wrap")&&this.$emit("checkChange",e,this.item,this.itemId),this.$emit("itemClick",e,this.item,this.itemId))},handleCheckChange(e,t,i){this.$emit("checkChange",e,t||this.item,i||this.itemId)},handleExpandChange(e,t,i){e.stopPropagation(),this.$emit("expandChange",e,t||this.item,i||this.itemId)},handleItemClick(e,t,i){this.$emit("itemClick",e,t||this.item,i||this.itemId)},handlePress(e,t,i){this.$emit("press",e,t||{...this.item},i||this.itemId)},handleDrag(e,t,i){this.$emit("drag",e,t||this.item,i||this.itemId)},handleRelease(e,t,i){this.$emit("release",e,t||this.item,i||this.itemId)},handleFocusDomElNeeded(e){this.$emit("focusdomelneeded",e)},getIconClassName(){const e=this.fieldsSvc.expanded(this.item);return e&&!C(this.item,this.fieldsSvc.getChildrenField())?"loading":e?"chevron-down":this.$props.isRtl?"chevron-left":"chevron-right"},getIconSVG(){return this.fieldsSvc.expanded(this.item)?n.chevronDownIcon:this.$props.isRtl?n.chevronLeftIcon:n.chevronRightIcon},getContentClassName(){return i.classNames("k-treeview-item-content",{"k-focus":this.$props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.computedDisabled})},assignDraggableMeta(e){e&&!e[j]&&(e[j]=this.$props.itemId,e[z]=this.$props.treeGuid)}}});var Y=Object.defineProperty,L=(e,t,i)=>((e,t,i)=>t in e?Y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);let X=class{constructor(e){L(this,"focusIdField"),L(this,"expandField"),L(this,"selectField"),L(this,"childrenField"),L(this,"hasChildrenField"),L(this,"textField"),L(this,"disableField"),L(this,"checkField"),L(this,"checkIndeterminateField"),this.expandField=e.expandField,this.selectField=e.selectField,this.hasChildrenField=e.hasChildrenField,this.childrenField=e.childrenField,this.textField=e.textField,this.disableField=e.disableField,this.checkField=e.checkField,this.checkIndeterminateField=e.checkIndeterminateField,this.focusIdField=e.focusIdField}expanded(e){return x(this.expandField,e)}selected(e){return x(this.selectField,e)}text(e){return x(this.textField,e)}disabled(e){return x(this.disableField,e)}hasChildren(e){return x(this.hasChildrenField,e)}children(e){return x(this.childrenField,e)||[]}checked(e){return x(this.checkField,e)}checkIndeterminate(e){return x(this.checkIndeterminateField,e)}focusId(e){return this.focusIdField&&x(this.focusIdField,e)}getChildrenField(){return this.childrenField}};const q={name:"@progress/kendo-vue-treeview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1650203065,version:"8.0.3-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},{sizeMap:A}=i.kendoThemeMaps,W=t.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:M},selectField:{type:String,default:K},childrenField:{type:String,default:G},hasChildrenField:{type:String,default:"hasChildren"},expandIcons:Boolean,checkboxes:Boolean,textField:{type:String,default:"text"},disableField:{type:String,default:"disabled"},checkField:{type:String,default:P},checkIndeterminateField:{type:String,default:B},item:[Object,String,Function],ariaMultiSelectable:[String,Boolean],ariaLabel:String,ariaLabelledby:String,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}}},data:()=>({currentRtl:!1,focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:"0"}),mounted(){this.currentRtl=i.isRtl(this.$el)},computed:{treeGuid(){return this.id||this.innerId}},created(){i.validatePackage(q),this.allowExplicitFocus=!1,this.innerId=i.guid()},updated(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()},render(){this.fieldsSvc=new X(this.$props);const{size:e}=this.$props;return t.createVNode("div",{class:i.classNames("k-treeview",{[`k-treeview-${A[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||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}},[t.createVNode("ul",{class:"k-treeview-lines k-treeview-group",role:"tree"},[this.dataItems.map((function(s,n){const d=i.templateRendering.call(this,this.item,i.getListeners.call(this));return t.createVNode(U,{item:s,itemId:n.toString(),treeGuid:this.treeGuid,animate:this.$props.animate,focusedItemId:this.focusedItemId,tabbableItemId:this.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:d,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:n,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:n,clientX:d,clientY:r}=e;this.$emit("itemdragover",{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:d,clientY:r})},onRelease(e,t,i){const{pageX:s,pageY:n,clientX:d,clientY:r}=e;this.$emit("itemdragend",{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:d,clientY:r})},onItemClick(e,t,i){this.setFocus(i),this.dispatchItemClick(e,t,i)},onFocus(e){clearTimeout(this.blurRequest),void 0===this.focusedItemId&&this.dataItems.length&&this.setFocus(this.tabbableItemId),this.$emit("focus",e)},onBlur(e){clearTimeout(this.blurRequest),i.canUseDOM&&(this.blurRequest=window.setTimeout((()=>this.setFocus(void 0)),0)),this.$emit("blur",e)},onKeyDown(e){const t=this.getFocusedItem();if(t){const i=R(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 s=()=>w(this.focusedItemId,this.dataItems,this.fieldsSvc),n=this.fieldsSvc.disabled(t);e.keyCode===i.Keys.left&&this.fieldsSvc.expanded(t)&&s()||e.keyCode===i.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||C(t,this.$props.childrenField))&&s()?this.dispatchExpandChange(e,t,this.focusedItemId):e.keyCode!==i.Keys.enter||n?e.keyCode===i.Keys.space&&!n&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.focusedItemId)):this.dispatchItemClick(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 e=this.focusedItemId;this.focusedItemId=void 0,this.focusedItemPublicId=void 0,this.tabbableItemId=e}},getFocusedItem(){return this.focusedItemId?this.getItemById(this.focusedItemId):void 0},getItemById(e){return o(e,this.dataItems,this.$props.childrenField||G)},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):function(e,t,i,s){const n=$([e],t,i,s);return n.length?n[0]:void 0}(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}}});function J(e,t,i,s,n){if(i){let{ids:d,field:r}=Q(i,t);return function(e,t,i,s,n){let d=e;return t.forEach((e=>{d=y(d,e,(e=>Z(i,e)),s,n)})),d}(e,!F(i)&&i.idField?$(d,i.idField,e,n):d,r,s,n)}return e}function Q(e,t){let i,s;return F(e)?(i=e,s=t):(i=e.ids||[],s=e.operationField||t),{ids:i,field:s}}function Z(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function ee(e,t,i,s,n){let d=!1;for(let r=0;r<e.length;r++){const o=e[r];if(x(s,o)){if(!d)for(let e=0;e<t.length;e++)Z(n,t[e]);d=!0,o[i]&&ee(o[i],[],i,s,n)}else o[i]&&ee(o[i],d?[o]:t.concat([o]),i,s,n)}}const te=t.defineComponent({name:"KendoTreeViewDragClue",data:()=>({visible:!1,top:0,left:0,text:"",operationIconName:"cancel",operationSvg:n.cancelIcon}),render(){const e={top:this.top+"px",left:this.left+"px"};return this.visible&&t.createVNode("div",{class:"k-header k-drag-clue",style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px",...e}},[t.createVNode(i.Icon,{name:i.getIconName(this.operationIconName),icon:this.operationSvg,class:"k-drag-status"},null),this.text])},methods:{show(e,t,i,s){this.visible=!0,this.top=e,this.left=t,this.text=i,"string"==typeof s?this.operationIconName=s:this.operationSvg=s},hide(){this.visible=!1}}});var ie=Object.defineProperty,se=(e,t,i)=>((e,t,i)=>t in e?ie(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);e.TreeView=W,e.TreeViewDragAnalyzer=class{constructor(e){se(this,"itemId"),se(this,"treeViewGuid"),se(this,"initialized",!1),se(this,"destDomNodeWithMeta"),se(this,"destItemId"),se(this,"destTreeViewGuid"),this.event=e,this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid()}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[j];)t=t.parentNode;t&&t[j]&&(this.destDomNodeWithMeta=t,this.destItemId=t[j],this.destTreeViewGuid=t[z])}},e.TreeViewDragClue=te,e.TreeViewItem=U,e.handleTreeViewCheckChange=function(e,t,i,s={},n){if(!i||!i.length)return[];const{ids:d,idField:r}=function(e){let t,i;return F(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),c=r?x(r,e.item):e.itemHierarchicalIndex,l=d.indexOf(c),a=-1===l,m=n||G;let p;return s.singleMode?p=a?[c]:[]:(p=d.slice(),a?p.push(c):p.splice(l,1),s.checkChildren&&function(e,t,i,s,n,d){(function(e,t,i,s){return s?function e(t){let n=[];const d=t[i]||[];for(let t=0;t<d.length;t++)n.push(x(s,d[t])),n=n.concat(e(d[t]));return n}(e):function e(t,s){let n=[];const d=t[i]||[];for(let t=0;t<d.length;t++){const i=h(t,s);n.push(i),n=n.concat(e(d[t],i))}return n}(e,t)})(e,t,n,s).forEach((e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)}))}(e.item,e.itemHierarchicalIndex,a,r,m,p),s.checkParents&&function(e,t,i,s,n,d){const r=h();let c=r.next();function l(){for(;!c.done;){const{id:e,item:t}=c.value;if(-1!==n.indexOf(e)||!N(t,e,i,s,n))break;n.push(e),c=r.next()}}function a(){for(;!c.done;){const{id:e}=c.value,t=n.indexOf(e);if(!(t>-1))break;n.splice(t,1),c=r.next()}}function*h(){if(i){const n=function(e,t,i){const s=[],n=f(e);let d=i;for(let e=0;e<n.length-1&&d;e++){const i=d[Number(n[e])];s.push(i),d=i[t]}return s}(e,s,d);for(let e=n.length-1;e>-1;e--)yield{id:x(i,n[e]),item:t?n[e]:void 0}}else{let i=u(e);for(;i;)yield{id:i,item:t?o(i,d,s):void 0},i=u(i)}}t?l():a()}(e.itemHierarchicalIndex,a,r,m,p,i)),F(t)?p:Object.assign({},t,{ids:p})},e.moveTreeViewItem=function(e,t,i,s,n,d){const r=d||G;if(!(t&&t.length&&e&&s)||n&&!n.length||!o(s,n&&n!==t?n:t,r))return l();const c=o(e,t,r);if(!c)return l();if(n&&n!==t){return{sourceData:D(e,r,t),targetData:V(c,i,r,s,n)}}{if(`${s}_`.startsWith(`${e}_`))return l();const d=D(e,r,t),o=V(c,i,r,I(e,s),d);return n?{sourceData:o,targetData:o}:o}function l(){return n?{sourceData:t,targetData:n}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const s=t.cloneField||"cloned",n=t.expandField||M,d=t.selectField||K,r=t.checkField||P,o=t.childrenField||G;return i=J(i,n,t.expand,s,o),i=J(i,d,t.select,s,o),i=J(i,r,t.check,s,o),function(e,t,i){if(i&&!F(i)&&i.applyCheckIndeterminate){const{field:s}=Q(i,P),n=i.checkIndeterminateField||B;for(let i=0;i<e.length;i++){const d=e[i],r=d[t];r&&ee(r,x(s,d)?[]:[d],t,s,n)}}}(i,o,t.check),i}}));
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-animation"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-animation","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueTreeview={},e.Vue,e.KendoVueCommon,e.KendoVueAnimation,e.KendoSVGIcons)}(this,function(e,t,i,s,n){"use strict";function d(e,t,i){if(u(e))return t[Number(e)];{const s=t[Number(r(e))],n=s&&s[i]||[];return n.length?d(o(e),n,i):void 0}}function r(e){return h(e)?e:e.split("_")[0]}function o(e){if(h(e))return e;{const t=e.indexOf("_");return e.substring(t+1)}}function c(e){return l("0",e)}function l(e,t){return e=e.toString(),t?t+"_"+e:e}function a(e){const t=e.lastIndexOf("_");return t<0?"":e.substring(0,t)}function h(e){return""===e||e.indexOf("_")<0}function u(e){return""!==e&&e.indexOf("_")<0}function m(e){return e.split("_")}function p(e){const t=e.lastIndexOf("_");return t<0?e:e.substring(t+1)}var f=Object.defineProperty,g=(e,t,i)=>((e,t,i)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,t+"",i);let I=class{constructor(){g(this,"objects",[])}init(e){let t;for(let i=0;i<e.length;i++)i%5e4==0&&(t={},this.objects.push(t)),t[e[i]]=!0}hasId(e){return this.objects.some(t=>t[e])}};function b(e,t){const i=(e||"").split(".");let s=t;return i.forEach(e=>{s=s?s[e]:void 0}),s}function v(e){return void 0!==e.length}function k(e,t){const i=b(t,e);return!(!i||!i.length)}function x(e,t){return t.expanded(e)&&k(e,t.getChildrenField())}function F(e,t,i,s){const n=[],d=new I;return d.init(e),N(d,t,i,"",n,s),n}function C(e,t,i,s,n){const d=Number(r(t));if(d>=e.length)return e;let c=e,l=e[d];return l[s]||(c=e.slice(),l=c[d]=Object.assign({},l,{[s]:!0})),u(t)?i(l):l[n]&&(l[n]=C(l[n],o(t),i,s,n)),c}function S(e,t,i){const s=m(e);let n=t;for(let e=0;e<s.length;e++){const t=n[Number(s[e])];if(i.disabled(t))return!1;n=t[i.getChildrenField()]}return!0}function $(e,t,i,s,n){return(e[s]||[]).every((e,s)=>n.indexOf(i?b(i,e):l(s,t))>-1)}function y(e,t,i){const s=i.slice();if(u(e))s.splice(Number(e),1);else{const i=Number(r(e)),n=s[i]={...s[i]};n[t]=y(o(e),t,n[t])}return s}function w(e,t,i,s,n){const d=n.slice();if(u(s))if("child"===t){const t=d[Number(s)]={...d[Number(s)]};t[i]?(t[i]=t[i].slice(),t[i].push(e)):t[i]=[e]}else d.splice(Number(s)+("after"===t?1:0),0,e);else{const n=Number(r(s)),c=d[n]={...d[n]};c[i]=w(e,t,i,o(s),c[i])}return d}function N(e,t,i,s,n,d){for(let r=0;r<i.length;r++){const o=i[r],c=l(r,s);e.hasId(b(t,o))&&n.push(c),k(o,d)&&N(e,t,b(d,o),c,n,d)}}function D(e,t,s,n,d){switch(n){case i.Keys.left:return u(t)||d.expanded(e)&&S(t,s,d)?t:a(t);case i.Keys.right:return x(e,d)?c(t):t;case i.Keys.up:return function(){const e=Number(p(t)),i=a(t);return e?E(l(e-1,i),s,d):u(t)?t:i}();case i.Keys.down:return x(e,d)?c(t):V(t,s,d)||t;case i.Keys.home:return"0";case i.Keys.end:return function(){let e,t=(s.length-1).toString(),i=s[s.length-1];for(;x(i,d);)e=i[d.getChildrenField()],t=l(e.length-1,t),i=e[e.length-1];return t}();default:return t}}function V(e,t,i){const s=a(e),n=s?d(s,t,i.getChildrenField()):void 0,r=n?n[i.getChildrenField()]:t,o=Number(p(e));return o<r.length-1?l(o+1,s):n?V(s,t,i):void 0}function E(e,t,i){const s=d(e,t,i.getChildrenField());return x(s,i)?E(l(s[i.getChildrenField()].length-1,e),t,i):e}const R="expanded",O="items",T="selected",M="checked",G="checkIndeterminate",K="_kendoItemId",_="_kendoTreeViewGuid";function P(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const{sizeMap:B}=i.kendoThemeMaps,j=t.defineComponent({name:"KendoTreeViewItem",props:{item:Object,itemId:String,treeGuid:String,animate:Boolean,focusedItemId:String,tabbableItemId:String,fieldsService:Object,itemUI:Object,ariaMultiSelectable:Boolean,expandIcons:Boolean,checkboxes:Boolean,onFocusDomElNeeded:Object,draggable:Boolean,isRtl:Boolean,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},disabled:Boolean,ariaLevel:Number,onItemClick:Function,onExpandChange:Function,onCheckChange:Function,onPress:Function,onDrag:Function,onRelease:Function,onFocusdomelneeded:Function},computed:{fieldsSvc(){return this.$props.fieldsService},currentTabIndex(){return(this.$props.focusedItemId||this.$props.tabbableItemId)===this.itemId?0:-1},ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||k(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0},ariaChecked(){if(this.$props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"},ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.$props.ariaMultiSelectable?!!this.computedDisabled&&void 0:void 0)},computedDisabled(){const e=this.fieldsSvc.disabled(this.item);return void 0!==e?e:this.disabled}},created(){this.itemGuid=i.guid(),this.prevFocusedItemId=this.focusedItemId,this.prevFieldsService=this.fieldsService,this.prevItem=this.item},data:()=>({isMounted:!1}),watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t},fieldsService:function(e,t){this.prevFieldsService=t},item:function(e,t){this.prevItem=t}},mounted(){const e=this.$props.focusedItemId,t=this.itemId;e&&e===t&&this.$emit("focusDomElNeeded",this.$el),this.checkboxElement=i.getRef(this,"checkboxElement"),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item)),this.assignDraggableMeta(this.$refs.treeviewitemcontent),this.isMounted=!0},updated(){const e=this.$props.focusedItemId;if(e&&e!==this.prevFocusedItemId&&e===this.itemId&&this.$emit("focusdomelneeded",this.$el),this.checkboxElement=i.getRef(this,"checkboxElement"),this.checkboxElement){const e=this.fieldsSvc.checkIndeterminate(this.item);e!==this.prevFieldsService.checkIndeterminate(this.prevItem)&&(this.checkboxElement.indeterminate=e)}this.assignDraggableMeta(this.$refs.treeviewitemcontent)},render(){let e,n;const d=function(){return x(this.item,this.fieldsSvc)?t.createVNode("ul",{class:"k-treeview-group",role:"group"},[this.fieldsSvc.children(this.item).map(function(e,i){return t.createVNode(j,{item:e,itemId:l(i,this.itemId),treeGuid:this.$props.treeGuid,animate:this.$props.animate,focusedItemId:this.$props.focusedItemId,tabbableItemId:this.$props.tabbableItemId,fieldsService:this.$props.fieldsService,itemUI:this.$props.itemUI,checkboxes:this.$props.checkboxes,ariaMultiSelectable:this.$props.ariaMultiSelectable,ariaLevel:this.$props.ariaLevel+1,onItemClick:this.handleItemClick,onFocusdomelneeded:this.handleFocusDomElNeeded,draggable:this.$props.draggable,onPress:this.handlePress,onDrag:this.handleDrag,onRelease:this.handleRelease,expandIcons:this.$props.expandIcons,onExpandChange:this.handleExpandChange,onCheckChange:this.handleCheckChange,key:i,size:this.$props.size,disabled:this.computedDisabled,isRtl:this.$props.isRtl},null)},this)]):void 0},r=i.getTemplate.call(this,{h:t.h,template:this.$props.itemUI,defaultRendering:this.fieldsSvc.text(this.item),additionalProps:{item:this.item,itemHierarchicalIndex:this.itemId}}),o=function(){return t.createVNode("span",{class:"k-treeview-leaf",style:{touchAction:"none"}},[t.createVNode("span",{class:"k-treeview-leaf-text"},[r])])},c=this.itemId.split("_").length;return t.createVNode("li",{class:i.classNames("k-treeview-item"),style:{"--kendo-treeview-level":c},tabindex:this.currentTabIndex,role:"treeitem","aria-level":this.$props.ariaLevel,"aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.computedDisabled||void 0},[t.createVNode("span",{class:this.getContentClassName(),ref:"treeviewitemcontent",onClick:this.handleItemContentClick},[function(){return this.$props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||k(this.item,this.fieldsSvc.getChildrenField()))&&t.createVNode("span",{class:i.classNames("k-treeview-toggle",{"k-disabled":this.computedDisabled})},[t.createVNode(i.Icon,{name:this.getIconClassName(),icon:this.getIconSVG(),onClick:this.handleExpandChange},null)])}.call(this),function(){if(this.$props.checkboxes){const e=this.$props.size,s=!!this.fieldsSvc.checked(this.item);return t.createVNode("span",{class:"k-checkbox-wrap",role:"presentation"},[t.createVNode("input",{type:"checkbox",class:i.classNames("k-checkbox",{[`k-checkbox-${B[e]||e}`]:e,"k-disabled":this.computedDisabled,"k-checked":s}),"aria-label":this.item.text,checked:s,id:this.itemGuid,tabindex:-1,onChange:this.handleCheckChange,ref:i.setRef(this,"checkboxElement")},null),t.createVNode("label",{class:"k-checkbox-label",for:this.itemGuid},null)])}}.call(this),this.$props.draggable?t.createVNode(i.Draggable,{onPress:e=>this.handlePress(e),onDrag:e=>this.handleDrag(e),onRelease:e=>this.handleRelease(e)},P(e=o.call(this))?e:{default:()=>[e]}):o.call(this)]),this.$props.animate&&this.isMounted?t.createVNode(s.Reveal,{appear:this.ariaExpanded,transitionEnterDuration:200,transitionExitDuration:200,key:this.itemGuid+"_animation",style:{display:"block"}},P(n=d.call(this))?n:{default:()=>[n]}):d.call(this)])},methods:{handleItemContentClick(e){e.target.closest(".k-treeview-toggle")||(this.$props.checkboxes&&!this.computedDisabled&&!e.target.closest(".k-checkbox-wrap")&&this.$emit("checkChange",e,this.item,this.itemId),this.$emit("itemClick",e,this.item,this.itemId))},handleCheckChange(e,t,i){this.$emit("checkChange",e,t||this.item,i||this.itemId)},handleExpandChange(e,t,i){e.stopPropagation(),this.$emit("expandChange",e,t||this.item,i||this.itemId)},handleItemClick(e,t,i){this.$emit("itemClick",e,t||this.item,i||this.itemId)},handlePress(e,t,i){this.$emit("press",e,t||{...this.item},i||this.itemId)},handleDrag(e,t,i){this.$emit("drag",e,t||this.item,i||this.itemId)},handleRelease(e,t,i){this.$emit("release",e,t||this.item,i||this.itemId)},handleFocusDomElNeeded(e){this.$emit("focusdomelneeded",e)},getIconClassName(){const e=this.fieldsSvc.expanded(this.item);return e&&!k(this.item,this.fieldsSvc.getChildrenField())?"loading":e?"chevron-down":this.$props.isRtl?"chevron-left":"chevron-right"},getIconSVG(){return this.fieldsSvc.expanded(this.item)?n.chevronDownIcon:this.$props.isRtl?n.chevronLeftIcon:n.chevronRightIcon},getContentClassName(){return i.classNames("k-treeview-item-content",{"k-focus":this.$props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.computedDisabled})},assignDraggableMeta(e){e&&!e[K]&&(e[K]=this.$props.itemId,e[_]=this.$props.treeGuid)}}});var z=Object.defineProperty,H=(e,t,i)=>((e,t,i)=>t in e?z(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);let U=class{constructor(e){H(this,"focusIdField"),H(this,"expandField"),H(this,"selectField"),H(this,"childrenField"),H(this,"hasChildrenField"),H(this,"textField"),H(this,"disableField"),H(this,"checkField"),H(this,"checkIndeterminateField"),this.expandField=e.expandField,this.selectField=e.selectField,this.hasChildrenField=e.hasChildrenField,this.childrenField=e.childrenField,this.textField=e.textField,this.disableField=e.disableField,this.checkField=e.checkField,this.checkIndeterminateField=e.checkIndeterminateField,this.focusIdField=e.focusIdField}expanded(e){return b(this.expandField,e)}selected(e){return b(this.selectField,e)}text(e){return b(this.textField,e)}disabled(e){return b(this.disableField,e)}hasChildren(e){return b(this.hasChildrenField,e)}children(e){return b(this.childrenField,e)||[]}checked(e){return b(this.checkField,e)}checkIndeterminate(e){return b(this.checkIndeterminateField,e)}focusId(e){return this.focusIdField&&b(this.focusIdField,e)}getChildrenField(){return this.childrenField}};const Y={name:"@progress/kendo-vue-treeview",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1650203065,version:"8.0.3-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},{sizeMap:L}=i.kendoThemeMaps,X=t.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:R},selectField:{type:String,default:T},childrenField:{type:String,default:O},hasChildrenField:{type:String,default:"hasChildren"},expandIcons:Boolean,checkboxes:Boolean,textField:{type:String,default:"text"},disableField:{type:String,default:"disabled"},checkField:{type:String,default:M},checkIndeterminateField:{type:String,default:G},item:[Object,String,Function],ariaMultiSelectable:[String,Boolean],ariaLabel:String,ariaLabelledby:String,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}}},data:()=>({currentRtl:!1,focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:"0"}),mounted(){this.currentRtl=i.isRtl(this.$el)},computed:{treeGuid(){return this.id||this.innerId}},created(){i.validatePackage(Y),this.allowExplicitFocus=!1,this.innerId=i.guid()},updated(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()},render(){this.fieldsSvc=new U(this.$props);const{size:e}=this.$props;return t.createVNode("div",{class:i.classNames("k-treeview",{[`k-treeview-${L[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||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}},[t.createVNode("ul",{class:"k-treeview-lines k-treeview-group",role:"tree"},[this.dataItems.map(function(s,n){const d=i.templateRendering.call(this,this.item,i.getListeners.call(this));return t.createVNode(j,{item:s,itemId:n.toString(),treeGuid:this.treeGuid,animate:this.$props.animate,focusedItemId:this.focusedItemId,tabbableItemId:this.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:d,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:n,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:n,clientX:d,clientY:r}=e;this.$emit("itemdragover",{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:d,clientY:r})},onRelease(e,t,i){const{pageX:s,pageY:n,clientX:d,clientY:r}=e;this.$emit("itemdragend",{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:d,clientY:r})},onItemClick(e,t,i){this.setFocus(i),this.dispatchItemClick(e,t,i)},onFocus(e){clearTimeout(this.blurRequest),void 0===this.focusedItemId&&this.dataItems.length&&this.setFocus(this.tabbableItemId),this.$emit("focus",e)},onBlur(e){clearTimeout(this.blurRequest),i.canUseDOM&&(this.blurRequest=window.setTimeout(()=>this.setFocus(void 0),0)),this.$emit("blur",e)},onKeyDown(e){const t=this.getFocusedItem();if(t){const i=D(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 s=()=>S(this.focusedItemId,this.dataItems,this.fieldsSvc),n=this.fieldsSvc.disabled(t);e.keyCode===i.Keys.left&&this.fieldsSvc.expanded(t)&&s()||e.keyCode===i.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||k(t,this.$props.childrenField))&&s()?this.dispatchExpandChange(e,t,this.focusedItemId):e.keyCode!==i.Keys.enter||n?e.keyCode===i.Keys.space&&!n&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.focusedItemId)):this.dispatchItemClick(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 e=this.focusedItemId;this.focusedItemId=void 0,this.focusedItemPublicId=void 0,this.tabbableItemId=e}},getFocusedItem(){return this.focusedItemId?this.getItemById(this.focusedItemId):void 0},getItemById(e){return d(e,this.dataItems,this.$props.childrenField||O)},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):function(e,t,i,s){const n=F([e],t,i,s);return n.length?n[0]:void 0}(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}}});function q(e,t,i,s,n){if(i){let{ids:d,field:r}=A(i,t);return function(e,t,i,s,n){let d=e;return t.forEach(e=>{d=C(d,e,e=>W(i,e),s,n)}),d}(e,!v(i)&&i.idField?F(d,i.idField,e,n):d,r,s,n)}return e}function A(e,t){let i,s;return v(e)?(i=e,s=t):(i=e.ids||[],s=e.operationField||t),{ids:i,field:s}}function W(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function J(e,t,i,s,n){let d=!1;for(let r=0;r<e.length;r++){const o=e[r];if(b(s,o)){if(!d)for(let e=0;e<t.length;e++)W(n,t[e]);d=!0,o[i]&&J(o[i],[],i,s,n)}else o[i]&&J(o[i],d?[o]:t.concat([o]),i,s,n)}}function Q(e,t,i,s,n,r){const o=function*(){if(i){const n=function(e,t,i){const s=[],n=m(e);let d=i;for(let e=0;e<n.length-1&&d;e++){const i=d[Number(n[e])];s.push(i),d=i[t]}return s}(e,s,r);for(let e=n.length-1;e>-1;e--)yield{id:b(i,n[e]),item:t?n[e]:void 0}}else{let i=a(e);for(;i;)yield{id:i,item:t?d(i,r,s):void 0},i=a(i)}}();let c=o.next();t?function(){for(;!c.done;){const{id:e,item:t}=c.value;if(-1!==n.indexOf(e)||!$(t,e,i,s,n))break;n.push(e),c=o.next()}}():function(){for(;!c.done;){const{id:e}=c.value,t=n.indexOf(e);if(!(t>-1))break;n.splice(t,1),c=o.next()}}()}const Z=t.defineComponent({name:"KendoTreeViewDragClue",data:()=>({visible:!1,top:0,left:0,text:"",operationIconName:"cancel",operationSvg:n.cancelIcon}),render(){const e={top:this.top+"px",left:this.left+"px"};return this.visible&&t.createVNode("div",{class:"k-header k-drag-clue",style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px",...e}},[t.createVNode(i.Icon,{name:i.getIconName(this.operationIconName),icon:this.operationSvg,class:"k-drag-status"},null),this.text])},methods:{show(e,t,i,s){this.visible=!0,this.top=e,this.left=t,this.text=i,"string"==typeof s?this.operationIconName=s:this.operationSvg=s},hide(){this.visible=!1}}});var ee=Object.defineProperty,te=(e,t,i)=>((e,t,i)=>t in e?ee(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);e.TreeView=X,e.TreeViewDragAnalyzer=class{constructor(e){te(this,"itemId"),te(this,"treeViewGuid"),te(this,"initialized",!1),te(this,"destDomNodeWithMeta"),te(this,"destItemId"),te(this,"destTreeViewGuid"),this.event=e,this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid()}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[K];)t=t.parentNode;t&&t[K]&&(this.destDomNodeWithMeta=t,this.destItemId=t[K],this.destTreeViewGuid=t[_])}},e.TreeViewDragClue=Z,e.TreeViewItem=j,e.handleTreeViewCheckChange=function(e,t,i,s={},n){if(!i||!i.length)return[];const{ids:d,idField:r}=function(e){let t,i;return v(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),o=r?b(r,e.item):e.itemHierarchicalIndex,c=d.indexOf(o),a=-1===c,h=n||O;let u;return s.singleMode?u=a?[o]:[]:(u=d.slice(),a?u.push(o):u.splice(c,1),s.checkChildren&&function(e,t,i,s,n,d){(function(e,t,i,s){return s?function e(t){let n=[];const d=t[i]||[];for(let t=0;t<d.length;t++)n.push(b(s,d[t])),n=n.concat(e(d[t]));return n}(e):function e(t,s){let n=[];const d=t[i]||[];for(let t=0;t<d.length;t++){const i=l(t,s);n.push(i),n=n.concat(e(d[t],i))}return n}(e,t)})(e,t,n,s).forEach(e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)})}(e.item,e.itemHierarchicalIndex,a,r,h,u),s.checkParents&&Q(e.itemHierarchicalIndex,a,r,h,u,i)),v(t)?u:Object.assign({},t,{ids:u})},e.moveTreeViewItem=function(e,t,i,s,n,c){const l=c||O;if(!(t&&t.length&&e&&s)||n&&!n.length||!d(s,n&&n!==t?n:t,l))return u();const h=d(e,t,l);if(!h)return u();if(n&&n!==t){return{sourceData:y(e,l,t),targetData:w(h,i,l,s,n)}}{if(`${s}_`.startsWith(`${e}_`))return u();const d=y(e,l,t),c=w(h,i,l,function(e,t){const i=t;t="r_"+t;const s=a(e="r_"+e)+"_";if(t.startsWith(s)){const i=t.substring(s.length);if(i){const t=r(i);if(Number(p(e))<Number(t))return o(s+(Number(t)-1).toString()+i.substring(t.length))}}return i}(e,s),d);return n?{sourceData:c,targetData:c}:c}function u(){return n?{sourceData:t,targetData:n}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const s=t.cloneField||"cloned",n=t.expandField||R,d=t.selectField||T,r=t.checkField||M,o=t.childrenField||O;return i=q(i,n,t.expand,s,o),i=q(i,d,t.select,s,o),i=q(i,r,t.check,s,o),function(e,t,i){if(i&&!v(i)&&i.applyCheckIndeterminate){const{field:s}=A(i,M),n=i.checkIndeterminateField||G;for(let i=0;i<e.length;i++){const d=e[i],r=d[t];r&&J(r,b(s,d)?[]:[d],t,s,n)}}}(i,o,t.check),i}});
|
package/events.d.ts
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Represents the object of the `onExpandChange` event ([see example]({% slug overview_treeview %})).
|
|
10
|
+
*/
|
|
11
|
+
export interface TreeViewExpandChangeEvent {
|
|
12
|
+
/**
|
|
13
|
+
* The ItemClick event.
|
|
14
|
+
*/
|
|
15
|
+
event: any;
|
|
16
|
+
/**
|
|
17
|
+
* The item that is expanded or collapsed.
|
|
18
|
+
*/
|
|
19
|
+
item: any;
|
|
20
|
+
/**
|
|
21
|
+
* The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
22
|
+
*/
|
|
23
|
+
itemHierarchicalIndex: string;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Represents the object of the `onItemClick` event ([see example]({% slug overview_treeview %})).
|
|
27
|
+
*/
|
|
28
|
+
export interface TreeViewItemClickEvent {
|
|
29
|
+
/**
|
|
30
|
+
* The ItemClick event.
|
|
31
|
+
*/
|
|
32
|
+
event: any;
|
|
33
|
+
/**
|
|
34
|
+
* The item that is clicked.
|
|
35
|
+
*/
|
|
36
|
+
item: any;
|
|
37
|
+
/**
|
|
38
|
+
* The hierarchical index of the item. The indices are zero-based.
|
|
39
|
+
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
40
|
+
*/
|
|
41
|
+
itemHierarchicalIndex: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Represents the object of the `onCheckChange` event ([see example]({% slug check_helper_funcs_treeview %})).
|
|
45
|
+
*/
|
|
46
|
+
export interface TreeViewCheckChangeEvent {
|
|
47
|
+
/**
|
|
48
|
+
* The item that is selected or deselected.
|
|
49
|
+
*/
|
|
50
|
+
item: any;
|
|
51
|
+
/**
|
|
52
|
+
* The hierarchical index of the item. The indices are zero-based.
|
|
53
|
+
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
54
|
+
*/
|
|
55
|
+
itemHierarchicalIndex: string;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Represents the object of the `onItemDragStart` event.
|
|
59
|
+
*/
|
|
60
|
+
export interface TreeViewItemDragStartEvent {
|
|
61
|
+
/**
|
|
62
|
+
* An event target.
|
|
63
|
+
*/
|
|
64
|
+
target: any;
|
|
65
|
+
/**
|
|
66
|
+
* The item that is dragged.
|
|
67
|
+
*/
|
|
68
|
+
item: any;
|
|
69
|
+
/**
|
|
70
|
+
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
71
|
+
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
72
|
+
*/
|
|
73
|
+
itemHierarchicalIndex: string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Represents the object of the `onItemDragOver` event ([see example]({% slug dragdrop_treeview %})).
|
|
77
|
+
*/
|
|
78
|
+
export interface TreeViewItemDragOverEvent {
|
|
79
|
+
/**
|
|
80
|
+
* The target that is associated with the dragged item.
|
|
81
|
+
*/
|
|
82
|
+
target: any;
|
|
83
|
+
/**
|
|
84
|
+
* The item that is dragged.
|
|
85
|
+
*/
|
|
86
|
+
item: any;
|
|
87
|
+
/**
|
|
88
|
+
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
89
|
+
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
90
|
+
*/
|
|
91
|
+
itemHierarchicalIndex: string;
|
|
92
|
+
/**
|
|
93
|
+
* The X (horizontal) coordinate (in pixels) at which the event occurred that is relative to the left edge of the entire document.
|
|
94
|
+
* Includes any portion of the document which is not currently visible.
|
|
95
|
+
*/
|
|
96
|
+
pageX: number;
|
|
97
|
+
/**
|
|
98
|
+
* The Y (vertical) coordinate (in pixels) at which the event occurred that is relative to the whole document.
|
|
99
|
+
* `pageY` observes any vertical scrolling of the page.
|
|
100
|
+
*/
|
|
101
|
+
pageY: number;
|
|
102
|
+
/**
|
|
103
|
+
* Provides the horizontal coordinate within the client area of the application at which the event occurred
|
|
104
|
+
* (as opposed to the coordinate within the page).
|
|
105
|
+
*/
|
|
106
|
+
clientX: number;
|
|
107
|
+
/**
|
|
108
|
+
* Provides the vertical coordinate within the client area of the application at which the event occurred
|
|
109
|
+
* (as opposed to the coordinate within the page).
|
|
110
|
+
*/
|
|
111
|
+
clientY: number;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Represents the object of the `onItemDragEnd` event ([see example]({% slug dragdrop_treeview %})).
|
|
115
|
+
*/
|
|
116
|
+
export interface TreeViewItemDragEndEvent {
|
|
117
|
+
/**
|
|
118
|
+
* The target that is associated with the dragged item.
|
|
119
|
+
*/
|
|
120
|
+
target: any;
|
|
121
|
+
/**
|
|
122
|
+
* The item that is dragged.
|
|
123
|
+
*/
|
|
124
|
+
item: any;
|
|
125
|
+
/**
|
|
126
|
+
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
127
|
+
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
128
|
+
*/
|
|
129
|
+
itemHierarchicalIndex: string;
|
|
130
|
+
/**
|
|
131
|
+
* The X (horizontal) coordinate (in pixels) at which the event occured that is relative to the left edge of the entire document.
|
|
132
|
+
* `pageX` includes any portion of the document that is not currently visible.
|
|
133
|
+
*/
|
|
134
|
+
pageX: number;
|
|
135
|
+
/**
|
|
136
|
+
* The Y (vertical) coordinate (in pixels) at which the event occured that is relative to the whole document.
|
|
137
|
+
* `pageY` observes any vertical scrolling of the page.
|
|
138
|
+
*/
|
|
139
|
+
pageY: number;
|
|
140
|
+
/**
|
|
141
|
+
* Provides the horizontal coordinate within the client area of the application at which the event occurred
|
|
142
|
+
* (as opposed to the coordinate within the page).
|
|
143
|
+
*/
|
|
144
|
+
clientX: number;
|
|
145
|
+
/**
|
|
146
|
+
* Provides the vertical coordinate within the client area of the application at which the event occurred
|
|
147
|
+
* (as opposed to the coordinate within the page).
|
|
148
|
+
*/
|
|
149
|
+
clientY: number;
|
|
150
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { TreeViewCheckChangeEvent } from './events';
|
|
9
|
+
import { TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
|
|
10
|
+
/**
|
|
11
|
+
* The settings that configure the update of the check descriptor.
|
|
12
|
+
*/
|
|
13
|
+
export interface TreeViewCheckChangeSettings {
|
|
14
|
+
/**
|
|
15
|
+
* Determines a selection of a single node at a time.
|
|
16
|
+
*/
|
|
17
|
+
singleMode?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Determines if the children checkboxes will be selected when the user selects the parent checkbox.
|
|
20
|
+
*/
|
|
21
|
+
checkChildren?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Determines if the parent checkbox will be selected when the user selects all its children checkboxes.
|
|
24
|
+
*/
|
|
25
|
+
checkParents?: boolean;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
*
|
|
29
|
+
* A helper function which updates the check descriptor.
|
|
30
|
+
*
|
|
31
|
+
* {% meta height:650 %}
|
|
32
|
+
* {% embed_file checkbox/checkbox-helper/main.vue preview %}
|
|
33
|
+
* {% embed_file checkbox/checkbox-helper/main.js %}
|
|
34
|
+
* {% endmeta %}
|
|
35
|
+
*
|
|
36
|
+
* #### Parameters
|
|
37
|
+
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
|
|
38
|
+
* The event that triggered the change.
|
|
39
|
+
*
|
|
40
|
+
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
|
|
41
|
+
* The check descriptor that will be updated.
|
|
42
|
+
*
|
|
43
|
+
* ##### data? <span class='code'>any[] | null</span>
|
|
44
|
+
* The TreeView items.
|
|
45
|
+
*
|
|
46
|
+
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
|
|
47
|
+
* The additional settings that configure the update of the check descriptor.
|
|
48
|
+
*
|
|
49
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
50
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
51
|
+
* The default behavior allows the selection of multiple items.
|
|
52
|
+
*
|
|
53
|
+
* #### Returns
|
|
54
|
+
* <span class='code'>any</span> - The updated copy of the input check descriptor.
|
|
55
|
+
*/
|
|
56
|
+
export declare function handleTreeViewCheckChange(event: TreeViewCheckChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any;
|