primevue 3.26.1 → 3.27.0

package/organizationchart/organizationchart.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";import{resolveComponent as n,openBlock as t,createElementBlock as o,createElementVNode as l,normalizeClass as i,createBlock as s,resolveDynamicComponent as d,createCommentVNode as a,normalizeStyle as c,Fragment as r,renderList as p,createVNode as h}from"vue";var g={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(n){e.hasClass(n.target,"p-node-toggler")||e.hasClass(n.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}}};const y={class:"p-organizationchart-table"},u={key:0},m=["colspan"],K=["colspan"],f=[l("div",{class:"p-organizationchart-line-down"},null,-1)],b=["colspan"],C=[l("div",{class:"p-organizationchart-line-down"},null,-1)];g.render=function(e,g,k,N,z,v){const x=n("OrganizationChartNode",!0);return t(),o("table",y,[l("tbody",null,[k.node?(t(),o("tr",u,[l("td",{colspan:v.colspan},[l("div",{class:i(v.nodeContentClass),onClick:g[2]||(g[2]=(...e)=>v.onNodeClick&&v.onNodeClick(...e))},[(t(),s(d(k.templates[k.node.type]||k.templates.default),{node:k.node},null,8,["node"])),v.toggleable?(t(),o("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:g[0]||(g[0]=(...e)=>v.toggleNode&&v.toggleNode(...e)),onKeydown:g[1]||(g[1]=(...e)=>v.onKeydown&&v.onKeydown(...e))},[l("i",{class:i(["p-node-toggler-icon pi",{"pi-chevron-down":v.expanded,"pi-chevron-up":!v.expanded}])},null,2)],32)):a("",!0)],2)],8,m)])):a("",!0),l("tr",{style:c(v.childStyle),class:"p-organizationchart-lines"},[l("td",{colspan:v.colspan},f,8,K)],4),l("tr",{style:c(v.childStyle),class:"p-organizationchart-lines"},[k.node.children&&1===k.node.children.length?(t(),o("td",{key:0,colspan:v.colspan},C,8,b)):a("",!0),k.node.children&&k.node.children.length>1?(t(!0),o(r,{key:1},p(k.node.children,((e,n)=>(t(),o(r,{key:e.key},[l("td",{class:i(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}])}," ",2),l("td",{class:i(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===k.node.children.length-1)}])}," ",2)],64)))),128)):a("",!0)],4),l("tr",{style:c(v.childStyle),class:"p-organizationchart-nodes"},[(t(!0),o(r,null,p(k.node.children,(e=>(t(),o("td",{key:e.key,colspan:"2"},[h(x,{node:e,templates:k.templates,collapsedKeys:k.collapsedKeys,onNodeToggle:v.onChildNodeToggle,collapsible:k.collapsible,selectionMode:k.selectionMode,selectionKeys:k.selectionKeys,onNodeClick:v.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var k={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 t=this.selectionKeys?{...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(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:g}};const N={class:"p-organizationchart p-component"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&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"),k.render=function(e,l,i,s,d,a){const c=n("OrganizationChartNode");return t(),o("div",N,[h(c,{node:i.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:d.d_collapsedKeys,collapsible:i.collapsible,onNodeClick:a.onNodeClick,selectionMode:i.selectionMode,selectionKeys:i.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])};export{k as default};
+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};

package/organizationchart/organizationchart.js

@@ -1,7 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.organizationchart = (function (utils, vue) {
+this.primevue.organizationchart = (function (ChevronDownIcon, ChevronUpIcon, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+    var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
+
     var script$1 = {
         name: 'OrganizationChartNode',
         emits: ['node-click', 'node-toggle'],
@@ -84,6 +89,10 @@ this.primevue.organizationchart = (function (utils, vue) {
             toggleable() {
                 return this.collapsible && this.node.collapsible !== false && !this.leaf;
             }
+        },
+        components: {
+            ChevronDownIcon: ChevronDownIcon__default["default"],
+            ChevronUpIcon: ChevronUpIcon__default["default"]
         }
     };
 
@@ -122,9 +131,16 @@ this.primevue.organizationchart = (function (utils, vue) {
                           onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleNode && $options.toggleNode(...args))),
                           onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
                         }, [
-                          vue.createElementVNode("i", {
-                            class: vue.normalizeClass(["p-node-toggler-icon pi", { 'pi-chevron-down': $options.expanded, 'pi-chevron-up': !$options.expanded }])
-                          }, null, 2)
+                          ($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'), {
+                                key: 1,
+                                class: "p-node-toggler-icon"
+                              }))
                         ], 32))
                       : vue.createCommentVNode("", true)
                   ], 2)
@@ -320,4 +336,4 @@ this.primevue.organizationchart = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.icons.chevrondown, primevue.icons.chevronup, primevue.utils, Vue);

package/organizationchart/organizationchart.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,n){"use strict";var t={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(n){e.DomHandler.hasClass(n.target,"p-node-toggler")||e.DomHandler.hasClass(n.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}}};const o={class:"p-organizationchart-table"},l={key:0},i=["colspan"],a=["colspan"],s=[n.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)],d=["colspan"],c=[n.createElementVNode("div",{class:"p-organizationchart-line-down"},null,-1)];t.render=function(e,t,r,p,h,g){const m=n.resolveComponent("OrganizationChartNode",!0);return n.openBlock(),n.createElementBlock("table",o,[n.createElementVNode("tbody",null,[r.node?(n.openBlock(),n.createElementBlock("tr",l,[n.createElementVNode("td",{colspan:g.colspan},[n.createElementVNode("div",{class:n.normalizeClass(g.nodeContentClass),onClick:t[2]||(t[2]=(...e)=>g.onNodeClick&&g.onNodeClick(...e))},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.templates[r.node.type]||r.templates.default),{node:r.node},null,8,["node"])),g.toggleable?(n.openBlock(),n.createElementBlock("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:t[0]||(t[0]=(...e)=>g.toggleNode&&g.toggleNode(...e)),onKeydown:t[1]||(t[1]=(...e)=>g.onKeydown&&g.onKeydown(...e))},[n.createElementVNode("i",{class:n.normalizeClass(["p-node-toggler-icon pi",{"pi-chevron-down":g.expanded,"pi-chevron-up":!g.expanded}])},null,2)],32)):n.createCommentVNode("",!0)],2)],8,i)])):n.createCommentVNode("",!0),n.createElementVNode("tr",{style:n.normalizeStyle(g.childStyle),class:"p-organizationchart-lines"},[n.createElementVNode("td",{colspan:g.colspan},s,8,a)],4),n.createElementVNode("tr",{style:n.normalizeStyle(g.childStyle),class:"p-organizationchart-lines"},[r.node.children&&1===r.node.children.length?(n.openBlock(),n.createElementBlock("td",{key:0,colspan:g.colspan},c,8,d)):n.createCommentVNode("",!0),r.node.children&&r.node.children.length>1?(n.openBlock(!0),n.createElementBlock(n.Fragment,{key:1},n.renderList(r.node.children,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:e.key},[n.createElementVNode("td",{class:n.normalizeClass(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===t)}])}," ",2),n.createElementVNode("td",{class:n.normalizeClass(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(t===r.node.children.length-1)}])}," ",2)],64)))),128)):n.createCommentVNode("",!0)],4),n.createElementVNode("tr",{style:n.normalizeStyle(g.childStyle),class:"p-organizationchart-nodes"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(r.node.children,(e=>(n.openBlock(),n.createElementBlock("td",{key:e.key,colspan:"2"},[n.createVNode(m,{node:e,templates:r.templates,collapsedKeys:r.collapsedKeys,onNodeToggle:g.onChildNodeToggle,collapsible:r.collapsible,selectionMode:r.selectionMode,selectionKeys:r.selectionKeys,onNodeClick:g.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var r={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 t=this.selectionKeys?{...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(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:t}};const p={class:"p-organizationchart p-component"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&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"),r.render=function(e,t,o,l,i,a){const s=n.resolveComponent("OrganizationChartNode");return n.openBlock(),n.createElementBlock("div",p,[n.createVNode(s,{node:o.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:i.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:a.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])},r}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,n,o,t){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e),a=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:i.default,ChevronUpIcon:a.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,i,a){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:a.colspan},[t.createElementVNode("div",{class:t.normalizeClass(a.nodeContentClass),onClick:n[2]||(n[2]=(...e)=>a.onNodeClick&&a.onNodeClick(...e))},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),a.toggleable?(t.openBlock(),t.createElementBlock("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:n[0]||(n[0]=(...e)=>a.toggleNode&&a.toggleNode(...e)),onKeydown:n[1]||(n[1]=(...e)=>a.onKeydown&&a.onKeydown(...e))},[o.templates.togglericon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:a.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.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(a.childStyle),class:"p-organizationchart-lines"},[t.createElementVNode("td",{colspan:a.colspan},h,8,p)],4),t.createElementVNode("tr",{style:t.normalizeStyle(a.childStyle),class:"p-organizationchart-lines"},[o.node.children&&1===o.node.children.length?(t.openBlock(),t.createElementBlock("td",{key:0,colspan:a.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(a.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:a.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:a.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"};return 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,i,a){const s=t.resolveComponent("OrganizationChartNode");return t.openBlock(),t.createElementBlock("div",y,[t.createVNode(s,{node:o.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:i.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:a.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])},u}(primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);

package/overlaypanel/OverlayPanel.d.ts

@@ -65,6 +65,11 @@ export interface OverlayPanelProps {
      * Object literal to define widths per screen size.
      */
     breakpoints?: OverlayPanelBreakpoints;
+    /**
+     * Icon to display in the overlaypanel close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
+     */
+    closeIcon?: string | undefined;
 }
 
 /**
@@ -75,6 +80,10 @@ export interface OverlayPanelSlots {
      * Custom content template.
      */
     default(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

package/overlaypanel/OverlayPanel.vue

@@ -6,7 +6,9 @@
                     <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">
-                    <span class="p-overlaypanel-close-icon pi pi-times"></span>
+                    <slot name="closeicon">
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]"></component>
+                    </slot>
                 </button>
             </div>
         </transition>
@@ -15,6 +17,7 @@
 
 <script>
 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';
@@ -48,6 +51,10 @@ export default {
         breakpoints: {
             type: Object,
             default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -315,7 +322,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 </script>

package/overlaypanel/overlaypanel.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var FocusTrap = require('primevue/focustrap');
+var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
@@ -10,6 +11,7 @@ var vue = require('vue');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -42,6 +44,10 @@ var script = {
         breakpoints: {
             type: Object,
             default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -306,16 +312,13 @@ var script = {
         ripple: Ripple__default["default"]
     },
     components: {
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        TimesIcon: TimesIcon__default["default"]
     }
 };
 
 const _hoisted_1 = ["aria-modal"];
 const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = vue.resolveComponent("Portal");
@@ -357,7 +360,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       autofocus: "",
                       onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
                       onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onButtonKeydown && $options.onButtonKeydown(...args)))
-                    }, _hoisted_4, 40, _hoisted_2)), [
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                          class: vue.normalizeClass(['p-overlaypanel-close-icon ', $props.closeIcon])
+                        }, null, 8, ["class"]))
+                      ])
+                    ], 40, _hoisted_2)), [
                       [_directive_ripple]
                     ])
                   : vue.createCommentVNode("", true)

package/overlaypanel/overlaypanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),t=require("primevue/overlayeventbus"),n=require("primevue/portal"),i=require("primevue/ripple"),l=require("primevue/utils"),r=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(e),a=s(t),c=s(n),d=s(i),p={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&l.ZIndexUtils.clear(this.container),this.overlayEventListener&&(a.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,l.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&l.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),a.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),a.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&l.ZIndexUtils.clear(e)},alignOverlay(){l.DomHandler.absolutePosition(this.container,this.target);const e=l.DomHandler.getOffset(this.container),t=l.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&l.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&l.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new l.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!l.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>l.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:o.default,ripple:d.default},components:{Portal:c.default}};const h=["aria-modal"],u=["aria-label"],v=[r.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),p.render=function(e,t,n,i,l,s){const o=r.resolveComponent("Portal"),a=r.resolveDirective("ripple"),c=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(o,{appendTo:n.appendTo},{default:r.withCtx((()=>[r.createVNode(r.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:r.withCtx((()=>[l.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:s.containerRef,role:"dialog",class:s.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))},e.$attrs),[r.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>s.onContentKeydown&&s.onContentKeydown(...e))},[r.renderSlot(e.$slots,"default")],32),n.showCloseIcon?r.withDirectives((r.openBlock(),r.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":s.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>s.onButtonKeydown&&s.onButtonKeydown(...e))},v,40,u)),[[a]]):r.createCommentVNode("",!0)],16,h)),[[c]]):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},module.exports=p;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/overlayeventbus"),i=require("primevue/portal"),l=require("primevue/ripple"),r=require("primevue/utils"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(e),c=s(t),d=s(n),p=s(i),h=s(l),u={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&r.ZIndexUtils.clear(this.container),this.overlayEventListener&&(d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,r.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&r.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),d.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&r.ZIndexUtils.clear(e)},alignOverlay(){r.DomHandler.absolutePosition(this.container,this.target);const e=r.DomHandler.getOffset(this.container),t=r.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&r.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&r.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!r.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){d.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>r.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:h.default},components:{Portal:p.default,TimesIcon:c.default}};const v=["aria-modal"],y=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),u.render=function(e,t,n,i,l,r){const s=o.resolveComponent("Portal"),a=o.resolveDirective("ripple"),c=o.resolveDirective("focustrap");return o.openBlock(),o.createBlock(s,{appendTo:n.appendTo},{default:o.withCtx((()=>[o.createVNode(o.Transition,{name:"p-overlaypanel",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:o.withCtx((()=>[l.visible?o.withDirectives((o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:r.containerRef,role:"dialog",class:r.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))},e.$attrs),[o.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>r.onContentClick&&r.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>r.onContentClick&&r.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>r.onContentKeydown&&r.onContentKeydown(...e))},[o.renderSlot(e.$slots,"default")],32),n.showCloseIcon?o.withDirectives((o.openBlock(),o.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":r.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>r.hide&&r.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>r.onButtonKeydown&&r.onButtonKeydown(...e))},[o.renderSlot(e.$slots,"closeicon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:o.normalizeClass(["p-overlaypanel-close-icon ",n.closeIcon])},null,8,["class"]))]))],40,y)),[[a]]):o.createCommentVNode("",!0)],16,v)),[[c]]):o.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},module.exports=u;

package/overlaypanel/overlaypanel.esm.js

@@ -1,9 +1,10 @@
 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 { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, resolveDynamicComponent, normalizeClass, createCommentVNode } from 'vue';
 
 var script = {
     name: 'OverlayPanel',
@@ -33,6 +34,10 @@ var script = {
         breakpoints: {
             type: Object,
             default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -297,16 +302,13 @@ var script = {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 
 const _hoisted_1 = ["aria-modal"];
 const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = /*#__PURE__*/createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
@@ -348,7 +350,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       autofocus: "",
                       onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
                       onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onButtonKeydown && $options.onButtonKeydown(...args)))
-                    }, _hoisted_4, 40, _hoisted_2)), [
+                    }, [
+                      renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                        (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                          class: normalizeClass(['p-overlaypanel-close-icon ', $props.closeIcon])
+                        }, null, 8, ["class"]))
+                      ])
+                    ], 40, _hoisted_2)), [
                       [_directive_ripple]
                     ])
                   : createCommentVNode("", true)

