From 90bd125584ca15590d0dc00ccdc36f4a8800db19 Mon Sep 17 00:00:00 2001
From: Joshua O <i.sona@outlook.com>
Date: Wed, 20 Jul 2022 10:44:50 +0200
Subject: [PATCH 1/3] make z-index a prop , while maintaining the default

---
 src/components/VueNotificationList.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/VueNotificationList.vue b/src/components/VueNotificationList.vue
index dbfca6c..3734e46 100644
--- a/src/components/VueNotificationList.vue
+++ b/src/components/VueNotificationList.vue
@@ -4,7 +4,7 @@
     name="notification-list"
     tag="ul"
     appear
-    class="notification-list fixed z-40"
+    class="notification-list fixed"
   >
     <vue-notification-list-item
       v-for="notification in notificationList"
@@ -38,6 +38,10 @@ export default defineComponent({
       type: String as PropType<NotificationListPosition>,
       default: NotificationListPosition.BottomRight,
     },
+    zIndex:{
+      type: String,
+      default:'z-40'
+    }
   },
   setup(props) {
     const { notifications } = useNotificationStore()
@@ -59,7 +63,7 @@ export default defineComponent({
         : NotificationListPosition.BottomRight,
     )
 
-    const classList = computed(() => `notification-list--${notificationListPosition.value}`)
+    const classList = computed(() => `notification-list--${notificationListPosition.value} ${props.zIndex}`)
 
     const notificationListItemLayout = computed(
       () => notificationListPosition.value.includes(NotificationListItemLayout.Left)

From 1bad66d9bcc1700a958ee1efccc1de9a5e668323 Mon Sep 17 00:00:00 2001
From: Joshua O <i.sona@outlook.com>
Date: Wed, 20 Jul 2022 13:16:18 +0200
Subject: [PATCH 2/3] string interpolation fix

---
 src/components/VueNotificationList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VueNotificationList.vue b/src/components/VueNotificationList.vue
index 3734e46..c9e55b5 100644
--- a/src/components/VueNotificationList.vue
+++ b/src/components/VueNotificationList.vue
@@ -63,7 +63,7 @@ export default defineComponent({
         : NotificationListPosition.BottomRight,
     )
 
-    const classList = computed(() => `notification-list--${notificationListPosition.value} ${props.zIndex}`)
+    const classList = computed(() => `notification-list--${notificationListPosition.value} z-${props.zIndex}`)
 
     const notificationListItemLayout = computed(
       () => notificationListPosition.value.includes(NotificationListItemLayout.Left)

From f3790f56bfb10ea0675b25caa596a423f92067e5 Mon Sep 17 00:00:00 2001
From: Joshua O <i.sona@outlook.com>
Date: Wed, 20 Jul 2022 13:40:58 +0200
Subject: [PATCH 3/3] increase z-index of internal list

---
 src/components/VueNotificationList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VueNotificationList.vue b/src/components/VueNotificationList.vue
index c9e55b5..8684ccf 100644
--- a/src/components/VueNotificationList.vue
+++ b/src/components/VueNotificationList.vue
@@ -85,7 +85,7 @@ export default defineComponent({
 
   .notification-list {
     position: fixed;
-    z-index: 100;
+    z-index: 10000;
     margin: 0;
     padding: 0;