primevue 3.27.0 → 3.28.0

package/message/message.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var CheckIcon = require('primevue/icons/check');
 var ExclamationTriangleIcon = require('primevue/icons/exclamationtriangle');
 var InfoCircleIcon = require('primevue/icons/infocircle');
@@ -10,6 +11,7 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
 var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
 var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -19,6 +21,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Message',
+    extends: BaseComponent__default["default"],
     emits: ['close'],
     props: {
         severity: {
@@ -100,9 +103,7 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-message-wrapper" };
-const _hoisted_2 = { class: "p-message-text" };
-const _hoisted_3 = ["aria-label"];
+const _hoisted_1 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TimesIcon = vue.resolveComponent("TimesIcon");
@@ -113,21 +114,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     default: vue.withCtx(() => [
-      vue.withDirectives(vue.createElementVNode("div", {
-        class: vue.normalizeClass($options.containerClass),
+      vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
+        class: $options.containerClass,
         role: "alert",
         "aria-live": "assertive",
         "aria-atomic": "true"
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
+      }, _ctx.ptm('root')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-message-wrapper" }, _ctx.ptm('wrapper')), [
           vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-              class: vue.normalizeClass(['p-message-icon', $props.icon])
-            }, null, 8, ["class"]))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+              class: ['p-message-icon', $props.icon]
+            }, _ctx.ptm('icon')), null, 16, ["class"]))
           ]),
-          vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
             vue.renderSlot(_ctx.$slots, "default")
-          ]),
+          ], 16),
           ($props.closable)
             ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 key: 0,
@@ -135,24 +136,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 "aria-label": $options.closeAriaLabel,
                 type: "button",
                 onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
-              }, $props.closeButtonProps), [
+              }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
                 vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
                   ($props.closeIcon)
-                    ? (vue.openBlock(), vue.createElementBlock("i", {
+                    ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                         key: 0,
-                        class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                      }, null, 2))
-                    : (vue.openBlock(), vue.createBlock(_component_TimesIcon, {
+                        class: ['p-message-close-icon', $props.closeIcon]
+                      }, _ctx.ptm('buttonIcon')), null, 16))
+                    : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
                         key: 1,
                         class: "p-message-close-icon"
-                      }))
+                      }, _ctx.ptm('buttonIcon')), null, 16))
                 ])
-              ], 16, _hoisted_3)), [
+              ], 16, _hoisted_1)), [
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true)
-        ])
-      ], 2), [
+        ], 16)
+      ], 16), [
         [vue.vShow, $data.visible]
       ])
     ]),

