Merge pull request #25 from Shaxine/master

Fix: Improved Snackbar stacking and placement when a dialog is shown

Author: ThomasLeconte

cypress/test-server/src/components/DialogNotifComponent.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-card rounded="lg">
+    <v-card-title color="primary" class="d-flex justify-space-between align-center">
+      <div class="text-h5 text-medium-emphasis">
+        Custom Dialog
+      </div>
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        @click="close"
+      ></v-btn>
+    </v-card-title>
+
+    <v-divider></v-divider>
+
+    <v-card-text class="text-center">
+      {{ message }}
+      <br/>
+      <v-btn
+        color="purple"
+        text="Nested Notification"
+        @click="showNotification"
+      ></v-btn>
+    </v-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions class="d-flex justify-end">
+      <v-btn
+        class="text-none"
+        color="success"
+        rounded="xl"
+        text="Confirm"
+        variant="flat"
+        @click="close"
+      ></v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+  import { createNotification } from 'vuetify3-dialog'
+
+  const props = defineProps({
+    message: {
+      type: String,
+      required: false
+    }
+  })
+
+  const emit = defineEmits(['closeDialog'])
+  function close() {
+    emit('closeDialog', false)
+  }
+
+  function showNotification() {
+    createNotification({
+      text: "Notification from dialog!",
+      notifyOptions: {
+        timeout: 3000,
+        location: 'bottom right'
+      }
+    })
+  }
+</script>

cypress/test-server/src/components/HelloWorld.vue

@@ -18,6 +18,8 @@
             <v-btn id="create-custom-component-dialog" @click="createCustomComponentDialog()" color="warning">Custom component Dialog</v-btn>
             <v-btn id="success-dialog" @click="successDialog()" color="success">Success Dialog</v-btn>
             <v-btn id="confirm-dialog" @click="confirmDialog()" color="primary">Confirm Dialog</v-btn>
+            <br/>
+            <v-btn id="custom-component-dialog-notif" @click="customComponentDialogNotif()" color="brown">Dialog w/Notification</v-btn>
           </div>
         </div>
 
@@ -58,6 +60,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import MyComponent from "./MyComponent.vue";
+import DialogNotifComponent from "./DialogNotifComponent.vue";
 import sfcExampleVue from "./sfc-example.vue";
 
 
@@ -94,6 +97,17 @@ export default defineComponent({
         }
       })
     },
+    customComponentDialogNotif(){
+      this.$dialog.create({
+        customComponent: {
+          component: DialogNotifComponent,
+          props: { message: "Notification within Dialog!" }
+        },
+        dialogOptions: {
+          width: "600px"
+        }
+      })
+    },
     successDialog(){
       this.$dialog.success({title: "My success dialog", text: "Hello world!"})
     },

src/Snackbar.ts

@@ -39,7 +39,8 @@ export function createNotification(options: CreateNotifyOptions) {
       options.notifyOptions?.location ||
       PluginContext.getPluginOptions()?.defaults?.notify?.location ||
       'top right';
-    let location = potentialLocation.split(' ')[0] || 'top';
+    let locationY = potentialLocation.split(' ')[0] || 'top';
+    let locationX = potentialLocation.split(' ')[1] || 'right';
     let div = document.createElement('div');
 
     if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
@@ -65,17 +66,22 @@ export function createNotification(options: CreateNotifyOptions) {
 
       if ((vuetifyDivOverlay as HTMLElement)?.childElementCount > 1) {
         for (let child of (vuetifyDivOverlay as HTMLElement).children) {
-          if (child === (vuetifyDivOverlay as HTMLElement).lastElementChild) continue;
-          // console.log('child', child);
+          if (
+            child === (vuetifyDivOverlay as HTMLElement).lastElementChild ||
+            !(
+              child.classList.contains('v-snackbar--' + locationX) &&
+              child.classList.contains('v-snackbar--' + locationY)
+            )
+          )
+            continue;
           if ((child as HTMLElement).lastElementChild) {
-            // console.log('child of child', (child as HTMLElement).lastElementChild);
             margin += ((child as HTMLElement).lastElementChild as HTMLElement).offsetHeight + 12;
           }
         }
       }
 
       if (margin > 0) {
-        switch (location) {
+        switch (locationY) {
           case 'top':
             (vuetifyDivOverlay?.lastElementChild as HTMLElement).style.marginTop = `${margin + 12}px`;
             break;