primevue 3.26.1 → 3.28.0

package/toast/ToastMessage.vue

@@ -1,17 +1,17 @@
 <template>
-    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="p-toast-message-content" :class="message.contentStyleClass">
-            <template v-if="!template">
-                <span :class="iconClass"></span>
-                <div class="p-toast-message-text">
-                    <span class="p-toast-summary">{{ message.summary }}</span>
-                    <div class="p-toast-detail">{{ message.detail }}</div>
+    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
+        <div class="p-toast-message-content" :class="message.contentStyleClass" v-bind="ptm('content')">
+            <template v-if="!templates.message">
+                <component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="iconClass" class="p-toast-message-icon" v-bind="ptm('icon')" />
+                <div class="p-toast-message-text" v-bind="ptm('text')">
+                    <span class="p-toast-summary" v-bind="ptm('summary')">{{ message.summary }}</span>
+                    <div class="p-toast-detail" v-bind="ptm('detail')">{{ message.detail }}</div>
                 </div>
             </template>
-            <component v-else :is="template" :message="message"></component>
-            <div v-if="message.closable !== false">
-                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="closeButtonProps">
-                    <span :class="['p-toast-icon-close-icon', closeIcon]" />
+            <component v-else :is="templates.message" :message="message"></component>
+            <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
+                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
+                    <component :is="templates.closeicon || 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
                 </button>
             </div>
         </div>
@@ -19,18 +19,25 @@
 </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: 'ToastMessage',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         message: {
             type: null,
             default: null
         },
-        template: {
-            type: null,
+        templates: {
+            type: Object,
             default: null
         },
         closeIcon: {
@@ -97,9 +104,16 @@ export default {
                 }
             ];
         },
+        iconComponent() {
+            return {
+                info: !this.infoIcon && InfoCircleIcon,
+                success: !this.successIcon && CheckIcon,
+                warn: !this.warnIcon && ExclamationTriangleIcon,
+                error: !this.errorIcon && TimesCircleIcon
+            }[this.message.severity];
+        },
         iconClass() {
             return [
-                'p-toast-message-icon',
                 {
                     [this.infoIcon]: this.message.severity === 'info',
                     [this.warnIcon]: this.message.severity === 'warn',
@@ -112,6 +126,13 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
+    components: {
+        TimesIcon: TimesIcon,
+        InfoCircleIcon: InfoCircleIcon,
+        CheckIcon: CheckIcon,
+        ExclamationTriangleIcon: ExclamationTriangleIcon,
+        TimesCircleIcon: TimesCircleIcon
+    },
     directives: {
         ripple: Ripple
     }

package/toast/toast.cjs.js

@@ -1,27 +1,40 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Portal = require('primevue/portal');
 var ToastEventBus = require('primevue/toasteventbus');
 var utils = require('primevue/utils');
+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 Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var ToastEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ToastEventBus);
+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$1 = {
     name: 'ToastMessage',
+    extends: BaseComponent__default["default"],
     emits: ['close'],
     props: {
         message: {
             type: null,
             default: null
         },
-        template: {
-            type: null,
+        templates: {
+            type: Object,
             default: null
         },
         closeIcon: {
@@ -88,9 +101,16 @@ var script$1 = {
                 }
             ];
         },
+        iconComponent() {
+            return {
+                info: !this.infoIcon && InfoCircleIcon__default["default"],
+                success: !this.successIcon && CheckIcon__default["default"],
+                warn: !this.warnIcon && ExclamationTriangleIcon__default["default"],
+                error: !this.errorIcon && TimesCircleIcon__default["default"]
+            }[this.message.severity];
+        },
         iconClass() {
             return [
-                'p-toast-message-icon',
                 {
                     [this.infoIcon]: this.message.severity === 'info',
                     [this.warnIcon]: this.message.severity === 'warn',
@@ -103,62 +123,65 @@ var script$1 = {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
+    components: {
+        TimesIcon: TimesIcon__default["default"],
+        InfoCircleIcon: InfoCircleIcon__default["default"],
+        CheckIcon: CheckIcon__default["default"],
+        ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
+        TimesCircleIcon: TimesCircleIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-toast-message-text" };
-const _hoisted_2 = { class: "p-toast-summary" };
-const _hoisted_3 = { class: "p-toast-detail" };
-const _hoisted_4 = { key: 2 };
-const _hoisted_5 = ["aria-label"];
+const _hoisted_1 = ["aria-label"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass),
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: $options.containerClass,
     role: "alert",
     "aria-live": "assertive",
     "aria-atomic": "true"
-  }, [
-    vue.createElementVNode("div", {
-      class: vue.normalizeClass(["p-toast-message-content", $props.message.contentStyleClass])
-    }, [
-      (!$props.template)
+  }, _ctx.ptm('container')), [
+    vue.createElementVNode("div", vue.mergeProps({
+      class: ["p-toast-message-content", $props.message.contentStyleClass]
+    }, _ctx.ptm('content')), [
+      (!$props.templates.message)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.iconClass)
-            }, null, 2),
-            vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.message.summary), 1),
-              vue.createElementVNode("div", _hoisted_3, vue.toDisplayString($props.message.detail), 1)
-            ])
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.icon ? $props.templates.icon : $options.iconComponent.name ? $options.iconComponent : 'span'), vue.mergeProps({
+              class: [$options.iconClass, "p-toast-message-icon"]
+            }, _ctx.ptm('icon')), null, 16, ["class"])),
+            vue.createElementVNode("div", vue.mergeProps({ class: "p-toast-message-text" }, _ctx.ptm('text')), [
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-toast-summary" }, _ctx.ptm('summary')), vue.toDisplayString($props.message.summary), 17),
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-toast-detail" }, _ctx.ptm('detail')), vue.toDisplayString($props.message.detail), 17)
+            ], 16)
           ], 64))
