primevue 3.29.2 → 3.30.0

package/timeline/timeline.js

@@ -1,111 +1,107 @@
 this.primevue = this.primevue || {};
-this.primevue.timeline = (function (BaseComponent, utils, vue) {
+this.primevue.timeline = (function (utils, BaseComponent, usestyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var script = {
-        name: 'Timeline',
-        extends: BaseComponent__default["default"],
-        props: {
-            value: null,
-            align: {
-                mode: String,
-                default: 'left'
-            },
-            layout: {
-                mode: String,
-                default: 'vertical'
-            },
-            dataKey: null
+    var styles = "\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n    padding: 0 1rem;\n}\n\n.p-timeline-event-content {\n    flex: 1;\n    padding: 0 1rem;\n}\n\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n\n.p-timeline-event-marker {\n    display: flex;\n    align-self: baseline;\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n}\n\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n";
+    var classes = {
+      root: function root(_ref) {
+        var props = _ref.props;
+        return ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout];
+      },
+      event: 'p-timeline-event',
+      opposite: 'p-timeline-event-opposite',
+      separator: 'p-timeline-event-separator',
+      marker: 'p-timeline-event-marker',
+      connector: 'p-timeline-event-connector',
+      content: 'p-timeline-event-content'
+    };
+    var _useStyle = usestyle.useStyle(styles, {
+        name: 'timeline',
+        manual: true
+      }),
+      loadStyle = _useStyle.load;
+    var script$1 = {
+      name: 'BaseTimeline',
+      "extends": BaseComponent__default["default"],
+      props: {
+        value: null,
+        align: {
+          mode: String,
+          "default": 'left'
         },
-        methods: {
-            getKey(item, index) {
-                return this.dataKey ? utils.ObjectUtils.resolveFieldData(item, this.dataKey) : index;
-            }
+        layout: {
+          mode: String,
+          "default": 'vertical'
         },
-        computed: {
-            containerClass() {
-                return ['p-timeline p-component', 'p-timeline-' + this.align, 'p-timeline-' + this.layout];
-            }
-        }
+        dataKey: null
+      },
+      css: {
+        classes: classes,
+        loadStyle: loadStyle
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
     };
 
-    function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (item, index) => {
-          return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: $options.getKey(item, index),
-            class: "p-timeline-event"
-          }, _ctx.ptm('event')), [
-            vue.createElementVNode("div", vue.mergeProps({ class: "p-timeline-event-opposite" }, _ctx.ptm('opposite')), [
-              vue.renderSlot(_ctx.$slots, "opposite", {
-                item: item,
-                index: index
-              })
-            ], 16),
-            vue.createElementVNode("div", vue.mergeProps({ class: "p-timeline-event-separator" }, _ctx.ptm('separator')), [
-              vue.renderSlot(_ctx.$slots, "marker", {
-                item: item,
-                index: index
-              }, () => [
-                vue.createElementVNode("div", vue.mergeProps({ class: "p-timeline-event-marker" }, _ctx.ptm('marker')), null, 16)
-              ]),
-              (index !== $props.value.length - 1)
-                ? vue.renderSlot(_ctx.$slots, "connector", {
-                    key: 0,
-                    item: item,
-                    index: index
-                  }, () => [
-                    vue.createElementVNode("div", vue.mergeProps({ class: "p-timeline-event-connector" }, _ctx.ptm('connector')), null, 16)
-                  ])
-                : vue.createCommentVNode("", true)
-            ], 16),
-            vue.createElementVNode("div", vue.mergeProps({ class: "p-timeline-event-content" }, _ctx.ptm('content')), [
-              vue.renderSlot(_ctx.$slots, "content", {
-                item: item,
-                index: index
-              })
-            ], 16)
-          ], 16))
-        }), 128))
-      ], 16))
-    }
-
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
+    var script = {
+      name: 'Timeline',
+      "extends": script$1,
+      methods: {
+        getKey: function getKey(item, index) {
+          return this.dataKey ? utils.ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         }
-      } else {
-        head.appendChild(style);
       }
+    };
 
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
+    function render(_ctx, _cache, $props, $setup, $data, $options) {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        "class": _ctx.cx('root')
+      }, _ctx.ptm('root'), {
+        "data-pc-name": "timeline"
+      }), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.value, function (item, index) {
+        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: $options.getKey(item, index),
+          "class": _ctx.cx('event')
+        }, _ctx.ptm('event')), [vue.createElementVNode("div", vue.mergeProps({
+          "class": _ctx.cx('opposite')
+        }, _ctx.ptm('opposite')), [vue.renderSlot(_ctx.$slots, "opposite", {
+          item: item,
+          index: index
+        })], 16), vue.createElementVNode("div", vue.mergeProps({
+          "class": _ctx.cx('separator')
+        }, _ctx.ptm('separator')), [vue.renderSlot(_ctx.$slots, "marker", {
+          item: item,
+          index: index
+        }, function () {
+          return [vue.createElementVNode("div", vue.mergeProps({
+            "class": _ctx.cx('marker')
+          }, _ctx.ptm('marker')), null, 16)];
+        }), index !== _ctx.value.length - 1 ? vue.renderSlot(_ctx.$slots, "connector", {
+          key: 0,
+          item: item,
+          index: index
+        }, function () {
+          return [vue.createElementVNode("div", vue.mergeProps({
+            "class": _ctx.cx('connector')
+          }, _ctx.ptm('connector')), null, 16)];
+        }) : vue.createCommentVNode("", true)], 16), vue.createElementVNode("div", vue.mergeProps({
+          "class": _ctx.cx('content')
+        }, _ctx.ptm('content')), [vue.renderSlot(_ctx.$slots, "content", {
+          item: item,
+          index: index
+        })], 16)], 16);
+      }), 128))], 16);
     }
 
