primevue 3.26.1 → 3.28.0

package/treeselect/treeselect.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, utils, vue) {
+this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal, Ripple, Tree, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -111,6 +112,7 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
         scrollHandler: null,
         overlay: null,
         selfChange: false,
+        selfClick: false,
         beforeUnmount() {
             this.unbindOutsideClickListener();
             this.unbindResizeListener();
@@ -248,9 +250,11 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && this.isOutsideClicked(event)) {
+                        if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) {
                             this.hide();
                         }
+
+                        this.selfClick = false;
                     };
 
                     document.addEventListener('click', this.outsideClickListener);
@@ -306,6 +310,8 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
                     originalEvent: event,
                     target: this.$el
                 });
+
+                this.selfClick = true;
             },
             onOverlayKeydown(event) {
                 if (event.code === 'Escape') this.hide();
@@ -439,7 +445,8 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
         },
         components: {
             TSTree: Tree__default["default"],
-            Portal: Portal__default["default"]
+            Portal: Portal__default["default"],
+            ChevronDownIcon: ChevronDownIcon__default["default"]
         },
         directives: {
             ripple: Ripple__default["default"]
@@ -451,8 +458,7 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
     const _hoisted_3 = { class: "p-treeselect-label-container" };
     const _hoisted_4 = { class: "p-treeselect-token-label" };
     const _hoisted_5 = ["aria-expanded"];
-    const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-treeselect-trigger-icon pi pi-chevron-down" }, null, -1);
-    const _hoisted_7 = {
+    const _hoisted_6 = {
       key: 0,
       class: "p-treeselect-empty-message"
     };
@@ -525,8 +531,8 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
           "aria-haspopup": "tree",
           "aria-expanded": $data.overlayVisible
         }, [
-          vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
-            _hoisted_6
+          vue.renderSlot(_ctx.$slots, "triggericon", {}, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent('ChevronDownIcon'), { class: "p-treeselect-trigger-icon" }))
           ])
         ], 8, _hoisted_5),
         vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
@@ -543,10 +549,9 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
                       key: 0,
                       ref: $options.overlayRef,
                       onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
-                      class: $options.panelStyleClass
-                    }, $props.panelProps, {
+                      class: $options.panelStyleClass,
                       onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
-                    }), [
+                    }, $props.panelProps), [
                       vue.renderSlot(_ctx.$slots, "header", {
                         value: $props.modelValue,
                         options: $props.options
@@ -570,9 +575,36 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
                           onNodeSelect: $options.onNodeSelect,
                           onNodeUnselect: $options.onNodeUnselect,
                           level: 0
-                        }, null, 8, ["id", "value", "selectionMode", "onUpdate:selectionKeys", "selectionKeys", "expandedKeys", "onUpdate:expandedKeys", "metaKeySelection", "onNodeSelect", "onNodeUnselect"]),
+                        }, vue.createSlots({ _: 2 }, [
+                          (_ctx.$slots.itemtogglericon)
+                            ? {
+                                name: "togglericon",
+                                fn: vue.withCtx((iconProps) => [
+                                  vue.renderSlot(_ctx.$slots, "itemtogglericon", {
+                                    node: iconProps.node,
+                                    expanded: iconProps.expanded,
+                                    class: vue.normalizeClass(iconProps.class)
+                                  })
+                                ]),
+                                key: "0"
+                              }
+                            : undefined,
+                          (_ctx.$slots.itemcheckboxicon)
+                            ? {
+                                name: "checkboxicon",
+                                fn: vue.withCtx((iconProps) => [
+                                  vue.renderSlot(_ctx.$slots, "itemcheckboxicon", {
+                                    checked: iconProps.checked,
+                                    partialChecked: iconProps.partialChecked,
+                                    class: vue.normalizeClass(iconProps.class)
+                                  })
+                                ]),
+                                key: "1"
+                              }
+                            : undefined
+                        ]), 1032, ["id", "value", "selectionMode", "onUpdate:selectionKeys", "selectionKeys", "expandedKeys", "onUpdate:expandedKeys", "metaKeySelection", "onNodeSelect", "onNodeUnselect"]),
                         ($options.emptyOptions)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
                               vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                 vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
                               ])
@@ -628,4 +660,4 @@ this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, uti
 
     return script;
 
-})(primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.tree, primevue.utils, Vue);
+})(primevue.icons.chevrondown, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.tree, primevue.utils, Vue);