package/message/message.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/check"),s=require("primevue/icons/exclamationtriangle"),t=require("primevue/icons/infocircle"),n=require("primevue/icons/times"),i=require("primevue/icons/timescircle"),o=require("primevue/ripple"),a=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),r=l(s),p=l(t),m=l(n),u=l(i),d={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:p.default,success:c.default,warn:r.default,error:u.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:l(o).default},components:{TimesIcon:m.default,InfoCircleIcon:p.default,CheckIcon:c.default,ExclamationTriangleIcon:r.default,TimesCircleIcon:u.default}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},g=["aria-label"];!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),d.render=function(e,s,t,n,i,o){const l=a.resolveComponent("TimesIcon"),c=a.resolveDirective("ripple");return a.openBlock(),a.createBlock(a.Transition,{name:"p-message",appear:""},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",{class:a.normalizeClass(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[a.createElementVNode("div",f,[a.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.icon?"span":o.iconComponent),{class:a.normalizeClass(["p-message-icon",t.icon])},null,8,["class"]))])),a.createElementVNode("div",v,[a.renderSlot(e.$slots,"default")]),t.closable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},t.closeButtonProps),[a.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[t.closeIcon?(a.openBlock(),a.createElementBlock("i",{key:0,class:a.normalizeClass(["p-message-close-icon",t.closeIcon])},null,2)):(a.openBlock(),a.createBlock(l,{key:1,class:"p-message-close-icon"}))]))],16,g)),[[c]]):a.createCommentVNode("",!0)])],2),[[a.vShow,i.visible]])])),_:3})},module.exports=d;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/check"),s=require("primevue/icons/exclamationtriangle"),n=require("primevue/icons/infocircle"),o=require("primevue/icons/times"),i=require("primevue/icons/timescircle"),a=require("primevue/ripple"),l=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(e),p=r(t),m=r(s),u=r(n),d=r(o),f=r(i),g=r(a),v={name:"Message",extends:c.default,emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:u.default,success:p.default,warn:m.default,error:f.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:g.default},components:{TimesIcon:d.default,InfoCircleIcon:u.default,CheckIcon:p.default,ExclamationTriangleIcon:m.default,TimesCircleIcon:f.default}};const y=["aria-label"];!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),v.render=function(e,t,s,n,o,i){const a=l.resolveComponent("TimesIcon"),r=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(l.Transition,{name:"p-message",appear:""},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",l.mergeProps({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("root")),[l.createElementVNode("div",l.mergeProps({class:"p-message-wrapper"},e.ptm("wrapper")),[l.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(s.icon?"span":i.iconComponent),l.mergeProps({class:["p-message-icon",s.icon]},e.ptm("icon")),null,16,["class"]))])),l.createElementVNode("div",l.mergeProps({class:"p-message-text"},e.ptm("text")),[l.renderSlot(e.$slots,"default")],16),s.closable?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,class:"p-message-close p-link","aria-label":i.closeAriaLabel,type:"button",onClick:t[0]||(t[0]=e=>i.close(e))},{...s.closeButtonProps,...e.ptm("button")}),[l.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[s.closeIcon?(l.openBlock(),l.createElementBlock("i",l.mergeProps({key:0,class:["p-message-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16)):(l.openBlock(),l.createBlock(a,l.mergeProps({key:1,class:"p-message-close-icon"},e.ptm("buttonIcon")),null,16))]))],16,y)),[[r]]):l.createCommentVNode("",!0)],16)],16),[[l.vShow,o.visible]])])),_:3})},module.exports=v;

package/message/message.esm.js

@@ -1,13 +1,15 @@
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
 import TimesIcon from 'primevue/icons/times';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, resolveDynamicComponent, createElementBlock, mergeProps, createCommentVNode, vShow } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, mergeProps, renderSlot, resolveDynamicComponent, createElementBlock, createCommentVNode, vShow } from 'vue';
 
 var script = {
     name: 'Message',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         severity: {
@@ -89,9 +91,7 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-message-wrapper" };
-const _hoisted_2 = { class: "p-message-text" };
-const _hoisted_3 = ["aria-label"];
+const _hoisted_1 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TimesIcon = resolveComponent("TimesIcon");
@@ -102,21 +102,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     default: withCtx(() => [
-      withDirectives(createElementVNode("div", {
-        class: normalizeClass($options.containerClass),
+      withDirectives(createElementVNode("div", mergeProps({
+        class: $options.containerClass,
         role: "alert",
         "aria-live": "assertive",
         "aria-atomic": "true"
-      }, [
-        createElementVNode("div", _hoisted_1, [
+      }, _ctx.ptm('root')), [
+        createElementVNode("div", mergeProps({ class: "p-message-wrapper" }, _ctx.ptm('wrapper')), [
           renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
-            (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-              class: normalizeClass(['p-message-icon', $props.icon])
-            }, null, 8, ["class"]))
+            (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), mergeProps({
+              class: ['p-message-icon', $props.icon]
+            }, _ctx.ptm('icon')), null, 16, ["class"]))
           ]),
-          createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
             renderSlot(_ctx.$slots, "default")
-          ]),
+          ], 16),
           ($props.closable)
             ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
                 key: 0,
@@ -124,24 +124,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 "aria-label": $options.closeAriaLabel,
                 type: "button",
                 onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
-              }, $props.closeButtonProps), [
+              }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
                 renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
                   ($props.closeIcon)
-                    ? (openBlock(), createElementBlock("i", {
+                    ? (openBlock(), createElementBlock("i", mergeProps({
                         key: 0,
-                        class: normalizeClass(['p-message-close-icon', $props.closeIcon])
-                      }, null, 2))
-                    : (openBlock(), createBlock(_component_TimesIcon, {
+                        class: ['p-message-close-icon', $props.closeIcon]
+                      }, _ctx.ptm('buttonIcon')), null, 16))
+                    : (openBlock(), createBlock(_component_TimesIcon, mergeProps({
                         key: 1,
                         class: "p-message-close-icon"
-                      }))
+                      }, _ctx.ptm('buttonIcon')), null, 16))
                 ])
-              ], 16, _hoisted_3)), [
+              ], 16, _hoisted_1)), [
                 [_directive_ripple]
               ])
             : createCommentVNode("", true)
