evui 3.3.9 → 3.3.10

package/dist/evui.common.js

@@ -255,6 +255,20 @@ exports.f = DESCRIPTORS ? nativeGetOwnPropertyDescriptor : function getOwnProper
 };
 
 
+/***/ }),
+
+/***/ "0729":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".pagination{display:flex}.pagination .pagination-next,.pagination .pagination-previous{margin:0;padding-left:10px;padding-right:10px;background:50% no-repeat;background-size:16px;cursor:pointer}.pagination .pagination-next:hover,.pagination .pagination-previous:hover{color:#1a6afe}.pagination-info{order:2;line-height:32px}.pagination .is-current{pointer-events:none;cursor:not-allowed;background-color:#1a6afe;color:#fff;border-radius:4px}.pagination .is-page:hover{color:#1a6afe}.pagination .is-disabled,.pagination .pagination-ellipsis{pointer-events:none;cursor:not-allowed}.pagination .is-disabled{opacity:.5;color:#c0c4cc}.pagination-list{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0;margin:0;align-items:center;flex-wrap:wrap}.pagination-list li{display:flex;height:32px;padding:0 4px;justify-content:center;align-items:center;font-size:14px;min-width:32px;line-height:32px;cursor:pointer;box-sizing:border-box;text-align:center}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "07ac":
@@ -675,29 +689,6 @@ module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callback
 } : [].forEach;
 
 
-/***/ }),
-
-/***/ "1801":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__("1de5");
-var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__("f051");
-var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__("0924");
-var ___CSS_LOADER_URL_IMPORT_2___ = __webpack_require__("eb91");
-var ___CSS_LOADER_URL_IMPORT_3___ = __webpack_require__("a884");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
-var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
-var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
-var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);
-// Module
-exports.push([module.i, ".table[data-v-c263f57e]{position:relative;width:100%;height:100%;padding-top:33px}.table.non-header[data-v-c263f57e]{padding-top:0}.table .table-header[data-v-c263f57e]{overflow:hidden;position:absolute;top:0;width:100%;height:33px;border-top:2px solid #7f7f7f;border-bottom:1px solid #cfcfcf}.dark .table .table-header[data-v-c263f57e]{border-top:2px solid;border-bottom:1px solid}.table .table-header.non-border[data-v-c263f57e]{border-bottom:2px solid #7f7f7f!important}.column-list[data-v-c263f57e]{width:100%;white-space:nowrap;list-style-type:none}.column[data-v-c263f57e],.column-list[data-v-c263f57e]{position:relative;height:100%}.column[data-v-c263f57e]{display:inline-flex;padding:0 10px;line-height:30px;justify-content:center;align-items:center;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid #cfcfcf}.dark .column[data-v-c263f57e]{border-right:1px solid}.column[data-v-c263f57e]:last-child{border-right:0;margin-right:20px}.column:last-child .column-resize[data-v-c263f57e]{cursor:default!important}.column .sort-icon[data-v-c263f57e]{display:inline-block;float:right;font-size:14px;line-height:30px}.column .ev-icon-filter[data-v-c263f57e]{font-size:13px;color:#005cc8}.column.db-icon[data-v-c263f57e],.column.user-icon[data-v-c263f57e]{width:42px!important;min-width:42px!important;border-right:0}.column-name[data-v-c263f57e]{display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:14px}.column-filter[data-v-c263f57e]{display:none;position:absolute;right:0;background-color:transparent}.column-filter i[data-v-c263f57e]{margin-right:2px;font-size:14px;vertical-align:middle}.column:hover .column-filter[data-v-c263f57e]{display:block;cursor:pointer}.column-filter-status[data-v-c263f57e]{position:absolute;left:0;background-color:transparent}.column-filter-status .ei[data-v-c263f57e]{font-size:10px;vertical-align:top}.column-resize[data-v-c263f57e]{position:absolute;bottom:0;right:-5px;width:10px;height:100%}.column-resize[data-v-c263f57e]:hover{cursor:col-resize}.table-body[data-v-c263f57e]{position:relative;width:100%;height:100%;overflow:auto;overflow-anchor:none}.table-body table[data-v-c263f57e]{clear:both;border-spacing:0;border-collapse:collapse;width:inherit}.table-body.stripe tr[data-v-c263f57e]:nth-child(2n){background:hsla(0,0%,89.8%,.6)}.table-body.bottom-border[data-v-c263f57e]{border-bottom:1px solid #cfcfcf}.dark .table-body.bottom-border[data-v-c263f57e]{border-bottom:1px solid}.table-body .row[data-v-c263f57e]{white-space:nowrap;border-bottom:1px solid #cfcfcf}.dark .table-body .row[data-v-c263f57e]{border-bottom:1px solid}.table-body .row.selected[data-v-c263f57e]{background:rgba(219,240,249,.6)!important;color:inherit!important;font-size:inherit!important}.dark .table-body .row.selected[data-v-c263f57e]{background:!important;color:inherit!important;font-size:inherit!important}.table-body .row.highlight[data-v-c263f57e]{background:#5ab7ff;color:#fff}.table-body .cell[data-v-c263f57e]{display:inline-block;padding:0 10px;text-align:center;max-width:100%;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #cfcfcf}.dark .table-body .cell[data-v-c263f57e]{border-right:1px solid}.table-body .cell div[data-v-c263f57e]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-body .cell.row-checkbox[data-v-c263f57e]{display:inline-flex;justify-content:center;align-items:center}.table-body .cell.render[data-v-c263f57e]{overflow:initial}.table-body .cell.float[data-v-c263f57e],.table-body .cell.number[data-v-c263f57e]{text-align:right}.table-body .cell.string[data-v-c263f57e],.table-body .cell.stringNumber[data-v-c263f57e]{text-align:left}.table-body .cell.center[data-v-c263f57e]{text-align:center}.table-body .cell.left[data-v-c263f57e]{text-align:left}.table-body .cell.left .wrap[data-v-c263f57e]{justify-content:flex-start}.table-body .cell.right[data-v-c263f57e]{text-align:right}.table-body .cell.right .wrap[data-v-c263f57e]{justify-content:flex-end}.table-body .cell[data-v-c263f57e]:last-child{border-right:0}.table-body .cell.user-icon[data-v-c263f57e]{height:auto!important}.table-body .cell.db-icon[data-v-c263f57e],.table-body .cell.user-icon[data-v-c263f57e]{width:42px!important;min-width:42px!important;border-right:0}.table-resize-line[data-v-c263f57e]{position:absolute;top:0;bottom:0;width:1px;border-right:1px solid #cfcfcf}.dark .table-resize-line[data-v-c263f57e]{border-right:1px solid}.vscroll-spacer[data-v-c263f57e]{opacity:0;clear:both}[v-cloak][data-v-c263f57e]{display:none}.ev-checkbox[data-v-c263f57e]{margin:0}.non-border[data-v-c263f57e]{border:none!important}.is-empty[data-v-c263f57e]{height:30px;text-align:center}.postgresql[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat 50%}.oracle[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat 50%}.mongodb[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") no-repeat 50%}.mysql[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") no-repeat 50%}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "196e":
@@ -4172,20 +4163,6 @@ module.exports = function (it) {
 };
 
 
-/***/ }),
-
-/***/ "1c2e":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-exports.push([module.i, ".ev-chart-wrapper{display:block}.ev-chart-container,.ev-chart-wrapper{position:relative;width:100%;height:100%}.ev-chart-container{overflow:hidden}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend-box{overflow-x:hidden;overflow-y:auto}.ev-chart-legend-container{position:relative;overflow:hidden}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;font-family:Roboto,serif;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body{overflow-x:hidden;overflow-y:hidden}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "1c7e":
@@ -4693,6 +4670,21 @@ module.exports = __webpack_require__.p + "img/EVUI.7f3588fb.svg";
 
 /***/ }),
 
+/***/ "29d1":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("76c7");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("7aff049a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "2a62":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -5092,6 +5084,20 @@ defineIterator(String, 'String', function (iterated) {
 module.exports = {};
 
 
+/***/ }),
+
+/***/ "406d":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".grid-pagination[data-v-210f4f6a]{padding-top:8px}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "408a":
@@ -5899,6 +5905,23 @@ if(content.locals) module.exports = content.locals;
 var add = __webpack_require__("499e").default
 var update = add("18d9403c", content, true, {"sourceMap":false,"shadowMode":false});
 
+/***/ }),
+
+/***/ "4fad":
+/***/ (function(module, exports, __webpack_require__) {
+
+var $ = __webpack_require__("23e7");
+var $entries = __webpack_require__("6f53").entries;
+
+// `Object.entries` method
+// https://tc39.github.io/ecma262/#sec-object.entries
+$({ target: 'Object', stat: true }, {
+  entries: function entries(O) {
+    return $entries(O);
+  }
+});
+
+
 /***/ }),
 
 /***/ "50c4":
@@ -6134,21 +6157,6 @@ exports.push([module.i, ".ev-date-picker{display:block;position:relative;width:1
 module.exports = exports;
 
 
-/***/ }),
-
-/***/ "584d":
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__("1801");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("b9dffece", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "5873":
@@ -6305,6 +6313,17 @@ module.exports = function (bitmap, value) {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "5e0f":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_pagination_vue_vue_type_style_index_0_id_210f4f6a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b597");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_pagination_vue_vue_type_style_index_0_id_210f4f6a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_pagination_vue_vue_type_style_index_0_id_210f4f6a_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "5e89":
@@ -6846,17 +6865,6 @@ module.exports = {
 };
 
 
-/***/ }),
-
-/***/ "6b66":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_d781ace8_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("aecf");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_d781ace8_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_d781ace8_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "6bcc":
@@ -7115,17 +7123,6 @@ module.exports = function ($this, dummy, Wrapper) {
 };
 
 
-/***/ }),
-
-/***/ "71e7":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_3a821ae4_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("84fa");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_3a821ae4_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_3a821ae4_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "7308":
@@ -7137,20 +7134,6 @@ module.exports = function ($this, dummy, Wrapper) {
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "73a9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-exports.push([module.i, ".pagination{display:flex}.pagination .pagination-next,.pagination .pagination-previous{margin:0;padding-left:10px;padding-right:10px;background:50% no-repeat;background-size:16px;background-color:#fff;cursor:pointer;color:#303133}.pagination .pagination-next:hover,.pagination .pagination-previous:hover{color:#1a6afe}.pagination-info{order:2;line-height:32px}.pagination .is-current{pointer-events:none;cursor:not-allowed;background-color:#1a6afe;color:#fff;border-radius:4px}.pagination .is-page:hover{color:#1a6afe}.pagination .is-disabled,.pagination .pagination-ellipsis{pointer-events:none;cursor:not-allowed}.pagination .is-disabled{opacity:.5;color:#c0c4cc;background-color:#fff}.pagination-list{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0;margin:0;align-items:center;flex-wrap:wrap}.pagination-list li{display:flex;height:32px;padding:0 4px;justify-content:center;align-items:center;background:#fff;font-size:14px;min-width:32px;line-height:32px;cursor:pointer;box-sizing:border-box;text-align:center}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "7418":
@@ -7177,6 +7160,20 @@ module.exports = function (NAME) {
 };
 
 
+/***/ }),
+
+/***/ "76c7":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".grid-filter[data-v-138f0008]{display:flex;width:100%;height:100%;flex-direction:column;text-align:initial}.grid-filter .grid-filter-header[data-v-138f0008]{height:24px;margin-bottom:12px;text-align:right}.grid-filter .grid-filter-header .ev-button[data-v-138f0008]{width:70px;margin-left:5px}.grid-filter-body[data-v-138f0008]{display:flex;width:100%;height:100%;flex-direction:column;align-items:center}.grid-filter-body .ev-button[data-v-138f0008]{width:100px;margin-top:8px}.grid-filter-body .applyBtn[data-v-138f0008]{position:absolute;bottom:17px}.grid-filter-add-wrap[data-v-138f0008]{display:flex;width:100%;padding:10px;background-color:#d3d3d3;margin-bottom:10px;background-color:#e5e5e5}.grid-filter-add-wrap .split-line[data-v-138f0008]{width:1px;margin:0 20px;background-color:#e5e5e5}.grid-filter-add-wrap .confirm-wrap[data-v-138f0008]{display:flex;width:70px;margin-right:10px;flex-direction:column;align-items:center}.grid-filter-add-wrap .confirm-wrap .ev-button[data-v-138f0008]{width:70px}.grid-filter-add-item[data-v-138f0008]{display:flex;align-items:center;flex:1}.grid-filter-add-item .item-labels[data-v-138f0008]{margin-right:10px;list-style-type:none}.grid-filter-add-item .item-labels li[data-v-138f0008]{height:24px;line-height:24px;margin-bottom:8px;font-size:13px;color:#4c4c4c}.grid-filter-add-item .item-labels li[data-v-138f0008]:last-child{margin-bottom:0}.grid-filter-add-item .item-inputs[data-v-138f0008]{display:flex;flex-direction:column;flex:1}.grid-filter-add-item .item-inputs .item-input[data-v-138f0008]{width:100%;height:24px;margin-bottom:8px}.grid-filter-add-item .item-inputs .item-input[data-v-138f0008]:last-child{margin-bottom:0}.grid-filter-add-item .form-row-contents[data-v-138f0008]{min-height:35px;flex:1}.grid-filter-add-item .form-row[data-v-138f0008]{display:flex;width:100%;margin:8px 0}.grid-filter-add-item .form-row-title.wide[data-v-138f0008]{width:30%;line-height:33px;vertical-align:middle}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "77b2":
@@ -7598,21 +7595,6 @@ exports.push([module.i, ".ev-window-scroll-lock{overflow:hidden!important}.ev-wi
 module.exports = exports;
 
 
-/***/ }),
-
-/***/ "84fa":
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__("1c2e");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("a4ce6070", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "861d":
@@ -7808,6 +7790,21 @@ exports.push([module.i, "#ev-message-box-modal{display:flex;position:fixed;top:0
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "8e0f":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("ded0");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("4194f44c", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "8fef":
@@ -7849,6 +7846,21 @@ var update = add("06907b29", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ "910e":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("0729");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("1a1cad19", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "9112":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -7886,7 +7898,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.9\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.10\"}");
 
 /***/ }),
 
@@ -8780,6 +8792,17 @@ try {
 }
 
 
+/***/ }),
+
+/***/ "96f9":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_53face60_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f648");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_53face60_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Chart_vue_vue_type_style_index_0_id_53face60_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "971c":
@@ -9487,6 +9510,17 @@ module.exports = function (argument) {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "a85c":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_138f0008_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("29d1");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_138f0008_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_grid_filter_window_vue_vue_type_style_index_0_id_138f0008_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "a884":
@@ -9724,18 +9758,14 @@ module.exports = {
 
 /***/ }),
 
-/***/ "aecf":
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "afaf":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-// style-loader: Adds some css to the DOM by adding a <style> tag
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_541b906a_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("910e");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_541b906a_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_541b906a_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
 
-// load the styles
-var content = __webpack_require__("c8ea");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("08a8c69e", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -9868,6 +9898,21 @@ module.exports = queueMicrotask || function (fn) {
 };
 
 
+/***/ }),
+
+/***/ "b597":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("406d");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("95f0952c", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "b622":
@@ -10126,6 +10171,20 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "b7b9":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".ev-chart-wrapper{display:block}.ev-chart-container,.ev-chart-wrapper{position:relative;width:100%;height:100%}.ev-chart-container{overflow:hidden}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend-box{overflow-x:hidden;overflow-y:auto}.ev-chart-legend-container{position:relative;overflow:hidden}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;font-family:Roboto,serif;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body{overflow-x:hidden;overflow-y:hidden}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "bac3":
@@ -10152,6 +10211,17 @@ module.exports = !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "bf21":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_247d3bf0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8e0f");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_247d3bf0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_247d3bf0_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "c04e":
@@ -10187,6 +10257,28 @@ exports.push([module.i, ".ev-calendar-wrapper{display:inline-flex;height:100%;bo
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "c1f9":
+/***/ (function(module, exports, __webpack_require__) {
+
+var $ = __webpack_require__("23e7");
+var iterate = __webpack_require__("2266");
+var createProperty = __webpack_require__("8418");
+
+// `Object.fromEntries` method
+// https://github.com/tc39/proposal-object-from-entries
+$({ target: 'Object', stat: true }, {
+  fromEntries: function fromEntries(iterable) {
+    var obj = {};
+    iterate(iterable, function (k, v) {
+      createProperty(obj, k, v);
+    }, { AS_ENTRIES: true });
+    return obj;
+  }
+});
+
+
 /***/ }),
 
 /***/ "c430":
@@ -10365,20 +10457,6 @@ module.exports = function (METHOD_NAME) {
 };
 
 
-/***/ }),
-
-/***/ "c8ea":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-exports.push([module.i, ".grid-filter[data-v-d781ace8]{display:flex;width:100%;height:100%;flex-direction:column;text-align:initial}.grid-filter .grid-filter-header[data-v-d781ace8]{height:24px;margin-bottom:12px;text-align:right}.grid-filter .grid-filter-header .ev-button[data-v-d781ace8]{width:70px;margin-left:5px}.grid-filter-body[data-v-d781ace8]{display:flex;width:100%;height:100%;flex-direction:column;align-items:center}.grid-filter-body .ev-button[data-v-d781ace8]{width:100px;margin-top:8px}.grid-filter-body .applyBtn[data-v-d781ace8]{position:absolute;bottom:17px}.grid-filter-add-wrap[data-v-d781ace8]{display:flex;width:100%;padding:10px;background-color:#d3d3d3;margin-bottom:10px;background-color:#e5e5e5}.grid-filter-add-wrap .split-line[data-v-d781ace8]{width:1px;margin:0 20px;background-color:#e5e5e5}.grid-filter-add-wrap .confirm-wrap[data-v-d781ace8]{display:flex;width:70px;margin-right:10px;flex-direction:column;align-items:center}.grid-filter-add-wrap .confirm-wrap .ev-button[data-v-d781ace8]{width:70px}.grid-filter-add-item[data-v-d781ace8]{display:flex;align-items:center;flex:1}.grid-filter-add-item .item-labels[data-v-d781ace8]{margin-right:10px;list-style-type:none}.grid-filter-add-item .item-labels li[data-v-d781ace8]{height:24px;line-height:24px;margin-bottom:8px;font-size:13px;color:#4c4c4c}.grid-filter-add-item .item-labels li[data-v-d781ace8]:last-child{margin-bottom:0}.grid-filter-add-item .item-inputs[data-v-d781ace8]{display:flex;flex-direction:column;flex:1}.grid-filter-add-item .item-inputs .item-input[data-v-d781ace8]{width:100%;height:24px;margin-bottom:8px}.grid-filter-add-item .item-inputs .item-input[data-v-d781ace8]:last-child{margin-bottom:0}.grid-filter-add-item .form-row-contents[data-v-d781ace8]{min-height:35px;flex:1}.grid-filter-add-item .form-row[data-v-d781ace8]{display:flex;width:100%;margin:8px 0}.grid-filter-add-item .form-row-title.wide[data-v-d781ace8]{width:30%;line-height:33px;vertical-align:middle}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "c975":
@@ -11138,18 +11216,26 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 /***/ }),
 
-/***/ "df4c":
+/***/ "ded0":
 /***/ (function(module, exports, __webpack_require__) {
 
-// style-loader: Adds some css to the DOM by adding a <style> tag
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__("1de5");
+var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__("f051");
+var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__("0924");
+var ___CSS_LOADER_URL_IMPORT_2___ = __webpack_require__("eb91");
+var ___CSS_LOADER_URL_IMPORT_3___ = __webpack_require__("a884");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
+var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
+var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
+var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);
+// Module
+exports.push([module.i, ".table[data-v-247d3bf0]{position:relative;width:100%;height:100%;padding-top:33px}.table.non-header[data-v-247d3bf0]{padding-top:0}.table .table-header[data-v-247d3bf0]{overflow:hidden;position:absolute;top:0;width:100%;height:33px;border-top:2px solid #7f7f7f;border-bottom:1px solid #cfcfcf}.dark .table .table-header[data-v-247d3bf0]{border-top:2px solid;border-bottom:1px solid}.table .table-header.non-border[data-v-247d3bf0]{border-bottom:2px solid #7f7f7f!important}.column-list[data-v-247d3bf0]{width:100%;white-space:nowrap;list-style-type:none}.column[data-v-247d3bf0],.column-list[data-v-247d3bf0]{position:relative;height:100%}.column[data-v-247d3bf0]{display:inline-flex;padding:0 10px;line-height:30px;justify-content:center;align-items:center;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid #cfcfcf}.dark .column[data-v-247d3bf0]{border-right:1px solid}.column[data-v-247d3bf0]:last-child{border-right:0;margin-right:20px}.column:last-child .column-resize[data-v-247d3bf0]{cursor:default!important}.column .sort-icon[data-v-247d3bf0]{display:inline-block;float:right;font-size:14px;line-height:30px}.column .ev-icon-filter[data-v-247d3bf0]{font-size:13px;color:#005cc8}.column.db-icon[data-v-247d3bf0],.column.user-icon[data-v-247d3bf0]{width:42px!important;min-width:42px!important;border-right:0}.column-name[data-v-247d3bf0]{display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:14px}.column-filter[data-v-247d3bf0]{display:none;position:absolute;right:0;background-color:transparent}.column-filter i[data-v-247d3bf0]{margin-right:2px;font-size:14px;vertical-align:middle}.column:hover .column-filter[data-v-247d3bf0]{display:block;cursor:pointer}.column-filter-status[data-v-247d3bf0]{position:absolute;left:0;background-color:transparent}.column-filter-status .ei[data-v-247d3bf0]{font-size:10px;vertical-align:top}.column-resize[data-v-247d3bf0]{position:absolute;bottom:0;right:-5px;width:10px;height:100%}.column-resize[data-v-247d3bf0]:hover{cursor:col-resize}.table-body[data-v-247d3bf0]{position:relative;width:100%;height:100%;overflow:auto;overflow-anchor:none}.table-body table[data-v-247d3bf0]{clear:both;border-spacing:0;border-collapse:collapse;width:inherit}.table-body.stripe tr[data-v-247d3bf0]:nth-child(2n){background:hsla(0,0%,89.8%,.6)}.table-body.bottom-border[data-v-247d3bf0]{border-bottom:1px solid #cfcfcf}.dark .table-body.bottom-border[data-v-247d3bf0]{border-bottom:1px solid}.table-body .row[data-v-247d3bf0]{white-space:nowrap;border-bottom:1px solid #cfcfcf}.dark .table-body .row[data-v-247d3bf0]{border-bottom:1px solid}.table-body .row.selected[data-v-247d3bf0]{background:rgba(219,240,249,.6)!important;color:inherit!important;font-size:inherit!important}.dark .table-body .row.selected[data-v-247d3bf0]{background:!important;color:inherit!important;font-size:inherit!important}.table-body .row.highlight[data-v-247d3bf0]{background:#5ab7ff;color:#fff}.table-body .cell[data-v-247d3bf0]{display:inline-block;padding:0 10px;text-align:center;max-width:100%;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #cfcfcf}.dark .table-body .cell[data-v-247d3bf0]{border-right:1px solid}.table-body .cell div[data-v-247d3bf0]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-body .cell.row-checkbox[data-v-247d3bf0]{display:inline-flex;justify-content:center;align-items:center}.table-body .cell.render[data-v-247d3bf0]{overflow:initial}.table-body .cell.float[data-v-247d3bf0],.table-body .cell.number[data-v-247d3bf0]{text-align:right}.table-body .cell.string[data-v-247d3bf0],.table-body .cell.stringNumber[data-v-247d3bf0]{text-align:left}.table-body .cell.center[data-v-247d3bf0]{text-align:center}.table-body .cell.left[data-v-247d3bf0]{text-align:left}.table-body .cell.left .wrap[data-v-247d3bf0]{justify-content:flex-start}.table-body .cell.right[data-v-247d3bf0]{text-align:right}.table-body .cell.right .wrap[data-v-247d3bf0]{justify-content:flex-end}.table-body .cell[data-v-247d3bf0]:last-child{border-right:0}.table-body .cell.user-icon[data-v-247d3bf0]{height:auto!important}.table-body .cell.db-icon[data-v-247d3bf0],.table-body .cell.user-icon[data-v-247d3bf0]{width:42px!important;min-width:42px!important;border-right:0}.table-resize-line[data-v-247d3bf0]{position:absolute;top:0;bottom:0;width:1px;border-right:1px solid #cfcfcf}.dark .table-resize-line[data-v-247d3bf0]{border-right:1px solid}.vscroll-spacer[data-v-247d3bf0]{opacity:0;clear:both}[v-cloak][data-v-247d3bf0]{display:none}.ev-checkbox[data-v-247d3bf0]{margin:0}.non-border[data-v-247d3bf0]{border:none!important}.is-empty[data-v-247d3bf0]{height:30px;text-align:center}.postgresql[data-v-247d3bf0]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat 50%}.oracle[data-v-247d3bf0]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat 50%}.mongodb[data-v-247d3bf0]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") no-repeat 50%}.mysql[data-v-247d3bf0]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") no-repeat 50%}", ""]);
+// Exports
+module.exports = exports;
 
