primevue 3.28.0 → 3.29.0

package/organizationchart/organizationchart.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/chevrondown"),n=require("primevue/icons/chevronup"),o=require("primevue/utils"),t=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),i=l(n),s={name:"OrganizationChartNode",emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{onNodeClick(e){o.DomHandler.hasClass(e.target,"p-node-toggler")||o.DomHandler.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:a.default,ChevronUpIcon:i.default}};const d={class:"p-organizationchart-table"},c={key:0},r=["colspan"],p=["colspan"],h=[t.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)],g=["colspan"],m=[t.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)];s.render=function(e,n,o,l,a,i){const s=t.resolveComponent("OrganizationChartNode",!0);return t.openBlock(),t.createElementBlock("table",d,[t.createElementVNode("tbody",null,[o.node?(t.openBlock(),t.createElementBlock("tr",c,[t.createElementVNode("td",{colspan:i.colspan},[t.createElementVNode("div",{class:t.normalizeClass(i.nodeContentClass),onClick:n[2]||(n[2]=(...e)=>i.onNodeClick&&i.onNodeClick(...e))},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),i.toggleable?(t.openBlock(),t.createElementBlock("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:n[0]||(n[0]=(...e)=>i.toggleNode&&i.toggleNode(...e)),onKeydown:n[1]||(n[1]=(...e)=>i.onKeydown&&i.onKeydown(...e))},[o.templates.togglericon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:i.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.expanded?"ChevronDownIcon":"ChevronUpIcon"),{key:1,class:"p-node-toggler-icon"}))],32)):t.createCommentVNode("",!0)],2)],8,r)])):t.createCommentVNode("",!0),t.createElementVNode("tr",{style:t.normalizeStyle(i.childStyle),class:"p-organizationchart-lines"},[t.createElementVNode("td",{colspan:i.colspan},h,8,p)],4),t.createElementVNode("tr",{style:t.normalizeStyle(i.childStyle),class:"p-organizationchart-lines"},[o.node.children&&1===o.node.children.length?(t.openBlock(),t.createElementBlock("td",{key:0,colspan:i.colspan},m,8,g)):t.createCommentVNode("",!0),o.node.children&&o.node.children.length>1?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(o.node.children,((e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:e.key},[t.createElementVNode("td",{class:t.normalizeClass(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}])}," ",2),t.createElementVNode("td",{class:t.normalizeClass(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===o.node.children.length-1)}])}," ",2)],64)))),128)):t.createCommentVNode("",!0)],4),t.createElementVNode("tr",{style:t.normalizeStyle(i.childStyle),class:"p-organizationchart-nodes"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.node.children,(e=>(t.openBlock(),t.createElementBlock("td",{key:e.key,colspan:"2"},[t.createVNode(s,{node:e,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:i.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:i.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var u={name:"OrganizationChart",emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const n=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[n]?(delete o[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const n=e.key;this.d_collapsedKeys[n]?(delete this.d_collapsedKeys[n],this.$emit("node-expand",e)):(this.d_collapsedKeys[n]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:s}};const y={class:"p-organizationchart p-component"};!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),u.render=function(e,n,o,l,a,i){const s=t.resolveComponent("OrganizationChartNode");return t.openBlock(),t.createElementBlock("div",y,[t.createVNode(s,{node:o.value,templates:e.$slots,onNodeToggle:i.onNodeToggle,collapsedKeys:a.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:i.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])},module.exports=u;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/chevrondown"),o=require("primevue/icons/chevronup"),n=require("primevue/utils"),l=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=s(e),a=s(t),d=s(o),c={name:"OrganizationChartNode",extends:i.default,emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{getPTOptions(e){return this.ptm(e,{context:{expanded:this.expanded,selectable:this.selectable,selected:this.selected,toggleable:this.toggleable,active:this.selected}})},getNodeOptions(e,t){return this.ptm(t,{context:{lineTop:e}})},onNodeClick(e){n.DomHandler.hasClass(e.target,"p-node-toggler")||n.DomHandler.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:a.default,ChevronUpIcon:d.default}};const r=["colspan"],p=["colspan"],g=["colspan"];c.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode",!0);return l.openBlock(),l.createElementBlock("table",l.mergeProps({class:"p-organizationchart-table"},e.ptm("table")),[l.createElementVNode("tbody",l.normalizeProps(l.guardReactiveProps(e.ptm("body"))),[o.node?(l.openBlock(),l.createElementBlock("tr",l.normalizeProps(l.mergeProps({key:0},e.ptm("row"))),[l.createElementVNode("td",l.mergeProps({colspan:i.colspan},e.ptm("cell")),[l.createElementVNode("div",l.mergeProps({class:i.nodeContentClass,onClick:t[2]||(t[2]=(...e)=>i.onNodeClick&&i.onNodeClick(...e))},i.getPTOptions("node")),[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),i.toggleable?(l.openBlock(),l.createElementBlock("a",l.mergeProps({key:0,tabindex:"0",class:"p-node-toggler",onClick:t[0]||(t[0]=(...e)=>i.toggleNode&&i.toggleNode(...e)),onKeydown:t[1]||(t[1]=(...e)=>i.onKeydown&&i.onKeydown(...e))},i.getPTOptions("nodeToggler")),[o.templates.togglericon?(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:i.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(l.openBlock(),l.createBlock(l.resolveDynamicComponent(i.expanded?"ChevronDownIcon":"ChevronUpIcon"),l.mergeProps({key:1,class:"p-node-toggler-icon"},i.getPTOptions("nodeTogglerIcon")),null,16))],16)):l.createCommentVNode("",!0)],16)],16,r)],16)):l.createCommentVNode("",!0),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[l.createElementVNode("td",{colspan:i.colspan},[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],8,p)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[o.node.children&&1===o.node.children.length?(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:0,colspan:i.colspan},e.ptm("lineCell")),[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],16,g)):l.createCommentVNode("",!0),o.node.children&&o.node.children.length>1?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:1},l.renderList(o.node.children,((e,t)=>(l.openBlock(),l.createElementBlock(l.Fragment,{key:e.key},[l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===t)}]},i.getNodeOptions(!(0===t),"lineLeft"))," ",16),l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(t===o.node.children.length-1)}]},i.getNodeOptions(!(t===o.node.children.length-1),"lineRight"))," ",16)],64)))),128)):l.createCommentVNode("",!0)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-nodes"},e.ptm("nodes")),[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(o.node.children,(t=>(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:t.key,colspan:"2"},e.ptm("nodeCell")),[l.createVNode(a,{node:t,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:i.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:i.onChildNodeClick,pt:e.pt},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick","pt"])],16)))),128))],16)],16)],16)};var h={name:"OrganizationChart",extends:i.default,emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const t=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[t]?(delete o[t],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[t]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const t=e.key;this.d_collapsedKeys[t]?(delete this.d_collapsedKeys[t],this.$emit("node-expand",e)):(this.d_collapsedKeys[t]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:c}};!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),h.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode");return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:"p-organizationchart p-component"},e.ptm("root")),[l.createVNode(a,{node:o.value,templates:e.$slots,onNodeToggle:i.onNodeToggle,collapsedKeys:s.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:i.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,pt:e.pt},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys","pt"])],16)},module.exports=h;

