primevue 3.26.1 → 3.28.0

package/message/Message.vue

@@ -1,13 +1,18 @@
 <template>
     <transition name="p-message" appear>
-        <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="p-message-wrapper">
-                <span :class="iconClass"></span>
-                <div class="p-message-text">
+        <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
+            <div class="p-message-wrapper" v-bind="ptm('wrapper')">
+                <slot name="messageicon" class="p-message-icon">
+                    <component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]" v-bind="ptm('icon')"></component>
+                </slot>
+                <div class="p-message-text" v-bind="ptm('text')">
                     <slot></slot>
                 </div>
-                <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
-                    <i :class="['p-message-close-icon', closeIcon]" />
+                <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }">
+                    <slot name="closeicon" class="p-message-close-icon">
+                        <i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
+                        <TimesIcon v-else class="p-message-close-icon" v-bind="ptm('buttonIcon')" />
+                    </slot>
                 </button>
             </div>
         </div>
@@ -15,10 +20,17 @@
 </template>
 
 <script>
+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';
 
 export default {
     name: 'Message',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         severity: {
@@ -39,11 +51,11 @@ export default {
         },
         icon: {
             type: String,
-            default: null
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -58,7 +70,7 @@ export default {
     },
     mounted() {
         if (!this.sticky) {
-            this.x();
+            this.closeAfterDelay();
         }
     },
     methods: {
@@ -66,7 +78,7 @@ export default {
             this.visible = false;
             this.$emit('close', event);
         },
-        x() {
+        closeAfterDelay() {
             setTimeout(() => {
                 this.visible = false;
             }, this.life);
@@ -76,18 +88,13 @@ export default {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
         },
-        iconClass() {
-            return [
-                'p-message-icon pi',
-                this.icon
-                    ? this.icon
-                    : {
-                          'pi-info-circle': this.severity === 'info',
-                          'pi-check': this.severity === 'success',
-                          'pi-exclamation-triangle': this.severity === 'warn',
-                          'pi-times-circle': this.severity === 'error'
-                      }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon,
+                success: CheckIcon,
+                warn: ExclamationTriangleIcon,
+                error: TimesCircleIcon
+            }[this.severity];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -95,6 +102,13 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        TimesIcon,
+        InfoCircleIcon,
+        CheckIcon,
+        ExclamationTriangleIcon,
+        TimesCircleIcon
     }
 };
 </script>

package/message/message.cjs.js

@@ -1,14 +1,27 @@
 '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');
+var TimesIcon = require('primevue/icons/times');
+var TimesCircleIcon = require('primevue/icons/timescircle');
 var Ripple = require('primevue/ripple');
 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);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Message',
+    extends: BaseComponent__default["default"],
     emits: ['close'],
     props: {
         severity: {
@@ -29,11 +42,11 @@ var script = {
         },
         icon: {
             type: String,
-            default: null
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -48,7 +61,7 @@ var script = {
     },
     mounted() {
         if (!this.sticky) {
-            this.x();
+            this.closeAfterDelay();
         }
     },
     methods: {
@@ -56,7 +69,7 @@ var script = {
             this.visible = false;
             this.$emit('close', event);
         },
-        x() {
+        closeAfterDelay() {
             setTimeout(() => {
                 this.visible = false;
             }, this.life);
@@ -66,18 +79,13 @@ var script = {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
         },
-        iconClass() {
-            return [
-                'p-message-icon pi',
-                this.icon
-                    ? this.icon
-                    : {
-                          'pi-info-circle': this.severity === 'info',
-                          'pi-check': this.severity === 'success',
-                          'pi-exclamation-triangle': this.severity === 'warn',
-                          'pi-times-circle': this.severity === 'error'
-                      }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon__default["default"],
+                success: CheckIcon__default["default"],
+                warn: ExclamationTriangleIcon__default["default"],
+                error: TimesCircleIcon__default["default"]
+            }[this.severity];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -85,14 +93,20 @@ var script = {
     },
     directives: {
         ripple: Ripple__default["default"]
+    },
+    components: {
+        TimesIcon: TimesIcon__default["default"],
+        InfoCircleIcon: InfoCircleIcon__default["default"],
+        CheckIcon: CheckIcon__default["default"],
+        ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
+        TimesCircleIcon: TimesCircleIcon__default["default"]
     }
 };
 
-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");
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return (vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -100,19 +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, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass($options.iconClass)
-          }, null, 2),
-          vue.createElementVNode("div", _hoisted_2, [
-            vue.renderSlot(_ctx.$slots, "default")
+      }, _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), vue.mergeProps({
+              class: ['p-message-icon', $props.icon]
+            }, _ctx.ptm('icon')), null, 16, ["class"]))
           ]),
+          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,
@@ -120,16 +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), [
-                vue.createElementVNode("i", {
-                  class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                }, null, 2)
-              ], 16, _hoisted_3)), [
+              }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
+                vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                  ($props.closeIcon)
+                    ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
+                        key: 0,
+                        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_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/ripple"),t=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={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:null},closeIcon:{type:String,default:"pi pi-times"},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.x()},methods:{close(e){this.visible=!1,this.$emit("close",e)},x(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:s(e).default}};const n={class:"p-message-wrapper"},a={class:"p-message-text"},l=["aria-label"];!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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"),i.render=function(e,s,i,o,r,c){const p=t.resolveDirective("ripple");return t.openBlock(),t.createBlock(t.Transition,{name:"p-message",appear:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("div",{class:t.normalizeClass(c.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[t.createElementVNode("div",n,[t.createElementVNode("span",{class:t.normalizeClass(c.iconClass)},null,2),t.createElementVNode("div",a,[t.renderSlot(e.$slots,"default")]),i.closable?t.withDirectives((t.openBlock(),t.createElementBlock("button",t.mergeProps({key:0,class:"p-message-close p-link","aria-label":c.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>c.close(e))},i.closeButtonProps),[t.createElementVNode("i",{class:t.normalizeClass(["p-message-close-icon",i.closeIcon])},null,2)],16,l)),[[p]]):t.createCommentVNode("",!0)])],2),[[t.vShow,r.visible]])])),_:3})},module.exports=i;
+"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,8 +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 { resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, 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: {
@@ -23,11 +30,11 @@ var script = {
         },
         icon: {
             type: String,
-            default: null
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -42,7 +49,7 @@ var script = {
     },
     mounted() {
         if (!this.sticky) {
-            this.x();
+            this.closeAfterDelay();
         }
     },
     methods: {
@@ -50,7 +57,7 @@ var script = {
             this.visible = false;
             this.$emit('close', event);
         },
-        x() {
+        closeAfterDelay() {
             setTimeout(() => {
                 this.visible = false;
             }, this.life);
@@ -60,18 +67,13 @@ var script = {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
         },
-        iconClass() {
-            return [
-                'p-message-icon pi',
-                this.icon
-                    ? this.icon
-                    : {
-                          'pi-info-circle': this.severity === 'info',
-                          'pi-check': this.severity === 'success',
-                          'pi-exclamation-triangle': this.severity === 'warn',
-                          'pi-times-circle': this.severity === 'error'
-                      }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon,
+                success: CheckIcon,
+                warn: ExclamationTriangleIcon,
+                error: TimesCircleIcon
+            }[this.severity];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -79,14 +81,20 @@ var script = {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        TimesIcon,
+        InfoCircleIcon,
+        CheckIcon,
+        ExclamationTriangleIcon,
+        TimesCircleIcon
     }
 };
 
-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");
   const _directive_ripple = resolveDirective("ripple");
 
   return (openBlock(), createBlock(Transition, {
@@ -94,19 +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, [
-          createElementVNode("span", {
-            class: normalizeClass($options.iconClass)
-          }, null, 2),
-          createElementVNode("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "default")
+      }, _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), mergeProps({
+              class: ['p-message-icon', $props.icon]
+            }, _ctx.ptm('icon')), null, 16, ["class"]))
           ]),
+          createElementVNode("div", mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
+            renderSlot(_ctx.$slots, "default")
+          ], 16),
           ($props.closable)
             ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
                 key: 0,
@@ -114,16 +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), [
-                createElementVNode("i", {
-                  class: normalizeClass(['p-message-close-icon', $props.closeIcon])
-                }, null, 2)
-              ], 16, _hoisted_3)), [
+              }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
+                renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                  ($props.closeIcon)
+                    ? (openBlock(), createElementBlock("i", mergeProps({
+                        key: 0,
+                        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_1)), [
                 [_directive_ripple]
               ])
             : createCommentVNode("", true)
-        ])
-      ], 2), [
+        ], 16)
+      ], 16), [
         [vShow, $data.visible]
       ])
     ]),

package/message/message.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{resolveDirective as s,openBlock as t,createBlock as i,Transition as n,withCtx as a,withDirectives as l,createElementVNode as o,normalizeClass as r,renderSlot as c,createElementBlock as p,mergeProps as m,createCommentVNode as u,vShow as d}from"vue";var g={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:null},closeIcon:{type:String,default:"pi pi-times"},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.x()},methods:{close(e){this.visible=!1,this.$emit("close",e)},x(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:e}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},h=["aria-label"];!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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"),g.render=function(e,g,y,b,x,C){const k=s("ripple");return t(),i(n,{name:"p-message",appear:""},{default:a((()=>[l(o("div",{class:r(C.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[o("div",f,[o("span",{class:r(C.iconClass)},null,2),o("div",v,[c(e.$slots,"default")]),y.closable?l((t(),p("button",m({key:0,class:"p-message-close p-link","aria-label":C.closeAriaLabel,type:"button",onClick:g[0]||(g[0]=e=>C.close(e))},y.closeButtonProps),[o("i",{class:r(["p-message-close-icon",y.closeIcon])},null,2)],16,h)),[[k]]):u("",!0)])],2),[[d,x.visible]])])),_:3})};export{g 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};