-    var css_248z = "\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: flex;\n    align-self: baseline;\n}\n.p-timeline-event-connector {\n    flex-grow: 1;\n}\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n";
-    styleInject(css_248z);
-
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.utils, Vue);
+})(primevue.utils, primevue.basecomponent, primevue.usestyle, Vue);

package/timeline/timeline.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.timeline=function(e,n,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"Timeline",extends:i(e).default,props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(e,t){return this.dataKey?n.ObjectUtils.resolveFieldData(e,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: flex;\n    align-self: baseline;\n}\n.p-timeline-event-connector {\n    flex-grow: 1;\n}\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n"),l.render=function(e,n,i,l,r,o){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:o.containerClass},e.ptm("root")),[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value,((n,l)=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:o.getKey(n,l),class:"p-timeline-event"},e.ptm("event")),[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-opposite"},e.ptm("opposite")),[t.renderSlot(e.$slots,"opposite",{item:n,index:l})],16),t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-separator"},e.ptm("separator")),[t.renderSlot(e.$slots,"marker",{item:n,index:l},(()=>[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-marker"},e.ptm("marker")),null,16)])),l!==i.value.length-1?t.renderSlot(e.$slots,"connector",{key:0,item:n,index:l},(()=>[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-connector"},e.ptm("connector")),null,16)])):t.createCommentVNode("",!0)],16),t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-content"},e.ptm("content")),[t.renderSlot(e.$slots,"content",{item:n,index:l})],16)],16)))),128))],16)},l}(primevue.basecomponent,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.timeline=function(e,n,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(n),o=t.useStyle("\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n    padding: 0 1rem;\n}\n\n.p-timeline-event-content {\n    flex: 1;\n    padding: 0 1rem;\n}\n\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n\n.p-timeline-event-marker {\n    display: flex;\n    align-self: baseline;\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n}\n\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n",{name:"timeline",manual:!0}),p={name:"Timeline",extends:{name:"BaseTimeline",extends:r.default,props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},css:{classes:{root:function(e){var n=e.props;return["p-timeline p-component","p-timeline-"+n.align,"p-timeline-"+n.layout]},event:"p-timeline-event",opposite:"p-timeline-event-opposite",separator:"p-timeline-event-separator",marker:"p-timeline-event-marker",connector:"p-timeline-event-connector",content:"p-timeline-event-content"},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},methods:{getKey:function(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t}}};return p.render=function(e,n,t,l,r,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"timeline"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.value,(function(n,t){return i.openBlock(),i.createElementBlock("div",i.mergeProps({key:o.getKey(n,t),class:e.cx("event")},e.ptm("event")),[i.createElementVNode("div",i.mergeProps({class:e.cx("opposite")},e.ptm("opposite")),[i.renderSlot(e.$slots,"opposite",{item:n,index:t})],16),i.createElementVNode("div",i.mergeProps({class:e.cx("separator")},e.ptm("separator")),[i.renderSlot(e.$slots,"marker",{item:n,index:t},(function(){return[i.createElementVNode("div",i.mergeProps({class:e.cx("marker")},e.ptm("marker")),null,16)]})),t!==e.value.length-1?i.renderSlot(e.$slots,"connector",{key:0,item:n,index:t},(function(){return[i.createElementVNode("div",i.mergeProps({class:e.cx("connector")},e.ptm("connector")),null,16)]})):i.createCommentVNode("",!0)],16),i.createElementVNode("div",i.mergeProps({class:e.cx("content")},e.ptm("content")),[i.renderSlot(e.$slots,"content",{item:n,index:t})],16)],16)})),128))],16)},p}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/toast/BaseToast.vue

