fix(VsModal): move esc eventListener from composable to store

packages/vlossom/src/composables/esc-close-composable.ts

@@ -1,26 +1,10 @@
-import { Ref, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Ref, ref, watch } from 'vue';
 import { store } from '@/stores';
 import { MODAL_DURATION } from '@/declaration';
 
 export function useEscClose(id: string, closeOnEsc: Ref<boolean>, isOpen: Ref<boolean>, onEscClose: () => void) {
     const closing = ref(false);
 
-    function onPressEsc(event: KeyboardEvent) {
-        if (!closeOnEsc.value || closing.value) {
-            return;
-        }
-
-        if (event.key === 'Escape' && store.escStack.getTopId() === id) {
-            closing.value = true;
-            onEscClose();
-
-            setTimeout(() => {
-                store.escStack.pop();
-                closing.value = false;
-            }, MODAL_DURATION);
-        }
-    }
-
     watch(
         isOpen,
         (open) => {
@@ -29,20 +13,16 @@ export function useEscClose(id: string, closeOnEsc: Ref<boolean>, isOpen: Ref<bo
             }
 
             if (open) {
-                store.escStack.push(id);
+                store.escStack.push(id, onEscClose);
+            } else {
+                closing.value = true;
+
+                setTimeout(() => {
+                    closing.value = false;
+                    store.escStack.remove(id);
+                }, MODAL_DURATION);
             }
         },
         { immediate: true },
     );
-
-    onMounted(() => {
-        document.addEventListener('keydown', onPressEsc);
-    });
-
-    onBeforeUnmount(() => {
-        if (closeOnEsc.value) {
-            store.escStack.remove(id);
-        }
-        document.removeEventListener('keydown', onPressEsc);
-    });
 }

packages/vlossom/src/stores/esc-stack-store.ts

@@ -1,22 +1,37 @@
 export class EscStackStore {
-    private idStack: string[] = [];
+    private escStack: [string, () => void][] = [];
 
-    push(id: string) {
-        this.idStack.push(id);
+    constructor() {
+        document.addEventListener('keydown', (event: KeyboardEvent) => {
+            if (this.escStack.length === 0) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                this.pop();
+            }
+        });
     }
 
-    pop() {
-        return this.idStack.pop();
+    push(id: string, onEscClose: () => void) {
+        this.escStack.push([id, onEscClose]);
     }
 
-    remove(id: string) {
-        const index = this.idStack.indexOf(id);
-        if (index >= 0) {
-            this.idStack.splice(index, 1);
+    pop() {
+        const pop = this.escStack.pop();
+        if (!pop) {
+            return;
         }
+        const [, onEscClose] = pop;
+        onEscClose();
     }
 
-    getTopId() {
-        return this.idStack[this.idStack.length - 1];
+    remove(id: string) {
+        const index = this.escStack.findIndex(([stackId]) => stackId === id);
+        if (index === -1) {
+            return;
+        }
+        const [pop] = this.escStack.splice(index, 1);
+        const [, onEscClose] = pop;
+        onEscClose();
     }
 }

packages/vlossom/src/styles/variables.scss

@@ -18,15 +18,15 @@ $variables: (
     width-xs: 100%,
 
     // modal
-    modal-height-xs: 20%,
-    modal-height-sm: 30%,
-    modal-height-md: 50%,
-    modal-height-lg: 66%,
-    modal-height-xl: 82%,
+    modal-height-xs: 25%,
+    modal-height-sm: 36%,
+    modal-height-md: 60%,
+    modal-height-lg: 75%,
+    modal-height-xl: 90%,
     modal-width-xs: 20%,
     modal-width-sm: 30%,
-    modal-width-md: 45%,
-    modal-width-lg: 70%,
+    modal-width-md: 48%,
+    modal-width-lg: 75%,
     modal-width-xl: 90%,
 
     // z-index