package/organizationchart/organizationchart.esm.js

@@ -1,10 +1,12 @@
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler } from 'primevue/utils';
-import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, Fragment, renderList, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeProps, guardReactiveProps, createBlock, resolveDynamicComponent, createCommentVNode, Fragment, renderList, createVNode } from 'vue';
 
 var script$1 = {
     name: 'OrganizationChartNode',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle'],
     props: {
         node: {
@@ -33,6 +35,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 (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
                 return;
@@ -92,97 +112,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__*/createElementVNode("div", { class: "p-organizationchart-line-down" }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = /*#__PURE__*/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 = resolveComponent("OrganizationChartNode", true);
 
-  return (openBlock(), createElementBlock("table", _hoisted_1$1, [
-    createElementVNode("tbody", null, [
+  return (openBlock(), createElementBlock("table", mergeProps({ class: "p-organizationchart-table" }, _ctx.ptm('table')), [
+    createElementVNode("tbody", normalizeProps(guardReactiveProps(_ctx.ptm('body'))), [
       ($props.node)
-        ? (openBlock(), createElementBlock("tr", _hoisted_2, [
-            createElementVNode("td", { colspan: $options.colspan }, [
-              createElementVNode("div", {
-                class: normalizeClass($options.nodeContentClass),
+        ? (openBlock(), createElementBlock("tr", normalizeProps(mergeProps({ key: 0 }, _ctx.ptm('row'))), [
+            createElementVNode("td", mergeProps({ colspan: $options.colspan }, _ctx.ptm('cell')), [
+              createElementVNode("div", mergeProps({
+                class: $options.nodeContentClass,
                 onClick: _cache[2] || (_cache[2] = (...args) => ($options.onNodeClick && $options.onNodeClick(...args)))
-              }, [
+              }, $options.getPTOptions('node')), [
                 (openBlock(), createBlock(resolveDynamicComponent($props.templates[$props.node.type] || $props.templates['default']), { node: $props.node }, null, 8, ["node"])),
                 ($options.toggleable)
-                  ? (openBlock(), createElementBlock("a", {
+                  ? (openBlock(), createElementBlock("a", 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)
                         ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.togglericon), {
                             key: 0,
                             expanded: $options.expanded,
                             class: "p-node-toggler-icon"
                           }, null, 8, ["expanded"]))
-                        : (openBlock(), createBlock(resolveDynamicComponent($options.expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'), {
+                        : (openBlock(), createBlock(resolveDynamicComponent($options.expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'), mergeProps({
                             key: 1,
                             class: "p-node-toggler-icon"
-                          }))
-                    ], 32))
+                          }, $options.getPTOptions('nodeTogglerIcon')), null, 16))
+                    ], 16))
                   : createCommentVNode("", true)
-              ], 2)
-            ], 8, _hoisted_3)
-          ]))
+              ], 16)
+            ], 16, _hoisted_1)
+          ], 16))
         : createCommentVNode("", true),
-      createElementVNode("tr", {
-        style: normalizeStyle($options.childStyle),
+      createElementVNode("tr", mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-lines"
-      }, [
-        createElementVNode("td", { colspan: $options.colspan }, _hoisted_6, 8, _hoisted_4)
-      ], 4),
-      createElementVNode("tr", {
-        style: normalizeStyle($options.childStyle),
+      }, _ctx.ptm('lines')), [
+        createElementVNode("td", { colspan: $options.colspan }, [
+          createElementVNode("div", mergeProps({ class: "p-organizationchart-line-down" }, _ctx.ptm('lineDown')), null, 16)
+        ], 8, _hoisted_2)
+      ], 16),
+      createElementVNode("tr", mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-lines"
-      }, [
+      }, _ctx.ptm('lines')), [
         ($props.node.children && $props.node.children.length === 1)
-          ? (openBlock(), createElementBlock("td", {
+          ? (openBlock(), createElementBlock("td", mergeProps({
               key: 0,
               colspan: $options.colspan
-            }, _hoisted_9, 8, _hoisted_7))
+            }, _ctx.ptm('lineCell')), [
+              createElementVNode("div", mergeProps({ class: "p-organizationchart-line-down" }, _ctx.ptm('lineDown')), null, 16)
+            ], 16, _hoisted_3))
           : createCommentVNode("", true),
         ($props.node.children && $props.node.children.length > 1)
           ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($props.node.children, (child, i) => {
               return (openBlock(), createElementBlock(Fragment, {
                 key: child.key
               }, [
-                createElementVNode("td", {
-                  class: normalizeClass(["p-organizationchart-line-left", { 'p-organizationchart-line-top': !(i === 0) }])
-                }, " ", 2),
-                createElementVNode("td", {
-                  class: normalizeClass(["p-organizationchart-line-right", { 'p-organizationchart-line-top': !(i === $props.node.children.length - 1) }])
-                }, " ", 2)
+                createElementVNode("td", mergeProps({
+                  class: ["p-organizationchart-line-left", { 'p-organizationchart-line-top': !(i === 0) }]
+                }, $options.getNodeOptions(!(i === 0), 'lineLeft')), " ", 16),
+                createElementVNode("td", 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))
           : createCommentVNode("", true)
-      ], 4),
-      createElementVNode("tr", {
-        style: normalizeStyle($options.childStyle),
+      ], 16),
+      createElementVNode("tr", mergeProps({
+        style: $options.childStyle,
         class: "p-organizationchart-nodes"
-      }, [
+      }, _ctx.ptm('nodes')), [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.node.children, (child) => {
-          return (openBlock(), createElementBlock("td", {
+          return (openBlock(), createElementBlock("td", mergeProps({
             key: child.key,
             colspan: "2"
-          }, [
+          }, _ctx.ptm('nodeCell')), [
             createVNode(_component_OrganizationChartNode, {
               node: child,
               templates: $props.templates,
@@ -191,19 +205,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,
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {
@@ -279,12 +295,10 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-organizationchart p-component" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrganizationChartNode = resolveComponent("OrganizationChartNode");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
+  return (openBlock(), createElementBlock("div", mergeProps({ class: "p-organizationchart p-component" }, _ctx.ptm('root')), [
     createVNode(_component_OrganizationChartNode, {
       node: $props.value,
       templates: _ctx.$slots,
@@ -293,9 +307,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) {

package/organizationchart/organizationchart.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/chevrondown";import n from"primevue/icons/chevronup";import{DomHandler as o}from"primevue/utils";import{resolveComponent as t,openBlock as l,createElementBlock as i,createElementVNode as s,normalizeClass as d,createBlock as a,resolveDynamicComponent as c,createCommentVNode as r,normalizeStyle as p,Fragment as h,renderList as g,createVNode as y}from"vue";var u={name:"OrganizationChartNode",emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{onNodeClick(e){o.hasClass(e.target,"p-node-toggler")||o.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:e,ChevronUpIcon:n}};const m={class:"p-organizationchart-table"},K={key:0},C=["colspan"],f=["colspan"],b=[s("div",{class:"p-organizationchart-line-down"},null,-1)],k=["colspan"],N=[s("div",{class:"p-organizationchart-line-down"},null,-1)];u.render=function(e,n,o,u,z,v){const x=t("OrganizationChartNode",!0);return l(),i("table",m,[s("tbody",null,[o.node?(l(),i("tr",K,[s("td",{colspan:v.colspan},[s("div",{class:d(v.nodeContentClass),onClick:n[2]||(n[2]=(...e)=>v.onNodeClick&&v.onNodeClick(...e))},[(l(),a(c(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),v.toggleable?(l(),i("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:n[0]||(n[0]=(...e)=>v.toggleNode&&v.toggleNode(...e)),onKeydown:n[1]||(n[1]=(...e)=>v.onKeydown&&v.onKeydown(...e))},[o.templates.togglericon?(l(),a(c(o.templates.togglericon),{key:0,expanded:v.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(l(),a(c(v.expanded?"ChevronDownIcon":"ChevronUpIcon"),{key:1,class:"p-node-toggler-icon"}))],32)):r("",!0)],2)],8,C)])):r("",!0),s("tr",{style:p(v.childStyle),class:"p-organizationchart-lines"},[s("td",{colspan:v.colspan},b,8,f)],4),s("tr",{style:p(v.childStyle),class:"p-organizationchart-lines"},[o.node.children&&1===o.node.children.length?(l(),i("td",{key:0,colspan:v.colspan},N,8,k)):r("",!0),o.node.children&&o.node.children.length>1?(l(!0),i(h,{key:1},g(o.node.children,((e,n)=>(l(),i(h,{key:e.key},[s("td",{class:d(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}])}," ",2),s("td",{class:d(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===o.node.children.length-1)}])}," ",2)],64)))),128)):r("",!0)],4),s("tr",{style:p(v.childStyle),class:"p-organizationchart-nodes"},[(l(!0),i(h,null,g(o.node.children,(e=>(l(),i("td",{key:e.key,colspan:"2"},[y(x,{node:e,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:v.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:v.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var z={name:"OrganizationChart",emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const n=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[n]?(delete o[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const n=e.key;this.d_collapsedKeys[n]?(delete this.d_collapsedKeys[n],this.$emit("node-expand",e)):(this.d_collapsedKeys[n]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:u}};const v={class:"p-organizationchart p-component"};!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),z.render=function(e,n,o,s,d,a){const c=t("OrganizationChartNode");return l(),i("div",v,[y(c,{node:o.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:d.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:a.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])};export{z as default};
+import e from"primevue/basecomponent";import t from"primevue/icons/chevrondown";import n from"primevue/icons/chevronup";import{DomHandler as o}from"primevue/utils";import{resolveComponent as l,openBlock as i,createElementBlock as s,mergeProps as d,createElementVNode as a,normalizeProps as c,guardReactiveProps as r,createBlock as p,resolveDynamicComponent as h,createCommentVNode as g,Fragment as u,renderList as y,createVNode as m}from"vue";var b={name:"OrganizationChartNode",extends:e,emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{getPTOptions(e){return this.ptm(e,{context:{expanded:this.expanded,selectable:this.selectable,selected:this.selected,toggleable:this.toggleable,active:this.selected}})},getNodeOptions(e,t){return this.ptm(t,{context:{lineTop:e}})},onNodeClick(e){o.hasClass(e.target,"p-node-toggler")||o.hasClass(e.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:t,ChevronUpIcon:n}};const C=["colspan"],K=["colspan"],f=["colspan"];b.render=function(e,t,n,o,b,N){const k=l("OrganizationChartNode",!0);return i(),s("table",d({class:"p-organizationchart-table"},e.ptm("table")),[a("tbody",c(r(e.ptm("body"))),[n.node?(i(),s("tr",c(d({key:0},e.ptm("row"))),[a("td",d({colspan:N.colspan},e.ptm("cell")),[a("div",d({class:N.nodeContentClass,onClick:t[2]||(t[2]=(...e)=>N.onNodeClick&&N.onNodeClick(...e))},N.getPTOptions("node")),[(i(),p(h(n.templates[n.node.type]||n.templates.default),{node:n.node},null,8,["node"])),N.toggleable?(i(),s("a",d({key:0,tabindex:"0",class:"p-node-toggler",onClick:t[0]||(t[0]=(...e)=>N.toggleNode&&N.toggleNode(...e)),onKeydown:t[1]||(t[1]=(...e)=>N.onKeydown&&N.onKeydown(...e))},N.getPTOptions("nodeToggler")),[n.templates.togglericon?(i(),p(h(n.templates.togglericon),{key:0,expanded:N.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(i(),p(h(N.expanded?"ChevronDownIcon":"ChevronUpIcon"),d({key:1,class:"p-node-toggler-icon"},N.getPTOptions("nodeTogglerIcon")),null,16))],16)):g("",!0)],16)],16,C)],16)):g("",!0),a("tr",d({style:N.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[a("td",{colspan:N.colspan},[a("div",d({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],8,K)],16),a("tr",d({style:N.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[n.node.children&&1===n.node.children.length?(i(),s("td",d({key:0,colspan:N.colspan},e.ptm("lineCell")),[a("div",d({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],16,f)):g("",!0),n.node.children&&n.node.children.length>1?(i(!0),s(u,{key:1},y(n.node.children,((e,t)=>(i(),s(u,{key:e.key},[a("td",d({class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===t)}]},N.getNodeOptions(!(0===t),"lineLeft"))," ",16),a("td",d({class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(t===n.node.children.length-1)}]},N.getNodeOptions(!(t===n.node.children.length-1),"lineRight"))," ",16)],64)))),128)):g("",!0)],16),a("tr",d({style:N.childStyle,class:"p-organizationchart-nodes"},e.ptm("nodes")),[(i(!0),s(u,null,y(n.node.children,(t=>(i(),s("td",d({key:t.key,colspan:"2"},e.ptm("nodeCell")),[m(k,{node:t,templates:n.templates,collapsedKeys:n.collapsedKeys,onNodeToggle:N.onChildNodeToggle,collapsible:n.collapsible,selectionMode:n.selectionMode,selectionKeys:n.selectionKeys,onNodeClick:N.onChildNodeClick,pt:e.pt},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick","pt"])],16)))),128))],16)],16)],16)};var N={name:"OrganizationChart",extends:e,emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const t=e.key;if(this.selectionMode){let n=this.selectionKeys?{...this.selectionKeys}:{};n[t]?(delete n[t],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(n={}),n[t]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",n)}},onNodeToggle(e){const t=e.key;this.d_collapsedKeys[t]?(delete this.d_collapsedKeys[t],this.$emit("node-expand",e)):(this.d_collapsedKeys[t]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:b}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),N.render=function(e,t,n,o,a,c){const r=l("OrganizationChartNode");return i(),s("div",d({class:"p-organizationchart p-component"},e.ptm("root")),[m(r,{node:n.value,templates:e.$slots,onNodeToggle:c.onNodeToggle,collapsedKeys:a.d_collapsedKeys,collapsible:n.collapsible,onNodeClick:c.onNodeClick,selectionMode:n.selectionMode,selectionKeys:n.selectionKeys,pt:e.pt},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys","pt"])],16)};export{N as default};

package/organizationchart/organizationchart.js

@@ -1,14 +1,16 @@
 this.primevue = this.primevue || {};
-this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, utils, vue) {
+this.primevue.organizationchart = (function (BaseComponent, ChevronDownIcon, ChevronUpIcon, utils, vue) {
     'use strict';
 
     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: {
@@ -37,6 +39,24 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
             }
         },
         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;
@@ -96,97 +116,91 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
         }
     };
 
-    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,
@@ -195,19 +209,21 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
                   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: {
@@ -283,12 +299,10 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
         }
     };
 
-    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,
@@ -297,9 +311,10 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
           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) {
@@ -336,4 +351,4 @@ this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, uti
 
     return script;
 
-})(primevue.icons.chevrondown, primevue.icons.chevronup, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.chevrondown, primevue.icons.chevronup, primevue.utils, Vue);