v3.1.0

- Added auto-distance between each snackbar
- Added `slot` for the message part (thanks to @yusufsahinhamza)

README.md

@@ -51,6 +51,23 @@ You can use the same options as the `v-snackbar`. For example:
 
 The same [`v-snackbar` options](https://vuetifyjs.com/en/components/snackbars/) should be applicable, like `bottom`, `right`, `left`, `top`, `color`, `timeout`, ….
 
+### Personalized content
+
+You can use `v-slot:default` to customize the content of the snackbar.
+
+For example:
+```vue
+<v-snackbars :messages.sync="messages" :timeout="-1" color="black" top right>
+  <template v-slot:default="{ message }">
+    <h3 class="mb-2">Header</h3>
+    {{ message }}
+  </template>
+</v-snackbars>
+```
+
+The parameter:
+  - `message`: the current message that is displayed in the notification
+
 #### Personalized button
 
 A `close` button is used by default. If you prefer to define your own action button, you can use a ` v-slot:action`.
@@ -72,15 +89,6 @@ The parameters:
   - `message`: the current message that is displayed in the notification
   - `id`: the unique key/id of the message
 
-#### Distance
-
-You can define how much space you want between two snackbars. By default, **55** is used.
-
-For example, if you want more space between each snackbar:
-```vue
-<v-snackbars :messages.sync="messages" :distance="65"></v-snackbars>
-```
-
 ## Objects
 
 If you want to customize each snackbar, you can also pass a `objects` instead of `messages`, which will contain the various props (like `message`, `color`, `timeout`, `transition` or the position).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-snackbars",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Display the v-snackbar (from Vuetify) with a stack display",
   "main": "v-snackbars.vue",
   "scripts": {

v-snackbars.vue

@@ -15,7 +15,11 @@
       :timeout="-1"
       v-for="(snackbar,idx) in snackbars"
     >
-      {{ snackbar.message }}
+      <template v-slot:default>
+        <slot :message="snackbar.message">
+          {{ snackbar.message }}
+        </slot>
+      </template>
       <template v-slot:action>
         <slot
           name="action"
@@ -34,7 +38,7 @@
       {{topOrBottom[key]}}: 0;
       }
       .v-snackbars.v-snackbars-{{identifier}}-{{key}} > .v-snack__wrapper {
-      {{topOrBottom[key]}}:{{ indexPosition[key]*distance }}px;
+      {{topOrBottom[key]}}:{{ indexPosition[key]*distances[key] }}px;
       }
     </css-style>
   </div>
@@ -67,6 +71,7 @@ export default {
       len: 0, // we need it to have a css transition
       snackbars: [], // array of {key, message, show(true)}
       keys: [], // array of 'keys'
+      distances: {}, // height of each snackbar to correctly position them
       identifier: Date.now() + (Math.random() + "").slice(2) // to avoid issues when several v-snackbars on the page
     };
   },
@@ -120,6 +125,28 @@ export default {
         this.eventify(this.objects);
       },
       deep: true
+    },
+    snackbars() {
+      // retrieve the height for each snackbar
+      this.$nextTick(function() {
+        let ret = {};
+        let len = this.snackbars.length;
+        this.snackbars.forEach((o, idx) => {
+          let distance = this.distance;
+          if (idx + 1 < len) {
+            let nextKey = this.snackbars[idx + 1].key;
+            let elem = document.querySelector(".v-snackbars-" + this.identifier + "-" + o.key);
+            if (elem) {
+              let wrapper = elem.querySelector(".v-snack__wrapper");
+              if (wrapper) {
+                distance = wrapper.clientHeight + 7;
+              }
+            }
+            ret[nextKey] = distance;
+          }
+        });
+        this.distances = ret;
+      });
     }
   },
   methods: {