package/treeselect/treeselect.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),a=o(t),d=o(l),c={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},panelClass:{type:[String,Object],default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(n.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||n.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...n.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));n.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){n.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?n.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=n.DomHandler.getOuterWidth(this.$el)+"px",n.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new n.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.$el})},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=n.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>n.UniqueComponentId()+"_list"},components:{TSTree:o(i).default,Portal:a.default},directives:{ripple:d.default}};const p={class:"p-hidden-accessible"},h=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],u={class:"p-treeselect-label-container"},y={class:"p-treeselect-token-label"},m=["aria-expanded"],f=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),c.render=function(e,t,l,i,n,o){const r=s.resolveComponent("TSTree"),a=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[7]||(t[7]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",p,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,h)]),s.createElementVNode("div",u,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",y,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[f]))],8,m),s.createVNode(a,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps,{onKeydown:t[6]||(t[6]=(...e)=>o.onOverlayKeydown&&o.onOverlayKeydown(...e))}),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(r,{ref:"tree",id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},c}(primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s,o){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),d=r(t),c=r(l),p=r(i),h={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},panelClass:{type:[String,Object],default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,selfClick:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(s.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||s.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...s.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));s.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){s.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){s.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?s.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=s.DomHandler.getOuterWidth(this.$el)+"px",s.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&!this.selfClick&&this.isOutsideClicked(e)&&this.hide(),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new s.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!s.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){d.default.emit("overlay-click",{originalEvent:e,target:this.$el}),this.selfClick=!0},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=s.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>s.UniqueComponentId()+"_list"},components:{TSTree:r(n).default,Portal:c.default,ChevronDownIcon:a.default},directives:{ripple:p.default}};const u={class:"p-hidden-accessible"},y=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],m={class:"p-treeselect-label-container"},f={class:"p-treeselect-token-label"},v=["aria-expanded"],b={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),h.render=function(e,t,l,i,n,s){const r=o.resolveComponent("TSTree"),a=o.resolveComponent("Portal");return o.openBlock(),o.createElementBlock("div",{ref:"container",class:o.normalizeClass(s.containerClass),onClick:t[7]||(t[7]=(...e)=>s.onClick&&s.onClick(...e))},[o.createElementVNode("div",u,[o.createElementVNode("input",o.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":s.listId,onFocus:t[0]||(t[0]=e=>s.onFocus(e)),onBlur:t[1]||(t[1]=e=>s.onBlur(e)),onKeydown:t[2]||(t[2]=e=>s.onKeyDown(e))},l.inputProps),null,16,y)]),o.createElementVNode("div",m,[o.createElementVNode("div",{class:o.normalizeClass(s.labelClass)},[o.renderSlot(e.$slots,"value",{value:s.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createTextVNode(o.toDisplayString(s.label||"empty"),1)],64)):"chip"===l.display?(o.openBlock(),o.createElementBlock(o.Fragment,{key:1},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(s.selectedNodes,(e=>(o.openBlock(),o.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[o.createElementVNode("span",f,o.toDisplayString(e.label),1)])))),128)),s.emptyValue?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createTextVNode(o.toDisplayString(l.placeholder||"empty"),1)],64)):o.createCommentVNode("",!0)],64)):o.createCommentVNode("",!0)]))],2)]),o.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[o.renderSlot(e.$slots,"triggericon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent("ChevronDownIcon"),{class:"p-treeselect-trigger-icon"}))]))],8,v),o.createVNode(a,{appendTo:l.appendTo},{default:o.withCtx((()=>[o.createVNode(o.Transition,{name:"p-connected-overlay",onEnter:s.onOverlayEnter,onLeave:s.onOverlayLeave,onAfterLeave:s.onOverlayAfterLeave},{default:o.withCtx((()=>[n.overlayVisible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:s.overlayRef,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e)),class:s.panelStyleClass,onKeydown:t[6]||(t[6]=(...e)=>s.onOverlayKeydown&&s.onOverlayKeydown(...e))},l.panelProps),[o.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),o.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:o.normalizeStyle({"max-height":l.scrollHeight})},[o.createVNode(r,{ref:"tree",id:s.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":s.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":s.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:s.onNodeSelect,onNodeUnselect:s.onNodeUnselect,level:0},o.createSlots({_:2},[e.$slots.itemtogglericon?{name:"togglericon",fn:o.withCtx((t=>[o.renderSlot(e.$slots,"itemtogglericon",{node:t.node,expanded:t.expanded,class:o.normalizeClass(t.class)})])),key:"0"}:void 0,e.$slots.itemcheckboxicon?{name:"checkboxicon",fn:o.withCtx((t=>[o.renderSlot(e.$slots,"itemcheckboxicon",{checked:t.checked,partialChecked:t.partialChecked,class:o.normalizeClass(t.class)})])),key:"1"}:void 0]),1032,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),s.emptyOptions?(o.openBlock(),o.createElementBlock("div",b,[o.renderSlot(e.$slots,"empty",{},(()=>[o.createTextVNode(o.toDisplayString(s.emptyMessageText),1)]))])):o.createCommentVNode("",!0)],4),o.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):o.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},h}(primevue.icons.chevrondown,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);

package/treetable/BodyCell.vue

@@ -1,24 +1,31 @@
 <template>
     <td :style="containerStyle" :class="containerClass" role="cell">
         <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
-            <i :class="togglerIcon"></i>
+            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
         </button>
         <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
             <div class="p-hidden-accessible">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
             </div>
             <div ref="checkboxEl" :class="checkboxClass">
-                <span :class="checkboxIcon"></span>
+                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
-        <template v-else
-            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
-        >
+        <template v-else>
+            <span>{{ resolveFieldData(node.data, columnProp('field')) }}</span>
+        </template>
     </td>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
@@ -61,6 +68,10 @@ export default {
         partialChecked: {
             type: Boolean,
             default: false
+        },
+        templates: {
+            type: Object,
+            default: null
         }
     },
     data() {
@@ -146,19 +157,19 @@ export default {
                 visibility: this.leaf ? 'hidden' : 'visible'
             };
         },
-        togglerIcon() {
-            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
-        },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
             return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
-        },
-        checkboxIcon() {
-            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         }
     },
