primevuelab 4.0.0-beta.4

package/timeline/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "timelinestyle.mjs",
+    "module": "timelinestyle.mjs",
+    "types": "./TimelineStyle.d.ts",
+    "sideEffects": false
+}

package/timeline/style/timelinestyle.mjs

@@ -0,0 +1,26 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var theme = function theme(_ref) {
+  var dt = _ref.dt;
+  return "\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-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    padding: ".concat(dt('timeline.vertical.event.content.padding'), ";\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    width: ").concat(dt('timeline.event.connector.size'), ";\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: ").concat(dt('timeline.event.min.height'), ";\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n}\n\n.p-timeline-event-content {\n    flex: 1;\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: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    align-self: baseline;\n    border-width: ").concat(dt('timeline.event.marker.border.width'), ";\n    border-style: solid;\n    border-color: ").concat(dt('timeline.event.marker.border.color'), ";\n    border-radius: ").concat(dt('timeline.event.marker.border.radius'), ";\n    width: ").concat(dt('timeline.event.marker.size'), ";\n    height: ").concat(dt('timeline.event.marker.size'), ";\n    background: ").concat(dt('timeline.event.marker.background'), ";\n}\n\n.p-timeline-event-marker::before {\n    content: \" \";\n    border-radius: ").concat(dt('timeline.event.marker.content.border.radius'), ";\n    width: ").concat(dt('timeline.event.marker.content.size'), ";\n    height:").concat(dt('timeline.event.marker.content.size'), ";\n    background: ").concat(dt('timeline.event.marker.content.background'), ";\n}\n\n.p-timeline-event-marker::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ").concat(dt('timeline.event.marker.border.radius'), ";\n    box-shadow: ").concat(dt('timeline.event.marker.content.inset.shadow'), ";\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n    background: ").concat(dt('timeline.event.connector.color'), ";\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    height: ").concat(dt('timeline.event.connector.size'), ";\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    padding: ").concat(dt('timeline.horizontal.event.content.padding'), ";\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n");
+};
+var classes = {
+  root: function root(_ref2) {
+    var props = _ref2.props;
+    return ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout];
+  },
+  event: 'p-timeline-event',
+  eventOpposite: 'p-timeline-event-opposite',
+  eventSeparator: 'p-timeline-event-separator',
+  eventMarker: 'p-timeline-event-marker',
+  eventConnector: 'p-timeline-event-connector',
+  eventContent: 'p-timeline-event-content'
+};
+var TimelineStyle = BaseStyle.extend({
+  name: 'timeline',
+  theme: theme,
+  classes: classes
+});
+
+export { TimelineStyle as default };
+//# sourceMappingURL=timelinestyle.mjs.map