-        ])
-      ], 2), [
+        ], 16)
+      ], 16), [
         [vShow, $data.visible]
       ])
     ]),

package/message/message.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/check";import s from"primevue/icons/exclamationtriangle";import i from"primevue/icons/infocircle";import n from"primevue/icons/times";import t from"primevue/icons/timescircle";import o from"primevue/ripple";import{resolveComponent as a,resolveDirective as l,openBlock as c,createBlock as r,Transition as p,withCtx as m,withDirectives as u,createElementVNode as d,normalizeClass as f,renderSlot as g,resolveDynamicComponent as v,createElementBlock as y,mergeProps as h,createCommentVNode as b,vShow as x}from"vue";var C={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:i,success:e,warn:s,error:t}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:o},components:{TimesIcon:n,InfoCircleIcon:i,CheckIcon:e,ExclamationTriangleIcon:s,TimesCircleIcon:t}};const k={class:"p-message-wrapper"},I={class:"p-message-text"},T=["aria-label"];!function(e,s){void 0===s&&(s={});var i=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===i&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),C.render=function(e,s,i,n,t,o){const C=a("TimesIcon"),B=l("ripple");return c(),r(p,{name:"p-message",appear:""},{default:m((()=>[u(d("div",{class:f(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[d("div",k,[g(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(c(),r(v(i.icon?"span":o.iconComponent),{class:f(["p-message-icon",i.icon])},null,8,["class"]))])),d("div",I,[g(e.$slots,"default")]),i.closable?u((c(),y("button",h({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},i.closeButtonProps),[g(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[i.closeIcon?(c(),y("i",{key:0,class:f(["p-message-close-icon",i.closeIcon])},null,2)):(c(),r(C,{key:1,class:"p-message-close-icon"}))]))],16,T)),[[B]]):b("",!0)])],2),[[x,t.visible]])])),_:3})};export{C as default};
+import e from"primevue/basecomponent";import s from"primevue/icons/check";import t from"primevue/icons/exclamationtriangle";import n from"primevue/icons/infocircle";import i from"primevue/icons/times";import o from"primevue/icons/timescircle";import a from"primevue/ripple";import{resolveComponent as l,resolveDirective as c,openBlock as r,createBlock as p,Transition as m,withCtx as u,withDirectives as d,createElementVNode as f,mergeProps as g,renderSlot as v,resolveDynamicComponent as y,createElementBlock as h,createCommentVNode as b,vShow as x}from"vue";var C={name:"Message",extends:e,emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:n,success:s,warn:t,error:o}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:a},components:{TimesIcon:i,InfoCircleIcon:n,CheckIcon:s,ExclamationTriangleIcon:t,TimesCircleIcon:o}};const I=["aria-label"];!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),C.render=function(e,s,t,n,i,o){const a=l("TimesIcon"),C=c("ripple");return r(),p(m,{name:"p-message",appear:""},{default:u((()=>[d(f("div",g({class:o.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("root")),[f("div",g({class:"p-message-wrapper"},e.ptm("wrapper")),[v(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(r(),p(y(t.icon?"span":o.iconComponent),g({class:["p-message-icon",t.icon]},e.ptm("icon")),null,16,["class"]))])),f("div",g({class:"p-message-text"},e.ptm("text")),[v(e.$slots,"default")],16),t.closable?d((r(),h("button",g({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},{...t.closeButtonProps,...e.ptm("button")}),[v(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[t.closeIcon?(r(),h("i",g({key:0,class:["p-message-close-icon",t.closeIcon]},e.ptm("buttonIcon")),null,16)):(r(),p(a,g({key:1,class:"p-message-close-icon"},e.ptm("buttonIcon")),null,16))]))],16,I)),[[C]]):b("",!0)],16)],16),[[x,i.visible]])])),_:3})};export{C as default};

