evui 3.3.62 → 3.3.63

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

@@ -1,5 +1,6 @@
 import { numberWithComma } from '@/common/utils';
 import { cloneDeep, defaultsDeep, inRange } from 'lodash-es';
+import dayjs from 'dayjs';
 
 const modules = {
   /**
@@ -18,6 +19,7 @@ const modules = {
         return;
       }
 
+      const args = { e };
       const { indicator, tooltip, type } = this.options;
       const offset = this.getMousePosition(e);
       const hitInfo = this.findHitItem(offset);
@@ -61,6 +63,14 @@ const modules = {
       if (indicator.use && type !== 'pie' && type !== 'scatter' && type !== 'heatMap') {
         this.drawIndicator(offset, indicator.color);
       }
+
+      if (typeof this.listeners['mouse-move'] === 'function') {
+        if (type !== 'pie') {
+          args.curMouseTargetVal = this.getCurMouseTargetVal(offset, hitInfo);
+        }
+
+        this.listeners['mouse-move'](args);
+      }
     };
 
     /**
@@ -196,7 +206,7 @@ const modules = {
           if (useSelectItem) {
             setSelectedItemInfo();
           } else if (useSelectLabel) {
-            setSelectedLabelInfo();
+            setSelectedLabelInfo(this.options.horizontal ? 'yAxis' : 'xAxis');
           }
           break;
         }
@@ -217,7 +227,7 @@ const modules = {
           if (useSelectItem && useSelectLabel) {
             const { useBothAxis } = selectLabelOpt;
 
-            const location = this.getClickedLocation(offset);
+            const location = this.getCurMouseLocation(offset);
 
             if (location === 'chartBackground') {
               this.clearSelectedLabelInfo();
@@ -233,21 +243,24 @@ const modules = {
                   return;
                 }
               }
-              setSelectedLabelInfo(location, useBothAxis);
+              setSelectedLabelInfo(location);
             }
           } else if (useSelectItem) {
             setSelectedItemInfo();
           } else if (useSelectLabel) {
             const { useBothAxis } = selectLabelOpt;
-            const location = this.getClickedLocation(offset);
+            const location = this.getCurMouseLocation(offset);
 
-            if (!useBothAxis && location !== 'chartBackground') {
+            if ((location === 'yAxis' || location === 'xAxis') && !useBothAxis) {
               const selectLabelAxis = isHorizontal ? 'yAxis' : 'xAxis';
               if (location !== selectLabelAxis) {
                 return;
               }
             }
-            setSelectedLabelInfo(useBothAxis ? location : null);
+
+            if (location !== 'canvas') {
+              setSelectedLabelInfo(useBothAxis ? location : null);
+            }
           }
           break;
         }
@@ -483,6 +496,61 @@ const modules = {
     return [e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height];
   },
 
+  /**
+   * Get current mouse target value on canvas
+   * @param {array} offset  return value from getMousePosition()
+   * @param {object} hitInfo  return value from findHitItem()
+   *
+   * @returns {object} current mouse target value
+   */
+  getCurMouseTargetVal(offset, hitInfo) {
+    const location = this.getCurMouseLocation(offset);
+
+    const curMouseTargetVal = {
+      location,
+      labelIdx: -1,
+      labelVal: '',
+      dataIdx: -1,
+      maxDataVal: '',
+      originVal: '',
+    };
+
+    if (location === 'chartBackground') {
+      const { maxHighlight, items } = hitInfo;
+      if (maxHighlight?.length) {
+        const [seriesName, value] = maxHighlight;
+
+        if (items[seriesName]) {
+          curMouseTargetVal.dataIdx = items[seriesName].index;
+          curMouseTargetVal.maxDataVal = value;
+          curMouseTargetVal.originVal = hitInfo;
+        }
+      }
+    } else if (location === 'xAxis' || location === 'yAxis') {
+      const { axesX, axesY } = this.options;
+
+      const setCurMouseLabelVal = (axes, labelIdx, labelVal) => {
+        curMouseTargetVal.labelIdx = labelIdx;
+        curMouseTargetVal.labelVal = axes[0].type === 'time' ? dayjs(labelVal).format(axes[0].timeFormat) : labelVal;
+        curMouseTargetVal.originVal = axes[0].type === 'time' ? dayjs(labelVal) : labelVal;
+      };
+
+      const setAxisLabelInfo = (targetAxis) => {
+        const {
+          labelIndex,
+        } = this.getLabelInfoByPosition(offset, location);
+        const { labelVal, labelIdx } = this.getCurMouseLabelVal(targetAxis, offset, labelIndex);
+        const axesOpt = targetAxis === 'xAxis' ? axesX : axesY;
+
+        setCurMouseLabelVal(axesOpt, labelIdx, labelVal);
+      };
+
+      setAxisLabelInfo(location);
+    }
+
+    return curMouseTargetVal;
+  },
+
   /**
    * Find graph item on mouse position
    * @param {array} offset    return value from getMousePosition()
@@ -568,8 +636,7 @@ const modules = {
    * get formatted value for tooltip
    * @param seriesName
    * @param value
-   * @param x
-   * @param y
+   * @param itemData
    * @returns {string}
    */
   getFormattedTooltipValue({ seriesName, value, itemData }) {
@@ -725,7 +792,6 @@ const modules = {
     this.render();
   },
 
-
   /**
    * Get each series data and label text
    * @param labelIndexList{number[]}
@@ -951,11 +1017,11 @@ const modules = {
   },
 
   /**
-   * Get mouse click location (xAxis, yAxis, chartBackground, canvas)
+   * Get current mouse location (xAxis, yAxis, chartBackground, canvas)
    * @param offset
    * @returns {string}
    */
-  getClickedLocation(offset) {
+  getCurMouseLocation(offset) {
     const [offsetX, offsetY] = offset;
 
     const aPos = {

package/src/components/chart/uses.js

@@ -323,6 +323,10 @@ export const useModel = (injectGroupSelectedLabel) => {
       await nextTick();
       emit('drag-select', e);
     },
+    'mouse-move': async (e) => {
+      await nextTick();
+      emit('mouse-move', e);
+    },
   };
 
   return {

package/src/components/grid/Grid.vue

@@ -83,13 +83,6 @@
                 && hasVerticalScrollBar && hasHorizontalScrollBar) ? `${scrollWidth}px` : '0px',
               }"
             >
-              <!-- Filter Status -->
-              <span
-                v-if="isFiltering && filterList[column.field]?.find(item => item.use)"
-                class="column-filter-status"
-              >
-                <ev-icon icon="ev-icon-filter"/>
-              </span>
               <!-- Column Name -->
               <span
                 :title="column.caption"
@@ -109,14 +102,6 @@
                   />
                 </template>
               </span>
-              <!-- Filter Button -->
-              <span
-                v-if="isFiltering"
-                class="column-filter"
-                @click.stop="onClickFilter(column)"
-              >
-                <ev-icon icon="ev-icon-hamburger2"/>
-              </span>
               <!-- Column Resize -->
               <span
                 class="column-resize"
@@ -238,15 +223,6 @@
         ref="resizeLine"
         class="table-resize-line"
       />
-      <!-- Filter Window -->
-      <filter-window
-        v-show="showFilterWindow"
-        :is-show="showFilterWindow"
-        :target-column="currentFilter.column"
-        :filter-items="currentFilter.items"
-        @apply-filter="onApplyFilter"
-        @before-close="onCloseFilterWindow"
-      />
     </div>
   </div>
   <!-- Summary -->
@@ -277,7 +253,6 @@
 <script>
 import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick, ref } from 'vue';
 import Toolbar from './grid.toolbar';
-import FilterWindow from './grid.filter.window';
 import GridPagination from './grid.pagination';
 import GridSummary from './grid.summary';
 import {
@@ -297,7 +272,6 @@ export default {
   name: 'EvGrid',
   components: {
     Toolbar,
-    FilterWindow,
     GridPagination,
     GridSummary,
   },
@@ -366,26 +340,14 @@ export default {
       'grid-wrapper': null,
     });
     const filterInfo = reactive({
-      filterList: {},
-      isFiltering: computed(() => (props.option.useFilter ?? false)),
-      setFiltering: false,
-      showFilterWindow: false,
-      currentFilter: {
-        column: {},
-        items: [],
-      },
       isSearch: false,
       searchWord: '',
     });
     const stores = reactive({
       viewStore: [],
       originStore: [],
-      filterStore: [],
       pagingStore: [],
-      store: computed(() => {
-        const store = filterInfo.isFiltering ? stores.filterStore : stores.originStore;
-        return filterInfo.isSearch ? stores.searchStore : store;
-      }),
+      store: computed(() => (filterInfo.isSearch ? stores.searchStore : stores.originStore)),
       orderedColumns: computed(() =>
         (props.columns.map((column, index) => ({ index, ...column })))),
     });
@@ -396,7 +358,8 @@ export default {
       startIndex: 0,
       prevPage: 0,
       currentPage: 0,
-      pageTotal: computed(() => (props.option.page?.total || 0)),
+      pageTotal: computed(() =>
+        (props.option.page?.useClient ? stores.store.length : props.option.page?.total)),
       perPage: computed(() => (props.option.page?.perPage || 20)),
       visiblePage: computed(() => (props.option.page?.visiblePage || 8)),
       order: computed(() => (props.option.page?.order || 'center')),
@@ -425,11 +388,6 @@ export default {
     const selectInfo = reactive({
       selectedRow: props.selected,
       useSelect: computed(() => props.option?.useSelection?.use ?? true),
-      limitCount: computed(() => {
-        let limit = props.option?.useSelection?.limitCount;
-        limit = !!limit && limit >= 2 ? limit : 0;
-        return limit;
-      }),
       multiple: computed(() => props.option?.useSelection?.multiple ?? false),
     });
     const sortInfo = reactive({
@@ -499,7 +457,7 @@ export default {
     const {
       onRowClick,
       onRowDblClick,
-    } = clickEvent({ selectInfo });
+    } = clickEvent({ selectInfo, stores });
 
     const {
       onCheck,
@@ -512,17 +470,12 @@ export default {
     } = sortEvent({ sortInfo, stores, getColumnIndex, updatePagingInfo });
 
     const {
-      onClickFilter,
-      onCloseFilterWindow,
-      onApplyFilter,
-      setFilter,
       onSearch,
     } = filterEvent({
       filterInfo,
       stores,
       checkInfo,
       pageInfo,
-      getColumnIndex,
       getConvertValue,
       updateVScroll,
       getPagingData,
@@ -536,10 +489,8 @@ export default {
       checkInfo,
       stores,
       sortInfo,
-      filterInfo,
       elementInfo,
       setSort,
-      setFilter,
       updateVScroll,
     });
 
@@ -562,7 +513,11 @@ export default {
     const {
       setContextMenu,
       onContextMenu,
-    } = contextMenuEvent({ contextInfo, stores, filterInfo, selectInfo, setStore });
+    } = contextMenuEvent({
+      contextInfo,
+      stores,
+      selectInfo,
+    });
 
     onMounted(() => {
       calculatedColumn();
@@ -593,15 +548,6 @@ export default {
         }
       },
     );
-    watch(
-      () => filterInfo.setFiltering,
-      (value) => {
-        if (value) {
-          setStore([], false);
-          filterInfo.setFiltering = !value;
-        }
-      },
-    );
     watch(
       () => props.rows,
       (value) => {
@@ -716,13 +662,6 @@ export default {
         onResize();
       },
     );
-    watch(
-      () => filterInfo.isFiltering,
-      () => {
-        stores.filterStore = [];
-        setStore([], false);
-      },
-    );
     watch(
       () => props.option.searchValue,
       (value) => {
@@ -795,10 +734,6 @@ export default {
       onCheckAll,
       onSort,
       setSort,
-      onClickFilter,
-      onCloseFilterWindow,
-      onApplyFilter,
-      setFilter,
       setStore,
       setContextMenu,
       onContextMenu,

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="description gridToolbar">
+  <div class="gridToolbar">
     <slot name="toolbarWrapper"></slot>
   </div>
 </template>
@@ -13,6 +13,7 @@ export default {
 <style lang="scss">
 @import '../../style/index.scss';
 .gridToolbar {
+  height: 30px;
   margin-bottom: 10px;
 }
 .gridToolbar > .search {

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

@@ -70,10 +70,6 @@
       color: evThemed('font-color-base');
     }
   }
-  .ev-icon-filter {
-    font-size: 13px;
-    color: #005CC8;
-  }
 }
 
 .column-name {
@@ -90,41 +86,6 @@
   }
 }
 
-.column-filter {
-  display: none;
-  position: absolute;
-  right: 0;
-  background-color: transparent;
-  i {
-    margin-right: 2px;
-    font-size: 14px;
-    vertical-align: middle;
-
-    @include evThemify() {
-      color: evThemed('font-color-base');
-    }
-  }
-}
-
-.column:hover .column-filter {
-  display: block;
-  cursor: pointer;
-}
-
-.column-filter-status {
-  position: absolute;
-  left: 0;
-  background-color: transparent;
-  .ei {
-    font-size: 10px;
-    vertical-align: top;
-
-    @include evThemify() {
-      color: evThemed('color-primary');
-    }
-  }
-}
-
 .column-resize {
   position: absolute;
   bottom: 0;