primevue 3.16.2 → 3.18.0

package/toast/toast.js

@@ -1,12 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
+this.primevue.toast = (function (Portal, ToastEventBus, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var ToastEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ToastEventBus);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
-    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script$1 = {
         name: 'ToastMessage',
@@ -43,33 +43,41 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
         },
         computed: {
             containerClass() {
-                return ['p-toast-message', this.message.styleClass, {
-                    'p-toast-message-info': this.message.severity === 'info',
-                    'p-toast-message-warn': this.message.severity === 'warn',
-                    'p-toast-message-error': this.message.severity === 'error',
-                    'p-toast-message-success': this.message.severity === 'success'
-                }];
+                return [
+                    'p-toast-message',
+                    this.message.styleClass,
+                    {
+                        'p-toast-message-info': this.message.severity === 'info',
+                        'p-toast-message-warn': this.message.severity === 'warn',
+                        'p-toast-message-error': this.message.severity === 'error',
+                        'p-toast-message-success': this.message.severity === 'success'
+                    }
+                ];
             },
             iconClass() {
-                return ['p-toast-message-icon pi', {
-                    'pi-info-circle': this.message.severity === 'info',
-                    'pi-exclamation-triangle': this.message.severity === 'warn',
-                    'pi-times': this.message.severity === 'error',
-                    'pi-check': this.message.severity === 'success'
-                }];
+                return [
+                    'p-toast-message-icon pi',
+                    {
+                        'pi-info-circle': this.message.severity === 'info',
+                        'pi-exclamation-triangle': this.message.severity === 'warn',
+                        'pi-times': this.message.severity === 'error',
+                        'pi-check': this.message.severity === 'success'
+                    }
+                ];
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            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 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-toast-icon-close-icon pi pi-times" }, null, -1);
-    const _hoisted_5 = [
-      _hoisted_4
+    const _hoisted_4 = { key: 2 };
+    const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-toast-icon-close-icon pi pi-times" }, null, -1);
+    const _hoisted_6 = [
+      _hoisted_5
     ];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -99,14 +107,15 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
                 message: $props.message
               }, null, 8, ["message"])),
           ($props.message.closable !== false)
-            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-                key: 2,
-                class: "p-toast-icon-close p-link",
-                onClick: _cache[0] || (_cache[0] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
-                type: "button"
-              }, _hoisted_5)), [
-                [_directive_ripple]
-              ])
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                  class: "p-toast-icon-close p-link",
+                  onClick: _cache[0] || (_cache[0] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
+                  type: "button"
+                }, _hoisted_6)), [
+                  [_directive_ripple]
+                ])
+              ]))
             : vue.createCommentVNode("", true)
         ], 2)
       ], 2))