package/overlaypanel/overlaypanel.esm.min.js

@@ -1 +1 @@
-import e from"primevue/focustrap";import t from"primevue/overlayeventbus";import n from"primevue/portal";import i from"primevue/ripple";import{ZIndexUtils as l,DomHandler as s,ConnectedOverlayScrollHandler as r,UniqueComponentId as o}from"primevue/utils";import{resolveComponent as a,resolveDirective as c,openBlock as d,createBlock as p,withCtx as h,createVNode as u,Transition as v,withDirectives as y,createElementBlock as f,mergeProps as m,createElementVNode as b,renderSlot as L,createCommentVNode as C}from"vue";var k={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&l.clear(this.container),this.overlayEventListener&&(t.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,s.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&l.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),t.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),t.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&l.clear(e)},alignOverlay(){s.absolutePosition(this.container,this.target);const e=s.getOffset(this.container),t=s.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&s.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&s.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!s.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){t.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>o(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:i},components:{Portal:n}};const g=["aria-modal"],w=["aria-label"],E=[b("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),k.render=function(e,t,n,i,l,s){const r=a("Portal"),o=c("ripple"),k=c("focustrap");return d(),p(r,{appendTo:n.appendTo},{default:h((()=>[u(v,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:h((()=>[l.visible?y((d(),f("div",m({key:0,ref:s.containerRef,role:"dialog",class:s.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))},e.$attrs),[b("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>s.onContentKeydown&&s.onContentKeydown(...e))},[L(e.$slots,"default")],32),n.showCloseIcon?y((d(),f("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":s.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>s.onButtonKeydown&&s.onButtonKeydown(...e))},E,40,w)),[[o]]):C("",!0)],16,g)),[[k]]):C("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])};export{k as default};
+import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/overlayeventbus";import i from"primevue/portal";import s from"primevue/ripple";import{ZIndexUtils as l,DomHandler as o,ConnectedOverlayScrollHandler as r,UniqueComponentId as a}from"primevue/utils";import{resolveComponent as c,resolveDirective as d,openBlock as p,createBlock as h,withCtx as u,createVNode as v,Transition as y,withDirectives as f,createElementBlock as m,mergeProps as b,createElementVNode as L,renderSlot as C,resolveDynamicComponent as g,normalizeClass as k,createCommentVNode as w}from"vue";var E={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&l.clear(this.container),this.overlayEventListener&&(n.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,o.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&l.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),n.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),n.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&l.clear(e)},alignOverlay(){o.absolutePosition(this.container,this.target);const e=o.getOffset(this.container),t=o.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&o.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&o.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new r(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!o.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>a(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:s},components:{Portal:i,TimesIcon:t}};const x=["aria-modal"],T=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),E.render=function(e,t,n,i,s,l){const o=c("Portal"),r=d("ripple"),a=d("focustrap");return p(),h(o,{appendTo:n.appendTo},{default:u((()=>[v(y,{name:"p-overlaypanel",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:u((()=>[s.visible?f((p(),m("div",b({key:0,ref:l.containerRef,role:"dialog",class:l.containerClass,"aria-modal":s.visible,onClick:t[5]||(t[5]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))},e.$attrs),[L("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>l.onContentClick&&l.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>l.onContentKeydown&&l.onContentKeydown(...e))},[C(e.$slots,"default")],32),n.showCloseIcon?f((p(),m("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":l.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>l.hide&&l.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>l.onButtonKeydown&&l.onButtonKeydown(...e))},[C(e.$slots,"closeicon",{},(()=>[(p(),h(g(n.closeIcon?"span":"TimesIcon"),{class:k(["p-overlaypanel-close-icon ",n.closeIcon])},null,8,["class"]))]))],40,T)),[[r]]):w("",!0)],16,x)),[[a]]):w("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])};export{E as default};

package/overlaypanel/overlaypanel.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.overlaypanel = (function (FocusTrap, OverlayEventBus, Portal, Ripple, utils, vue) {
+this.primevue.overlaypanel = (function (FocusTrap, TimesIcon, OverlayEventBus, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -37,6 +38,10 @@ this.primevue.overlaypanel = (function (FocusTrap, OverlayEventBus, Portal, Ripp
             breakpoints: {
                 type: Object,
                 default: null
+            },
+            closeIcon: {
+                type: String,
+                default: undefined
             }
         },
         data() {
@@ -301,16 +306,13 @@ this.primevue.overlaypanel = (function (FocusTrap, OverlayEventBus, Portal, Ripp
             ripple: Ripple__default["default"]
         },
         components: {
-            Portal: Portal__default["default"]
+            Portal: Portal__default["default"],
+            TimesIcon: TimesIcon__default["default"]
         }
     };
 
     const _hoisted_1 = ["aria-modal"];
     const _hoisted_2 = ["aria-label"];
-    const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-overlaypanel-close-icon pi pi-times" }, null, -1);
-    const _hoisted_4 = [
-      _hoisted_3
-    ];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
@@ -352,7 +354,13 @@ this.primevue.overlaypanel = (function (FocusTrap, OverlayEventBus, Portal, Ripp
                           autofocus: "",
                           onClick: _cache[3] || (_cache[3] = (...args) => ($options.hide && $options.hide(...args))),
                           onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onButtonKeydown && $options.onButtonKeydown(...args)))
-                        }, _hoisted_4, 40, _hoisted_2)), [
+                        }, [
+                          vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                              class: vue.normalizeClass(['p-overlaypanel-close-icon ', $props.closeIcon])
+                            }, null, 8, ["class"]))
+                          ])
+                        ], 40, _hoisted_2)), [
                           [_directive_ripple]
                         ])
                       : vue.createCommentVNode("", true)