-        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.message), {
             key: 1,
             message: $props.message
           }, null, 8, ["message"])),
       ($props.message.closable !== false)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 2 }, _ctx.ptm('buttonContainer'))), [
             vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               class: "p-toast-icon-close p-link",
               type: "button",
               "aria-label": $options.closeAriaLabel,
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
               autofocus: ""
-            }, $props.closeButtonProps), [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass(['p-toast-icon-close-icon', $props.closeIcon])
-              }, null, 2)
-            ], 16, _hoisted_5)), [
+            }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.closeicon || 'TimesIcon'), vue.mergeProps({
+                class: ['p-toast-icon-close-icon', $props.closeIcon]
+              }, _ctx.ptm('buttonIcon')), null, 16, ["class"]))
+            ], 16, _hoisted_1)), [
               [_directive_ripple]
             ])
-          ]))
+          ], 16))
         : vue.createCommentVNode("", true)
-    ], 2)
-  ], 2))
+    ], 16)
+  ], 16))
 }
 
 script$1.render = render$1;
@@ -167,6 +190,7 @@ var messageIdx = 0;
 
 var script = {
     name: 'Toast',
+    extends: BaseComponent__default["default"],
     inheritAttrs: false,
     emits: ['close', 'life-end'],
     props: {
@@ -192,23 +216,23 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         infoIcon: {
             type: String,
-            default: 'pi pi-info-circle'
+            default: undefined
         },
         warnIcon: {
             type: String,
-            default: 'pi pi-exclamation-triangle'
+            default: undefined
         },
         errorIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         successIcon: {
             type: String,
-            default: 'pi pi-check'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -352,7 +376,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createElementVNode("div", vue.mergeProps({
         ref: "container",
         class: $options.containerClass
-      }, _ctx.$attrs), [
+      }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
         vue.createVNode(vue.TransitionGroup, {
           name: "p-toast-message",
           tag: "div",
@@ -364,15 +388,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return (vue.openBlock(), vue.createBlock(_component_ToastMessage, {
                 key: msg.id,
                 message: msg,
-                template: _ctx.$slots.message,
+                templates: _ctx.$slots,
                 closeIcon: $props.closeIcon,
                 infoIcon: $props.infoIcon,
                 warnIcon: $props.warnIcon,
                 errorIcon: $props.errorIcon,
                 successIcon: $props.successIcon,
                 closeButtonProps: $props.closeButtonProps,
-                onClose: _cache[0] || (_cache[0] = $event => ($options.remove($event)))
-              }, null, 8, ["message", "template", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps"]))
+                onClose: _cache[0] || (_cache[0] = $event => ($options.remove($event))),
+                pt: _ctx.pt
+              }, null, 8, ["message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps", "pt"]))
             }), 128))
           ]),
           _: 1

