primevue 3.29.2 → 3.30.1

package/treeselect/treeselect.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s,o,r){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(e),c=a(t),p=a(l),h=a(i),u=a(n),m=a(s),y={name:"TreeSelect",extends:d.default,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&&(o.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)||o.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=[...o.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));o.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){o.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){o.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?o.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=o.DomHandler.getOuterWidth(this.$el)+"px",o.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 o.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!o.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){p.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=o.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:()=>o.UniqueComponentId()+"_list"},components:{TSTree:m.default,Portal:h.default,ChevronDownIcon:c.default},directives:{ripple:u.default}};const f=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],v=["aria-expanded"];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"),y.render=function(e,t,l,i,n,s){const o=r.resolveComponent("TSTree"),a=r.resolveComponent("Portal");return r.openBlock(),r.createElementBlock("div",r.mergeProps({ref:"container",class:s.containerClass,onClick:t[7]||(t[7]=(...e)=>s.onClick&&s.onClick(...e))},e.ptm("root")),[r.createElementVNode("div",r.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[r.createElementVNode("input",r.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,...e.ptm("hiddenInput")}),null,16,f)],16),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-label-container"},e.ptm("labelContainer")),[r.createElementVNode("div",r.mergeProps({class:s.labelClass},e.ptm("label")),[r.renderSlot(e.$slots,"value",{value:s.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(r.openBlock(),r.createElementBlock(r.Fragment,{key:0},[r.createTextVNode(r.toDisplayString(s.label||"empty"),1)],64)):"chip"===l.display?(r.openBlock(),r.createElementBlock(r.Fragment,{key:1},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(s.selectedNodes,(t=>(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:t.key,class:"p-treeselect-token"},e.ptm("token")),[r.createElementVNode("span",r.mergeProps({class:"p-treeselect-token-label"},e.ptm("tokenLabel")),r.toDisplayString(t.label),17)],16)))),128)),s.emptyValue?(r.openBlock(),r.createElementBlock(r.Fragment,{key:0},[r.createTextVNode(r.toDisplayString(l.placeholder||"empty"),1)],64)):r.createCommentVNode("",!0)],64)):r.createCommentVNode("",!0)]))],16)],16),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},e.ptm("trigger")),[r.renderSlot(e.$slots,"triggericon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent("ChevronDownIcon"),r.mergeProps({class:"p-treeselect-trigger-icon"},e.ptm("triggerIcon")),null,16))]))],16,v),r.createVNode(a,{appendTo:l.appendTo},{default:r.withCtx((()=>[r.createVNode(r.Transition,{name:"p-connected-overlay",onEnter:s.onOverlayEnter,onLeave:s.onOverlayLeave,onAfterLeave:s.onOverlayAfterLeave},{default:r.withCtx((()=>[n.overlayVisible?(r.openBlock(),r.createElementBlock("div",r.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,...e.ptm("panel")}),[r.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-items-wrapper",style:{"max-height":l.scrollHeight}},e.ptm("wrapper")),[r.createVNode(o,{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,pt:e.ptm("tree")},r.createSlots({_:2},[e.$slots.itemtogglericon?{name:"togglericon",fn:r.withCtx((t=>[r.renderSlot(e.$slots,"itemtogglericon",{node:t.node,expanded:t.expanded,class:r.normalizeClass(t.class)})])),key:"0"}:void 0,e.$slots.itemcheckboxicon?{name:"checkboxicon",fn:r.withCtx((t=>[r.renderSlot(e.$slots,"itemcheckboxicon",{checked:t.checked,partialChecked:t.partialChecked,class:r.normalizeClass(t.class)})])),key:"1"}:void 0]),1032,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect","pt"]),s.emptyOptions?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:"p-treeselect-empty-message"},e.ptm("emptyMessage")),[r.renderSlot(e.$slots,"empty",{},(()=>[r.createTextVNode(r.toDisplayString(s.emptyMessageText),1)]))],16)):r.createCommentVNode("",!0)],16),r.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],16)},y}(primevue.basecomponent,primevue.icons.chevrondown,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,n,r,i,o,l,s,a){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),d=c(t),p=c(n),f=c(r),y=c(i),h=c(l),m={root:function(e){return{position:"self"===e.props.appendTo?"relative":void 0}}},b=s.useStyle("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n}\n\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n\n.p-fluid .p-treeselect {\n    display: flex;\n}\n",{name:"treeselect",manual:!0});function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}function g(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?g(Object(n),!0).forEach((function(t){k(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function k(e,t,n){return(t=w(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function w(e){var t=x(e,"string");return"symbol"===v(t)?t:String(t)}function x(e,t){if("object"!==v(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==v(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function O(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=V(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,s=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){s=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(s)throw o}}}}function C(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function V(e,t){if(e){if("string"==typeof e)return j(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?j(e,t):void 0}}function L(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function P(e){if(Array.isArray(e))return j(e)}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var N={name:"TreeSelect",extends:{name:"BaseTreeSelect",extends:h.default,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}},css:{classes:{root:function(e){var t=e.instance,n=e.props;return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===n.display,"p-disabled":n.disabled,"p-focus":t.focused,"p-inputwrapper-filled":!t.emptyValue,"p-inputwrapper-focus":t.focused||t.overlayVisible}]},labelContainer:"p-treeselect-label-container",label:function(e){var t=e.instance,n=e.props;return["p-treeselect-label",{"p-placeholder":t.label===n.placeholder,"p-treeselect-label-empty":!n.placeholder&&t.emptyValue}]},token:"p-treeselect-token",tokenLabel:"p-treeselect-token-label",trigger:"p-treeselect-trigger",triggerIcon:"p-treeselect-trigger-icon",panel:function(e){var t=e.instance;return["p-treeselect-panel p-component",{"p-input-filled":"filled"===t.$primevue.config.inputStyle,"p-ripple-disabled":!1===t.$primevue.config.ripple}]},wrapper:"p-treeselect-items-wrapper",emptyMessage:"p-treeselect-empty-message"},inlineStyles:m,loadStyle:b.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],data:function(){return{focused:!1,overlayVisible:!1,expandedKeys:{}}},watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options:function(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,selfClick:!1,beforeUnmount:function(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(o.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted:function(){this.updateTreeState()},methods:{show:function(){this.$emit("before-show"),this.overlayVisible=!0},hide:function(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus:function(e){this.focused=!0,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.$emit("blur",e)},onClick:function(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange:function(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect:function(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect:function(e){this.$emit("node-unselect",e)},onNodeToggle:function(e){this.expandedKeys=e},onKeyDown:function(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey:function(e){var t=this;this.overlayVisible||(this.show(),this.$nextTick((function(){var e,n=o.DomHandler.find(t.$refs.tree.$el,'[data-pc-section="treeitem"]'),r=(e=n,P(e)||L(e)||V(e)||C()).find((function(e){return"0"===e.getAttribute("tabindex")}));o.DomHandler.focus(r)})),e.preventDefault())},onEnterKey:function(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey:function(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter:function(e){o.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),o.DomHandler.addStyles(e,{position:"absolute",top:"0",left:"0"}),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave:function(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave:function(e){o.ZIndexUtils.clear(e)},alignOverlay:function(){"self"===this.appendTo?o.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=o.DomHandler.getOuterWidth(this.$el)+"px",o.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.overlayVisible&&!e.selfClick&&e.isOutsideClicked(t)&&e.hide(),e.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener:function(){var e=this;this.scrollHandler||(this.scrollHandler=new o.ConnectedOverlayScrollHandler(this.$refs.container,(function(){e.overlayVisible&&e.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener:function(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener:function(){var e=this;this.resizeListener||(this.resizeListener=function(){e.overlayVisible&&!o.DomHandler.isTouchDevice()&&e.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener:function(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked:function(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef:function(e){this.overlay=e},onOverlayClick:function(e){d.default.emit("overlay-click",{originalEvent:e,target:this.$el}),this.selfClick=!0},onOverlayKeydown:function(e){"Escape"===e.code&&this.hide()},findSelectedNodes:function(e,t,n){if(e){if(this.isSelected(e,t)&&(n.push(e),delete t[e.key]),Object.keys(t).length&&e.children){var r,i=O(e.children);try{for(i.s();!(r=i.n()).done;){this.findSelectedNodes(r.value,t,n)}}catch(e){i.e(e)}finally{i.f()}}}else{var o,l=O(this.options);try{for(l.s();!(o=l.n()).done;){this.findSelectedNodes(o.value,t,n)}}catch(e){l.e(e)}finally{l.f()}}},isSelected:function(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState:function(){var e=S({},this.modelValue);this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState:function(e,t,n){if(e){if(this.isSelected(e,n)&&(this.expandPath(t),delete n[e.key]),Object.keys(n).length&&e.children){var r,i=O(e.children);try{for(i.s();!(r=i.n()).done;){var o=r.value;t.push(e.key),this.updateTreeBranchState(o,t,n)}}catch(e){i.e(e)}finally{i.f()}}}else{var l,s=O(this.options);try{for(s.s();!(l=s.n()).done;){this.updateTreeBranchState(l.value,[],n)}}catch(e){s.e(e)}finally{s.f()}}},expandPath:function(e){if(e.length>0){var t,n=O(e);try{for(n.s();!(t=n.n()).done;){this.expandedKeys[t.value]=!0}}catch(e){n.e(e)}finally{n.f()}}},scrollValueInView:function(){if(this.overlay){var e=o.DomHandler.findSingle(this.overlay,'[data-p-highlight="true"]');e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{selectedNodes:function(){var e=[];if(this.modelValue&&this.options){var t=S({},this.modelValue);this.findSelectedNodes(null,t,e)}return e},label:function(){var e=this.selectedNodes;return e.length?e.map((function(e){return e.label})).join(", "):this.placeholder},emptyMessageText:function(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue:function(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions:function(){return!this.options||0===this.options.length},listId:function(){return o.UniqueComponentId()+"_list"}},components:{TSTree:y.default,Portal:p.default,ChevronDownIcon:u.default},directives:{ripple:f.default}};function E(e){return E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E(e)}function $(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$(Object(n),!0).forEach((function(t){D(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function D(e,t,n){return(t=K(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K(e){var t=I(e,"string");return"symbol"===E(t)?t:String(t)}function I(e,t){if("object"!==E(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var B=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],H=["aria-expanded"];return N.render=function(e,t,n,r,i,o){var l=a.resolveComponent("TSTree"),s=a.resolveComponent("Portal");return a.openBlock(),a.createElementBlock("div",a.mergeProps({ref:"container",class:e.cx("root"),style:e.sx("root"),onClick:t[7]||(t[7]=function(){return o.onClick&&o.onClick.apply(o,arguments)})},e.ptm("root"),{"data-pc-name":"treeselect"}),[a.createElementVNode("div",a.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper"),{"data-p-hidden-accessible":!0}),[a.createElementVNode("input",a.mergeProps({ref:"focusInput",id:e.inputId,type:"text",role:"combobox",class:e.inputClass,style:e.inputStyle,readonly:"",disabled:e.disabled,tabindex:e.disabled?-1:e.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":i.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=function(e){return o.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return o.onBlur(e)}),onKeydown:t[2]||(t[2]=function(e){return o.onKeyDown(e)})},T(T({},e.inputProps),e.ptm("hiddenInput"))),null,16,B)],16),a.createElementVNode("div",a.mergeProps({class:e.cx("labelContainer")},e.ptm("labelContainer")),[a.createElementVNode("div",a.mergeProps({class:e.cx("label")},e.ptm("label")),[a.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:e.placeholder},(function(){return["comma"===e.display?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[a.createTextVNode(a.toDisplayString(o.label||"empty"),1)],64)):"chip"===e.display?(a.openBlock(),a.createElementBlock(a.Fragment,{key:1},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(o.selectedNodes,(function(t){return a.openBlock(),a.createElementBlock("div",a.mergeProps({key:t.key,class:e.cx("token")},e.ptm("token")),[a.createElementVNode("span",a.mergeProps({class:e.cx("tokenLabel")},e.ptm("tokenLabel")),a.toDisplayString(t.label),17)],16)})),128)),o.emptyValue?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[a.createTextVNode(a.toDisplayString(e.placeholder||"empty"),1)],64)):a.createCommentVNode("",!0)],64)):a.createCommentVNode("",!0)]}))],16)],16),a.createElementVNode("div",a.mergeProps({class:e.cx("trigger"),role:"button","aria-haspopup":"tree","aria-expanded":i.overlayVisible},e.ptm("trigger")),[a.renderSlot(e.$slots,"triggericon",{class:a.normalizeClass(e.cx("triggerIcon"))},(function(){return[(a.openBlock(),a.createBlock(a.resolveDynamicComponent("ChevronDownIcon"),a.mergeProps({class:e.cx("triggerIcon")},e.ptm("triggerIcon")),null,16,["class"]))]}))],16,H),a.createVNode(s,{appendTo:e.appendTo},{default:a.withCtx((function(){return[a.createVNode(a.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:a.withCtx((function(){return[i.overlayVisible?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=function(){return o.onOverlayClick&&o.onOverlayClick.apply(o,arguments)}),class:[e.cx("panel"),e.panelClass],onKeydown:t[6]||(t[6]=function(){return o.onOverlayKeydown&&o.onOverlayKeydown.apply(o,arguments)})},T(T({},e.panelProps),e.ptm("panel"))),[a.renderSlot(e.$slots,"header",{value:e.modelValue,options:e.options}),a.createElementVNode("div",a.mergeProps({class:e.cx("panel"),style:{"max-height":e.scrollHeight}},e.ptm("wrapper")),[a.createVNode(l,{ref:"tree",id:o.listId,value:e.options,selectionMode:e.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:e.modelValue,expandedKeys:i.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:e.metaKeySelection,onNodeExpand:t[3]||(t[3]=function(t){return e.$emit("node-expand",t)}),onNodeCollapse:t[4]||(t[4]=function(t){return e.$emit("node-collapse",t)}),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0,unstyled:e.unstyled,pt:e.ptm("tree"),"data-pc-section":"tree"},a.createSlots({_:2},[e.$slots.itemtogglericon?{name:"togglericon",fn:a.withCtx((function(t){return[a.renderSlot(e.$slots,"itemtogglericon",{node:t.node,expanded:t.expanded,class:a.normalizeClass(t.class)})]})),key:"0"}:void 0,e.$slots.itemcheckboxicon?{name:"checkboxicon",fn:a.withCtx((function(t){return[a.renderSlot(e.$slots,"itemcheckboxicon",{checked:t.checked,partialChecked:t.partialChecked,class:a.normalizeClass(t.class)})]})),key:"1"}:void 0]),1032,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect","unstyled","pt"]),o.emptyOptions?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:e.cx("emptyMessage")},e.ptm("emptyMessage")),[a.renderSlot(e.$slots,"empty",{},(function(){return[a.createTextVNode(a.toDisplayString(o.emptyMessageText),1)]}))],16)):a.createCommentVNode("",!0)],16),a.renderSlot(e.$slots,"footer",{value:e.modelValue,options:e.options})],16)):a.createCommentVNode("",!0)]})),_:3},8,["onEnter","onLeave","onAfterLeave"])]})),_:3},8,["appendTo"])],16)},N}(primevue.icons.chevrondown,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/treetable/BaseTreeTable.vue

@@ -0,0 +1,434 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-treetable {
+    position: relative;
+}
+
+.p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
+.p-treetable-auto-layout > .p-treetable-wrapper > table {
+    table-layout: auto;
+}
+
+.p-treetable-hoverable-rows .p-treetable-tbody > tr {
+    cursor: pointer;
+}
+
+.p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+}
+
+.p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+}
+
+/* Resizable */
+.p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-resizable .p-treetable-thead > tr > th,
+.p-treetable-resizable .p-treetable-tfoot > tr > td,
+.p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+}
+
+.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
+    background-clip: padding-box;
+    position: relative;
+}
+
+.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+}
+
+.p-treetable .p-column-resizer {
+    display: block;
+    position: absolute !important;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+}
+
+.p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+.p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+/* Scrollable */
+.p-treetable-scrollable .p-treetable-wrapper {
+    position: relative;
+    overflow: auto;
+}
+
+.p-treetable-scrollable .p-treetable-table {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead,
+.p-treetable-scrollable .p-treetable-tbody,
+.p-treetable-scrollable .p-treetable-tfoot {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr,
+.p-treetable-scrollable .p-treetable-tbody > tr,
+.p-treetable-scrollable .p-treetable-tfoot > tr {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr > th,
+.p-treetable-scrollable .p-treetable-tbody > tr > td,
+.p-treetable-scrollable .p-treetable-tfoot > tr > td {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+}
+
+.p-treetable-scrollable .p-treetable-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-treetable-tfoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-treetable-scrollable th.p-frozen-column {
+    z-index: 1;
+}
+
+.p-treetable-scrollable-both .p-treetable-thead > tr > th,
+.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
+    flex: 0 0 auto;
+}
+
+.p-treetable-flex-scrollable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.p-treetable-flex-scrollable .p-treetable-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-treetable p-component',
+        {
+            'p-treetable-hoverable-rows': props.rowHover || instance.rowSelectionMode,
+            'p-treetable-auto-layout': props.autoLayout,
+            'p-treetable-resizable': props.resizableColumns,
+            'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-treetable-gridlines': props.showGridlines,
+            'p-treetable-scrollable': props.scrollable,
+            'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
+            'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
+            'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
+            'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll'
+        }
+    ],
+    loadingWrapper: 'p-treetable-loading',
+    loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
+    loadingIcon: 'p-treetable-loading-icon',
+    header: 'p-treetable-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    wrapper: 'p-treetable-wrapper',
+    thead: 'p-treetable-thead',
+    //headercell
+    headerCell: ({ instance, props, column }) =>
+        column && instance.hasColumnFilter()
+            ? [
+                  'p-filter-column',
+                  {
+                      'p-frozen-column': instance.columnProp(column, 'frozen')
+                  }
+              ]
+            : [
+                  {
+                      'p-sortable-column': instance.columnProp('sortable'),
+                      'p-resizable-column': props.resizableColumns,
+                      'p-highlight': instance.isColumnSorted(),
+                      'p-frozen-column': instance.columnProp('frozen')
+                  }
+              ],
+    columnResizer: 'p-column-resizer',
+    headerTitle: 'p-column-title',
+    sortIcon: 'p-sortable-column-icon',
+    sortBadge: 'p-sortable-column-badge',
+    tbody: 'p-treetable-tbody',
+    //ttrow
+    row: ({ instance }) => [
+        {
+            'p-highlight': instance.selected
+        }
+    ],
+    //bodycell
+    bodyCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    rowToggler: 'p-treetable-toggler p-link',
+    rowTogglerIcon: 'p-tree-toggler-icon',
+    checkboxWrapper: ({ instance }) => [
+        'p-checkbox p-treetable-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.checkboxFocused
+        }
+    ],
+    checkbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-focus': instance.checkboxFocused,
+            'p-indeterminate': instance.partialChecked
+        }
+    ],
+    checkboxicon: 'p-checkbox-icon',
+    //treetable
+    emptyMessage: 'p-treetable-emptymessage',
+    tfoot: 'p-treetable-tfoot',
+    //footercell
+    footerCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    //treetable
+    footer: 'p-treetable-footer',
+    resizeHelper: 'p-column-resizer-helper p-highlight'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'treetable', manual: true });
+
+export default {
+    name: 'BaseTreeTable',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        metaKeySelection: {
+            type: Boolean,
+            default: true
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        paginator: {
+            type: Boolean,
+            default: false
+        },
+        paginatorPosition: {
+            type: String,
+            default: 'bottom'
+        },
+        alwaysShowPaginator: {
+            type: Boolean,
+            default: true
+        },
+        paginatorTemplate: {
+            type: String,
+            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        pageLinkSize: {
+            type: Number,
+            default: 5
+        },
+        rowsPerPageOptions: {
+            type: Array,
+            default: null
+        },
+        currentPageReportTemplate: {
+            type: String,
+            default: '({currentPage} of {totalPages})'
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: undefined
+        },
+        rowHover: {
+            type: Boolean,
+            default: false
+        },
+        autoLayout: {
+            type: Boolean,
+            default: false
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortOrder: {
+            type: Number,
+            default: null
+        },
+        defaultSortOrder: {
+            type: Number,
+            default: 1
+        },
+        multiSortMeta: {
+            type: Array,
+            default: null
+        },
+        sortMode: {
+            type: String,
+            default: 'single'
+        },
+        removableSort: {
+            type: Boolean,
+            default: false
+        },
+        filters: {
+            type: Object,
+            default: null
+        },
+        filterMode: {
+            type: String,
+            default: 'lenient'
+        },
+        filterLocale: {
+            type: String,
+            default: undefined
+        },
+        resizableColumns: {
+            type: Boolean,
+            default: false
+        },
+        columnResizeMode: {
+            type: String,
+            default: 'fit'
+        },
+        indentation: {
+            type: Number,
+            default: 1
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        scrollDirection: {
+            type: String,
+            default: 'vertical'
+        },
+        scrollHeight: {
+            type: String,
+            default: null
+        },
+        responsiveLayout: {
+            type: String,
+            default: null
+        },
+        tableProps: {
+            type: Object,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/treetable/BodyCell.vue

@@ -1,22 +1,22 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
-        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
-            <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" v-bind="getColumnPTOptions('rowTogglerIcon')" />
-            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
+    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
+        <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')">
+            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
         </button>
-        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
-            <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
-                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnPT('checkboxWrapper')">
+            <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPT('hiddenInput')" />
             </div>
-            <div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
-                <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" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
+            <div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPT('checkbox')">
+                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxicon')" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxicon')" v-bind="getColumnCheckboxPT('checkboxIcon')" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
         <template v-else>
-            <span v-bind="getColumnPTOptions('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
+            <span v-bind="getColumnPT('bodyCellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
         </template>
     </td>
 </template>
@@ -29,9 +29,11 @@ import ChevronRightIcon from 'primevue/icons/chevronright';
 import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'BodyCell',
+    hostName: 'TreeTable',
     extends: BaseComponent,
     emits: ['node-toggle', 'checkbox-toggle'],
     props: {
@@ -74,6 +76,10 @@ export default {
         templates: {
             type: Object,
             default: null
+        },
+        index: {
+            type: Number,
+            default: null
         }
     },
     data() {
@@ -99,16 +105,24 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
-        getColumnPTOptions(key) {
-            return this.ptmo(this.getColumnProp(), key, {
+        getColumnPT(key) {
+            const columnMetaData = {
                 props: this.column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index: this.index
                 }
-            });
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
         },
-        getColumnCheckboxPTOptions(key) {
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
+        },
+        getColumnCheckboxPT(key) {
             return this.ptmo(this.getColumnProp(), key, {
                 props: this.column.props,
                 parent: {
@@ -122,9 +136,6 @@ export default {
                 }
             });
         },
-        getColumnProp() {
-            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
-        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
@@ -165,13 +176,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
-                this.columnProp('bodyClass'),
-                this.columnProp('class'),
-                {
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
+            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
@@ -187,9 +192,6 @@ export default {
         },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
-        },
-        checkboxClass() {
-            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
         }
     },
     components: {