@@ -402,4 +410,4 @@ this.primevue.overlaypanel = (function (FocusTrap, OverlayEventBus, Portal, Ripp
 
     return script;
 
-})(primevue.focustrap, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, Vue);
+})(primevue.focustrap, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, Vue);

package/overlaypanel/overlaypanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l,r){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(e),a=s(t),c=s(n),d=s(i),p={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&l.ZIndexUtils.clear(this.container),this.overlayEventListener&&(a.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,l.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&l.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),a.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),a.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&l.ZIndexUtils.clear(e)},alignOverlay(){l.DomHandler.absolutePosition(this.container,this.target);const e=l.DomHandler.getOffset(this.container),t=l.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&l.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&l.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new l.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!l.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>l.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:o.default,ripple:d.default},components:{Portal:c.default}};const h=["aria-modal"],u=["aria-label"],v=[r.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),p.render=function(e,t,n,i,l,s){const o=r.resolveComponent("Portal"),a=r.resolveDirective("ripple"),c=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(o,{appendTo:n.appendTo},{default:r.withCtx((()=>[r.createVNode(r.Transition,{name:"p-overlaypanel",onEnter:s.onEnter,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave},{default:r.withCtx((()=>[l.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:s.containerRef,role:"dialog",class:s.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))},e.$attrs),[r.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>s.onContentClick&&s.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>s.onContentKeydown&&s.onContentKeydown(...e))},[r.renderSlot(e.$slots,"default")],32),n.showCloseIcon?r.withDirectives((r.openBlock(),r.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":s.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>s.hide&&s.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>s.onButtonKeydown&&s.onButtonKeydown(...e))},v,40,u)),[[a]]):r.createCommentVNode("",!0)],16,h)),[[c]]):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},p}(primevue.focustrap,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l,o,s){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),c=r(t),d=r(n),p=r(i),h=r(l),u={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&o.ZIndexUtils.clear(this.container),this.overlayEventListener&&(d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1,o.DomHandler.focus(this.target)},onContentClick(){this.selfClick=!0},onEnter(e){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&o.ZIndexUtils.set("overlay",e,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},this.focus(),d.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),d.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&o.ZIndexUtils.clear(e)},alignOverlay(){o.DomHandler.absolutePosition(this.container,this.target);const e=o.DomHandler.getOffset(this.container),t=o.DomHandler.getOffset(this.target);let n=0;e.left<t.left&&(n=t.left-e.left),this.container.style.setProperty("--overlayArrowLeft",`${n}px`),e.top<t.top&&o.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},onContentKeydown(e){"Escape"===e.code&&this.hide()},onButtonKeydown(e){switch(e.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":e.preventDefault()}},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},bindOutsideClickListener(){!this.outsideClickListener&&o.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new o.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!o.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){d.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>o.UniqueComponentId(),closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:h.default},components:{Portal:p.default,TimesIcon:c.default}};const v=["aria-modal"],y=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),u.render=function(e,t,n,i,l,o){const r=s.resolveComponent("Portal"),a=s.resolveDirective("ripple"),c=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(r,{appendTo:n.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-overlaypanel",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:s.withCtx((()=>[l.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.containerRef,role:"dialog",class:o.containerClass,"aria-modal":l.visible,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},e.$attrs),[s.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>o.onContentClick&&o.onContentClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>o.onContentKeydown&&o.onContentKeydown(...e))},[s.renderSlot(e.$slots,"default")],32),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link","aria-label":o.closeAriaLabel,type:"button",autofocus:"",onClick:t[3]||(t[3]=(...e)=>o.hide&&o.hide(...e)),onKeydown:t[4]||(t[4]=(...e)=>o.onButtonKeydown&&o.onButtonKeydown(...e))},[s.renderSlot(e.$slots,"closeicon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:s.normalizeClass(["p-overlaypanel-close-icon ",n.closeIcon])},null,8,["class"]))]))],40,y)),[[a]]):s.createCommentVNode("",!0)],16,v)),[[c]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},u}(primevue.focustrap,primevue.icons.times,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.utils,Vue);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.26.1",
+    "version": "3.27.0",
     "homepage": "https://primevue.org/",
     "repository": {
       "type": "git",
@@ -26,7 +26,6 @@
       "attributes": "./vetur-attributes.json"
     },
     "peerDependencies": {
-      "vue": "^3.0.0",
-      "primeicons": "^5.0.0 || ^6.0.0"
+      "vue": "^3.0.0"
     }
   }

package/paginator/FirstPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-double-left"></span>
+        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'FirstPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleDoubleLeftIcon: AngleDoubleLeftIcon
+    },
     directives: {
         ripple: Ripple
     }

package/paginator/LastPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-double-right"></span>
+        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleDoubleRightIcon from 'primevue/icons/angledoubleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'LastPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleDoubleRightIcon: AngleDoubleRightIcon
+    },
     directives: {
         ripple: Ripple
     }