evui 3.4.17 → 3.4.19

package/package.json

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

package/src/common/utils.js

@@ -147,6 +147,5 @@ export function mobileCheck() {
       navigator.userAgent,
     )
     || 'ontouchstart' in window
-    || navigator.maxTouchPoints
   );
 }

package/src/components/grid/Grid.vue

@@ -8,17 +8,15 @@
     <!-- Toolbar -->
     <toolbar>
       <template #toolbarWrapper>
-        <!-- Filtering Column Items -->
+        <!-- Filtering Items -->
         <div
-          class="filtering-column-items"
-          :style="{ width: `${filteringItemsWidth + 40}px` }"
+          class="filtering"
+          :style="{ width: `${filteringItemsWidth}px` }"
         >
           <div
             v-if="isFiltering && Object.keys(filteringItemsByColumn).length"
             ref="filteringItemsRef"
-            v-clickoutside="() => { if (!isShowColumnFilteringItems) onExpandFilteringItems(); }"
             class="filtering-items"
-            :style="filteringItemsStyle"
           >
             <template
               v-for="(field, idx) in Object.keys(filteringItemsByColumn)"
@@ -27,13 +25,13 @@
               <template v-if="idx === 0">
                 <div
                   class="filtering-items__item filtering-items__item--filter"
-                  @click="onExpandFilteringItems"
+                  @click.stop="onExpandFilteringItems"
                 >
                   <ev-icon
                     icon="ev-icon-filter-list"
                     class="filtering-items-expand"
                   />
-                  <span class="filtering-items__item--title">
+                  <span>
                     Filter ({{ Object.keys(filteringItemsByColumn).length }})
                   </span>
                   <ev-icon
@@ -48,11 +46,12 @@
                 v-if="idx === 1"
                 v-model="columnOperator"
                 :items="operatorItems"
-                class="ev-grid-filter-setting__row--operator"
+                class="filtering-items__item--operator"
                 @change="onChangeOperator"
               />
               <div
                 class="filtering-items__item non-display"
+                :data-field="field"
                 @click.stop="onClickFilteringItem({
                   caption: getFilteringItemByField(field)?.caption,
                   field: field,
@@ -61,13 +60,13 @@
               >
                 <span class="filtering-items__item--title">
                   {{ getFilteringItemByField(field)?.caption }}
+                  {{ getFilteringItemByField(field)?.comparison }}
                 </span>
                 <span
                   v-if="filteringItemsByColumn[field].length < 2"
                   class="filtering-items__item--value"
                   :title="getFilteringItemByField(field)?.value"
                 >
-                  {{ getFilteringItemByField(field)?.comparison }}
                   {{ getFilteringItemByField(field)?.value }}
                 </span>
                 <span
@@ -83,62 +82,61 @@
                 />
               </div>
             </template>
+            <!-- +N Count-->
+            <div
+              v-if="isShowColumnFilteringItems && Object.keys(filteringItemsByColumn).length
+                && hiddenFilteringItemsCount > 0"
+              class="filtering-items__item filtering-items__item--count"
+              @click="onExpandFilteringItems"
+            >
+              + {{ hiddenFilteringItemsCount }}
+            </div>
           </div>
-          <!-- +N Count-->
           <div
-            v-if="isShowColumnFilteringItems
-            && Object.keys(filteringItemsByColumn).length && hiddenFilteringItemsCount > 0"
-            class="filtering-items filtering-items--count"
-            @click="onExpandFilteringItems"
+            v-if="!isShowColumnFilteringItems && Object.keys(hiddenFilteringItemsByColumn).length"
+            ref="hiddenFilteringItemsRef"
+            v-clickoutside="() => { if (!isShowColumnFilteringItems) onExpandFilteringItems(); }"
+            class="filtering-items filtering-items__hidden-items"
+            :style="filteringItemsStyle"
           >