package/message/message.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
+this.primevue.message = (function (BaseComponent, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
     var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
     var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -13,6 +14,7 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
 
     var script = {
         name: 'Message',
+        extends: BaseComponent__default["default"],
         emits: ['close'],
         props: {
             severity: {
@@ -94,9 +96,7 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
         }
     };
 
-    const _hoisted_1 = { class: "p-message-wrapper" };
-    const _hoisted_2 = { class: "p-message-text" };
-    const _hoisted_3 = ["aria-label"];
+    const _hoisted_1 = ["aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TimesIcon = vue.resolveComponent("TimesIcon");
@@ -107,21 +107,21 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
         appear: ""
       }, {
         default: vue.withCtx(() => [
-          vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass($options.containerClass),
+          vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
+            class: $options.containerClass,
             role: "alert",
             "aria-live": "assertive",
             "aria-atomic": "true"
-          }, [
-            vue.createElementVNode("div", _hoisted_1, [
+          }, _ctx.ptm('root')), [
+            vue.createElementVNode("div", vue.mergeProps({ class: "p-message-wrapper" }, _ctx.ptm('wrapper')), [
               vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-                  class: vue.normalizeClass(['p-message-icon', $props.icon])
-                }, null, 8, ["class"]))
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+                  class: ['p-message-icon', $props.icon]
+                }, _ctx.ptm('icon')), null, 16, ["class"]))
               ]),
-              vue.createElementVNode("div", _hoisted_2, [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
                 vue.renderSlot(_ctx.$slots, "default")
-              ]),
+              ], 16),
               ($props.closable)
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                     key: 0,
@@ -129,24 +129,24 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
                     "aria-label": $options.closeAriaLabel,
                     type: "button",
                     onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
-                  }, $props.closeButtonProps), [
+                  }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
                     vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
                       ($props.closeIcon)
-                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                        ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                             key: 0,
-                            class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                          }, null, 2))
-                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, {
+                            class: ['p-message-close-icon', $props.closeIcon]
+                          }, _ctx.ptm('buttonIcon')), null, 16))
+                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
                             key: 1,
                             class: "p-message-close-icon"
-                          }))
+                          }, _ctx.ptm('buttonIcon')), null, 16))
                     ])
-                  ], 16, _hoisted_3)), [
+                  ], 16, _hoisted_1)), [
                     [_directive_ripple]
                   ])
                 : vue.createCommentVNode("", true)
-            ])
-          ], 2), [
+            ], 16)
+          ], 16), [
             [vue.vShow, $data.visible]
           ])
         ]),
@@ -188,4 +188,4 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
 
     return script;
 
-})(primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);