-// load the styles
-var content = __webpack_require__("73a9");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("0a1ba34a", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -11446,17 +11532,6 @@ module.exports = function (target, src, options) {
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "e419":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_c263f57e_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("584d");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_c263f57e_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Grid_vue_vue_type_style_index_0_id_c263f57e_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "e439":
@@ -12184,17 +12259,6 @@ var update = add("35ac9d20", content, true, {"sourceMap":false,"shadowMode":fals
 
 module.exports = __webpack_require__.p + "img/icon_mongodb.4643494b.svg";
 
-/***/ }),
-
-/***/ "ecfb":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("df4c");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "edeb":
@@ -12381,6 +12445,21 @@ module.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
 };
 
 
+/***/ }),
+
+/***/ "f648":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("b7b9");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("410590da", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "f772":
@@ -26172,39 +26251,39 @@ var dist_default = /*#__PURE__*/__webpack_require__.n(dist);
 var vue3_observe_visibility_common = __webpack_require__("196e");
 var vue3_observe_visibility_common_default = /*#__PURE__*/__webpack_require__.n(vue3_observe_visibility_common);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/Grid.vue?vue&type=template&id=c263f57e&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/Grid.vue?vue&type=template&id=247d3bf0&scoped=true
 
 
 
 
 
-var _withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-c263f57e");
+var _withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-247d3bf0");
 
-Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-c263f57e");
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-247d3bf0");
 
-var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_1 = {
+var Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_1 = {
   class: "column-list"
 };
-var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_2 = {
+var Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_2 = {
   key: 0,
   class: "column-filter-status"
 };
-var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_3 = {
+var Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_3 = {
   key: 0
 };
 
-var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
+var Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
   class: "is-empty"
 }, "No records", -1);
 
-var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_5 = {
+var Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_5 = {
   ref: "resizeLine",
   class: "table-resize-line"
 };
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
-var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+var Gridvue_type_template_id_247d3bf0_scoped_true_render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   var _component_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("toolbar");
 
   var _component_ev_checkbox = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-checkbox");
@@ -26215,17 +26294,17 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
 
   var _component_filter_window = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("filter-window");
 
+  var _component_pagination = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("pagination");
+
   var _directive_resize = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("resize");
 
   var _directive_observe_visibility = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("observe-visibility");
 
-  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [!!_ctx.$slots.toolbar ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [_ctx.$slots.toolbar ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
     key: 0,
     class: "toolbar-wrapper",
     style: "width: ".concat(_ctx.gridWidth, ";")
-  }, [!!_ctx.$slots.toolbar ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_toolbar, {
-    key: 0
-  }, {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_toolbar, null, {
     toolbarWrapper: _withId(function () {
       return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "toolbar", {
         item: {
@@ -26234,7 +26313,7 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
       })];
     }),
     _: 1
-  })) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 4)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["mergeProps"])({
+  })], 4)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["mergeProps"])({
     ref: "grid-wrapper"
   }, _ctx.$attrs, {
     class: "grid-wrapper",
@@ -26253,7 +26332,7 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
       'table-header': true,
       'non-border': !!$setup.borderStyle
     }
-  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_1, [_ctx.useCheckbox.use ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_1, [_ctx.useCheckbox.use ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
     key: 0,
     class: {
       'column': true,
@@ -26280,10 +26359,13 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
         render: $setup.isRenderer(column),
         'non-border': !!$setup.borderStyle
       }, column.field, column.field),
-      style: "\n                width: ".concat(column.width, "px;\n                min-width: ").concat($setup.isRenderer(column) ? _ctx.rendererMinWidth : _ctx.minWidth, "px;")
+      style: {
+        width: "".concat(column.width, "px"),
+        'min-width': "".concat($setup.isRenderer(column) ? _ctx.rendererMinWidth : _ctx.minWidth, "px")
+      }
     }, [_ctx.isFiltering && (_ctx$filterList$colum = _ctx.filterList[column.field]) !== null && _ctx$filterList$colum !== void 0 && _ctx$filterList$colum.find(function (item) {
       return item.use;
-    }) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
+    }) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
       icon: "ev-icon-filter"
     })])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
       title: column.caption,
@@ -26379,7 +26461,12 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
         class: (_class2 = {
           cell: true
         }, _defineProperty(_class2, column.type, column.type), _defineProperty(_class2, column.align, column.align), _defineProperty(_class2, "render", $setup.isRenderer(column)), _defineProperty(_class2, 'non-border', !!$setup.borderStyle), _defineProperty(_class2, column.field, column.field), _class2),
-        style: "\n                  width: ".concat(column.width, "px;\n                  height: ").concat(_ctx.rowHeight, "px;\n                  line-height: ").concat(_ctx.rowHeight, "px;\n                  min-width: ").concat($setup.isRenderer(column) ? _ctx.rendererMinWidth : _ctx.minWidth, "px;")
+        style: {
+          width: "".concat(column.width, "px"),
+          height: "".concat(_ctx.rowHeight, "px"),
+          'line-height': "".concat(_ctx.rowHeight, "px"),
+          'min-width': "".concat($setup.isRenderer(column) ? _ctx.rendererMinWidth : _ctx.minWidth, "px")
+        }
       }, [!!_ctx.$slots[column.field] ? Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, column.field, {
         key: 0,
         item: {
@@ -26391,13 +26478,13 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
         title: $setup.getConvertValue(column.type, row[2][column.index])
       }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.getConvertValue(column.type, row[2][column.index])), 9, ["title"]))], 14, ["data-name", "data-index"])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 64);
     }), 128))], 42, ["data-index", "onClick", "onDblclick"]);
-  }), 128)), !_ctx.viewStore.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_3, [Gridvue_type_template_id_c263f57e_scoped_true_hoisted_4])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+  }), 128)), !_ctx.viewStore.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_3, [Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_4])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
     style: "height: ".concat(_ctx.vScrollBottomHeight, "px;"),
     class: "vscroll-spacer"
   }, null, 4), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_context_menu, {
     ref: "menu",
     items: _ctx.contextMenuItems
-  }, null, 8, ["items"])], 34), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_5, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showResizeLine]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_filter_window, {
+  }, null, 8, ["items"])], 34), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Gridvue_type_template_id_247d3bf0_scoped_true_hoisted_5, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showResizeLine]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_filter_window, {
     "is-show": _ctx.showFilterWindow,
     "target-column": _ctx.currentFilter.column,
     "filter-items": _ctx.currentFilter.items,
@@ -26406,92 +26493,235 @@ var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(
   }, null, 8, ["is-show", "target-column", "filter-items", "onApplyFilter", "onBeforeClose"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showFilterWindow]])], 2)], 16), [[_directive_resize, $setup.onResize], [_directive_observe_visibility, {
     callback: $setup.onShow,
     once: true
-  }]])], 64);
+  }]]), _ctx.usePage && !_ctx.isInfinite ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_pagination, {
+    key: 1,
+    modelValue: _ctx.currentPage,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.currentPage = $event;
+    }),
+    total: _ctx.store.length,
+    "per-page": _ctx.perPage,
+    "visible-page": _ctx.visiblePage,
+    "show-page-info": _ctx.showPageInfo,
+    order: _ctx.order
+  }, null, 8, ["modelValue", "total", "per-page", "visible-page", "show-page-info", "order"])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 64);
 });
-// CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=template&id=c263f57e&scoped=true
+// CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=template&id=247d3bf0&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.toolbar.vue?vue&type=template&id=3c245986
+
+var grid_toolbarvue_type_template_id_3c245986_hoisted_1 = {
+  class: "description gridToolbar"
+};
+function grid_toolbarvue_type_template_id_3c245986_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", grid_toolbarvue_type_template_id_3c245986_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "toolbarWrapper")]);
+}
+// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=template&id=3c245986
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.toolbar.vue?vue&type=script&lang=js
+/* harmony default export */ var grid_toolbarvue_type_script_lang_js = ({
+  name: 'EvGridToolbar'
+});
+// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=style&index=0&id=3c245986&lang=scss
+var grid_toolbarvue_type_style_index_0_id_3c245986_lang_scss = __webpack_require__("9a34");
+
+// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.filter.window.vue?vue&type=template&id=d781ace8&scoped=true
 
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-d781ace8");
 
-Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-d781ace8");
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_1 = {
+grid_toolbarvue_type_script_lang_js.render = grid_toolbarvue_type_template_id_3c245986_render
+
+/* harmony default export */ var grid_toolbar = (grid_toolbarvue_type_script_lang_js);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.pagination.vue?vue&type=template&id=210f4f6a&scoped=true
+
+
+var grid_paginationvue_type_template_id_210f4f6a_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-210f4f6a");
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-210f4f6a");
+
+var grid_paginationvue_type_template_id_210f4f6a_scoped_true_hoisted_1 = {
+  class: "grid-pagination"
+};
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
+
+var grid_paginationvue_type_template_id_210f4f6a_scoped_true_render = /*#__PURE__*/grid_paginationvue_type_template_id_210f4f6a_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ev_pagination = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-pagination");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", grid_paginationvue_type_template_id_210f4f6a_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_pagination, {
+    modelValue: $setup.currentValue,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return $setup.currentValue = $event;
+    }),
+    total: $props.total,
+    "per-page": $props.perPage,
+    "visible-page": $props.visiblePage,
+    "show-page-info": $props.showPageInfo,
+    order: $props.order,
+    onChange: $setup.changePage
+  }, null, 8, ["modelValue", "total", "per-page", "visible-page", "show-page-info", "order", "onChange"])]);
+});
+// CONCATENATED MODULE: ./src/components/grid/grid.pagination.vue?vue&type=template&id=210f4f6a&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.pagination.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ var grid_paginationvue_type_script_lang_js = ({
+  name: 'EvGridPagination',
+  props: {
+    total: {
+      type: [Number, String],
+      default: 0
+    },
+    visiblePage: {
+      type: [Number, String],
+      default: 8
+    },
+    perPage: {
+      type: [Number, String],
+      default: 20
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 1
+    },
+    showPageInfo: {
+      type: Boolean,
+      default: false
+    },
+    order: {
+      type: String,
+      default: 'left',
+      validator: function validator(val) {
+        return ['left', 'right', 'center'].includes(val);
+      }
+    }
+  },
+  emits: {
+    'update:modelValue': null
+  },
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var currentValue = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(props.modelValue);
+
+    var changePage = function changePage(page) {
+      currentValue.value = page > 0 ? page : 1;
+      emit('update:modelValue', currentValue.value);
+    };
+
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return props.modelValue;
+    }, function (value) {
+      currentValue.value = value;
+    });
+    return {
+      currentValue: currentValue,
+      changePage: changePage
+    };
+  }
+});
+// CONCATENATED MODULE: ./src/components/grid/grid.pagination.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./src/components/grid/grid.pagination.vue?vue&type=style&index=0&id=210f4f6a&lang=scss&scoped=true
+var grid_paginationvue_type_style_index_0_id_210f4f6a_lang_scss_scoped_true = __webpack_require__("5e0f");
+
+// CONCATENATED MODULE: ./src/components/grid/grid.pagination.vue
+
+
+
+
+
+grid_paginationvue_type_script_lang_js.render = grid_paginationvue_type_template_id_210f4f6a_scoped_true_render
+grid_paginationvue_type_script_lang_js.__scopeId = "data-v-210f4f6a"
+
+/* harmony default export */ var grid_pagination = (grid_paginationvue_type_script_lang_js);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.filter.window.vue?vue&type=template&id=138f0008&scoped=true
+
+
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-138f0008");
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-138f0008");
+
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_1 = {
   class: "grid-filter"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_2 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_2 = {
   class: "grid-filter-header"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Add ");
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Add ");
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Delete ");
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Delete ");
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_5 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_5 = {
   class: "grid-filter-body"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_6 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_6 = {
   key: 0,
   class: "grid-filter-add-wrap"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_7 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_7 = {
   class: "grid-filter-add-item"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_8 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_8 = {
   class: "form-row-contents"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_9 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_9 = {
   class: "form-row"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_10 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_10 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
   class: "form-row-title wide"
 }, "Type", -1);
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_11 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_11 = {
   class: "form-row-contents"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_12 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_12 = {
   class: "form-row"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_13 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_13 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
   class: "form-row-title wide"
 }, "Comparison", -1);
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_14 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_14 = {
   class: "form-row-contents"
 };
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_15 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_15 = {
   class: "form-row"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_16 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_16 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
   class: "form-row-title wide"
 }, "Value", -1);
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_17 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_17 = {
   class: "form-row-contents"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
   class: "split-line"
 }, null, -1);
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_19 = {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_19 = {
   class: "confirm-wrap"
 };
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Save ");
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Save ");
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Cancel ");
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Cancel ");
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Apply ");
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Apply ");
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
-var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PURE__*/grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+var grid_filter_windowvue_type_template_id_138f0008_scoped_true_render = /*#__PURE__*/grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ev_button = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-button");
 
   var _component_ev_select = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-select");
@@ -26509,13 +26739,13 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
     }),
     title: "Setting Filter(".concat($props.targetColumn.caption, ")")
   }, {
-    default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
+    default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
         size: "small",
         onClick: $setup.onAdd
       }, {
-        default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_3];
+        default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_3];
         }),
         _: 1
       }, 8, ["onClick"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
@@ -26523,25 +26753,25 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
         disabled: !_ctx.checked.length,
         onClick: $setup.onDelete
       }, {
-        default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_4];
+        default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_4];
         }),
         _: 1
-      }, 8, ["disabled", "onClick"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_5, [$setup.showAddForm ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_7, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_9, [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_10, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_select, {
+      }, 8, ["disabled", "onClick"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_5, [$setup.showAddForm ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_7, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_9, [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_10, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_select, {
         modelValue: _ctx.addInfo.type,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
           return _ctx.addInfo.type = $event;
         }),
         items: _ctx.types,
         class: "item-input"
-      }, null, 8, ["modelValue", "items"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_12, [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_13, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_14, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_select, {
+      }, null, 8, ["modelValue", "items"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_12, [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_13, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_14, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_select, {
         modelValue: _ctx.addInfo.comparison,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
           return _ctx.addInfo.comparison = $event;
         }),
         items: $setup.getList($props.targetColumn.type),
         class: "item-input"
-      }, null, 8, ["modelValue", "items"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_15, [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_16, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_17, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_text_field, {
+      }, null, 8, ["modelValue", "items"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_15, [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_16, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_17, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_text_field, {
         modelValue: _ctx.addInfo.value,
         "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
           return _ctx.addInfo.value = $event;
@@ -26552,20 +26782,20 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
         type: "text",
         placeholder: "Please enter the content",
         class: "item-input"
-      }, null, 8, ["modelValue"])])])])]), grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_19, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
+      }, null, 8, ["modelValue"])])])])]), grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_19, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
         size: "small",
         onClick: $setup.onSave
       }, {
-        default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_20];
+        default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_20];
         }),
         _: 1
       }, 8, ["onClick"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
         size: "small",
         onClick: $setup.onCancel
       }, {
-        default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_21];
+        default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_21];
         }),
         _: 1
       }, 8, ["onClick"])])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_grid, {
@@ -26591,8 +26821,8 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
         type: "primary",
         onClick: $setup.onApply
       }, {
-        default: grid_filter_windowvue_type_template_id_d781ace8_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_d781ace8_scoped_true_hoisted_22];
+        default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
+          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_22];
         }),
         _: 1
       }, 8, ["onClick"])])])];
