[#994] [3.0] EVUI > Window ESC 누르면 닫히게 개선

###############
1. Window.vue에 default값 false인 escClose prop 추가
2. uses.js에 esc keydown 이벤트 관리하는 useEscKeydownEvent 추가

src/components/window/Window.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { useModel, useMouseEvent } from './uses';
+import { useEscKeydownEvent, useModel, useMouseEvent } from './uses';
 
 export default {
   name: 'EvWindow',
@@ -149,6 +149,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    escClose: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'update:visible',
@@ -159,6 +163,7 @@ export default {
   ],
   setup() {
     const {
+      inputRef,
       windowRef,
       headerRef,
       isFullExpandWindow,
@@ -182,7 +187,10 @@ export default {
       removeUnit,
     });
 
+    useEscKeydownEvent({ closeWin, windowRef });
+
     return {
+      inputRef,
       windowRef,
       headerRef,
       baseStyle,

src/components/window/uses.js

@@ -1,5 +1,5 @@
 import {
-  getCurrentInstance, ref, computed, reactive, watch, nextTick,
+  getCurrentInstance, ref, computed, reactive, watch, nextTick, onMounted,
 } from 'vue';
 
 // 세로 스크롤 너비
@@ -679,7 +679,137 @@ const useMouseEvent = (param) => {
   };
 };
 
+const openWindows = (() => {
+  let windows = [];
+
+  return {
+    add(openWindow) {
+      if (openWindow == null) return;
+      windows.push(openWindow);
+    },
+    remove(closeWindow) {
+      if (closeWindow == null) return;
+      windows = windows.filter(openWindow => openWindow.sequence !== closeWindow.sequence);
+    },
+    get windows() {
+      return windows.slice();
+    },
+    getWindowBySequence(sequence) {
+      return windows.find(openWindow => openWindow.sequence === sequence);
+    },
+    isEmpty() {
+      return windows.length <= 0;
+    },
+    isFirstWindowOpen() {
+      return windows.length === 1;
+    },
+    isLastWindowClose() {
+      return windows.length === 0;
+    },
+  };
+})();
+
+const getNextSequence = (() => {
+  let sequence = 0;
+  return () => sequence++;
+})();
+
+const getZIndexFromElement = (element) => {
+  const zIndex = window.getComputedStyle(element).getPropertyValue('z-index');
+
+  if (Number.isNaN(zIndex)) return 700; // window 초기 z-index 값
+
+  return parseInt(zIndex);
+};
+
+const useEscKeydownEvent = ({ closeWin, windowRef }) => {
+  const { props } = getCurrentInstance();
+
+  let sequence = null;
+
+  const addOpenWindow = () => {
+    sequence = getNextSequence();
+
+    openWindows.add({
+      sequence,
+      closeWin,
+      elem: windowRef.value,
+      escClose: props.escClose,
+    });
+  };
+
+  const removeCloseWindow = (closeWindow) => {
+    openWindows.remove(closeWindow);
+  };
+
+  const keydownEsc = (event) => {
+    if (openWindows.isEmpty()) return;
+
+    const { code } = event;
+    if (code !== 'Escape') return;
+
+    // zIndex 클수록, 최근에 열린 것일수록(sequence 클수록) 앞에 위치
+    const compare = (window1, window2) => {
+      if (window1.zIndex > window2.zIndex) return -1;
+      if (window1.zIndex < window2.zIndex) return 1;
+
+      if (window1.sequence > window2.sequence) return -1;
+      return 1;
+    };
+
+    const openWindowSorted = Array.prototype.map.call(openWindows.windows, openWindow => ({
+      ...openWindow,
+      zIndex: getZIndexFromElement(openWindow.elem),
+    })).sort(compare);
+
+    const topOpenWindow = openWindowSorted[0];
+
+    // 예시 상황) Nested에서 외부 Window의 escClose는 true이고, 내부 Window의 escClose는 false인 경우,
+    // esc 눌러도 외부 Window는 닫히지 않고, 내부 Window 수동으로 닫힌 후에 닫히도록 하기 위해
+    if (topOpenWindow.escClose === false) return;
+
+    topOpenWindow.closeWin();
+  };
+
+  const addKeydownEvtHandler = () => {
+    if (openWindows.isFirstWindowOpen()) {
+      document.addEventListener('keydown', keydownEsc);
+    }
+  };
+
+  const removeKeydownEvtHandler = () => {
+    if (openWindows.isLastWindowClose()) {
+      document.removeEventListener('keydown', keydownEsc);
+    }
+  };
+
+  onMounted(() => {
+    // visible 초기값이 true
+    if (props.visible === true) {
+      addOpenWindow();
+      addKeydownEvtHandler();
+    }
+  });
+
+  watch(
+    () => props.visible,
+    (newVal) => {
+      nextTick(() => {
+        if (newVal === true) {
+          addOpenWindow();
+          addKeydownEvtHandler();
+        } else {
+          const closeWindow = openWindows.getWindowBySequence(sequence);
+          removeCloseWindow(closeWindow);
+          removeKeydownEvtHandler();
+        }
+      });
+    },
+  );
+};
+
 export {
   useModel,
   useMouseEvent,
+  useEscKeydownEvent,
 };