@@ -0,0 +1,181 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-toast {
+    width: 25rem;
+}
+
+.p-toast-message-content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.p-toast-message-text {
+    flex: 1 1 auto;
+}
+
+.p-toast-top-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-bottom-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-center {
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
+}
+
+.p-toast-icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-toast-icon-close.p-link {
+    cursor: pointer;
+}
+
+/* Animations */
+.p-toast-message-enter-from {
+    opacity: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.p-toast-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+.p-toast-message-enter-active {
+    -webkit-transition: transform 0.3s, opacity 0.3s;
+    transition: transform 0.3s, opacity 0.3s;
+}
+
+.p-toast-message-leave-active {
+    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+}
+`;
+
+// Position
+const inlineStyles = {
+    root: ({ position }) => ({
+        position: 'fixed',
+        top: position === 'top-right' || position === 'top-left' || position === 'top-center' ? '20px' : position === 'center' ? '50%' : null,
+        right: (position === 'top-right' || position === 'bottom-right') && '20px',
+        bottom: (position === 'bottom-left' || position === 'bottom-right' || position === 'bottom-center') && '20px',
+        left: position === 'top-left' || position === 'bottom-left' ? '20px' : position === 'center' || position === 'top-center' || position === 'bottom-center' ? '50%' : null
+    })
+};
+
+const classes = {
+    root: ({ props, instance }) => [
+        'p-toast p-component p-toast-' + props.position,
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    container: ({ props }) => [
+        'p-toast-message',
+        {
+            'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
+            'p-toast-message-warn': props.message.severity === 'warn',
+            'p-toast-message-error': props.message.severity === 'error',
+            'p-toast-message-success': props.message.severity === 'success'
+        }
+    ],
+    content: 'p-toast-message-content',
+    icon: ({ props }) => [
+        'p-toast-message-icon',
+        {
+            [props.infoIcon]: props.message.severity === 'info',
+            [props.warnIcon]: props.message.severity === 'warn',
+            [props.errorIcon]: props.message.severity === 'error',
+            [props.successIcon]: props.message.severity === 'success'
+        }
+    ],
+    text: 'p-toast-message-text',
+    summary: 'p-toast-summary',
+    detail: 'p-toast-detail',
+    button: 'p-toast-icon-close p-link',
+    buttonIcon: 'p-toast-icon-close-icon'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });
+
+export default {
+    name: 'BaseToast',
+    extends: BaseComponent,
+    props: {
+        group: {
+            type: String,
+            default: null
+        },
+        position: {
+            type: String,
+            default: 'top-right'
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        breakpoints: {
+            type: Object,
+            default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        },
+        infoIcon: {
+            type: String,
+            default: undefined
+        },
+        warnIcon: {
+            type: String,
+            default: undefined
+        },
+        errorIcon: {
+            type: String,
+            default: undefined
+        },
+        successIcon: {
+            type: String,
+            default: undefined
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        inlineStyles,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/toast/Toast.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { ButtonHTMLAttributes, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type ToastPassThroughOptionType = ToastPassThroughAttributes | ((options: ToastPassThroughMethodOptions) => ToastPassThroughAttributes) | null | undefined;
@@ -16,6 +17,7 @@ export declare type ToastPassThroughOptionType = ToastPassThroughAttributes | ((
  * Custom passthrough(pt) option method.
  */
 export interface ToastPassThroughMethodOptions {
+    instance: any;
     props: ToastProps;
     state: ToastState;
 }
@@ -69,6 +71,11 @@ export interface ToastPassThroughOptions {
      * Uses to pass attributes to the button icon's DOM element.
      */
     buttonIcon?: ToastPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -206,6 +213,11 @@ export interface ToastProps {
      * @type {ToastPassThroughOptions}
      */
     pt?: ToastPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/toast/Toast.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div ref="container" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
+        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="{ ...$attrs, ...ptm('root') }">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="ptm('message')">
                 <ToastMessage
                     v-for="msg of messages"
@@ -22,65 +22,19 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseToast from './BaseToast.vue';
 import ToastMessage from './ToastMessage.vue';
 
 var messageIdx = 0;
 
 export default {
     name: 'Toast',
-    extends: BaseComponent,
+    extends: BaseToast,
     inheritAttrs: false,
     emits: ['close', 'life-end'],
-    props: {
-        group: {
-            type: String,
-            default: null
-        },
-        position: {
-            type: String,
-            default: 'top-right'
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        breakpoints: {
-            type: Object,
-            default: null
-        },
-        closeIcon: {
-            type: String,
-            default: undefined
-        },
-        infoIcon: {
-            type: String,
-            default: undefined
-        },
-        warnIcon: {
-            type: String,
-            default: undefined
-        },
-        errorIcon: {
-            type: String,
-            default: undefined
-        },
-        successIcon: {
-            type: String,
-            default: undefined
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
-        }
-    },
     data() {
         return {
             messages: []
@@ -156,7 +110,7 @@ export default {
             }
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);
@@ -190,15 +144,6 @@ export 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
-                }
-            ];
-        },
         attributeSelector() {
             return UniqueComponentId();
         }
@@ -209,99 +154,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-toast {
-    position: fixed;
-    width: 25rem;
-}
-
-.p-toast-message-content {
-    display: flex;
-    align-items: flex-start;
-}
-
-.p-toast-message-text {
-    flex: 1 1 auto;
-}
-
-.p-toast-top-right {
-    top: 20px;
-    right: 20px;
-}
-
-.p-toast-top-left {
-    top: 20px;
-    left: 20px;
-}
-
-.p-toast-bottom-left {
-    bottom: 20px;
-    left: 20px;
-}
-
-.p-toast-bottom-right {
-    bottom: 20px;
-    right: 20px;
-}
-
-.p-toast-top-center {
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-toast-bottom-center {
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-toast-center {
-    left: 50%;
-    top: 50%;
-    min-width: 20vw;
-    transform: translate(-50%, -50%);
-}
-
-.p-toast-icon-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-toast-icon-close.p-link {
-    cursor: pointer;
-}
-
-/* Animations */
-.p-toast-message-enter-from {
-    opacity: 0;
-    -webkit-transform: translateY(50%);
-    -ms-transform: translateY(50%);
-    transform: translateY(50%);
-}
-
-.p-toast-message-leave-from {
-    max-height: 1000px;
-}
-
-.p-toast .p-toast-message.p-toast-message-leave-to {
-    max-height: 0;
-    opacity: 0;
-    margin-bottom: 0;
-    overflow: hidden;
-}
-
-.p-toast-message-enter-active {
-    -webkit-transition: transform 0.3s, opacity 0.3s;
-    transition: transform 0.3s, opacity 0.3s;
-}
-
-.p-toast-message-leave-active {
-    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-}
-</style>