@@ -144,7 +153,7 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
         data() {
             return {
                 messages: []
-            }
+            };
         },
         styleElement: null,
         mounted() {
@@ -177,6 +186,7 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
             },
             remove(message) {
                 let index = -1;
+
                 for (let i = 0; i < this.messages.length; i++) {
                     if (this.messages[i] === message) {
                         index = i;
@@ -208,7 +218,9 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
             },
             onLeave() {
                 if (this.$refs.container && this.autoZIndex && utils.ObjectUtils.isEmpty(this.messages)) {
-                    utils.ZIndexUtils.clear(this.$refs.container);
+                    setTimeout(() => {
+                        utils.ZIndexUtils.clear(this.$refs.container);
+                    }, 200);
                 }
             },
             createStyle() {
@@ -218,11 +230,14 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
                     document.head.appendChild(this.styleElement);
 
                     let innerHTML = '';
+
                     for (let breakpoint in this.breakpoints) {
                         let breakpointStyle = '';
+
                         for (let styleProp in this.breakpoints[breakpoint]) {
                             breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
                         }
+
                         innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-toast[${this.attributeSelector}] {
@@ -242,20 +257,23 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
                 }
             }
         },
-        components: {
-            'ToastMessage': script$1,
-            'Portal': Portal__default["default"]
-        },
         computed: {
             containerClass() {
-                return ['p-toast p-component p-toast-' + this.position, {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-toast p-component p-toast-' + this.position,
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             attributeSelector() {
                 return utils.UniqueComponentId();
             }
+        },
+        components: {
+            ToastMessage: script$1,
+            Portal: Portal__default["default"]
         }
     };
 
@@ -320,11 +338,11 @@ this.primevue.toast = (function (ToastEventBus, Ripple, vue, utils, Portal) {
       }
     }
 
-    var css_248z = "\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-toast-message-text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-toast-top-right {\n\ttop: 20px;\n\tright: 20px;\n}\n.p-toast-top-left {\n\ttop: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-left {\n\tbottom: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-right {\n\tbottom: 20px;\n\tright: 20px;\n}\n.p-toast-top-center {\n\ttop: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n\tbottom: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-center {\n\tleft: 50%;\n\ttop: 50%;\n    min-width: 20vw;\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n\tcursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-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 .3s, opacity .3s;\n    -webkit-transition: opacity .3s, -webkit-transform .3s;\n    transition: opacity .3s, -webkit-transform .3s;\n    transition: transform .3s, opacity .3s;\n    transition: transform .3s, opacity .3s, -webkit-transform .3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n}\n";
+    var css_248z = "\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-toast-message-text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\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    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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    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    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n    transition: opacity 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s, -webkit-transform 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";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(primevue.toasteventbus, primevue.ripple, Vue, primevue.utils, primevue.portal);
+})(primevue.portal, primevue.toasteventbus, primevue.utils, primevue.ripple, Vue);

package/toast/toast.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.toast=function(e,t,s,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e),l=a(t),r=a(o),m={name:"ToastMessage",emits:["close"],props:{message:null,template:null},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close()}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(){this.$emit("close",this.message)},onCloseClick(){this.clearCloseTimeout(),this.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 pi",{"pi-info-circle":"info"===this.message.severity,"pi-exclamation-triangle":"warn"===this.message.severity,"pi-times":"error"===this.message.severity,"pi-check":"success"===this.message.severity}]}},directives:{ripple:l.default}};const p={class:"p-toast-message-text"},c={class:"p-toast-summary"},u={class:"p-toast-detail"},d=[s.createElementVNode("span",{class:"p-toast-icon-close-icon pi pi-times"},null,-1)];m.render=function(e,t,n,o,a,i){const l=s.resolveDirective("ripple");return s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(i.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[s.createElementVNode("div",{class:s.normalizeClass(["p-toast-message-content",n.message.contentStyleClass])},[n.template?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.template),{key:1,message:n.message},null,8,["message"])):(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createElementVNode("span",{class:s.normalizeClass(i.iconClass)},null,2),s.createElementVNode("div",p,[s.createElementVNode("span",c,s.toDisplayString(n.message.summary),1),s.createElementVNode("div",u,s.toDisplayString(n.message.detail),1)])],64)),!1!==n.message.closable?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:2,class:"p-toast-icon-close p-link",onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),type:"button"},d)),[[l]]):s.createCommentVNode("",!0)],2)],2)};var h=0,f={name:"Toast",inheritAttrs:!1,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}},data:()=>({messages:[]}),styleElement:null,mounted(){i.default.on("add",this.onAdd),i.default.on("remove-group",this.onRemoveGroup),i.default.on("remove-all-groups",this.onRemoveAllGroups),this.breakpoints&&this.createStyle()},beforeUnmount(){this.destroyStyle(),this.$refs.container&&this.autoZIndex&&n.ZIndexUtils.clear(this.$refs.container),i.default.off("add",this.onAdd),i.default.off("remove-group",this.onRemoveGroup),i.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){t=s;break}this.messages.splice(t,1)},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&&n.ZIndexUtils.set("modal",this.$refs.container,this.baseZIndex||this.$primevue.config.zIndex.modal)},onLeave(){this.$refs.container&&this.autoZIndex&&n.ObjectUtils.isEmpty(this.messages)&&n.ZIndexUtils.clear(this.$refs.container)},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)}},components:{ToastMessage:m,Portal:r.default},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:()=>n.UniqueComponentId()}};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-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-toast-message-text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-toast-top-right {\n\ttop: 20px;\n\tright: 20px;\n}\n.p-toast-top-left {\n\ttop: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-left {\n\tbottom: 20px;\n\tleft: 20px;\n}\n.p-toast-bottom-right {\n\tbottom: 20px;\n\tright: 20px;\n}\n.p-toast-top-center {\n\ttop: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n\tbottom: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-center {\n\tleft: 50%;\n\ttop: 50%;\n    min-width: 20vw;\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n\tcursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-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 .3s, opacity .3s;\n    -webkit-transition: opacity .3s, -webkit-transform .3s;\n    transition: opacity .3s, -webkit-transform .3s;\n    transition: transform .3s, opacity .3s;\n    transition: transform .3s, opacity .3s, -webkit-transform .3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;\n}\n"),f.render=function(e,t,n,o,a,i){const l=s.resolveComponent("ToastMessage"),r=s.resolveComponent("Portal");return s.openBlock(),s.createBlock(r,null,{default:s.withCtx((()=>[s.createElementVNode("div",s.mergeProps({ref:"container",class:i.containerClass},e.$attrs),[s.createVNode(s.TransitionGroup,{name:"p-toast-message",tag:"div",onEnter:i.onEnter,onLeave:i.onLeave},{default:s.withCtx((()=>[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(a.messages,(n=>(s.openBlock(),s.createBlock(l,{key:n.id,message:n,onClose:t[0]||(t[0]=e=>i.remove(e)),template:e.$slots.message},null,8,["message","template"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})},f}(primevue.toasteventbus,primevue.ripple,Vue,primevue.utils,primevue.portal);
+this.primevue=this.primevue||{},this.primevue.toast=function(e,t,s,n,o){"use strict";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:null,template:null},closeTimeout:null,mounted(){this.message.life&&(this.closeTimeout=setTimeout((()=>{this.close()}),this.message.life))},beforeUnmount(){this.clearCloseTimeout()},methods:{close(){this.$emit("close",this.message)},onCloseClick(){this.clearCloseTimeout(),this.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 pi",{"pi-info-circle":"info"===this.message.severity,"pi-exclamation-triangle":"warn"===this.message.severity,"pi-times":"error"===this.message.severity,"pi-check":"success"===this.message.severity}]}},directives:{ripple:a(n).default}};const m={class:"p-toast-message-text"},p={class:"p-toast-summary"},c={class:"p-toast-detail"},u={key:2},d=[o.createElementVNode("span",{class:"p-toast-icon-close-icon pi pi-times"},null,-1)];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",m,[o.createElementVNode("span",p,o.toDisplayString(s.message.summary),1),o.createElementVNode("div",c,o.toDisplayString(s.message.detail),1)])],64)),!1!==s.message.closable?(o.openBlock(),o.createElementBlock("div",u,[o.withDirectives((o.openBlock(),o.createElementBlock("button",{class:"p-toast-icon-close p-link",onClick:t[0]||(t[0]=(...e)=>i.onCloseClick&&i.onCloseClick(...e)),type:"button"},d)),[[l]])])):o.createCommentVNode("",!0)],2)],2)};var h=0,f={name:"Toast",inheritAttrs:!1,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}},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){t=s;break}this.messages.splice(t,1)},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}};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-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-toast-message-text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\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    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    -webkit-transform: translateX(-50%);\n            transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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    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    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n    transition: opacity 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s, -webkit-transform 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,(s=>(o.openBlock(),o.createBlock(l,{key:s.id,message:s,onClose:t[0]||(t[0]=e=>i.remove(e)),template:e.$slots.message},null,8,["message","template"])))),128))])),_:1},8,["onEnter","onLeave"])],16)])),_:1})},f}(primevue.portal,primevue.toasteventbus,primevue.utils,primevue.ripple,Vue);

