evui 3.3.4 → 3.3.7

package/src/components/select/Select.vue

@@ -8,31 +8,11 @@
       disabled,
     }"
   >
-    <template v-if="!multiple">
-      <span
-        v-if="!clearable || !isClearableIcon"
-        class="ev-input-suffix"
-        @click="clickSelectInput"
-      >
-        <i
-          class="ev-input-suffix-arrow ev-icon-s-arrow-down"
-          :class="{
-            selected: isDropbox,
-          }"
-        />
-      </span>
-      <input
-        v-model="selectedModel"
-        type="text"
-        class="ev-input"
-        readonly
-        :placeholder="computedPlaceholder"
-        :disabled="disabled"
-        @click="clickSelectInput"
-      />
-    </template>
-    <template v-else>
-      <div class="ev-select-tag-wrapper">
+    <div
+      ref="selectWrapper"
+      class="ev-select__wrapper"
+    >
+      <template v-if="!multiple">
         <span
           v-if="!clearable || !isClearableIcon"
           class="ev-input-suffix"
@@ -46,66 +26,90 @@
           />
         </span>
         <input
+          v-model="selectedModel"
           type="text"
-          class="ev-input multiple"
+          class="ev-input"
           readonly
           :placeholder="computedPlaceholder"
           :disabled="disabled"
           @click="clickSelectInput"
         />
-        <template v-if="!collapseTags">
-          <div
-            v-for="item in selectedModel"
-            :key="item"
-            class="ev-select-tag"
+      </template>
+      <template v-else>
+        <div class="ev-select-tag-wrapper">
+          <span
+            v-if="!clearable || !isClearableIcon"
+            class="ev-input-suffix"
+            @click="clickSelectInput"
           >
-            <span class="ev-tag-name">
-              {{ item.name }}
-            </span>
-            <span
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(item.value), changeDropboxPosition()]"
+            <i
+              class="ev-input-suffix-arrow ev-icon-s-arrow-down"
+              :class="{
+                selected: isDropbox,
+              }"
+            />
+          </span>
+          <input
+            type="text"
+            class="ev-input multiple"
+            readonly
+            :placeholder="computedPlaceholder"
+            :disabled="disabled"
+            @click="clickSelectInput"
+          />
+          <template v-if="!collapseTags">
+            <div
+              v-for="item in selectedModel"
+              :key="item"
+              class="ev-select-tag"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
-          </div>
-        </template>
-        <template v-else>
-          <div
-            v-if="selectedModel.length"
-            class="ev-select-tag"
-          >
-            <span class="ev-tag-name">
-              {{ selectedModel[0].name }}
-            </span>
-            <span
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
+              <span class="ev-tag-name">
+                {{ item.name }}
+              </span>
+              <span
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(item.value), changeDropboxPosition()]"
+              >
+                <i class="ev-tag-suffix-close ev-icon-error" />
+              </span>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-if="selectedModel.length"
+              class="ev-select-tag"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
-          </div>
-          <div
-            v-if="selectedModel.length > 1"
-            class="ev-select-tag num"
-          >
-            <span class="ev-tag-name">
-              + {{ selectedModel.length - 1 }}
-            </span>
-          </div>
-        </template>
-      </div>
-    </template>
-    <template v-if="clearable">
-      <span
-        v-show="isClearableIcon"
-        class="ev-input-suffix"
-        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
-      >
-        <i class="ev-icon-error" />
-      </span>
-    </template>
-    <div class="ev-select-dropbox-wrapper">
+              <span class="ev-tag-name">
+                {{ selectedModel[0].name }}
+              </span>
+              <span
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
+              >
+                <i class="ev-tag-suffix-close ev-icon-error" />
+              </span>
+            </div>
+            <div
+              v-if="selectedModel.length > 1"
+              class="ev-select-tag num"
+            >
+              <span class="ev-tag-name">
+                + {{ selectedModel.length - 1 }}
+              </span>
+            </div>
+          </template>
+        </div>
+      </template>
+      <template v-if="clearable">
+        <span
+          v-show="isClearableIcon"
+          class="ev-input-suffix"
+          @click.stop="[removeAllMv(), clickOutsideDropbox()]"
+        >
+          <i class="ev-icon-error" />
+        </span>
+      </template>
+      <div class="ev-select-dropbox-wrapper">
       <div
         v-if="isDropbox"
         ref="dropbox"
