evui 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "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);

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) => {
+    const normalizedOptions = defaultsDeep({}, options, DEFAULT_OPTIONS);
+
     if (options.type === 'scatter') {
-      DEFAULT_OPTIONS.tooltip.use = false;
+      normalizedOptions.tooltip.use = false;
     }
 
-    return defaultsDeep({}, options, DEFAULT_OPTIONS);
+    return normalizedOptions;
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 

package/src/components/grid/Grid.vue

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

package/src/components/treeGrid/TreeGrid.vue

@@ -341,18 +341,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(

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