package/toastservice/toastservice.cjs.js

@@ -20,6 +20,7 @@ var ToastService = {
                 ToastEventBus__default["default"].emit('remove-all-groups');
             }
         };
+
         app.config.globalProperties.$toast = ToastService;
         app.provide(usetoast.PrimeVueToastSymbol, ToastService);
     }

package/toastservice/toastservice.esm.js

@@ -14,6 +14,7 @@ var ToastService = {
                 ToastEventBus.emit('remove-all-groups');
             }
         };
+
         app.config.globalProperties.$toast = ToastService;
         app.provide(PrimeVueToastSymbol, ToastService);
     }

package/toastservice/toastservice.js

@@ -19,6 +19,7 @@ this.primevue.toastservice = (function (ToastEventBus, usetoast) {
                     ToastEventBus__default["default"].emit('remove-all-groups');
                 }
             };
+
             app.config.globalProperties.$toast = ToastService;
             app.provide(usetoast.PrimeVueToastSymbol, ToastService);
         }

package/togglebutton/ToggleButton.d.ts

@@ -1,3 +1,4 @@
+import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type ToggleButtonType = 'left' | 'right' | undefined;
@@ -54,7 +55,7 @@ export interface ToggleButtonProps {
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
      */
-    inputProps?: HTMLInputElement | undefined;
+    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -65,8 +66,7 @@ export interface ToggleButtonProps {
     'aria-label'?: string | undefined;
 }
 
-export interface ToggleButtonSlots {
-}
+export interface ToggleButtonSlots {}
 
 export declare type ToggleButtonEmits = {
     /**
@@ -78,24 +78,24 @@ export declare type ToggleButtonEmits = {
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
+    change: (event: Event) => void;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
      */
-    'focus': (event: Event) => void;
+    focus: (event: Event) => void;
     /**
      * Callback to invoke when the component loses focus.
      * @param {Event} event - Browser event.
      */
-    'blur': (event: Event) => void;
-}
+    blur: (event: Event) => void;
+};
 
-declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> { }
+declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        ToggleButton: GlobalComponentConstructor<ToggleButton>
+        ToggleButton: GlobalComponentConstructor<ToggleButton>;
     }
 }
 
@@ -105,7 +105,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [ToggleButton](https://www.primefaces.org/primevue/showcase/#/togglebutton)
+ * - [ToggleButton](https://www.primefaces.org/primevue/togglebutton)
  *
  */
 export default ToggleButton;

package/togglebutton/ToggleButton.vue

@@ -1,11 +1,23 @@
 <template>
-    <div :class="buttonClass" @click="onClick($event)" v-ripple>
+    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)">
         <span class="p-hidden-accessible">
-            <input type="checkbox" role="switch" :id="inputId" :class="inputClass" :style="inputStyle" :checked="modelValue" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+            <input
+                :id="inputId"
+                type="checkbox"
+                role="switch"
+                :class="inputClass"
+                :style="inputStyle"
+                :checked="modelValue"
+                :value="modelValue"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </span>
         <span v-if="hasIcon" :class="iconClass"></span>
-        <span class="p-button-label">{{label}}</span>
+        <span class="p-button-label">{{ label }}</span>
     </div>
 </template>
 
@@ -17,8 +29,8 @@ export default {
     emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
-		onIcon: String,
-		offIcon: String,
+        onIcon: String,
+        offIcon: String,
         onLabel: {
             type: String,
             default: 'Yes'
@@ -39,52 +51,99 @@ export default {
             type: Number,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
             default: null
         }
     },
+    outsideClickListener: null,
+    data() {
+        return {
+            focused: false
+        };
+    },
+    mounted() {
+        this.bindOutsideClickListener();
+    },
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+    },
     methods: {
         onClick(event) {
             if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
                 this.$emit('click', event);
+                this.focused = true;
             }
         },
         onFocus(event) {
+            this.focused = true;
             this.$emit('focus', event);
         },
         onBlur(event) {
+            this.focused = false;
             this.$emit('blur', event);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.focused && !this.$refs.container.contains(event.target)) {
+                        this.focused = false;
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
         }
     },
     computed: {
         buttonClass() {
-            return {
-                'p-button p-togglebutton p-component': true,
-                'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.disabled,
-                'p-highlight': this.modelValue === true
-            }
+            return [
+                'p-button p-togglebutton p-component',
+                {
+                    'p-focus': this.focused,
+                    'p-button-icon-only': this.hasIcon && !this.hasLabel,
+                    'p-disabled': this.disabled,
+                    'p-highlight': this.modelValue === true
+                }
+            ];
         },
         iconClass() {
             return [
-                this.modelValue ? this.onIcon: this.offIcon,
+                this.modelValue ? this.onIcon : this.offIcon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
                     'p-button-icon-right': this.iconPos === 'right' && this.label
                 }
-            ]
+            ];
         },
         hasLabel() {
             return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
@@ -93,11 +152,11 @@ export default {
             return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
         },
         label() {
-            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel): '&nbsp;';
+            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
-</script>
+};
+</script>