@@ -26600,7 +26830,7 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
     _: 1
   }, 8, ["visible", "title"])]);
 });
-// CONCATENATED MODULE: ./src/components/grid/grid.filter.window.vue?vue&type=template&id=d781ace8&scoped=true
+// CONCATENATED MODULE: ./src/components/grid/grid.filter.window.vue?vue&type=template&id=138f0008&scoped=true
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.filter.window.vue?vue&type=script&lang=js
 
@@ -26609,6 +26839,7 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
 
 
 /* harmony default export */ var grid_filter_windowvue_type_script_lang_js = ({
+  name: 'EvGridFilterWindow',
   props: {
     /**
      * 필터 팝업 표시 유무
@@ -26918,8 +27149,8 @@ var grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render = /*#__PU
 });
 // CONCATENATED MODULE: ./src/components/grid/grid.filter.window.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/grid/grid.filter.window.vue?vue&type=style&index=0&id=d781ace8&lang=scss&scoped=true
-var grid_filter_windowvue_type_style_index_0_id_d781ace8_lang_scss_scoped_true = __webpack_require__("6b66");
+// EXTERNAL MODULE: ./src/components/grid/grid.filter.window.vue?vue&type=style&index=0&id=138f0008&lang=scss&scoped=true
+var grid_filter_windowvue_type_style_index_0_id_138f0008_lang_scss_scoped_true = __webpack_require__("a85c");
 
 // CONCATENATED MODULE: ./src/components/grid/grid.filter.window.vue
 
@@ -26927,38 +27158,10 @@ var grid_filter_windowvue_type_style_index_0_id_d781ace8_lang_scss_scoped_true =
 
 
 
-grid_filter_windowvue_type_script_lang_js.render = grid_filter_windowvue_type_template_id_d781ace8_scoped_true_render
-grid_filter_windowvue_type_script_lang_js.__scopeId = "data-v-d781ace8"
+grid_filter_windowvue_type_script_lang_js.render = grid_filter_windowvue_type_template_id_138f0008_scoped_true_render
+grid_filter_windowvue_type_script_lang_js.__scopeId = "data-v-138f0008"
 
 /* harmony default export */ var grid_filter_window = (grid_filter_windowvue_type_script_lang_js);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.toolbar.vue?vue&type=template&id=3c245986
-
-var grid_toolbarvue_type_template_id_3c245986_hoisted_1 = {
-  class: "description gridToolbar"
-};
-function grid_toolbarvue_type_template_id_3c245986_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", grid_toolbarvue_type_template_id_3c245986_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "toolbarWrapper")]);
-}
-// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=template&id=3c245986
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.toolbar.vue?vue&type=script&lang=js
-/* harmony default export */ var grid_toolbarvue_type_script_lang_js = ({
-  name: 'EvGridToolbar'
-});
-// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=script&lang=js
- 
-// EXTERNAL MODULE: ./src/components/grid/grid.toolbar.vue?vue&type=style&index=0&id=3c245986&lang=scss
-var grid_toolbarvue_type_style_index_0_id_3c245986_lang_scss = __webpack_require__("9a34");
-
-// CONCATENATED MODULE: ./src/components/grid/grid.toolbar.vue
-
-
-
-
-
-grid_toolbarvue_type_script_lang_js.render = grid_toolbarvue_type_template_id_3c245986_render
-
-/* harmony default export */ var grid_toolbar = (grid_toolbarvue_type_script_lang_js);
 // CONCATENATED MODULE: ./node_modules/lodash-es/_baseIsMatch.js
 
 
@@ -28132,48 +28335,51 @@ var uses_commonFunctions = function commonFunctions() {
     setPixelUnit: setPixelUnit
   };
 };
-var uses_scrollEvent = function scrollEvent(params) {
-  var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance2.emit;
-
+var scrollEvent = function scrollEvent(params) {
   var scrollInfo = params.scrollInfo,
       stores = params.stores,
       elementInfo = params.elementInfo,
       resizeInfo = params.resizeInfo,
-      pageInfo = params.pageInfo;
+      pageInfo = params.pageInfo,
+      getPagingData = params.getPagingData,
+      updatePagingInfo = params.updatePagingInfo;
   /**
    * 수직 스크롤의 위치 계산 후 적용한다.
    */
 
-  var updateVScroll = function updateVScroll() {
+  var updateVScroll = function updateVScroll(isScroll) {
     var bodyEl = elementInfo.body;
     var rowHeight = resizeInfo.rowHeight;
 
     if (bodyEl) {
-      var rowCount = bodyEl.clientHeight > rowHeight ? Math.ceil(bodyEl.clientHeight / rowHeight) : stores.store.length;
-      var totalScrollHeight = stores.store.length * rowHeight;
+      var store = stores.store;
+
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
+
+      var rowCount = bodyEl.clientHeight > rowHeight ? Math.ceil(bodyEl.clientHeight / rowHeight) : store.length;
+      var totalScrollHeight = store.length * rowHeight;
       var firstVisibleIndex = Math.floor(bodyEl.scrollTop / rowHeight);
 
-      if (firstVisibleIndex > stores.store.length - 1) {
+      if (firstVisibleIndex > store.length - 1) {
         firstVisibleIndex = 0;
       }
 
       var lastVisibleIndex = firstVisibleIndex + rowCount;
       var firstIndex = Math.max(firstVisibleIndex, 0);
       var lastIndex = lastVisibleIndex;
-      stores.viewStore = stores.store.slice(firstIndex, lastIndex);
-      scrollInfo.hasVerticalScrollBar = rowCount < stores.store.length;
+      stores.viewStore = store.slice(firstIndex, lastIndex);
+      scrollInfo.hasVerticalScrollBar = rowCount < store.length;
       scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
       scrollInfo.vScrollBottomHeight = totalScrollHeight - stores.viewStore.length * rowHeight - scrollInfo.vScrollTopHeight;
 
-      if (scrollInfo.vScrollBottomHeight === 0) {
+      if (isScroll && pageInfo.isInfinite && scrollInfo.vScrollBottomHeight === 0) {
         pageInfo.prevPage = pageInfo.currentPage;
-        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.dataCount) + 1;
-        emit('scroll-end', {
-          startIndex: lastIndex,
-          dataCount: pageInfo.dataCount,
-          prevPage: pageInfo.prevPage,
-          currentPage: pageInfo.currentPage
+        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.perPage) + 1;
+        pageInfo.startIndex = lastIndex;
+        updatePagingInfo({
+          onScrollEnd: true
         });
       }
     }
@@ -28203,7 +28409,7 @@ var uses_scrollEvent = function scrollEvent(params) {
     var isVertical = !(scrollTop === lastTop);
 
     if (isVertical && bodyEl !== null && bodyEl !== void 0 && bodyEl.clientHeight) {
-      updateVScroll();
+      updateVScroll(true);
     }
 
     if (isHorizontal) {
@@ -28221,8 +28427,8 @@ var uses_scrollEvent = function scrollEvent(params) {
   };
 };
 var uses_resizeEvent = function resizeEvent(params) {
-  var _getCurrentInstance3 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance3.props;
+  var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance2.props;
 
   var resizeInfo = params.resizeInfo,
       elementInfo = params.elementInfo,
@@ -28438,8 +28644,8 @@ var uses_resizeEvent = function resizeEvent(params) {
   };
 };
 var uses_clickEvent = function clickEvent(params) {
-  var _getCurrentInstance4 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance4.emit;
+  var _getCurrentInstance3 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance3.emit;
 
   var selectInfo = params;
 
@@ -28505,10 +28711,12 @@ var uses_clickEvent = function clickEvent(params) {
 };
 var uses_checkEvent = function checkEvent(params) {
   var checkInfo = params.checkInfo,
-      stores = params.stores;
+      stores = params.stores,
+      pageInfo = params.pageInfo,
+      getPagingData = params.getPagingData;
 
-  var _getCurrentInstance5 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance5.emit;
+  var _getCurrentInstance4 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance4.emit;
   /**
    * row에 대한 체크 상태를 해제한다.
    *
@@ -28549,6 +28757,11 @@ var uses_checkEvent = function checkEvent(params) {
 
       checkInfo.checkedIndex.add(row[uses_ROW_INDEX]);
       var store = stores.store;
+
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
+
       var isAllChecked = store.every(function (d) {
         return d[uses_ROW_CHECK_INDEX];
       });
@@ -28582,6 +28795,11 @@ var uses_checkEvent = function checkEvent(params) {
   var onCheckAll = function onCheckAll(event) {
     var isHeaderChecked = checkInfo.isHeaderChecked;
     var store = stores.store;
+
+    if (pageInfo.isClientPaging) {
+      store = getPagingData();
+    }
+
     store.forEach(function (row) {
       if (isHeaderChecked) {
         if (!checkInfo.checkedRows.includes(row[uses_ROW_DATA_INDEX])) {
@@ -28610,10 +28828,11 @@ var uses_checkEvent = function checkEvent(params) {
 var uses_sortEvent = function sortEvent(params) {
   var sortInfo = params.sortInfo,
       stores = params.stores,
-      getColumnIndex = params.getColumnIndex;
+      getColumnIndex = params.getColumnIndex,
+      updatePagingInfo = params.updatePagingInfo;
 
-  var _getCurrentInstance6 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance6.props;
+  var _getCurrentInstance5 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance5.props;
 
   function OrderQueue() {
     var _this2 = this;
@@ -28648,6 +28867,9 @@ var uses_sortEvent = function sortEvent(params) {
       sortInfo.sortOrder = order.dequeue();
       order.enqueue(sortInfo.sortOrder);
       sortInfo.isSorting = true;
+      updatePagingInfo({
+        onSort: true
+      });
     }
   };
   /**
@@ -28722,15 +28944,18 @@ var uses_sortEvent = function sortEvent(params) {
   };
 };
 var uses_filterEvent = function filterEvent(params) {
-  var _getCurrentInstance7 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance7.props;
+  var _getCurrentInstance6 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance6.props;
 
   var filterInfo = params.filterInfo,
       stores = params.stores,
       checkInfo = params.checkInfo,
+      pageInfo = params.pageInfo,
       getColumnIndex = params.getColumnIndex,
       getConvertValue = params.getConvertValue,
-      updateVScroll = params.updateVScroll;
+      updateVScroll = params.updateVScroll,
+      getPagingData = params.getPagingData,
+      updatePagingInfo = params.updatePagingInfo;
   /**
    * 해당 컬럼에 대한 필터 팝업을 보여준다.
    *
@@ -28984,6 +29209,14 @@ var uses_filterEvent = function filterEvent(params) {
         checkInfo.isHeaderChecked = false;
       }
 
+      if (!searchWord && pageInfo.isClientPaging && pageInfo.prevPage) {
+        pageInfo.currentPage = 1;
+        stores.pagingStore = getPagingData();
+      }
+
+      updatePagingInfo({
+        onSearch: true
+      });
       updateVScroll();
     }, 500);
   };
@@ -28997,8 +29230,8 @@ var uses_filterEvent = function filterEvent(params) {
   };
 };
 var uses_contextMenuEvent = function contextMenuEvent(params) {
-  var _getCurrentInstance8 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance8.emit;
+  var _getCurrentInstance7 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance7.emit;
 
   var contextInfo = params.contextInfo,
       stores = params.stores,
@@ -29079,8 +29312,8 @@ var uses_contextMenuEvent = function contextMenuEvent(params) {
   };
 };
 var uses_storeEvent = function storeEvent(params) {
-  var _getCurrentInstance9 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance9.props;
+  var _getCurrentInstance8 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance8.props;
 
   var selectInfo = params.selectInfo,
       checkInfo = params.checkInfo,
@@ -29144,28 +29377,83 @@ var uses_storeEvent = function storeEvent(params) {
       updateVScroll();
     }
   };
-  /**
-   * 컴포넌트의 변경 데이터를 store에 업데이트한다.
-   *
-   * @param {number} rowIndex - row 인덱스
-   * @param {number} cellIndex - cell 인덱스
-   * @param {number|string} newValue - 데이터
-   */
 
+  return {
+    setStore: setStore
+  };
+};
+var uses_pagingEvent = function pagingEvent(params) {
+  var _getCurrentInstance9 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance9.emit;
 
-  var updateData = function updateData(rowIndex, cellIndex, newValue) {
-    var row = stores.store.filter(function (data) {
-      return data[0] === rowIndex;
+  var stores = params.stores,
+      pageInfo = params.pageInfo,
+      sortInfo = params.sortInfo,
+      filterInfo = params.filterInfo,
+      elementInfo = params.elementInfo,
+      clearCheckInfo = params.clearCheckInfo;
+
+  var getPagingData = function getPagingData() {
+    var start = (pageInfo.currentPage - 1) * pageInfo.perPage;
+    var end = parseInt(start, 10) + parseInt(pageInfo.perPage, 10);
+    return stores.store.slice(start, end);
+  };
+
+  var updatePagingInfo = function updatePagingInfo(eventName) {
+    emit('page-change', {
+      eventName: eventName,
+      pageInfo: {
+        currentPage: pageInfo.currentPage,
+        prevPage: pageInfo.prevPage,
+        startIndex: pageInfo.startIndex,
+        total: pageInfo.total,
+        perPage: pageInfo.perPage
+      },
+      sortInfo: {
+        field: sortInfo.sortField,
+        order: sortInfo.sortOrder
+      },
+      searchInfo: {
+        searchWord: filterInfo.searchWord,
+        searchColumns: stores.orderedColumns.filter(function (c) {
+          return !c.hide && ((c === null || c === void 0 ? void 0 : c.searchable) === undefined || (c === null || c === void 0 ? void 0 : c.searchable));
+        }).map(function (d) {
+          return d.field;
+        })
+      }
     });
 
-    if (row) {
-      row[0][uses_ROW_DATA_INDEX][cellIndex] = newValue;
+    if (pageInfo.isInfinite && (eventName !== null && eventName !== void 0 && eventName.onSearch || eventName !== null && eventName !== void 0 && eventName.onSort)) {
+      pageInfo.currentPage = 1;
+      elementInfo.body.scrollTop = 0;
+      clearCheckInfo();
+    }
+  };
+
+  var changePage = function changePage(beforeVal) {
+    if (pageInfo.isClientPaging) {
+      pageInfo.prevPage = beforeVal;
+
+      if (stores.store.length <= pageInfo.perPage) {
+        stores.pagingStore = stores.store;
+      } else {
+        var start = (pageInfo.currentPage - 1) * pageInfo.perPage;
+        var end = parseInt(start, 10) + parseInt(pageInfo.perPage, 10);
+        stores.pagingStore = stores.store.slice(start, end);
+        elementInfo.body.scrollTop = 0;
+        pageInfo.startIndex = start;
+      }
     }
+
+    updatePagingInfo({
+      onChangePage: true
+    });
   };
 
   return {
-    setStore: setStore,
-    updateData: updateData
+    getPagingData: getPagingData,
+    updatePagingInfo: updatePagingInfo,
+    changePage: changePage
   };
 };
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/Grid.vue?vue&type=script&lang=js
@@ -29185,11 +29473,13 @@ var uses_storeEvent = function storeEvent(params) {
 
 
 
+
 /* harmony default export */ var Gridvue_type_script_lang_js = ({
   name: 'EvGrid',
   components: {
-    FilterWindow: grid_filter_window,
-    Toolbar: grid_toolbar
+    Toolbar: grid_toolbar,
+    Pagination: grid_pagination,
+    FilterWindow: grid_filter_window
   },
   props: {
     columns: {
@@ -29238,9 +29528,15 @@ var uses_storeEvent = function storeEvent(params) {
     'update:checked': null,
     'check-row': null,
     'check-all': null,
-    'scroll-end': null
+    'page-change': null
   },
   setup: function setup(props) {
+    var _props$option$page2;
+
+    var ROW_INDEX = 0;
+    var ROW_CHECK_INDEX = 1;
+    var ROW_DATA_INDEX = 2;
+
     var _commonFunctions = uses_commonFunctions(),
         isRenderer = _commonFunctions.isRenderer,
         getComponentName = _commonFunctions.getComponentName,
@@ -29291,6 +29587,7 @@ var uses_storeEvent = function storeEvent(params) {
       viewStore: [],
       originStore: [],
       filterStore: [],
+      pagingStore: [],
       store: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
         var store = filterInfo.isFiltering ? stores.filterStore : stores.originStore;
         return filterInfo.isSearch ? stores.searchStore : store;
@@ -29303,6 +29600,50 @@ var uses_storeEvent = function storeEvent(params) {
         });
       })
     });
+    var pageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+      usePage: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page;
+
+        return ((_props$option$page = props.option.page) === null || _props$option$page === void 0 ? void 0 : _props$option$page.use) || false;
+      }),
+      useClient: ((_props$option$page2 = props.option.page) === null || _props$option$page2 === void 0 ? void 0 : _props$option$page2.useClient) || false,
+      isInfinite: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page3;
+
+        return ((_props$option$page3 = props.option.page) === null || _props$option$page3 === void 0 ? void 0 : _props$option$page3.isInfinite) || false;
+      }),
+      startIndex: 0,
+      prevPage: 0,
+      currentPage: 0,
+      total: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page4;
+
+        return ((_props$option$page4 = props.option.page) === null || _props$option$page4 === void 0 ? void 0 : _props$option$page4.total) || 0;
+      }),
+      perPage: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page5;
+
+        return ((_props$option$page5 = props.option.page) === null || _props$option$page5 === void 0 ? void 0 : _props$option$page5.perPage) || 20;
+      }),
+      visiblePage: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page6;
+
+        return ((_props$option$page6 = props.option.page) === null || _props$option$page6 === void 0 ? void 0 : _props$option$page6.visiblePage) || 8;
+      }),
+      order: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page7;
+
+        return ((_props$option$page7 = props.option.page) === null || _props$option$page7 === void 0 ? void 0 : _props$option$page7.order) || 'center';
+      }),
+      showPageInfo: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page8;
+
+        return ((_props$option$page8 = props.option.page) === null || _props$option$page8 === void 0 ? void 0 : _props$option$page8.showPageInfo) || false;
+      }),
+      isClientPaging: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        return pageInfo.useClient && pageInfo.usePage && !pageInfo.isInfinite;
+      })
+    });
     var checkInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
       prevCheckedRow: [],
       isHeaderChecked: false,
@@ -29355,33 +29696,36 @@ var uses_storeEvent = function storeEvent(params) {
         return props.height ? setPixelUnit(props.height) : '100%';
       })
     });
-    var pageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
-      currentPage: 1,
-      prevPage: 0,
-      startIndex: 0,
-      use: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-        var _props$option$page;
 
-        return ((_props$option$page = props.option.page) === null || _props$option$page === void 0 ? void 0 : _props$option$page.use) || false;
-      }),
-      dataCount: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-        var _props$option$page2;
-
-        return ((_props$option$page2 = props.option.page) === null || _props$option$page2 === void 0 ? void 0 : _props$option$page2.dataCount) || 50;
-      }),
-      isInfinite: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-        var _props$option$page3;
+    var clearCheckInfo = function clearCheckInfo() {
+      checkInfo.checkedRows = [];
+      checkInfo.checkedIndex.clear();
+      checkInfo.isHeaderChecked = false;
+      stores.store.forEach(function (row) {
+        row[ROW_CHECK_INDEX] = false;
+      });
+    };
 
