From 128d93283c5651931f3906069a90a129e3e969f3 Mon Sep 17 00:00:00 2001
From: Denis FL <delchyve@gmail.com>
Date: Fri, 14 Sep 2018 11:41:46 +0300
Subject: [PATCH] Add custom template

---
 src/components/Snotify.vue      |  9 +++---
 src/components/SnotifyToast.vue | 53 +++++++++++++++------------------
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/src/components/Snotify.vue b/src/components/Snotify.vue
index 32e44a5..1394444 100644
--- a/src/components/Snotify.vue
+++ b/src/components/Snotify.vue
@@ -2,11 +2,10 @@
   <div>
     <div class="snotify-backdrop" v-if="backdrop >= 0" :style="{opacity: backdrop}"></div>
     <div v-for="(position, index) in notifications" class="snotify" :class="'snotify-' + index">
-      <slot name="toast"
-            v-for="toast in notifications[index].slice(blockSize_a, blockSize_b)"
-            :snotify="{stateChanged: stateChanged, toast:toast}">
-        <toast :toastData="toast" :key="toast.id" @stateChanged="stateChanged" />
-      </slot>
+      <toast v-for="toast in notifications[index].slice(blockSize_a, blockSize_b)"
+             :toastData="toast"
+             :key="toast.id"
+             @stateChanged="stateChanged" />
     </div>
   </div>
 </template>
diff --git a/src/components/SnotifyToast.vue b/src/components/SnotifyToast.vue
index dfb1f52..453b8f8 100644
--- a/src/components/SnotifyToast.vue
+++ b/src/components/SnotifyToast.vue
@@ -16,39 +16,33 @@
     @mouseleave="onMouseLeave"
     @animationend="onExitTransitionEnd">
 
-    <slot name="progressBar" v-if="toast.config.showProgressBar && toast.config.timeout > 0" :state="state">
-      <div class="snotifyToast__progressBar">
-        <span class="snotifyToast__progressBar__percentage" :style="{'width': (state.progress * 100) + '%'}"></span>
-      </div>
-    </slot>
+    <div v-if="toast.config.showProgressBar && toast.config.timeout > 0"
+         class="snotifyToast__progressBar">
+      <span class="snotifyToast__progressBar__percentage" :style="{'width': (state.progress * 100) + '%'}" />
+    </div>
 
-    <div class="snotifyToast__inner" v-if="!toast.config.html">
-      <slot name="inner" :toast="toast">
-        <slot name="title" :toast="toast" v-if="toast.title">
-          <div class="snotifyToast__title">{{toast.title | truncate(toast.config.titleMaxLength)}}</div>
-        </slot>
-        <slot name="body" :toast="toast" v-if="toast.body">
-          <div class="snotifyToast__body">{{toast.body | truncate(toast.config.bodyMaxLength)}}</div>
-        </slot>
-        <slot name="prompt" :toast="toast" v-if="toast.config.type === state.promptType">
-          <snotify-prompt :toast="toast">
-          </snotify-prompt>
-        </slot>
-        <slot name="icon" :toast="toast">
-          <div v-if="!toast.config.icon" :class="['snotify-icon', 'snotify-icon--' + toast.config.type]"></div>
-          <div v-else>
-            <img class="snotify-icon" :src='toast.config.icon'/>
+    <div v-if="!toast.config.html"
+         class="snotifyToast__inner"
+         :class="{'snotifyToast__noIcon': toast.config.icon === false}">
+      <div class="snotifyToast__inner-row">
+        <div v-if="typeof toast.config.icon === 'undefined'"
+             :class="['snotify-icon', 'snotify-icon--' + toast.config.type]" />
+        <div v-else-if="toast.config.icon !== false" class="snotifyToast__icon">
+          <svg><use :xlink:href="toast.config.icon" /></svg>
+        </div>
+        <div>
+          <div v-if="toast.title" class="snotifyToast__title">
+            {{toast.title | truncate(toast.config.titleMaxLength)}}
+          </div>
+          <div v-if="toast.body" class="snotifyToast__body">
+            {{toast.body | truncate(toast.config.bodyMaxLength)}}
           </div>
-        </slot>
-      </slot>
+          <snotify-prompt v-if="toast.config.type === state.promptType" :toast="toast"/>
+        </div>
+      </div>
+      <snotify-button v-if="toast.config.buttons" :toast="toast" />
     </div>
-    <div class="snotifyToast__inner" v-html="toast.config.html" v-else></div>
-
-    <slot name="buttons" :toast="toast" v-if="toast.config.buttons">
-      <snotify-button v-if="toast.config.buttons" :toast="toast"></snotify-button>
-    </slot>
   </div>
-
 </template>
 
 <script lang="ts">
@@ -56,6 +50,7 @@
   import SnotifyPrompt from './SnotifyPrompt.vue';
   import SnotifyButton from './SnotifyButton.vue';
   import {SnotifyStyle} from '../enums';
+import { isBoolean } from 'util';
 
   export default Vue.extend({
     props: ['toastData'],