evui 3.3.2 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/button/Button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    ref="buttonRef"
     class="ev-button"
     :class="{
       disabled,
@@ -17,6 +18,8 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue';
+
 export default {
   name: 'EvButton',
   props: {
@@ -52,6 +55,19 @@ export default {
   emits: {
     click: null,
   },
+  setup(props) {
+    const buttonRef = ref(null);
+
+    onMounted(() => {
+      if (props.autoFocus) {
+        buttonRef.value.focus();
+      }
+    });
+
+    return {
+      buttonRef,
+    };
+  },
 };
 </script>
 

package/src/components/grid/Grid.vue

@@ -471,7 +471,7 @@ export default {
       setStore(props.rows);
     });
     onActivated(() => {
-      updateVScroll();
+      onResize();
     });
     const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
@@ -584,7 +584,10 @@ export default {
     watch(
       () => filterInfo.searchValue,
       (value) => {
-        onSearch(value?.value ?? value);
+        const searchValue = value?.value ?? value;
+        if (searchValue) {
+          onSearch(searchValue);
+        }
       }, { immediate: true },
     );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';

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) => {
@@ -747,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/uses.js

@@ -70,24 +70,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 +112,7 @@ export const scrollEvent = (params) => {
     const isHorizontal = !(scrollLeft === lastLeft);
     const isVertical = !(scrollTop === lastTop);
 
-    if (isVertical) {
+    if (isVertical && bodyEl.clientHeight) {
       updateVScroll();
     }
 
@@ -223,22 +225,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,7 +608,7 @@ export const treeEvent = (params) => {
 
         nodeList.push(node);
 
-        if (typeof parent !== 'undefined') {
+        if (!Object.hasOwnProperty.call(node, 'parent')) {
           node.parent = parent;
         }
         if (node.children) {
@@ -648,7 +653,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 +740,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 };