package/toast/toast.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/portal"),t=require("primevue/toasteventbus"),s=require("primevue/utils"),n=require("primevue/ripple"),o=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e),l=a(t),r={name:"ToastMessage",emits:["close"],props:{message:{type:null,default:null},template:{type:null,default:null},closeIcon:{type:String,default:null},infoIcon:{type:String,default:null},warnIcon:{type:String,default:null},errorIcon:{type:String,default:null},successIcon:{type:String,default:null},closeButtonProps:{type:null,default:null}},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close({message:this.message,type:"life-end"})}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(e){this.$emit("close",e)},onCloseClick(){this.clearCloseTimeout(),this.close({message:this.message,type:"close"})},clearCloseTimeout(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null)}},computed:{containerClass(){return["p-toast-message",this.message.styleClass,{"p-toast-message-info":"info"===this.message.severity,"p-toast-message-warn":"warn"===this.message.severity,"p-toast-message-error":"error"===this.message.severity,"p-toast-message-success":"success"===this.message.severity}]},iconClass(){return["p-toast-message-icon",{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:a(n).default}};const c={class:"p-toast-message-text"},m={class:"p-toast-summary"},p={class:"p-toast-detail"},u={key:2},d=["aria-label"];r.render=function(e,t,s,n,a,i){const l=o.resolveDirective("ripple");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(i.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[o.createElementVNode("div",{class:o.normalizeClass(["p-toast-message-content",s.message.contentStyleClass])},[s.template?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(s.template),{key:1,message:s.message},null,8,["message"])):(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createElementVNode("span",{class:o.normalizeClass(i.iconClass)},null,2),o.createElementVNode("div",c,[o.createElementVNode("span",m,o.toDisplayString(s.message.summary),1),o.createElementVNode("div",p,o.toDisplayString(s.message.detail),1)])],64)),!1!==s.message.closable?(o.openBlock(),o.createElementBlock("div",u,[o.withDirectives((o.openBlock(),o.createElementBlock("button",o.mergeProps({class:"p-toast-icon-close p-link",type:"button","aria-label":i.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),autofocus:""},s.closeButtonProps),[o.createElementVNode("span",{class:o.normalizeClass(["p-toast-icon-close-icon",s.closeIcon])},null,2)],16,d)),[[l]])])):o.createCommentVNode("",!0)],2)],2)};var h=0,f={name:"Toast",inheritAttrs:!1,emits:["close","life-end"],props:{group:{type:String,default:null},position:{type:String,default:"top-right"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:"pi pi-times"},infoIcon:{type:String,default:"pi pi-info-circle"},warnIcon:{type:String,default:"pi pi-exclamation-triangle"},errorIcon:{type:String,default:"pi pi-times"},successIcon:{type:String,default:"pi pi-check"},closeButtonProps:{type:null,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){l.default.on("add",this.onAdd),l.default.on("remove-group",this.onRemoveGroup),l.default.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&s.ZIndexUtils.clear(this.$refs.container),l.default.off("add",this.onAdd),l.default.off("remove-group",this.onRemoveGroup),l.default.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=h++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e.message){t=s;break}this.messages.splice(t,1),this.$emit(e.type,{message:e.message})},onAdd(e){this.group==e.group&&this.add(e)},onRemoveGroup(e){this.group===e&&(this.messages=[])},onRemoveAllGroups(){this.messages=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&s.ZIndexUtils.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&s.ObjectUtils.isEmpty(this.messages)&&setTimeout((()=>{s.ZIndexUtils.clear(this.$refs.container)}),200)},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){let s="";for(let e in this.breakpoints[t])s+=e+":"+this.breakpoints[t][e]+"!important;";e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-toast[${this.attributeSelector}] {\n                                ${s}\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{containerClass(){return["p-toast p-component p-toast-"+this.position,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>s.UniqueComponentId()},components:{ToastMessage:r,Portal:i.default}};!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-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n"),f.render=function(e,t,s,n,a,i){const l=o.resolveComponent("ToastMessage"),r=o.resolveComponent("Portal");return o.openBlock(),o.createBlock(r,null,{default:o.withCtx((()=>[o.createElementVNode("div",o.mergeProps({ref:"container",class:i.containerClass},e.$attrs),[o.createVNode(o.TransitionGroup,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:o.withCtx((()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(a.messages,(n=>(o.openBlock(),o.createBlock(l,{key:n.id,message:n,template:e.$slots.message,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,closeButtonProps:s.closeButtonProps,onClose:t[0]||(t[0]=e=>i.remove(e))},null,8,["message","template","closeIcon","infoIcon","warnIcon","errorIcon","successIcon","closeButtonProps"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})},module.exports=f;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/portal"),s=require("primevue/toasteventbus"),o=require("primevue/utils"),n=require("primevue/icons/check"),i=require("primevue/icons/exclamationtriangle"),a=require("primevue/icons/infocircle"),r=require("primevue/icons/times"),l=require("primevue/icons/timescircle"),c=require("primevue/ripple"),m=require("vue");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=p(e),d=p(t),f=p(s),g=p(n),h=p(i),v=p(a),y=p(r),I=p(l),b=p(c),x={name:"ToastMessage",extends:u.default,emits:["close"],props:{message:{type:null,default:null},templates:{type:Object,default:null},closeIcon:{type:String,default:null},infoIcon:{type:String,default:null},warnIcon:{type:String,default:null},errorIcon:{type:String,default:null},successIcon:{type:String,default:null},closeButtonProps:{type:null,default:null}},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close({message:this.message,type:"life-end"})}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(e){this.$emit("close",e)},onCloseClick(){this.clearCloseTimeout(),this.close({message:this.message,type:"close"})},clearCloseTimeout(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null)}},computed:{containerClass(){return["p-toast-message",this.message.styleClass,{"p-toast-message-info":"info"===this.message.severity,"p-toast-message-warn":"warn"===this.message.severity,"p-toast-message-error":"error"===this.message.severity,"p-toast-message-success":"success"===this.message.severity}]},iconComponent(){return{info:!this.infoIcon&&v.default,success:!this.successIcon&&g.default,warn:!this.warnIcon&&h.default,error:!this.errorIcon&&I.default}[this.message.severity]},iconClass(){return[{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{TimesIcon:y.default,InfoCircleIcon:v.default,CheckIcon:g.default,ExclamationTriangleIcon:h.default,TimesCircleIcon:I.default},directives:{ripple:b.default}};const k=["aria-label"];x.render=function(e,t,s,o,n,i){const a=m.resolveDirective("ripple");return m.openBlock(),m.createElementBlock("div",m.mergeProps({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("container")),[m.createElementVNode("div",m.mergeProps({class:["p-toast-message-content",s.message.contentStyleClass]},e.ptm("content")),[s.templates.message?(m.openBlock(),m.createBlock(m.resolveDynamicComponent(s.templates.message),{key:1,message:s.message},null,8,["message"])):(m.openBlock(),m.createElementBlock(m.Fragment,{key:0},[(m.openBlock(),m.createBlock(m.resolveDynamicComponent(s.templates.icon?s.templates.icon:i.iconComponent.name?i.iconComponent:"span"),m.mergeProps({class:[i.iconClass,"p-toast-message-icon"]},e.ptm("icon")),null,16,["class"])),m.createElementVNode("div",m.mergeProps({class:"p-toast-message-text"},e.ptm("text")),[m.createElementVNode("span",m.mergeProps({class:"p-toast-summary"},e.ptm("summary")),m.toDisplayString(s.message.summary),17),m.createElementVNode("div",m.mergeProps({class:"p-toast-detail"},e.ptm("detail")),m.toDisplayString(s.message.detail),17)],16)],64)),!1!==s.message.closable?(m.openBlock(),m.createElementBlock("div",m.normalizeProps(m.mergeProps({key:2},e.ptm("buttonContainer"))),[m.withDirectives((m.openBlock(),m.createElementBlock("button",m.mergeProps({class:"p-toast-icon-close p-link",type:"button","aria-label":i.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),autofocus:""},{...s.closeButtonProps,...e.ptm("button")}),[(m.openBlock(),m.createBlock(m.resolveDynamicComponent(s.templates.closeicon||"TimesIcon"),m.mergeProps({class:["p-toast-icon-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16,["class"]))],16,k)),[[a]])],16)):m.createCommentVNode("",!0)],16)],16)};var C=0,B={name:"Toast",extends:u.default,inheritAttrs:!1,emits:["close","life-end"],props:{group:{type:String,default:null},position:{type:String,default:"top-right"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0},infoIcon:{type:String,default:void 0},warnIcon:{type:String,default:void 0},errorIcon:{type:String,default:void 0},successIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){f.default.on("add",this.onAdd),f.default.on("remove-group",this.onRemoveGroup),f.default.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&o.ZIndexUtils.clear(this.$refs.container),f.default.off("add",this.onAdd),f.default.off("remove-group",this.onRemoveGroup),f.default.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=C++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e.message){t=s;break}this.messages.splice(t,1),this.$emit(e.type,{message:e.message})},onAdd(e){this.group==e.group&&this.add(e)},onRemoveGroup(e){this.group===e&&(this.messages=[])},onRemoveAllGroups(){this.messages=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&o.ZIndexUtils.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&o.ObjectUtils.isEmpty(this.messages)&&setTimeout((()=>{o.ZIndexUtils.clear(this.$refs.container)}),200)},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){let s="";for(let e in this.breakpoints[t])s+=e+":"+this.breakpoints[t][e]+"!important;";e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-toast[${this.attributeSelector}] {\n                                ${s}\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{containerClass(){return["p-toast p-component p-toast-"+this.position,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>o.UniqueComponentId()},components:{ToastMessage:x,Portal:d.default}};!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n"),B.render=function(e,t,s,o,n,i){const a=m.resolveComponent("ToastMessage"),r=m.resolveComponent("Portal");return m.openBlock(),m.createBlock(r,null,{default:m.withCtx((()=>[m.createElementVNode("div",m.mergeProps({ref:"container",class:i.containerClass},{...e.$attrs,...e.ptm("root")}),[m.createVNode(m.TransitionGroup,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:m.withCtx((()=>[(m.openBlock(!0),m.createElementBlock(m.Fragment,null,m.renderList(n.messages,(o=>(m.openBlock(),m.createBlock(a,{key:o.id,message:o,templates:e.$slots,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,closeButtonProps:s.closeButtonProps,onClose:t[0]||(t[0]=e=>i.remove(e)),pt:e.pt},null,8,["message","templates","closeIcon","infoIcon","warnIcon","errorIcon","successIcon","closeButtonProps","pt"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})},module.exports=B;

package/toast/toast.esm.js

@@ -1,19 +1,26 @@
+import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import { ZIndexUtils, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+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, createElementBlock, normalizeClass, createElementVNode, Fragment, toDisplayString, createBlock, resolveDynamicComponent, withDirectives, mergeProps, createCommentVNode, resolveComponent, withCtx, createVNode, TransitionGroup, renderList } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, Fragment, createBlock, resolveDynamicComponent, toDisplayString, normalizeProps, withDirectives, createCommentVNode, resolveComponent, withCtx, createVNode, TransitionGroup, renderList } from 'vue';
 
 var script$1 = {
     name: 'ToastMessage',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         message: {
             type: null,
             default: null
         },
-        template: {
-            type: null,
+        templates: {
+            type: Object,
             default: null
         },
         closeIcon: {
@@ -80,9 +87,16 @@ var script$1 = {
                 }
             ];
         },
+        iconComponent() {
+            return {
+                info: !this.infoIcon && InfoCircleIcon,
+                success: !this.successIcon && CheckIcon,
+                warn: !this.warnIcon && ExclamationTriangleIcon,
+                error: !this.errorIcon && TimesCircleIcon
+            }[this.message.severity];
+        },
         iconClass() {
             return [
-                'p-toast-message-icon',
                 {
                     [this.infoIcon]: this.message.severity === 'info',
                     [this.warnIcon]: this.message.severity === 'warn',
@@ -95,62 +109,65 @@ var script$1 = {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
+    components: {
+        TimesIcon: TimesIcon,
+        InfoCircleIcon: InfoCircleIcon,
+        CheckIcon: CheckIcon,
+        ExclamationTriangleIcon: ExclamationTriangleIcon,
+        TimesCircleIcon: TimesCircleIcon
+    },
     directives: {
         ripple: Ripple
     }
 };
 
-const _hoisted_1 = { class: "p-toast-message-text" };
-const _hoisted_2 = { class: "p-toast-summary" };
-const _hoisted_3 = { class: "p-toast-detail" };
-const _hoisted_4 = { key: 2 };
-const _hoisted_5 = ["aria-label"];
+const _hoisted_1 = ["aria-label"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     role: "alert",
     "aria-live": "assertive",
     "aria-atomic": "true"
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass(["p-toast-message-content", $props.message.contentStyleClass])
-    }, [
-      (!$props.template)
+  }, _ctx.ptm('container')), [
+    createElementVNode("div", mergeProps({
+      class: ["p-toast-message-content", $props.message.contentStyleClass]
+    }, _ctx.ptm('content')), [
+      (!$props.templates.message)
         ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createElementVNode("span", {
-              class: normalizeClass($options.iconClass)
-            }, null, 2),
-            createElementVNode("div", _hoisted_1, [
-              createElementVNode("span", _hoisted_2, toDisplayString($props.message.summary), 1),
-              createElementVNode("div", _hoisted_3, toDisplayString($props.message.detail), 1)
-            ])
+            (openBlock(), createBlock(resolveDynamicComponent($props.templates.icon ? $props.templates.icon : $options.iconComponent.name ? $options.iconComponent : 'span'), mergeProps({
+              class: [$options.iconClass, "p-toast-message-icon"]
+            }, _ctx.ptm('icon')), null, 16, ["class"])),
+            createElementVNode("div", mergeProps({ class: "p-toast-message-text" }, _ctx.ptm('text')), [
+              createElementVNode("span", mergeProps({ class: "p-toast-summary" }, _ctx.ptm('summary')), toDisplayString($props.message.summary), 17),
+              createElementVNode("div", mergeProps({ class: "p-toast-detail" }, _ctx.ptm('detail')), toDisplayString($props.message.detail), 17)
+            ], 16)
           ], 64))
-        : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
+        : (openBlock(), createBlock(resolveDynamicComponent($props.templates.message), {
             key: 1,
             message: $props.message
           }, null, 8, ["message"])),
       ($props.message.closable !== false)
-        ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 2 }, _ctx.ptm('buttonContainer'))), [
             withDirectives((openBlock(), createElementBlock("button", mergeProps({
               class: "p-toast-icon-close p-link",
               type: "button",
               "aria-label": $options.closeAriaLabel,
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
               autofocus: ""
-            }, $props.closeButtonProps), [
-              createElementVNode("span", {
-                class: normalizeClass(['p-toast-icon-close-icon', $props.closeIcon])
-              }, null, 2)
-            ], 16, _hoisted_5)), [
+            }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
+              (openBlock(), createBlock(resolveDynamicComponent($props.templates.closeicon || 'TimesIcon'), mergeProps({
+                class: ['p-toast-icon-close-icon', $props.closeIcon]
+              }, _ctx.ptm('buttonIcon')), null, 16, ["class"]))
+            ], 16, _hoisted_1)), [
               [_directive_ripple]
             ])
