evui 3.1.56 → 3.2.1

package/src/components/grid/uses.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, nextTick } from 'vue';
+import { getCurrentInstance } from 'vue';
 import { isEqual, uniqBy } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
@@ -368,7 +368,7 @@ export const clickEvent = (params) => {
 };
 
 export const checkEvent = (params) => {
-  const { checkInfo, stores, filterInfo } = params;
+  const { checkInfo, stores } = params;
   const { emit } = getCurrentInstance();
   /**
    * row에 대한 체크 상태를 해제한다.
@@ -404,20 +404,12 @@ export const checkEvent = (params) => {
       }
       checkInfo.checkedIndex.add(row[ROW_INDEX]);
 
-      let store = stores.originStore;
-      let checkSize = checkInfo.checkedRows.length;
-      if (filterInfo.isSearch && stores.searchStore) {
-        store = stores.searchStore;
-        checkSize = checkInfo.checkedIndex.size;
-      }
-      if (checkSize >= store.length) {
+      const store = stores.store;
+      const isAllChecked = store.every(d => d[ROW_CHECK_INDEX]);
+      if (store.length && isAllChecked) {
         checkInfo.isHeaderChecked = true;
       }
     } else {
-      if (checkInfo.isHeaderChecked) {
-        checkInfo.isHeaderChecked = false;
-      }
-
       if (checkInfo.useCheckbox.mode === 'single') {
         checkInfo.checkedRows = [];
         checkInfo.checkedIndex.clear();
@@ -425,8 +417,8 @@ export const checkEvent = (params) => {
         checkInfo.checkedRows.splice(checkInfo.checkedRows.indexOf(row[ROW_DATA_INDEX]), 1);
         checkInfo.checkedIndex.delete(row[ROW_INDEX]);
       }
+      checkInfo.isHeaderChecked = false;
     }
-
     checkInfo.prevCheckedRow = row.slice();
     emit('update:checked', checkInfo.checkedRows);
     emit('check-row', event, row[ROW_INDEX], row[ROW_DATA_INDEX]);
@@ -437,28 +429,24 @@ export const checkEvent = (params) => {
    * @param {object} event - 이벤트 객체
    */
   const onCheckAll = (event) => {
-    const status = checkInfo.isHeaderChecked;
-    const checked = [];
-    let item;
-    let store = stores.originStore;
-    if (filterInfo.isSearch && stores.searchStore) {
-      store = stores.searchStore;
-    }
-    for (let ix = 0; ix < store.length; ix++) {
-      item = store[ix];
-      if (status) {
-        checked.push(item[ROW_DATA_INDEX]);
-        checkInfo.checkedIndex.add(item[ROW_INDEX]);
+    const isHeaderChecked = checkInfo.isHeaderChecked;
+    const store = stores.store;
+    store.forEach((row) => {
+      if (isHeaderChecked) {
+        if (!checkInfo.checkedRows.includes(row[ROW_DATA_INDEX])) {
+          checkInfo.checkedRows.push(row[ROW_DATA_INDEX]);
+        }
+        if (!checkInfo.checkedIndex.has(row[ROW_INDEX])) {
+          checkInfo.checkedIndex.add(row[ROW_INDEX]);
+        }
       } else {
-        checkInfo.checkedIndex.clear();
+        checkInfo.checkedRows.splice(checkInfo.checkedRows.indexOf(row[ROW_DATA_INDEX]), 1);
+        checkInfo.checkedIndex.delete(row[ROW_INDEX]);
       }
-
-      item[ROW_CHECK_INDEX] = status;
-    }
-
-    checkInfo.checkedRows = checked;
-    emit('update:checked', checked);
-    emit('check-all', event, checked);
+      row[ROW_CHECK_INDEX] = isHeaderChecked;
+    });
+    emit('update:checked', checkInfo.checkedRows);
+    emit('check-all', event, checkInfo.checkedRows);
   };
   return { onCheck, onCheckAll };
 };
@@ -475,17 +463,20 @@ export const sortEvent = (params) => {
   /**
    * sort 이벤트를 처리한다.
    *
-   * @param {string} field - 컬럼 field
+   * @param {object} column - 컬럼 정보
    */
-  const onSort = (field) => {
-    if (sortInfo.sortField !== field) {
-      order.orders = ['asc', 'desc', 'init'];
-      sortInfo.sortField = field;
-    }
-    sortInfo.sortOrder = order.dequeue();
-    order.enqueue(sortInfo.sortOrder);
+  const onSort = (column) => {
+    const sortable = column.sortable === undefined ? true : column.sortable;
+    if (sortable) {
+      if (sortInfo.sortField !== column?.field) {
+        order.orders = ['asc', 'desc', 'init'];
+        sortInfo.sortField = column?.field;
+      }
+      sortInfo.sortOrder = order.dequeue();
+      order.enqueue(sortInfo.sortOrder);
 
-    sortInfo.isSorting = true;
+      sortInfo.isSorting = true;
+    }
   };
   /**
    * 설정값에 따라 해당 컬럼 데이터에 대해 정렬한다.
@@ -527,7 +518,14 @@ export const sortEvent = (params) => {
 
 export const filterEvent = (params) => {
   const { props } = getCurrentInstance();
-  const { filterInfo, stores, getColumnIndex } = params;
+  const {
+    filterInfo,
+    stores,
+    checkInfo,
+    getColumnIndex,
+    getConvertValue,
+    updateVScroll,
+  } = params;
   /**
    * 해당 컬럼에 대한 필터 팝업을 보여준다.
    *
@@ -705,7 +703,57 @@ export const filterEvent = (params) => {
       stores.filterStore = uniqBy(filterStore, JSON.stringify);
     }
   };
-  return { onClickFilter, onCloseFilterWindow, onApplyFilter, setFilter };
+  let timer = null;
+  const onSearch = (searchWord) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      filterInfo.isSearch = false;
+      filterInfo.searchWord = searchWord;
+      if (searchWord) {
+        stores.searchStore = stores.store.filter((row) => {
+          let isShow = false;
+          for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
+            const column = stores.orderedColumns[ix] || {};
+            let columnValue = row[ROW_DATA_INDEX][ix];
+            const columnType = column.type || 'string';
+            if (columnValue) {
+              if (typeof columnValue === 'object') {
+                columnValue = columnValue[column.field];
+              }
+              if (!column.hide && (column?.searchable === undefined || column?.searchable)) {
+                columnValue = getConvertValue(columnType, columnValue).toString();
+                isShow = columnValue.toLowerCase().includes(searchWord.toString().toLowerCase());
+                if (isShow) {
+                  break;
+                }
+              }
+            }
+          }
+          return isShow;
+        });
+        filterInfo.isSearch = true;
+      }
+      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;
+          checkedCount += 1;
+        } else {
+          store[ix][ROW_CHECK_INDEX] = false;
+        }
+      }
+      if (store.length && store.length === checkedCount) {
+        checkInfo.isHeaderChecked = true;
+      } else {
+        checkInfo.isHeaderChecked = false;
+      }
+      updateVScroll();
+    }, 500);
+  };
+  return { onClickFilter, onCloseFilterWindow, onApplyFilter, setFilter, onSearch };
 };
 
 export const contextMenuEvent = (params) => {
@@ -794,47 +842,40 @@ export const storeEvent = (params) => {
    * 전달된 데이터를 내부 store 및 속성에 저장한다.
    *
    * @param {array} value - row 데이터
-   * @param {boolean} makeIndex - 인덱스 생성 유무
+   * @param {boolean} isMakeIndex - 인덱스 생성 유무
    */
-  const setStore = (value, makeIndex = true) => {
-    nextTick(() => {
-      const store = [];
-      let checked;
-      let selected = false;
-      if (makeIndex) {
-        let hasUnChecked = false;
-
-        for (let ix = 0; ix < value.length; ix++) {
-          checked = props.checked.includes(value[ix]);
-          if (!checked) {
-            hasUnChecked = true;
-          }
-
-          if (!selected && isEqual(selectInfo.selectedRow, value[ix])) {
-            selectInfo.selectedRow = value[ix];
-            selected = true;
-          }
-
-          store.push([ix, checked, value[ix]]);
+  const setStore = (value, isMakeIndex = true) => {
+    const store = [];
+    let checked;
+    let selected = false;
+    if (isMakeIndex) {
+      let hasUnChecked = false;
+      for (let ix = 0; ix < value.length; ix++) {
+        checked = props.checked.includes(value[ix]);
+        if (!checked) {
+          hasUnChecked = true;
         }
-
-        if (!selected) {
-          selectInfo.selectedRow = [];
+        if (!selected && isEqual(selectInfo.selectedRow, value[ix])) {
+          selectInfo.selectedRow = value[ix];
+          selected = true;
         }
-
-        checkInfo.isHeaderChecked = value.length > 0 ? !hasUnChecked : false;
-        stores.originStore = store;
+        store.push([ix, checked, value[ix]]);
       }
-      if (filterInfo.isFiltering) {
-        setFilter();
+      if (!selected) {
+        selectInfo.selectedRow = [];
       }
-      if (sortInfo.sortField) {
-        setSort();
-      }
-      if (elementInfo.body?.clientHeight) {
-        updateVScroll();
-      }
-    });
+      checkInfo.isHeaderChecked = value.length > 0 ? !hasUnChecked : false;
+      stores.originStore = store;
+    }
+    if (filterInfo.isFiltering) {
+      setFilter();
+    }
+    if (sortInfo.sortField) {
+      setSort();
+    }
+    if (elementInfo.body?.clientHeight) {
+      updateVScroll();
+    }
   };
   /**
    * 컴포넌트의 변경 데이터를 store에 업데이트한다.

package/src/components/textField/TextField.vue

@@ -61,7 +61,7 @@
           :class="{ 'on': isPasswordVisible }"
           @click="changePasswordVisible"
         >
-          <i class="ev-icon-radio-on"/>
+          <i :class="isPasswordVisible ? 'ev-icon-visibility' : 'ev-icon-visibility-off'"/>
         </span>
         <span
           v-if="type === 'search'"

package/src/components/treeGrid/TreeGrid.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated } from 'vue';
 import treeGridNode from './TreeGridNode';
 import Toolbar from './treeGrid.toolbar';
 import {
@@ -246,6 +246,7 @@ export default {
       treeStore: [],
       viewStore: [],
       filterStore: [],
+      searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       treeRows: props.rows,
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       orderedColumns: computed(() =>
@@ -330,20 +331,28 @@ export default {
 
     const {
       onSearch,
-    } = filterEvent({ stores, getConvertValue, calculatedColumn, updateVScroll });
+    } = filterEvent({ checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll });
 
+    onMounted(() => {
+      stores.treeStore = setTreeNodeStore();
+    });
+    onActivated(() => {
+      updateVScroll();
+    });
     watch(
       () => props.checked,
       (value) => {
-        const store = stores.treeStore;
+        let store = stores.treeStore;
+        if (stores.searchStore.length > 0) {
+          store = stores.searchStore;
+        }
+        const isCheck = store.every(n => n.checked === true);
         checkInfo.isHeaderChecked = false;
         checkInfo.checkedRows = value;
         for (let ix = 0; ix < store.length; ix++) {
           store[ix].checked = value.includes(store[ix]);
         }
-        if (value.length && store.length === value.length) {
-          checkInfo.isHeaderChecked = true;
-        }
+        checkInfo.isHeaderChecked = isCheck;
       },
     );
     watch(
@@ -359,8 +368,6 @@ export default {
         checkInfo.isHeaderChecked = false;
       },
     );
-    stores.treeStore = setTreeNodeStore();
-
     watch(
       () => props.rows,
       (newData) => {

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