evui 3.2.0 → 3.3.0

package/package.json

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

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

@@ -48,7 +48,9 @@ const modules = {
       this.overlayClear();
 
       if (Object.keys(hitInfo.items).length) {
-        this.drawItemsHighlight(hitInfo, ctx);
+        if (this.options.type !== 'scatter' || tooltip.use) {
+          this.drawItemsHighlight(hitInfo, ctx);
+        }
 
         if (tooltip.use) {
           this.setTooltipLayoutPosition(hitInfo, e);
@@ -95,7 +97,7 @@ const modules = {
      */
     this.onDblClick = (e) => {
       const selectItem = this.options.selectItem;
-      const args = {};
+      const args = { e };
 
       if (selectItem.use) {
         const offset = this.getMousePosition(e);
@@ -120,8 +122,7 @@ const modules = {
      * @returns {undefined}
      */
     this.onClick = (e) => {
-      const args = {};
-
+      const args = { e };
       if (this.options.selectItem.use) {
         const offset = this.getMousePosition(e);
         const hitInfo = this.findClickedData(offset);
@@ -134,7 +135,9 @@ const modules = {
       }
 
       if (typeof this.listeners.click === 'function') {
-        this.listeners.click(args);
+        if (!this.dragInfoBackup) {
+          this.listeners.click(args);
+        }
       }
     };
 
@@ -254,11 +257,12 @@ const modules = {
      *
      * @returns {undefined}
      */
-    const dragEnd = () => {
+    const dragEnd = (e) => {
       const dragInfo = this.dragInfo;
 
-      if (dragInfo?.isMove) {
+      if (dragInfo?.isMove && dragInfo?.width > 1 && dragInfo?.height > 1) {
         const args = {
+          e,
           data: this.findSelectedItems(dragInfo),
           range: this.getSelectionRage(dragInfo),
         };
@@ -577,10 +581,10 @@ const modules = {
     const yMax = dataRangeY.graphMin + graphHeight * (1 - yMaxRatio);
 
     return {
-      xMin: +parseFloat(xMin).toFixed(3),
-      xMax: +parseFloat(xMax).toFixed(3),
-      yMin: +parseFloat(yMin).toFixed(3),
-      yMax: +parseFloat(yMax).toFixed(3),
+      xMin: Math.max(+parseFloat(xMin).toFixed(3), dataRangeX.graphMin),
+      xMax: Math.min(+parseFloat(xMax).toFixed(3), dataRangeX.graphMax),
+      yMin: Math.max(+parseFloat(yMin).toFixed(3), dataRangeY.graphMin),
+      yMax: Math.min(+parseFloat(yMax).toFixed(3), dataRangeY.graphMax),
     };
   },
 

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

@@ -9,12 +9,15 @@ const modules = {
     this.legendDOM.className = 'ev-chart-legend';
     this.legendBoxDOM = document.createElement('div');
     this.legendBoxDOM.className = 'ev-chart-legend-box';
-    this.resizeDOM = document.createElement('div');
-    this.resizeDOM.className = 'ev-chart-resize-bar';
-    this.ghostDOM = document.createElement('div');
-    this.ghostDOM.className = 'ev-chart-resize-ghost';
 
-    this.wrapperDOM.appendChild(this.resizeDOM);
+    if (this.options?.legend?.allowResize) {
+      this.resizeDOM = document.createElement('div');
+      this.resizeDOM.className = 'ev-chart-resize-bar';
+      this.ghostDOM = document.createElement('div');
+      this.ghostDOM.className = 'ev-chart-resize-ghost';
+      this.wrapperDOM.appendChild(this.resizeDOM);
+    }
+
     this.legendDOM.appendChild(this.legendBoxDOM);
     this.wrapperDOM.appendChild(this.legendDOM);
   },
@@ -212,10 +215,12 @@ const modules = {
     this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
     this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
     this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
-    this.resizeDOM.addEventListener('mousedown', this.onResizeMouseDown);
 
-    this.mouseMove = this.onMouseMove.bind(this); // resizing function
-    this.mouseUp = this.onMouseUp.bind(this); // resizing function
+    if (this.resizeDOM) {
+      this.resizeDOM.addEventListener('mousedown', this.onResizeMouseDown);
+      this.mouseMove = this.onMouseMove.bind(this); // resizing function
+      this.mouseUp = this.onMouseUp.bind(this); // resizing function
+    }
   },
 
   /**
@@ -338,14 +343,16 @@ const modules = {
         legendStyle.width = `${chartRect.width}px`;
         legendStyle.height = `${opt.legend.height + 4}px`; // 4 resize bar size
 
-        resizeStyle.top = `${positionTop}px`;
-        resizeStyle.right = '';
-        resizeStyle.bottom = '';
-        resizeStyle.left = '';
+        if (resizeStyle) {
+          resizeStyle.top = `${positionTop}px`;
+          resizeStyle.right = '';
+          resizeStyle.bottom = '';
+          resizeStyle.left = '';
 
-        resizeStyle.width = `${chartRect.width}px`;
-        resizeStyle.height = '4px';
-        resizeStyle.cursor = 'row-resize';
+          resizeStyle.width = `${chartRect.width}px`;
+          resizeStyle.height = '4px';
+          resizeStyle.cursor = 'row-resize';
+        }
         break;
       case 'right':
         wrapperStyle.padding = `${title}px ${opt.legend.width}px 0 0`;
@@ -363,14 +370,16 @@ const modules = {
         legendStyle.width = `${opt.legend.width}px`;
         legendStyle.height = `${chartRect.height}px`;
 
-        resizeStyle.top = `${title}px`;
-        resizeStyle.right = `${opt.legend.width}px`;
-        resizeStyle.bottom = '';
-        resizeStyle.left = '';
+        if (resizeStyle) {
+          resizeStyle.top = `${title}px`;
+          resizeStyle.right = `${opt.legend.width}px`;
+          resizeStyle.bottom = '';
+          resizeStyle.left = '';
 
-        resizeStyle.width = '4px';
-        resizeStyle.height = `${chartRect.height}px`;
-        resizeStyle.cursor = 'col-resize';
+          resizeStyle.width = '4px';
+          resizeStyle.height = `${chartRect.height}px`;
+          resizeStyle.cursor = 'col-resize';
+        }
         break;
       case 'bottom':
         wrapperStyle.padding = `${title}px 0 ${opt.legend.height}px 0`;
@@ -387,14 +396,16 @@ const modules = {
         legendStyle.width = `${chartRect.width}px`;
         legendStyle.height = `${opt.legend.height + 4}px`; // 4 resize bar size
 
-        resizeStyle.top = '';
-        resizeStyle.right = '';
-        resizeStyle.bottom = `${opt.legend.height}px`;
-        resizeStyle.left = '';
+        if (resizeStyle) {
+          resizeStyle.top = '';
+          resizeStyle.right = '';
+          resizeStyle.bottom = `${opt.legend.height}px`;
+          resizeStyle.left = '';
 
-        resizeStyle.width = `${chartRect.width}px`;
-        resizeStyle.height = '4px';
-        resizeStyle.cursor = 'row-resize';
+          resizeStyle.width = `${chartRect.width}px`;
+          resizeStyle.height = '4px';
+          resizeStyle.cursor = 'row-resize';
+        }
         break;
       case 'left':
         wrapperStyle.padding = `${title}px 0 0 ${opt.legend.width}px`;
@@ -413,14 +424,16 @@ const modules = {
         legendStyle.width = `${opt.legend.width}px`;
         legendStyle.height = `${chartRect.height}px`;
 
-        resizeStyle.top = `${title}px`;
-        resizeStyle.right = '';
-        resizeStyle.bottom = '';
-        resizeStyle.left = `${opt.legend.width}px`;
+        if (resizeStyle) {
+          resizeStyle.top = `${title}px`;
+          resizeStyle.right = '';
+          resizeStyle.bottom = '';
+          resizeStyle.left = `${opt.legend.width}px`;
 
-        resizeStyle.width = '4px';
-        resizeStyle.height = `${chartRect.height}px`;
-        resizeStyle.cursor = 'col-resize';
+          resizeStyle.width = '4px';
+          resizeStyle.height = `${chartRect.height}px`;
+          resizeStyle.cursor = 'col-resize';
+        }
         break;
       default:
         break;
@@ -599,12 +612,13 @@ const modules = {
    * @returns {undefined}
    */
   showLegend() {
-    if (!this.resizeDOM || !this.legendDOM) {
-      return;
+    if (this.resizeDOM) {
+      this.resizeDOM.style.display = 'block';
     }
 
-    this.resizeDOM.style.display = 'block';
-    this.legendDOM.style.display = 'block';
+    if (this.legendDOM) {
+      this.legendDOM.style.display = 'block';
+    }
   },
 
   /**
@@ -619,13 +633,15 @@ const modules = {
     const legendStyle = this.legendDOM?.style;
     const title = opt?.title?.show ? opt?.title?.height : 0;
 
-    if (!resizeStyle || !legendStyle || !wrapperStyle) {
+    if (!legendStyle || !wrapperStyle) {
       return;
     }
 
-    resizeStyle.display = 'none';
-    legendStyle.display = 'none';
+    if (resizeStyle) {
+      resizeStyle.display = 'none';
+    }
 
+    legendStyle.display = 'none';
     legendStyle.width = '0';
     legendStyle.height = '0';
     wrapperStyle.padding = `${title}px 0 0 0`;

package/src/components/chart/uses.js

@@ -27,6 +27,7 @@ const DEFAULT_OPTIONS = {
     inactive: '#aaa',
     width: 140,
     height: 24,
+    allowResize: false,
   },
   itemHighlight: true,
   seriesHighlight: true,
@@ -99,11 +100,13 @@ export const useModel = () => {
   const { emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
-    if (options.type === 'scatter') {
-      DEFAULT_OPTIONS.tooltip.use = false;
+    const normalizedOptions = defaultsDeep({}, options, DEFAULT_OPTIONS);
+
+    if (options.type === 'scatter' && !options?.tooltip) {
+      normalizedOptions.tooltip.use = false;
     }
 
-    return defaultsDeep({}, options, DEFAULT_OPTIONS);
+    return normalizedOptions;
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 

package/src/components/grid/Grid.vue

@@ -251,7 +251,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated } from 'vue';
 import FilterWindow from './grid.filter.window';
 import Toolbar from './grid.toolbar';
 import {
@@ -334,13 +334,14 @@ export default {
       filterList: {},
       isFiltering: computed(() =>
         (props.option.useFilter === undefined ? true : props.option.useFilter)),
-      isSearch: false,
       setFiltering: false,
       showFilterWindow: false,
       currentFilter: {
         column: {},
         items: [],
       },
+      isSearch: false,
+      searchValue: computed(() => (props.option.searchValue || '')),
     });
     const stores = reactive({
       viewStore: [],
@@ -428,7 +429,15 @@ export default {
       onCloseFilterWindow,
       onApplyFilter,
       setFilter,
-    } = filterEvent({ filterInfo, stores, getColumnIndex });
+      onSearch,
+    } = filterEvent({
+      filterInfo,
+      stores,
+      checkInfo,
+      getColumnIndex,
+      getConvertValue,
+      updateVScroll,
+    });
 
     const {
       setStore,
@@ -461,9 +470,17 @@ export default {
       calculatedColumn();
       setStore(props.rows);
     });
+    onActivated(() => {
+      updateVScroll();
+    });
     const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
     const ROW_DATA_INDEX = 2;
+    const clearCheckInfo = () => {
+      checkInfo.checkedRows = [];
+      checkInfo.checkedIndex.clear();
+      checkInfo.isHeaderChecked = false;
+    };
     watch(
       () => props.columns,
       () => {
@@ -494,24 +511,28 @@ export default {
       () => props.rows,
       (value) => {
         setStore(value);
+        if (filterInfo.isSearch) {
+          onSearch(filterInfo.searchValue);
+        }
       },
     );
     watch(
       () => props.checked,
-      (value) => {
-        checkInfo.checkedRows = value;
+      (checkedList) => {
+        checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
-        let store = stores.originStore;
-        if (filterInfo.isSearch && stores.searchStore) {
-          store = stores.searchStore;
-        }
-        store.forEach((row) => {
-          row[ROW_CHECK_INDEX] = checkInfo.checkedRows.includes(row[ROW_DATA_INDEX]);
-        });
-        if (checkInfo.checkedRows.length
-          && store.length === checkInfo.checkedRows.length) {
-          checkInfo.isHeaderChecked = true;
+        checkInfo.checkedIndex.clear();
+        const store = stores.store;
+        if (store.length) {
+          store.forEach((row) => {
+            row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
+            if (row[ROW_CHECK_INDEX]) {
+              checkInfo.checkedIndex.add(row[ROW_INDEX]);
+            }
+          });
+          checkInfo.isHeaderChecked = checkedList.length === store.length;
         }
+        updateVScroll();
       },
     );
     watch(
@@ -523,8 +544,15 @@ export default {
     watch(
       () => checkInfo.useCheckbox.mode,
       () => {
-        checkInfo.checkedRows = [];
-        checkInfo.isHeaderChecked = false;
+        clearCheckInfo();
+      },
+    );
+    watch(
+      () => props.checked.length,
+      (checkedSize) => {
+        if (!checkedSize) {
+          clearCheckInfo();
+        }
       },
     );
     watch(
@@ -553,64 +581,12 @@ export default {
         setStore([], false);
       },
     );
-    let timer = null;
-    const onSearch = (searchWord) => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        filterInfo.isSearch = false;
-        if (searchWord) {
-          const filterStores = 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];
-              let columnType = column.type;
-              if (columnValue) {
-                if (typeof columnValue === 'object') {
-                  columnValue = columnValue[column.field];
-                }
-                if (!column.hide && (column?.searchable === undefined || column?.searchable)) {
-                  if (!columnType) {
-                    columnType = 'string';
-                  }
-                  columnValue = getConvertValue(columnType, columnValue).toString();
-                  isShow = columnValue.toLowerCase().includes(searchWord.toString().toLowerCase());
-                  if (isShow) {
-                    break;
-                  }
-                }
-              }
-            }
-            return isShow;
-          });
-          filterInfo.isSearch = true;
-          stores.searchStore = JSON.parse(JSON.stringify(filterStores));
-        } else {
-          filterInfo.isSearch = false;
-        }
-        let store = stores.originStore;
-        let checkSize = checkInfo.checkedRows.length;
-        for (let ix = 0; ix < store.length; ix++) {
-          if (checkInfo.checkedIndex.has(store[ix][ROW_INDEX])) {
-            store[ix][ROW_CHECK_INDEX] = true;
-          } else {
-            store[ix][ROW_CHECK_INDEX] = false;
-          }
-        }
-        if (filterInfo.isSearch && stores.searchStore) {
-          store = stores.searchStore;
-          checkSize = checkInfo.checkedIndex.size;
-        }
-        if (store.length && checkSize >= store.length) {
-          checkInfo.isHeaderChecked = true;
-        } else {
-          checkInfo.isHeaderChecked = false;
-        }
-        setStore([], false);
-      }, 500);
-    };
+    watch(
+      () => filterInfo.searchValue,
+      (value) => {
+        onSearch(value?.value ?? value);
+      }, { immediate: true },
+    );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,