-          ]))
+          ], 16))
         : createCommentVNode("", true)
-    ], 2)
-  ], 2))
+    ], 16)
+  ], 16))
 }
 
 script$1.render = render$1;
@@ -159,6 +176,7 @@ var messageIdx = 0;
 
 var script = {
     name: 'Toast',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['close', 'life-end'],
     props: {
@@ -184,23 +202,23 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         infoIcon: {
             type: String,
-            default: 'pi pi-info-circle'
+            default: undefined
         },
         warnIcon: {
             type: String,
-            default: 'pi pi-exclamation-triangle'
+            default: undefined
         },
         errorIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         successIcon: {
             type: String,
-            default: 'pi pi-check'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -344,7 +362,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", mergeProps({
         ref: "container",
         class: $options.containerClass
-      }, _ctx.$attrs), [
+      }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
         createVNode(TransitionGroup, {
           name: "p-toast-message",
           tag: "div",
@@ -356,15 +374,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return (openBlock(), createBlock(_component_ToastMessage, {
                 key: msg.id,
                 message: msg,
-                template: _ctx.$slots.message,
+                templates: _ctx.$slots,
                 closeIcon: $props.closeIcon,
                 infoIcon: $props.infoIcon,
                 warnIcon: $props.warnIcon,
                 errorIcon: $props.errorIcon,
                 successIcon: $props.successIcon,
                 closeButtonProps: $props.closeButtonProps,
-                onClose: _cache[0] || (_cache[0] = $event => ($options.remove($event)))
-              }, null, 8, ["message", "template", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps"]))
+                onClose: _cache[0] || (_cache[0] = $event => ($options.remove($event))),
+                pt: _ctx.pt
+              }, null, 8, ["message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps", "pt"]))
             }), 128))
           ]),
           _: 1