+    components: {
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        CheckIcon: CheckIcon,
+        MinusIcon: MinusIcon
+    },
     directives: {
         ripple: Ripple
     }

package/treetable/HeaderCell.vue

@@ -3,12 +3,17 @@
         <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
-        <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
+        <span v-if="columnProp('sortable')">
+            <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
+        </span>
         <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
 <script>
+import SortAltIcon from 'primevue/icons/sortalt';
+import SortAmountDownIcon from 'primevue/icons/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
@@ -146,7 +151,7 @@ export default {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -162,26 +167,36 @@ export default {
                 }
             }
 
-            return [
-                'p-sortable-column-icon pi pi-fw',
-                {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
-                }
-            ];
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
         },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const { sorted, sortOrder } = this.sortState;
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
                 else return 'none';
             } else {
                 return null;
             }
         }
+    },
+    components: {
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>

package/treetable/TreeTable.d.ts

@@ -259,7 +259,7 @@ export interface TreeTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * @defaultValue pi pi-spinner
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -382,6 +382,47 @@ export interface TreeTableSlots {
      * Custom empty template.
      */
     empty(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom toggler icon template.
+     */
+    togglericon(): VNode[];
+    /**
+     * Custom checkbox icon template.
+     */
+    checkboxicon(): VNode[];
+    /**
+     * Custom sort icon template.
+     */
+    sorticon(scope: {
+        /**
+         * Whether or not column is sorted
+         */
+        sorted: TreeNode;
+        /**
+         * Current sort order
+         */
+        sortOrder: boolean;
+    }): VNode[];
+    /**
+     * Custom paginator first page link icon template.
+     */
+    paginatorfirstpagelinkicon(): VNode[];
+    /**
+     * Custom paginator previous page link icon template.
+     */
+    paginatorprevpagelinkicon(): VNode[];
+    /**
+     * Custom paginator next page link icon template.
+     */
+    paginatornextpagelinkicon(): VNode[];
+    /**
+     * Custom paginator last page link icon template.
+     */
+    paginatorlastpagelinkicon(): VNode[];
 }
 
 /**

package/treetable/TreeTable.vue

@@ -2,7 +2,9 @@
     <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table">
         <div v-if="loading" class="p-treetable-loading">
             <div class="p-treetable-loading-overlay p-component-overlay">
-                <i :class="loadingIconClass"></i>
+                <slot name="loadingicon">
+                    <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" />
+                </slot>
             </div>
         </div>
         <div v-if="$slots.header" class="p-treetable-header">
@@ -27,6 +29,18 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </TTPaginator>
         <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }">
             <table ref="table" role="table" v-bind="tableProps">
@@ -69,6 +83,7 @@
                             :ariaSetSize="dataToRender.length"
                             :ariaPosInset="index + 1"
                             :tabindex="setTabindex(node, index)"
+                            :templates="$slots"
                             @node-toggle="onNodeToggle"
                             @node-click="onNodeClick"
                             @checkbox-change="onCheckboxChange"
@@ -108,6 +123,18 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </TTPaginator>
         <div v-if="$slots.footer" class="p-treetable-footer">
             <slot name="footer"></slot>
@@ -118,6 +145,7 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import FooterCell from './FooterCell.vue';
@@ -214,7 +242,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         rowHover: {
             type: Boolean,
@@ -970,16 +998,14 @@ export default {
 
                 return data ? data.length : 0;
             }
-        },
-        loadingIconClass() {
-            return ['p-treetable-loading-icon pi-spin', this.loadingIcon];
         }
     },
     components: {
         TTRow: TreeTableRow,
         TTPaginator: Paginator,
         TTHeaderCell: HeaderCell,
-        TTFooterCell: FooterCell
+        TTFooterCell: FooterCell,
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>

package/treetable/TreeTableRow.vue

@@ -27,6 +27,7 @@
                 :selectionMode="selectionMode"
                 :checked="checked"
                 :partialChecked="partialChecked"
+                :templates="templates"
                 @node-toggle="$emit('node-toggle', $event)"
                 @checkbox-toggle="toggleCheckbox"
             ></TTBodyCell>
@@ -46,6 +47,7 @@
             :indentation="indentation"
             :ariaPosInset="node.children.indexOf(childNode) + 1"
             :ariaSetSize="node.children.length"
+            :templates="templates"
             @node-toggle="$emit('node-toggle', $event)"
             @node-click="$emit('node-click', $event)"
             @checkbox-change="onCheckboxChange"
@@ -104,6 +106,10 @@ export default {
         ariaPosInset: {
             type: Number,
             default: null
+        },
+        templates: {
+            type: Object,
+            default: null
         }
     },
     nodeTouched: false,