evui 3.4.18 → 3.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.18",
+  "version": "3.4.20",
   "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

@@ -13,6 +13,13 @@
           class="filtering"
           :style="{ width: `${filteringItemsWidth}px` }"
         >
+          <div
+            v-if="isFiltering && !Object.keys(filteringItemsByColumn).length"
+            class="filtering-items filtering-items--used"
+          >
+            <ev-icon icon="ev-icon-filter-list" />
+            <span>Filter</span>
+          </div>
           <div
             v-if="isFiltering && Object.keys(filteringItemsByColumn).length"
             ref="filteringItemsRef"
@@ -521,7 +528,7 @@ import {
   nextTick,
   ref,
   provide,
-  onBeforeMount,
+  onBeforeMount, onUnmounted,
 } from 'vue';
 import { clickoutside } from '@/directives/clickoutside';
 import { cloneDeep } from 'lodash-es';
@@ -620,6 +627,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 +668,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 +876,39 @@ 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')
+      && !e.target.offsetParent?.classList?.contains('ev-text-field-wrapper')) {
+        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,
       () => {

package/src/components/grid/grid.toolbar.vue

@@ -26,7 +26,7 @@ export default {
 }
 .gridToolbar > .column-setting__icon {
   float: right;
-  margin: 0 5px;
+  margin: 10px 5px;
   cursor: pointer;
   &:hover {
     opacity: 0.6;

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

@@ -316,7 +316,9 @@
       border: 1px solid #198FFF;
       color: #198FFF;
       i {
-        vertical-align: middle;
+        &:not(.filtering-items-expand) {
+          vertical-align: middle;
+        }
       }
     }
     &--title {

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

package/src/components/treeGrid/treeGrid.toolbar.vue

@@ -26,7 +26,7 @@ export default {
 }
 .tree-grid-toolbar > .column-setting__icon {
   float: right;
-  margin: 0 5px;
+  margin: 10px 5px;
   cursor: pointer;
   &:hover {
     opacity: 0.6;