package/togglebutton/togglebutton.cjs.js

@@ -12,8 +12,8 @@ var script = {
     emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
-		onIcon: String,
-		offIcon: String,
+        onIcon: String,
+        offIcon: String,
         onLabel: {
             type: String,
             default: 'Yes'
@@ -34,52 +34,99 @@ var script = {
             type: Number,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
             default: null
         }
     },
+    outsideClickListener: null,
+    data() {
+        return {
+            focused: false
+        };
+    },
+    mounted() {
+        this.bindOutsideClickListener();
+    },
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+    },
     methods: {
         onClick(event) {
             if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
                 this.$emit('click', event);
+                this.focused = true;
             }
         },
         onFocus(event) {
+            this.focused = true;
             this.$emit('focus', event);
         },
         onBlur(event) {
+            this.focused = false;
             this.$emit('blur', event);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.focused && !this.$refs.container.contains(event.target)) {
+                        this.focused = false;
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
         }
     },
     computed: {
         buttonClass() {
-            return {
-                'p-button p-togglebutton p-component': true,
-                'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.disabled,
-                'p-highlight': this.modelValue === true
-            }
+            return [
+                'p-button p-togglebutton p-component',
+                {
+                    'p-focus': this.focused,
+                    'p-button-icon-only': this.hasIcon && !this.hasLabel,
+                    'p-disabled': this.disabled,
+                    'p-highlight': this.modelValue === true
+                }
+            ];
         },
         iconClass() {
             return [
-                this.modelValue ? this.onIcon: this.offIcon,
+                this.modelValue ? this.onIcon : this.offIcon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
                     'p-button-icon-right': this.iconPos === 'right' && this.label
                 }
-            ]
+            ];
         },
         hasLabel() {
             return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
@@ -88,11 +135,11 @@ var script = {
             return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
         },
         label() {
-            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel): ' ';
+            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : ' ';
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -104,14 +151,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    ref: "container",
     class: vue.normalizeClass($options.buttonClass),
     onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
   }, [
     vue.createElementVNode("span", _hoisted_1, [
       vue.createElementVNode("input", vue.mergeProps({
+        id: $props.inputId,
         type: "checkbox",
         role: "switch",
-        id: $props.inputId,
         class: $props.inputClass,
         style: $props.inputStyle,
         checked: $props.modelValue,