evui 3.2.3 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.2.3",
+  "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/chart/Chart.vue

@@ -105,13 +105,20 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       });
 
-      const redrawChart = () => {
-        if (evChart && 'resize' in evChart && isInit) {
-          evChart.resize();
+      const redraw = () => {
+        if (evChart && isInit) {
+          evChart.update({
+            updateSeries: true,
+            updateSelTip: { update: true, keepDomain: false },
+          });
         }
       };
 
-      const onResize = debounce(redrawChart, props.resizeTimeout);
+      const onResize = debounce(() => {
+        if (evChart && 'resize' in evChart && isInit) {
+          evChart.resize();
+        }
+      }, props.resizeTimeout);
 
       const selectItemByLabel = (label) => {
         evChart.selectItemByLabel(label);
@@ -121,6 +128,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         wrapper,
         wrapperStyle,
         onResize,
+        redraw,
         selectItemByLabel,
       };
     },

package/src/components/chart/plugins/plugins.interaction.js

@@ -260,7 +260,7 @@ const modules = {
     const dragEnd = (e) => {
       const dragInfo = this.dragInfo;
 
-      if (dragInfo?.isMove) {
+      if (dragInfo?.isMove && dragInfo?.width > 1 && dragInfo?.height > 1) {
         const args = {
           e,
           data: this.findSelectedItems(dragInfo),
@@ -581,10 +581,10 @@ const modules = {
     const yMax = dataRangeY.graphMin + graphHeight * (1 - yMaxRatio);
 
     return {
-      xMin: +parseFloat(xMin).toFixed(3),
-      xMax: +parseFloat(xMax).toFixed(3),
-      yMin: +parseFloat(yMin).toFixed(3),
-      yMax: +parseFloat(yMax).toFixed(3),
+      xMin: Math.max(+parseFloat(xMin).toFixed(3), dataRangeX.graphMin),
+      xMax: Math.min(+parseFloat(xMax).toFixed(3), dataRangeX.graphMax),
+      yMin: Math.max(+parseFloat(yMin).toFixed(3), dataRangeY.graphMin),
+      yMax: Math.min(+parseFloat(yMax).toFixed(3), dataRangeY.graphMax),
     };
   },
 

package/src/components/grid/Grid.vue

@@ -341,7 +341,7 @@ export default {
         items: [],
       },
       isSearch: false,
-      searchWord: '',
+      searchValue: computed(() => (props.option.searchValue || '')),
     });
     const stores = reactive({
       viewStore: [],
@@ -471,7 +471,7 @@ export default {
       setStore(props.rows);
     });
     onActivated(() => {
-      updateVScroll();
+      onResize();
     });
     const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
@@ -512,7 +512,7 @@ export default {
       (value) => {
         setStore(value);
         if (filterInfo.isSearch) {
-          onSearch(filterInfo.searchWord);
+          onSearch(filterInfo.searchValue);
         }
       },
     );
@@ -581,6 +581,15 @@ export default {
         setStore([], false);
       },
     );
+    watch(
+      () => filterInfo.searchValue,
+      (value) => {
+        const searchValue = value?.value ?? value;
+        if (searchValue) {
+          onSearch(searchValue);
+        }
+      }, { immediate: true },
+    );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,

package/src/components/grid/style/grid.scss

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

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 };
@@ -710,7 +725,6 @@ export const filterEvent = (params) => {
     }
     timer = setTimeout(() => {
       filterInfo.isSearch = false;
-      filterInfo.searchWord = searchWord;
       if (searchWord) {
         stores.searchStore = stores.store.filter((row) => {
           let isShow = false;
@@ -737,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

@@ -242,6 +242,7 @@ export default {
       resizeLine: null,
       'grid-wrapper': null,
     });
+    const searchValue = computed(() => (props.option.searchValue || ''));
     const stores = reactive({
       treeStore: [],
       viewStore: [],
@@ -331,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,
@@ -376,7 +377,6 @@ export default {
         stores.treeRows = newData;
         stores.treeStore = setTreeNodeStore();
         onResize();
-        updateVScroll();
       }, { deep: true },
     );
     watch(
@@ -396,6 +396,15 @@ export default {
         onResize();
       },
     );
+    watch(
+      () => searchValue.value,
+      (value) => {
+        const searchWord = value?.value ?? value;
+        if (searchWord) {
+          onSearch(searchWord);
+        }
+      }, { immediate: true },
+    );
     const gridStyle = computed(() => ({
       width: resizeInfo.gridWidth,
       height: resizeInfo.gridHeight,

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

@@ -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 };

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);