evui 3.3.56 → 3.3.58

package/README.md

@@ -2,7 +2,7 @@
 
 ### Project setup
 ```
-npm install
+npm i -D evui
 ```
 
 ### Compiles library for product
@@ -11,6 +11,9 @@ npm run build:lib
 ```
 
 ### Compiles and hot-reloads for development document project
+- Node 12 is required to run the official documentation locally.
+- We will upload the node version later.
+- DOCUMENT : https://ex-em.github.io/EVUI
 ```
 npm run docs
 ```
@@ -30,11 +33,31 @@ npm run build
 npm run test:unit
 ```
 
-### Lints and fixes files
+### Use Vue3 Project
 ```
-npm run lint
+// main.ts
+import App from '@/App.vue';
+import EVUI from 'evui';
+
+const app = createApp(App);
+
+app.use(EVUI);
+
+app.mount('#app');
 ```
 
+### Using Message Component
+```
+// main.ts
+import App from '@/App.vue';
+import { EvMessageBox, EvMessage, EvNotification } from 'evui';
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+const app = createApp(App);
+
+app.use(EVUI);
+app.config.globalProperties.$messagebox = EvMessageBox;
+app.config.globalProperties.$messagex = EvMessage;
+app.config.globalProperties.$notify = EvNotification;
+
+app.mount('#app');
+```

package/dist/evui.common.js

@@ -8045,7 +8045,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.56\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.58\"}");
 
 /***/ }),
 
@@ -35699,18 +35699,21 @@ var element_line_Line = /*#__PURE__*/function () {
       } // Draw points
 
 
