primevue 3.29.2 → 3.30.1

package/organizationchart/organizationchart.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,t,o,n,l){"use strict";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"],h=["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,h)):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 g={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}};return 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"),g.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)},g}(primevue.basecomponent,primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,n,t,o,l,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,a=r(e),s=r(t),d=r(o);function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function u(e,n,t){return(n=g(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function g(e){var n=m(e,"string");return"symbol"===p(n)?n:String(n)}function m(e,n){if("object"!==p(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==p(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var h=(u(c={root:"p-organizationchart p-component",table:"p-organizationchart-table",node:function(e){var n=e.instance;return["p-organizationchart-node-content",{"p-organizationchart-selectable-node":n.selectable,"p-highlight":n.selected}]},nodeToggler:"p-node-toggler",nodeTogglerIcon:"p-node-toggler-icon",lines:"p-organizationchart-lines",lineDown:"p-organizationchart-line-down"},"lines","p-organizationchart-lines"),u(c,"lineLeft",(function(e){return["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===e.index)}]})),u(c,"lineRight",(function(e){return["p-organizationchart-line-right",{"p-organizationchart-line-top":!(e.index===e.props.node.children.length-1)}]})),u(c,"nodes","p-organizationchart-nodes"),c),y=n.useStyle("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 0.75rem;\n}\n\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\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\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.25rem;\n}\n\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n",{name:"organizationchart",manual:!0}),f={name:"BaseOrganizationChart",extends:a.default,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}},css:{classes:h,loadStyle:y.load},provide:function(){return{$parentInstance:this}}},b={name:"OrganizationChartNode",hostName:"OrganizationChart",extends:a.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:function(e){return this.ptm(e,{context:{expanded:this.expanded,selectable:this.selectable,selected:this.selected,toggleable:this.toggleable,active:this.selected}})},getNodeOptions:function(e,n){return this.ptm(n,{context:{lineTop:e}})},onNodeClick:function(e){l.DomHandler.getAttribute(e.target,"nodeToggler")||l.DomHandler.getAttribute(e.target,"nodeTogglerIcon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick:function(e){this.$emit("node-click",e)},toggleNode:function(){this.$emit("node-toggle",this.node)},onChildNodeToggle:function(e){this.$emit("node-toggle",e)},onKeydown:function(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},computed:{leaf:function(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan:function(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle:function(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded:function(){return void 0===this.collapsedKeys[this.node.key]},selectable:function(){return this.selectionMode&&!1!==this.node.selectable},selected:function(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable:function(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}},components:{ChevronDownIcon:s.default,ChevronUpIcon:d.default}},v=["colspan"],k=["colspan"],N=["colspan"];function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function K(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function x(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?K(Object(t),!0).forEach((function(n){P(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):K(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function P(e,n,t){return(n=z(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function z(e){var n=O(e,"string");return"symbol"===C(n)?n:String(n)}function O(e,n){if("object"!==C(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==C(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}b.render=function(e,n,t,o,l,r){var c=i.resolveComponent("OrganizationChartNode",!0);return i.openBlock(),i.createElementBlock("table",i.mergeProps({class:e.cx("table")},e.ptm("table")),[i.createElementVNode("tbody",i.normalizeProps(i.guardReactiveProps(e.ptm("body"))),[t.node?(i.openBlock(),i.createElementBlock("tr",i.normalizeProps(i.mergeProps({key:0},e.ptm("row"))),[i.createElementVNode("td",i.mergeProps({colspan:r.colspan},e.ptm("cell")),[i.createElementVNode("div",i.mergeProps({class:[e.cx("node"),t.node.styleClass],onClick:n[2]||(n[2]=function(){return r.onNodeClick&&r.onNodeClick.apply(r,arguments)})},r.getPTOptions("node")),[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(t.templates[t.node.type]||t.templates.default),{node:t.node},null,8,["node"])),r.toggleable?(i.openBlock(),i.createElementBlock("a",i.mergeProps({key:0,tabindex:"0",class:e.cx("nodeToggler"),onClick:n[0]||(n[0]=function(){return r.toggleNode&&r.toggleNode.apply(r,arguments)}),onKeydown:n[1]||(n[1]=function(){return r.onKeydown&&r.onKeydown.apply(r,arguments)})},r.getPTOptions("nodeToggler")),[t.templates.togglericon?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(t.templates.togglericon),{key:0,expanded:r.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(i.openBlock(),i.createBlock(i.resolveDynamicComponent(r.expanded?"ChevronDownIcon":"ChevronUpIcon"),i.mergeProps({key:1,class:e.cx("nodeTogglerIcon")},r.getPTOptions("nodeTogglerIcon")),null,16,["class"]))],16)):i.createCommentVNode("",!0)],16)],16,v)],16)):i.createCommentVNode("",!0),i.createElementVNode("tr",i.mergeProps({style:r.childStyle,class:e.cx("lines")},e.ptm("lines")),[i.createElementVNode("td",i.mergeProps({colspan:r.colspan},e.ptm("lineCell")),[i.createElementVNode("div",i.mergeProps({class:e.cx("lineDown")},e.ptm("lineDown")),null,16)],16,k)],16),i.createElementVNode("tr",i.mergeProps({style:r.childStyle,class:e.cx("lines")},e.ptm("lines")),[t.node.children&&1===t.node.children.length?(i.openBlock(),i.createElementBlock("td",i.mergeProps({key:0,colspan:r.colspan},e.ptm("lineCell")),[i.createElementVNode("div",i.mergeProps({class:e.cx("lineDown")},e.ptm("lineDown")),null,16)],16,N)):i.createCommentVNode("",!0),t.node.children&&t.node.children.length>1?(i.openBlock(!0),i.createElementBlock(i.Fragment,{key:1},i.renderList(t.node.children,(function(n,o){return i.openBlock(),i.createElementBlock(i.Fragment,{key:n.key},[i.createElementVNode("td",i.mergeProps({class:e.cx("lineLeft",{index:o})},r.getNodeOptions(!(0===o),"lineLeft"))," ",16),i.createElementVNode("td",i.mergeProps({class:e.cx("lineRight",{index:o})},r.getNodeOptions(!(o===t.node.children.length-1),"lineRight"))," ",16)],64)})),128)):i.createCommentVNode("",!0)],16),i.createElementVNode("tr",i.mergeProps({style:r.childStyle,class:e.cx("nodes")},e.ptm("nodes")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(t.node.children,(function(n){return i.openBlock(),i.createElementBlock("td",i.mergeProps({key:n.key,colspan:"2"},e.ptm("nodeCell")),[i.createVNode(c,{node:n,templates:t.templates,collapsedKeys:t.collapsedKeys,onNodeToggle:r.onChildNodeToggle,collapsible:t.collapsible,selectionMode:t.selectionMode,selectionKeys:t.selectionKeys,onNodeClick:r.onChildNodeClick,pt:e.pt,unstyled:e.unstyled},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick","pt","unstyled"])],16)})),128))],16)],16)],16)};var w={name:"OrganizationChart",extends:f,emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],data:function(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys:function(e){this.d_collapsedKeys=e}},methods:{onNodeClick:function(e){var n=e.key;if(this.selectionMode){var t=this.selectionKeys?x({},this.selectionKeys):{};t[n]?(delete t[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(t={}),t[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",t)}},onNodeToggle:function(e){var 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=x({},this.d_collapsedKeys),this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:b}};return w.render=function(e,n,t,o,l,r){var c=i.resolveComponent("OrganizationChartNode");return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root")),[i.createVNode(c,{node:e.value,templates:e.$slots,onNodeToggle:r.onNodeToggle,collapsedKeys:l.d_collapsedKeys,collapsible:e.collapsible,onNodeClick:r.onNodeClick,selectionMode:e.selectionMode,selectionKeys:e.selectionKeys,pt:e.pt,unstyled:e.unstyled},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys","pt","unstyled"])],16)},w}(primevue.basecomponent,primevue.usestyle,primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);

package/overlaypanel/BaseOverlayPanel.vue

@@ -0,0 +1,135 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-overlaypanel {
+    margin-top: 10px;
+}
+
+.p-overlaypanel-flipped {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.p-overlaypanel-close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Animation */
+.p-overlaypanel-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-overlaypanel-leave-to {
+    opacity: 0;
+}
+
+.p-overlaypanel-enter-active {
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-overlaypanel-leave-active {
+    transition: opacity 0.1s linear;
+}
+
+.p-overlaypanel:after,
+.p-overlaypanel:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.p-overlaypanel:after {
+    border-width: 8px;
+    margin-left: -8px;
+}
+
+.p-overlaypanel:before {
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+.p-overlaypanel-flipped:after,
+.p-overlaypanel-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:after {
+    border-bottom-color: transparent;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:before {
+    border-bottom-color: transparent;
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-overlaypanel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-overlaypanel-content',
+    closeButton: 'p-overlaypanel-close p-link',
+    closeIcon: 'p-overlaypanel-close-icon'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'overlaypanel', manual: true });
+
+export default {
+    name: 'BaseOverlayPanel',
+    extends: BaseComponent,
+    props: {
+        dismissable: {
+            type: Boolean,
+            default: true
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: false
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        breakpoints: {
+            type: Object,
+            default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/overlaypanel/OverlayPanel.d.ts

@@ -8,14 +8,16 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes) | null | undefined;
+export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
 export interface OverlayPanelPassThroughMethodOptions {
+    instance: any;
     props: OverlayPanelProps;
     state: OverlayPanelState;
 }
@@ -41,6 +43,11 @@ export interface OverlayPanelPassThroughOptions {
      * Uses to pass attributes to the close icon's DOM element.
      */
     closeIcon?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -126,6 +133,11 @@ export interface OverlayPanelProps {
      * @type {OverlayPanelPassThroughOptions}
      */
     pt?: OverlayPanelPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/overlaypanel/OverlayPanel.vue

@@ -1,13 +1,13 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
-                <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
+                <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
-                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
+                <button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
                     </slot>
                 </button>
             </div>
@@ -16,49 +16,19 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseOverlayPanel from './BaseOverlayPanel.vue';
 
 export default {
     name: 'OverlayPanel',
-    extends: BaseComponent,
+    extends: BaseOverlayPanel,
     inheritAttrs: false,
     emits: ['show', 'hide'],
-    props: {
-        dismissable: {
-            type: Boolean,
-            default: true
-        },
-        showCloseIcon: {
-            type: Boolean,
-            default: false
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        breakpoints: {
-            type: Object,
-            default: null
-        },
-        closeIcon: {
-            type: String,
-            default: undefined
-        }
-    },
     data() {
         return {
             visible: false
@@ -134,6 +104,7 @@ export default {
         },
         onEnter(el) {
             this.container.setAttribute(this.attributeSelector, '');
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             this.alignOverlay();
 
             if (this.dismissable) {
@@ -184,7 +155,8 @@ export default {
             this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
-                DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
+                this.container.setAttribute('data-p-overlaypanel-flipped', 'true');
+                !this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
             }
         },
         onContentKeydown(event) {
@@ -269,7 +241,7 @@ export default {
             this.container = el;
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);
@@ -303,15 +275,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-overlaypanel p-component',
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         attributeSelector() {
             return UniqueComponentId();
         },
@@ -329,78 +292,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-overlaypanel {
-    position: absolute;
-    margin-top: 10px;
-    top: 0;
-    left: 0;
-}
-
-.p-overlaypanel-flipped {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-.p-overlaypanel-close {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Animation */
-.p-overlaypanel-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-overlaypanel-leave-to {
-    opacity: 0;
-}
-
-.p-overlaypanel-enter-active {
-    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-overlaypanel-leave-active {
-    transition: opacity 0.1s linear;
-}
-
-.p-overlaypanel:after,
-.p-overlaypanel:before {
-    bottom: 100%;
-    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-    content: ' ';
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-.p-overlaypanel:after {
-    border-width: 8px;
-    margin-left: -8px;
-}
-
-.p-overlaypanel:before {
-    border-width: 10px;
-    margin-left: -10px;
-}
-
-.p-overlaypanel-flipped:after,
-.p-overlaypanel-flipped:before {
-    bottom: auto;
-    top: 100%;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:after {
-    border-bottom-color: transparent;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:before {
-    border-bottom-color: transparent;
-}
-</style>