Updates example

MeForma · Jan 18, 2021 · 438b931 · 438b931
1 parent 963da7f
commit 438b931
Show file tree

Hide file tree

Showing 3 changed files with 327 additions and 325 deletions.
diff --git a/example/package.json b/example/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@meforma/vue-toaster": "^1.1.0",
+    "@meforma/vue-toaster": "^1.2.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0"
   },

diff --git a/example/src/components/HelloWorld.vue b/example/src/components/HelloWorld.vue
@@ -17,8 +17,8 @@
         <div class="c-two-columns">
           <div>
             <fieldset>
-              <label class="c-label" for="">Message</label>
-              <input v-model="message" type="text" />
+              <label class="c-label" for="message">Message</label>
+              <input id="message" v-model="message" type="text" />
             </fieldset>
             <fieldset>
               <label class="c-label">Position</label>
@@ -72,6 +72,14 @@
                 Enqueue
               </label>
             </fieldset>
+            <fieldset>
+              <label class="c-label"> Max Toasts</label>
+              <input
+                type="number"
+                v-model="options.maxToasts"
+                placeholder="false"
+              />
+            </fieldset>
             <fieldset>
               <label class="c-label">
                 <input
@@ -129,11 +137,19 @@
                     }}</code>
                   </span>
 
-                  <span cla ss="c-code--object-line" v-if="options.queue">
+                  <span class="c-code--object-line" v-if="options.queue">
                     <code>queue:</code>
                     <code class="c-code--number">{{ options.queue }}</code>
                   </span>
 
+                  <span
+                    class="c-code--object-line"
+                    v-if="options.maxToasts !== false"
+                  >
+                    <code>max:</code>
+                    <code class="c-code--number">{{ options.maxToasts }}</code>
+                  </span>
+
                   <span
                     class="c-code--object-line"
                     v-if="options.pauseOnHover === false"
@@ -206,14 +222,24 @@ export default {
     }
   },
   methods: {
-    toast(type = 'default') {
-      const options = {}
+    toast(type = 'default', dismissible = true) {
+      const options = {
+        dismissible,
+        onClick: this.onClick
+      }
       typeof type === 'string' && (options.type = type)
-
-      this.$toast.show(this.message, { ...options, ...this.options })
+      typeof this.options.maxToasts === 'string' &&
+        (this.options.maxToasts = parseInt(this.options.maxToasts))
+      this.$toast.show(this.message, {
+        ...options,
+        ...this.options
+      })
     },
     changeDuration(e) {
       this.options.duration = !e.target.checked ? 4000 : false
+    },
+    onClick(e) {
+      console.log(e)
     }
   }
 }