evui 3.3.0 → 3.3.4

package/src/components/grid/uses.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance } from 'vue';
+import { getCurrentInstance, nextTick } from 'vue';
 import { isEqual, uniqBy } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
@@ -75,23 +75,25 @@ export const scrollEvent = (params) => {
   const updateVScroll = () => {
     const bodyEl = elementInfo.body;
     const rowHeight = resizeInfo.rowHeight;
-    const rowCount = bodyEl.clientHeight > rowHeight
-      ? Math.ceil(bodyEl.clientHeight / rowHeight) : stores.store.length;
-    const totalScrollHeight = stores.store.length * rowHeight;
-    let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
-    if (firstVisibleIndex > stores.store.length - 1) {
-      firstVisibleIndex = 0;
-    }
+    if (bodyEl) {
+      const rowCount = bodyEl.clientHeight > rowHeight
+        ? Math.ceil(bodyEl.clientHeight / rowHeight) : stores.store.length;
+      const totalScrollHeight = stores.store.length * rowHeight;
+      let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
+      if (firstVisibleIndex > stores.store.length - 1) {
+        firstVisibleIndex = 0;
+      }
 
-    const lastVisibleIndex = firstVisibleIndex + rowCount;
-    const firstIndex = Math.max(firstVisibleIndex, 0);
-    const lastIndex = lastVisibleIndex;
+      const lastVisibleIndex = firstVisibleIndex + rowCount;
+      const firstIndex = Math.max(firstVisibleIndex, 0);
+      const lastIndex = lastVisibleIndex;
 
-    stores.viewStore = stores.store.slice(firstIndex, lastIndex);
-    scrollInfo.hasVerticalScrollBar = rowCount < stores.store.length;
-    scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
-    scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
-      - scrollInfo.vScrollTopHeight;
+      stores.viewStore = stores.store.slice(firstIndex, lastIndex);
+      scrollInfo.hasVerticalScrollBar = rowCount < stores.store.length;
+      scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
+      scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
+        - scrollInfo.vScrollTopHeight;
+    }
   };
   /**
    * 수평 스크롤의 위치 계산 후 적용한다.
@@ -114,7 +116,7 @@ export const scrollEvent = (params) => {
     const isHorizontal = !(scrollLeft === lastLeft);
     const isVertical = !(scrollTop === lastTop);
 
-    if (isVertical && bodyEl.clientHeight) {
+    if (isVertical && bodyEl?.clientHeight) {
       updateVScroll();
     }
 
@@ -223,22 +225,24 @@ export const resizeEvent = (params) => {
    * grid resize 이벤트를 처리한다.
    */
   const onResize = () => {
-    if (resizeInfo.adjust) {
-      stores.orderedColumns.map((column) => {
-        const item = column;
+    nextTick(() => {
+      if (resizeInfo.adjust) {
+        stores.orderedColumns.map((column) => {
+          const item = column;
 
-        if (!props.columns[column.index].width && !item.resized) {
-          item.width = 0;
-        }
+          if (!props.columns[column.index].width && !item.resized) {
+            item.width = 0;
+          }
 
-        return item;
-      }, this);
-    }
+          return item;
+        }, this);
+      }
 
-    calculatedColumn();
-    if (elementInfo.body?.clientHeight) {
-      updateVScroll();
-    }
+      calculatedColumn();
+      if (elementInfo.body?.clientHeight) {
+        updateVScroll();
+      }
+    });
   };
 
   const onShow = (isVisible) => {
@@ -496,21 +500,32 @@ export const sortEvent = (params) => {
     const index = getColumnIndex(sortInfo.sortField);
     const type = props.columns[index]?.type || 'string';
     const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
-    if (type === 'string') {
-      stores.store.sort((a, b) => {
-        if (typeof a[ROW_DATA_INDEX][index] === 'string') {
-          return sortFn(a[ROW_DATA_INDEX][index]?.toLowerCase(),
-            b[ROW_DATA_INDEX][index]?.toLowerCase());
-        }
-        return 0;
-      });
-    } else {
-      stores.store.sort((a, b) => {
-        if (typeof a[ROW_DATA_INDEX][index] === 'number') {
-          return sortFn(a[ROW_DATA_INDEX][index], b[ROW_DATA_INDEX][index]);
-        }
-        return 0;
-      });
+    switch (type) {
+      case 'string':
+        stores.store.sort((a, b) => {
+          if (typeof a[ROW_DATA_INDEX][index] === 'string') {
+            return sortFn(a[ROW_DATA_INDEX][index]?.toLowerCase(),
+              b[ROW_DATA_INDEX][index]?.toLowerCase());
+          }
+          return 0;
+        });
+        break;
+      case 'stringNumber':
+        stores.store.sort((a, b) => {
+          if (typeof a[ROW_DATA_INDEX][index] === 'string' || typeof a[ROW_DATA_INDEX][index] === 'number') {
+            return sortFn(Number(a[ROW_DATA_INDEX][index]), Number(b[ROW_DATA_INDEX][index]));
+          }
+          return 0;
+        });
+        break;
+      default:
+        stores.store.sort((a, b) => {
+          if (typeof a[ROW_DATA_INDEX][index] === 'number' || typeof a[ROW_DATA_INDEX][index] === 'boolean') {
+            return sortFn(a[ROW_DATA_INDEX][index], b[ROW_DATA_INDEX][index]);
+          }
+          return 0;
+        });
+        break;
     }
   };
   return { onSort, setSort };
@@ -736,14 +751,12 @@ export const filterEvent = (params) => {
       }
       const store = stores.store;
       let checkedCount = 0;
-      for (let ix = 0; ix < store.length; ix++) {
-        if (checkInfo.checkedIndex.has(store[ix][ROW_INDEX])) {
-          store[ix][ROW_CHECK_INDEX] = true;
+      store.forEach((row) => {
+        row[ROW_CHECK_INDEX] = checkInfo.checkedRows.includes(row[ROW_DATA_INDEX]);
+        if (row[ROW_CHECK_INDEX]) {
           checkedCount += 1;
-        } else {
-          store[ix][ROW_CHECK_INDEX] = false;
         }
-      }
+      });
       if (store.length && store.length === checkedCount) {
         checkInfo.isHeaderChecked = true;
       } else {

package/src/components/messageBox/MessageBox.vue

@@ -14,11 +14,12 @@
           ref="msgRef"
           class="ev-message-box"
           :class="{
-          [`type-${type}`]: !!type,
-          'show-close': showClose,
-          'has-icon': !!iconClass,
-          'has-title': !!title,
-        }"
+            [`type-${type}`]: !!type,
+            'show-close': showClose,
+            'has-icon': !!iconClass,
+            'has-title': !!title,
+          }"
+          tabindex="-1"
         >
           <span
             v-if="iconClass"
@@ -52,6 +53,7 @@
               v-if="showCancelBtn"
               size="small"
               class="ev-message-box-cancel"
+              :auto-focus="hasFocus('cancelBtn')"
               @click="closeMsg('cancel')"
             >
               {{ cancelBtnText }}
@@ -61,6 +63,7 @@
               type="primary"
               size="small"
               class="ev-message-box-confirm"
+              :auto-focus="hasFocus('confirmBtn')"
               @click="closeMsg('ok')"
             >
               {{ confirmBtnText }}
@@ -80,7 +83,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, watch, onMounted } from 'vue';
+import { reactive, toRefs, watch, onMounted, ref } from 'vue';
 import EvButton from '@/components/button/Button.vue';
 
 export default {
@@ -142,8 +145,14 @@ export default {
       type: Function,
       default: null,
     },
+    focusable: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
+    const msgRef = ref(null);
+
     const state = reactive({
       isShow: true,
       iconClass: '',
@@ -190,9 +199,27 @@ export default {
       }
     };
 
+    const hasFocus = (type) => {
+      if (!props.focusable) return false;
+
+      switch (type) {
+        case 'confirmBtn':
+          return props.showConfirmBtn;
+        case 'cancelBtn':
+          return !props.showConfirmBtn && props.showCancelBtn;
+        case 'messagebox':
+          return !props.showConfirmBtn && !props.showCancelBtn;
+        default:
+          return false;
+      }
+    };
+
     onMounted(() => {
       setState();
       document.addEventListener('keydown', keydown);
+      if (hasFocus('messagebox')) {
+        msgRef.value.focus();
+      }
     });
     watch(() => state.isShow, (val) => {
       if (!val) {
@@ -202,6 +229,8 @@ export default {
     return {
       closeMsg,
       ...toRefs(state),
+      msgRef,
+      hasFocus,
     };
   },
 };

package/src/components/treeGrid/TreeGrid.vue

@@ -332,13 +332,13 @@ export default {
 
     const {
       onSearch,
-    } = filterEvent({ checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll });
+    } = filterEvent({ checkInfo, stores, getConvertValue, onResize });
 
     onMounted(() => {
       stores.treeStore = setTreeNodeStore();
     });
     onActivated(() => {
-      updateVScroll();
+      onResize();
     });
     watch(
       () => props.checked,
@@ -377,7 +377,6 @@ export default {
         stores.treeRows = newData;
         stores.treeStore = setTreeNodeStore();
         onResize();
-        updateVScroll();
       }, { deep: true },
     );
     watch(
@@ -400,7 +399,10 @@ export default {
     watch(
       () => searchValue.value,
       (value) => {
-        onSearch(value?.value ?? value);
+        const searchWord = value?.value ?? value;
+        if (searchWord) {
+          onSearch(searchWord);
+        }
       }, { immediate: true },
     );
     const gridStyle = computed(() => ({

package/src/components/treeGrid/style/treeGrid.scss

@@ -198,7 +198,7 @@
       text-align: right;
     }
     &.string,
-    &.stringnumber {
+    &.stringNumber {
       text-align: left;
     }
     &.center {

package/src/components/treeGrid/uses.js

@@ -1,4 +1,5 @@
 import { getCurrentInstance, nextTick } from 'vue';
+import { cloneDeep } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
 export const commonFunctions = () => {
@@ -70,24 +71,26 @@ export const scrollEvent = (params) => {
   const updateVScroll = () => {
     const store = stores.showTreeStore;
     const bodyEl = elementInfo.body;
-    const rowHeight = resizeInfo.rowHeight;
-    const rowCount = bodyEl.clientHeight > rowHeight
-      ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
-    const totalScrollHeight = store.length * rowHeight;
-    let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
-    if (firstVisibleIndex > store.length - 1) {
-      firstVisibleIndex = 0;
-    }
+    if (bodyEl) {
+      const rowHeight = resizeInfo.rowHeight;
+      const rowCount = bodyEl.clientHeight > rowHeight
+        ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
+      const totalScrollHeight = store.length * rowHeight;
+      let firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
+      if (firstVisibleIndex > store.length - 1) {
+        firstVisibleIndex = 0;
+      }
 
-    const lastVisibleIndex = firstVisibleIndex + rowCount;
-    const firstIndex = Math.max(firstVisibleIndex, 0);
-    const lastIndex = lastVisibleIndex;
+      const lastVisibleIndex = firstVisibleIndex + rowCount;
+      const firstIndex = Math.max(firstVisibleIndex, 0);
+      const lastIndex = lastVisibleIndex;
 
-    stores.viewStore = store.slice(firstIndex, lastIndex);
-    scrollInfo.hasVerticalScrollBar = rowCount < store.length;
-    scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
-    scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
-      - scrollInfo.vScrollTopHeight;
+      stores.viewStore = store.slice(firstIndex, lastIndex);
+      scrollInfo.hasVerticalScrollBar = rowCount < store.length;
+      scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
+      scrollInfo.vScrollBottomHeight = totalScrollHeight - (stores.viewStore.length * rowHeight)
+        - scrollInfo.vScrollTopHeight;
+    }
   };
   /**
    * 수평 스크롤의 위치 계산 후 적용한다.
@@ -110,7 +113,7 @@ export const scrollEvent = (params) => {
     const isHorizontal = !(scrollLeft === lastLeft);
     const isVertical = !(scrollTop === lastTop);
 
-    if (isVertical) {
+    if (isVertical && bodyEl.clientHeight) {
       updateVScroll();
     }
 
@@ -223,22 +226,25 @@ export const resizeEvent = (params) => {
   /**
    * grid resize 이벤트를 처리한다.
    */
-  const onResize = async () => {
-    await nextTick();
-    if (resizeInfo.adjust) {
-      stores.orderedColumns.map((column) => {
-        const item = column;
-
-        if (!props.columns[column.index].width && !item.resized) {
-          item.width = 0;
-        }
+  const onResize = () => {
+    nextTick(() => {
+      if (resizeInfo.adjust) {
+        stores.orderedColumns.map((column) => {
+          const item = column;
+
+          if (!props.columns[column.index].width && !item.resized) {
+            item.width = 0;
+          }
 
-        return item;
-      }, this);
-    }
+          return item;
+        }, this);
+      }
 
-    calculatedColumn();
-    updateVScroll();
+      calculatedColumn();
+      if (elementInfo.body?.clientHeight) {
+        updateVScroll();
+      }
+    });
   };
   const onShow = (isVisible) => {
     if (isVisible) {
@@ -603,11 +609,12 @@ export const treeEvent = (params) => {
 
         nodeList.push(node);
 
-        if (typeof parent !== 'undefined') {
+        if (!Object.hasOwnProperty.call(node, 'parent')) {
           node.parent = parent;
         }
         if (node.children) {
           node.hasChild = true;
+          node.children = cloneDeep(node.children);
           node.children.forEach(child =>
             setNodeData({
               node: child,
@@ -648,7 +655,7 @@ export const treeEvent = (params) => {
 };
 
 export const filterEvent = (params) => {
-  const { checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll } = params;
+  const { checkInfo, stores, getConvertValue, onResize } = params;
   const makeParentShow = (data) => {
     if (!data?.parent) {
       return;
@@ -735,8 +742,7 @@ export const filterEvent = (params) => {
       }
       const isCheck = store.length > 0 && store.every(n => n.checked === true);
       checkInfo.isHeaderChecked = isCheck;
-      calculatedColumn();
-      updateVScroll();
+      onResize();
     }, 500);
   };
   return { onSearch };

package/src/components/window/uses.js

@@ -433,8 +433,8 @@ const useMouseEvent = (param) => {
       setDragStyle({
         top: `${tempTop}px`,
         left: `${tempLeft}px`,
-        width: props.width,
-        height: props.height,
+        width: dragStyle.width ?? props.width,
+        height: dragStyle.height ?? props.height,
       });
     } else if (props.resizable && clickedInfo.pressedSpot === 'border') {
       resizeWindow(e);