-        return ((_props$option$page3 = props.option.page) === null || _props$option$page3 === void 0 ? void 0 : _props$option$page3.isInfinite) || false;
-      })
-    });
+    var _pagingEvent = uses_pagingEvent({
+      stores: stores,
+      pageInfo: pageInfo,
+      sortInfo: sortInfo,
+      filterInfo: filterInfo,
+      elementInfo: elementInfo,
+      clearCheckInfo: clearCheckInfo
+    }),
+        getPagingData = _pagingEvent.getPagingData,
+        updatePagingInfo = _pagingEvent.updatePagingInfo,
+        changePage = _pagingEvent.changePage;
 
-    var _scrollEvent = uses_scrollEvent({
+    var _scrollEvent = scrollEvent({
       scrollInfo: scrollInfo,
       stores: stores,
       elementInfo: elementInfo,
       resizeInfo: resizeInfo,
-      pageInfo: pageInfo
+      pageInfo: pageInfo,
+      getPagingData: getPagingData,
+      updatePagingInfo: updatePagingInfo
     }),
         updateVScroll = _scrollEvent.updateVScroll,
         updateHScroll = _scrollEvent.updateHScroll,
@@ -29394,7 +29738,9 @@ var uses_storeEvent = function storeEvent(params) {
     var _checkEvent = uses_checkEvent({
       checkInfo: checkInfo,
       stores: stores,
-      filterInfo: filterInfo
+      pageInfo: pageInfo,
+      getPagingData: getPagingData,
+      updatePagingInfo: updatePagingInfo
     }),
         onCheck = _checkEvent.onCheck,
         onCheckAll = _checkEvent.onCheckAll;
@@ -29402,7 +29748,8 @@ var uses_storeEvent = function storeEvent(params) {
     var _sortEvent = uses_sortEvent({
       sortInfo: sortInfo,
       stores: stores,
-      getColumnIndex: getColumnIndex
+      getColumnIndex: getColumnIndex,
+      updatePagingInfo: updatePagingInfo
     }),
         onSort = _sortEvent.onSort,
         setSort = _sortEvent.setSort;
@@ -29411,9 +29758,12 @@ var uses_storeEvent = function storeEvent(params) {
       filterInfo: filterInfo,
       stores: stores,
       checkInfo: checkInfo,
+      pageInfo: pageInfo,
       getColumnIndex: getColumnIndex,
       getConvertValue: getConvertValue,
-      updateVScroll: updateVScroll
+      updateVScroll: updateVScroll,
+      getPagingData: getPagingData,
+      updatePagingInfo: updatePagingInfo
     }),
         onClickFilter = _filterEvent.onClickFilter,
         onCloseFilterWindow = _filterEvent.onCloseFilterWindow,
@@ -29432,14 +29782,14 @@ var uses_storeEvent = function storeEvent(params) {
       setFilter: setFilter,
       updateVScroll: updateVScroll
     }),
-        setStore = _storeEvent.setStore,
-        updateData = _storeEvent.updateData;
+        setStore = _storeEvent.setStore;
 
     var _resizeEvent = uses_resizeEvent({
       resizeInfo: resizeInfo,
       elementInfo: elementInfo,
       checkInfo: checkInfo,
       stores: stores,
+      filterInfo: filterInfo,
       isRenderer: isRenderer,
       updateVScroll: updateVScroll
     }),
@@ -29465,16 +29815,6 @@ var uses_storeEvent = function storeEvent(params) {
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onActivated"])(function () {
       onResize();
     });
-    var ROW_INDEX = 0;
-    var ROW_CHECK_INDEX = 1;
-    var ROW_DATA_INDEX = 2;
-
-    var clearCheckInfo = function clearCheckInfo() {
-      checkInfo.checkedRows = [];
-      checkInfo.checkedIndex.clear();
-      checkInfo.isHeaderChecked = false;
-    };
-
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
       return props.columns;
     }, function () {
@@ -29490,6 +29830,12 @@ var uses_storeEvent = function storeEvent(params) {
       if (value) {
         setStore(stores.originStore, false);
         sortInfo.isSorting = !value;
+
+        if (pageInfo.isClientPaging) {
+          pageInfo.currentPage = 1;
+          stores.pagingStore = getPagingData();
+          clearCheckInfo();
+        }
       }
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
@@ -29519,6 +29865,10 @@ var uses_storeEvent = function storeEvent(params) {
       checkInfo.checkedIndex.clear();
       var store = stores.store;
 
+      if (pageInfo.isClientPaging) {
+        store = getPagingData();
+      }
+
       if (store.length) {
         store.forEach(function (row) {
           row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
@@ -29580,16 +29930,44 @@ var uses_storeEvent = function storeEvent(params) {
         var _value$value;
 
         onSearch((_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value);
+
+        if (pageInfo.isClientPaging) {
+          clearCheckInfo();
+        }
       }
     }, {
-      immediate: true,
-      deep: true
+      immediate: true
     });
 
     var isFilterButton = function isFilterButton(field) {
       return filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     };
 
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      var _props$option$page9;
+
+      return (_props$option$page9 = props.option.page) === null || _props$option$page9 === void 0 ? void 0 : _props$option$page9.currentPage;
+    }, function (value) {
+      var _props$option$page10;
+
+      var current = !value ? 1 : value;
+      pageInfo.currentPage = !((_props$option$page10 = props.option.page) !== null && _props$option$page10 !== void 0 && _props$option$page10.isInfinite) ? current : 1;
+    }, {
+      immediate: true
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return [pageInfo.currentPage, pageInfo.perPage];
+    }, function (currentVal, beforeVal) {
+      Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])(function () {
+        changePage(beforeVal[0]);
+
+        if (pageInfo.isClientPaging && currentVal[0] !== beforeVal[0]) {
+          clearCheckInfo();
+        }
+
+        updateVScroll();
+      });
+    });
     return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
       showHeader: showHeader,
       stripeStyle: stripeStyle,
@@ -29619,7 +29997,6 @@ var uses_storeEvent = function storeEvent(params) {
       onApplyFilter: onApplyFilter,
       setFilter: setFilter,
       setStore: setStore,
-      updateData: updateData,
       setContextMenu: setContextMenu,
       onContextMenu: onContextMenu,
       onSearch: onSearch,
@@ -29629,8 +30006,8 @@ var uses_storeEvent = function storeEvent(params) {
 });
 // CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/grid/Grid.vue?vue&type=style&index=0&id=c263f57e&lang=scss&scoped=true
-var Gridvue_type_style_index_0_id_c263f57e_lang_scss_scoped_true = __webpack_require__("e419");
+// EXTERNAL MODULE: ./src/components/grid/Grid.vue?vue&type=style&index=0&id=247d3bf0&lang=scss&scoped=true
+var Gridvue_type_style_index_0_id_247d3bf0_lang_scss_scoped_true = __webpack_require__("bf21");
 
 // CONCATENATED MODULE: ./src/components/grid/Grid.vue
 
@@ -29638,8 +30015,8 @@ var Gridvue_type_style_index_0_id_c263f57e_lang_scss_scoped_true = __webpack_req
 
 
 
-Gridvue_type_script_lang_js.render = Gridvue_type_template_id_c263f57e_scoped_true_render
-Gridvue_type_script_lang_js.__scopeId = "data-v-c263f57e"
+Gridvue_type_script_lang_js.render = Gridvue_type_template_id_247d3bf0_scoped_true_render
+Gridvue_type_script_lang_js.__scopeId = "data-v-247d3bf0"
 
 /* harmony default export */ var Grid = (Gridvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/grid/index.js
@@ -29655,9 +30032,9 @@ Grid.install = function (app) {
 };
 
 /* harmony default export */ var grid = (Grid);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chart/Chart.vue?vue&type=template&id=3a821ae4
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chart/Chart.vue?vue&type=template&id=53face60
 
-function Chartvue_type_template_id_3a821ae4_render(_ctx, _cache, $props, $setup, $data, $options) {
+function Chartvue_type_template_id_53face60_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_resize = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("resize");
 
   return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
@@ -29666,7 +30043,7 @@ function Chartvue_type_template_id_3a821ae4_render(_ctx, _cache, $props, $setup,
     class: "ev-chart"
   }, null, 4)), [[_directive_resize, $setup.onResize]]);
 }
-// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=3a821ae4
+// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=53face60
 
 // CONCATENATED MODULE: ./node_modules/lodash-es/_arrayEach.js
 /**
@@ -31299,6 +31676,191 @@ function reverse(array) {
     return type === 'doughnut' || type === 'sunburst';
   }
 });
+// CONCATENATED MODULE: ./src/components/chart/helpers/helpers.constant.js
+
+var AXIS_UNITS = {
+  x: {
+    rectStart: 'x1',
+    rectEnd: 'x2',
+    rectOffsetCounter: function rectOffsetCounter(position) {
+      return position === 'top' ? 'y2' : 'y1';
+    },
+    rectOffset: function rectOffset(position) {
+      return position === 'top' ? 'y1' : 'y2';
+    }
+  },
+  y: {
+    rectStart: 'y2',
+    rectEnd: 'y1',
+    rectOffsetCounter: function rectOffsetCounter(position) {
+      return position === 'left' ? 'x2' : 'x1';
+    },
+    rectOffset: function rectOffset(position) {
+      return position === 'left' ? 'x1' : 'x2';
+    }
+  }
+};
+var COLOR = ['#2b99f0', '#8ac449', '#00C4C5', '#ffde00', '#ff7781', '#8470ff', '#75cd8e', '#48d1cc', '#fec64f', '#fe984f', '#0052ff', '#00a48c', '#83cfde', '#dfe32d', '#ff7d40', '#99c7ff', '#a5fee3', '#0379c9', '#eef093', '#ffa891', '#00c5cd', '#009bc7', '#cacaff', '#ffc125', '#df6264']; // export const COLOR = [
+//   '#00C8FC', '#00F1CD', '#C19F87', '#008FD2', '#93F7FE', '#00FC78', '#0058DE',
+//   '#3BDEFF', '#254763', '#BAEDF9', '#A24E3D', '#1FD017', '#F1D3B6', '#AFC9C9',
+//   '#498700', '#3650FE', '#8786EF', '#68FBFB', '#BCF061', '#CBD3EA',
+// ];
+
+var LINE_OPTION = {
+  show: true,
+  highlight: {
+    defaultSize: 4,
+    maxSize: 6,
+    maxShadowSize: 10,
+    maxShadowOpacity: 0.4
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  point: true,
+  pointSize: 3,
+  pointStyle: '',
+  lineWidth: 2,
+  fill: false,
+  fillOpacity: 0.4,
+  showLegend: true
+};
+var BAR_OPTION = {
+  show: true,
+  highlight: {
+    pointSize: 5
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  category: true,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+    decimalPoint: 0
+  }
+};
+var PIE_OPTION = {
+  show: true,
+  showLegend: true,
+  stroke: {
+    show: true,
+    color: '#FFFFFF',
+    lineWidth: 2
+  },
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null
+  }
+};
+var AXIS_OPTION = {
+  min: null,
+  max: null,
+  autoScaleRatio: null,
+  startToZero: false,
+  showAxis: true,
+  axisLineColor: '#C9CFDC',
+  showGrid: true,
+  gridLineColor: '#C9CFDC',
+  showIndicator: false,
+  timeFormat: 'mm:ss',
+  range: null,
+  interval: null,
+  decimalPoint: null,
+  labelStyle: {
+    show: true,
+    fontSize: 12,
+    color: '#25262E',
+    fontFamily: 'Roboto',
+    fontWeight: 400,
+    fitWidth: false,
+    fitDir: 'right'
+  }
+};
+var PLOT_LINE_OPTION = {
+  color: '#FF0000',
+  lineWidth: 1
+};
+var PLOT_LINE_LABEL_OPTION = {
+  show: false,
+  fontSize: 12,
+  fontColor: '#FF0000',
+  fillColor: '#FFFFFF',
+  lineColor: '#FF0000',
+  lineWidth: 0,
+  fontWeight: 400,
+  fontFamily: 'Roboto',
+  verticalAlign: 'middle',
+  textAlign: 'center',
+  textOverflow: 'none',
+  // 'none', 'ellipsis'
+  maxWidth: null
+};
+var PLOT_BAND_OPTION = {
+  color: '#FAE59D'
+};
+var HEAT_MAP_OPTION = _objectSpread2(_objectSpread2({}, LINE_OPTION), {}, {
+  colorOpt: {
+    min: '#FFFFFF',
+    max: '#0052FF',
+    categoryCnt: 5,
+    border: '#FFFFFF',
+    error: '#FF0000'
+  },
+  spaces: {
+    x: 0,
+    y: 0
+  }
+});
+var TIME_INTERVALS = {
+  millisecond: {
+    common: true,
+    size: 1,
+    steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
+  },
+  second: {
+    common: true,
+    size: 1000,
+    steps: [1, 2, 5, 10, 30]
+  },
+  minute: {
+    common: true,
+    size: 60000,
+    steps: [1, 2, 5, 10, 30]
+  },
+  hour: {
+    common: true,
+    size: 3600000,
+    steps: [1, 2, 3, 6, 12]
+  },
+  day: {
+    common: true,
+    size: 86400000,
+    steps: [1, 2, 5]
+  },
+  week: {
+    common: false,
+    size: 604800000,
+    steps: [1, 2, 3, 4]
+  },
+  month: {
+    common: true,
+    size: 2.628e9,
+    steps: [1, 2, 3]
+  },
+  quarter: {
+    common: false,
+    size: 7.884e9,
+    steps: [1, 2, 3, 4]
+  },
+  year: {
+    common: true,
+    size: 3.154e10
+  }
+};
 // CONCATENATED MODULE: ./src/components/chart/model/model.store.js
 
 
@@ -31309,6 +31871,8 @@ function reverse(array) {
 
 
 
+
+
 var modules = {
   /**
    * Take chart data and labels to create normalized data and min/max info
@@ -31340,6 +31904,17 @@ var modules = {
               series.minMax = _this.getSeriesMinMax(series.data);
             }
           });
+        } else if (typeKey === 'heatMap') {
+          seriesIDs.forEach(function (seriesID) {
+            var series = _this.seriesList[seriesID];
+            var sData = data[seriesID];
+
+            if (series && sData) {
+              series.data = _this.addSeriesDSForHeatMap(sData);
+              series.minMax = _this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.valueOpt = _this.getSeriesValueOptForHeatMap(series);
+            }
+          });
         } else {
           seriesIDs.forEach(function (seriesID) {
             var series = _this.seriesList[seriesID];
@@ -31680,6 +32255,26 @@ var modules = {
     });
   },
 
+  /**
+   * Take data to create data for each series
+   * @param {array} data data array for each series
+   * @returns {array} data info added position and etc
+   */
+  addSeriesDSForHeatMap: function addSeriesDSForHeatMap(data) {
+    return data.map(function (item) {
+      return {
+        x: item.x,
+        y: item.y,
+        o: item.value,
+        xp: null,
+        yp: null,
+        dataColor: null,
+        value: item.value,
+        cId: null
+      };
+    });
+  },
+
   /**
    * Take data to create data object for graph
    * @param {object}  gdata    graph data (y-axis value for vertical chart)
@@ -31800,6 +32395,98 @@ var modules = {
 
     return def;
   },
+  adjustMinMax: function adjustMinMax(max, min, opt, space) {
+    if (opt.type === 'time' && opt.categoryMode || opt.type === 'step') {
+      return {
+        max: max,
+        min: min
+      };
+    }
+
+    var targetMax = max;
+    var targetMin = min;
+
+    if (targetMax > 0 && opt.interval && space) {
+      if (targetMax < opt.interval * space) {
+        targetMax += opt.interval;
+      }
+    }
+
+    var targetInterval = opt.interval;
+
+    if (opt.type === 'time') {
+      if (typeof targetInterval === 'string') {
+        targetInterval = TIME_INTERVALS[targetInterval].size;
+      } else if (_typeof(targetInterval) === 'object') {
+        targetInterval = targetInterval.time * TIME_INTERVALS[targetInterval.unit].size;
+      }
+    }
+
+    if (!opt.startToZero || targetMin > 0) {
+      var targetSpace = space ? space - 1 : targetMax - targetMin;
+      var targetStep = targetInterval || Math.ceil((max - targetMin) / targetSpace);
+      targetMin = targetMin < targetStep ? 0 : targetMin - targetStep;
+    }
+
+    return {
+      max: targetMax,
+      min: targetMin
+    };
+  },
+
+  /**
+   * Take series data to create min/max info for each series
+   * @param data
+   * @param spaces
+   * @returns {*|{maxDomain: null, minY: null, minX: null, maxY: null, maxX: null}}
+   */
+  getSeriesMinMaxForHeatMap: function getSeriesMinMaxForHeatMap(data, spaces) {
+    var axesXOption = this.options.axesX[0];
+    var axesYOption = this.options.axesY[0];
+    var seriesMinMax = this.getSeriesMinMax(data);
+    var adjustX = this.adjustMinMax(seriesMinMax.maxX, seriesMinMax.minX, axesXOption, spaces.x);
+    seriesMinMax.maxX = adjustX.max;
+    seriesMinMax.minX = adjustX.min;
+    var adjustY = this.adjustMinMax(seriesMinMax.maxY, seriesMinMax.minY, axesYOption, spaces.y);
+    seriesMinMax.maxY = adjustY.max;
+    seriesMinMax.minY = adjustY.min;
+    return seriesMinMax;
+  },
+  getSeriesValueOptForHeatMap: function getSeriesValueOptForHeatMap(series) {
+    var data = series.data;
+    var colorOpt = series.colorOpt;
+    var colorAxis = series.colorAxis;
+    var categoryCnt = colorOpt.categoryCnt;
+    var maxValue = 0;
+    var isExistError = false;
+    data.forEach(function (_ref) {
+      var value = _ref.value;
+
+      if (maxValue < value) {
+        maxValue = value;
+      }
+
+      if (value < 0) {
+        isExistError = true;
+      }
+    });
+    var valueInterval = Math.ceil(maxValue / categoryCnt);
+
+    if (isExistError && colorAxis.length === categoryCnt) {
+      colorAxis.push({
+        id: "color#".concat(categoryCnt),
+        value: colorOpt.error,
+        state: 'normal',
+        show: true
+      });
+    }
+
+    return {
+      max: maxValue,
+      interval: valueInterval,
+      existError: isExistError
+    };
+  },
 
   /**
    * Get graph items for each series by label index
@@ -31865,9 +32552,9 @@ var modules = {
 
     return findInfo;
   },
-  getItem: function getItem(_ref) {
-    var seriesID = _ref.seriesID,
-        dataIndex = _ref.dataIndex;
+  getItem: function getItem(_ref2) {
+    var seriesID = _ref2.seriesID,
+        dataIndex = _ref2.dataIndex;
     var useApproximate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var dataInfo = this.getDataByValues(seriesID, dataIndex);
 
@@ -31974,6 +32661,44 @@ var modules = {
     };
   },
 
+  /**
+   * Find label info by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked label information
+   */
+  getLabelInfoByPosition: function getLabelInfoByPosition(offset) {
+    var _offset = _slicedToArray(offset, 2),
+        x = _offset[0],
+        y = _offset[1];
+
+    var aPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom
+    };
+    var scale = this.options.horizontal ? this.axesY[0] : this.axesX[0];
+    var startPoint = aPos[scale.units.rectStart];
+    var endPoint = aPos[scale.units.rectEnd];
+    var labelIndex;
+    var hitInfo;
+
+    if (scale.labels) {
+      var labelGap = (endPoint - startPoint) / scale.labels.length;
+      var index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
+      labelIndex = scale.labels.length > index ? index : -1;
+    } else {
+      hitInfo = this.getItemByPosition(offset, false);
+      labelIndex = hitInfo.maxIndex;
+    }
+
+    return {
+      labelIndex: labelIndex,
+      hitInfo: hitInfo
+    };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList
@@ -32022,7 +32747,7 @@ var modules = {
 
         if (smm && series.show) {
           if (!isHorizontal) {
-            if (smm.minX && (minmax.x[axisX].min === null || smm.minX < minmax.x[axisX].min)) {
+            if (smm.minX !== null && (minmax.x[axisX].min === null || smm.minX < minmax.x[axisX].min)) {
               minmax.x[axisX].min = smm.minX;
             }
 
@@ -32034,7 +32759,7 @@ var modules = {
               minmax.x[axisX].min = smm.minX;
             }
 
-            if (smm.minY && (minmax.y[axisY].min === null || smm.minY < minmax.y[axisY].min)) {
+            if (smm.minY !== null && (minmax.y[axisY].min === null || smm.minY < minmax.y[axisY].min)) {
               minmax.y[axisY].min = smm.minY;
             }
           }
@@ -32876,177 +33601,6 @@ var defaultsDeep = _baseRest(function(args) {
 
 /* harmony default export */ var lodash_es_defaultsDeep = (defaultsDeep);
 
-// CONCATENATED MODULE: ./src/components/chart/helpers/helpers.constant.js
-var AXIS_UNITS = {
-  x: {
-    rectStart: 'x1',
-    rectEnd: 'x2',
-    rectOffsetCounter: function rectOffsetCounter(position) {
-      return position === 'top' ? 'y2' : 'y1';
-    },
-    rectOffset: function rectOffset(position) {
-      return position === 'top' ? 'y1' : 'y2';
-    }
-  },
-  y: {
-    rectStart: 'y2',
-    rectEnd: 'y1',
-    rectOffsetCounter: function rectOffsetCounter(position) {
-      return position === 'left' ? 'x2' : 'x1';
-    },
-    rectOffset: function rectOffset(position) {
-      return position === 'left' ? 'x1' : 'x2';
-    }
-  }
-};
-var COLOR = ['#2b99f0', '#8ac449', '#00C4C5', '#ffde00', '#ff7781', '#8470ff', '#75cd8e', '#48d1cc', '#fec64f', '#fe984f', '#0052ff', '#00a48c', '#83cfde', '#dfe32d', '#ff7d40', '#99c7ff', '#a5fee3', '#0379c9', '#eef093', '#ffa891', '#00c5cd', '#009bc7', '#cacaff', '#ffc125', '#df6264']; // export const COLOR = [
-//   '#00C8FC', '#00F1CD', '#C19F87', '#008FD2', '#93F7FE', '#00FC78', '#0058DE',
-//   '#3BDEFF', '#254763', '#BAEDF9', '#A24E3D', '#1FD017', '#F1D3B6', '#AFC9C9',
-//   '#498700', '#3650FE', '#8786EF', '#68FBFB', '#BCF061', '#CBD3EA',
-// ];
-
-var LINE_OPTION = {
-  show: true,
-  highlight: {
-    defaultSize: 4,
-    maxSize: 6,
-    maxShadowSize: 10,
-    maxShadowOpacity: 0.4
-  },
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  point: true,
-  pointSize: 3,
-  pointStyle: '',
-  lineWidth: 2,
-  fill: false,
-  fillOpacity: 0.4,
-  showLegend: true
-};
-var BAR_OPTION = {
-  show: true,
-  highlight: {
-    pointSize: 5
-  },
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  category: true,
-  showLegend: true,
-  showValue: {
-    use: false,
-    fontSize: 12,
-    textColor: '#000000',
-    formatter: null,
-    decimalPoint: 0
-  }
-};
-var PIE_OPTION = {
-  show: true,
-  showLegend: true,
-  stroke: {
-    show: true,
-    color: '#FFFFFF',
-    lineWidth: 2
-  },
-  showValue: {
-    use: false,
-    fontSize: 12,
-    textColor: '#000000',
-    formatter: null
-  }
-};
-var AXIS_OPTION = {
-  min: null,
-  max: null,
-  autoScaleRatio: null,
-  startToZero: false,
-  showAxis: true,
-  axisLineColor: '#C9CFDC',
-  showGrid: true,
-  gridLineColor: '#C9CFDC',
-  showIndicator: false,
-  timeFormat: 'mm:ss',
-  range: null,
-  interval: null,
-  decimalPoint: null,
-  labelStyle: {
-    show: true,
-    fontSize: 12,
-    color: '#25262E',
-    fontFamily: 'Roboto',
-    fontWeight: 400,
-    fitWidth: false,
-    fitDir: 'right'
-  }
-};
-var PLOT_LINE_OPTION = {
-  color: '#FF0000',
-  lineWidth: 1
-};
-var PLOT_LINE_LABEL_OPTION = {
-  show: false,
-  fontSize: 12,
-  fontColor: '#FF0000',
-  fillColor: '#FFFFFF',
-  lineColor: '#FF0000',
-  lineWidth: 0,
-  fontWeight: 400,
-  fontFamily: 'Roboto',
-  verticalAlign: 'middle',
-  textAlign: 'center',
-  textOverflow: 'none',
-  // 'none', 'ellipsis'
-  maxWidth: null
-};
-var PLOT_BAND_OPTION = {
-  color: '#FAE59D'
-};
-var TIME_INTERVALS = {
-  millisecond: {
-    common: true,
-    size: 1,
-    steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
-  },
-  second: {
-    common: true,
-    size: 1000,
-    steps: [1, 2, 5, 10, 30]
-  },
-  minute: {
-    common: true,
-    size: 60000,
-    steps: [1, 2, 5, 10, 30]
-  },
-  hour: {
-    common: true,
-    size: 3600000,
-    steps: [1, 2, 3, 6, 12]
-  },
-  day: {
-    common: true,
-    size: 86400000,
-    steps: [1, 2, 5]
-  },
-  week: {
-    common: false,
-    size: 604800000,
-    steps: [1, 2, 3, 4]
-  },
-  month: {
-    common: true,
-    size: 2.628e9,
-    steps: [1, 2, 3]
-  },
-  quarter: {
-    common: false,
-    size: 7.884e9,
-    steps: [1, 2, 3, 4]
-  },
-  year: {
-    common: true,
-    size: 3.154e10
-  }
-};
 // CONCATENATED MODULE: ./src/components/chart/helpers/helpers.canvas.js
 
 
@@ -34047,6 +34601,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
       this.borderRadius = param.borderRadius;
       var categoryPoint = null;
       this.data.forEach(function (dataItem, index) {
+        var _param$selectLabel$se;
+
         ctx.beginPath();
         var item = dataItem;
 
@@ -34081,7 +34637,11 @@ var element_bar_Bar = /*#__PURE__*/function () {
         }
 
         var barColor = item.dataColor || _this2.color;
-        var isDownplay = _this2.state === 'downplay';
+        var selectLabelOption = param.selectLabel.option;
+        var selectedLabel = (_param$selectLabel$se = param.selectLabel.selected) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : {
+          dataIndex: []
+        };
+        var isDownplay = selectLabelOption.use && selectLabelOption.useSeriesOpacity ? selectedLabel.dataIndex.length && !selectedLabel.dataIndex.includes(index) : _this2.state === 'downplay';
 
         if (typeof barColor !== 'string') {
           ctx.fillStyle = helpers_canvas.createGradient(ctx, isHorizontal, {
@@ -34775,7 +35335,6 @@ var element_bar_time_TimeBar = /*#__PURE__*/function (_Bar) {
 
 
 
-
 var element_pie_Pie = /*#__PURE__*/function () {
   function Pie(sId, opt, sIdx) {
     var _this = this;
@@ -34805,7 +35364,6 @@ var element_pie_Pie = /*#__PURE__*/function () {
     this.doughnutHoleSize = 0;
     this.startAngle = 0;
     this.endAngle = 0;
-    this.slice = null;
     this.state = null;
     this.ctx = null;
     this.isSelect = false;
@@ -34851,7 +35409,6 @@ var element_pie_Pie = /*#__PURE__*/function () {
       }
 
       ctx.closePath();
-      this.slice = slice;
       this.ctx = ctx;
     }
     /**
@@ -34864,8 +35421,6 @@ var element_pie_Pie = /*#__PURE__*/function () {
   }, {
     key: "findGraphData",
     value: function findGraphData(_ref) {
-      var _this$ctx;
-
       var _ref2 = _slicedToArray(_ref, 2),
           offsetX = _ref2[0],
           offsetY = _ref2[1];
@@ -34876,8 +35431,16 @@ var element_pie_Pie = /*#__PURE__*/function () {
         color: null,
         index: -1
       };
-
-      if (this.show && (_this$ctx = this.ctx) !== null && _this$ctx !== void 0 && _this$ctx.isPointInPath(this.slice, offsetX, offsetY)) {
+      var radius = this.radius,
+          startAngle = this.startAngle,
+          endAngle = this.endAngle,
+          centerX = this.centerX,
+          centerY = this.centerY;
+      var distance = Math.sqrt(Math.pow(offsetX - centerX, 2) + Math.pow(offsetY - centerY, 2));
+      var radian = 2.5 * Math.PI - Math.atan2(offsetX - centerX, offsetY - centerY);
+      var isPointInPath = radius > distance && radian >= startAngle && radian <= endAngle;
+
+      if (this.show && isPointInPath) {
         item.type = this.type;
         item.data = this.data;
         item.hit = true;
@@ -34978,6 +35541,265 @@ var element_pie_Pie = /*#__PURE__*/function () {
 }();
 
 /* harmony default export */ var element_pie = (element_pie_Pie);
+// CONCATENATED MODULE: ./src/components/chart/element/element.heatmap.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var element_heatmap_HeatMap = /*#__PURE__*/function () {
+  function HeatMap(sId, opt, sIdx) {
+    var _this = this;
+
+    _classCallCheck(this, HeatMap);
+
+    var merged = lodash_es_merge({}, HEAT_MAP_OPTION, opt);
+    Object.keys(merged).forEach(function (key) {
+      _this[key] = merged[key];
+    });
+    ['color', 'pointFill', 'fillColor'].forEach(function (colorProp) {
+      if (_this[colorProp] === undefined) {
+        _this[colorProp] = COLOR[sIdx];
+      }
+    });
+    this.colorAxis = this.createColorAxis(opt.colorOpt);
+    this.errorColor = opt.colorOpt.error;
+    this.borderColor = opt.colorOpt.border;
+    this.sId = sId;
+    this.data = [];
+    this.spaces = opt.spaces || {
+      x: null,
+      y: null
+    };
+    this.size = {
+      w: 0,
+      h: 0
+    };
+    this.valueOpt = {
+      max: 0,
+      interval: 0
+    };
+    this.type = 'heatMap';
+  }
+  /**
+   * create series color axis
+   * @param colorOpt
+   * @returns {*[]}
+   */
+
+
+  _createClass(HeatMap, [{
+    key: "createColorAxis",
+    value: function createColorAxis(colorOpt) {
+      var colorAxis = [];
+      var min = colorOpt.min,
+          max = colorOpt.max,
+          categoryCnt = colorOpt.categoryCnt;
+      var minColor = min.includes('#') ? helpers_util.hexToRgb(min) : min;
+      var maxColor = max.includes('#') ? helpers_util.hexToRgb(max) : max;
+
+      var _minColor$split = minColor.split(','),
+          _minColor$split2 = _slicedToArray(_minColor$split, 3),
+          minR = _minColor$split2[0],
+          minG = _minColor$split2[1],
+          minB = _minColor$split2[2];
+
+      var _maxColor$split = maxColor.split(','),
+          _maxColor$split2 = _slicedToArray(_maxColor$split, 3),
+          maxR = _maxColor$split2[0],
+          maxG = _maxColor$split2[1],
+          maxB = _maxColor$split2[2];
+
+      var unitR = Math.floor((minR - maxR) / (categoryCnt - 1));
+      var unitG = Math.floor((minG - maxG) / (categoryCnt - 1));
+      var unitB = Math.floor((minB - maxB) / (categoryCnt - 1));
+
+      for (var ix = 0; ix < categoryCnt; ix++) {
+        var r = +minR - unitR * ix;
+        var g = +minG - unitG * ix;
+        var b = +minB - unitB * ix;
+        colorAxis.push({
+          id: "color#".concat(ix),
+          value: "rgb(".concat(r, ",").concat(g, ",").concat(b, ")"),
+          state: 'normal',
+          show: true
+        });
+      }
+
+      return colorAxis;
+    }
+  }, {
+    key: "getColorIndex",
+    value: function getColorIndex(value) {
+      var existError = this.valueOpt.existError;
+      var maxIndex = this.colorAxis.length;
+
+      if (value < 0) {
+        return maxIndex - 1;
+      }
+
+      var colorIndex = Math.floor(value / this.valueOpt.interval);
+
+      if (colorIndex >= maxIndex) {
+        return existError ? maxIndex - 2 : maxIndex - 1;
+      }
+
+      return colorIndex;
+    }
+  }, {
+    key: "drawItem",
+    value: function drawItem(ctx, xp, yp) {
+      ctx.beginPath();
+      ctx.strokeRect(xp - this.size.w, yp + Math.SQRT2, this.size.w, this.size.h);
+      ctx.fillRect(xp - this.size.w, yp + Math.SQRT2, this.size.w, this.size.h);
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }, {
+    key: "draw",
+    value: function draw(param) {
+      var _this2 = this;
+
+      if (!this.show) {
+        return;
+      }
+
+      var ctx = param.ctx,
+          chartRect = param.chartRect,
+          labelOffset = param.labelOffset,
+          axesSteps = param.axesSteps;
+      var minmaxX = axesSteps.x[this.xAxisIndex];
+      var minmaxY = axesSteps.y[this.yAxisIndex];
+      var xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+      var yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      var xsp = chartRect.x1 + labelOffset.left;
+      var ysp = chartRect.y2 - labelOffset.bottom;
+      this.size.w = Math.ceil(xArea / (this.spaces.x || minmaxX.graphMax - minmaxX.graphMin));
+      this.size.h = Math.floor(yArea / (this.spaces.y || minmaxY.graphMax - minmaxY.graphMin));
+      this.data.forEach(function (item) {
+        item.xp = helpers_canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
+        item.yp = helpers_canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
+        var xp = item.xp,
+            yp = item.yp,
+            value = item.o;
+
+        if (xp !== null && yp !== null) {
+          var colorIndex = _this2.getColorIndex(value);
+
+          var opacity = _this2.colorAxis[colorIndex].state === 'downplay' ? 0.1 : 1;
+          item.dataColor = value < 0 ? _this2.errorColor : _this2.colorAxis[colorIndex].value;
+          item.cId = _this2.colorAxis[colorIndex].id;
+
+          if (_this2.colorAxis[colorIndex].show) {
+            ctx.strokeStyle = helpers_util.colorStringToRgba(_this2.borderColor, opacity);
+            ctx.fillStyle = helpers_util.colorStringToRgba(item.dataColor, opacity);
+
+            _this2.drawItem(ctx, xp, yp);
+          }
+        }
+      });
+    }
+    /**
+     *Returns items in range
+     * @param {object} params  range values
+     *
+     * @returns {array}
+     */
+
+  }, {
+    key: "findItems",
+    value: function findItems(_ref) {
+      var xsp = _ref.xsp,
+          ysp = _ref.ysp,
+          width = _ref.width,
+          height = _ref.height;
+      var gdata = this.data;
+      var xep = xsp + width;
+      var yep = ysp + height;
+      return gdata.filter(function (seriesData) {
+        return xsp - 1 <= seriesData.xp && seriesData.xp <= xep + 1 && ysp - 1 <= seriesData.yp && seriesData.yp <= yep + 1;
+      });
+    }
+    /**
+     * Draw item highlight
+     * @param {object}   item       object for drawing series data
+     * @param {object}   context    canvas context
+     *
+     * @returns {undefined}
+     */
+
+  }, {
+    key: "itemHighlight",
+    value: function itemHighlight(item, context) {
+      var gdata = item.data;
+      var ctx = context;
+      var x = gdata.xp;
+      var y = gdata.yp;
+      ctx.save();
+
+      if (x !== null && y !== null) {
+        var color = gdata.dataColor;
+        ctx.strokeStyle = helpers_util.colorStringToRgba(color, 1);
+        ctx.fillStyle = helpers_util.colorStringToRgba(color, this.highlight.maxShadowOpacity);
+        this.drawItem(ctx, x, y);
+      }
+
+      ctx.restore();
+    }
+    /**
+     * Find graph item for tooltip
+     * @param {array}  offset       mouse position
+     *
+     * @returns {object} graph item
+     */
+
+  }, {
+    key: "findGraphData",
+    value: function findGraphData(offset) {
+      var xp = offset[0];
+      var yp = offset[1];
+      var item = {
+        data: null,
+        hit: false,
+        color: null,
+        name: null
+      };
+      var wSize = this.size.w;
+      var hSize = this.size.h;
+      var gdata = this.data;
+      var foundItem = gdata.find(function (data) {
+        var x = data.xp;
+        var y = data.yp;
+        return x - wSize <= xp && xp <= x && y <= yp && yp <= y + hSize;
+      });
+
+      if (foundItem) {
+        item.data = foundItem;
+        item.color = foundItem.dataColor;
+        item.hit = true;
+      }
+
+      return item;
+    }
+  }]);
+
+  return HeatMap;
+}();
+
+/* harmony default export */ var element_heatmap = (element_heatmap_HeatMap);
 // CONCATENATED MODULE: ./src/components/chart/model/model.series.js
 
 
@@ -34989,6 +35811,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
 
 
 
+
 var model_series_modules = {
   /**
    * Takes series information to create series list.
@@ -35043,6 +35866,9 @@ var model_series_modules = {
     } else if (type === 'pie') {
       this.seriesInfo.charts.pie.push(id);
       return new element_pie(id, opt, index);
+    } else if (type === 'heatMap') {
+      this.seriesInfo.charts.heatMap.push(id);
+      return new element_heatmap(id, opt, index);
     }
 
     return false;
@@ -35103,6 +35929,8 @@ var dayjs_min_default = /*#__PURE__*/__webpack_require__.n(dayjs_min);
 
 
 
+
+
 var scale_Scale = /*#__PURE__*/function () {
   function Scale(type, opt, ctx, options) {
     var _this = this;
@@ -35269,7 +36097,7 @@ var scale_Scale = /*#__PURE__*/function () {
 
   }, {
     key: "draw",
-    value: function draw(chartRect, labelOffset, stepInfo, hitInfo) {
+    value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
       var _this$labelStyle,
           _this$plotBands,
           _this$plotLines,
@@ -35337,20 +36165,24 @@ var scale_Scale = /*#__PURE__*/function () {
         var labelText;
 
         for (var ix = 0; ix <= steps; ix++) {
+          var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data, _selectLabelInfo$data2;
+
           ctx.beginPath();
           ticks[ix] = axisMin + ix * stepValue;
           labelCenter = Math.round(startPoint + labelGap * ix);
           linePosition = labelCenter + aliasPixel;
           labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+          var isBlurredLabel = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$selectL = _this$options.selectLabel) === null || _this$options$selectL === void 0 ? void 0 : _this$options$selectL.use) && ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$select = _this$options2.selectLabel) === null || _this$options2$select === void 0 ? void 0 : _this$options2$select.useLabelOpacity) && this.options.horizontal === (this.type === 'y') && (selectLabelInfo === null || selectLabelInfo === void 0 ? void 0 : (_selectLabelInfo$data = selectLabelInfo.dataIndex) === null || _selectLabelInfo$data === void 0 ? void 0 : _selectLabelInfo$data.length) && !(selectLabelInfo !== null && selectLabelInfo !== void 0 && (_selectLabelInfo$data2 = selectLabelInfo.dataIndex) !== null && _selectLabelInfo$data2 !== void 0 && _selectLabelInfo$data2.includes(ix));
+          ctx.fillStyle = helpers_util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
           var labelPoint = void 0;
 
           if (this.type === 'x') {
-            var _options$selectItem, _this$options;
+            var _options$selectItem, _this$options3;
 
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
             ctx.fillText(labelText, labelCenter, labelPoint);
 
-            if (options !== null && options !== void 0 && (_options$selectItem = options.selectItem) !== null && _options$selectItem !== void 0 && _options$selectItem.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.horizontal)) {
+            if (!isBlurredLabel && options !== null && options !== void 0 && (_options$selectItem = options.selectItem) !== null && _options$selectItem !== void 0 && _options$selectItem.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.horizontal)) {
               var selectedLabel = this.getLabelFormat(Math.min(axisMax, hitInfo.label + 0 * stepValue));
 
               if (selectedLabel === labelText) {
@@ -35915,7 +36747,7 @@ var scale_Scale = /*#__PURE__*/function () {
   return Scale;
 }();
 
-/* harmony default export */ var scale = (scale_Scale);
+/* harmony default export */ var scale_scale = (scale_Scale);
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.time.js
 
 
@@ -35986,7 +36818,7 @@ var scale_time_TimeScale = /*#__PURE__*/function (_Scale) {
   }]);
 
   return TimeScale;
-}(scale);
+}(scale_scale);
 
 /* harmony default export */ var scale_time = (scale_time_TimeScale);
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.linear.js
@@ -36046,7 +36878,7 @@ var scale_linear_LinearScale = /*#__PURE__*/function (_Scale) {
   }]);
 
   return LinearScale;
-}(scale);
+}(scale_scale);
 
 /* harmony default export */ var scale_linear = (scale_linear_LinearScale);
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.logarithmic.js
@@ -36198,7 +37030,7 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
   }]);
 
   return LogarithmicScale;
-}(scale);
+}(scale_scale);
 
 /* harmony default export */ var scale_logarithmic = (scale_logarithmic_LogarithmicScale);
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.step.js
@@ -36213,6 +37045,8 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
+
 var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _inherits(StepScale, _Scale);
 
@@ -36279,7 +37113,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
 
   }, {
     key: "draw",
-    value: function draw(chartRect, labelOffset, stepInfo, hitInfo) {
+    value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
       var _this$labelStyle,
           _this2 = this,
           _this$plotBands,
@@ -36340,21 +37174,25 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         var labelText;
         var labelPoint;
         labels.forEach(function (item, index) {
+          var _this2$options, _this2$options$select, _this2$options2, _this2$options2$selec, _selectLabelInfo$data, _selectLabelInfo$data2;
+
           labelCenter = Math.round(startPoint + labelGap * index);
           linePosition = labelCenter + aliasPixel;
           labelText = _this2.getLabelFormat(item, maxWidth);
+          var isBlurredLabel = ((_this2$options = _this2.options) === null || _this2$options === void 0 ? void 0 : (_this2$options$select = _this2$options.selectLabel) === null || _this2$options$select === void 0 ? void 0 : _this2$options$select.use) && ((_this2$options2 = _this2.options) === null || _this2$options2 === void 0 ? void 0 : (_this2$options2$selec = _this2$options2.selectLabel) === null || _this2$options2$selec === void 0 ? void 0 : _this2$options2$selec.useLabelOpacity) && _this2.options.horizontal === (_this2.type === 'y') && (selectLabelInfo === null || selectLabelInfo === void 0 ? void 0 : (_selectLabelInfo$data = selectLabelInfo.dataIndex) === null || _selectLabelInfo$data === void 0 ? void 0 : _selectLabelInfo$data.length) && !(selectLabelInfo !== null && selectLabelInfo !== void 0 && (_selectLabelInfo$data2 = selectLabelInfo.dataIndex) !== null && _selectLabelInfo$data2 !== void 0 && _selectLabelInfo$data2.includes(index));
+          ctx.fillStyle = helpers_util.colorStringToRgba(_this2.labelStyle.color, isBlurredLabel ? 0.1 : 1);
 
           if (_this2.type === 'x') {
-            var _this2$options, _this2$options$select, _this2$options2;
+            var _this2$options3, _this2$options3$selec, _this2$options4;
 
             labelPoint = _this2.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
             ctx.fillText(labelText, labelCenter + labelGap / 2, labelPoint);
 
-            if ((_this2$options = _this2.options) !== null && _this2$options !== void 0 && (_this2$options$select = _this2$options.selectItem) !== null && _this2$options$select !== void 0 && _this2$options$select.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this2$options2 = _this2.options) !== null && _this2$options2 !== void 0 && _this2$options2.horizontal)) {
+            if (!isBlurredLabel && (_this2$options3 = _this2.options) !== null && _this2$options3 !== void 0 && (_this2$options3$selec = _this2$options3.selectItem) !== null && _this2$options3$selec !== void 0 && _this2$options3$selec.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this2$options4 = _this2.options) !== null && _this2$options4 !== void 0 && _this2$options4.horizontal)) {
               var selectedLabel = hitInfo.label;
 
               if (selectedLabel === labelText) {
-                var _this2$labelStyle, _this2$options3, _this2$options3$selec, _this2$options3$selec2, _this2$options4, _this2$options4$selec, _this2$options4$selec2;
+                var _this2$labelStyle, _this2$options5, _this2$options5$selec, _this2$options5$selec2, _this2$options6, _this2$options6$selec, _this2$options6$selec2;
 
                 var height = Math.round(ctx.measureText((_this2$labelStyle = _this2.labelStyle) === null || _this2$labelStyle === void 0 ? void 0 : _this2$labelStyle.fontSize).width);
                 helpers_util.showLabelTip({
@@ -36366,8 +37204,8 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
                   borderRadius: 2,
                   arrowSize: 3,
                   text: labelText,
-                  backgroundColor: (_this2$options3 = _this2.options) === null || _this2$options3 === void 0 ? void 0 : (_this2$options3$selec = _this2$options3.selectItem) === null || _this2$options3$selec === void 0 ? void 0 : (_this2$options3$selec2 = _this2$options3$selec.labelTipStyle) === null || _this2$options3$selec2 === void 0 ? void 0 : _this2$options3$selec2.backgroundColor,
-                  textColor: (_this2$options4 = _this2.options) === null || _this2$options4 === void 0 ? void 0 : (_this2$options4$selec = _this2$options4.selectItem) === null || _this2$options4$selec === void 0 ? void 0 : (_this2$options4$selec2 = _this2$options4$selec.labelTipStyle) === null || _this2$options4$selec2 === void 0 ? void 0 : _this2$options4$selec2.textColor
+                  backgroundColor: (_this2$options5 = _this2.options) === null || _this2$options5 === void 0 ? void 0 : (_this2$options5$selec = _this2$options5.selectItem) === null || _this2$options5$selec === void 0 ? void 0 : (_this2$options5$selec2 = _this2$options5$selec.labelTipStyle) === null || _this2$options5$selec2 === void 0 ? void 0 : _this2$options5$selec2.backgroundColor,
+                  textColor: (_this2$options6 = _this2.options) === null || _this2$options6 === void 0 ? void 0 : (_this2$options6$selec = _this2$options6.selectItem) === null || _this2$options6$selec === void 0 ? void 0 : (_this2$options6$selec2 = _this2$options6$selec.labelTipStyle) === null || _this2$options6$selec2 === void 0 ? void 0 : _this2$options6$selec2.textColor
                 });
               }
             }
@@ -36507,7 +37345,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   }]);
 
   return StepScale;
-}(scale);
+}(scale_scale);
 
 /* harmony default export */ var scale_step = (scale_step_StepScale);
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.time.category.js
@@ -36521,6 +37359,8 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
+
 var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
   _inherits(TimeCategoryScale, _Scale);
 
@@ -36646,7 +37486,7 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
 
   }, {
     key: "draw",
-    value: function draw(chartRect, labelOffset, stepInfo, hitInfo) {
+    value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
       var ctx = this.ctx;
       var labels = this.labels;
       var aPos = {
@@ -36711,23 +37551,27 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       var labelText;
 
       for (var ix = 0; ix < oriSteps; ix += count) {
+        var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data, _selectLabelInfo$data2;
+
         ticks[ix] = axisMin + ix * stepValue;
         labelCenter = Math.round(startPoint + graphGap * ix);
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+        var isBlurredLabel = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$selectL = _this$options.selectLabel) === null || _this$options$selectL === void 0 ? void 0 : _this$options$selectL.use) && ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$select = _this$options2.selectLabel) === null || _this$options2$select === void 0 ? void 0 : _this$options2$select.useLabelOpacity) && this.options.horizontal === (this.type === 'y') && (selectLabelInfo === null || selectLabelInfo === void 0 ? void 0 : (_selectLabelInfo$data = selectLabelInfo.dataIndex) === null || _selectLabelInfo$data === void 0 ? void 0 : _selectLabelInfo$data.length) && !(selectLabelInfo !== null && selectLabelInfo !== void 0 && (_selectLabelInfo$data2 = selectLabelInfo.dataIndex) !== null && _selectLabelInfo$data2 !== void 0 && _selectLabelInfo$data2.includes(ix));
+        ctx.fillStyle = helpers_util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
         var labelPoint = void 0;
 
         if (this.type === 'x') {
-          var _this$options, _this$options$selectI, _this$options2;
+          var _this$options3, _this$options3$select, _this$options4;
 
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter, labelPoint);
 
-          if ((_this$options = this.options) !== null && _this$options !== void 0 && (_this$options$selectI = _this$options.selectItem) !== null && _this$options$selectI !== void 0 && _this$options$selectI.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.horizontal)) {
+          if (!isBlurredLabel && (_this$options3 = this.options) !== null && _this$options3 !== void 0 && (_this$options3$select = _this$options3.selectItem) !== null && _this$options3$select !== void 0 && _this$options3$select.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.horizontal)) {
             var selectedLabel = this.getLabelFormat(Math.min(axisMax, hitInfo.label + 0 * stepValue));
 
             if (selectedLabel === labelText) {
-              var _this$labelStyle, _this$options3, _this$options3$select, _this$options3$select2, _this$options4, _this$options4$select, _this$options4$select2;
+              var _this$labelStyle, _this$options5, _this$options5$select, _this$options5$select2, _this$options6, _this$options6$select, _this$options6$select2;
 
               var height = Math.round(ctx.measureText((_this$labelStyle = this.labelStyle) === null || _this$labelStyle === void 0 ? void 0 : _this$labelStyle.fontSize).width);
               helpers_util.showLabelTip({
@@ -36739,8 +37583,8 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
                 borderRadius: 2,
                 arrowSize: 3,
                 text: labelText,
-                backgroundColor: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : (_this$options3$select = _this$options3.selectItem) === null || _this$options3$select === void 0 ? void 0 : (_this$options3$select2 = _this$options3$select.labelTipStyle) === null || _this$options3$select2 === void 0 ? void 0 : _this$options3$select2.backgroundColor,
-                textColor: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : (_this$options4$select = _this$options4.selectItem) === null || _this$options4$select === void 0 ? void 0 : (_this$options4$select2 = _this$options4$select.labelTipStyle) === null || _this$options4$select2 === void 0 ? void 0 : _this$options4$select2.textColor
+                backgroundColor: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : (_this$options5$select = _this$options5.selectItem) === null || _this$options5$select === void 0 ? void 0 : (_this$options5$select2 = _this$options5$select.labelTipStyle) === null || _this$options5$select2 === void 0 ? void 0 : _this$options5$select2.backgroundColor,
+                textColor: (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : (_this$options6$select = _this$options6.selectItem) === null || _this$options6$select === void 0 ? void 0 : (_this$options6$select2 = _this$options6$select.labelTipStyle) === null || _this$options6$select2 === void 0 ? void 0 : _this$options6$select2.textColor
               });
             }
           }
@@ -36767,7 +37611,7 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
   }]);
 
   return TimeCategoryScale;
-}(scale);
+}(scale_scale);
 
 /* harmony default export */ var scale_time_category = (scale_time_category_TimeCategoryScale);
 // CONCATENATED MODULE: ./src/components/chart/plugins/plugins.title.js