package/toast/toast.esm.min.js

@@ -1 +1 @@
-import e from"primevue/portal";import t from"primevue/toasteventbus";import{ZIndexUtils as s,ObjectUtils as n,UniqueComponentId as o}from"primevue/utils";import i from"primevue/ripple";import{resolveDirective as a,openBlock as l,createElementBlock as r,normalizeClass as m,createElementVNode as c,Fragment as p,toDisplayString as u,createBlock as d,resolveDynamicComponent as h,withDirectives as f,mergeProps as g,createCommentVNode as y,resolveComponent as v,withCtx as b,createVNode as I,TransitionGroup as x,renderList as C}from"vue";var S={name:"ToastMessage",emits:["close"],props:{message:{type:null,default:null},template:{type:null,default:null},closeIcon:{type:String,default:null},infoIcon:{type:String,default:null},warnIcon:{type:String,default:null},errorIcon:{type:String,default:null},successIcon:{type:String,default:null},closeButtonProps:{type:null,default:null}},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close({message:this.message,type:"life-end"})}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(e){this.$emit("close",e)},onCloseClick(){this.clearCloseTimeout(),this.close({message:this.message,type:"close"})},clearCloseTimeout(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null)}},computed:{containerClass(){return["p-toast-message",this.message.styleClass,{"p-toast-message-info":"info"===this.message.severity,"p-toast-message-warn":"warn"===this.message.severity,"p-toast-message-error":"error"===this.message.severity,"p-toast-message-success":"success"===this.message.severity}]},iconClass(){return["p-toast-message-icon",{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:i}};const k={class:"p-toast-message-text"},T={class:"p-toast-summary"},w={class:"p-toast-detail"},$={key:2},E=["aria-label"];S.render=function(e,t,s,n,o,i){const v=a("ripple");return l(),r("div",{class:m(i.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[c("div",{class:m(["p-toast-message-content",s.message.contentStyleClass])},[s.template?(l(),d(h(s.template),{key:1,message:s.message},null,8,["message"])):(l(),r(p,{key:0},[c("span",{class:m(i.iconClass)},null,2),c("div",k,[c("span",T,u(s.message.summary),1),c("div",w,u(s.message.detail),1)])],64)),!1!==s.message.closable?(l(),r("div",$,[f((l(),r("button",g({class:"p-toast-icon-close p-link",type:"button","aria-label":i.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),autofocus:""},s.closeButtonProps),[c("span",{class:m(["p-toast-icon-close-icon",s.closeIcon])},null,2)],16,E)),[[v]])])):y("",!0)],2)],2)};var A=0,B={name:"Toast",inheritAttrs:!1,emits:["close","life-end"],props:{group:{type:String,default:null},position:{type:String,default:"top-right"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:"pi pi-times"},infoIcon:{type:String,default:"pi pi-info-circle"},warnIcon:{type:String,default:"pi pi-exclamation-triangle"},errorIcon:{type:String,default:"pi pi-times"},successIcon:{type:String,default:"pi pi-check"},closeButtonProps:{type:null,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){t.on("add",this.onAdd),t.on("remove-group",this.onRemoveGroup),t.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&s.clear(this.$refs.container),t.off("add",this.onAdd),t.off("remove-group",this.onRemoveGroup),t.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=A++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e.message){t=s;break}this.messages.splice(t,1),this.$emit(e.type,{message:e.message})},onAdd(e){this.group==e.group&&this.add(e)},onRemoveGroup(e){this.group===e&&(this.messages=[])},onRemoveAllGroups(){this.messages=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&s.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&n.isEmpty(this.messages)&&setTimeout((()=>{s.clear(this.$refs.container)}),200)},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){let s="";for(let e in this.breakpoints[t])s+=e+":"+this.breakpoints[t][e]+"!important;";e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-toast[${this.attributeSelector}] {\n                                ${s}\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{containerClass(){return["p-toast p-component p-toast-"+this.position,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>o()},components:{ToastMessage:S,Portal:e}};!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-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n"),B.render=function(e,t,s,n,o,i){const a=v("ToastMessage"),m=v("Portal");return l(),d(m,null,{default:b((()=>[c("div",g({ref:"container",class:i.containerClass},e.$attrs),[I(x,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:b((()=>[(l(!0),r(p,null,C(o.messages,(n=>(l(),d(a,{key:n.id,message:n,template:e.$slots.message,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,closeButtonProps:s.closeButtonProps,onClose:t[0]||(t[0]=e=>i.remove(e))},null,8,["message","template","closeIcon","infoIcon","warnIcon","errorIcon","successIcon","closeButtonProps"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})};export{B as default};
+import e from"primevue/basecomponent";import t from"primevue/portal";import s from"primevue/toasteventbus";import{ZIndexUtils as o,ObjectUtils as n,UniqueComponentId as i}from"primevue/utils";import a from"primevue/icons/check";import r from"primevue/icons/exclamationtriangle";import l from"primevue/icons/infocircle";import m from"primevue/icons/times";import c from"primevue/icons/timescircle";import p from"primevue/ripple";import{resolveDirective as u,openBlock as d,createElementBlock as h,mergeProps as f,createElementVNode as g,Fragment as y,createBlock as v,resolveDynamicComponent as I,toDisplayString as b,normalizeProps as x,withDirectives as C,createCommentVNode as S,resolveComponent as T,withCtx as k,createVNode as w,TransitionGroup as E,renderList as $}from"vue";var A={name:"ToastMessage",extends:e,emits:["close"],props:{message:{type:null,default:null},templates:{type:Object,default:null},closeIcon:{type:String,default:null},infoIcon:{type:String,default:null},warnIcon:{type:String,default:null},errorIcon:{type:String,default:null},successIcon:{type:String,default:null},closeButtonProps:{type:null,default:null}},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close({message:this.message,type:"life-end"})}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(e){this.$emit("close",e)},onCloseClick(){this.clearCloseTimeout(),this.close({message:this.message,type:"close"})},clearCloseTimeout(){this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=null)}},computed:{containerClass(){return["p-toast-message",this.message.styleClass,{"p-toast-message-info":"info"===this.message.severity,"p-toast-message-warn":"warn"===this.message.severity,"p-toast-message-error":"error"===this.message.severity,"p-toast-message-success":"success"===this.message.severity}]},iconComponent(){return{info:!this.infoIcon&&l,success:!this.successIcon&&a,warn:!this.warnIcon&&r,error:!this.errorIcon&&c}[this.message.severity]},iconClass(){return[{[this.infoIcon]:"info"===this.message.severity,[this.warnIcon]:"warn"===this.message.severity,[this.errorIcon]:"error"===this.message.severity,[this.successIcon]:"success"===this.message.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{TimesIcon:m,InfoCircleIcon:l,CheckIcon:a,ExclamationTriangleIcon:r,TimesCircleIcon:c},directives:{ripple:p}};const B=["aria-label"];A.render=function(e,t,s,o,n,i){const a=u("ripple");return d(),h("div",f({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("container")),[g("div",f({class:["p-toast-message-content",s.message.contentStyleClass]},e.ptm("content")),[s.templates.message?(d(),v(I(s.templates.message),{key:1,message:s.message},null,8,["message"])):(d(),h(y,{key:0},[(d(),v(I(s.templates.icon?s.templates.icon:i.iconComponent.name?i.iconComponent:"span"),f({class:[i.iconClass,"p-toast-message-icon"]},e.ptm("icon")),null,16,["class"])),g("div",f({class:"p-toast-message-text"},e.ptm("text")),[g("span",f({class:"p-toast-summary"},e.ptm("summary")),b(s.message.summary),17),g("div",f({class:"p-toast-detail"},e.ptm("detail")),b(s.message.detail),17)],16)],64)),!1!==s.message.closable?(d(),h("div",x(f({key:2},e.ptm("buttonContainer"))),[C((d(),h("button",f({class:"p-toast-icon-close p-link",type:"button","aria-label":i.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),autofocus:""},{...s.closeButtonProps,...e.ptm("button")}),[(d(),v(I(s.templates.closeicon||"TimesIcon"),f({class:["p-toast-icon-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16,["class"]))],16,B)),[[a]])],16)):S("",!0)],16)],16)};var P=0,L={name:"Toast",extends:e,inheritAttrs:!1,emits:["close","life-end"],props:{group:{type:String,default:null},position:{type:String,default:"top-right"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},breakpoints:{type:Object,default:null},closeIcon:{type:String,default:void 0},infoIcon:{type:String,default:void 0},warnIcon:{type:String,default:void 0},errorIcon:{type:String,default:void 0},successIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},data:()=>({messages:[]}),styleElement:null,mounted(){s.on("add",this.onAdd),s.on("remove-group",this.onRemoveGroup),s.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&o.clear(this.$refs.container),s.off("add",this.onAdd),s.off("remove-group",this.onRemoveGroup),s.off("remove-all-groups",this.onRemoveAllGroups)},methods:{add(e){null==e.id&&(e.id=P++),this.messages=[...this.messages,e]},remove(e){let t=-1;for(let s=0;s<this.messages.length;s++)if(this.messages[s]===e.message){t=s;break}this.messages.splice(t,1),this.$emit(e.type,{message:e.message})},onAdd(e){this.group==e.group&&this.add(e)},onRemoveGroup(e){this.group===e&&(this.messages=[])},onRemoveAllGroups(){this.messages=[]},onEnter(){this.$refs.container.setAttribute(this.attributeSelector,""),this.autoZIndex&&o.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&n.isEmpty(this.messages)&&setTimeout((()=>{o.clear(this.$refs.container)}),200)},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){let s="";for(let e in this.breakpoints[t])s+=e+":"+this.breakpoints[t][e]+"!important;";e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-toast[${this.attributeSelector}] {\n                                ${s}\n                            }\n                        }\n                    `}this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{containerClass(){return["p-toast p-component p-toast-"+this.position,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>i()},components:{ToastMessage:A,Portal:t}};!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n"),L.render=function(e,t,s,o,n,i){const a=T("ToastMessage"),r=T("Portal");return d(),v(r,null,{default:k((()=>[g("div",f({ref:"container",class:i.containerClass},{...e.$attrs,...e.ptm("root")}),[w(E,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:k((()=>[(d(!0),h(y,null,$(n.messages,(o=>(d(),v(a,{key:o.id,message:o,templates:e.$slots,closeIcon:s.closeIcon,infoIcon:s.infoIcon,warnIcon:s.warnIcon,errorIcon:s.errorIcon,successIcon:s.successIcon,closeButtonProps:s.closeButtonProps,onClose:t[0]||(t[0]=e=>i.remove(e)),pt:e.pt},null,8,["message","templates","closeIcon","infoIcon","warnIcon","errorIcon","successIcon","closeButtonProps","pt"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})};export{L as default};