-            + {{ hiddenFilteringItemsCount }}
-          </div>
-        </div>
-        <!-- Filtering Items Box -->
-        <template v-if="isFiltering && isShowFilteringItemsBox">
-          <teleport to="#ev-grid-filtering-items-modal">
-            <section
-              v-clickoutside="() => { isShowFilteringItemsBox = false }"
-              class="ev-grid-filtering-items"
-              :style="{
-                top: boxTop,
-                left: boxLeft,
-              }"
+            <template
+              v-for="(field, idx) in Object.keys(hiddenFilteringItemsByColumn)"
+              :key="idx"
             >
-              <template
-                v-for="(field, idx) in selectedFilteringItems"
-                :key="idx"
+              <div
+                class="filtering-items__item"
+                @click.stop="onClickFilteringItem({
+                  caption: getFilteringItemByField(field)?.caption,
+                  field: field,
+                },
+                hiddenFilteringItemsByColumn[field])"
               >
-                <div
-                  v-if="idx === 1"
-                  class="filtering-items__item filtering-items__item--operator"
+                <span class="filtering-items__item--title">
+                  {{ getFilteringItemByField(field)?.caption }}
+                  {{ getFilteringItemByField(field)?.comparison }}
+                </span>
+                <span
+                  v-if="hiddenFilteringItemsByColumn[field].length < 2"
+                  class="filtering-items__item--value"
+                  :title="getFilteringItemByField(field)?.value"
                 >
-                  <span class="filtering-items__item--value">
-                    {{ field.operator?.toUpperCase() }}
-                  </span>
-                </div>
-                <div class="filtering-items__item">
-                  <span class="filtering-items__item--title">
-                    {{ selectedFilteringColumn.caption }}
-                  </span>
-                  <span class="filtering-items__item--value">
-                    {{ field.comparison }}
-                    {{ field.value.toLocaleString('en') }}
-                  </span>
-                  <ev-icon
-                    class="filtering-items__item--remove"
-                    icon="ev-icon-s-close"
-                    @click="removeFiltering(
-                      {
-                        field: selectedFilteringColumn.field,
-                        idx,
-                      })"
-                  />
-                </div>
-              </template>
-            </section>
-          </teleport>
-        </template>
+                  {{ getFilteringItemByField(field)?.value }}
+                </span>
+                <span
+                  v-else
+                  class="filtering-items__item--value"
+                >
+                  + {{ hiddenFilteringItemsByColumn[field].length }}
+                </span>
+                <ev-icon
+                  class="filtering-items__item--remove"
+                  icon="ev-icon-s-close"
+                  @click="onApplyFilter(field, [], true)"
+                />
+              </div>
+            </template>
+          </div>
+        </div>
         <grid-option-button
           v-if="useColumnSetting"
           class="column-setting__icon"
@@ -501,6 +499,7 @@
     :show-page-info="showPageInfo"
     :order="order"
   />
+  <!-- Filter Setting -->
   <filter-setting
     v-model:is-show="isShowFilterSetting"
     v-model:items="filteringItemsByColumn"
@@ -522,9 +521,10 @@ import {
   nextTick,
   ref,
   provide,
-  onBeforeMount,
+  onBeforeMount, onUnmounted,
 } from 'vue';
 import { clickoutside } from '@/directives/clickoutside';
+import { cloneDeep } from 'lodash-es';
 import Toolbar from './grid.toolbar';
 import GridPagination from './grid.pagination';
 import GridSummary from './grid.summary';