@@ -36843,6 +37687,9 @@ var es_object_values = __webpack_require__("07ac");
 
 
 
+
+
+
 var plugins_legend_modules = {
   /**
    * Create legend DOM
@@ -36877,12 +37724,21 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   initLegend: function initLegend() {
+    this.isHeatMapType = this.options.type === 'heatMap';
+
     if (!this.isInitLegend) {
       this.createLegendLayout();
+    }
+
+    if (this.isHeatMapType) {
+      this.initEventForColorLegend();
+      this.addColorLegendList();
+    } else {
       this.initEvent();
+      this.addLegendList();
     }
 
-    this.addLegendList();
+    this.initResizeEvent();
     this.isInitLegend = true;
     this.isLegendMove = false;
   },
@@ -36912,6 +37768,28 @@ var plugins_legend_modules = {
       }
     });
   },
+  addColorLegendList: function addColorLegendList() {
+    var _this2 = this;
+
+    var seriesList = this.seriesList;
+    Object.values(seriesList).forEach(function (series) {
+      if (!series.isExistGrp && series.showLegend) {
+        var colorAxis = series.colorAxis,
+            valueOpt = series.valueOpt;
+        colorAxis.forEach(function (colorItem, index) {
+          var maxValue = valueOpt.interval * (index + 1);
+          var minValue = maxValue - valueOpt.interval;
+          var name = valueOpt.existError && index === colorAxis.length - 1 ? 'error' : "".concat(minValue, " - ").concat(maxValue);
+
+          _this2.addLegend({
+            cId: colorItem.id,
+            color: colorItem.value,
+            name: name
+          });
+        });
+      }
+    });
+  },
 
   /**
    * Initialize legend event
@@ -36919,17 +37797,22 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   initEvent: function initEvent() {
-    var _this2 = this;
+    var _this3 = this;
 
+    if (this.isInitLegend) {
+      return;
+    }
     /**
      * callback for legendBoxDOM to show/hide clicked series
      *
      * @returns {undefined}
      */
+
+
     this.onLegendBoxClick = function (e) {
       var _targetDOM, _targetDOM2;
 
-      var opt = _this2.options.legend;
+      var opt = _this3.options.legend;
       var type = e.target.dataset.type;
       var targetDOM;
 
@@ -36946,7 +37829,7 @@ var plugins_legend_modules = {
       var isActive = !(colorDOM !== null && colorDOM !== void 0 && colorDOM.className.includes('inactive'));
       var series = nameDOM === null || nameDOM === void 0 ? void 0 : nameDOM.series;
 
-      if (isActive && _this2.seriesInfo.count === 1) {
+      if (isActive && _this3.seriesInfo.count === 1) {
         return;
       }
 
@@ -36955,16 +37838,26 @@ var plugins_legend_modules = {
       }
 
       if (isActive) {
-        _this2.seriesInfo.count--;
+        _this3.seriesInfo.count--;
         colorDOM.style.backgroundColor = opt.inactive;
+        colorDOM.style.borderColor = opt.inactive;
         nameDOM.style.color = opt.inactive;
       } else {
-        _this2.seriesInfo.count++;
+        _this3.seriesInfo.count++;
+        var seriesColor;
 
         if (typeof series.color !== 'string') {
-          colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+          seriesColor = series.color[series.color.length - 1][1];
+        } else {
+          seriesColor = series.color;
+        }
+
+        if (series.type === 'line' && series.fill) {
+          colorDOM.style.height = '8px';
+          colorDOM.style.backgroundColor = "".concat(seriesColor, "80");
+          colorDOM.style.border = "1px solid ".concat(seriesColor);
         } else {
-          colorDOM.style.backgroundColor = series.color;
+          colorDOM.style.backgroundColor = seriesColor;
         }
 
         nameDOM.style.color = opt.color;
@@ -36974,7 +37867,7 @@ var plugins_legend_modules = {
       colorDOM.classList.toggle('inactive');
       nameDOM.classList.toggle('inactive');
 
-      _this2.update({
+      _this3.update({
         updateSeries: false,
         updateSelTip: {
           update: true,
@@ -36982,46 +37875,6 @@ var plugins_legend_modules = {
         }
       });
     };
-    /**
-     * callback for resizeDOM click event
-     * 1. hide resizeDOM
-     * 2. show ghost DOM on same position with hidden resizeDOM
-     *
-     * @returns {undefined}
-     */
-
-
-    this.onResizeMouseDown = function (e) {
-      e.stopPropagation();
-      e.preventDefault();
-      var opt = _this2.options;
-      var pos = opt.legend.position;
-      var title = opt.title.show ? opt.title.height : 0;
-      var ghostDOM = _this2.ghostDOM;
-      _this2.resizeDOM.style.display = 'none';
-
-      _this2.wrapperDOM.appendChild(ghostDOM); // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
-
-
-      if (pos === 'left' || pos === 'right') {
-        ghostDOM.style.top = "".concat(title, "px");
-        ghostDOM.style.left = _this2.resizeDOM.style.left;
-        ghostDOM.style.right = _this2.resizeDOM.style.right;
-        ghostDOM.style.height = _this2.resizeDOM.style.height;
-      } else {
-        ghostDOM.classList.add('horizontal');
-
-        if (pos === 'top') {
-          ghostDOM.style.top = _this2.resizeDOM.style.top;
-        } else if (pos === 'bottom') {
-          ghostDOM.style.bottom = _this2.resizeDOM.style.bottom;
-        }
-      }
-
-      _this2.wrapperDOM.addEventListener('mousemove', _this2.mouseMove, false);
-
-      _this2.wrapperDOM.addEventListener('mouseup', _this2.mouseUp, false);
-    };
     /**
      * callback for legendBoxDOM hovering
      *
@@ -37043,11 +37896,11 @@ var plugins_legend_modules = {
 
       var nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
       var targetId = nameDOM.series.sId;
-      Object.values(_this2.seriesList).forEach(function (series) {
+      Object.values(_this3.seriesList).forEach(function (series) {
         series.state = series.sId === targetId ? 'highlight' : 'downplay';
       });
 
-      _this2.update({
+      _this3.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -37063,11 +37916,11 @@ var plugins_legend_modules = {
 
 
     this.onLegendBoxLeave = function () {
-      Object.values(_this2.seriesList).forEach(function (series) {
+      Object.values(_this3.seriesList).forEach(function (series) {
         series.state = 'normal';
       });
 
-      _this2.update({
+      _this3.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -37079,6 +37932,183 @@ var plugins_legend_modules = {
     this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
     this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
     this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
+    this.initResizeEvent();
+  },
+  initEventForColorLegend: function initEventForColorLegend() {
+    var _this4 = this;
+
+    if (this.isInitLegend) {
+      return;
+    }
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @returns {undefined}
+     */
+
+
+    this.onLegendBoxClick = function (e) {
+      var _targetDOM3, _targetDOM4;
+
+      var opt = _this4.options.legend;
+      var series = Object.values(_this4.seriesList)[0];
+      var type = e.target.dataset.type;
+      var targetDOM;
+
+      if (type === 'container') {
+        targetDOM = e.target;
+      } else if (type === 'name' || type === 'color') {
+        targetDOM = e.target.parentElement;
+      } else {
+        return;
+      }
+
+      var colorDOM = (_targetDOM3 = targetDOM) === null || _targetDOM3 === void 0 ? void 0 : _targetDOM3.getElementsByClassName('ev-chart-legend-color')[0];
+      var nameDOM = (_targetDOM4 = targetDOM) === null || _targetDOM4 === void 0 ? void 0 : _targetDOM4.getElementsByClassName('ev-chart-legend-name')[0];
+      var isActive = !(colorDOM !== null && colorDOM !== void 0 && colorDOM.className.includes('inactive'));
+      var targetId = nameDOM.series.cId;
+      var activeCount = series.colorAxis.filter(function (colorItem) {
+        return colorItem.show;
+      }).length;
+
+      if (isActive && activeCount === 1) {
+        return;
+      }
+
+      if (!colorDOM || !nameDOM) {
+        return;
+      }
+
+      if (isActive) {
+        colorDOM.style.backgroundColor = opt.inactive;
+        colorDOM.style.borderColor = opt.inactive;
+        nameDOM.style.color = opt.inactive;
+      } else {
+        colorDOM.style.backgroundColor = nameDOM.series.color;
+        nameDOM.style.color = opt.color;
+      }
+
+      var targetIndex = series.colorAxis.findIndex(function (colorItem) {
+        return colorItem.id === targetId;
+      });
+
+      if (targetIndex > -1) {
+        series.colorAxis[targetIndex].show = !isActive;
+      }
+
+      colorDOM.classList.toggle('inactive');
+      nameDOM.classList.toggle('inactive');
+
+      _this4.update({
+        updateSeries: false,
+        updateSelTip: {
+          update: true,
+          keepDomain: true
+        }
+      });
+    };
+    /**
+     * callback for legendBoxDOM hovering
+     *
+     * @returns {undefined}
+     */
+
+
+    this.onLegendBoxOver = function (e) {
+      var type = e.target.dataset.type;
+      var series = Object.values(_this4.seriesList)[0];
+      var targetDOM;
+
+      if (type === 'container') {
+        targetDOM = e.target;
+      } else if (type === 'name' || type === 'color') {
+        targetDOM = e.target.parentElement;
+      } else {
+        return;
+      }
+
+      var nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
+      var targetId = nameDOM.series.cId;
+      series.colorAxis.forEach(function (colorItem) {
+        colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
+      });
+
+      _this4.update({
+        updateSeries: false,
+        updateSelTip: {
+          update: false,
+          keepDomain: false
+        }
+      });
+    };
+    /**
+     * callback for mouseleave event on legendBoxDOM
+     *
+     * @returns {undefined}
+     */
+
+
+    this.onLegendBoxLeave = function () {
+      var series = Object.values(_this4.seriesList)[0];
+      series.colorAxis.forEach(function (item) {
+        item.state = 'normal';
+      });
+
+      _this4.update({
+        updateSeries: false,
+        updateSelTip: {
+          update: false,
+          keepDomain: false
+        }
+      });
+    };
+
+    this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
+    this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
+    this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
+    this.initResizeEvent();
+  },
+  initResizeEvent: function initResizeEvent() {
+    var _this5 = this;
+
+    /**
+     * callback for resizeDOM click event
+     * 1. hide resizeDOM
+     * 2. show ghost DOM on same position with hidden resizeDOM
+     *
+     * @returns {undefined}
+     */
+    this.onResizeMouseDown = function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+      var opt = _this5.options;
+      var pos = opt.legend.position;
+      var title = opt.title.show ? opt.title.height : 0;
+      var ghostDOM = _this5.ghostDOM;
+      _this5.resizeDOM.style.display = 'none';
+
+      _this5.wrapperDOM.appendChild(ghostDOM); // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
+
+
+      if (pos === 'left' || pos === 'right') {
+        ghostDOM.style.top = "".concat(title, "px");
+        ghostDOM.style.left = _this5.resizeDOM.style.left;
+        ghostDOM.style.right = _this5.resizeDOM.style.right;
+        ghostDOM.style.height = _this5.resizeDOM.style.height;
+      } else {
+        ghostDOM.classList.add('horizontal');
+
+        if (pos === 'top') {
+          ghostDOM.style.top = _this5.resizeDOM.style.top;
+        } else if (pos === 'bottom') {
+          ghostDOM.style.bottom = _this5.resizeDOM.style.bottom;
+        }
+      }
+
+      _this5.wrapperDOM.addEventListener('mousemove', _this5.mouseMove, false);
+
+      _this5.wrapperDOM.addEventListener('mouseup', _this5.mouseUp, false);
+    };
 
     if (this.resizeDOM) {
       this.resizeDOM.addEventListener('mousedown', this.onResizeMouseDown);
@@ -37095,7 +38125,12 @@ var plugins_legend_modules = {
    */
   updateLegend: function updateLegend() {
     this.resetLegend();
-    this.addLegendList();
+
+    if (this.isHeatMapType) {
+      this.addColorLegendList();
+    } else {
+      this.addLegendList();
+    }
   },
 
   /**
@@ -37128,17 +38163,26 @@ var plugins_legend_modules = {
     containerDOM.className = 'ev-chart-legend-container';
     colorDOM.className = 'ev-chart-legend-color';
 
-    if (series.type === 'line' && series.point) {
+    if (series.type === 'line' && series.point && !series.fill) {
       colorDOM.className += ' ev-chart-legend-color--point-line';
     }
 
     nameDOM.className = 'ev-chart-legend-name';
     nameDOM.series = series;
+    var seriesColor;
 
     if (typeof series.color !== 'string') {
-      colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+      seriesColor = series.color[series.color.length - 1][1];
     } else {
-      colorDOM.style.backgroundColor = series.color;
+      seriesColor = series.color;
+    }
+
+    if (series.type === 'line' && series.fill) {
+      colorDOM.style.height = '8px';
+      colorDOM.style.backgroundColor = "".concat(seriesColor, "80");
+      colorDOM.style.border = "1px solid ".concat(seriesColor);
+    } else {
+      colorDOM.style.backgroundColor = seriesColor;
     }
 
     colorDOM.dataset.type = 'color';
@@ -37525,6 +38569,12 @@ var plugins_legend_modules = {
   }
 };
 /* harmony default export */ var plugins_legend = (plugins_legend_modules);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.entries.js
+var es_object_entries = __webpack_require__("4fad");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.from-entries.js
+var es_object_from_entries = __webpack_require__("c1f9");
+
 // CONCATENATED MODULE: ./src/components/chart/plugins/plugins.interaction.js
 
 
@@ -37533,6 +38583,14 @@ var plugins_legend_modules = {
 
 
 
+
+
+
+
+
+
+
+
 var plugins_interaction_modules = {
   /**
    * Hide legend components by manipulating css
@@ -37603,7 +38661,7 @@ var plugins_interaction_modules = {
       _this.overlayClear();
 
       if (Object.keys(hitInfo.items).length) {
-        if (_this.options.type !== 'scatter' || tooltip.use) {
+        if (type !== 'scatter' && type !== 'heatMap' || tooltip.use) {
           _this.drawItemsHighlight(hitInfo, ctx);
         }
 
@@ -37620,7 +38678,7 @@ var plugins_interaction_modules = {
         _this.drawSelectionArea(_this.dragInfoBackup);
       }
 
-      if (indicator.use && type !== 'pie' && type !== 'scatter') {
+      if (indicator.use && type !== 'pie' && type !== 'scatter' && type !== 'heatMap') {
         _this.drawIndicator(offset, indicator.color);
       }
     };
@@ -37706,6 +38764,18 @@ var plugins_interaction_modules = {
         args.dataIndex = hitInfo.maxIndex;
       }
 
+      if (_this.options.selectLabel.use) {
+        var _offset = _this.getMousePosition(e);
+
+        var clickedLabelInfo = _this.getLabelInfoByPosition(_offset);
+
+        var selected = _this.selectLabel(clickedLabelInfo.labelIndex);
+
+        _this.renderWithSelectLabel(selected.dataIndex);
+
+        args.selected = lodash_es_cloneDeep(_this.defaultSelectLabelInfo);
+      }
+
       if (typeof _this.listeners.click === 'function') {
         if (!_this.dragInfoBackup) {
           _this.listeners.click(args);
@@ -37724,7 +38794,7 @@ var plugins_interaction_modules = {
           dragSelection = _this$options3.dragSelection,
           type = _this$options3.type;
 
-      if (dragSelection.use && (type === 'scatter' || type === 'line')) {
+      if (dragSelection.use && (type === 'scatter' || type === 'line' || type === 'heatMap')) {
         _this.removeSelectionArea();
 
         _this.dragStart(e, type);
@@ -37835,9 +38905,9 @@ var plugins_interaction_modules = {
       }
 
       dragInfo.xsp = Math.min(xcp, xep);
-      dragInfo.ysp = type === 'scatter' ? Math.min(ycp, yep) : aRange.y1;
+      dragInfo.ysp = type === 'scatter' || type === 'heatMap' ? Math.min(ycp, yep) : aRange.y1;
       dragInfo.width = Math.ceil(Math.abs(xep - xcp));
-      dragInfo.height = type === 'scatter' ? Math.ceil(Math.abs(yep - ycp)) : aRange.y2 - aRange.y1;
+      dragInfo.height = type === 'scatter' || type === 'heatMap' ? Math.ceil(Math.abs(yep - ycp)) : aRange.y2 - aRange.y1;
 
       _this2.overlayClear();
 
@@ -37955,7 +39025,7 @@ var plugins_interaction_modules = {
           }
 
           if (gdata !== null && gdata !== undefined) {
-            var sName = "".concat(series.name);
+            var sName = series.name;
             var sw = ctx ? ctx.measureText(sName).width : 1;
             item.name = sName;
             item.axis = {
@@ -38005,7 +39075,7 @@ var plugins_interaction_modules = {
    * @returns {boolean}
    */
   selectItemByData: function selectItemByData(targetInfo, chartType) {
-    this.defaultSelectInfo = targetInfo;
+    this.defaultSelectItemInfo = targetInfo;
     var foundInfo;
 
     if (chartType === 'pie') {
@@ -38030,9 +39100,81 @@ var plugins_interaction_modules = {
     return true;
   },
 
+  /**
+   * render after select label by index list
+   * @param indexList {array}  '[0, 1 ...]'
+   */
+  renderWithSelectLabel: function renderWithSelectLabel(indexList) {
+    this.defaultSelectLabelInfo.dataIndex = indexList;
+    this.initSelectedLabelInfo();
+    this.render();
+  },
+
+  /**
+   * init defaultSelectLabelInfo object.
+   * (set each series data and label text)
+   */
+  initSelectedLabelInfo: function initSelectedLabelInfo() {
+    var _this3 = this;
+
+    var _this$options$selectL = this.options.selectLabel,
+        use = _this$options$selectL.use,
+        limit = _this$options$selectL.limit;
+    var infoObj = this.defaultSelectLabelInfo;
+
+    if (use && infoObj !== null && infoObj !== void 0 && infoObj.dataIndex) {
+      infoObj.dataIndex.splice(limit);
+      infoObj.label = infoObj.dataIndex.map(function (i) {
+        return _this3.data.labels[i];
+      });
+      var dataEntries = Object.entries(this.data.data);
+      infoObj.data = infoObj.dataIndex.map(function (labelIdx) {
+        return Object.fromEntries(dataEntries.map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+              sId = _ref3[0],
+              data = _ref3[1];
+
+          return [sId, data[labelIdx]];
+        }));
+      });
+    }
+  },
+
+  /**
+   * Add or delete selected label index, according to policy and option
+   * (set each series data and label text)
+   * @param labelIndex {array}  '[0, 1 ...]'
+   */
+  selectLabel: function selectLabel(labelIndex) {
+    var _this$options$selectL2, _this$options5, _this$defaultSelectLa;
+
+    var option = (_this$options$selectL2 = (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.selectLabel) !== null && _this$options$selectL2 !== void 0 ? _this$options$selectL2 : {};
+    var before = (_this$defaultSelectLa = this.defaultSelectLabelInfo) !== null && _this$defaultSelectLa !== void 0 ? _this$defaultSelectLa : {
+      dataIndex: []
+    };
+    var after = lodash_es_cloneDeep(before);
+
+    if (before.dataIndex.includes(labelIndex)) {
+      var idx = before.dataIndex.indexOf(labelIndex);
+      after.dataIndex.splice(idx, 1);
+    } else if (labelIndex > -1) {
+      after.dataIndex.push(labelIndex);
+
+      if (option.limit > 0 && option.limit < after.dataIndex.length) {
+        if (option.useDeselectOverflow) {
+          after.dataIndex.splice(0, 1);
+        } else {
+          after.dataIndex.pop();
+        }
+      }
+    }
+
+    return after;
+  },
+
   /**
    * Find items by series within a range
-   * @param {object} param  object for find series items
+   * @param {object} range  object for find series items
    *
    * @returns {object}
    */
@@ -38067,12 +39209,12 @@ var plugins_interaction_modules = {
    *                 object.range: coordinate-based range in graph
    * @returns {object}
    */
-  getSelectionRage: function getSelectionRage(_ref2) {
-    var xsp = _ref2.xsp,
-        ysp = _ref2.ysp,
-        width = _ref2.width,
-        height = _ref2.height,
-        range = _ref2.range;
+  getSelectionRage: function getSelectionRage(_ref4) {
+    var xsp = _ref4.xsp,
+        ysp = _ref4.ysp,
+        width = _ref4.width,
+        height = _ref4.height,
+        range = _ref4.range;
     var dataRangeX = this.axesSteps.x.length ? this.axesSteps.x[0] : null;
     var dataRangeY = this.axesSteps.y.length ? this.axesSteps.y[0] : null;
 
@@ -38432,6 +39574,13 @@ var plugins_tooltip_modules = {
             value: value,
             name: name
           });
+        } else if (this.options.type === 'heatMap') {
+          formattedTxt = opt.formatter({
+            x: this.options.horizontal ? hitItem.y : hitItem.x,
+            y: this.options.horizontal ? hitItem.x : hitItem.y,
+            name: name,
+            value: value
+          });
         } else {
           formattedTxt = opt.formatter({
             x: this.options.horizontal ? value : hitItem.x,
@@ -38469,6 +39618,83 @@ var plugins_tooltip_modules = {
     this.tooltipDOM.style.display = 'block';
   },
 
+  /**
+   * Draw tooltip canvas for heatmap
+   * @param {object} hitInfo    mousemove callback
+   * @param {object} context    tooltip canvas context
+   *
+   * @returns {undefined}
+   */
+  drawToolTipForHeatMap: function drawToolTipForHeatMap(hitInfo, context) {
+    var ctx = context;
+    var items = hitInfo.items;
+    var sId = hitInfo.hitId;
+    var hitItem = items[sId].data;
+    var hitAxis = items[sId].axis;
+    var hitColor = items[sId].color;
+    var boxPadding = {
+      t: 8,
+      b: 8,
+      r: 20,
+      l: 16
+    };
+    var isHorizontal = this.options.horizontal;
+    var opt = this.options.tooltip; // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
+
+    if (this.axesX.length && this.axesY.length) {
+      this.tooltipHeaderDOM.textContent = this.options.horizontal ? "".concat(this.axesY[hitAxis.y].getLabelFormat(hitItem.y), " / ").concat(this.axesX[hitAxis.x].getLabelFormat(hitItem.x)) : "".concat(this.axesX[hitAxis.x].getLabelFormat(hitItem.x), " / ").concat(this.axesY[hitAxis.y].getLabelFormat(hitItem.y));
+    }
+
+    if (opt.textOverflow) {
+      this.tooltipHeaderDOM.classList.add("ev-chart-tooltip-header--".concat(opt.textOverflow));
+    } // draw tooltip contents (series, value combination)
+
+
+    ctx.save();
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.tooltipBodyDOM.style.overflowY === 'auto') {
+      boxPadding.r += SCROLL_WIDTH;
+    }
+
+    var itemX = boxPadding.l + 2;
+    var itemY = boxPadding.t + TEXT_HEIGHT + 2;
+    var itemValue = hitItem.o > -1 ? hitItem.o : 'error';
+    ctx.font = FONT_STYLE;
+    ctx.beginPath();
+
+    if (typeof hitColor !== 'string') {
+      ctx.fillStyle = helpers_canvas.createGradient(ctx, isHorizontal, {
+        x: itemX,
+        y: itemY,
+        w: 12,
+        h: -12
+      }, hitColor);
+    } else {
+      ctx.fillStyle = hitColor;
+    } // 1. Draw series color
+
+
+    ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
+    ctx.fillStyle = opt.fontColor; // 2. Draw series name
+
+    ctx.textBaseline = 'Bottom';
+    ctx.fillText(itemValue, itemX + COLOR_MARGIN, itemY);
+    ctx.closePath(); // set tooltipDOM's style
+
+    this.tooltipDOM.style.overflowY = 'hidden';
+    this.tooltipDOM.style.backgroundColor = opt.backgroundColor;
+    this.tooltipDOM.style.border = "1px solid ".concat(opt.borderColor);
+    this.tooltipDOM.style.color = opt.fontColor;
+
+    if (opt.useShadow) {
+      var shadowColor = "rgba(0, 0, 0, ".concat(opt.shadowOpacity, ")");
+      this.tooltipDOM.style.boxShadow = "2px 2px 2px ".concat(shadowColor);
+    }
+
+    this.tooltipDOM.style.display = 'block';
+  },
+
   /**
    * Draw graph item highlight
    * @param {object} hitInfo    mousemove callback
@@ -38824,6 +40050,14 @@ var plugins_pie_modules = {
 
 
 
+
+
+
+
+
+
+
+
 var element_tip_modules = {
   /**
    * Draw TextTip with tip's locationInfo
@@ -38836,9 +40070,15 @@ var element_tip_modules = {
     var isHorizontal = !!opt.horizontal;
     var maxTipOpt = opt.maxTip;
     var selTipOpt = opt.selectItem;
+    var labelTipOpt = opt.selectLabel;
     var maxArgs;
+    var isExistSelectedLabel;
 
-    if (selTipOpt.use && tipLocationInfo) {
+    if (labelTipOpt.use && labelTipOpt.showTip) {
+      isExistSelectedLabel = this.drawLabelTip();
+    }
+
+    if (selTipOpt.use && tipLocationInfo && !isExistSelectedLabel) {
       var seriesInfo = this.seriesList[tipLocationInfo === null || tipLocationInfo === void 0 ? void 0 : tipLocationInfo.sId];
 
       if (!(seriesInfo !== null && seriesInfo !== void 0 && seriesInfo.show)) {
@@ -38884,7 +40124,7 @@ var element_tip_modules = {
       }
     }
 
-    if (maxTipOpt.use) {
+    if (maxTipOpt.use && !isExistSelectedLabel) {
       var maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
       maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
 
@@ -38907,7 +40147,8 @@ var element_tip_modules = {
   /**
    * Calculate tip size and contents
    * @param {object} series     series information (max series or selected series)
-   * @param {string} tipType    tip type [sel = user select, max = max value]
+   * @param {string} tipType    tip type
+   * [sel = user select series, label = user select label, max = max value]
    * @param {object} hitInfo    mouse hit information
    *
    * @returns {object} size and tip contents
@@ -39063,6 +40304,130 @@ var element_tip_modules = {
     ctx.closePath();
   },
 
+  /**
+   * Draw Selected Label Tip
+   * @returns {boolean} Whether drew at least one tip
+   */
+  drawLabelTip: function drawLabelTip() {
+    var _this = this;
+
+    var opt = this.options;
+    var isHorizontal = !!opt.horizontal;
+    var labelTipOpt = opt.selectLabel;
+    var _this$defaultSelectLa = this.defaultSelectLabelInfo,
+        dataIndex = _this$defaultSelectLa.dataIndex,
+        data = _this$defaultSelectLa.data;
+    var drawTip = false;
+
+    if (dataIndex.length) {
+      drawTip = true;
+      var chartRect = this.chartRect;
+      var labelOffset = this.labelOffset;
+      var aPos = {
+        x1: chartRect.x1 + labelOffset.left,
+        x2: chartRect.x2 - labelOffset.right,
+        y1: chartRect.y1 + labelOffset.top,
+        y2: chartRect.y2 - labelOffset.bottom
+      };
+      var labelAxes = this.options.horizontal ? this.axesY[0] : this.axesX[0];
+      var labelStartPoint = aPos[labelAxes.units.rectStart];
+      var labelEndPoint = aPos[labelAxes.units.rectEnd];
+      var labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+      var valueAxes = this.options.horizontal ? this.axesX[0] : this.axesY[0];
+      var valueStartPoint = aPos[valueAxes.units.rectStart];
+      var offset = this.options.type === 'bar' ? 4 : 6;
+      var chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+      var chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      dataIndex.forEach(function (idx, i) {
+        var labelCenter = Math.round(labelStartPoint + labelGap * idx);
+        var gp;
+        var dp = labelCenter + labelGap / 2;
+
+        if (labelTipOpt.fixedPosTop) {
+          if (isHorizontal) {
+            gp = helpers_canvas.calculateX(_this.axesRange.x[0].max, _this.axesRange.x[0].min, _this.axesRange.x[0].max, chartWidth, valueStartPoint);
+            gp += offset;
+          } else {
+            gp = helpers_canvas.calculateY(_this.axesRange.y[0].max, _this.axesRange.y[0].min, _this.axesRange.y[0].max, chartHeight, valueStartPoint);
+            gp -= offset;
+          }
+        } else if (isHorizontal) {
+          var _data$i;
+
+          var seriesList = Object.keys((_data$i = data[i]) !== null && _data$i !== void 0 ? _data$i : {});
+          var visibleSeries = seriesList.filter(function (sId) {
+            return _this.seriesList[sId].show;
+          });
+          var visibleValue = visibleSeries.map(function (sId) {
+            return data[i][sId];
+          });
+          var isExistGrp = seriesList.some(function (sId) {
+            return _this.seriesList[sId].isExistGrp;
+          });
+          var maxValue;
+
+          if (isExistGrp) {
+            var _visibleValue$reduce;
+
+            maxValue = (_visibleValue$reduce = visibleValue.reduce(function (acc, v) {
+              return acc + v;
+            })) !== null && _visibleValue$reduce !== void 0 ? _visibleValue$reduce : 0;
+          } else if (visibleValue.length) {
+            maxValue = Math.max.apply(Math, _toConsumableArray(visibleValue));
+          } else {
+            maxValue = _this.axesRange.x[0].max;
+          }
+
+          gp = helpers_canvas.calculateX(maxValue, _this.axesRange.x[0].min, _this.axesRange.x[0].max, chartWidth, valueStartPoint);
+          gp += offset;
+        } else {
+          var _data$i2;
+
+          var _seriesList = Object.keys((_data$i2 = data[i]) !== null && _data$i2 !== void 0 ? _data$i2 : {});
+
+          var _visibleSeries = _seriesList.filter(function (sId) {
+            return _this.seriesList[sId].show;
+          });
+
+          var _visibleValue = _visibleSeries.map(function (sId) {
+            return data[i][sId];
+          });
+
+          var _isExistGrp = _seriesList.some(function (sId) {
+            return _this.seriesList[sId].isExistGrp;
+          });
+
+          var _maxValue;
+
+          if (_isExistGrp) {
+            var _visibleValue$reduce2;
+
+            _maxValue = (_visibleValue$reduce2 = _visibleValue.reduce(function (acc, v) {
+              return acc + v;
+            })) !== null && _visibleValue$reduce2 !== void 0 ? _visibleValue$reduce2 : 0;
+          } else if (_visibleValue.length) {
+            _maxValue = Math.max.apply(Math, _toConsumableArray(_visibleValue));
+          } else {
+            _maxValue = _this.axesRange.y[0].max;
+          }
+
+          gp = helpers_canvas.calculateY(_maxValue, _this.axesRange.y[0].min, _this.axesRange.y[0].max, chartHeight, valueStartPoint);
+          gp -= offset;
+        }
+
+        _this.showTip({
+          context: _this.bufferCtx,
+          x: isHorizontal ? gp : dp,
+          y: isHorizontal ? dp : gp,
+          opt: labelTipOpt,
+          isSamePos: false
+        });
+      });
+    }
+
+    return drawTip;
+  },
+
   /**
    * Calculate x, y position to draw text tip
    * @param {object} param     object for drawing text tip
@@ -39282,7 +40647,7 @@ var element_tip_modules = {
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
-  function EvChart(target, data, options, listeners, defaultSelectInfo) {
+  function EvChart(target, data, options, listeners, defaultSelectItemInfo, defaultSelectLabelInfo) {
     var _this = this;
 
     _classCallCheck(this, EvChart);
@@ -39335,11 +40700,13 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         pie: [],
         bar: [],
         line: [],
-        scatter: []
+        scatter: [],
+        heatMap: []
       },
       count: 0
     };
-    this.defaultSelectInfo = defaultSelectInfo;
+    this.defaultSelectItemInfo = defaultSelectItemInfo;
+    this.defaultSelectLabelInfo = defaultSelectLabelInfo;
   }
   /**
    * Initialize chart object
@@ -39375,6 +40742,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
+      this.initSelectedLabelInfo();
       this.drawChart();
 
       if (tooltip.use) {
@@ -39434,6 +40802,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Draw each series
+     * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
      *
      * @returns {undefined}
      */
@@ -39443,7 +40812,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     value: function drawSeries(hitInfo) {
       var _this2 = this;
 
-      var maxTip = this.options.maxTip;
+      var _this$options2 = this.options,
+          maxTip = _this$options2.maxTip,
+          selectLabel = _this$options2.selectLabel;
       var opt = {
         ctx: this.bufferCtx,
         chartRect: this.chartRect,
@@ -39452,6 +40823,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         maxTipOpt: {
           background: maxTip.background,
           color: maxTip.color
+        },
+        selectLabel: {
+          option: selectLabel,
+          selected: this.defaultSelectLabelInfo
         }
       };
       var showIndex = 0;
@@ -39470,12 +40845,12 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         for (var jx = 0; jx < chartTypeSet.length; jx++) {
           var series = this.seriesList[chartTypeSet[jx]];
 
-          if (chartType === 'line' || chartType === 'scatter') {
+          if (chartType === 'line' || chartType === 'scatter' || chartType === 'heatMap') {
             series.draw(opt);
           } else if (chartType === 'bar') {
-            var _this$options2 = this.options,
-                thickness = _this$options2.thickness,
-                borderRadius = _this$options2.borderRadius;
+            var _this$options3 = this.options,
+                thickness = _this$options3.thickness,
+                borderRadius = _this$options3.borderRadius;
             series.draw(_objectSpread2({
               thickness: thickness,
               borderRadius: borderRadius,
@@ -39487,10 +40862,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               showIndex++;
             }
           } else {
-            var _ref, _this$defaultSelectIn;
+            var _ref, _this$defaultSelectIt;
 
             var selectInfo = (_ref = hitInfo !== null && hitInfo !== void 0 ? hitInfo : this.lastHitInfo) !== null && _ref !== void 0 ? _ref : {
-              sId: (_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.seriesID
+              sId: (_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.seriesID
             };
 
             if (this.options.sunburst) {
@@ -39509,7 +40884,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       }
     }
     /**
-     * Draw Tip with hitInfo and defaultSelectInfo
+     * Draw Tip with hitInfo and defaultSelectItemInfo
      * @param hitInfo
      */
 
@@ -39526,8 +40901,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         tipLocationInfo = hitInfo;
       } else if (this.lastHitInfo) {
         tipLocationInfo = this.lastHitInfo;
-      } else if (this.defaultSelectInfo) {
-        tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
+      } else if (this.defaultSelectItemInfo) {
+        tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);
       } else {
         tipLocationInfo = null;
       }
@@ -39609,10 +40984,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       var _this4 = this;
 
       this.axesX.forEach(function (axis, index) {
-        axis.draw(_this4.chartRect, _this4.labelOffset, _this4.axesSteps.x[index], hitInfo);
+        axis.draw(_this4.chartRect, _this4.labelOffset, _this4.axesSteps.x[index], hitInfo, _this4.defaultSelectLabelInfo);
       });
       this.axesY.forEach(function (axis, index) {
-        axis.draw(_this4.chartRect, _this4.labelOffset, _this4.axesSteps.y[index]);
+        axis.draw(_this4.chartRect, _this4.labelOffset, _this4.axesSteps.y[index], hitInfo, _this4.defaultSelectLabelInfo);
       });
     }
     /**
@@ -39898,7 +41273,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
             pie: [],
             bar: [],
             line: [],
-            scatter: []
+            scatter: [],
+            heatMap: []
           },
           count: 0
         };
@@ -39959,6 +41335,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', options.axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
+      this.initSelectedLabelInfo();
       this.render();
       var isDragMove = this.dragInfo && this.drawSelectionArea;
 
@@ -40217,6 +41594,17 @@ var DEFAULT_OPTIONS = {
     tipBackground: '#000000',
     tipTextColor: '#FFFFFF'
   },
+  selectLabel: {
+    use: false,
+    limit: 1,
+    useDeselectOverflow: false,
+    showTip: false,
+    useSeriesOpacity: true,
+    useLabelOpacity: true,
+    fixedPosTop: false,
+    useApproximateValue: false,
+    tipBackground: '#000000'
+  },
   dragSelection: {
     use: false,
     keepDisplay: true,
@@ -40238,7 +41626,7 @@ var chart_uses_useModel = function useModel() {
   var getNormalizedOptions = function getNormalizedOptions(options) {
     var normalizedOptions = lodash_es_defaultsDeep({}, options, DEFAULT_OPTIONS);
 
-    if (options.type === 'scatter' && !(options !== null && options !== void 0 && options.tooltip)) {
+    if ((options.type === 'scatter' || options.type === 'heatMap') && !(options !== null && options !== void 0 && options.tooltip)) {
       normalizedOptions.tooltip.use = false;
     }
 
@@ -40258,7 +41646,8 @@ var chart_uses_useModel = function useModel() {
     return lodash_es_defaultsDeep(data, DEFAULT_DATA);
   };
 
-  var selectInfo = lodash_es_cloneDeep(props.selectedItem);
+  var selectItemInfo = lodash_es_cloneDeep(props.selectedItem);
+  var selectLabelInfo = lodash_es_cloneDeep(props.selectedLabel);
   var eventListeners = {
     click: function () {
       var _click = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
@@ -40277,9 +41666,15 @@ var chart_uses_useModel = function useModel() {
                   });
                 }
 
+                if (e.selected) {
+                  emit('update:selectedLabel', {
+                    dataIndex: e.selected.dataIndex
+                  });
+                }
+
                 emit('click', e);
 
-              case 4:
+              case 5:
               case "end":
                 return _context.stop();
             }
@@ -40348,7 +41743,8 @@ var chart_uses_useModel = function useModel() {
   };
   return {
     eventListeners: eventListeners,
-    selectInfo: selectInfo,
+    selectItemInfo: selectItemInfo,
+    selectLabelInfo: selectLabelInfo,
     getNormalizedData: getNormalizedData,
     getNormalizedOptions: getNormalizedOptions
   };
@@ -40393,6 +41789,10 @@ var uses_useWrapper = function useWrapper(options) {
       type: Object,
       default: null
     },
+    selectedLabel: {
+      type: Object,
+      default: null
+    },
     options: {
       type: Object,
       default: function _default() {
@@ -40410,14 +41810,15 @@ var uses_useWrapper = function useWrapper(options) {
       default: 0
     }
   },
-  emits: ['click', 'dbl-click', 'drag-select', 'update:selectedItem'],
+  emits: ['click', 'dbl-click', 'drag-select', 'update:selectedItem', 'update:selectedLabel'],
   setup: function setup(props) {
     var evChart = {};
     var isInit = false;
 
     var _useModel = chart_uses_useModel(),
         eventListeners = _useModel.eventListeners,
-        selectInfo = _useModel.selectInfo,
+        selectItemInfo = _useModel.selectItemInfo,
+        selectLabelInfo = _useModel.selectLabelInfo,
         getNormalizedData = _useModel.getNormalizedData,
         getNormalizedOptions = _useModel.getNormalizedOptions;
 
@@ -40429,7 +41830,7 @@ var uses_useWrapper = function useWrapper(options) {
         wrapperStyle = _useWrapper.wrapperStyle;
 
     var createChart = function createChart() {
-      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners, selectInfo);
+      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners, selectItemInfo, selectLabelInfo);
     };
 
     var drawChart = function drawChart() {
@@ -40495,10 +41896,6 @@ var uses_useWrapper = function useWrapper(options) {
               }, function (newValue) {
                 var _props$options;
 
-                if (!(newValue !== null && newValue !== void 0 && newValue.seriesID)) {
-                  return;
-                }
-
                 var chartType = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.type;
                 evChart.selectItemByData(newValue, chartType);
               }, {
@@ -40506,6 +41903,18 @@ var uses_useWrapper = function useWrapper(options) {
               });
 
             case 10:
+              _context.next = 12;
+              return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+                return props.selectedLabel;
+              }, function (newValue) {
+                if (newValue.dataIndex) {
+                  evChart.renderWithSelectLabel(newValue.dataIndex);
+                }
+              }, {
+                deep: true
+              });
+
+            case 12:
             case "end":
               return _context.stop();
           }
@@ -40548,8 +41957,8 @@ var uses_useWrapper = function useWrapper(options) {
 });
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=3a821ae4&lang=scss
-var Chartvue_type_style_index_0_id_3a821ae4_lang_scss = __webpack_require__("71e7");
+// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=53face60&lang=scss
+var Chartvue_type_style_index_0_id_53face60_lang_scss = __webpack_require__("96f9");
 
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue
 
@@ -40557,7 +41966,7 @@ var Chartvue_type_style_index_0_id_3a821ae4_lang_scss = __webpack_require__("71e
 
 
 
-Chartvue_type_script_lang_js.render = Chartvue_type_template_id_3a821ae4_render
+Chartvue_type_script_lang_js.render = Chartvue_type_template_id_53face60_render
 
 /* harmony default export */ var Chart = (Chartvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/chart/index.js
@@ -41185,7 +42594,7 @@ var treeGrid_uses_commonFunctions = function commonFunctions(params) {
     checkHeader: checkHeader
   };
 };
-var treeGrid_uses_scrollEvent = function scrollEvent(params) {
+var uses_scrollEvent = function scrollEvent(params) {
   var scrollInfo = params.scrollInfo,
       stores = params.stores,
       elementInfo = params.elementInfo,
@@ -42205,7 +43614,7 @@ var treeGrid_uses_filterEvent = function filterEvent(params) {
       })
     });
 
-    var _scrollEvent = treeGrid_uses_scrollEvent({
+    var _scrollEvent = uses_scrollEvent({
       scrollInfo: scrollInfo,
       stores: stores,
       elementInfo: elementInfo,
@@ -42459,32 +43868,32 @@ TreeGrid.install = function (app) {
 };
 
 /* harmony default export */ var treeGrid = (TreeGrid);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/pagination/Pagination.vue?vue&type=template&id=fdc1bb26
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/pagination/Pagination.vue?vue&type=template&id=541b906a
 
-var Paginationvue_type_template_id_fdc1bb26_hoisted_1 = {
+var Paginationvue_type_template_id_541b906a_hoisted_1 = {
   class: "pagination"
 };
-var Paginationvue_type_template_id_fdc1bb26_hoisted_2 = {
+var Paginationvue_type_template_id_541b906a_hoisted_2 = {
   key: 0,
   class: "pagination-info"
 };
-var Paginationvue_type_template_id_fdc1bb26_hoisted_3 = {
+var Paginationvue_type_template_id_541b906a_hoisted_3 = {
   key: 0,
   class: "pagination-ellipsis"
 };
 
-var Paginationvue_type_template_id_fdc1bb26_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, "…", -1);
+var Paginationvue_type_template_id_541b906a_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, "…", -1);
 
-function Paginationvue_type_template_id_fdc1bb26_render(_ctx, _cache, $props, $setup, $data, $options) {
+function Paginationvue_type_template_id_541b906a_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ev_icon = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-icon");
 
   var _component_page_button = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("page-button");
 
-  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("nav", Paginationvue_type_template_id_fdc1bb26_hoisted_1, [$props.pageInfo ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("small", Paginationvue_type_template_id_fdc1bb26_hoisted_2, [$props.perPage === 1 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("nav", Paginationvue_type_template_id_541b906a_hoisted_1, [$props.showPageInfo ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("small", Paginationvue_type_template_id_541b906a_hoisted_2, [$props.perPage === 1 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], {
     key: 0
-  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($setup.firstData)) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($props.total)), 1)], 64)) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.firstData) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($props.total), 1)], 64)) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], {
     key: 1
-  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($setup.firstData)) + " - " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma(Math.min($setup.current * $props.perPage, $props.total))) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($props.total)), 1)], 64))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.firstData) + " - " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(Math.min($setup.current * $props.perPage, $props.total)) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($props.total), 1)], 64))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", {
     class: "pagination-list",
     style: $setup.listClasses
   }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("li", {
@@ -42505,7 +43914,7 @@ function Paginationvue_type_template_id_fdc1bb26_render(_ctx, _cache, $props, $s
   }, 8, ["disabled", "page"])], 2), (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])($setup.pagesInRange, function (page, i) {
     return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], {
       key: i
-    }, [page.number === -1 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", Paginationvue_type_template_id_fdc1bb26_hoisted_3, [Paginationvue_type_template_id_fdc1bb26_hoisted_4])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
+    }, [page.number === -1 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", Paginationvue_type_template_id_541b906a_hoisted_3, [Paginationvue_type_template_id_541b906a_hoisted_4])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
       key: 1,
       class: {
         'is-current': page.isCurrent,
@@ -42532,7 +43941,7 @@ function Paginationvue_type_template_id_fdc1bb26_render(_ctx, _cache, $props, $s
     _: 1
   }, 8, ["disabled", "page"])], 2)], 4)]);
 }
-// CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=template&id=fdc1bb26
+// CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=template&id=541b906a
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/pagination/pageButton.vue?vue&type=template&id=9837f734
 
@@ -42587,7 +43996,6 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
 
 
 
-
 /* harmony default export */ var Paginationvue_type_script_lang_js = ({
   name: 'EvPagination',
   components: {
@@ -42595,8 +44003,14 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
     pageButton: pageButton
   },
   props: {
-    total: [Number, String],
-    visiblePage: [Number, String],
+    total: {
+      type: [Number, String],
+      default: 0
+    },
+    visiblePage: {
+      type: [Number, String],
+      default: 8
+    },
     perPage: {
       type: [Number, String],
       default: 20
@@ -42605,8 +44019,10 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
       type: [Number, String],
       default: 1
     },
-    size: String,
-    pageInfo: Boolean,
+    showPageInfo: {
+      type: Boolean,
+      default: false
+    },
     order: {
       type: String,
       default: 'left',
@@ -42622,13 +44038,13 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var visiblePage = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-      return props.visiblePage || 8;
+      return props.visiblePage > 7 ? props.visiblePage : 7;
     });
     var current = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
       return props.modelValue;
     });
     var pageCount = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-      return Math.ceil(props.total / props.perPage);
+      return props.total === 0 ? 1 : Math.ceil(props.total / props.perPage);
     });
     var hasPrev = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
       return current.value > 1;
