evui 3.2.1 → 3.3.1

package/package.json

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

package/src/components/chart/Chart.vue

@@ -105,13 +105,20 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       });
 
-      const redrawChart = () => {
-        if (evChart && 'resize' in evChart && isInit) {
-          evChart.resize();
+      const redraw = () => {
+        if (evChart && isInit) {
+          evChart.update({
+            updateSeries: true,
+            updateSelTip: { update: true, keepDomain: false },
+          });
         }
       };
 
-      const onResize = debounce(redrawChart, props.resizeTimeout);
+      const onResize = debounce(() => {
+        if (evChart && 'resize' in evChart && isInit) {
+          evChart.resize();
+        }
+      }, props.resizeTimeout);
 
       const selectItemByLabel = (label) => {
         evChart.selectItemByLabel(label);
@@ -121,6 +128,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         wrapper,
         wrapperStyle,
         onResize,
+        redraw,
         selectItemByLabel,
       };
     },

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

@@ -341,7 +341,7 @@ export default {
         items: [],
       },
       isSearch: false,
-      searchWord: '',
+      searchValue: computed(() => (props.option.searchValue || '')),
     });
     const stores = reactive({
       viewStore: [],
@@ -512,7 +512,7 @@ export default {
       (value) => {
         setStore(value);
         if (filterInfo.isSearch) {
-          onSearch(filterInfo.searchWord);
+          onSearch(filterInfo.searchValue);
         }
       },
     );
@@ -522,17 +522,15 @@ export default {
         checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
         checkInfo.checkedIndex.clear();
-        if (checkedList.length) {
-          const store = stores.store;
+        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]);
             }
           });
-          if (checkedList.length === store.length) {
-            checkInfo.isHeaderChecked = true;
-          }
+          checkInfo.isHeaderChecked = checkedList.length === store.length;
         }
         updateVScroll();
       },
@@ -583,6 +581,12 @@ export default {
         setStore([], false);
       },
     );
+    watch(
+      () => filterInfo.searchValue,
+      (value) => {
+        onSearch(value?.value ?? value);
+      }, { immediate: true },
+    );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,

package/src/components/grid/uses.js

@@ -710,7 +710,6 @@ export const filterEvent = (params) => {
     }
     timer = setTimeout(() => {
       filterInfo.isSearch = false;
-      filterInfo.searchWord = searchWord;
       if (searchWord) {
         stores.searchStore = stores.store.filter((row) => {
           let isShow = false;

package/src/components/treeGrid/TreeGrid.vue

@@ -242,6 +242,7 @@ export default {
       resizeLine: null,
       'grid-wrapper': null,
     });
+    const searchValue = computed(() => (props.option.searchValue || ''));
     const stores = reactive({
       treeStore: [],
       viewStore: [],
@@ -341,18 +342,20 @@ export default {
     });
     watch(
       () => props.checked,
-      (value) => {
+      (checkedList) => {
         let store = stores.treeStore;
         if (stores.searchStore.length > 0) {
           store = stores.searchStore;
         }
-        const isCheck = store.every(n => n.checked === true);
+        checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
-        checkInfo.checkedRows = value;
-        for (let ix = 0; ix < store.length; ix++) {
-          store[ix].checked = value.includes(store[ix]);
+        if (store.length) {
+          store.forEach((row) => {
+            row.checked = checkedList.includes(row);
+          });
+          checkInfo.isHeaderChecked = store.every(n => n.checked === true);
         }
-        checkInfo.isHeaderChecked = isCheck;
+        updateVScroll();
       },
     );
     watch(
@@ -394,6 +397,12 @@ export default {
         onResize();
       },
     );
+    watch(
+      () => searchValue.value,
+      (value) => {
+        onSearch(value?.value ?? value);
+      }, { immediate: true },
+    );
     const gridStyle = computed(() => ({
       width: resizeInfo.gridWidth,
       height: resizeInfo.gridHeight,

package/src/components/treeGrid/uses.js

@@ -655,10 +655,27 @@ export const filterEvent = (params) => {
     }
     const { parent } = data;
     parent.show = true;
-    parent.expand = true;
     parent.isFilter = true;
     makeParentShow(parent);
   };
+  const makeChildShow = (data) => {
+    if (!data?.children) {
+      return;
+    }
+    const { children } = data;
+    children.forEach((node) => {
+      const childNode = node;
+      if (childNode.parent.show && childNode.parent.expand) {
+        childNode.show = true;
+      } else {
+        childNode.show = false;
+      }
+      childNode.isFilter = true;
+      if (childNode.hasChild) {
+        makeChildShow(childNode);
+      }
+    });
+  };
   let timer = null;
   const onSearch = (searchWord) => {
     if (timer) {
@@ -695,19 +712,28 @@ export const filterEvent = (params) => {
         });
         filterStores.forEach((row) => {
           row.show = true;
+          if (row.parent && !row.parent.expand) {
+            row.show = false;
+          }
           row.isFilter = true;
           makeParentShow(row);
+          makeChildShow(row);
         });
       } else {
         store.forEach((row) => {
           row.show = true;
           row.isFilter = false;
         });
+        store.forEach((row) => {
+          if (row.hasChild) {
+            makeChildShow(row);
+          }
+        });
       }
       if (stores.searchStore.length > 0) {
         store = stores.searchStore;
       }
-      const isCheck = store.every(n => n.checked === true);
+      const isCheck = store.length > 0 && store.every(n => n.checked === true);
       checkInfo.isHeaderChecked = isCheck;
       calculatedColumn();
       updateVScroll();

package/src/components/window/uses.js

@@ -433,8 +433,8 @@ const useMouseEvent = (param) => {
       setDragStyle({
         top: `${tempTop}px`,
         left: `${tempLeft}px`,
-        width: props.width,
-        height: props.height,
+        width: dragStyle.width ?? props.width,
+        height: dragStyle.height ?? props.height,
       });
     } else if (props.resizable && clickedInfo.pressedSpot === 'border') {
       resizeWindow(e);