@@ -620,6 +620,7 @@ export default {
     const borderStyle = computed(() => (props.option.style?.border || ''));
     const highlightIdx = computed(() => (props.option.style?.highlight ?? -1));
     const rowMinHeight = props.option.rowMinHeight || 35;
+    const filteringItemsWidth = ref(0);
     const elementInfo = reactive({
       body: null,
       header: null,
@@ -660,9 +661,9 @@ export default {
       movedColumns: [],
       originColumns: computed(() => props.columns.map((column, index) => ({ index, ...column }))),
       orderedColumns: computed(() => {
-        const columns = stores.filteredColumns.length
-          ? stores.filteredColumns : stores.originColumns;
-        return stores.movedColumns.length ? stores.movedColumns : columns;
+        const columns = stores.movedColumns.length
+          ? stores.movedColumns : stores.originColumns;
+        return stores.filteredColumns.length ? stores.filteredColumns : columns;
       }),
     });
     const pageInfo = reactive({
@@ -868,17 +869,38 @@ export default {
 
     provide('toolbarWrapper', toolbarWrapper);
 
-    const filteringItemsWidth = ref(0);
+    const onMouseWheel = (e) => {
+      if (e.type === 'wheel') {
+        contextInfo.menu?.hide(e);
+      }
+      if (e.type === 'scroll' && !e.target.classList?.contains('table-body')
+      && !e.target.offsetParent?.classList?.contains('ev-grid-column-setting')) {
+        contextInfo.columnMenu?.hide(e);
+        columnSettingInfo.isShowColumnSetting = false;
+        filterInfo.isShowFilterSetting = false;
+      }
+    };
+
     onMounted(() => {
       calculatedColumn();
       setStore(props.rows);
+      document.addEventListener('wheel', onMouseWheel, { capture: false });
+      document.addEventListener('scroll', onMouseWheel, { capture: true });
     });
+
+    onUnmounted(() => {
+      document.removeEventListener('wheel', onMouseWheel);
+      document.removeEventListener('scroll', onMouseWheel);
+    });
+
     onActivated(() => {
       onResize();
     });
+
     onUpdated(() => {
       filteringItemsWidth.value = elementInfo['grid-wrapper']?.offsetWidth / 1.5 || 0;
     });
+
     watch(
       () => props.columns,
       () => {
@@ -1062,6 +1084,8 @@ export default {
     const filteringItemsRef = ref(null);
     const isShowFilteringItemsBox = ref(false);
     const isShowColumnFilteringItems = ref(false);
+    const hiddenFilteringItemsRef = ref(null);
+    const hiddenFilteringItemsByColumn = ref({});
     const selectedFilteringColumn = reactive({
       caption: '',
       field: '',
@@ -1092,29 +1116,32 @@ export default {
       setStore([], false);
     };
 
-    const setColumnFilteringItems = (flag) => {
-      if (flag && isShowColumnFilteringItems.value) {
+    const setColumnFilteringItems = async (isInit) => {
+      if (isInit && isShowColumnFilteringItems.value) {
         hiddenFilteringItemsCount.value = 0;
       }
       const conditionItems = filteringItemsRef.value
         ?.getElementsByClassName('filtering-items__item');
       const hiddenItemList = [];
+      let sumWidth = 0;
       if (conditionItems) {
         for (let i = 0; i < conditionItems.length; i++) {
           const itemEl = conditionItems[i];
           itemEl.classList.remove('non-display');
-          const boxTop = filteringItemsRef.value.getBoundingClientRect()?.top;
-          const boxScrollTop = filteringItemsRef.value.scrollTop;
-          const { top } = itemEl.getBoundingClientRect();
-          if (isShowColumnFilteringItems.value
-            && (top - boxTop > itemEl.offsetHeight - boxScrollTop)) {
-            if (flag) {
-              if (i === 0) {
-                hiddenFilteringItemsCount.value = 0;
-              }
-              hiddenFilteringItemsCount.value++;
-            }
+          const boxWidth = filteringItemsRef.value.getBoundingClientRect()?.width;
+          const { width } = itemEl.getBoundingClientRect();
+          sumWidth += width + 10;
+          if (boxWidth - 150 <= sumWidth
+            && !itemEl.classList.contains('filtering-items__item--count')) {
+            hiddenFilteringItemsCount.value++;
             hiddenItemList.push(itemEl);
+            hiddenFilteringItemsByColumn.value = {
+              ...hiddenFilteringItemsByColumn.value,
+              [itemEl.dataset.field]:
+                cloneDeep(filterInfo.filteringItemsByColumn[itemEl.dataset.field]),
+            };
+          } else {
+            delete hiddenFilteringItemsByColumn.value[itemEl.dataset.field];
           }
         }
         conditionItems.forEach((item) => {
@@ -1126,6 +1153,7 @@ export default {
 
     const onApplyFilter = async (field, list) => {
       if (!list?.length) {
+        delete hiddenFilteringItemsByColumn.value[field];
         delete filterInfo.filteringItemsByColumn[field];
       } else {
         filterInfo.filteringItemsByColumn[field] = list;
@@ -1138,41 +1166,29 @@ export default {
       setStore([], false);
     };
 
+    let expandTimer = null;
     const onExpandFilteringItems = () => {
-      isShowColumnFilteringItems.value = !isShowColumnFilteringItems.value;
-      setColumnFilteringItems(isShowColumnFilteringItems.value);
-    };
-
-    const removeFiltering = ({ field, idx }) => {
-      filterInfo.filteringItemsByColumn[field]?.splice(idx, 1);
-      if (!filterInfo.filteringItemsByColumn[field].length) {
-        delete filterInfo.filteringItemsByColumn[field];
-        isShowFilteringItemsBox.value = false;
+      if (expandTimer) {
+        clearTimeout(expandTimer);
       }
-      setColumnFilteringItems(true);
-      stores.filterStore = [];
-      setStore([], false);
+      expandTimer = setTimeout(() => {
+        isShowColumnFilteringItems.value = !isShowColumnFilteringItems.value;
+        setColumnFilteringItems(isShowColumnFilteringItems.value);
+      }, 150);
     };
 
     const removeAllFiltering = () => {
       filterInfo.filteringColumn = null;
       filterInfo.filteringItemsByColumn = {};
+      hiddenFilteringItemsByColumn.value = {};
       stores.filterStore = [];
       setStore([], false);
     };
 
-    const filteringItemsStyle = computed(() => {
-      if (isShowColumnFilteringItems.value) {
-        return {
-          width: `${filteringItemsWidth.value}px`,
-          background: 'none',
-        };
-      }
-      return {
-        width: `${filteringItemsWidth.value}px`,
-        'overflow-y': 'auto',
-      };
-    });
+    const filteringItemsStyle = computed(() => ({
+      width: `${filteringItemsWidth.value}px`,
+      top: `${filteringItemsRef.value?.getBoundingClientRect().height || 0}px`,
+    }));
 
     const getFilteringItemByField = (field) => {
       const filteringFieldInfo = filterInfo.filteringItemsByColumn[field];
@@ -1248,7 +1264,8 @@ export default {
       filteringItemsStyle,
       hiddenFilteringItemsCount,
       ...toRefs(filteringItemsBoxPosition),
-      removeFiltering,
+      hiddenFilteringItemsRef,
+      hiddenFilteringItemsByColumn,
       removeAllFiltering,
       onExpandFilteringItems,
       setColumnFilteringItems,

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

@@ -251,24 +251,32 @@
   text-align: center;
 }
 
-.filtering-column-items {
+.filtering {
   position: relative;
 }
 
 .filtering-items {
   display: flex;
+  position: absolute;
+  width: inherit;
   flex-flow: row wrap;
   gap: 10px;
-  position: absolute;
   padding: 8px;
   flex-direction: row;
   align-items: center;
   z-index: 1;
   border-radius: 4px;
-  max-height: 106px;
+  max-height: 120px;
+  background: none;
 
-  @include evThemify() {
-    background: evThemed('grid-background');
+  &__hidden-items {
+    max-height: 106px;
+    overflow-y: auto;
+
+    @include evThemify() {
+      border: 1px solid evThemed('grid-bottom-border');
+      background: evThemed('grid-background');
+    }
   }
   &-expand {
     &:hover {
@@ -291,37 +299,41 @@
     }
   }
   &__item {
-    padding: 4px;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 10px;
+    border: 1px solid #CED4DA;
     border-radius: 4px;
     background: #EAF2FA;
+    font-size: 13px;
+    text-align: center;
     &:hover {
       cursor: pointer;
-      padding: 3.5px;
       border: 1px solid #198FFF;
-      box-sizing: border-box;
     }
     &--filter {
       font-weight: bold;
       border: 1px solid #198FFF;
+      color: #198FFF;
       i {
-        color: #0077FF;
         vertical-align: middle;
       }
     }
     &--title {
-      color: #0077FF;
       margin-right: 6px;
       vertical-align: middle;
     }
     &--value {
       display: inline-block;
       max-width: 80px;
+      color: #198FFF;
       text-overflow: ellipsis;
       overflow: hidden;
       vertical-align: middle;
       white-space: nowrap;
     }
     &--remove {
+      color: initial;
       vertical-align: middle;
       margin-left: 6px;
       &:hover {
@@ -329,9 +341,11 @@
       }
     }
     &--operator {
-      width: 50px;
-      background: #DCDFE6;
-      text-align: center;
+      width: 80px;
+      height: 26px !important;
+      .ev-input {
+        height: 26px !important;
+      }
       &:hover {
         cursor: initial;
         margin: inherit;

package/src/components/grid/uses.js

@@ -1154,16 +1154,22 @@ export const columnSettingEvent = (params) => {
     }
     onResize();
   };
-  const onApplyColumn = (columns) => {
-    columnSettingInfo.hiddenColumn = '';
+  const onApplyColumn = (columnNames) => {
+    const columns = stores.orderedColumns.filter(col => !col.hide);
+    const isSameColumn = columnNames.length === columns.length
+      && columns.every(col => columnNames.includes(col.field));
+
+    if (isSameColumn) {
+      return;
+    }
+
     stores.filteredColumns = stores.originColumns
-      .filter(col => columns.includes(col.field) || !col.caption);
+      .filter(col => columnNames.includes(col.field) || !col.caption);
+    columnSettingInfo.hiddenColumn = '';
     setFilteringColumn();
   };
   const setColumnHidden = (val) => {
-    const columns = (columnSettingInfo.isFilteringColumn
-      ? stores.filteredColumns : stores.originColumns)
-      .filter(col => !col.hide);
+    const columns = stores.orderedColumns.filter(col => !col.hide);
 
     if (columns.length === 1) {
       return;
@@ -1180,10 +1186,18 @@ export const dragEvent = ({ stores }) => {
   const setColumnMoving = (currentIndex, droppedIndex) => {
     const oldIndex = parseInt(currentIndex, 10);
     const newPositionIndex = parseInt(droppedIndex, 10);
-    const columns = stores.filteredColumns.length ? stores.filteredColumns : stores.orderedColumns;
+
+    const columns = [...stores.orderedColumns];
     const movedColumn = columns[oldIndex];
+
     columns.splice(oldIndex, 1);
-    stores.movedColumns = columns.splice(newPositionIndex, 0, movedColumn);
+    columns.splice(newPositionIndex, 0, movedColumn);
+
+    if (stores.filteredColumns.length) {
+      stores.filteredColumns = columns;
+    } else {
+      stores.movedColumns = columns;
+    }
   };
   const onDragStart = (e) => {
     e.dataTransfer.setData('text/plain', e.currentTarget.dataset.index);

package/src/components/treeGrid/TreeGrid.vue

@@ -237,7 +237,18 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick, ref, provide } from 'vue';
+import {
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onActivated,
+  nextTick,
+  ref,
+  provide,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import treeGridNode from './TreeGridNode';
 import Toolbar from './treeGrid.toolbar';
 import GridPagination from '../grid/grid.pagination';
@@ -545,9 +556,28 @@ export default {
 
     provide('toolbarWrapper', toolbarWrapper);
 
+    const onMouseWheel = (e) => {
+      if (e.type === 'wheel') {
+        contextInfo.menu?.hide(e);
+      }
+      if (e.type === 'scroll' && !e.target.classList?.contains('table-body')
+        && !e.target.offsetParent?.classList?.contains('ev-grid-column-setting')) {
+        contextInfo.columnMenu?.hide(e);
+        columnSettingInfo.isShowColumnSetting = false;
+      }
+    };
+
     onMounted(() => {
       stores.treeStore = setTreeNodeStore();
+      document.addEventListener('wheel', onMouseWheel, { capture: false });
+      document.addEventListener('scroll', onMouseWheel, { capture: true });
     });
+
+    onUnmounted(() => {
+      document.removeEventListener('wheel', onMouseWheel);
+      document.removeEventListener('scroll', onMouseWheel);
+    });
+
     onActivated(() => {
       onResize();
     });