@@ -42727,7 +44143,7 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
       return pageCount.value;
     }, function (value) {
       if (current.value > value) {
-        changePage(1);
+        changePage(value);
       }
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
@@ -42746,15 +44162,14 @@ pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f7
       firstData: firstData,
       current: current,
       changePage: changePage,
-      getPage: getPage,
-      numberWithComma: numberWithComma
+      getPage: getPage
     };
   }
 });
 // CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/pagination/Pagination.vue?vue&type=style&index=0&id=fdc1bb26&lang=scss
-var Paginationvue_type_style_index_0_id_fdc1bb26_lang_scss = __webpack_require__("ecfb");
+// EXTERNAL MODULE: ./src/components/pagination/Pagination.vue?vue&type=style&index=0&id=541b906a&lang=scss
+var Paginationvue_type_style_index_0_id_541b906a_lang_scss = __webpack_require__("afaf");
 
 // CONCATENATED MODULE: ./src/components/pagination/Pagination.vue
 
@@ -42762,7 +44177,7 @@ var Paginationvue_type_style_index_0_id_fdc1bb26_lang_scss = __webpack_require__
 
 
 
-Paginationvue_type_script_lang_js.render = Paginationvue_type_template_id_fdc1bb26_render
+Paginationvue_type_script_lang_js.render = Paginationvue_type_template_id_541b906a_render
 
 /* harmony default export */ var Pagination = (Paginationvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/pagination/index.js