feat: add option to use vue component inside snotifyToast

example/src/App/app.html

@@ -156,6 +156,9 @@ <h3 class="text-center">Toast config</h3>
         <div class="btn-group btn-group-justified">
           <div class="btn btn-default" @click="onHtml">HTML</div>
         </div>
+        <div class="btn-group btn-group-justified">
+          <div class="btn btn-default" @click="onComponent">Component</div>
+        </div>
       </div>
     </div>
 

example/src/App/app.ts

@@ -1,11 +1,11 @@
 import Vue from 'vue';
-import { SnotifyPosition, SnotifyToast, SnotifyToastConfig } from 'vue-snotify';
-import { Component } from 'vue-property-decorator';
+import {SnotifyPosition, SnotifyToast, SnotifyToastConfig} from 'vue-snotify';
+import {Component} from 'vue-property-decorator';
 
 import './app.scss';
 
 @Component({
-    template: require('./app.html')
+  template: require('./app.html')
 })
 export class App extends Vue {
   style = 'material';
@@ -24,6 +24,7 @@ export class App extends Vue {
   bodyMaxLength = 80;
   oneAtTime = false;
   preventDuplicates = false;
+
   /*
  Change global configuration
   */
@@ -50,30 +51,55 @@ export class App extends Vue {
   }
 
   mapCallbacks(toast: SnotifyToast) {
-    toast.on('beforeShow', (toast) => { console.log(`${toast.title} - beforeShow`); });
-    toast.on('mounted', (toast) => { console.log(`${toast.title} - mounted`); });
-    toast.on('shown', (toast) => { console.log(`${toast.title} - shown`); });
-    toast.on('beforeHide', (toast) => { console.log(`${toast.title} - beforeHide`); });
-    toast.on('click', (toast) => { console.log(`${toast.title} - click`); });
-    toast.on('destroyed', (toast) => { console.log(`${toast.title} - destroyed`); });
-    toast.on('hidden', (toast) => { console.log(`${toast.title} - hidden`); });
-    toast.on('input', (toast) => { console.log(`${toast.title} - input`); });
-    toast.on('mouseenter', (toast) => { console.log(`${toast.title} - mouseenter`); });
-    toast.on('mouseleave', (toast) => { console.log(`${toast.title} - mouseleave`); });
+    toast.on('beforeShow', (toast) => {
+      console.log(`${toast.title} - beforeShow`);
+    });
+    toast.on('mounted', (toast) => {
+      console.log(`${toast.title} - mounted`);
+    });
+    toast.on('shown', (toast) => {
+      console.log(`${toast.title} - shown`);
+    });
+    toast.on('beforeHide', (toast) => {
+      console.log(`${toast.title} - beforeHide`);
+    });
+    toast.on('click', (toast) => {
+      console.log(`${toast.title} - click`);
+    });
+    toast.on('destroyed', (toast) => {
+      console.log(`${toast.title} - destroyed`);
+    });
+    toast.on('hidden', (toast) => {
+      console.log(`${toast.title} - hidden`);
+    });
+    toast.on('input', (toast) => {
+      console.log(`${toast.title} - input`);
+    });
+    toast.on('mouseenter', (toast) => {
+      console.log(`${toast.title} - mouseenter`);
+    });
+    toast.on('mouseleave', (toast) => {
+      console.log(`${toast.title} - mouseleave`);
+    });
   }
+
   onSuccess() {
     const toast = this.$snotify.success(this.body, this.title, this.getConfig());
     this.mapCallbacks(toast);
   }
+
   onInfo() {
     this.$snotify.info(this.body, this.title, this.getConfig());
   }
+
   onError() {
     this.$snotify.error(this.body, this.title, this.getConfig());
   }
+
   onWarning() {
     this.$snotify.warning(this.body, this.title, this.getConfig());
   }
+
   onSimple() {
 
     // const icon = `assets/custom-svg.svg`;
@@ -125,9 +151,19 @@ export class App extends Vue {
       ...config,
       buttons: [
         {text: 'Yes', action: () => console.log('Clicked: Yes'), bold: false},
-        {text: 'No', action: () => console.log('Clicked: No') },
-        {text: 'Later', action: (toast) => {console.log('Clicked: Later'); this.$snotify.remove(toast.id); } },
-        {text: 'Close', action: (toast) => {console.log('Clicked: Close'); this.$snotify.remove(toast.id); }, bold: true, className: 'btn-cool'},
+        {text: 'No', action: () => console.log('Clicked: No')},
+        {
+          text: 'Later', action: (toast) => {
+            console.log('Clicked: Later');
+            this.$snotify.remove(toast.id);
+          }
+        },
+        {
+          text: 'Close', action: (toast) => {
+            console.log('Clicked: Close');
+            this.$snotify.remove(toast.id);
+          }, bold: true, className: 'btn-cool'
+        },
       ]
     });
     this.mapCallbacks(toast);
@@ -143,8 +179,13 @@ export class App extends Vue {
     const toast = this.$snotify.prompt(this.body, this.title, {
       ...config,
       buttons: [
-        {text: 'Yes', action: (toast) => console.log('Said Yes: ' + toast.value) },
-        {text: 'No', action: (toast) => { console.log('Said No: ' + toast.value); this.$snotify.remove(toast.id); }},
+        {text: 'Yes', action: (toast) => console.log('Said Yes: ' + toast.value)},
+        {
+          text: 'No', action: (toast) => {
+            console.log('Said No: ' + toast.value);
+            this.$snotify.remove(toast.id);
+          }
+        },
       ],
       placeholder: 'Enter "ng-snotify" to validate this input' // Max-length = 40
     }).on('input', (toast) => {
@@ -162,6 +203,27 @@ export class App extends Vue {
     this.$snotify.html(html, this.getConfig());
   }
 
+  onComponent() {
+    const component = Vue.component('button-counter', {
+      data() {
+        return {
+          count: 0,
+        };
+      },
+      props: {
+        withProps: {
+          required: false
+        },
+      },
+      template: '<button @click.stop.prevent="count++">You\'ve clicked {{count}} times - use props: {{withProps}}</button>',
+    });
+    this.$snotify.component(component, {
+      timeout: 9999999999,
+      customProps: {
+        withProps: true,
+      },
+    });
+  }
 
   onClear() {
     this.$snotify.clear();

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vue-snotify",
-  "version": "3.2.1",
-  "description": "A Vue.js toast notifications",
+  "name": "vue-snotify-with-vue-component",
+  "version": "3.2.4",
+  "description": "Fork of vue-snotify original package",
   "scripts": {
     "prestart": "npm run link:src",
     "start": "cross-env NODE_ENV=development npm run link:src && npm run example:dev",
@@ -24,44 +24,16 @@
     "example:unit": "cross-env karma start example/test/unit/karma.conf.js --single-run",
     "example:lint": "tslint -c tslint.json 'example/src'"
   },
-  "keywords": [
-    "vue",
-    "vuejs",
-    "vuejs 2",
-    "vue 2",
-    "2",
-    "Library",
-    "Notifications",
-    "Notification",
-    "Toast",
-    "toasts",
-    "toaster",
-    "promt",
-    "async",
-    "confirmation",
-    "notify",
-    "notie",
-    "notification-center",
-    "snotify",
-    "vue-snotify",
-    "vue2-snotify",
-    "vuejs notifications",
-    "vue notifications",
-    "vue toater"
-  ],
   "author": {
-    "name": "artemsky",
-    "email": "mr.artemsky@gmail.com"
+    "name": "chuckn0risk",
+    "email": "lchenais@gmail.com"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/artemsky/vue-snotify"
+    "url": "https://github.com/ChucKN0risK/vue-snotify"
   },
-  "homepage": "https://artemsky.github.io/vue-snotify",
+  "homepage": "https://github.com/ChucKN0risK/vue-snotify",
   "license": "MIT",
-  "bugs": {
-    "url": "https://artemsky.github.io/vue-snotify/issues"
-  },
   "engines": {
     "node": ">= 8.0.0",
     "npm": ">= 5.0.0"

src/SnotifyService.ts

@@ -475,4 +475,21 @@ export class SnotifyService {
       }
     });
   }
+
+  /**
+   * Creates empty toast with component inside
+   * @param {any} component
+   * @param {SnotifyToastConfig} config
+   * @returns {number}
+   */
+   component(component: any, config?: SnotifyToastConfig): SnotifyToast {
+    return this.create({
+      title: null,
+      body: null,
+      config: {
+        ...config,
+        ...{component}
+      }
+    });
+  }
 }

src/components/SnotifyToast.vue

@@ -15,7 +15,8 @@
     <div class="snotifyToast__progressBar" v-if="toast.config.showProgressBar && toast.config.timeout > 0">
       <span class="snotifyToast__progressBar__percentage" :style="{'width': (state.progress * 100) + '%'}"></span>
     </div>
-    <div class="snotifyToast__inner" v-if="!toast.config.html" :class="{'snotifyToast__noIcon': toast.config.icon === false}">
+    <component :is="toast.config.component" v-bind="toast.config.customProps" v-if="toast.config.component"></component>
+    <div class="snotifyToast__inner" v-else-if="!toast.config.html" :class="{'snotifyToast__noIcon': toast.config.icon === false}">
       <div class="snotifyToast__title" v-if="toast.title">{{toast.title | truncate(toast.config.titleMaxLength)}}</div>
       <div class="snotifyToast__body" v-if="toast.body">{{toast.body | truncate(toast.config.bodyMaxLength)}}</div>
       <snotify-prompt v-if="toast.config.type === state.promptType" :toast="toast"/>

src/interfaces/Snotify.interface.ts

@@ -23,4 +23,8 @@ export interface Snotify {
    * Html content
    */
   html?: string;
+  /**
+   * Component content
+   */
+  component?: any;
 }

src/interfaces/SnotifyToastConfig.interface.ts

@@ -103,6 +103,18 @@ export interface SnotifyToastConfig {
    * @default null
    */
   html?: string;
+  /**
+   * Component object witch overrides toast content
+   * @type {any}
+   * @default null
+   */
+  component?: any;
+  /**
+   * Component object witch overrides toast content
+   * @type {any}
+   * @default null
+   */
+  customProps?: any;
   /**
    * Toasts position on screen
    * @type {SnotifyPosition}