fix: fixed closing usign esc when has many modal

Author: burhanahmeed

src/App.vue

@@ -25,6 +25,22 @@
     </modal-vue>
     <button @click="open" class="button">Click Here</button>
 
+    <modal-vue
+      name="modal2"
+      :headerOptions="{
+        title: 'Delete?'
+      }"
+      :footerOptions="{
+        btn1OnClick: () => hell(),
+        justify: 'flex-start',
+      }"
+      :darkMode="false"
+      @on-close="handleClose2"
+    >
+      <div>content</div>
+    </modal-vue>
+    <button @click="open2" class="button">Click Here 2</button>
+
     <p v-for="i in 10" :key="i">scroll up</p>
   </div>
 </template>
@@ -53,6 +69,14 @@ export default {
       this.isVisible = true;
       this.$vm2.open("modal1");
     },
+    handleClose2() {
+      this.isVisible = false;
+      this.$vm2.close("modal2");
+    },
+    open2() {
+      this.isVisible = true;
+      this.$vm2.open("modal2");
+    },
   },
 };
 </script>

src/components/Container.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     class="vm2_wrapper vm2__animate-opacity"
-    id="vm2__cover_wrapper"
+    :id="`vm2__cover_wrapper_${name}`"
     v-show="visible"
     :class="{ 'vm2__animate-show': blockVisible, 'vm2--dark': darkMode }"
     :style="{ backgroundColor: wrapperBg }"
   >
     <div class="vm2_modal-dialog vm2_settings">
       <div
         class="vm2_modal-content"
-        id="vm2_box"
+        :id="`vm2_box_${name}`"
         :style="{ backgroundColor: modalBgColor, color: fontColor }"
       >
         <withHeader v-if="!noHeader" @on-icon-click="handleClose" :props="{...headerOptions}">
@@ -147,24 +147,24 @@ export default {
   mounted() {
     // this.blockVisible = !this.visible;
     const vm = this;
-    document.getElementById("vm2__cover_wrapper").onclick = function (e) {
-      if (!document.getElementById("vm2_box").contains(e.target)) {
+    document.getElementById(`vm2__cover_wrapper_${vm.name}`).onclick = function (e) {
+      if (!document.getElementById(`vm2_box_${vm.name}`).contains(e.target)) {
         // alert("You clicked outside");
-        if (document.getElementById("vm2__cover_wrapper").contains(e.target)) {
+        if (document.getElementById(`vm2__cover_wrapper_${vm.name}`).contains(e.target)) {
           // alert("Here");
           vm.handleClose();
         }
       }
     };
-    document.onkeyup = function (e) {
+    document.addEventListener('keyup', e => {
       e = e || window.event;
       if (e.keyCode == 27) {
-        // alert(`Esc key pr/zessed. ${vm.visible}`);
+        // alert(`Esc key pr/zessed. ${vm.visible} ${vm.name}`);
         if (vm.visible == true) {
           vm.handleClose();
         }
-      }
-    };
+      }  
+    })
   },
 };
 </script>