package/timeline/style/timelinestyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelinestyle.mjs","sources":["../../../src/timeline/style/TimelineStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst theme = ({ dt }) => `\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-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    padding: ${dt('timeline.vertical.event.content.padding')};\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    width: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: ${dt('timeline.event.min.height')};\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n}\n\n.p-timeline-event-content {\n    flex: 1;\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: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    align-self: baseline;\n    border-width: ${dt('timeline.event.marker.border.width')};\n    border-style: solid;\n    border-color: ${dt('timeline.event.marker.border.color')};\n    border-radius: ${dt('timeline.event.marker.border.radius')};\n    width: ${dt('timeline.event.marker.size')};\n    height: ${dt('timeline.event.marker.size')};\n    background: ${dt('timeline.event.marker.background')};\n}\n\n.p-timeline-event-marker::before {\n    content: \" \";\n    border-radius: ${dt('timeline.event.marker.content.border.radius')};\n    width: ${dt('timeline.event.marker.content.size')};\n    height:${dt('timeline.event.marker.content.size')};\n    background: ${dt('timeline.event.marker.content.background')};\n}\n\n.p-timeline-event-marker::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${dt('timeline.event.marker.border.radius')};\n    box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n    background: ${dt('timeline.event.connector.color')};\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    height: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    padding: ${dt('timeline.horizontal.event.content.padding')};\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n`;\n\nconst classes = {\n    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],\n    event: 'p-timeline-event',\n    eventOpposite: 'p-timeline-event-opposite',\n    eventSeparator: 'p-timeline-event-separator',\n    eventMarker: 'p-timeline-event-marker',\n    eventConnector: 'p-timeline-event-connector',\n    eventContent: 'p-timeline-event-content'\n};\n\nexport default BaseStyle.extend({\n    name: 'timeline',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","align","layout","event","eventOpposite","eventSeparator","eventMarker","eventConnector","eventContent","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE,CAAA;AAAA,EAAA,OAAA,qtCAAA,CAAAC,MAAA,CAiDJD,EAAE,CAAC,yCAAyC,CAAC,EAAAC,yEAAAA,CAAAA,CAAAA,MAAA,CAI/CD,EAAE,CAAC,+BAA+B,CAAC,EAAA,4FAAA,CAAA,CAAAC,MAAA,CAM9BD,EAAE,CAAC,2BAA2B,CAAC,EAAAC,sdAAAA,CAAAA,CAAAA,MAAA,CA4B7BD,EAAE,CAAC,oCAAoC,CAAC,EAAA,iDAAA,CAAA,CAAAC,MAAA,CAExCD,EAAE,CAAC,oCAAoC,CAAC,EAAAC,wBAAAA,CAAAA,CAAAA,MAAA,CACvCD,EAAE,CAAC,qCAAqC,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CACjDD,EAAE,CAAC,4BAA4B,CAAC,EAAAC,iBAAAA,CAAAA,CAAAA,MAAA,CAC/BD,EAAE,CAAC,4BAA4B,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CAC5BD,EAAE,CAAC,kCAAkC,CAAC,EAAAC,sFAAAA,CAAAA,CAAAA,MAAA,CAKnCD,EAAE,CAAC,6CAA6C,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CACzDD,EAAE,CAAC,oCAAoC,CAAC,EAAAC,gBAAAA,CAAAA,CAAAA,MAAA,CACxCD,EAAE,CAAC,oCAAoC,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CACnCD,EAAE,CAAC,0CAA0C,CAAC,EAAAC,mJAAAA,CAAAA,CAAAA,MAAA,CAQ3CD,EAAE,CAAC,qCAAqC,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CAC5CD,EAAE,CAAC,4CAA4C,CAAC,EAAAC,4EAAAA,CAAAA,CAAAA,MAAA,CAKhDD,EAAE,CAAC,gCAAgC,CAAC,EAAA,kZAAA,CAAA,CAAAC,MAAA,CAsBxCD,EAAE,CAAC,+BAA+B,CAAC,EAAAC,+HAAAA,CAAAA,CAAAA,MAAA,CAKlCD,EAAE,CAAC,2CAA2C,CAAC,EAAA,qNAAA,CAAA,CAAA;AAAA,CAU7D,CAAA;AAED,IAAME,OAAO,GAAG;EACZC,IAAI,EAAE,SAAAA,IAAAA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK,CAAA;AAAA,IAAA,OAAO,CAAC,wBAAwB,EAAE,aAAa,GAAGA,KAAK,CAACC,KAAK,EAAE,aAAa,GAAGD,KAAK,CAACE,MAAM,CAAC,CAAA;AAAA,GAAA;AAC1GC,EAAAA,KAAK,EAAE,kBAAkB;AACzBC,EAAAA,aAAa,EAAE,2BAA2B;AAC1CC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,WAAW,EAAE,yBAAyB;AACtCC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,YAAY,EAAE,0BAAA;AAClB,CAAC,CAAA;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBlB,EAAAA,KAAK,EAALA,KAAK;AACLI,EAAAA,OAAO,EAAPA,OAAAA;AACJ,CAAC,CAAC;;;;"}

package/timeline/timeline.mjs

@@ -0,0 +1,98 @@
+import { ObjectUtils } from '@primevuelab/core/utils';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TimelineStyle from 'primevuelab/timeline/style';
+import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+
+var script$1 = {
+  name: 'BaseTimeline',
+  "extends": BaseComponent,
+  props: {
+    value: null,
+    align: {
+      mode: String,
+      "default": 'left'
+    },
+    layout: {
+      mode: String,
+      "default": 'vertical'
+    },
+    dataKey: null
+  },
+  style: TimelineStyle,
+  provide: function provide() {
+    return {
+      $pcTimeline: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'Timeline',
+  "extends": script$1,
+  inheritAttrs: false,
+  methods: {
+    getKey: function getKey(item, index) {
+      return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
+    },
+    getPTOptions: function getPTOptions(key, index) {
+      return this.ptm(key, {
+        context: {
+          index: index,
+          count: this.value.length
+        }
+      });
+    }
+  }
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, function (item, index) {
+    return openBlock(), createElementBlock("div", mergeProps({
+      key: $options.getKey(item, index),
+      "class": _ctx.cx('event'),
+      ref_for: true
+    }, $options.getPTOptions('event', index)), [createElementVNode("div", mergeProps({
+      "class": _ctx.cx('eventOpposite', {
+        index: index
+      }),
+      ref_for: true
+    }, $options.getPTOptions('eventOpposite', index)), [renderSlot(_ctx.$slots, "opposite", {
+      item: item,
+      index: index
+    })], 16), createElementVNode("div", mergeProps({
+      "class": _ctx.cx('eventSeparator'),
+      ref_for: true
+    }, $options.getPTOptions('eventSeparator', index)), [renderSlot(_ctx.$slots, "marker", {
+      item: item,
+      index: index
+    }, function () {
+      return [createElementVNode("div", mergeProps({
+        "class": _ctx.cx('eventMarker'),
+        ref_for: true
+      }, $options.getPTOptions('eventMarker', index)), null, 16)];
+    }), index !== _ctx.value.length - 1 ? renderSlot(_ctx.$slots, "connector", {
+      key: 0,
+      item: item,
+      index: index
+    }, function () {
+      return [createElementVNode("div", mergeProps({
+        "class": _ctx.cx('eventConnector'),
+        ref_for: true
+      }, $options.getPTOptions('eventConnector', index)), null, 16)];
+    }) : createCommentVNode("", true)], 16), createElementVNode("div", mergeProps({
+      "class": _ctx.cx('eventContent'),
+      ref_for: true
+    }, $options.getPTOptions('eventContent', index)), [renderSlot(_ctx.$slots, "content", {
+      item: item,
+      index: index
+    })], 16)], 16);
+  }), 128))], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=timeline.mjs.map

package/timeline/timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.mjs","sources":["../../src/timeline/BaseTimeline.vue","../../src/timeline/Timeline.vue","../../src/timeline/Timeline.vue?vue&type=template&id=7dd2fac6&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport TimelineStyle from 'primevuelab/timeline/style';\n\nexport default {\n    name: 'BaseTimeline',\n    extends: BaseComponent,\n    props: {\n        value: null,\n        align: {\n            mode: String,\n            default: 'left'\n        },\n        layout: {\n            mode: String,\n            default: 'vertical'\n        },\n        dataKey: null\n    },\n    style: TimelineStyle,\n    provide() {\n        return {\n            $pcTimeline: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { ObjectUtils } from '@primevuelab/core/utils';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { ObjectUtils } from '@primevuelab/core/utils';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","align","mode","String","layout","dataKey","style","TimelineStyle","provide","$pcTimeline","$parentInstance","BaseTimeline","inheritAttrs","methods","getKey","item","index","ObjectUtils","resolveFieldData","getPTOptions","key","ptm","context","count","length","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_Fragment","_renderList","$options","_createElementVNode","_renderSlot","$slots"],"mappings":"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"}

package/toast/BaseToast.vue

@@ -0,0 +1,62 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import ToastStyle from 'primevuelab/toast/style';
+
+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
+        }
+    },
+    style: ToastStyle,
+    provide() {
+        return {
+            $pcToast: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/toast/Toast.d.ts

@@ -0,0 +1,354 @@
+/**
+ *
+ * Toast is used to display messages in an overlay.
+ *
+ * [Live Demo](https://www.primevuelab.org/toast/)
+ *
+ * @module toast
+ *
+ */
+import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type ToastPassThroughOptionType = ToastPassThroughAttributes | ((options: ToastPassThroughMethodOptions) => ToastPassThroughAttributes | string) | string | null | undefined;
+
+export declare type ToastPassThroughTransitionType = TransitionProps | ((options: ToastPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToastPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: ToastProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ToastState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToastProps.pt}
+ */
+export interface ToastPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the message's DOM element.
+     */
+    message?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the message content's DOM element.
+     */
+    messageContent?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the message icon's DOM element.
+     */
+    messageIcon?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the message text's DOM element.
+     */
+    messageText?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the summary's DOM element.
+     */
+    summary?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the detail's DOM element.
+     */
+    detail?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the button container's DOM element.
+     */
+    buttonContainer?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the button's DOM element.
+     */
+    closeButton?: ToastPassThroughOptionType;
+    /**
+     * Used to pass attributes to the button icon's DOM element.
+     */
+    closeIcon?: ToastPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: ToastPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToastPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines message options in Toast component.
+ */
+export interface ToastMessageOptions {
+    /**
+     * Severity level of the message.
+     * @defaultValue info
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    /**
+     * Summary content of the message.
+     */
+    summary?: string | undefined;
+    /**
+     * Detail content of the message.
+     */
+    detail?: any | undefined;
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     */
+    life?: number | undefined;
+    /**
+     * Key of the Toast to display the message.
+     */
+    group?: string | undefined;
+    /**
+     * Style class of the message.
+     */
+    styleClass?: any;
+    /**
+     * Style class of the content.
+     */
+    contentStyleClass?: any;
+}
+
+/**
+ * Defines breakpoints type in Toast component.
+ */
+export interface ToastBreakpointsType {
+    /**
+     * Breakpoint for responsive mode.
+     *
+     * Example:
+     *
+     * <Toast :breakpoints="{'960px': { width: '75vw', ... }" ... />
+     *
+     */
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Toast component.
+ */
+export interface ToastState {
+    /**
+     * Current messages.
+     */
+    messages: any[];
+}
+
+/**
+ * Defines valid properties in Toast component.
+ */
+export interface ToastProps {
+    /**
+     * Unique identifier of a message group.
+     */
+    group?: string | undefined;
+    /**
+     * Position of the toast in viewport.
+     * @defaultValue top-right
+     */
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center' | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Object literal to define styles per screen size.
+     * @see ToastBreakpointsType
+     */
+    breakpoints?: ToastBreakpointsType;
+    /**
+     * Icon to display in the toast close button.
+     */
+    closeIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with info severity.
+     */
+    infoIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with warn severity.
+     */
+    warnIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with error severity.
+     */
+    errorIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with success severity.
+     */
+    successIcon?: string | undefined;
+    /**
+     * Used to pass all properties of the HTMLButtonElement to the close button.
+     */
+    closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Used to access message options.
+     * @type {ToastMessageOptions}
+     */
+    message?: ToastMessageOptions;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {ToastPassThroughOptions}
+     */
+    pt?: PassThrough<ToastPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slot in Toast component.
+ */
+export interface ToastSlots {
+    /**
+     * Custom message template.
+     * @param {Object} scope - message slot's params.
+     */
+    message(scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+    }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'messageicon' slot instead.
+     * Custom message icon template.
+     * @param {Object} scope - message icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the message icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom message icon template.
+     * @param {Object} scope - message icon slot's params.
+     */
+    messageicon(scope: {
+        /**
+         * Style class of the icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom close icon template.
+     * @param {Object} scope - close icon slot's params.
+     */
+    closeicon(scope: {
+        /**
+         * Style class of the close icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+        /**
+         * Close sidebar function.
+         */
+        closeCallback: () => void;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Toast component.
+ */
+export interface ToastEmitsOptions {
+    /**
+     * Callback to invoke when the toast is closed.
+     * @param {ToastMessageOptions} message - Toast message.
+     */
+    close(message: ToastMessageOptions): void;
+    /**
+     * Callback to invoke when the toast's timeout is over.
+     * @param {ToastMessageOptions} message - Toast message.
+     */
+    'life-end'(message: ToastMessageOptions): void;
+}
+
+export declare type ToastEmits = EmitFn<ToastEmitsOptions>;
+
+/**
+ * **primevuelab - Toast**
+ *
+ * _Toast is used to display messages in an overlay._
+ *
+ * [Live Demo](https://www.primevuelab.org/toast/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Toast: DefineComponent<ToastProps, ToastSlots, ToastEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Toast: GlobalComponentConstructor<ToastProps, ToastSlots, ToastEmits>;
+    }
+}
+
+export default Toast;