evui 3.1.55 → 3.2.0

package/src/components/treeGrid/uses.js

@@ -418,11 +418,14 @@ export const checkEvent = (params) => {
    * @param {array} rowData - row 데이터
    */
   const onCheck = (event, rowData) => {
+    let store = stores.treeStore;
+    if (stores.searchStore.length > 0) {
+      store = stores.searchStore;
+    }
     const isSingleMode = () => checkInfo.useCheckbox.mode === 'single';
-    const checkedHeader = (store) => {
-      if (checkInfo.checkedRows.length === store.length) {
-        checkInfo.isHeaderChecked = true;
-      }
+    const checkedHeader = (checkStore) => {
+      const isCheck = checkStore.every(n => n.checked === true);
+      checkInfo.isHeaderChecked = isCheck;
     };
     const unCheckedHeader = () => {
       if (checkInfo.isHeaderChecked) {
@@ -455,7 +458,7 @@ export const checkEvent = (params) => {
     onSingleMode();
     if (rowData.checked) {
       addCheckedRow(rowData);
-      checkedHeader(stores.treeStore);
+      checkedHeader(store);
     } else {
       unCheckedHeader();
       removeCheckedRow(rowData);
@@ -472,10 +475,13 @@ export const checkEvent = (params) => {
    * @param {object} event - 이벤트 객체
    */
   const onCheckAll = (event) => {
-    const store = stores.treeStore;
     const status = checkInfo.isHeaderChecked;
     const checked = [];
     let item;
+    let store = stores.treeStore;
+    if (status && stores.searchStore.length > 0) {
+      store = stores.searchStore;
+    }
     for (let ix = 0; ix < store.length; ix++) {
       item = store[ix];
       if (status) {
@@ -484,6 +490,11 @@ export const checkEvent = (params) => {
       item.checked = status;
     }
     checkInfo.checkedRows = checked;
+    if (stores.searchStore.length > 0) {
+      store.forEach((node) => {
+        onCheckChildren(node);
+      });
+    }
     emit('update:checked', checked);
     emit('check-all', event, checked);
   };
@@ -637,7 +648,7 @@ export const treeEvent = (params) => {
 };
 
 export const filterEvent = (params) => {
-  const { stores, getConvertValue, calculatedColumn, updateVScroll } = params;
+  const { checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll } = params;
   const makeParentShow = (data) => {
     if (!data?.parent) {
       return;
@@ -654,26 +665,29 @@ export const filterEvent = (params) => {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      stores.treeStore.forEach((row) => {
+      let store = stores.treeStore;
+      store.forEach((row) => {
         row.show = false;
         row.isFilter = false;
       });
       if (searchWord) {
-        const filterStores = stores.treeStore.filter((row) => {
+        const filterStores = store.filter((row) => {
           let isSameWord = false;
           for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
             const column = stores.orderedColumns[ix] || {};
             let columnValue = row[column.field];
             let columnType = column.type;
             if (columnValue) {
-              if (!columnType) {
-                columnType = 'string';
-              }
-              columnValue = getConvertValue(columnType, columnValue).toString();
-              isSameWord = columnValue.toLowerCase()
-                .includes(searchWord.toString().toLowerCase());
-              if (isSameWord) {
-                break;
+              if (!column.hide && (column?.searchable === undefined || column?.searchable)) {
+                if (!columnType) {
+                  columnType = 'string';
+                }
+                columnValue = getConvertValue(columnType, columnValue).toString();
+                isSameWord = columnValue.toLowerCase()
+                  .includes(searchWord.toString().toLowerCase());
+                if (isSameWord) {
+                  break;
+                }
               }
             }
           }
@@ -685,11 +699,16 @@ export const filterEvent = (params) => {
           makeParentShow(row);
         });
       } else {
-        stores.treeStore.forEach((row) => {
+        store.forEach((row) => {
           row.show = true;
           row.isFilter = false;
         });
       }
+      if (stores.searchStore.length > 0) {
+        store = stores.searchStore;
+      }
+      const isCheck = store.every(n => n.checked === true);
+      checkInfo.isHeaderChecked = isCheck;
       calculatedColumn();
       updateVScroll();
     }, 500);

package/src/components/window/Window.vue

@@ -27,6 +27,7 @@
           }"
           @mousedown="startDrag"
           @mousemove="moveMouse"
+          @click="setFocus"
         >
           <div
             v-if="$slots.header || iconClass || title"
@@ -84,11 +85,17 @@
 </template>
 
 <script>
-import { useEscKeydownEvent, useModel, useMouseEvent } from './uses';
+import { useEscCloseAndFocusable, useModel, useMouseEvent } from './uses';
 
 export default {
   name: 'EvWindow',
   props: {
+    style: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
     visible: {
       type: Boolean,
       default: false,
@@ -153,6 +160,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    focusable: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'update:visible',
@@ -187,7 +198,7 @@ export default {
       removeUnit,
     });
 
-    useEscKeydownEvent({ closeWin, windowRef });
+    const { setFocus } = useEscCloseAndFocusable({ closeWin, windowRef });
 
     return {
       windowRef,
@@ -200,6 +211,8 @@ export default {
       startDrag,
       moveMouse,
       clickExpandBtn,
+
+      setFocus,
     };
   },
 };

package/src/components/window/uses.js

@@ -1,5 +1,12 @@
 import {
-  getCurrentInstance, ref, computed, reactive, watch, nextTick, onMounted,
+  getCurrentInstance,
+  ref,
+  computed,
+  reactive,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
 } from 'vue';
 
 // 세로 스크롤 너비
@@ -49,7 +56,7 @@ const useModel = () => {
     return result;
   };
 
-  const removeUnit = (input, direction) => {
+  const removeUnit = (input, direction = 'horizontal') => {
     if (typeof input === 'number') {
       return input;
     } else if (!input) {
@@ -219,9 +226,9 @@ const useMouseEvent = (param) => {
     const posY = +y - rect.top;
     const headerAreaStyleInfo = headerRef.value.style;
     const headerPaddingInfo = {
-      top: removeUnit(headerAreaStyleInfo.paddingTop),
-      left: removeUnit(headerAreaStyleInfo.paddingLeft),
-      right: removeUnit(headerAreaStyleInfo.paddingRight),
+      top: removeUnit(headerAreaStyleInfo.paddingTop, 'vertical'),
+      left: removeUnit(headerAreaStyleInfo.paddingLeft, 'horizontal'),
+      right: removeUnit(headerAreaStyleInfo.paddingRight, 'horizontal'),
     };
     const startPosX = headerPaddingInfo.left;
     const endPosX = rect.width - headerPaddingInfo.right;
@@ -272,17 +279,17 @@ const useMouseEvent = (param) => {
     if (hasOwnProperty.call(paramObj, 'minWidth')) {
       tMinWidth = paramObj.minWidth;
     } else {
-      tMinWidth = removeUnit(props.minWidth, 'horizontal');
+      tMinWidth = props.minWidth;
     }
 
     if (hasOwnProperty.call(paramObj, 'minHeight')) {
       tMinHeight = paramObj.minHeight;
     } else {
-      tMinHeight = removeUnit(props.minHeight, 'vertical');
+      tMinHeight = props.minHeight;
     }
 
-    width = Math.max(width, tMinWidth);
-    height = Math.max(height, tMinHeight);
+    width = removeUnit(width, 'horizontal') > removeUnit(tMinWidth, 'horizontal') ? width : tMinWidth;
+    height = removeUnit(height, 'vertical') > removeUnit(tMinHeight, 'vertical') ? height : tMinHeight;
 
     dragStyle.top = numberToUnit(top);
     dragStyle.left = numberToUnit(left);
@@ -426,6 +433,8 @@ const useMouseEvent = (param) => {
       setDragStyle({
         top: `${tempTop}px`,
         left: `${tempLeft}px`,
+        width: props.width,
+        height: props.height,
       });
     } else if (props.resizable && clickedInfo.pressedSpot === 'border') {
       resizeWindow(e);
@@ -601,20 +610,59 @@ const activeWindows = (() => {
       if (inactiveWindow === null || inactiveWindow === undefined) return;
       windows = windows.filter(activeWindow => activeWindow.sequence !== inactiveWindow.sequence);
     },
+
     get windows() {
       return windows.slice();
     },
     getWindowBySequence(targetSequence) {
       return windows.find(activeWindow => activeWindow.sequence === targetSequence);
     },
+
     isEmpty() {
       return windows.length <= 0;
     },
     isFirstWindowOpen() {
-      return windows.length === 1;
+      return sequence === 1;
+    },
+  };
+})();
+
+const zIndexService = (() => {
+  const LOWER = 700;
+  const UPPER = 750;
+
+  const INCREMENT = 1;
+  const PADDING = INCREMENT * 2;
+
+  const UPPER_LIMIT = UPPER - PADDING;
+
+  let current = LOWER;
+
+  return {
+    getNext() {
+      if (current >= UPPER_LIMIT) {
+        return UPPER_LIMIT;
+      }
+      current += INCREMENT;
+      return current;
     },
-    isLastWindowClose() {
-      return windows.length === 0;
+    getNextOverLimit() {
+      return UPPER_LIMIT + INCREMENT;
+    },
+    getPrevFrom(index) {
+      const prev = current - (index * INCREMENT);
+
+      if (prev <= LOWER) return LOWER;
+      return prev;
+    },
+    isUpperLimitClose() {
+      return current >= UPPER_LIMIT;
+    },
+    resetToLower() {
+      current = LOWER;
+    },
+    getAllocableCount() {
+      return Math.floor((UPPER_LIMIT - LOWER) / INCREMENT);
     },
   };
 })();
@@ -627,18 +675,39 @@ const getZIndexFromElement = (element) => {
   return parseInt(zIndex);
 };
 
-const useEscKeydownEvent = ({ closeWin, windowRef }) => {
+const getActiveWindowsOrderByZIndexAsc = () => {
+  // zIndex 클수록, 최근에 열린 것일수록(sequence 클수록) 뒤에 위치
+  const compareByZIndex = (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 activeWindowsSorted = Array.prototype.map.call(activeWindows.windows, activeWindow => ({
+    ...activeWindow,
+    zIndex: getZIndexFromElement(activeWindow.elem),
+  })).sort(compareByZIndex);
+
+  return activeWindowsSorted;
+};
+
+const useEscCloseAndFocusable = ({ closeWin, windowRef }) => {
   const { props } = getCurrentInstance();
 
   let sequence = null;
+  let timer = null;
 
+  // escClose 관련 로직 시작
   const addActiveWindow = () => {
-     sequence = activeWindows.add({
+    const windowSequence = activeWindows.add({
       sequence,
       closeWin,
       elem: windowRef.value,
       escClose: props.escClose,
     });
+    return windowSequence;
   };
 
   const removeInactiveWindow = (inactiveWindow) => {
@@ -651,68 +720,180 @@ const useEscKeydownEvent = ({ closeWin, windowRef }) => {
     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 activeWindowSorted = Array.prototype.map.call(activeWindows.windows, activeWindow => ({
-      ...activeWindow,
-      zIndex: getZIndexFromElement(activeWindow.elem),
-    })).sort(compare);
-
-    const topActiveWindow = activeWindowSorted[0];
+    const activeWindowsSorted = getActiveWindowsOrderByZIndexAsc();
+    const topActiveWindow = activeWindowsSorted[activeWindowsSorted.length - 1];
 
     // 예시 상황) Nested에서 외부 Window의 escClose는 true이고, 내부 Window의 escClose는 false인 경우,
     // esc 눌러도 외부 Window는 닫히지 않고, 가장 상단에 있는 내부 Window가 수동으로 닫힌 후에 닫히도록 하기 위해
-    if (topActiveWindow.escClose === false) return;
+    if (!topActiveWindow.escClose) return;
 
     topActiveWindow.closeWin();
   };
 
-  const addKeydownEvtHandler = () => {
+  const setWindowActive = () => {
+    sequence = addActiveWindow();
+    // DOM의 dataset에 sequence 값 추가해 식별 가능하도록
+    windowRef.value.dataset.sequence = sequence;
+
     if (activeWindows.isFirstWindowOpen()) {
       document.addEventListener('keydown', keydownEsc);
     }
   };
 
-  const removeKeydownEvtHandler = () => {
-    if (activeWindows.isLastWindowClose()) {
-      document.removeEventListener('keydown', keydownEsc);
+  const setWindowInactive = () => {
+    const inactiveWindow = activeWindows.getWindowBySequence(sequence);
+    removeInactiveWindow(inactiveWindow);
+  };
+  // escClose 관련 로직 끝
+
+
+  // focusable 관련 로직 시작
+  const setZIndexToWindow = ({ elem, zIndex }) => {
+    // 모달인 경우에는 dim layer도 같이 z-index 높여준다.
+    if (props.isModal) {
+      const dimLayerElem = elem.parentElement.getElementsByClassName('ev-window-dim-layer')[0];
+      dimLayerElem.style.zIndex = zIndex;
+    }
+
+    elem.style.zIndex = zIndex;
+  };
+
+  const assignZIndex = () => {
+    // Window가 1번째로 열릴 때, z-index 값을 시작값으로 설정
+    if (activeWindows.windows.length === 1) {
+      zIndexService.resetToLower();
+    }
+
+    const nextZIndex = zIndexService.getNext();
+    setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+  };
+
+  const sameAsCurrent = windowData => String(windowData.sequence)
+    === windowRef.value.dataset.sequence;
+
+  // 할당하려는 z-index 값이 상한일 때
+  const reassignZIndex = () => {
+    const activeWindowsZIndexAsc = getActiveWindowsOrderByZIndexAsc();
+
+    const overCountLimit = activeWindows.windows.length > zIndexService.getAllocableCount();
+    // 할당 가능한 z-index 수보다 많은 Window를 띄웠을 때
+    if (overCountLimit) {
+      const activeWindowsZIndexDesc = activeWindowsZIndexAsc.reverse();
+
+      // z-index 기준 내림차순으로 정렬한 Window의 z-index 값을 UPPER에서 LOWER로 1씩 감소한 값 할당
+      let interval = 0;
+      activeWindowsZIndexDesc.forEach((activeWindow) => {
+        if (sameAsCurrent(activeWindow)) return;
+
+        const prevZIndex = zIndexService.getPrevFrom(interval++);
+        setZIndexToWindow({ elem: activeWindow.elem, zIndex: prevZIndex });
+      });
+
+      // 가장 상단으로 와야하는 현재 Window의 z-index 값을 최대로
+      const nextZIndex = zIndexService.getNextOverLimit();
+      setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+    } else {
+      zIndexService.resetToLower();
+
+      activeWindowsZIndexAsc.forEach((activeWindow) => {
+        if (sameAsCurrent(activeWindow)) return;
+
+        const nextZIndex = zIndexService.getNext();
+        setZIndexToWindow({ elem: activeWindow.elem, zIndex: nextZIndex });
+      });
+
+      // 가장 상단으로 와야하는 현재 Window의 z-index 값을 최대로
+      const nextZIndex = zIndexService.getNext();
+      setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+    }
+  };
+
+  const checkLimitAndSetZIndex = () => {
+    if (zIndexService.isUpperLimitClose()) {
+      reassignZIndex();
+    } else {
+      assignZIndex();
     }
   };
 
+  const setFocus = () => {
+    // X 버튼을 클릭했을 때
+    if (!windowRef.value) return;
+
+    // focusable prop이 false인 경우에는 z-index를 높이지 않는다.
+    if (!props.focusable) return;
+
+    const activeWindowsSorted = getActiveWindowsOrderByZIndexAsc();
+    const topActiveWindow = activeWindowsSorted[activeWindowsSorted.length - 1];
+
+    const isAlreadyTop = sameAsCurrent(topActiveWindow);
+    if (isAlreadyTop) return;
+
+    checkLimitAndSetZIndex();
+  };
+  // focusable 관련 로직 끝
+
+
+  /*
+    실행 시점(=Window 열림):
+      visible 초기값이 true일 때 watch를 실행시키지 않아 onMounted hook 사용
+  */
   onMounted(() => {
-    // visible 초기값이 true
     if (props.visible) {
-      addActiveWindow();
-      addKeydownEvtHandler();
+      setWindowActive();
+      timer = setTimeout(checkLimitAndSetZIndex, 0);
+    }
+  });
+
+  /*
+    실행 시점(=Window 닫힘):
+      예시. 배열을 통해 Window 여러 개 띄울 때, 배열 원소 삭제로 인해 해당 Window가 닫히는 경우
+      unmount가 발생해서 watch를 실행히시키지 않아 onBeforeUnmount hook 사용
+  */
+  onBeforeUnmount(() => {
+    if (props.visible) {
+      setWindowInactive();
+      clearTimeout(timer);
     }
   });
 
+  /*
+    실행 시점:
+      1. visible 값이 false -> true로 변했을 때(=Window 열림)
+      2. visible 값이 true -> false로 변했을 때(=Window 닫힙)
+  */
   watch(
     () => props.visible,
-    (newVal) => {
+    (visible) => {
       nextTick(() => {
-        if (newVal) {
-          addActiveWindow();
-          addKeydownEvtHandler();
+        if (visible) {
+          // visible 값이 false -> true로 변경되었을 때
+          setWindowActive();
+          timer = setTimeout(checkLimitAndSetZIndex, 0);
         } else {
-          const inactiveWindow = activeWindows.getWindowBySequence(sequence);
-          removeInactiveWindow(inactiveWindow);
-          removeKeydownEvtHandler();
+          // visible 값이 true -> false로 변경되었을 때
+          setWindowInactive();
+          clearTimeout(timer);
         }
       });
+  });
+
+  watch(
+    () => props.escClose,
+    (escClose) => {
+      if (!props.visible) return;
+      const currentWindow = activeWindows.getWindowBySequence(sequence);
+      if (currentWindow) currentWindow.escClose = escClose;
     },
   );
+
+  return {
+    setFocus,
+  };
 };
 
 export {
   useModel,
   useMouseEvent,
-  useEscKeydownEvent,
+  useEscCloseAndFocusable,
 };