primevue 3.28.0 → 3.29.0

package/orderlist/orderlist.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.orderlist=function(e,t,i,n,o,l,s,r){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=d(e),c=d(t),h=d(i),u=d(n),p=d(o),m=d(l),f={name:"OrderList",emits:["update:modelValue","reorder","update:selection","selection-change","focus","blur"],props:{modelValue:{type:Array,default:null},selection:{type:Array,default:null},dataKey:{type:String,default:null},listStyle:{type:null,default:null},metaKeySelection:{type:Boolean,default:!0},responsive:{type:Boolean,default:!0},breakpoint:{type:String,default:"960px"},stripedRows:{type:Boolean,default:!1},tabindex:{type:Number,default:0},listProps:{type:null,default:null},moveUpButtonProps:{type:null,default:null},moveTopButtonProps:{type:null,default:null},moveDownButtonProps:{type:null,default:null},moveBottomButtonProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},itemTouched:!1,reorderDirection:null,styleElement:null,list:null,data(){return{id:this.$attrs.id,d_selection:this.selection,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||s.UniqueComponentId()}},beforeUnmount(){this.destroyStyle()},updated(){this.reorderDirection&&(this.updateListScroll(),this.reorderDirection=null)},mounted(){this.id=this.id||s.UniqueComponentId(),this.responsive&&this.createStyle()},methods:{getItemKey(e,t){return this.dataKey?s.ObjectUtils.resolveFieldData(e,this.dataKey):t},isSelected(e){return-1!=s.ObjectUtils.findIndexInList(e,this.d_selection)},onListFocus(e){const t=s.DomHandler.findSingle(this.list,"li.p-orderlist-item.p-highlight"),i=s.ObjectUtils.findIndexInList(t,this.list.children);this.focused=!0;const n=-1!==this.focusedOptionIndex?this.focusedOptionIndex:t?i:-1;this.changeFocusedOptionIndex(n),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Enter":this.onEnterKey(e);break;case"Space":this.onSpaceKey(e);break;case"KeyA":e.ctrlKey&&(this.d_selection=[...this.modelValue],this.$emit("update:selection",this.d_selection))}},onOptionMouseDown(e){this.focused=!0,this.focusedOptionIndex=e},onArrowDownKey(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.shiftKey&&this.onEnterKey(e),e.preventDefault()},onArrowUpKey(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.shiftKey&&this.onEnterKey(e),e.preventDefault()},onHomeKey(e){if(e.ctrlKey&&e.shiftKey){const e=s.DomHandler.find(this.list,"li.p-orderlist-item"),t=s.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),i=[...e].findIndex((e=>e===t));this.d_selection=[...this.modelValue].slice(0,i+1),this.$emit("update:selection",this.d_selection)}else this.changeFocusedOptionIndex(0);e.preventDefault()},onEndKey(e){if(e.ctrlKey&&e.shiftKey){const e=s.DomHandler.find(this.list,"li.p-orderlist-item"),t=s.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),i=[...e].findIndex((e=>e===t));this.d_selection=[...this.modelValue].slice(i,e.length),this.$emit("update:selection",this.d_selection)}else this.changeFocusedOptionIndex(s.DomHandler.find(this.list,"li.p-orderlist-item").length-1);e.preventDefault()},onEnterKey(e){const t=s.DomHandler.find(this.list,"li.p-orderlist-item"),i=s.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),n=[...t].findIndex((e=>e===i));this.onItemClick(e,this.modelValue[n],n),e.preventDefault()},onSpaceKey(e){if(e.shiftKey){const e=s.DomHandler.find(this.list,"li.p-orderlist-item"),t=s.ObjectUtils.findIndexInList(this.d_selection[0],[...this.modelValue]),i=s.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),n=[...e].findIndex((e=>e===i));this.d_selection=[...this.modelValue].slice(Math.min(t,n),Math.max(t,n)+1),this.$emit("update:selection",this.d_selection)}else this.onEnterKey(e)},findNextOptionIndex(e){const t=[...s.DomHandler.find(this.list,"li.p-orderlist-item")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...s.DomHandler.find(this.list,"li.p-orderlist-item")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=s.DomHandler.find(this.list,"li.p-orderlist-item");let i=e>=t.length?t.length-1:e<0?0:e;this.focusedOptionIndex=t[i].getAttribute("id"),this.scrollInView(t[i].getAttribute("id"))},scrollInView(e){const t=s.DomHandler.findSingle(this.list,`li[id="${e}"]`);t&&t.scrollIntoView&&t.scrollIntoView({block:"nearest",inline:"start"})},moveUp(e){if(this.d_selection){let t=[...this.modelValue];for(let e=0;e<this.d_selection.length;e++){let i=this.d_selection[e],n=s.ObjectUtils.findIndexInList(i,t);if(0===n)break;{let e=t[n],i=t[n-1];t[n-1]=e,t[n]=i}}this.reorderDirection="up",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveTop(e){if(this.d_selection){let t=[...this.modelValue];for(let e=0;e<this.d_selection.length;e++){let i=this.d_selection[e],n=s.ObjectUtils.findIndexInList(i,t);if(0===n)break;{let e=t.splice(n,1)[0];t.unshift(e)}}this.reorderDirection="top",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveDown(e){if(this.d_selection){let t=[...this.modelValue];for(let e=this.d_selection.length-1;e>=0;e--){let i=this.d_selection[e],n=s.ObjectUtils.findIndexInList(i,t);if(n===t.length-1)break;{let e=t[n],i=t[n+1];t[n+1]=e,t[n]=i}}this.reorderDirection="down",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveBottom(e){if(this.d_selection){let t=[...this.modelValue];for(let e=this.d_selection.length-1;e>=0;e--){let i=this.d_selection[e],n=s.ObjectUtils.findIndexInList(i,t);if(n===t.length-1)break;{let e=t.splice(n,1)[0];t.push(e)}}this.reorderDirection="bottom",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},onItemClick(e,t,i){this.itemTouched=!1;const n=s.ObjectUtils.findIndexInList(t,this.d_selection),o=-1!=n,l=!this.itemTouched&&this.metaKeySelection,r=s.DomHandler.find(this.list,".p-orderlist-item")[i].getAttribute("id");if(this.focusedOptionIndex=r,l){const l=e.metaKey||e.ctrlKey;o&&l?this.d_selection=this.d_selection.filter(((e,t)=>t!==n)):(this.d_selection=l&&this.d_selection?[...this.d_selection]:[],s.ObjectUtils.insertIntoOrderedArray(t,i,this.d_selection,this.modelValue))}else o?this.d_selection=this.d_selection.filter(((e,t)=>t!==n)):(this.d_selection=this.d_selection?[...this.d_selection]:[],s.ObjectUtils.insertIntoOrderedArray(t,i,this.d_selection,this.modelValue));this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})},onItemTouchEnd(){this.itemTouched=!0},findNextItem(e){let t=e.nextElementSibling;return t?s.DomHandler.hasClass(t,"p-orderlist-item")?t:this.findNextItem(t):null},findPrevItem(e){let t=e.previousElementSibling;return t?s.DomHandler.hasClass(t,"p-orderlist-item")?t:this.findPrevItem(t):null},findFirstItem(){return s.DomHandler.findSingle(this.list,".p-orderlist-item")},findLastItem(){const e=s.DomHandler.find(this.list,".p-orderlist-item");return e[e.length-1]},itemClass(e,t){return["p-orderlist-item",{"p-highlight":this.isSelected(e),"p-focus":t===this.focusedOptionId}]},updateListScroll(){const e=s.DomHandler.find(this.list,".p-orderlist-item.p-highlight");if(e&&e.length)switch(this.reorderDirection){case"up":s.DomHandler.scrollInView(this.list,e[0]);break;case"top":this.list.scrollTop=0;break;case"down":s.DomHandler.scrollInView(this.list,e[e.length-1]);break;case"bottom":this.list.scrollTop=this.list.scrollHeight}},createStyle(){if(!this.styleElement){this.$el.setAttribute(this.attributeSelector,""),this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e=`\n@media screen and (max-width: ${this.breakpoint}) {\n    .p-orderlist[${this.attributeSelector}] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n`;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},moveDisabled(){if(!this.d_selection||!this.d_selection.length)return!0},listRef(e){this.list=e?e.$el:void 0}},computed:{containerClass(){return["p-orderlist p-component",{"p-orderlist-striped":this.stripedRows}]},attributeSelector:()=>s.UniqueComponentId(),focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null},moveUpAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveUp:void 0},moveTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveTop:void 0},moveDownAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveDown:void 0},moveBottomAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveBottom:void 0}},components:{OLButton:a.default,AngleUpIcon:p.default,AngleDownIcon:u.default,AngleDoubleUpIcon:h.default,AngleDoubleDownIcon:c.default},directives:{ripple:m.default}};const b={class:"p-orderlist-controls"},v={class:"p-orderlist-list-container"},y={key:0,class:"p-orderlist-header"},g=["id","onClick","aria-selected","onMousedown"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-orderlist {\n    display: flex;\n}\n.p-orderlist-controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.p-orderlist-list-container {\n    flex: 1 1 auto;\n}\n.p-orderlist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-orderlist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-orderlist.p-state-disabled .p-orderlist-item,\n.p-orderlist.p-state-disabled .p-button {\n    cursor: default;\n}\n.p-orderlist.p-state-disabled .p-orderlist-list {\n    overflow: hidden;\n}\n"),f.render=function(e,t,i,n,o,l){const s=r.resolveComponent("AngleUpIcon"),d=r.resolveComponent("OLButton"),a=r.resolveComponent("AngleDoubleUpIcon"),c=r.resolveComponent("AngleDownIcon"),h=r.resolveComponent("AngleDoubleDownIcon"),u=r.resolveDirective("ripple");return r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(l.containerClass)},[r.createElementVNode("div",b,[r.renderSlot(e.$slots,"controlsstart"),r.createVNode(d,r.mergeProps({type:"button",onClick:l.moveUp,"aria-label":l.moveUpAriaLabel,disabled:l.moveDisabled()},i.moveUpButtonProps),{icon:r.withCtx((()=>[r.renderSlot(e.$slots,"moveupicon",{},(()=>[r.createVNode(s)]))])),_:3},16,["onClick","aria-label","disabled"]),r.createVNode(d,r.mergeProps({type:"button",onClick:l.moveTop,"aria-label":l.moveTopAriaLabel,disabled:l.moveDisabled()},i.moveTopButtonProps),{icon:r.withCtx((()=>[r.renderSlot(e.$slots,"movetopicon",{},(()=>[r.createVNode(a)]))])),_:3},16,["onClick","aria-label","disabled"]),r.createVNode(d,r.mergeProps({type:"button",onClick:l.moveDown,"aria-label":l.moveDownAriaLabel,disabled:l.moveDisabled()},i.moveDownButtonProps),{icon:r.withCtx((()=>[r.renderSlot(e.$slots,"movedownicon",{},(()=>[r.createVNode(c)]))])),_:3},16,["onClick","aria-label","disabled"]),r.createVNode(d,r.mergeProps({type:"button",onClick:l.moveBottom,"aria-label":l.moveBottomAriaLabel,disabled:l.moveDisabled()},i.moveBottomButtonProps),{icon:r.withCtx((()=>[r.renderSlot(e.$slots,"movebottomicon",{},(()=>[r.createVNode(h)]))])),_:3},16,["onClick","aria-label","disabled"]),r.renderSlot(e.$slots,"controlsend")]),r.createElementVNode("div",v,[e.$slots.header?(r.openBlock(),r.createElementBlock("div",y,[r.renderSlot(e.$slots,"header")])):r.createCommentVNode("",!0),r.createVNode(r.TransitionGroup,r.mergeProps({ref:l.listRef,id:o.id+"_list",name:"p-orderlist-flip",tag:"ul",class:"p-orderlist-list",style:i.listStyle,role:"listbox","aria-multiselectable":"true",tabindex:i.tabindex,"aria-activedescendant":o.focused?l.focusedOptionId:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:l.onListFocus,onBlur:l.onListBlur,onKeydown:l.onListKeyDown},i.listProps),{default:r.withCtx((()=>[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.modelValue,((i,n)=>r.withDirectives((r.openBlock(),r.createElementBlock("li",{key:l.getItemKey(i,n),id:o.id+"_"+n,role:"option",class:r.normalizeClass(l.itemClass(i,`${o.id}_${n}`)),onClick:e=>l.onItemClick(e,i,n),onTouchend:t[0]||(t[0]=(...e)=>l.onItemTouchEnd&&l.onItemTouchEnd(...e)),"aria-selected":l.isSelected(i),onMousedown:e=>l.onOptionMouseDown(n)},[r.renderSlot(e.$slots,"item",{item:i,index:n})],42,g)),[[u]]))),128))])),_:3},16,["id","style","tabindex","aria-activedescendant","aria-label","aria-labelledby","onFocus","onBlur","onKeydown"])])],2)},f}(primevue.button,primevue.icons.angledoubledown,primevue.icons.angledoubleup,primevue.icons.angledown,primevue.icons.angleup,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.orderlist=function(e,t,i,o,n,l,s,r,d){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(e),p=a(t),u=a(i),m=a(o),h=a(n),f=a(l),v=a(s),b={name:"OrderList",extends:c.default,emits:["update:modelValue","reorder","update:selection","selection-change","focus","blur"],props:{modelValue:{type:Array,default:null},selection:{type:Array,default:null},dataKey:{type:String,default:null},listStyle:{type:null,default:null},metaKeySelection:{type:Boolean,default:!0},responsive:{type:Boolean,default:!0},breakpoint:{type:String,default:"960px"},stripedRows:{type:Boolean,default:!1},tabindex:{type:Number,default:0},listProps:{type:null,default:null},moveUpButtonProps:{type:null,default:null},moveTopButtonProps:{type:null,default:null},moveDownButtonProps:{type:null,default:null},moveBottomButtonProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},itemTouched:!1,reorderDirection:null,styleElement:null,list:null,data(){return{id:this.$attrs.id,d_selection:this.selection,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||r.UniqueComponentId()}},beforeUnmount(){this.destroyStyle()},updated(){this.reorderDirection&&(this.updateListScroll(),this.reorderDirection=null)},mounted(){this.id=this.id||r.UniqueComponentId(),this.responsive&&this.createStyle()},methods:{getItemKey(e,t){return this.dataKey?r.ObjectUtils.resolveFieldData(e,this.dataKey):t},getPTOptions(e,t){return this.ptm(t,{context:{active:this.isSelected(e),focused:this.id===this.focusedOptionId}})},isSelected(e){return-1!=r.ObjectUtils.findIndexInList(e,this.d_selection)},onListFocus(e){const t=r.DomHandler.findSingle(this.list,"li.p-orderlist-item.p-highlight"),i=r.ObjectUtils.findIndexInList(t,this.list.children);this.focused=!0;const o=-1!==this.focusedOptionIndex?this.focusedOptionIndex:t?i:-1;this.changeFocusedOptionIndex(o),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Enter":this.onEnterKey(e);break;case"Space":this.onSpaceKey(e);break;case"KeyA":e.ctrlKey&&(this.d_selection=[...this.modelValue],this.$emit("update:selection",this.d_selection))}},onOptionMouseDown(e){this.focused=!0,this.focusedOptionIndex=e},onArrowDownKey(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.shiftKey&&this.onEnterKey(e),e.preventDefault()},onArrowUpKey(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.shiftKey&&this.onEnterKey(e),e.preventDefault()},onHomeKey(e){if(e.ctrlKey&&e.shiftKey){const e=r.DomHandler.find(this.list,"li.p-orderlist-item"),t=r.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),i=[...e].findIndex((e=>e===t));this.d_selection=[...this.modelValue].slice(0,i+1),this.$emit("update:selection",this.d_selection)}else this.changeFocusedOptionIndex(0);e.preventDefault()},onEndKey(e){if(e.ctrlKey&&e.shiftKey){const e=r.DomHandler.find(this.list,"li.p-orderlist-item"),t=r.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),i=[...e].findIndex((e=>e===t));this.d_selection=[...this.modelValue].slice(i,e.length),this.$emit("update:selection",this.d_selection)}else this.changeFocusedOptionIndex(r.DomHandler.find(this.list,"li.p-orderlist-item").length-1);e.preventDefault()},onEnterKey(e){const t=r.DomHandler.find(this.list,"li.p-orderlist-item"),i=r.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),o=[...t].findIndex((e=>e===i));this.onItemClick(e,this.modelValue[o],o),e.preventDefault()},onSpaceKey(e){if(e.shiftKey){const e=r.DomHandler.find(this.list,"li.p-orderlist-item"),t=r.ObjectUtils.findIndexInList(this.d_selection[0],[...this.modelValue]),i=r.DomHandler.findSingle(this.list,`li.p-orderlist-item[id=${this.focusedOptionIndex}]`),o=[...e].findIndex((e=>e===i));this.d_selection=[...this.modelValue].slice(Math.min(t,o),Math.max(t,o)+1),this.$emit("update:selection",this.d_selection)}else this.onEnterKey(e)},findNextOptionIndex(e){const t=[...r.DomHandler.find(this.list,"li.p-orderlist-item")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...r.DomHandler.find(this.list,"li.p-orderlist-item")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=r.DomHandler.find(this.list,"li.p-orderlist-item");let i=e>=t.length?t.length-1:e<0?0:e;this.focusedOptionIndex=t[i]?t[i].getAttribute("id"):-1,this.scrollInView(this.focusedOptionIndex)},scrollInView(e){const t=r.DomHandler.findSingle(this.list,`li[id="${e}"]`);t&&t.scrollIntoView&&t.scrollIntoView({block:"nearest",inline:"start"})},moveUp(e){if(this.d_selection){let t=[...this.modelValue];for(let e=0;e<this.d_selection.length;e++){let i=this.d_selection[e],o=r.ObjectUtils.findIndexInList(i,t);if(0===o)break;{let e=t[o],i=t[o-1];t[o-1]=e,t[o]=i}}this.reorderDirection="up",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveTop(e){if(this.d_selection){let t=[...this.modelValue];for(let e=0;e<this.d_selection.length;e++){let i=this.d_selection[e],o=r.ObjectUtils.findIndexInList(i,t);if(0===o)break;{let e=t.splice(o,1)[0];t.unshift(e)}}this.reorderDirection="top",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveDown(e){if(this.d_selection){let t=[...this.modelValue];for(let e=this.d_selection.length-1;e>=0;e--){let i=this.d_selection[e],o=r.ObjectUtils.findIndexInList(i,t);if(o===t.length-1)break;{let e=t[o],i=t[o+1];t[o+1]=e,t[o]=i}}this.reorderDirection="down",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},moveBottom(e){if(this.d_selection){let t=[...this.modelValue];for(let e=this.d_selection.length-1;e>=0;e--){let i=this.d_selection[e],o=r.ObjectUtils.findIndexInList(i,t);if(o===t.length-1)break;{let e=t.splice(o,1)[0];t.push(e)}}this.reorderDirection="bottom",this.$emit("update:modelValue",t),this.$emit("reorder",{originalEvent:e,value:t,direction:this.reorderDirection})}},onItemClick(e,t,i){this.itemTouched=!1;const o=r.ObjectUtils.findIndexInList(t,this.d_selection),n=-1!=o,l=!this.itemTouched&&this.metaKeySelection,s=r.DomHandler.find(this.list,".p-orderlist-item")[i].getAttribute("id");if(this.focusedOptionIndex=s,l){const l=e.metaKey||e.ctrlKey;n&&l?this.d_selection=this.d_selection.filter(((e,t)=>t!==o)):(this.d_selection=l&&this.d_selection?[...this.d_selection]:[],r.ObjectUtils.insertIntoOrderedArray(t,i,this.d_selection,this.modelValue))}else n?this.d_selection=this.d_selection.filter(((e,t)=>t!==o)):(this.d_selection=this.d_selection?[...this.d_selection]:[],r.ObjectUtils.insertIntoOrderedArray(t,i,this.d_selection,this.modelValue));this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})},onItemTouchEnd(){this.itemTouched=!0},findNextItem(e){let t=e.nextElementSibling;return t?r.DomHandler.hasClass(t,"p-orderlist-item")?t:this.findNextItem(t):null},findPrevItem(e){let t=e.previousElementSibling;return t?r.DomHandler.hasClass(t,"p-orderlist-item")?t:this.findPrevItem(t):null},findFirstItem(){return r.DomHandler.findSingle(this.list,".p-orderlist-item")},findLastItem(){const e=r.DomHandler.find(this.list,".p-orderlist-item");return e[e.length-1]},itemClass(e,t){return["p-orderlist-item",{"p-highlight":this.isSelected(e),"p-focus":t===this.focusedOptionId}]},updateListScroll(){const e=r.DomHandler.find(this.list,".p-orderlist-item.p-highlight");if(e&&e.length)switch(this.reorderDirection){case"up":r.DomHandler.scrollInView(this.list,e[0]);break;case"top":this.list.scrollTop=0;break;case"down":r.DomHandler.scrollInView(this.list,e[e.length-1]);break;case"bottom":this.list.scrollTop=this.list.scrollHeight}},createStyle(){if(!this.styleElement){this.$el.setAttribute(this.attributeSelector,""),this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e=`\n@media screen and (max-width: ${this.breakpoint}) {\n    .p-orderlist[${this.attributeSelector}] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n`;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},moveDisabled(){if(!this.d_selection||!this.d_selection.length)return!0},listRef(e){this.list=e?e.$el:void 0}},computed:{containerClass(){return["p-orderlist p-component",{"p-orderlist-striped":this.stripedRows}]},attributeSelector:()=>r.UniqueComponentId(),focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null},moveUpAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveUp:void 0},moveTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveTop:void 0},moveDownAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveDown:void 0},moveBottomAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.moveBottom:void 0}},components:{OLButton:p.default,AngleUpIcon:f.default,AngleDownIcon:h.default,AngleDoubleUpIcon:m.default,AngleDoubleDownIcon:u.default},directives:{ripple:v.default}};const g=["id","onClick","aria-selected","onMousedown"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-orderlist {\n    display: flex;\n}\n.p-orderlist-controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.p-orderlist-list-container {\n    flex: 1 1 auto;\n}\n.p-orderlist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-orderlist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-orderlist.p-state-disabled .p-orderlist-item,\n.p-orderlist.p-state-disabled .p-button {\n    cursor: default;\n}\n.p-orderlist.p-state-disabled .p-orderlist-list {\n    overflow: hidden;\n}\n"),b.render=function(e,t,i,o,n,l){const s=d.resolveComponent("AngleUpIcon"),r=d.resolveComponent("OLButton"),a=d.resolveComponent("AngleDoubleUpIcon"),c=d.resolveComponent("AngleDownIcon"),p=d.resolveComponent("AngleDoubleDownIcon"),u=d.resolveDirective("ripple");return d.openBlock(),d.createElementBlock("div",d.mergeProps({class:l.containerClass},e.ptm("root")),[d.createElementVNode("div",d.mergeProps({class:"p-orderlist-controls"},e.ptm("controls")),[d.renderSlot(e.$slots,"controlsstart"),d.createVNode(r,d.mergeProps({type:"button",onClick:l.moveUp,"aria-label":l.moveUpAriaLabel,disabled:l.moveDisabled()},i.moveUpButtonProps,{pt:e.ptm("moveUpButton")}),{icon:d.withCtx((()=>[d.renderSlot(e.$slots,"moveupicon",{},(()=>[d.createVNode(s,d.normalizeProps(d.guardReactiveProps(e.ptm("moveUpButton").icon)),null,16)]))])),_:3},16,["onClick","aria-label","disabled","pt"]),d.createVNode(r,d.mergeProps({type:"button",onClick:l.moveTop,"aria-label":l.moveTopAriaLabel,disabled:l.moveDisabled()},i.moveTopButtonProps,{pt:e.ptm("moveTopButton")}),{icon:d.withCtx((()=>[d.renderSlot(e.$slots,"movetopicon",{},(()=>[d.createVNode(a,d.normalizeProps(d.guardReactiveProps(e.ptm("moveTopButton").icon)),null,16)]))])),_:3},16,["onClick","aria-label","disabled","pt"]),d.createVNode(r,d.mergeProps({type:"button",onClick:l.moveDown,"aria-label":l.moveDownAriaLabel,disabled:l.moveDisabled()},i.moveDownButtonProps,{pt:e.ptm("moveDownButton")}),{icon:d.withCtx((()=>[d.renderSlot(e.$slots,"movedownicon",{},(()=>[d.createVNode(c,d.normalizeProps(d.guardReactiveProps(e.ptm("moveDownButton").icon)),null,16)]))])),_:3},16,["onClick","aria-label","disabled","pt"]),d.createVNode(r,d.mergeProps({type:"button",onClick:l.moveBottom,"aria-label":l.moveBottomAriaLabel,disabled:l.moveDisabled()},i.moveBottomButtonProps,{pt:e.ptm("moveBottomButton")}),{icon:d.withCtx((()=>[d.renderSlot(e.$slots,"movebottomicon",{},(()=>[d.createVNode(p,d.normalizeProps(d.guardReactiveProps(e.ptm("moveBottomButton").icon)),null,16)]))])),_:3},16,["onClick","aria-label","disabled","pt"]),d.renderSlot(e.$slots,"controlsend")],16),d.createElementVNode("div",d.mergeProps({class:"p-orderlist-list-container"},e.ptm("container")),[e.$slots.header?(d.openBlock(),d.createElementBlock("div",d.mergeProps({key:0,class:"p-orderlist-header"},e.ptm("header")),[d.renderSlot(e.$slots,"header")],16)):d.createCommentVNode("",!0),d.createVNode(d.TransitionGroup,d.mergeProps({ref:l.listRef,id:n.id+"_list",name:"p-orderlist-flip",tag:"ul",class:"p-orderlist-list",style:i.listStyle,role:"listbox","aria-multiselectable":"true",tabindex:i.tabindex,"aria-activedescendant":n.focused?l.focusedOptionId:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:l.onListFocus,onBlur:l.onListBlur,onKeydown:l.onListKeyDown},{...i.listProps,...e.ptm("list")}),{default:d.withCtx((()=>[(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(i.modelValue,((i,o)=>d.withDirectives((d.openBlock(),d.createElementBlock("li",d.mergeProps({key:l.getItemKey(i,o),id:n.id+"_"+o,role:"option",class:l.itemClass(i,`${n.id}_${o}`),onClick:e=>l.onItemClick(e,i,o),onTouchend:t[0]||(t[0]=(...e)=>l.onItemTouchEnd&&l.onItemTouchEnd(...e)),"aria-selected":l.isSelected(i),onMousedown:e=>l.onOptionMouseDown(o)},l.getPTOptions(i,"item")),[d.renderSlot(e.$slots,"item",{item:i,index:o})],16,g)),[[u]]))),128))])),_:3},16,["id","style","tabindex","aria-activedescendant","aria-label","aria-labelledby","onFocus","onBlur","onKeydown"])],16)],16)},b}(primevue.basecomponent,primevue.button,primevue.icons.angledoubledown,primevue.icons.angledoubleup,primevue.icons.angledown,primevue.icons.angleup,primevue.ripple,primevue.utils,Vue);

package/organizationchart/OrganizationChart.d.ts

@@ -10,6 +10,17 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrganizationChartPassThroughMethodOptions {
+    props: OrganizationChartProps;
+    state: OrganizationChartState;
+    context: OrganizationChartContext;
+}
+
 /**
  * Defines valid properties in OrganizationChartNode.
  */
@@ -64,6 +75,119 @@ export interface OrganizationChartCollapsedKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrganizationChartProps.pt}
+ */
+export interface OrganizationChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body's DOM element.
+     */
+    body?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row' DOM element.
+     */
+    row?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the cell's DOM element.
+     */
+    cell?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the node's DOM element.
+     */
+    node?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeToggler's DOM element.
+     */
+    nodeToggler?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeTogglerIcon's DOM element.
+     */
+    nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lines's DOM element.
+     */
+    lines?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lineCell's DOM element.
+     */
+    lineCell?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lineDown's DOM element.
+     */
+    lineDown?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodes's DOM element.
+     */
+    nodes?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeCell's DOM element.
+     */
+    nodeCell?: OrganizationChartPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OrganizationChartPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OrganizationChart component.
+ */
+export interface OrganizationChartState {
+    /**
+     * Current collapsed keys' state.
+     * @defaultValue false
+     */
+    d_collapsedKeys: OrganizationChartCollapsedKeys;
+}
+
+/**
+ * Defines current options in OrganizationChart component.
+ */
+export interface OrganizationChartContext {
+    /**
+     * Current focus expanded of the node as a boolean.
+     * @defaultValue false
+     */
+    expanded: boolean;
+    /**
+     * Current selectable state of the node as a boolean.
+     * @defaultValue false
+     */
+    selectable: boolean;
+    /**
+     * Current selection state of the node as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current toggleable state of the node as a boolean.
+     * @defaultValue false
+     */
+    toggleable: boolean;
+    /**
+     * Current active state of the node as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current being top line state of the node as a boolean.
+     * @defaultValue false
+     */
+    lineTop: boolean;
+}
+
 /**
  * Defines valid properties in OrganizationChart component.
  */
@@ -89,6 +213,11 @@ export interface OrganizationChartProps {
      * @defaultValue false
      */
     collapsible?: boolean;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrganizationChartPassThroughOptions}
+     */
+    pt?: OrganizationChartPassThroughOptions;
 }
 
 /**

package/organizationchart/OrganizationChart.vue

@@ -1,14 +1,26 @@
 <template>
-    <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$slots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
+    <div class="p-organizationchart p-component" v-bind="ptm('root')">
+        <OrganizationChartNode
+            :node="value"
+            :templates="$slots"
+            @node-toggle="onNodeToggle"
+            :collapsedKeys="d_collapsedKeys"
+            :collapsible="collapsible"
+            @node-click="onNodeClick"
+            :selectionMode="selectionMode"
+            :selectionKeys="selectionKeys"
+            :pt="pt"
+        />
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
     name: 'OrganizationChart',
+    extends: BaseComponent,
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {

package/organizationchart/OrganizationChartNode.vue

@@ -1,37 +1,37 @@
 <template>
-    <table class="p-organizationchart-table">
-        <tbody>
-            <tr v-if="node">
-                <td :colspan="colspan">
-                    <div :class="nodeContentClass" @click="onNodeClick">
+    <table class="p-organizationchart-table" v-bind="ptm('table')">
+        <tbody v-bind="ptm('body')">
+            <tr v-if="node" v-bind="ptm('row')">
+                <td :colspan="colspan" v-bind="ptm('cell')">
+                    <div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
+                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
                             <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
-                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <td :colspan="colspan">
-                    <div class="p-organizationchart-line-down"></div>
+                    <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <template v-if="node.children && node.children.length === 1">
-                    <td :colspan="colspan">
-                        <div class="p-organizationchart-line-down"></div>
+                    <td :colspan="colspan" v-bind="ptm('lineCell')">
+                        <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
-                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
+                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-nodes">
-                <td v-for="child of node.children" :key="child.key" colspan="2">
+            <tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
+                <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
                         :templates="templates"
@@ -41,6 +41,7 @@
                         :selectionMode="selectionMode"
                         :selectionKeys="selectionKeys"
                         @node-click="onChildNodeClick"
+                        :pt="pt"
                     />
                 </td>
             </tr>
@@ -49,12 +50,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'OrganizationChartNode',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle'],
     props: {
         node: {
@@ -83,6 +86,24 @@ export default {
         }
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    expanded: this.expanded,
+                    selectable: this.selectable,
+                    selected: this.selected,
+                    toggleable: this.toggleable,
+                    active: this.selected
+                }
+            });
+        },
+        getNodeOptions(lineTop, key) {
+            return this.ptm(key, {
+                context: {
+                    lineTop
+                }
+            });
+        },
         onNodeClick(event) {
             if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
                 return;

package/organizationchart/organizationchart.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
 var ChevronUpIcon = require('primevue/icons/chevronup');
 var utils = require('primevue/utils');
@@ -7,11 +8,13 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
 
 var script$1 = {
     name: 'OrganizationChartNode',
+    extends: BaseComponent__default["default"],
     emits: ['node-click', 'node-toggle'],
     props: {
         node: {
@@ -40,6 +43,24 @@ var script$1 = {
         }
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    expanded: this.expanded,
+                    selectable: this.selectable,
+                    selected: this.selected,
+                    toggleable: this.toggleable,
+                    active: this.selected
+                }
+            });
+        },
+        getNodeOptions(lineTop, key) {
+            return this.ptm(key, {
+                context: {
+                    lineTop
+                }
+            });
+        },
         onNodeClick(event) {
             if (utils.DomHandler.hasClass(event.target, 'p-node-toggler') || utils.DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
                 return;
@@ -99,97 +120,91 @@ var script$1 = {
     }
 };
 
-const _hoisted_1$1 = { class: "p-organizationchart-table" };
-const _hoisted_2 = { key: 0 };
+const _hoisted_1 = ["colspan"];
+const _hoisted_2 = ["colspan"];
 const _hoisted_3 = ["colspan"];
-const _hoisted_4 = ["colspan"];
-const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-organizationchart-line-down" }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-organizationchart-line-down" }, null, -1);
-const _hoisted_9 = [
-  _hoisted_8
-];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrganizationChartNode = vue.resolveComponent("OrganizationChartNode", true);
 
-  return (vue.openBlock(), vue.createElementBlock("table", _hoisted_1$1, [
-    vue.createElementVNode("tbody", null, [
+  return (vue.openBlock(), vue.createElementBlock("table", vue.mergeProps({ class: "p-organizationchart-table" }, _ctx.ptm('table')), [
+    vue.createElementVNode("tbody", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('body'))), [
       ($props.node)
-        ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_2, [
-            vue.createElementVNode("td", { colspan: $options.colspan }, [
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass($options.nodeContentClass),
+        ? (vue.openBlock(), vue.createElementBlock("tr", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('row'))), [
+            vue.createElementVNode("td", vue.mergeProps({ colspan: $options.colspan }, _ctx.ptm('cell')), [
+              vue.createElementVNode("div", vue.mergeProps({
+                class: $options.nodeContentClass,
                 onClick: _cache[2] || (_cache[2] = (...args) => ($options.onNodeClick && $options.onNodeClick(...args)))
-              }, [
+              }, $options.getPTOptions('node')), [
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates[$props.node.type] || $props.templates['default']), { node: $props.node }, null, 8, ["node"])),
                 ($options.toggleable)
-                  ? (vue.openBlock(), vue.createElementBlock("a", {
+                  ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                       key: 0,
                       tabindex: "0",
                       class: "p-node-toggler",
                       onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleNode && $options.toggleNode(...args))),
                       onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-                    }, [
+                    }, $options.getPTOptions('nodeToggler')), [
                       ($props.templates.togglericon)
                         ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.togglericon), {
                             key: 0,
                             expanded: $options.expanded,
                             class: "p-node-toggler-icon"
                           }, null, 8, ["expanded"]))
-                        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'), {
+                        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'), vue.mergeProps({
                             key: 1,
                             class: "p-node-toggler-icon"
-                          }))
-                    ], 32))
+                          }, $options.getPTOptions('nodeTogglerIcon')), null, 16))
+                    ], 16))
                   : vue.createCommentVNode("", true)
-              ], 2)
-            ], 8, _hoisted_3)
-          ]))
+              ], 16)
+            ], 16, _hoisted_1)
+          ], 16))
         : vue.createCommentVNode("", true),
-      vue.createElementVNode("tr", {
-        style: vue.normalizeStyle($options.childStyle),
+      vue.createElementVNode("tr", vue.mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-lines"
-      }, [
-        vue.createElementVNode("td", { colspan: $options.colspan }, _hoisted_6, 8, _hoisted_4)
-      ], 4),
-      vue.createElementVNode("tr", {
-        style: vue.normalizeStyle($options.childStyle),
+      }, _ctx.ptm('lines')), [
+        vue.createElementVNode("td", { colspan: $options.colspan }, [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-organizationchart-line-down" }, _ctx.ptm('lineDown')), null, 16)
+        ], 8, _hoisted_2)
+      ], 16),
+      vue.createElementVNode("tr", vue.mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-lines"
-      }, [
+      }, _ctx.ptm('lines')), [
         ($props.node.children && $props.node.children.length === 1)
-          ? (vue.openBlock(), vue.createElementBlock("td", {
+          ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
               key: 0,
               colspan: $options.colspan
-            }, _hoisted_9, 8, _hoisted_7))
+            }, _ctx.ptm('lineCell')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-organizationchart-line-down" }, _ctx.ptm('lineDown')), null, 16)
+            ], 16, _hoisted_3))
           : vue.createCommentVNode("", true),
         ($props.node.children && $props.node.children.length > 1)
           ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList($props.node.children, (child, i) => {
               return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                 key: child.key
               }, [
-                vue.createElementVNode("td", {
-                  class: vue.normalizeClass(["p-organizationchart-line-left", { 'p-organizationchart-line-top': !(i === 0) }])
-                }, " ", 2),
-                vue.createElementVNode("td", {
-                  class: vue.normalizeClass(["p-organizationchart-line-right", { 'p-organizationchart-line-top': !(i === $props.node.children.length - 1) }])
-                }, " ", 2)
+                vue.createElementVNode("td", vue.mergeProps({
+                  class: ["p-organizationchart-line-left", { 'p-organizationchart-line-top': !(i === 0) }]
+                }, $options.getNodeOptions(!(i === 0), 'lineLeft')), " ", 16),
+                vue.createElementVNode("td", vue.mergeProps({
+                  class: ["p-organizationchart-line-right", { 'p-organizationchart-line-top': !(i === $props.node.children.length - 1) }]
+                }, $options.getNodeOptions(!(i === $props.node.children.length - 1), 'lineRight')), " ", 16)
               ], 64))
             }), 128))
           : vue.createCommentVNode("", true)
-      ], 4),
-      vue.createElementVNode("tr", {
-        style: vue.normalizeStyle($options.childStyle),
+      ], 16),
+      vue.createElementVNode("tr", vue.mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-nodes"
-      }, [
+      }, _ctx.ptm('nodes')), [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.node.children, (child) => {
-          return (vue.openBlock(), vue.createElementBlock("td", {
+          return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
             key: child.key,
             colspan: "2"
-          }, [
+          }, _ctx.ptm('nodeCell')), [
             vue.createVNode(_component_OrganizationChartNode, {
               node: child,
               templates: $props.templates,
@@ -198,19 +213,21 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
               collapsible: $props.collapsible,
               selectionMode: $props.selectionMode,
               selectionKeys: $props.selectionKeys,
-              onNodeClick: $options.onChildNodeClick
-            }, null, 8, ["node", "templates", "collapsedKeys", "onNodeToggle", "collapsible", "selectionMode", "selectionKeys", "onNodeClick"])
-          ]))
+              onNodeClick: $options.onChildNodeClick,
+              pt: _ctx.pt
+            }, null, 8, ["node", "templates", "collapsedKeys", "onNodeToggle", "collapsible", "selectionMode", "selectionKeys", "onNodeClick", "pt"])
+          ], 16))
         }), 128))
-      ], 4)
-    ])
-  ]))
+      ], 16)
+    ], 16)
+  ], 16))
 }
 
 script$1.render = render$1;
 
 var script = {
     name: 'OrganizationChart',
+    extends: BaseComponent__default["default"],
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {
@@ -286,12 +303,10 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-organizationchart p-component" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrganizationChartNode = vue.resolveComponent("OrganizationChartNode");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-organizationchart p-component" }, _ctx.ptm('root')), [
     vue.createVNode(_component_OrganizationChartNode, {
       node: $props.value,
       templates: _ctx.$slots,
@@ -300,9 +315,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       collapsible: $props.collapsible,
       onNodeClick: $options.onNodeClick,
       selectionMode: $props.selectionMode,
-      selectionKeys: $props.selectionKeys
-    }, null, 8, ["node", "templates", "onNodeToggle", "collapsedKeys", "collapsible", "onNodeClick", "selectionMode", "selectionKeys"])
-  ]))
+      selectionKeys: $props.selectionKeys,
+      pt: _ctx.pt
+    }, null, 8, ["node", "templates", "onNodeToggle", "collapsedKeys", "collapsible", "onNodeClick", "selectionMode", "selectionKeys", "pt"])
+  ], 16))
 }
 
 function styleInject(css, ref) {