package/message/message.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.message=function(e,s,t,n,i,o,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),r=l(s),p=l(t),m=l(n),u=l(i),d={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:p.default,success:c.default,warn:r.default,error:u.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:l(o).default},components:{TimesIcon:m.default,InfoCircleIcon:p.default,CheckIcon:c.default,ExclamationTriangleIcon:r.default,TimesCircleIcon:u.default}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},g=["aria-label"];return function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),d.render=function(e,s,t,n,i,o){const l=a.resolveComponent("TimesIcon"),c=a.resolveDirective("ripple");return a.openBlock(),a.createBlock(a.Transition,{name:"p-message",appear:""},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",{class:a.normalizeClass(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[a.createElementVNode("div",f,[a.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.icon?"span":o.iconComponent),{class:a.normalizeClass(["p-message-icon",t.icon])},null,8,["class"]))])),a.createElementVNode("div",v,[a.renderSlot(e.$slots,"default")]),t.closable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},t.closeButtonProps),[a.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[t.closeIcon?(a.openBlock(),a.createElementBlock("i",{key:0,class:a.normalizeClass(["p-message-close-icon",t.closeIcon])},null,2)):(a.openBlock(),a.createBlock(l,{key:1,class:"p-message-close-icon"}))]))],16,g)),[[c]]):a.createCommentVNode("",!0)])],2),[[a.vShow,i.visible]])])),_:3})},d}(primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.times,primevue.icons.timescircle,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.message=function(e,t,s,n,o,i,a,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=c(e),p=c(t),m=c(s),u=c(n),d=c(o),f=c(i),g=c(a),v={name:"Message",extends:r.default,emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:u.default,success:p.default,warn:m.default,error:f.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:g.default},components:{TimesIcon:d.default,InfoCircleIcon:u.default,CheckIcon:p.default,ExclamationTriangleIcon:m.default,TimesCircleIcon:f.default}};const h=["aria-label"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),v.render=function(e,t,s,n,o,i){const a=l.resolveComponent("TimesIcon"),c=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(l.Transition,{name:"p-message",appear:""},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",l.mergeProps({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("root")),[l.createElementVNode("div",l.mergeProps({class:"p-message-wrapper"},e.ptm("wrapper")),[l.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(s.icon?"span":i.iconComponent),l.mergeProps({class:["p-message-icon",s.icon]},e.ptm("icon")),null,16,["class"]))])),l.createElementVNode("div",l.mergeProps({class:"p-message-text"},e.ptm("text")),[l.renderSlot(e.$slots,"default")],16),s.closable?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,class:"p-message-close p-link","aria-label":i.closeAriaLabel,type:"button",onClick:t[0]||(t[0]=e=>i.close(e))},{...s.closeButtonProps,...e.ptm("button")}),[l.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[s.closeIcon?(l.openBlock(),l.createElementBlock("i",l.mergeProps({key:0,class:["p-message-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16)):(l.openBlock(),l.createBlock(a,l.mergeProps({key:1,class:"p-message-close-icon"},e.ptm("buttonIcon")),null,16))]))],16,h)),[[c]]):l.createCommentVNode("",!0)],16)],16),[[l.vShow,o.visible]])])),_:3})},v}(primevue.basecomponent,primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.times,primevue.icons.timescircle,primevue.ripple,Vue);

package/multiselect/MultiSelect.d.ts

@@ -426,7 +426,7 @@ export interface MultiSelectSlots {
         /**
          * Remove token icon function.
          */
-        onClick: string;
+        onClick: void;
     }): VNode[];
     /**
      * Custom header checkbox icon template.

package/overlaypanel/OverlayPanel.d.ts

@@ -10,6 +10,57 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayPanelPassThroughMethodOptions {
+    props: OverlayPanelProps;
+    state: OverlayPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OverlayPanelProps.pt}
+ */
+export interface OverlayPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: OverlayPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OverlayPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OverlayPanel component.
+ */
+export interface OverlayPanelState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * OverlayPanel breakpoint metadata.
  */
@@ -70,6 +121,11 @@ export interface OverlayPanelProps {
      * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OverlayPanelPassThroughOptions}
+     */
+    pt?: OverlayPanelPassThroughOptions;
 }
 
 /**

package/overlaypanel/OverlayPanel.vue

@@ -1,13 +1,13 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="$attrs">
-                <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
+                <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
                     <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">
+                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
                     </slot>
                 </button>
             </div>
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -25,6 +26,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'OverlayPanel',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {

package/overlaypanel/overlaypanel.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var FocusTrap = require('primevue/focustrap');
 var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
@@ -10,6 +11,7 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
 var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
@@ -18,6 +20,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'OverlayPanel',
+    extends: BaseComponent__default["default"],
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
@@ -342,17 +345,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: $options.containerClass,
                 "aria-modal": $data.visible,
                 onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-              }, _ctx.$attrs), [
-                vue.createElementVNode("div", {
+              }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
+                vue.createElementVNode("div", vue.mergeProps({
                   class: "p-overlaypanel-content",
                   onClick: _cache[0] || (_cache[0] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                   onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                   onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onContentKeydown && $options.onContentKeydown(...args)))
-                }, [
+                }, _ctx.ptm('content')), [
                   vue.renderSlot(_ctx.$slots, "default")
-                ], 32),
+                ], 16),
                 ($props.showCloseIcon)
-                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                       key: 0,
                       class: "p-overlaypanel-close p-link",
                       "aria-label": $options.closeAriaLabel,
@@ -360,13 +363,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)))
-                    }, [
+                    }, _ctx.ptm('closeButton')), [
                       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"]))
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                          class: ['p-overlaypanel-close-icon ', $props.closeIcon]
+                        }, _ctx.ptm('closeIcon')), null, 16, ["class"]))
                       ])
-                    ], 40, _hoisted_2)), [
+                    ], 16, _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/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;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/focustrap"),n=require("primevue/icons/times"),i=require("primevue/overlayeventbus"),l=require("primevue/portal"),o=require("primevue/ripple"),r=require("primevue/utils"),s=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(e),d=a(t),p=a(n),u=a(i),h=a(l),v=a(o),m={name:"OverlayPanel",extends:c.default,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&&(u.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(),u.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),u.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){u.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:d.default,ripple:v.default},components:{Portal:h.default,TimesIcon:p.default}};const f=["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"),m.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,...e.ptm("root")}),[s.createElementVNode("div",s.mergeProps({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))},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",s.mergeProps({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))},e.ptm("closeButton")),[s.renderSlot(e.$slots,"closeicon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),s.mergeProps({class:["p-overlaypanel-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,y)),[[a]]):s.createCommentVNode("",!0)],16,f)),[[c]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},module.exports=m;