evui 3.1.50 → 3.1.54

package/src/components/treeGrid/TreeGrid.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, nextTick } from 'vue';
+import { reactive, toRefs, computed, watch } from 'vue';
 import treeGridNode from './TreeGridNode';
 import Toolbar from './treeGrid.toolbar';
 import {
@@ -227,9 +227,8 @@ export default {
     'update:checked': null,
     'check-row': null,
     'check-all': null,
-    'update-tree-data': null,
   },
-  setup(props, { emit }) {
+  setup(props) {
     const {
       isRenderer,
       getComponentName,
@@ -246,7 +245,8 @@ export default {
     const stores = reactive({
       treeStore: [],
       viewStore: [],
-      treeRows: computed(() => JSON.parse(JSON.stringify(props.rows))),
+      filterStore: [],
+      treeRows: props.rows,
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       orderedColumns: computed(() =>
         props.columns.map((column, index) => ({ index, ...column }))),
@@ -324,7 +324,7 @@ export default {
     } = contextMenuEvent({ contextInfo, stores, selectInfo });
 
     const {
-      setTreeStore,
+      setTreeNodeStore,
       handleExpand,
     } = treeEvent({ stores, onResize });
 
@@ -359,17 +359,16 @@ export default {
         checkInfo.isHeaderChecked = false;
       },
     );
+    stores.treeStore = setTreeNodeStore();
+
     watch(
       () => props.rows,
-      () => {
-        nextTick(() => {
-          stores.treeStore = [];
-          calculatedColumn();
-          setTreeStore(stores.treeRows, 0, true);
-          updateVScroll();
-          emit('update-tree-data', stores.treeRows);
-        });
-      }, { deep: true, immediate: true },
+      (newData) => {
+        stores.treeRows = newData;
+        stores.treeStore = setTreeNodeStore();
+        onResize();
+        updateVScroll();
+      }, { deep: true },
     );
     watch(
       () => [props.width, props.height, resizeInfo.adjust, props.option.columnWidth],

package/src/components/treeGrid/uses.js

@@ -550,35 +550,73 @@ export const contextMenuEvent = (params) => {
 
 export const treeEvent = (params) => {
   const { stores, onResize } = params;
-  // tree data init
-  let index = 0;
-  const filterObj = (keys, obj) => {
-    const newObj = {};
-    Object.keys(obj).forEach((key) => {
-      if (!keys.includes(key)) {
-        newObj[key] = obj[key];
-      }
-    });
-    return newObj;
-  };
-  const setTreeStore = (rows, count, isShow, parent) => {
-    rows.forEach((nodeObj) => {
-      const node = nodeObj;
-      const dataObj = filterObj('children', nodeObj);
-      node.data = dataObj;
-      node.level = count;
-      node.expand = node.expand === undefined ? true : node.expand;
-      node.show = isShow;
-      node.checked = false;
-      node.index = index++;
-      node.parent = parent;
-      node.isFilter = false;
-      stores.treeStore.push(node);
-      if (node.children && node.children.length > 0) {
-        node.hasChild = true;
-        setTreeStore(node.children, node.level + 1, node.show && node.expand, node);
+  const setTreeNodeStore = () => {
+    let nodeIndex = 0;
+    const nodeList = [];
+
+    function getDataObj(nodeObj) {
+      const newObj = {};
+      Object.keys(nodeObj).forEach((key) => {
+        if (key !== 'children') {
+          newObj[key] = nodeObj[key];
+        }
+      });
+      return newObj;
+    }
+
+    function setNodeData(nodeInfo) {
+      const { node, level, isShow, parent } = nodeInfo;
+      if (node !== null && typeof node === 'object') {
+        node.index = nodeIndex++;
+        node.level = level;
+
+        if (!Object.hasOwnProperty.call(node, 'checked')) {
+          node.checked = false;
+        }
+
+        if (!Object.hasOwnProperty.call(node, 'show')) {
+          node.show = isShow;
+        }
+
+        if (!Object.hasOwnProperty.call(node, 'expand')) {
+          node.expand = true;
+        }
+
+        if (!Object.hasOwnProperty.call(node, 'isFilter')) {
+          node.isFilter = false;
+        }
+
+        if (!Object.hasOwnProperty.call(node, 'data')) {
+          node.data = getDataObj(node);
+        }
+
+        nodeList.push(node);
+
+        if (typeof parent !== 'undefined') {
+          node.parent = parent;
+        }
+        if (node.children) {
+          node.hasChild = true;
+          node.children.forEach(child =>
+            setNodeData({
+              node: child,
+              level: level + 1,
+              isShow: node.show && node.expand,
+              parent: node,
+            }),
+          );
+        }
       }
+    }
+    stores.treeRows.forEach((root) => {
+      setNodeData({
+        node: root,
+        level: 0,
+        isShow: true,
+        parent: undefined,
+      });
     });
+    return nodeList;
   };
   const setExpandNode = (children, isShow, isFilter) => {
     children.forEach((nodeObj) => {
@@ -595,7 +633,7 @@ export const treeEvent = (params) => {
     setExpandNode(data.children, data.expand, data.isFilter);
     onResize();
   };
-  return { setTreeStore, handleExpand };
+  return { setTreeNodeStore, handleExpand };
 };
 
 export const filterEvent = (params) => {

package/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',
@@ -156,6 +160,7 @@ export default {
     'mousedown-mouseup',
     'mousedown-mousemove',
     'resize',
+    'expand',
   ],
   setup() {
     const {
@@ -182,6 +187,8 @@ export default {
       removeUnit,
     });
 
+    useEscKeydownEvent({ closeWin, windowRef });
+
     return {
       windowRef,
       headerRef,

package/src/components/window/uses.js

@@ -1,23 +1,11 @@
 import {
-  getCurrentInstance, ref, computed, reactive, watch, nextTick,
+  getCurrentInstance, ref, computed, reactive, watch, nextTick, onMounted,
 } from 'vue';
 
 // 세로 스크롤 너비
 const getVScrollWidth = () => window.innerWidth - document.documentElement.clientWidth;
 // 가로 스크롤 너비
-const getHScrollWidth = () => window.innerHeight - document.documentElement.clientHeight;
-// 전체 문서 너비
-const getDocumentWidth = () => Math.max(
-  document.body.scrollWidth, document.documentElement.scrollWidth,
-  document.body.offsetWidth, document.documentElement.offsetWidth,
-  document.body.clientWidth, document.documentElement.clientWidth,
-);
-// 전체 문서 높이
-const getDocumentHeight = () => Math.max(
-  document.body.scrollHeight, document.documentElement.scrollHeight,
-  document.body.offsetHeight, document.documentElement.offsetHeight,
-  document.body.clientHeight, document.documentElement.clientHeight,
-);
+// const getHScrollWidth = () => window.innerHeight - document.documentElement.clientHeight;
 
 const useModel = () => {
   const { props, emit } = getCurrentInstance();
@@ -89,6 +77,8 @@ const useModel = () => {
   }));
 
   const setBasePosition = () => {
+    basePosition.position = 'fixed';
+
     if (props.fullscreen) {
       basePosition.width = '100%';
       basePosition.height = '100%';
@@ -97,22 +87,32 @@ const useModel = () => {
       return;
     }
 
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      || document.body.scrollTop || 0;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-      || document.body.scrollLeft || 0;
+    const convertedWidth = removeUnit(props.width, 'horizontal');
+    const convertedMinWidth = removeUnit(props.minWidth, 'horizontal');
+    if (convertedWidth < convertedMinWidth) {
+      console.warn('Since width is less than min-width, it is replaced by min-width.');
+      basePosition.width = numberToUnit(props.minWidth);
+    } else {
+      basePosition.width = numberToUnit(props.width);
+    }
 
-    basePosition.width = numberToUnit(props.width);
-    basePosition.height = numberToUnit(props.height);
-    basePosition.position = 'absolute';
-    basePosition.top = `calc(((100vh - ${basePosition.height}) / 2) + ${scrollTop}px)`;
-    basePosition.left = `calc(((100vw - ${basePosition.width}) / 2) + ${scrollLeft}px)`;
+    const convertedHeight = removeUnit(props.height, 'vertical');
+    const convertedMinHeight = removeUnit(props.minHeight, 'vertical');
+    if (convertedHeight < convertedMinHeight) {
+      console.warn('Since height is less than min-height, it is replaced by min-height.');
+      basePosition.height = numberToUnit(props.minHeight);
+    } else {
+      basePosition.height = numberToUnit(props.height);
+    }
+
+    basePosition.top = `calc((100% - ${basePosition.height}) / 2)`;
+    basePosition.left = `calc((100% - ${basePosition.width}) / 2)`;
 
     if (removeUnit(props.width, 'horizontal') > window.innerWidth) {
       basePosition.left = 0;
     }
     if (removeUnit(props.height, 'vertical') > window.innerHeight) {
-      basePosition.top = `${scrollTop}px`;
+      basePosition.top = 0;
     }
   };
 
@@ -125,61 +125,32 @@ const useModel = () => {
   };
 
   const changeBodyCls = (isVisible) => {
-    const windowCnt = root?.getElementsByClassName('ev-window-wrapper')?.length;
     const hideScrollWindowCnt = root?.getElementsByClassName('scroll-lock')?.length;
-    const allowScrollWindowCnt = root?.getElementsByClassName('scroll-allow')?.length;
     const bodyElem = document.body;
 
-    if (isVisible) {
+    if (isVisible) { // window open
       if (props.hideScroll) {
-        // props.hideScroll === true 시,
-        // body 우측 padding 추가 & overflow hidden class 추가
+        // hideScroll 시, body 우측 padding 추가 & overflow hidden class 추가
         if (!hideScrollWindowCnt) {
           const scrollWidth = getVScrollWidth();
           bodyElem.style.paddingRight = `${scrollWidth}px`;
         }
         bodyElem.classList.add('ev-window-scroll-lock');
-      } else if (!props.hideScroll && !props.isModal) {
-        // !props.hideScroll && !props.isModal 시,
-        // body에 position: relative 추가, 스크롤 여부에 따라 overflow-x or y hidden 처리
-        const vScrollWidth = getVScrollWidth();
-        const hScrollWidth = getHScrollWidth();
-        const bodyClassName = ['ev-window-scroll-allow'];
-        if (vScrollWidth > 0 && hScrollWidth === 0) {
-          // 세로 스크롤만 있을 경우 - 가로 스크롤 막음
-          bodyClassName.push('horizontal-hide');
-        } else if (vScrollWidth === 0 && hScrollWidth > 0) {
-          // 가로 스크롤만 있을 경우 - 세로 스크롤 막음
-          bodyClassName.push('vertical-hide');
-        } else if (vScrollWidth === 0 && hScrollWidth === 0) {
-          // 둘다 없을 경우 - 가로&세로 스크롤 막음
-          bodyClassName.push('hide');
-        }
-
-        bodyElem.classList.add(...bodyClassName);
-      }
-      bodyElem.classList.add('ev-window-open');
-    } else {
-      if (hideScrollWindowCnt === 1) {
-        bodyElem.style.removeProperty('padding-right');
-        bodyElem.classList.remove('ev-window-scroll-lock');
-      }
-      if (allowScrollWindowCnt === 1) {
-        bodyElem.classList.remove('ev-window-scroll-allow', 'horizontal-hide', 'vertical-hide', 'hide');
-      }
-      if (windowCnt === 1) {
-        bodyElem.classList.remove('ev-window-open');
       }
+    } else if (props.hideScroll && hideScrollWindowCnt === 1) { // window close
+      bodyElem.style.removeProperty('padding-right');
+      bodyElem.classList.remove('ev-window-scroll-lock');
     }
   };
+
   setBasePosition();
 
   watch(
     () => props.visible,
-    (newVal) => {
+    async (newVal) => {
       changeBodyCls(newVal);
       if (newVal) {
-        nextTick(() => {
+        await nextTick(() => {
           setBasePosition();
         });
       }
@@ -211,8 +182,6 @@ const useMouseEvent = (param) => {
   const draggingMinSize = 50;
   const grabbingBorderSize = 5;
   const dragStyle = reactive({});
-  const documentWidth = ref(0);
-  const documentHeight = ref(0);
   const clickedInfo = reactive({
     state: '',
     pressedSpot: '',
@@ -417,6 +386,7 @@ const useMouseEvent = (param) => {
   // 브라우저 상하 위치 제약
   const getValidTop = (windowHeight, top) => {
     let tempTop = top;
+
     if (tempTop < 0) { // 상
       tempTop = 0;
     } else if (tempTop > windowHeight - draggingMinSize) { // 하
@@ -435,28 +405,6 @@ const useMouseEvent = (param) => {
     return tempLeft;
   };
 
-  // mousedown > wheel: 마우스 휠
-  const wheeling = (e) => {
-    const scrollTop = document.documentElement.scrollTop;
-    if (e.deltaY < 0 && scrollTop <= 0) {
-      return;
-    }
-
-    let tempTop = removeUnit(dragStyle.top) || clickedInfo.top;
-    tempTop += e.deltaY;
-
-    const windowHeight = props.hideScroll || props.isModal
-      ? document.documentElement.clientHeight : documentHeight.value;
-    tempTop = getValidTop(windowHeight, tempTop);
-
-    clickedInfo.top = tempTop;
-
-    setDragStyle({
-      top: `${tempTop}px`,
-      left: dragStyle.left,
-    });
-  };
-
   // mousedown > mousemove: 마우스 드래그
   const dragging = (e) => {
     e.preventDefault();
@@ -464,63 +412,14 @@ const useMouseEvent = (param) => {
 
     // window header를 통해 mouseMove 됐을 경우
     if (props.draggable && clickedInfo.pressedSpot === 'header') {
-      // 전체 문서 너비&높이 세팅 - mount 때와 드래그 시 수치 다르게 측정되기 때문에 드래그 초기 한번만 세팅
-      if (!documentWidth.value) {
-        documentWidth.value = getDocumentWidth();
-      }
-      if (!documentHeight.value) {
-        documentHeight.value = getDocumentHeight();
-      }
-
-      // 스크롤 있을 경우 전체 문서 기준, 없을 경우 clientWidth, Height 기준
-      const windowWidth = props.hideScroll || props.isModal
-        ? document.documentElement.clientWidth : documentWidth.value;
-      const windowHeight = props.hideScroll || props.isModal
-        ? document.documentElement.clientHeight : documentHeight.value;
-
+      const windowWidth = document.documentElement.clientWidth;
+      const windowHeight = document.documentElement.clientHeight;
       const diffTop = e.clientY - clickedInfo.clientY;
       const diffLeft = e.clientX - clickedInfo.clientX;
 
       let tempTop = clickedInfo.top + diffTop;
       let tempLeft = clickedInfo.left + diffLeft;
 
-      // 스크롤 허용 & 드래그 시 브라우저 상하단 위치에서 스크롤 이동
-      if (!props.hideScroll && !props.isModal) {
-        let [x, y] = [0, 0];
-        const moveScrollSize = 10;
-        const scrollTop = document.documentElement.scrollTop;
-
-        if (e.clientY < draggingMinSize && scrollTop > 0) { // 상
-          tempTop = draggedInfo.top || tempTop;
-          clickedInfo.clientY = e.clientY;
-          clickedInfo.top = tempTop;
-          y = -moveScrollSize;
-          tempTop -= moveScrollSize;
-        } else if (e.clientY > document.documentElement.clientHeight - draggingMinSize) { // 하
-          tempTop = draggedInfo.top || tempTop;
-          clickedInfo.clientY = e.clientY;
-          clickedInfo.top = tempTop;
-          y = moveScrollSize;
-          tempTop += moveScrollSize;
-        } else if (e.clientX < draggingMinSize) { // 좌
-          tempLeft = draggedInfo.left || tempLeft;
-          clickedInfo.clientX = e.clientX;
-          clickedInfo.left = tempLeft;
-          x = -moveScrollSize;
-          tempLeft -= moveScrollSize;
-        } else if (e.clientX > document.documentElement.clientWidth - draggingMinSize) { // 우
-          tempLeft = draggedInfo.left || tempLeft;
-          clickedInfo.clientX = e.clientX;
-          clickedInfo.left = tempLeft;
-          x = moveScrollSize;
-          tempLeft += moveScrollSize;
-        }
-
-        document.documentElement.scrollBy(x, y);
-        draggedInfo.top = tempTop;
-        draggedInfo.left = tempLeft;
-      }
-
       tempTop = getValidTop(windowHeight, tempTop);
       tempLeft = getValidLeft(windowWidth, tempLeft);
 
@@ -542,7 +441,6 @@ const useMouseEvent = (param) => {
 
     emit('mousedown-mouseup', e);
 
-    window.removeEventListener('wheel', wheeling);
     window.removeEventListener('mousemove', dragging);
     window.removeEventListener('mouseup', endDrag);
   };
@@ -594,7 +492,6 @@ const useMouseEvent = (param) => {
 
     emit('mousedown', { ...clickedInfo });
 
-    window.addEventListener('wheel', wheeling);
     window.addEventListener('mousemove', dragging);
     window.addEventListener('mouseup', endDrag);
   };
@@ -609,14 +506,7 @@ const useMouseEvent = (param) => {
   const clickExpandBtn = () => {
     isFullExpandWindow.value = !isFullExpandWindow.value;
     nextTick(() => {
-      if (!isFullExpandWindow.value) {
-        setDragStyle({
-          top: beforeExpandPosInfo.top,
-          left: beforeExpandPosInfo.left,
-          width: beforeExpandPosInfo.width,
-          height: beforeExpandPosInfo.height,
-        });
-      } else {
+      if (isFullExpandWindow.value) {
         beforeExpandPosInfo.top = windowRef.value.offsetTop;
         beforeExpandPosInfo.left = windowRef.value.offsetLeft;
         beforeExpandPosInfo.width = windowRef.value.offsetWidth;
@@ -628,7 +518,21 @@ const useMouseEvent = (param) => {
           width: document.body.clientWidth,
           height: document.body.clientHeight,
         });
+      } else {
+        setDragStyle({
+          top: beforeExpandPosInfo.top,
+          left: beforeExpandPosInfo.left,
+          width: beforeExpandPosInfo.width,
+          height: beforeExpandPosInfo.height,
+        });
       }
+
+      emit('expand', {
+        top: beforeExpandPosInfo.top,
+        left: beforeExpandPosInfo.left,
+        width: beforeExpandPosInfo.width,
+        height: beforeExpandPosInfo.height,
+      });
     });
   };
 
@@ -679,7 +583,136 @@ const useMouseEvent = (param) => {
   };
 };
 
+const activeWindows = (() => {
+  let windows = [];
+  let sequence = 0;
+
+  return {
+    add(activeWindow) {
+      if (activeWindow === null || activeWindow === undefined) return;
+
+      activeWindow.sequence = sequence++;
+      windows.push(activeWindow);
+
+      // eslint-disable-next-line consistent-return
+      return activeWindow.sequence;
+    },
+    remove(inactiveWindow) {
+      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;
+    },
+    isLastWindowClose() {
+      return windows.length === 0;
+    },
+  };
+})();
+
+const getZIndexFromElement = (element) => {
+  const zIndex = window.getComputedStyle(element).getPropertyValue('z-index').trim();
+
+  if (!zIndex || isNaN(zIndex)) return 700; // window 초기 z-index 값
+
+  return parseInt(zIndex);
+};
+
+const useEscKeydownEvent = ({ closeWin, windowRef }) => {
+  const { props } = getCurrentInstance();
+
+  let sequence = null;
+
+  const addActiveWindow = () => {
+     sequence = activeWindows.add({
+      sequence,
+      closeWin,
+      elem: windowRef.value,
+      escClose: props.escClose,
+    });
+  };
+
+  const removeInactiveWindow = (inactiveWindow) => {
+    activeWindows.remove(inactiveWindow);
+  };
+
+  const keydownEsc = (event) => {
+    if (activeWindows.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 activeWindowSorted = Array.prototype.map.call(activeWindows.windows, activeWindow => ({
+      ...activeWindow,
+      zIndex: getZIndexFromElement(activeWindow.elem),
+    })).sort(compare);
+
+    const topActiveWindow = activeWindowSorted[0];
+
+    // 예시 상황) Nested에서 외부 Window의 escClose는 true이고, 내부 Window의 escClose는 false인 경우,
+    // esc 눌러도 외부 Window는 닫히지 않고, 가장 상단에 있는 내부 Window가 수동으로 닫힌 후에 닫히도록 하기 위해
+    if (topActiveWindow.escClose === false) return;
+
+    topActiveWindow.closeWin();
+  };
+
+  const addKeydownEvtHandler = () => {
+    if (activeWindows.isFirstWindowOpen()) {
+      document.addEventListener('keydown', keydownEsc);
+    }
+  };
+
+  const removeKeydownEvtHandler = () => {
+    if (activeWindows.isLastWindowClose()) {
+      document.removeEventListener('keydown', keydownEsc);
+    }
+  };
+
+  onMounted(() => {
+    // visible 초기값이 true
+    if (props.visible) {
+      addActiveWindow();
+      addKeydownEvtHandler();
+    }
+  });
+
+  watch(
+    () => props.visible,
+    (newVal) => {
+      nextTick(() => {
+        if (newVal) {
+          addActiveWindow();
+          addKeydownEvtHandler();
+        } else {
+          const inactiveWindow = activeWindows.getWindowBySequence(sequence);
+          removeInactiveWindow(inactiveWindow);
+          removeKeydownEvtHandler();
+        }
+      });
+    },
+  );
+};
+
 export {
   useModel,
   useMouseEvent,
+  useEscKeydownEvent,
 };