@@ -153,6 +157,7 @@
         </div>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -228,6 +233,7 @@ export default {
 
     const {
       select,
+      selectWrapper,
       dropbox,
       itemWrapper,
       isDropbox,
@@ -251,6 +257,7 @@ export default {
       removeAllMv,
 
       select,
+      selectWrapper,
       dropbox,
       itemWrapper,
       isDropbox,
@@ -271,21 +278,18 @@ export default {
 @import '../../style/index.scss';
 
 .ev-select {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   display: block;
   position: relative;
   width: 100%;
-  min-height: $select-height;
   border-radius: $default-radius;
   cursor: pointer;
 
-  &.disabled {
-    background-color: #F5F7FA;
-    border-color: #E4E7ED;
-    color: #C0C4CC;
-  }
-
   @import '../../style/components/input.scss';
+
+  &__wrapper {
+    position: relative;
+  }
   .ev-input {
     padding: 0 30px 0 15px;
     border: 1px solid #B2B2B2;
@@ -320,7 +324,6 @@ export default {
   }
 
   .ev-select-tag-wrapper {
-    $select-height: 35px;
     display: flex;
     width: 100%;
     height: 100%;
@@ -371,7 +374,7 @@ export default {
 }
 
 .ev-select-dropbox {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   position: absolute;
   width: 100%;
   max-height: $select-height * 5;

package/src/components/select/uses.js

@@ -107,6 +107,7 @@ export const useDropdown = (param) => {
   const isDropbox = ref(false);
   const filterTextRef = ref(props.filterText);
   const select = ref(null);
+  const selectWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
   const dropboxPosition = reactive({
@@ -131,8 +132,8 @@ export const useDropdown = (param) => {
    */
   const changeDropboxPosition = async () => {
     await nextTick();
-    const selectHeight = select.value?.getBoundingClientRect().height;
-    const selectY = select.value?.getBoundingClientRect().y;
+    const selectHeight = selectWrapper.value?.getBoundingClientRect().height;
+    const selectY = selectWrapper.value?.getBoundingClientRect().y;
     const dropboxHeight = dropbox.value?.getBoundingClientRect().height;
     const docHeight = document.documentElement.clientHeight;
     if (docHeight < selectY + selectHeight + dropboxHeight) {
@@ -245,6 +246,7 @@ export const useDropdown = (param) => {
 
   return {
     select,
+    selectWrapper,
     dropbox,
     itemWrapper,
     isDropbox,

package/src/components/treeGrid/TreeGrid.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
 import treeGridNode from './TreeGridNode';
 import Toolbar from './treeGrid.toolbar';
 import {
@@ -229,29 +229,26 @@ export default {
     'check-all': null,
   },
   setup(props) {
-    const {
-      isRenderer,
-      getComponentName,
-      getConvertValue,
-      getColumnIndex,
-      setPixelUnit,
-    } = commonFunctions();
     const elementInfo = reactive({
       body: null,
       header: null,
       resizeLine: null,
       'grid-wrapper': null,
     });
-    const searchValue = computed(() => (props.option.searchValue || ''));
+    const filterInfo = reactive({
+      isSearch: false,
+      searchWord: '',
+    });
     const stores = reactive({
       treeStore: [],
       viewStore: [],
       filterStore: [],
-      searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       treeRows: props.rows,
+      searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       orderedColumns: computed(() =>
         props.columns.map((column, index) => ({ index, ...column }))),
+      store: computed(() => (filterInfo.isSearch ? stores.searchStore : stores.treeStore)),
     });
     const checkInfo = reactive({
       prevCheckedRow: [],
@@ -259,6 +256,14 @@ export default {
       checkedRows: props.checked,
       useCheckbox: computed(() => props.option.useCheckbox || {}),
     });
+    const {
+      isRenderer,
+      getComponentName,
+      getConvertValue,
+      getColumnIndex,
+      setPixelUnit,
+      checkHeader,
+    } = commonFunctions({ checkInfo });
     const scrollInfo = reactive({
       lastScroll: {
         top: 0,
@@ -296,7 +301,6 @@ export default {
       borderStyle: computed(() => props.option.style?.border || ''),
       highlightIdx: computed(() => props.option.style?.highlight),
     });
-
     const {
       updateVScroll,
       updateHScroll,
@@ -311,7 +315,7 @@ export default {
     const {
       onCheck,
       onCheckAll,
-    } = checkEvent({ checkInfo, stores });
+    } = checkEvent({ checkInfo, stores, checkHeader });
 
     const {
       calculatedColumn,
@@ -332,7 +336,7 @@ export default {
 
     const {
       onSearch,
-    } = filterEvent({ checkInfo, stores, getConvertValue, onResize });
+    } = filterEvent({ stores, filterInfo, getConvertValue, onResize, checkHeader });
 
     onMounted(() => {
       stores.treeStore = setTreeNodeStore();
@@ -343,17 +347,14 @@ export default {
     watch(
       () => props.checked,
       (checkedList) => {
-        let store = stores.treeStore;
-        if (stores.searchStore.length > 0) {
-          store = stores.searchStore;
-        }
+        const store = stores.store;
         checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
         if (store.length) {
           store.forEach((row) => {
-            row.checked = checkedList.includes(row);
+            row.checked = !!checkedList.find(c => c.index === row.index);
           });
-          checkInfo.isHeaderChecked = store.every(n => n.checked === true);
+          checkHeader(store);
         }
         updateVScroll();
       },
@@ -379,10 +380,15 @@ export default {
         onResize();
       }, { deep: true },
     );
+    watch(
+      () => stores.treeStore.length,
+      () => {
+        checkHeader(stores.store);
+      },
+    );
     watch(
       () => [props.width, props.height, resizeInfo.adjust, props.option.columnWidth],
       (value) => {
-        // columnWidth computed readonly
         resizeInfo.columnWidth = value[3];
         stores.orderedColumns.map((column) => {
           const item = column;
@@ -397,12 +403,13 @@ export default {
       },
     );
     watch(
-      () => searchValue.value,
+      () => props.option.searchValue,
       (value) => {
-        const searchWord = value?.value ?? value;
-        if (searchWord) {
-          onSearch(searchWord);
-        }
+        nextTick(() => {
+          if (value !== undefined) {
+            onSearch(value?.value ?? value);
+          }
+        });
       }, { immediate: true },
     );
     const gridStyle = computed(() => ({
@@ -455,6 +462,7 @@ export default {
       ...toRefs(styleInfo),
       ...toRefs(elementInfo),
       ...toRefs(stores),
+      ...toRefs(filterInfo),
       ...toRefs(scrollInfo),
       ...toRefs(resizeInfo),
       ...toRefs(selectInfo),

package/src/components/treeGrid/TreeGridNode.vue

@@ -14,6 +14,7 @@
     >
       <ev-checkbox
         v-model="node.checked"
+        :disabled="node._disabled"
         class="row-checkbox-input"
         @change="onCheck($event, node)"
       />

package/src/components/treeGrid/uses.js

@@ -1,9 +1,9 @@
 import { getCurrentInstance, nextTick } from 'vue';
-import { cloneDeep } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
-export const commonFunctions = () => {
+export const commonFunctions = (params) => {
   const { props } = getCurrentInstance();
+  const { checkInfo } = params;
   /**
    * 해당 컬럼이 사용자 지정 컬럼인지 확인한다.
    *
@@ -60,7 +60,24 @@ export const commonFunctions = () => {
     }
     return size;
   };
-  return { isRenderer, getComponentName, getConvertValue, getColumnIndex, setPixelUnit };
+  const checkHeader = (rows) => {
+    checkInfo.isHeaderChecked = !!rows.length && rows.every(row => row.checked);
+    const disabledList = rows.filter(row => row._disabled);
+    if (disabledList.length) {
+      const checkedList = rows.filter(row => row.checked);
+      if (disabledList.length + checkedList.length === rows.length) {
+        checkInfo.isHeaderChecked = true;
+      }
+    }
+  };
+  return {
+    isRenderer,
+    getComponentName,
+    getConvertValue,
+    getColumnIndex,
+    setPixelUnit,
+    checkHeader,
+  };
 };
 
 export const scrollEvent = (params) => {
@@ -369,7 +386,7 @@ export const clickEvent = (params) => {
 };
 
 export const checkEvent = (params) => {
-  const { checkInfo, stores } = params;
+  const { checkInfo, stores, checkHeader } = params;
   const { emit } = getCurrentInstance();
   /**
    * row에 대한 체크 상태를 해제한다.
@@ -388,13 +405,14 @@ export const checkEvent = (params) => {
     if (node.hasChild) {
       node.children.forEach((children) => {
         const childNode = children;
-        if (node.checked && !childNode.checked) {
+        if (node.checked && !childNode.checked && !childNode._disabled) {
           checkInfo.checkedRows.push(childNode);
         }
         if (!node.checked) {
-          checkInfo.checkedRows = checkInfo.checkedRows.filter(it => it.index !== childNode.index);
+          checkInfo.checkedRows = checkInfo.checkedRows
+            .filter(checked => checked.index !== childNode.index);
         }
-        childNode.checked = node.checked;
+        childNode.checked = node.checked && !childNode._disabled;
 
         if (childNode.hasChild) {
           onCheckChildren(childNode);
@@ -406,9 +424,17 @@ export const checkEvent = (params) => {
     const parentNode = node.parent;
     if (parentNode) {
       const isCheck = parentNode.children.every(n => n.checked);
-      parentNode.checked = isCheck;
+      parentNode.checked = isCheck && !parentNode._disabled;
+      const disabledList = parentNode.children.filter(n => n._disabled);
+      if (disabledList.length) {
+        const checkedList = parentNode.children.filter(n => n.checked);
+        if (disabledList.length + checkedList.length === parentNode.children.length) {
+          parentNode.checked = true;
+        }
+      }
       if (!parentNode.checked) {
-        checkInfo.checkedRows = checkInfo.checkedRows.filter(it => it.index !== parentNode.index);
+        checkInfo.checkedRows = checkInfo.checkedRows
+          .filter(checked => checked.index !== parentNode.index);
       } else {
         checkInfo.checkedRows.push(parentNode);
       }
@@ -424,16 +450,9 @@ 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 store = stores.store;
     const isSingleMode = () => checkInfo.useCheckbox.mode === 'single';
-    const checkedHeader = (checkStore) => {
-      const isCheck = checkStore.every(n => n.checked === true);
-      checkInfo.isHeaderChecked = isCheck;
-    };
-    const unCheckedHeader = () => {
+    const unCheckHeader = () => {
       if (checkInfo.isHeaderChecked) {
         checkInfo.isHeaderChecked = false;
       }
@@ -464,9 +483,9 @@ export const checkEvent = (params) => {
     onSingleMode();
     if (rowData.checked) {
       addCheckedRow(rowData);
-      checkedHeader(store);
+      checkHeader(store);
     } else {
-      unCheckedHeader();
+      unCheckHeader();
       removeCheckedRow(rowData);
       onCheckChildren(rowData);
       onCheckParent(rowData);
@@ -482,27 +501,20 @@ export const checkEvent = (params) => {
    */
   const onCheckAll = (event) => {
     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) {
-        checked.push(item);
+    const store = stores.store;
+    store.forEach((row) => {
+      row.checked = status && !row._disabled;
+      if (row.checked) {
+        if (!checkInfo.checkedRows.find(checked => checked.index === row.index)) {
+          checkInfo.checkedRows.push(row);
+        }
+      } else {
+        checkInfo.checkedRows = checkInfo.checkedRows
+          .filter(checked => checked.index !== row.index);
       }
-      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);
+    });
+    emit('update:checked', checkInfo.checkedRows);
+    emit('check-all', event, checkInfo.checkedRows);
   };
   return { onCheck, onCheckAll };
 };
@@ -614,7 +626,6 @@ export const treeEvent = (params) => {
         }
         if (node.children) {
           node.hasChild = true;
-          node.children = cloneDeep(node.children);
           node.children.forEach(child =>
             setNodeData({
               node: child,
@@ -655,7 +666,7 @@ export const treeEvent = (params) => {
 };
 
 export const filterEvent = (params) => {
-  const { checkInfo, stores, getConvertValue, onResize } = params;
+  const { stores, filterInfo, getConvertValue, onResize, checkHeader } = params;
   const makeParentShow = (data) => {
     if (!data?.parent) {
       return;
@@ -689,7 +700,9 @@ export const filterEvent = (params) => {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      let store = stores.treeStore;
+      filterInfo.isSearch = false;
+      filterInfo.searchWord = searchWord;
+      const store = stores.treeStore;
       store.forEach((row) => {
         row.show = false;
         row.isFilter = false;
@@ -726,22 +739,18 @@ export const filterEvent = (params) => {
           makeParentShow(row);
           makeChildShow(row);
         });
+        filterInfo.isSearch = true;
       } else {
         store.forEach((row) => {
           row.show = true;
           row.isFilter = false;
         });
         store.forEach((row) => {
-          if (row.hasChild) {
-            makeChildShow(row);
-          }
+          makeParentShow(row);
+          makeChildShow(row);
         });
       }
-      if (stores.searchStore.length > 0) {
-        store = stores.searchStore;
-      }
-      const isCheck = store.length > 0 && store.every(n => n.checked === true);
-      checkInfo.isHeaderChecked = isCheck;
+      checkHeader(stores.store);
       onResize();
     }, 500);
   };