-      if (!isBrush && (this.point || useSelectLabel)) {
+      if (!isBrush) {
         ctx.strokeStyle = helpers_util.colorStringToRgba(mainColor, mainColorOpacity);
         var focusStyle = helpers_util.colorStringToRgba(pointFillColor, 1);
         var blurStyle = helpers_util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
         this.data.forEach(function (curr, ix) {
-          var isSelectedLabel = selectedLabelIndexList.includes(ix);
+          var _this2$data, _this2$data2;
 
           if (curr.xp === null || curr.yp === null) {
             return;
           }
 
-          if (_this2.point || isSelectedLabel) {
+          var isSingle = ((_this2$data = _this2.data[ix - 1]) === null || _this2$data === void 0 ? void 0 : _this2$data.o) === null && ((_this2$data2 = _this2.data[ix + 1]) === null || _this2$data2 === void 0 ? void 0 : _this2$data2.o) === null;
+          var isSelectedLabel = selectedLabelIndexList.includes(ix);
+
+          if (_this2.point || isSingle || isSelectedLabel) {
             ctx.fillStyle = isSelectedLabel && !legendHitInfo ? focusStyle : blurStyle;
             helpers_canvas.drawPoint(ctx, _this2.pointStyle, _this2.pointSize, curr.xp, curr.yp);
           }
@@ -36534,6 +36537,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
   }, {
     key: "findGraphRange",
     value: function findGraphRange(offset) {
+      var _this$range;
+
       var xp = offset[0];
       var yp = offset[1];
       var item = {
@@ -36544,9 +36549,10 @@ var element_bar_Bar = /*#__PURE__*/function () {
       var gdata = this.data;
       var totalCount = gdata.length;
 
-      var _this$range = _slicedToArray(this.range, 2),
-          min = _this$range[0],
-          max = _this$range[1];
+      var _ref4 = (_this$range = this.range) !== null && _this$range !== void 0 ? _this$range : [],
+          _ref5 = _slicedToArray(_ref4, 2),
+          min = _ref5[0],
+          max = _ref5[1];
 
       if (truthyNumber(min) && truthyNumber(max)) {
         totalCount = max - min + 1;
@@ -36590,6 +36596,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
   }, {
     key: "findGraphRangeCount",
     value: function findGraphRangeCount(offset) {
+      var _this$range2;
+
       var xp = offset[0];
       var yp = offset[1];
       var item = {
@@ -36600,9 +36608,10 @@ var element_bar_Bar = /*#__PURE__*/function () {
       var gdata = this.data;
       var totalCount = gdata.length;
 
-      var _this$range2 = _slicedToArray(this.range, 2),
-          min = _this$range2[0],
-          max = _this$range2[1];
+      var _ref6 = (_this$range2 = this.range) !== null && _this$range2 !== void 0 ? _this$range2 : [],
+          _ref7 = _slicedToArray(_ref6, 2),
+          min = _ref7[0],
+          max = _ref7[1];
 
       if (truthyNumber(min) && truthyNumber(max)) {
         totalCount = max - min + 1;
@@ -36647,11 +36656,11 @@ var element_bar_Bar = /*#__PURE__*/function () {
 
   }, {
     key: "drawValueLabels",
-    value: function drawValueLabels(_ref4) {
-      var context = _ref4.context,
-          data = _ref4.data,
-          positions = _ref4.positions,
-          isHighlight = _ref4.isHighlight;
+    value: function drawValueLabels(_ref8) {
+      var context = _ref8.context,
+          data = _ref8.data,
+          positions = _ref8.positions,
+          isHighlight = _ref8.isHighlight;
       var isHorizontal = this.isHorizontal;
       var _this$showValue = this.showValue,
           fontSize = _this$showValue.fontSize,
@@ -36677,9 +36686,9 @@ var element_bar_Bar = /*#__PURE__*/function () {
       if (isStacked) {
         value = data.o;
       } else {
-        var _ref5;
+        var _ref9;
 
-        value = (_ref5 = isHorizontal ? data.x : data.y) !== null && _ref5 !== void 0 ? _ref5 : '';
+        value = (_ref9 = isHorizontal ? data.x : data.y) !== null && _ref9 !== void 0 ? _ref9 : '';
       }
 
       var formattedTxt;
@@ -36768,9 +36777,9 @@ var element_bar_Bar = /*#__PURE__*/function () {
     }
   }, {
     key: "drawBar",
-    value: function drawBar(_ref6) {
-      var ctx = _ref6.ctx,
-          positions = _ref6.positions;
+    value: function drawBar(_ref10) {
+      var ctx = _ref10.ctx,
+          positions = _ref10.positions;
       var isHorizontal = this.isHorizontal;
       var isStackBar = ('stackIndex' in this);
       var isBorderRadius = this.borderRadius && this.borderRadius > 0;
@@ -38383,8 +38392,8 @@ var scale_Scale = /*#__PURE__*/function () {
       var range = scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use ? scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range : this.range;
 
       if ((range === null || range === void 0 ? void 0 : range.length) === 2) {
-        maxValue = range[1];
-        minValue = range[0];
+        maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
+        minValue = range[0] < +minMax.min ? +minMax.min : range[0];
       } else {
         maxValue = minMax.max;
         minValue = minMax.min;
@@ -39498,6 +39507,7 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _inherits(StepScale, _Scale);
 
@@ -39534,13 +39544,17 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
       var range = scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use ? scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range : this.range;
 
       if (range !== null && range !== void 0 && range.length) {
-        var _range = _slicedToArray(range, 2);
+        var _range = _slicedToArray(range, 2),
+            min = _range[0],
+            max = _range[1];
 
-        minIndex = _range[0];
-        maxIndex = _range[1];
-        maxValue = this.labels[maxIndex];
-        minValue = this.labels[minIndex];
-        labelCount = maxIndex - minIndex + 1;
+        if (truthyNumber(min) && truthyNumber(max)) {
+          minIndex = min < minIndex ? minIndex : min;
+          maxIndex = max > maxIndex ? maxIndex : max;
+          maxValue = this.labels[maxIndex];
+          minValue = this.labels[minIndex];
+          labelCount = maxIndex - minIndex + 1;
+        }
       }
 
       var maxWidth = chartRect.chartWidth / (labelCount + 2);
@@ -40111,8 +40125,9 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       ctx.strokeStyle = this.gridLineColor;
       var labelText;
       var labelPoint;
+      var ix;
 
-      for (var ix = 0; ix < oriSteps; ix += count) {
+      for (ix = 0; ix < oriSteps; ix += count) {
         var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data;
 
         ticks[ix] = axisMin + ix * stepValue;
@@ -40176,10 +40191,10 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
         ctx.stroke();
       }
 
-      if (this.categoryMode && alignToGridLine && count * steps === oriSteps) {
+      if (this.categoryMode && alignToGridLine && ix * count === oriSteps) {
         var diffTime = dayjs_min_default()(labels[1]).diff(dayjs_min_default()(labels[0]));
-        var labelLastText = this.getLabelFormat(dayjs_min_default()(labels[labels.length - 1] + diffTime));
-        labelCenter = Math.round(startPoint + graphGap * labels.length);
+        var labelLastText = this.getLabelFormat(dayjs_min_default()(ticks[oriSteps - 1] + diffTime));
+        labelCenter = Math.round(startPoint + graphGap * oriSteps);
         linePosition = labelCenter + aliasPixel;
 
         if (this.type === 'x') {
@@ -42236,27 +42251,61 @@ var plugins_scrollbar_module = {
       });
       scrollbarOpt.type = axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$2 = axisOpt[0]) === null || _axisOpt$2 === void 0 ? void 0 : _axisOpt$2.type;
       scrollbarOpt.range = (axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$3 = axisOpt[0]) === null || _axisOpt$3 === void 0 ? void 0 : _axisOpt$3.range) || null;
-      scrollbarOpt.interval = null;
       this.createScrollbarLayout(dir);
       this.createScrollbar(dir);
       this.createScrollEvent(dir);
       scrollbarOpt.isInit = true;
     }
   },
+  checkValidRange: function checkValidRange(dir) {
+    var _scrollbarOpt$range;
+
+    var scrollbarOpt = this.scrollbar[dir];
+    var axesType = scrollbarOpt.type;
+
+    if ((_scrollbarOpt$range = scrollbarOpt.range) !== null && _scrollbarOpt$range !== void 0 && _scrollbarOpt$range.length) {
+      var _scrollbarOpt$range2 = _slicedToArray(scrollbarOpt.range, 2),
+          min = _scrollbarOpt$range2[0],
+          max = _scrollbarOpt$range2[1];
+
+      if (!(truthyNumber(min) && truthyNumber(max))) {
+        return true;
+      }
+
+      if (axesType === 'step') {
+        var labels = this.options.type === 'heatMap' ? this.data.labels[dir] : this.data.labels;
+
+        if (min < 0 || max > labels.length - 1) {
+          return true;
+        }
+      } else {
+        var _this$minMax$dir;
+
+        var minMax = (_this$minMax$dir = this.minMax[dir]) === null || _this$minMax$dir === void 0 ? void 0 : _this$minMax$dir[0];
+
+        if (+min < +minMax.min || +max > +minMax.max) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  },
 
   /**
    * update scrollbar information
    */
-  updateScrollbar: function updateScrollbar() {
-    this.updateScrollbarInfo('x');
-    this.updateScrollbarInfo('y');
+  updateScrollbar: function updateScrollbar(updateData) {
+    this.updateScrollbarInfo('x', updateData);
+    this.updateScrollbarInfo('y', updateData);
   },
 
   /**
    * Updated scrollbar information with updated axis information
    * @param dir axis direction (x | y)
+   * @param updateData is update data
    */
-  updateScrollbarInfo: function updateScrollbarInfo(dir) {
+  updateScrollbarInfo: function updateScrollbarInfo(dir, updateData) {
     var _newOpt$, _newOpt$$scrollbar, _newOpt$2, _newOpt$0$scrollbar, _newOpt$3, _newOpt$4, _axisOpt$4, _newOpt$0$scrollbar2;
 
     var _this$options = this.options,
@@ -42275,7 +42324,7 @@ var plugins_scrollbar_module = {
     var axisOpt = dir === 'x' ? this.axesX : this.axesY;
     var isUpdateAxesRange = !lodash_es_isEqual(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$4 = newOpt[0]) === null || _newOpt$4 === void 0 ? void 0 : _newOpt$4.range, axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$4 = axisOpt[0]) === null || _axisOpt$4 === void 0 ? void 0 : _axisOpt$4.range);
 
-    if (isUpdateAxesRange) {
+    if (isUpdateAxesRange || updateData) {
       var _newOpt$5;
 
       this.scrollbar[dir].range = (newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$5 = newOpt[0]) === null || _newOpt$5 === void 0 ? void 0 : _newOpt$5.range) || null;
@@ -42291,10 +42340,18 @@ var plugins_scrollbar_module = {
     var _this$scrollbar$x, _this$scrollbar$x2, _this$scrollbar$y, _this$scrollbar$y2;
 
     if ((_this$scrollbar$x = this.scrollbar.x) !== null && _this$scrollbar$x !== void 0 && _this$scrollbar$x.use && (_this$scrollbar$x2 = this.scrollbar.x) !== null && _this$scrollbar$x2 !== void 0 && _this$scrollbar$x2.isInit) {
+      if (this.checkValidRange('x')) {
+        return;
+      }
+
       this.setScrollbarPosition('x');
     }
 
     if ((_this$scrollbar$y = this.scrollbar.y) !== null && _this$scrollbar$y !== void 0 && _this$scrollbar$y.use && (_this$scrollbar$y2 = this.scrollbar.y) !== null && _this$scrollbar$y2 !== void 0 && _this$scrollbar$y2.isInit) {
+      if (this.checkValidRange('y')) {
+        return;
+      }
+
       this.setScrollbarPosition('y');
     }
   },
@@ -42455,13 +42512,13 @@ var plugins_scrollbar_module = {
     if (scrollbarOpt.showButton) {
       var upBtnDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-button-up');
       var endPosition = Math.floor(trackSize - thumbSize.size);
-      var upBtnOpacity = Math.floor(thumbSize.position) === endPosition ? 0.5 : 1;
+      var upBtnOpacity = Math.floor(thumbSize.position) > endPosition ? 0.5 : 1;
       upBtnDOM[0].style.cssText = "background-color: ".concat(scrollbarOpt.background, ";").concat(upBtnStyle);
       upBtnDOM[0].style.opacity = upBtnOpacity;
       upBtnDOM[0].children[0].style.display = 'block';
       var downBtnDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-button-down');
       downBtnDOM[0].style.cssText = "background-color: ".concat(scrollbarOpt.background, ";").concat(downBtnStyle);
-      downBtnDOM[0].style.opacity = Math.floor(thumbSize.position) === 0 ? 0.5 : 1;
+      downBtnDOM[0].style.opacity = Math.floor(thumbSize.position) < 0 ? 0.5 : 1;
       downBtnDOM[0].children[0].style.display = 'block';
     }
   },
@@ -42474,9 +42531,9 @@ var plugins_scrollbar_module = {
   getScrollbarThumbSize: function getScrollbarThumbSize(dir, trackSize) {
     var scrollbarOpt = this.scrollbar[dir];
 
-    var _scrollbarOpt$range = _slicedToArray(scrollbarOpt.range, 2),
-        min = _scrollbarOpt$range[0],
-        max = _scrollbarOpt$range[1];
+    var _scrollbarOpt$range3 = _slicedToArray(scrollbarOpt.range, 2),
+        min = _scrollbarOpt$range3[0],
+        max = _scrollbarOpt$range3[1];
 
     var axesType = scrollbarOpt.type;
     var thumbSize;
@@ -42493,20 +42550,26 @@ var plugins_scrollbar_module = {
       thumbSize = intervalSize * range;
       thumbPosition = intervalSize * min;
     } else {
-      var _this$axesX, _this$axesX$;
+      var _this$minMax$dir2;
 
-      var minMax = this.minMax[dir];
-      var graphRange = +minMax[0].max - +minMax[0].min;
+      var axisOpt = dir === 'x' ? this.axesX : this.axesY;
+      var minMax = (_this$minMax$dir2 = this.minMax[dir]) === null || _this$minMax$dir2 === void 0 ? void 0 : _this$minMax$dir2[0];
+      var graphRange = +minMax.max - +minMax.min;
 
       var _range = +max - +min;
 
-      interval = (_this$axesX = this.axesX) === null || _this$axesX === void 0 ? void 0 : (_this$axesX$ = _this$axesX[0]) === null || _this$axesX$ === void 0 ? void 0 : _this$axesX$.getInterval({
-        min: minMax[0].min,
-        max: minMax[0].max,
-        maxSteps: this.labelRange[dir].max
-      });
+      if (axesType === 'time') {
+        var _axisOpt$5, _this$labelRange$dir, _this$labelRange$dir$;
+
+        interval = axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$5 = axisOpt[0]) === null || _axisOpt$5 === void 0 ? void 0 : _axisOpt$5.getInterval({
+          minValue: minMax.min,
+          maxValue: minMax.max,
+          maxSteps: (_this$labelRange$dir = this.labelRange[dir]) === null || _this$labelRange$dir === void 0 ? void 0 : (_this$labelRange$dir$ = _this$labelRange$dir[0]) === null || _this$labelRange$dir$ === void 0 ? void 0 : _this$labelRange$dir$.max
+        });
+      }
+
       steps = Math.ceil(graphRange / interval) + 1;
-      startValue = +minMax[0].min;
+      startValue = +minMax.min;
 
       var _intervalSize = trackSize / steps;
 
@@ -42521,9 +42584,7 @@ var plugins_scrollbar_module = {
     scrollbarOpt.interval = interval;
     return {
       size: thumbSize,
-      position: thumbPosition,
-      background: scrollbarOpt.background,
-      radius: scrollbarOpt.radius
+      position: thumbPosition
     };
   },
 
@@ -42836,13 +42897,16 @@ var plugins_scrollbar_module = {
     var scrollbarXDOM = this.scrollbar[dir].dom;
 
     if (scrollbarXDOM) {
-      var _this$overlayCanvas2;
-
       scrollbarXDOM.remove();
       this.scrollbar[dir] = {
         isInit: false
       };
-      (_this$overlayCanvas2 = this.overlayCanvas) === null || _this$overlayCanvas2 === void 0 ? void 0 : _this$overlayCanvas2.removeEventListener('wheel', this.onScrollbarWheel, false);
+
+      if (dir === 'y') {
+        var _this$overlayCanvas2;
+
+        (_this$overlayCanvas2 = this.overlayCanvas) === null || _this$overlayCanvas2 === void 0 ? void 0 : _this$overlayCanvas2.removeEventListener('wheel', this.onScrollbarWheel, false);
+      }
     }
   }
 };
@@ -43227,6 +43291,8 @@ var plugins_interaction_modules = {
 
         case 'heatMap':
           {
+            var isHorizontal = !!_this.options.horizontal;
+
             if (useSelectItem && useSelectLabel) {
               var useBothAxis = selectLabelOpt.useBothAxis;
 
@@ -43245,7 +43311,16 @@ var plugins_interaction_modules = {
                 args.deselected = {
                   eventTarget: 'item'
                 };
-                setSelectedLabelInfo(useBothAxis ? location : null);
+
+                if (!useBothAxis) {
+                  var selectLabelAxis = isHorizontal ? 'yAxis' : 'xAxis';
+
+                  if (location !== selectLabelAxis) {
+                    return;
+                  }
+                }
+
+                setSelectedLabelInfo(location, useBothAxis);
               }
             } else if (useSelectItem) {
               setSelectedItemInfo();
@@ -43254,6 +43329,14 @@ var plugins_interaction_modules = {
 
               var _location = _this.getClickedLocation(offset);
 
+              if (!_useBothAxis && _location !== 'chartBackground') {
+                var _selectLabelAxis = isHorizontal ? 'yAxis' : 'xAxis';
+
+                if (_location !== _selectLabelAxis) {
+                  return;
+                }
+              }
+
               setSelectedLabelInfo(_useBothAxis ? _location : null);
             }
 
@@ -43849,7 +43932,7 @@ var plugins_interaction_modules = {
     var _this$options$selectL2, _this$options7, _this$defaultSelectIn;
 
     var option = (_this$options$selectL2 = (_this$options7 = this.options) === null || _this$options7 === void 0 ? void 0 : _this$options7.selectLabel) !== null && _this$options$selectL2 !== void 0 ? _this$options$selectL2 : {};
-    var before = ((_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.targetAxis) === targetAxis ? _objectSpread2(_objectSpread2({}, this.defaultSelectInfo), {}, {
+    var before = targetAxis === null || ((_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.targetAxis) === targetAxis ? _objectSpread2(_objectSpread2({}, this.defaultSelectInfo), {}, {
       targetAxis: targetAxis
     }) : {
       dataIndex: [],
@@ -46688,7 +46771,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         return;
       }
 
-      (_this$updateScrollbar = this.updateScrollbar) === null || _this$updateScrollbar === void 0 ? void 0 : _this$updateScrollbar.call(this);
+      (_this$updateScrollbar = this.updateScrollbar) === null || _this$updateScrollbar === void 0 ? void 0 : _this$updateScrollbar.call(this, updateData);
       this.resetProps();
 
       if (updateSeries) {