evui 3.3.51 → 3.3.52

package/dist/evui.common.js

@@ -181,21 +181,6 @@ $({ target: 'Array', proto: true }, {
 });
 
 
-/***/ }),
-
-/***/ "052a":
-/***/ (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__("17c0");
-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("68157d0e", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "0538":
@@ -660,20 +645,6 @@ if(content.locals) module.exports = content.locals;
 var add = __webpack_require__("499e").default
 var update = add("ede85a96", content, true, {"sourceMap":false,"shadowMode":false});
 
-/***/ }),
-
-/***/ "17c0":
-/***/ (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-brush-wrapper,.ev-chart-wrapper{display:block;position:relative;width:100%;height:100%}.ev-chart-brush-container,.ev-chart-container{position:relative;overflow:hidden;width:100%;height:100%}.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{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.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-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__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--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.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;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;
-
-
 /***/ }),
 
 /***/ "17c2":
@@ -4334,6 +4305,20 @@ if(content.locals) module.exports = content.locals;
 var add = __webpack_require__("499e").default
 var update = add("5ac4a7d0", content, true, {"sourceMap":false,"shadowMode":false});
 
+/***/ }),
+
+/***/ "20ce":
+/***/ (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-brush-wrapper,.ev-chart-wrapper{display:block;position:relative;width:100%;height:100%}.ev-chart-brush-container,.ev-chart-container{position:relative;overflow:hidden;width:100%;height:100%}.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{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.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-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__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--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.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;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;
+
+
 /***/ }),
 
 /***/ "2266":
@@ -4734,6 +4719,20 @@ module.exports = function (iterator) {
 };
 
 
+/***/ }),
+
+/***/ "2bcb":
+/***/ (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-calendar-wrapper{display:inline-flex;height:100%;box-sizing:border-box;flex-direction:row}.ev-calendar-date-area:not(:first-child){border-left:1px solid}.ev-calendar-header{display:flex;height:43px;padding:12px 15px 10px}.ev-calendar-header .move-month-arrow{width:20px;height:24px;text-align:center;cursor:pointer;line-height:24px;border-radius:5px}.ev-calendar-header .move-month-arrow-icon{color:#606266;text-align:center}.ev-calendar-header .move-month-arrow:not(.disabled):hover i{color:#409eff}.ev-calendar-header .move-month-arrow.disabled{cursor:not-allowed}.ev-calendar-header .move-month-arrow.disabled i{color:#c0c4cc}.ev-calendar-header .ev-calendar-year-month-wrapper{flex:3;text-align:center}.ev-calendar-header .ev-calendar-year-month-wrapper span{display:inline-block;text-align:center;line-height:24px}.ev-calendar-year-range{width:auto}.ev-calendar-month,.ev-calendar-year{width:70px;cursor:pointer}.ev-calendar-month:hover,.ev-calendar-year:hover{color:#409eff}.ev-calendar-body{padding:8px 8px;flex:1}.ev-calendar-table{width:280px;table-layout:fixed;font-size:12px;border-collapse:collapse;border-spacing:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-calendar-table th{height:30px;color:#606266;font-weight:400;border-bottom:1px solid #ebeef5}.ev-calendar-table td{height:40px;color:#606266}.ev-calendar-selector-table{width:280px;height:220px}.ev-calendar-selector-table--year tr{height:40px;line-height:40px}.ev-calendar-selector-table--month tr{height:50px;line-height:50px}.ev-calendar-selector{width:60px;height:30px;line-height:30px;margin:0 auto;font-size:14px;color:#7f7f7f;text-align:center;opacity:1;cursor:pointer}.ev-calendar-selector:not(.selected):not(.today):not(.disabled):hover{transition:color .3s ease-in-out;color:#409eff;opacity:.7}.ev-calendar-selector.today{color:#409eff}.ev-calendar-selector.selected{border-radius:5px;background-color:#409eff;color:#fff}.ev-calendar-selector.disabled{color:#c0c4cc;cursor:not-allowed}.ev-calendar-selector-btn-wrapper{height:40px;margin-top:10px}.ev-calendar-selector-btn-wrapper .ev-button{width:100%;height:35px;line-height:35px;border:none;background-color:#ebebeb;color:#409eff}.ev-calendar-date-td{color:#606266}.ev-calendar-date-td div{height:30px;line-height:30px;padding:3px 0;margin:5px auto}.ev-calendar-date-td.next,.ev-calendar-date-td.prev{color:#c0c4cc}.ev-calendar-date-td.today{font-weight:700;color:#409eff}.ev-calendar-date-td span{display:block;width:24px;height:24px;line-height:24px;margin:auto;border-radius:50%;text-align:center}.ev-calendar-date-td:not(.selected):not(.disabled):hover{cursor:pointer;color:#409eff}.ev-calendar-date-td.selected span{color:#fff;background-color:#409eff}.ev-calendar-date-td.selected.start-date>div{width:35px;margin:5px 0 5px auto;padding-right:5px;border-top-left-radius:30px;border-bottom-left-radius:30px}.ev-calendar-date-td.selected.end-date>div{width:35px;margin:5px auto 5px 0;padding-left:5px;border-top-right-radius:30px;border-bottom-right-radius:30px}.ev-calendar-date-td.selected.start-end-date>div{width:30px;margin:5px auto;border-radius:30px}.ev-calendar-date-td.disabled{background-color:#eef0f3;opacity:1;color:#c0c4cc}.ev-calendar-date-td.disabled:hover{cursor:not-allowed}.ev-calendar-date-td.disabled.selected:hover{cursor:pointer!important}.ev-calendar-date-td.in-range:not(.next):not(.prev) div{background-color:#f2f6fc}.ev-calendar-time-area{display:flex;position:relative;width:195px;flex-direction:row;border-left:1px solid #ebeef5;color:#606266;box-sizing:content-box}.ev-calendar-time-area-disabled{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.6}.ev-calendar-time-td div{width:24px;height:24px;margin:0 auto;line-height:24px;border-radius:50%;text-align:center}.ev-calendar-time-td:not(.selected):not(.disabled):hover{cursor:pointer}.ev-calendar-time-td:not(.selected):not(.disabled):hover div{color:#409eff}.ev-calendar-time-td.selected div{color:#fff;background-color:#409eff}.ev-calendar-time-td.disabled{background-color:#eef0f3;opacity:1;color:#c0c4cc}.ev-calendar-time-td.disabled:hover{cursor:not-allowed}.ev-calendar-time-td.disabled.selected:hover{cursor:pointer!important}.ev-calendar-time-side{font-size:10px;text-align:center;background-color:#e5e5e5}.ev-calendar-time-side--label{width:33px;height:110px;line-height:110px}.ev-calendar-time-side--btn{width:30px;height:55px;line-height:55px}.ev-calendar-time-side--btn.disabled{color:#c0c4cc;cursor:not-allowed}.ev-calendar-time-side--btn.disabled:hover{color:#c0c4cc}.ev-calendar-time-side--btn:not(.disabled):hover{color:#409eff;cursor:pointer}.ev-calendar-time-side div:not(:last-child){border-bottom:1px solid #ebeef5}.ev-calendar-time-center{width:132px;height:100%;text-align:center;font-size:12px}.ev-calendar-time-center table:not(:last-child){border-bottom:1px solid #ebeef5}.ev-calendar-time-table{width:132px;height:110px;table-layout:fixed;border-collapse:collapse;border-spacing:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-calendar-time-table tr{height:33px}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "2cf4":
@@ -5229,6 +5228,17 @@ var global = __webpack_require__("da84");
 module.exports = global;
 
 
+/***/ }),
+
+/***/ "43f9":
+/***/ (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_b33e4442_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b541");
+/* 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_b33e4442_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_b33e4442_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "44ad":
@@ -6434,20 +6444,6 @@ module.exports = function (bitmap, value) {
 };
 
 
-/***/ }),
-
-/***/ "5cc3":
-/***/ (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-calendar-wrapper{display:inline-flex;height:100%;box-sizing:border-box;flex-direction:row}.ev-calendar-date-area:not(:first-child){border-left:1px solid}.ev-calendar-header{display:flex;height:43px;padding:12px 15px 10px}.ev-calendar-header .move-month-arrow{height:24px;flex:1;text-align:center;cursor:pointer;line-height:24px;border-radius:5px}.ev-calendar-header .move-month-arrow-icon{color:#606266;text-align:center}.ev-calendar-header .move-month-arrow:not(.disabled):hover i{color:#409eff}.ev-calendar-header .move-month-arrow.disabled{cursor:not-allowed}.ev-calendar-header .move-month-arrow.disabled i{color:#c0c4cc}.ev-calendar-header span{flex:3;text-align:center;line-height:24px}.ev-calendar-body{padding:8px 8px;flex:1}.ev-calendar-table{width:280px;table-layout:fixed;font-size:12px;border-collapse:collapse;border-spacing:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-calendar-table th{height:30px;color:#606266;font-weight:400;border-bottom:1px solid #ebeef5}.ev-calendar-table td{height:40px;color:#606266}.ev-calendar-date-td{color:#606266}.ev-calendar-date-td div{height:30px;line-height:30px;padding:3px 0;margin:5px auto}.ev-calendar-date-td.next,.ev-calendar-date-td.prev{color:#c0c4cc}.ev-calendar-date-td.today{font-weight:700;color:#409eff}.ev-calendar-date-td span{display:block;width:24px;height:24px;line-height:24px;margin:auto;border-radius:50%;text-align:center}.ev-calendar-date-td:not(.selected):not(.disabled):hover{cursor:pointer;color:#409eff}.ev-calendar-date-td.selected span{color:#fff;background-color:#409eff}.ev-calendar-date-td.selected.start-date>div{width:35px;margin:5px 0 5px auto;padding-right:5px;border-top-left-radius:30px;border-bottom-left-radius:30px}.ev-calendar-date-td.selected.end-date>div{width:35px;margin:5px auto 5px 0;padding-left:5px;border-top-right-radius:30px;border-bottom-right-radius:30px}.ev-calendar-date-td.selected.start-end-date>div{width:30px;margin:5px auto;border-radius:30px}.ev-calendar-date-td.disabled{background-color:#eef0f3;opacity:1;color:#c0c4cc}.ev-calendar-date-td.disabled:hover{cursor:not-allowed}.ev-calendar-date-td.disabled.selected:hover{cursor:pointer!important}.ev-calendar-date-td.in-range:not(.next):not(.prev) div{background-color:#f2f6fc}.ev-calendar-time-area{display:flex;width:195px;flex-direction:row;border-left:1px solid #ebeef5;color:#606266;box-sizing:content-box}.ev-calendar-time-td div{width:24px;height:24px;margin:0 auto;line-height:24px;border-radius:50%;text-align:center}.ev-calendar-time-td:not(.selected):hover{cursor:pointer}.ev-calendar-time-td:not(.selected):hover div{color:#409eff}.ev-calendar-time-td.selected div{color:#fff;background-color:#409eff}.ev-calendar-time-td.disabled{background-color:#eef0f3;opacity:1;color:#c0c4cc}.ev-calendar-time-td.disabled:hover{cursor:not-allowed}.ev-calendar-time-td.disabled.selected:hover{cursor:pointer!important}.ev-calendar-time-side{font-size:10px;text-align:center;background-color:#e5e5e5}.ev-calendar-time-side:first-child{width:35px}.ev-calendar-time-side:last-child{width:30px}.ev-calendar-time-side--label{height:110px;line-height:110px}.ev-calendar-time-side--btn{height:55px;line-height:55px}.ev-calendar-time-side--btn.disabled{color:#c0c4cc;cursor:not-allowed}.ev-calendar-time-side--btn.disabled:hover{color:#c0c4cc}.ev-calendar-time-side--btn:not(.disabled):hover{color:#409eff;cursor:pointer}.ev-calendar-time-side div:not(:last-child){border-bottom:1px solid #ebeef5}.ev-calendar-time-center{width:132px;height:100%;text-align:center;font-size:12px}.ev-calendar-time-center table:not(:last-child){border-bottom:1px solid #ebeef5}.ev-calendar-time-table{width:132px;height:110px;table-layout:fixed;border-collapse:collapse;border-spacing:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-calendar-time-table tr{height:33px}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "5cd6":
@@ -6631,6 +6627,17 @@ if(content.locals) module.exports = content.locals;
 var add = __webpack_require__("499e").default
 var update = add("72b50474", content, true, {"sourceMap":false,"shadowMode":false});
 
+/***/ }),
+
+/***/ "64a7":
+/***/ (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_ChartGroup_vue_vue_type_style_index_0_id_1f6971cd_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("7058");
+/* 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_ChartGroup_vue_vue_type_style_index_0_id_1f6971cd_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_ChartGroup_vue_vue_type_style_index_0_id_1f6971cd_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "6547":
@@ -7250,6 +7257,21 @@ module.exports = {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "7058":
+/***/ (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__("f8c3");
+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("603b7e2c", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "7156":
@@ -7325,17 +7347,6 @@ module.exports = function (NAME) {
 };
 
 
-/***/ }),
-
-/***/ "74f8":
-/***/ (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_0627777b_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("052a");
-/* 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_0627777b_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_0627777b_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "76c7":
@@ -7519,17 +7530,6 @@ exports.push([module.i, ".ev-tabs li,.ev-tabs ul{list-style:none}.ev-tabs.closab
 module.exports = exports;
 
 
-/***/ }),
-
-/***/ "7d3a":
-/***/ (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_Calendar_vue_vue_type_style_index_0_id_05101d63_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d87f");
-/* 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_Calendar_vue_vue_type_style_index_0_id_05101d63_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_Calendar_vue_vue_type_style_index_0_id_05101d63_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "7db0":
@@ -7660,17 +7660,6 @@ module.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, I
 };
 
 
-/***/ }),
-
-/***/ "7f2c":
-/***/ (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_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("97ea");
-/* 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_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_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_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "7f9a":
@@ -8056,7 +8045,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.51\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.52\"}");
 
 /***/ }),
 
@@ -8967,21 +8956,6 @@ var update = add("6e9caba0", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ "97ea":
-/***/ (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__("d9d2");
-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("05d41eae", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
 /***/ "99af":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -9844,6 +9818,21 @@ if (isForced(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumb
 }
 
 
+/***/ }),
+
+/***/ "aa02":
+/***/ (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__("2bcb");
+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("0a818fe7", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "ab13":
@@ -10087,6 +10076,21 @@ if (DESCRIPTORS && !(NAME in FunctionPrototype)) {
 }
 
 
+/***/ }),
+
+/***/ "b541":
+/***/ (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__("20ce");
+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("33ef3124", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "b575":
@@ -11327,35 +11331,6 @@ $({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT || !USES_TO_LENGT
 });
 
 
-/***/ }),
-
-/***/ "d87f":
-/***/ (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__("5cc3");
-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("5cebcabb", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
-/***/ "d9d2":
-/***/ (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-group__wrapper[data-v-2db10c44]{display:flex;height:100%;flex-direction:column}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "da84":
@@ -11967,6 +11942,17 @@ $({ target: 'Object', stat: true, forced: FORCED, sham: !DESCRIPTORS }, {
 
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("c8ba")))
 
+/***/ }),
+
+/***/ "e4f4":
+/***/ (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_Calendar_vue_vue_type_style_index_0_id_9e5fff8c_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("aa02");
+/* 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_Calendar_vue_vue_type_style_index_0_id_9e5fff8c_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_Calendar_vue_vue_type_style_index_0_id_9e5fff8c_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "e538":
@@ -12723,6 +12709,20 @@ module.exports = function (key) {
 };
 
 
+/***/ }),
+
+/***/ "f8c3":
+/***/ (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-group__wrapper[data-v-1f6971cd]{display:flex;height:100%;flex-direction:column}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "f99b":
@@ -19225,265 +19225,207 @@ Icon.install = function (app) {
 };
 
 /* harmony default export */ var components_icon = (Icon);
-// 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/calendar/Calendar.vue?vue&type=template&id=05101d63
+// 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/calendar/Calendar.vue?vue&type=template&id=9e5fff8c
 
 
 
 
-var Calendarvue_type_template_id_05101d63_hoisted_1 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_1 = {
   class: "ev-calendar-wrapper"
 };
-var Calendarvue_type_template_id_05101d63_hoisted_2 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_2 = {
   class: "ev-calendar-date-area"
 };
-var Calendarvue_type_template_id_05101d63_hoisted_3 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_3 = {
   class: "ev-calendar-header"
 };
 
-var Calendarvue_type_template_id_05101d63_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
   class: "ev-icon-s-arrow-left move-month-arrow-icon"
 }, null, -1);
 
-var Calendarvue_type_template_id_05101d63_hoisted_5 = {
-  class: "ev-calendar-year"
+var Calendarvue_type_template_id_9e5fff8c_hoisted_5 = {
+  class: "ev-calendar-year-month-wrapper"
 };
-var Calendarvue_type_template_id_05101d63_hoisted_6 = {
-  class: "ev-calendar-month"
+var Calendarvue_type_template_id_9e5fff8c_hoisted_6 = {
+  key: 0,
+  class: "ev-calendar-year-range"
 };
 
-var Calendarvue_type_template_id_05101d63_hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
   class: "ev-icon-s-arrow-right move-month-arrow-icon"
 }, null, -1);
 
-var Calendarvue_type_template_id_05101d63_hoisted_8 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_8 = {
   class: "ev-calendar-body"
 };
-var Calendarvue_type_template_id_05101d63_hoisted_9 = {
-  key: 'main_calendar_table',
-  class: "ev-calendar-table"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_10 = {
-  key: 0,
-  class: "ev-calendar-time-area"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_11 = {
-  class: "ev-calendar-time-side"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_12 = {
-  class: "ev-calendar-time-center"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_13 = {
-  class: "ev-calendar-time-side"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_14 = {
-  key: 1,
-  class: "ev-calendar-date-area"
-};
-var Calendarvue_type_template_id_05101d63_hoisted_15 = {
-  class: "ev-calendar-header"
-};
-
-var _hoisted_16 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
-  class: "ev-icon-s-arrow-left move-month-arrow-icon"
-}, null, -1);
-
-var _hoisted_17 = {
-  class: "ev-calendar-year"
-};
-var _hoisted_18 = {
-  class: "ev-calendar-month"
+var Calendarvue_type_template_id_9e5fff8c_hoisted_9 = {
+  key: 2,
+  class: "ev-calendar-selector-btn-wrapper"
 };
 
-var _hoisted_19 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
-  class: "ev-icon-s-arrow-right move-month-arrow-icon"
-}, null, -1);
+var Calendarvue_type_template_id_9e5fff8c_hoisted_10 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Done ");
 
-var _hoisted_20 = {
-  class: "ev-calendar-body"
-};
-var _hoisted_21 = {
-  key: 'expanded_calendar_table',
-  class: "ev-calendar-table"
-};
-var _hoisted_22 = {
-  key: 2,
+var Calendarvue_type_template_id_9e5fff8c_hoisted_11 = {
+  key: 0,
   class: "ev-calendar-time-area"
 };
-var _hoisted_23 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_12 = {
+  key: 0,
+  class: "ev-calendar-time-area-disabled"
+};
+var Calendarvue_type_template_id_9e5fff8c_hoisted_13 = {
   class: "ev-calendar-time-side"
 };
-var _hoisted_24 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_14 = {
   class: "ev-calendar-time-center"
 };
-var _hoisted_25 = {
+var Calendarvue_type_template_id_9e5fff8c_hoisted_15 = {
   class: "ev-calendar-time-side"
 };
-function Calendarvue_type_template_id_05101d63_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", Calendarvue_type_template_id_05101d63_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-    class: "move-month-arrow",
-    onClick: _cache[1] || (_cache[1] = function ($event) {
-      return $setup.clickPrevNextBtn('main', 'prev');
-    })
-  }, [Calendarvue_type_template_id_05101d63_hoisted_4]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", Calendarvue_type_template_id_05101d63_hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.mainCalendarPageInfo.year), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", Calendarvue_type_template_id_05101d63_hoisted_6, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.mainCalendarMonth), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-    class: "move-month-arrow",
-    onClick: _cache[2] || (_cache[2] = function ($event) {
-      return $setup.clickPrevNextBtn('main', 'next');
-    })
-  }, [Calendarvue_type_template_id_05101d63_hoisted_7])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_8, [(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("table", Calendarvue_type_template_id_05101d63_hoisted_9, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("thead", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", null, [(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.dayOfTheWeekList, function (dayOfTheWeek) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("th", {
-      key: dayOfTheWeek
-    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dayOfTheWeek), 1);
-  }), 128))])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
-    onWheel: _cache[4] || (_cache[4] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
-      return $setup.wheelMonth('main', $event);
-    }, ["prevent"]))
-  }, [(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.mainCalendarTableInfo, function (weekInfo) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", {
-      key: weekInfo
-    }, [(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"])(weekInfo, function (dateInfo) {
-      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("td", _defineProperty({
-        key: dateInfo,
-        class: ["ev-calendar-date-td", [_defineProperty({}, dateInfo.monthType, !!dateInfo.monthType), {
-          today: dateInfo.isToday
-        }, {
-          selected: dateInfo.isSelected
-        }]],
-        onClick: function onClick($event) {
-          return $setup.clickDate('main', dateInfo);
-        }
-      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toHandlerKey"])("".concat($setup.calendarEventName)), _cache[3] || (_cache[3] = function ($event) {
-        return $setup.onMousemoveDate('main', $event);
-      })), [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dateInfo.date), 1)])], 16, ["onClick"]);
-    }), 128))]);
-  }), 128))], 32)]))])]), ['dateTime', 'dateTimeRange'].includes($props.mode) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_05101d63_hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_11, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['HOUR', 'MIN', 'SEC'], function (hmsType) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-      key: "".concat(hmsType, "_label"),
-      class: "ev-calendar-time-side--label"
-    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(hmsType), 1);
-  }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_12, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (timeType) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("table", {
-      key: "".concat(timeType, "_table"),
-      class: "ev-calendar-time-table"
-    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
+function Calendarvue_type_template_id_9e5fff8c_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ev_button = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-button");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_1, [(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.calendarList, function (calendarType) {
+    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: calendarType
+    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+      class: "move-month-arrow",
+      onClick: function onClick($event) {
+        return $setup.clickPrevNextBtn(calendarType, 'prev');
+      }
+    }, [Calendarvue_type_template_id_9e5fff8c_hoisted_4], 8, ["onClick"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_5, [$setup.selectedListType[calendarType] === 'year' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Calendarvue_type_template_id_9e5fff8c_hoisted_6, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.calendarYearRangeInfo[calendarType].start + ' - ' + $setup.calendarYearRangeInfo[calendarType].end), 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: 1
+    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
+      class: "ev-calendar-year",
+      onClick: function onClick($event) {
+        return $setup.clickYearMonthBtn(calendarType, 'year');
+      }
+    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.calendarPageInfo[calendarType].year), 9, ["onClick"]), $setup.selectedListType[calendarType] === 'date' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", {
+      key: 0,
+      class: "ev-calendar-month",
+      onClick: function onClick($event) {
+        return $setup.clickYearMonthBtn(calendarType, 'month');
+      }
+    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.calendarMonth[calendarType]), 9, ["onClick"])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+      class: "move-month-arrow",
+      onClick: function onClick($event) {
+        return $setup.clickPrevNextBtn(calendarType, 'next');
+      }
+    }, [Calendarvue_type_template_id_9e5fff8c_hoisted_7], 8, ["onClick"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_8, [$setup.selectedListType[calendarType] === 'date' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("table", {
+      key: "".concat(calendarType, "_calendar_table"),
+      class: "ev-calendar-table"
+    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("thead", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", null, [(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.dayOfTheWeekList, function (dayOfTheWeek) {
+      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("th", {
+        key: dayOfTheWeek
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dayOfTheWeek), 1);
+    }), 128))])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
       onWheel: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
-        return $setup.wheelTime('main', timeType, $event);
+        return $setup.wheelMonth(calendarType, $event);
       }, ["prevent"])
-    }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(3, function (i) {
-      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", {
-        key: "".concat(timeType, "_").concat(i, "_tr")
-      }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(4, function (j) {
-        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
-          key: "".concat(timeType, "_").concat(i, "_").concat(j, "_td"),
-          class: ["ev-calendar-time-td", {
-            selected: $setup.getTimeInfo(timeType, i, j, 'main').isSelected,
-            disabled: $setup.preventTimeEventType.main[timeType] || $setup.getTimeInfo(timeType, i, j, 'main').isDisabled
+    }, [(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.calendarTableInfo[calendarType], function (weekInfo) {
+      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", {
+        key: weekInfo
+      }, [(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"])(weekInfo, function (dateInfo) {
+        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("td", _defineProperty({
+          key: dateInfo,
+          class: ['ev-calendar-date-td', _defineProperty({}, dateInfo.monthType, !!dateInfo.monthType), {
+            today: dateInfo.isToday
+          }, {
+            selected: dateInfo.isSelected
           }],
           onClick: function onClick($event) {
-            return $setup.clickTime('main', timeType, i, j);
+            return $setup.clickDate(calendarType, dateInfo);
           }
-        }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.getTimeInfo(timeType, i, j, 'main').num), 1)], 10, ["onClick"]);
-      }), 64))]);
-    }), 64))], 40, ["onWheel"])]);
-  }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_13, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (hmsType) {
-    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: "".concat(hmsType, "_btn_area")
-    }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['up', 'down'], function (arrowType) {
-      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-        key: "".concat(hmsType, "_").concat(arrowType, "_btn"),
-        class: ['ev-calendar-time-side--btn', "arrow-".concat(hmsType), {
-          disabled: $setup.preventTimeEventType.main[hmsType]
-        }],
-        onClick: function onClick($event) {
-          return $setup.clickHmsBtn('main', hmsType, arrowType);
-        }
-      }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
-        class: "ev-icon-arrow-".concat(arrowType)
-      }, null, 2)], 10, ["onClick"]);
-    }), 64))], 64);
-  }), 64))])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), ['dateRange', 'dateTimeRange'].includes($props.mode) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_05101d63_hoisted_14, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_05101d63_hoisted_15, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-    class: "move-month-arrow",
-    onClick: _cache[5] || (_cache[5] = function ($event) {
-      return $setup.clickPrevNextBtn('expanded', 'prev');
-    })
-  }, [_hoisted_16]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", _hoisted_17, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.expandedCalendarPageInfo.year), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.expandedCalendarMonth), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-    class: "move-month-arrow",
-    onClick: _cache[6] || (_cache[6] = function ($event) {
-      return $setup.clickPrevNextBtn('expanded', 'next');
-    })
-  }, [_hoisted_19])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", _hoisted_20, [(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("table", _hoisted_21, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("thead", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", null, [(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.dayOfTheWeekList, function (dayOfTheWeek) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("th", {
-      key: dayOfTheWeek
-    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dayOfTheWeek), 1);
-  }), 128))])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
-    onWheel: _cache[8] || (_cache[8] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
-      return $setup.wheelMonth('expanded', $event);
-    }, ["prevent"]))
-  }, [(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.expandedCalendarTableInfo, function (weekInfo) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", {
-      key: weekInfo
-    }, [(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"])(weekInfo, function (dateInfo) {
-      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("td", _defineProperty({
-        key: dateInfo,
-        class: ["ev-calendar-date-td", [_defineProperty({}, dateInfo.monthType, !!dateInfo.monthType), {
-          today: dateInfo.isToday
-        }, {
-          selected: dateInfo.isSelected
-        }]],
-        onClick: function onClick($event) {
-          return $setup.clickDate('expanded', dateInfo);
-        }
-      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toHandlerKey"])("".concat($setup.calendarEventName)), _cache[7] || (_cache[7] = function ($event) {
-        return $setup.onMousemoveDate('expanded', $event);
-      })), [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dateInfo.date), 1)])], 16, ["onClick"]);
-    }), 128))]);
-  }), 128))], 32)]))])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), $props.mode === 'dateTimeRange' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", _hoisted_22, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", _hoisted_23, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['HOUR', 'MIN', 'SEC'], function (hmsType) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-      key: "".concat(hmsType, "_label"),
-      class: "ev-calendar-time-side--label"
-    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(hmsType), 1);
-  }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", _hoisted_24, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (timeType) {
-    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("table", {
-      key: "".concat(timeType, "_table"),
-      class: "ev-calendar-time-table"
+        }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toHandlerKey"])("".concat($setup.calendarEventName)), function ($event) {
+          return $setup.onMousemoveDate(calendarType, $event);
+        }), [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(dateInfo.date), 1)])], 16, ["onClick"]);
+      }), 128))]);
+    }), 128))], 40, ["onWheel"])])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("table", {
+      key: 1,
+      class: ['ev-calendar-selector-table', "ev-calendar-selector-table--".concat($setup.selectedListType[calendarType])]
     }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
       onWheel: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
-        return $setup.wheelTime('expanded', timeType, $event);
+        return $setup.wheelMonth(calendarType, $event);
       }, ["prevent"])
-    }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(3, function (i) {
-      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", {
-        key: "".concat(timeType, "_").concat(i, "_tr")
-      }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(4, function (j) {
-        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
-          key: "".concat(timeType, "_").concat(i, "_").concat(j, "_td"),
-          class: ["ev-calendar-time-td", {
-            selected: $setup.getTimeInfo(timeType, i, j, 'expanded').isSelected,
-            disabled: $setup.preventTimeEventType.expanded[timeType] || $setup.getTimeInfo(timeType, i, j, 'expanded').isDisabled
-          }],
+    }, [(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.selectedListType[calendarType] === 'month' ? $setup.calendarMonthTableInfo[calendarType] : $setup.calendarYearTableInfo[calendarType], function (rowInfo) {
+      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", {
+        key: rowInfo
+      }, [(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"])(rowInfo, function (colInfo) {
+        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("td", {
+          key: colInfo.value,
           onClick: function onClick($event) {
-            return $setup.clickTime('expanded', timeType, i, j);
+            return $setup.clickYearMonth(calendarType, colInfo);
           }
-        }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.getTimeInfo(timeType, i, j, 'expanded').num), 1)], 10, ["onClick"]);
-      }), 64))]);
-    }), 64))], 40, ["onWheel"])]);
-  }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", _hoisted_25, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (hmsType) {
-    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: "".concat(hmsType, "_btn_area")
-    }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['up', 'down'], function (arrowType) {
+        }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+          class: ['ev-calendar-selector', {
+            selected: colInfo.isSelected
+          }, {
+            today: colInfo.today
+          }, {
+            disabled: colInfo.disabled
+          }]
+        }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(colInfo.label), 3)], 8, ["onClick"]);
+      }), 128))]);
+    }), 128))], 40, ["onWheel"])], 2)), $setup.selectedListType[calendarType] !== 'date' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_9, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
+      onClick: function onClick($event) {
+        return $setup.clickYearMonthBtn(calendarType, 'date');
+      }
+    }, {
+      default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+        return [Calendarvue_type_template_id_9e5fff8c_hoisted_10];
+      }),
+      _: 2
+    }, 1032, ["onClick"])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])]), ['dateTime', 'dateTimeRange'].includes($props.mode) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_11, [$setup.selectedListType[calendarType] !== 'date' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_12)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_13, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['HOUR', 'MIN', 'SEC'], function (hmsType) {
       return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
-        key: "".concat(hmsType, "_").concat(arrowType, "_btn"),
-        class: ['ev-calendar-time-side--btn', "arrow-".concat(hmsType), {
-          disabled: $setup.preventTimeEventType.expanded[hmsType]
-        }],
-        onClick: function onClick($event) {
-          return $setup.clickHmsBtn('expanded', hmsType, arrowType);
-        }
-      }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
-        class: "ev-icon-arrow-".concat(arrowType)
-      }, null, 2)], 10, ["onClick"]);
-    }), 64))], 64);
-  }), 64))])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)]);
+        key: "".concat(hmsType, "_label"),
+        class: "ev-calendar-time-side--label"
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(hmsType), 1);
+    }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_14, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (timeType) {
+      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("table", {
+        key: "".concat(timeType, "_table"),
+        class: "ev-calendar-time-table"
+      }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", {
+        onWheel: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return $setup.wheelTime(calendarType, timeType, $event);
+        }, ["prevent"])
+      }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(3, function (i) {
+        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tr", {
+          key: "".concat(timeType, "_").concat(i, "_tr")
+        }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(4, function (j) {
+          return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
+            key: "".concat(timeType, "_").concat(i, "_").concat(j, "_td"),
+            class: ['ev-calendar-time-td', {
+              selected: $setup.getTimeInfo(timeType, i, j, calendarType).isSelected
+            }, {
+              disabled: $setup.preventTimeEventType[calendarType][timeType] || $setup.getTimeInfo(timeType, i, j, calendarType).isDisabled
+            }],
+            onClick: function onClick($event) {
+              return $setup.clickTime(calendarType, timeType, i, j);
+            }
+          }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.getTimeInfo(timeType, i, j, calendarType).num), 1)], 10, ["onClick"]);
+        }), 64))]);
+      }), 64))], 40, ["onWheel"])]);
+    }), 64))]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Calendarvue_type_template_id_9e5fff8c_hoisted_15, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['hour', 'min', 'sec'], function (hmsType) {
+      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: "".concat(hmsType, "_btn_area")
+      }, [(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, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(['up', 'down'], function (arrowType) {
+        return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+          key: "".concat(hmsType, "_").concat(arrowType, "_btn"),
+          class: ['ev-calendar-time-side--btn', "arrow-".concat(hmsType), {
+            disabled: $setup.preventTimeEventType[calendarType][hmsType]
+          }],
+          onClick: function onClick($event) {
+            return $setup.clickHmsBtn(calendarType, hmsType, arrowType);
+          }
+        }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("i", {
+          class: "ev-icon-arrow-".concat(arrowType)
+        }, null, 2)], 10, ["onClick"]);
+      }), 64))], 64);
+    }), 64))])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 64);
+  }), 128))]);
 }
-// CONCATENATED MODULE: ./src/components/calendar/Calendar.vue?vue&type=template&id=05101d63
+// CONCATENATED MODULE: ./src/components/calendar/Calendar.vue?vue&type=template&id=9e5fff8c
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.constructor.js
 var es_regexp_constructor = __webpack_require__("4d63");
@@ -19959,12 +19901,17 @@ function throttle(func, wait, options) {
 
 var CALENDAR_ROWS = 6;
 var CALENDAR_COLS = 7;
+var CALENDAR_MONTH_ROWS = 4;
+var CALENDAR_MONTH_COLS = 3;
+var CALENDAR_YEAR_ROWS = 5;
+var CALENDAR_YEAR_COLS = 4;
 var MONTH_CNT = 12;
 var HOUR_CNT = 24;
 var MIN_CNT = 60;
 var SEC_CNT = 60;
 var CELL_CNT_IN_ONE_PAGE = 12;
 var CELL_CNT_IN_ONE_ROW = 4;
+var YEAR_CNT_IN_ONE_PAGE = 20;
 var MONTH_NAME_LIST = {
   fullName: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   numberName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
@@ -19977,7 +19924,14 @@ var DAY_OF_THE_WEEK_NAME_LIST = {
   abbrPascalName: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   abbrKorName: ['일', '월', '화', '수', '목', '금', '토']
 };
+var LIST_TYPE = {
+  DATE: 'date',
+  MONTH: 'month',
+  YEAR: 'year'
+};
 var ONE_DAY_MS = 86400000;
+var MIN_DATE_MS = +new Date('1970-01-01 00:00:00'); // javascript 객체 최소 시간
+
 var dateReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/);
 var dateTimeReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]/);
 /**
@@ -20086,7 +20040,6 @@ var getLastDateOfMonth = function getLastDateOfMonth(y, m) {
  * @returns {string}
  */
 
-
 var uses_formatDateTime = function formatDateTime(_ref) {
   var year = _ref.year,
       month = _ref.month,
@@ -20205,6 +20158,14 @@ var getChangedValueByTimeFormat = function getChangedValueByTimeFormat(timeForma
   var secByTimeFormat = uses_lpadToTwoDigits(getTimeInfoByTimeFormat(timeFormat, modelValue, 'sec'));
   return "".concat(modelValue.split(' ')[0], " ").concat(hourByTimeFormat, ":").concat(minByTimeFormat, ":").concat(secByTimeFormat);
 };
+/**
+ * 현재 달력의 날짜와 다음 달력의 날짜 비교 (disabledDate 옵션이 없는 경우만 적용)
+ * @param mode - calendar mode
+ * @param calendarType - 달력 종류 {main | expanded}
+ * @param targetDate - 기준 날짜
+ * @param modelValue - model value
+ * @returns {*|boolean}
+ */
 
 var compareFromAndToDateTime = function compareFromAndToDateTime(mode, calendarType, targetDate, modelValue) {
   if (!modelValue.length) {
@@ -20242,6 +20203,24 @@ var compareFromAndToDateTime = function compareFromAndToDateTime(mode, calendarT
 var getDateMs = function getDateMs(dateStr) {
   return new Date("".concat(dateStr)).getTime();
 };
+/**
+ * Calendar 년도 범위 구하기
+ * @param currentYear - 현재 Calendar 페이지 정보의 년도
+ * @returns {{start: number, end: number}} - start: 시작년도, end: 마지막 년도
+ */
+
+
+var getYearRange = function getYearRange(currentYear) {
+  var multipleOf10 = Math.pow(10, currentYear.toString().length - 1);
+  var quotient = Math.floor(currentYear / multipleOf10);
+  var remainder = Math.floor(currentYear % (multipleOf10 * quotient));
+  var startYear = quotient * multipleOf10 + Math.floor(remainder / YEAR_CNT_IN_ONE_PAGE) * YEAR_CNT_IN_ONE_PAGE;
+  var endYear = startYear + YEAR_CNT_IN_ONE_PAGE - 1;
+  return {
+    start: startYear,
+    end: endYear
+  };
+};
 
 var calendar_uses_useModel = function useModel() {
   var _props$options;
@@ -20249,7 +20228,11 @@ var calendar_uses_useModel = function useModel() {
   var _getCurrentInstance = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
       props = _getCurrentInstance.props;
 
-  var timeFormat = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.timeFormat;
+  var timeFormat = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.timeFormat; // 달력 list - 'dateRange | dateTimeRange' 모드인 경우 확장 달력 추가
+
+  var calendarList = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+    return ['dateRange', 'dateTimeRange'].includes(props.mode) ? ['main', 'expanded'] : ['main'];
+  });
   /**
   * 현재 선택된 값, 배열인 경우 반응형을 끊기위해 rest 사용
   * selectValue ref로 변환하기 전 modelValue timeFormat에 따라 fetch
@@ -20321,21 +20304,21 @@ var calendar_uses_useModel = function useModel() {
   var mainValue = !['dateRange', 'dateTimeRange'].includes(props.mode) ? selectedValue.value : selectedValue.value[0];
 
   if (mainValue !== null && mainValue !== void 0 && mainValue.length) {
-    mainCalendarPageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    mainCalendarPageInfo = {
       year: uses_getDateTimeInfoByType(mainValue, 'year'),
       month: uses_getDateTimeInfoByType(mainValue, 'month'),
       hour: Math.floor(uses_getDateTimeInfoByType(mainValue, 'hour') / CELL_CNT_IN_ONE_PAGE) + 1 || 1,
       min: Math.floor(uses_getDateTimeInfoByType(mainValue, 'min') / CELL_CNT_IN_ONE_PAGE) + 1 || 1,
       sec: Math.floor(uses_getDateTimeInfoByType(mainValue, 'sec') / CELL_CNT_IN_ONE_PAGE) + 1 || 1
-    });
+    };
   } else {
-    mainCalendarPageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    mainCalendarPageInfo = {
       year: new Date().getFullYear(),
       month: new Date().getMonth() + 1,
       hour: 1,
       min: 1,
       sec: 1
-    });
+    };
   } // 'mode: dateRange || dateTimeRange', 인 경우 확장된 달력(연, 월) 페이징 정보
 
 
@@ -20343,11 +20326,10 @@ var calendar_uses_useModel = function useModel() {
 
   if (['dateRange', 'dateTimeRange'].includes(props.mode) && Array.isArray(selectedValue.value) && selectedValue.value[1]) {
     var expandedValue = selectedValue.value[1];
-    var toDate = {
+    expandedCalendarPageInfo = {
       year: uses_getDateTimeInfoByType(expandedValue, 'year'),
       month: uses_getDateTimeInfoByType(expandedValue, 'month')
     };
-    expandedCalendarPageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])(toDate);
 
     if (props.mode === 'dateTimeRange') {
       expandedCalendarPageInfo.hour = Math.floor(uses_getDateTimeInfoByType(expandedValue, 'hour') / CELL_CNT_IN_ONE_PAGE) + 1 || 1;
@@ -20355,22 +20337,41 @@ var calendar_uses_useModel = function useModel() {
       expandedCalendarPageInfo.sec = Math.floor(uses_getDateTimeInfoByType(expandedValue, 'sec') / CELL_CNT_IN_ONE_PAGE) + 1 || 1;
     }
   } else {
-    expandedCalendarPageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    expandedCalendarPageInfo = {
       year: new Date().getFullYear(),
       month: new Date().getMonth() + 1,
       hour: 1,
       min: 1,
       sec: 1
-    });
-  } // 현재 달력이 표현되는 월
+    };
+  } // 현재, 다음 달력(연, 월, 시, 분, 초) 페이징 정보
 
 
+  var calendarPageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: mainCalendarPageInfo,
+    expanded: expandedCalendarPageInfo
+  }); // 현재, 다음 달력 년도 목록 정보
+
+  var calendarYearRangeInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return getYearRange(calendarPageInfo.main.year);
+    }),
+    expanded: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return getYearRange(calendarPageInfo.expanded.year);
+    })
+  }); // 현재 달력이 표현되는 월
+
   var mainCalendarMonth = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-    return MONTH_NAME_LIST[props.monthNotation][mainCalendarPageInfo.month - 1];
+    return MONTH_NAME_LIST[props.monthNotation][calendarPageInfo.main.month - 1];
   }); // 다음페이지 달력이 표현되는 월
 
   var expandedCalendarMonth = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-    return MONTH_NAME_LIST[props.monthNotation][expandedCalendarPageInfo.month - 1];
+    return MONTH_NAME_LIST[props.monthNotation][calendarPageInfo.expanded.month - 1];
+  }); // 현재, 다음 달력에 표현되는 월 정보
+
+  var calendarMonth = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: mainCalendarMonth,
+    expanded: expandedCalendarMonth
   }); // 현재 달력에 표현되는 타입별 요일
 
   var dayOfTheWeekList = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
@@ -20381,17 +20382,23 @@ var calendar_uses_useModel = function useModel() {
   //       && (mainCalendarPageInfo.year === expandedCalendarPageInfo.year
   //       && mainCalendarPageInfo.month === expandedCalendarPageInfo.month),
   // );
+  // Calendar 선택 type ('date' | 'month' | 'year')
 
+  var selectedListType = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: LIST_TYPE.DATE,
+    expanded: LIST_TYPE.DATE
+  });
   Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeMount"])(function () {
     validateModelValue();
   });
   return {
+    calendarList: calendarList,
     selectedValue: selectedValue,
-    mainCalendarPageInfo: mainCalendarPageInfo,
-    expandedCalendarPageInfo: expandedCalendarPageInfo,
-    mainCalendarMonth: mainCalendarMonth,
-    expandedCalendarMonth: expandedCalendarMonth,
-    dayOfTheWeekList: dayOfTheWeekList // isContinuousMonths,
+    calendarPageInfo: calendarPageInfo,
+    calendarYearRangeInfo: calendarYearRangeInfo,
+    calendarMonth: calendarMonth,
+    dayOfTheWeekList: dayOfTheWeekList,
+    selectedListType: selectedListType // isContinuousMonths,
 
   };
 };
@@ -20400,32 +20407,92 @@ var uses_useCalendarDate = function useCalendarDate(param) {
       props = _getCurrentInstance2.props;
 
   var selectedValue = param.selectedValue,
-      mainCalendarPageInfo = param.mainCalendarPageInfo,
-      expandedCalendarPageInfo = param.expandedCalendarPageInfo; // 메인 달력 테이블의 날짜 정보 (6X7, 2차원배열)
+      calendarPageInfo = param.calendarPageInfo,
+      calendarYearRangeInfo = param.calendarYearRangeInfo; // 달력 테이블의 년도 정보 (5X4, 2차원 배열)
 
-  var mainCalendarTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])(getMatrixArr(CALENDAR_ROWS, CALENDAR_COLS)); // dateRange 모드의 확장된 달력 테이블의 날짜 정보
+  var calendarYearTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: getMatrixArr(CALENDAR_YEAR_ROWS, CALENDAR_YEAR_COLS),
+    expanded: getMatrixArr(CALENDAR_YEAR_ROWS, CALENDAR_YEAR_COLS)
+  }); // 달력 테이블의 월 정보 (4X3, 2차원 배열)
 
-  var expandedCalendarTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])(getMatrixArr(CALENDAR_ROWS, CALENDAR_COLS)); // 시간박스 정보
+  var calendarMonthTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: getMatrixArr(CALENDAR_MONTH_ROWS, CALENDAR_MONTH_COLS),
+    expanded: getMatrixArr(CALENDAR_MONTH_ROWS, CALENDAR_MONTH_COLS)
+  }); // 달력 테이블의 날짜 정보 (6X7, 2차원배열)
 
-  var mainTimeTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
-    hour: [],
-    min: [],
-    sec: []
-  }); // dateTimeRange 모드의 확장된 달력 테이블의 시간 박스 정보
+  var calendarTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: getMatrixArr(CALENDAR_ROWS, CALENDAR_COLS),
+    expanded: getMatrixArr(CALENDAR_ROWS, CALENDAR_COLS)
+  }); // 시간박스 정보
 
-  var expandedTimeTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
-    hour: [],
-    min: [],
-    sec: []
+  var calendarTimeTableInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    main: {
+      hour: [],
+      min: [],
+      sec: []
+    },
+    expanded: {
+      hour: [],
+      min: [],
+      sec: []
+    }
   });
+  /**
+   * Calendar 년도 정보 세팅하기
+   * @param calendarType - 달력 종류 ('main'|'expanded')
+   */
+
+  var setCalendarYear = function setCalendarYear(calendarType) {
+    var yearValue = calendarYearRangeInfo[calendarType].start;
+    var thisYear = new Date().getFullYear();
+    var minYear = new Date(MIN_DATE_MS).getFullYear();
+
+    for (var i = 0; i < CALENDAR_YEAR_ROWS; i++) {
+      for (var j = 0; j < CALENDAR_YEAR_COLS; j++) {
+        calendarYearTableInfo[calendarType][i][j] = {
+          label: yearValue,
+          value: yearValue,
+          today: yearValue === thisYear,
+          isSelected: yearValue === calendarPageInfo[calendarType].year,
+          disabled: yearValue < minYear
+        };
+        yearValue++;
+      }
+    }
+  };
+  /**
+   * Calendar 월 정보 세팅하기
+   * @param calendarType - 달력 종류 ('main'|'expanded')
+   */
+
+
+  var setCalendarMonth = function setCalendarMonth(calendarType) {
+    var monthValue = 0;
+    var todayYear = new Date().getFullYear();
+    var todayMonth = new Date().getMonth() + 1;
+    var _calendarPageInfo$cal = calendarPageInfo[calendarType],
+        currentYear = _calendarPageInfo$cal.year,
+        currentMonth = _calendarPageInfo$cal.month;
+
+    for (var i = 0; i < CALENDAR_MONTH_ROWS; i++) {
+      for (var j = 0; j < CALENDAR_MONTH_COLS; j++) {
+        calendarMonthTableInfo[calendarType][i][j] = {
+          label: MONTH_NAME_LIST.abbrName[monthValue++],
+          value: monthValue,
+          today: currentYear === todayYear && monthValue === todayMonth,
+          isSelected: monthValue === currentMonth
+        };
+      }
+    }
+  };
   /**
    * Dropdown Calendar 날짜 정보 세팅하기
    * @param calendarType - 달력 종류 ('main'|'expanded')
    */
 
+
   var setCalendarDate = function setCalendarDate(calendarType) {
-    var calendarPageInfo = calendarType === 'expanded' ? expandedCalendarPageInfo : mainCalendarPageInfo;
-    var calendarTableInfo = calendarType === 'expanded' ? expandedCalendarTableInfo : mainCalendarTableInfo;
+    var pageInfo = calendarPageInfo[calendarType];
     var disabledDate = props.options.disabledDate;
 
     if (disabledDate && Array.isArray(disabledDate)) {
@@ -20438,16 +20505,16 @@ var uses_useCalendarDate = function useCalendarDate(param) {
       month: new Date().getMonth() + 1,
       date: new Date().getDate()
     });
-    var PREV_MONTH = (MONTH_CNT + calendarPageInfo.month - 1) % MONTH_CNT || MONTH_CNT;
-    var NEXT_MONTH = (calendarPageInfo.month + 1) % MONTH_CNT || MONTH_CNT;
-    var YEAR_OF_PREV_MONTH = calendarPageInfo.month === 1 ? calendarPageInfo.year - 1 : calendarPageInfo.year;
-    var YEAR_OF_NEXT_MONTH = calendarPageInfo.month === 12 ? calendarPageInfo.year + 1 : calendarPageInfo.year; // 이번달 1일의 요일
+    var PREV_MONTH = (MONTH_CNT + pageInfo.month - 1) % MONTH_CNT || MONTH_CNT;
+    var NEXT_MONTH = (pageInfo.month + 1) % MONTH_CNT || MONTH_CNT;
+    var YEAR_OF_PREV_MONTH = pageInfo.month === 1 ? pageInfo.year - 1 : pageInfo.year;
+    var YEAR_OF_NEXT_MONTH = pageInfo.month === 12 ? pageInfo.year + 1 : pageInfo.year; // 이번달 1일의 요일
 
-    var dayOfWeekOnThe1stOfThisMonth = getDayOfWeekOnThe1stOfMonth(calendarPageInfo.year, calendarPageInfo.month); // 저번달 마지막 날짜
+    var dayOfWeekOnThe1stOfThisMonth = getDayOfWeekOnThe1stOfMonth(pageInfo.year, pageInfo.month); // 저번달 마지막 날짜
 
-    var lastDateOfPrevMonth = getLastDateOfMonth(calendarPageInfo.month === 1 ? calendarPageInfo.year - 1 : calendarPageInfo.year, (MONTH_CNT + calendarPageInfo.month - 1) % MONTH_CNT || MONTH_CNT); // 이번달 마지막 날짜
+    var lastDateOfPrevMonth = getLastDateOfMonth(pageInfo.month === 1 ? pageInfo.year - 1 : pageInfo.year, (MONTH_CNT + pageInfo.month - 1) % MONTH_CNT || MONTH_CNT); // 이번달 마지막 날짜
 
-    var lastDateOfThisMonth = getLastDateOfMonth(calendarPageInfo.year, calendarPageInfo.month);
+    var lastDateOfThisMonth = getLastDateOfMonth(pageInfo.year, pageInfo.month);
     var modelValue = '';
 
     if (props.mode.includes('Time')) {
@@ -20471,16 +20538,17 @@ var uses_useCalendarDate = function useCalendarDate(param) {
         year: year,
         month: month,
         date: date
-      });
-      var isInvalidDate = isRangeMode && !disabledDate && compareFromAndToDateTime(props.mode, calendarType, currDate, selectedValue.value); // time 모드인 경우 현재 값의 시간을 가지고 테스트
+      }); // time 모드인 경우 현재 값의 시간을 가지고 테스트
+
+      var timeValue = (_modelValue$split$ = (_modelValue2 = modelValue) === null || _modelValue2 === void 0 ? void 0 : _modelValue2.split(' ')[1]) !== null && _modelValue$split$ !== void 0 ? _modelValue$split$ : ''; // range 모드인 경우 from 날짜가 to 날짜를 넘는지 확인 || 최소 날짜보다 이전 날짜인지 확인
 
-      var timeValue = (_modelValue$split$ = (_modelValue2 = modelValue) === null || _modelValue2 === void 0 ? void 0 : _modelValue2.split(' ')[1]) !== null && _modelValue$split$ !== void 0 ? _modelValue$split$ : '';
-      var isDisabled = disabledDate ? disabledDate(new Date("".concat(currDate, " ").concat(timeValue))) : isInvalidDate;
+      var isInvalidDate = isRangeMode && !disabledDate && compareFromAndToDateTime(props.mode, calendarType, currDate, selectedValue.value) || +new Date("".concat(currDate, " ").concat(timeValue)) < MIN_DATE_MS;
+      var isDisabled = disabledDate && disabledDate(new Date("".concat(currDate).concat(timeValue))) || isInvalidDate;
       var index = +(calendarType !== 'main');
       var isRangeSelected = isRangeMode && selectedValue.value.length > index && ((_selectedValue$value = selectedValue.value) === null || _selectedValue$value === void 0 ? void 0 : (_selectedValue$value$ = _selectedValue$value[index]) === null || _selectedValue$value$ === void 0 ? void 0 : _selectedValue$value$.includes(currDate));
       var isSelected = !isDisabled && (isRangeMode ? isRangeSelected : (_selectedValue$value2 = selectedValue.value) === null || _selectedValue$value2 === void 0 ? void 0 : _selectedValue$value2.includes(currDate)); // mode가 dateRange일 때는 이전, 다음달에 selected 를 하지 않는다.
 
-      calendarTableInfo[i][j] = {
+      calendarTableInfo[calendarType][i][j] = {
         monthType: "".concat(monthType).concat(isDisabled ? ' disabled' : ''),
         isToday: TODAY_YMD === currDate,
         isSelected: isSelected,
@@ -20502,8 +20570,8 @@ var uses_useCalendarDate = function useCalendarDate(param) {
               setDateInfo('prev', i, j);
             } else {
               monthDate++;
-              year = calendarPageInfo.year;
-              month = calendarPageInfo.month;
+              year = pageInfo.year;
+              month = pageInfo.month;
               date = monthDate;
               setDateInfo('', i, j);
             }
@@ -20523,8 +20591,8 @@ var uses_useCalendarDate = function useCalendarDate(param) {
         } else {
           // 첫번째 주를 제외한 이번달 날짜
           monthDate++;
-          year = calendarPageInfo.year;
-          month = calendarPageInfo.month;
+          year = pageInfo.year;
+          month = pageInfo.month;
           date = monthDate;
           setDateInfo('', i, j);
         }
@@ -20592,7 +20660,7 @@ var uses_useCalendarDate = function useCalendarDate(param) {
 
       for (var i = 0; i < cnt; i++) {
         var isDisabled = props.mode === 'dateTimeRange' && compareDateTimeValue('main', v, i);
-        mainTimeTableInfo[v][i] = {
+        calendarTimeTableInfo.main[v][i] = {
           timeType: v,
           num: i,
           isSelected: !isDisabled && mainTimeValue === i,
@@ -20601,7 +20669,7 @@ var uses_useCalendarDate = function useCalendarDate(param) {
 
         if (props.mode === 'dateTimeRange') {
           isDisabled = compareDateTimeValue('expanded', v, i);
-          expandedTimeTableInfo[v][i] = {
+          calendarTimeTableInfo.expanded[v][i] = {
             timeType: v,
             num: i,
             isSelected: !isDisabled && expandedTimeValue === i,
@@ -20622,8 +20690,8 @@ var uses_useCalendarDate = function useCalendarDate(param) {
 
 
   var getTimeInfo = function getTimeInfo(timeType, i, j, calendarType) {
-    var pageInfo = calendarType === 'main' ? mainCalendarPageInfo : expandedCalendarPageInfo;
-    var timeInfo = calendarType === 'main' ? mainTimeTableInfo : expandedTimeTableInfo;
+    var pageInfo = calendarPageInfo[calendarType];
+    var timeInfo = calendarTimeTableInfo[calendarType];
     var currPage = pageInfo[timeType] - 1;
     var currRowIdx = i - 1;
     var currColIdx = j - 1;
@@ -20632,11 +20700,13 @@ var uses_useCalendarDate = function useCalendarDate(param) {
   };
 
   return {
-    mainCalendarTableInfo: mainCalendarTableInfo,
-    expandedCalendarTableInfo: expandedCalendarTableInfo,
-    mainTimeTableInfo: mainTimeTableInfo,
-    expandedTimeTableInfo: expandedTimeTableInfo,
+    calendarTableInfo: calendarTableInfo,
+    calendarMonthTableInfo: calendarMonthTableInfo,
+    calendarYearTableInfo: calendarYearTableInfo,
+    calendarTimeTableInfo: calendarTimeTableInfo,
     setCalendarDate: setCalendarDate,
+    setCalendarMonth: setCalendarMonth,
+    setCalendarYear: setCalendarYear,
     setHmsTime: setHmsTime,
     getTimeInfo: getTimeInfo
   };
@@ -20650,12 +20720,13 @@ var calendar_uses_useEvent = function useEvent(param) {
 
   var timeFormat = (_props$options4 = props.options) === null || _props$options4 === void 0 ? void 0 : _props$options4.timeFormat;
   var selectedValue = param.selectedValue,
-      mainCalendarPageInfo = param.mainCalendarPageInfo,
-      expandedCalendarPageInfo = param.expandedCalendarPageInfo,
-      mainTimeTableInfo = param.mainTimeTableInfo,
-      expandedTimeTableInfo = param.expandedTimeTableInfo,
+      calendarPageInfo = param.calendarPageInfo,
+      calendarTimeTableInfo = param.calendarTimeTableInfo,
       setCalendarDate = param.setCalendarDate,
-      setHmsTime = param.setHmsTime; // dateRange mode에서 클릭하여 첫번째 선택된 날짜
+      setCalendarMonth = param.setCalendarMonth,
+      setCalendarYear = param.setCalendarYear,
+      setHmsTime = param.setHmsTime,
+      selectedListType = param.selectedListType; // dateRange mode에서 클릭하여 첫번째 선택된 날짜
 
   var dateRangeClickedDate = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(''); // dateRange mode에서 클릭한번 후 커서에 따라 날짜를 마우스오버하는 경우 dynamic argument로 이벤트명 설정
 
@@ -20682,7 +20753,7 @@ var calendar_uses_useEvent = function useEvent(param) {
    */
 
   var setCalendarPageInfo = function setCalendarPageInfo(calendarType, dateTime) {
-    var calendarPageInfo = calendarType === 'expanded' ? expandedCalendarPageInfo : mainCalendarPageInfo;
+    var pageInfo = calendarPageInfo[calendarType];
     var year = dateTime.year,
         month = dateTime.month,
         hour = dateTime.hour,
@@ -20690,23 +20761,23 @@ var calendar_uses_useEvent = function useEvent(param) {
         sec = dateTime.sec;
 
     if (year) {
-      calendarPageInfo.year = year;
+      pageInfo.year = year;
     }
 
     if (month) {
-      calendarPageInfo.month = month;
+      pageInfo.month = month;
     }
 
     if (hour) {
-      calendarPageInfo.hour = hour;
+      pageInfo.hour = hour;
     }
 
     if (min) {
-      calendarPageInfo.min = min;
+      pageInfo.min = min;
     }
 
     if (sec) {
-      calendarPageInfo.sec = sec;
+      pageInfo.sec = sec;
     }
   };
   /**
@@ -20728,36 +20799,48 @@ var calendar_uses_useEvent = function useEvent(param) {
       setCalendarDate(changeCalendarType);
     });
   };
+  /**
+   * Calendar 의 year 이동시키기 (이전, 이후)
+   * @param calendarType
+   * @param type
+   */
+
+
+  var moveYear = function moveYear(calendarType, type) {
+    var increaseValue = selectedListType[calendarType] === LIST_TYPE.MONTH ? 1 : 20;
+    var offset = type === 'prev' ? -increaseValue : increaseValue;
+    var minYear = new Date(MIN_DATE_MS).getFullYear();
+    var movedYear = calendarPageInfo[calendarType].year + offset;
+    calendarPageInfo[calendarType].year = movedYear < minYear ? minYear : movedYear;
+  };
   /**
    * Calendar 의 Month 이동시키기 (이전, 이후)
-   * expandedCalendar가 존재하는 경우(mode: timeRange)
-   *  mainCalendar의 date는 expandedCalendar의 날짜를 넘길 수 없다
-   *  mainCalendar year, month < expandedCalendar year, month
    * @param calendarType - 달력 종류 ('main'|'expanded')
    * @param type - {'prev'|'next'}
    */
 
 
   var moveMonth = function moveMonth(calendarType, type) {
-    var isDateRangeMode = ['dateRange', 'dateTimeRange'].includes(props.mode);
-    var calendarPageInfo = mainCalendarPageInfo;
-
-    if (isDateRangeMode) {
-      calendarPageInfo = calendarType === 'expanded' ? expandedCalendarPageInfo : mainCalendarPageInfo;
-    }
+    var pageInfo = calendarPageInfo[calendarType];
 
     if (type === 'prev') {
-      if (calendarPageInfo.month === 1) {
-        calendarPageInfo.year -= 1;
-        calendarPageInfo.month = 12;
+      var minYear = new Date(MIN_DATE_MS).getFullYear();
+
+      if (pageInfo.year === minYear && pageInfo.month === 1) {
+        return;
+      }
+
+      if (pageInfo.month === 1) {
+        pageInfo.year -= 1;
+        pageInfo.month = 12;
       } else {
-        calendarPageInfo.month -= 1;
+        pageInfo.month -= 1;
       }
-    } else if (calendarPageInfo.month === 12) {
-      calendarPageInfo.year += 1;
-      calendarPageInfo.month = 1;
+    } else if (pageInfo.month === 12) {
+      pageInfo.year += 1;
+      pageInfo.month = 1;
     } else {
-      calendarPageInfo.month += 1;
+      pageInfo.month += 1;
     }
   };
   /**
@@ -20768,8 +20851,71 @@ var calendar_uses_useEvent = function useEvent(param) {
 
 
   var clickPrevNextBtn = function clickPrevNextBtn(calendarType, type) {
-    moveMonth(calendarType, type);
-    setCalendarDate(calendarType);
+    var listType = selectedListType[calendarType];
+
+    switch (listType) {
+      case LIST_TYPE.DATE:
+        {
+          moveMonth(calendarType, type);
+          setCalendarDate(calendarType);
+          break;
+        }
+
+      case LIST_TYPE.MONTH:
+        moveYear(calendarType, type);
+        setCalendarMonth(calendarType);
+        break;
+
+      case LIST_TYPE.YEAR:
+        moveYear(calendarType, type);
+        setCalendarYear(calendarType);
+        break;
+
+      default:
+        break;
+    }
+  };
+  /**
+   * Calendar Header 의 year, month 버튼 클릭 이벤트
+   * @param calendarType - 달력 종류 ('main'|'expanded')
+   * @param type - 클릭 정보 ('year' | 'month')
+   */
+
+
+  var clickYearMonthBtn = function clickYearMonthBtn(calendarType, type) {
+    if (type === LIST_TYPE.DATE) {
+      setCalendarDate(calendarType);
+    } else if (type === LIST_TYPE.MONTH) {
+      setCalendarMonth(calendarType);
+    } else if (type === LIST_TYPE.YEAR) {
+      setCalendarYear(calendarType);
+    }
+
+    selectedListType[calendarType] = type;
+  };
+  /**
+   * Calendar year, month 클릭 이벤트
+   * @param calendarType - 달력 종류 ('main'|'expanded')
+   * @param clickedInfo - 클릭 정보
+   */
+
+
+  var clickYearMonth = function clickYearMonth(calendarType, clickedInfo) {
+    var value = clickedInfo.value;
+
+    if (clickedInfo.disabled) {
+      return;
+    }
+
+    if (selectedListType[calendarType] === LIST_TYPE.YEAR) {
+      calendarPageInfo[calendarType].year = value;
+      selectedListType[calendarType] = LIST_TYPE.MONTH;
+      setCalendarMonth(calendarType);
+    } else {
+      calendarPageInfo[calendarType].month = value;
+      selectedListType[calendarType] = LIST_TYPE.DATE;
+      setCalendarDate(calendarType);
+    }
   };
   /**
    * Calendar Date 일자 클릭 이벤트
@@ -20802,47 +20948,30 @@ var calendar_uses_useEvent = function useEvent(param) {
 
     if (disabledDate && disabledDate(new Date(CURR_DATE_STR)) && !isExistCurrDate) {
       return;
+    } else if (!disabledDate && ['dateRange', 'dateTimeRange'].includes(props.mode) && compareFromAndToDateTime(props.mode, calendarType, CURR_DATE_STR, selectedValue.value)) {
+      return;
     }
 
-    var calendarPageInfo = calendarType === 'main' ? mainCalendarPageInfo : expandedCalendarPageInfo;
-    var PREV_MONTH = (MONTH_CNT + calendarPageInfo.month - 1) % MONTH_CNT || MONTH_CNT;
-    var YEAR_OF_PREV_MONTH = calendarPageInfo.month === 1 ? calendarPageInfo.year - 1 : calendarPageInfo.year;
-    var NEXT_MONTH = (calendarPageInfo.month + 1) % MONTH_CNT || MONTH_CNT;
-    var YEAR_OF_NEXT_MONTH = calendarPageInfo.month === 12 ? calendarPageInfo.year + 1 : calendarPageInfo.year;
+    var pageInfo = calendarPageInfo[calendarType];
+    var PREV_MONTH = (MONTH_CNT + pageInfo.month - 1) % MONTH_CNT || MONTH_CNT;
+    var YEAR_OF_PREV_MONTH = pageInfo.month === 1 ? pageInfo.year - 1 : pageInfo.year;
+    var NEXT_MONTH = (pageInfo.month + 1) % MONTH_CNT || MONTH_CNT;
+    var YEAR_OF_NEXT_MONTH = pageInfo.month === 12 ? pageInfo.year + 1 : pageInfo.year;
 
     var moveDispCalendarMonth = function moveDispCalendarMonth() {
       if (monthType.includes('prev')) {
-        calendarPageInfo.year = YEAR_OF_PREV_MONTH;
-        calendarPageInfo.month = PREV_MONTH;
+        pageInfo.year = YEAR_OF_PREV_MONTH;
+        pageInfo.month = PREV_MONTH;
       } else if (monthType.includes('next')) {
-        calendarPageInfo.year = YEAR_OF_NEXT_MONTH;
-        calendarPageInfo.month = NEXT_MONTH;
-      }
-    };
-
-    var setRangeModeDateByIndex = function setRangeModeDateByIndex(currIndex, currDate) {
-      if (!disabledDate && compareFromAndToDateTime(props.mode, calendarType, currDate, selectedValue.value)) {
-        return;
+        pageInfo.year = YEAR_OF_NEXT_MONTH;
+        pageInfo.month = NEXT_MONTH;
       }
-
-      selectedValue.value[currIndex] = currDate;
-      moveDispCalendarMonth();
-      setCalendarPageInfo(calendarType, {
-        year: uses_getDateTimeInfoByType(currDate, 'year'),
-        month: uses_getDateTimeInfoByType(currDate, 'month'),
-        hour: Math.floor(uses_getDateTimeInfoByType(currDate, 'hour') / CELL_CNT_IN_ONE_PAGE) + 1,
-        min: Math.floor(uses_getDateTimeInfoByType(currDate, 'min') / CELL_CNT_IN_ONE_PAGE) + 1,
-        sec: Math.floor(uses_getDateTimeInfoByType(currDate, 'sec') / CELL_CNT_IN_ONE_PAGE) + 1
-      });
-      setCalendarDate(calendarType);
     };
 
     switch (props.mode) {
       case 'date':
-        selectedValue.value = CURR_DATE_STR;
-        moveDispCalendarMonth();
+        // moveDispCalendarMonth();
         emit('update:modelValue', CURR_DATE_STR);
-        setCalendarDate('main');
         break;
 
       case 'dateTime':
@@ -20851,21 +20980,9 @@ var calendar_uses_useEvent = function useEvent(param) {
 
           var isExistTime = !!((_selectedValue$value3 = selectedValue.value) !== null && _selectedValue$value3 !== void 0 && _selectedValue$value3.split(' ')[1]);
           var CURR_TIME_HMS = isExistTime ? (_selectedValue$value4 = selectedValue.value) === null || _selectedValue$value4 === void 0 ? void 0 : _selectedValue$value4.split(' ')[1] : '00:00:00';
-          selectedValue.value = getChangedValueByTimeFormat(timeFormat, "".concat(CURR_DATE_STR, " ").concat(CURR_TIME_HMS));
-          moveDispCalendarMonth();
-          emit('update:modelValue', selectedValue.value);
-          setCalendarDate('main');
-
-          if (!isExistTime) {
-            var currTime = selectedValue.value.split(' ')[1].split(':');
-            setCalendarPageInfo('main', {
-              hour: Math.floor(currTime[0] / CELL_CNT_IN_ONE_PAGE) + 1,
-              min: Math.floor(currTime[1] / CELL_CNT_IN_ONE_PAGE) + 1,
-              sec: Math.floor(currTime[2] / CELL_CNT_IN_ONE_PAGE) + 1
-            });
-            setHmsTime();
-          }
+          var changedValueByTimeFormat = getChangedValueByTimeFormat(timeFormat, "".concat(CURR_DATE_STR, " ").concat(CURR_TIME_HMS)); // moveDispCalendarMonth();
 
+          emit('update:modelValue', changedValueByTimeFormat);
           break;
         }
 
@@ -20925,21 +21042,24 @@ var calendar_uses_useEvent = function useEvent(param) {
 
       case 'dateRange':
         {
+          var changedValue = _toConsumableArray(selectedValue.value);
+
           if (!selectedValue.value.length) {
-            selectedValue.value.push(CURR_DATE_STR);
-            selectedValue.value.push(CURR_DATE_STR);
-            updateCalendarPage(selectedValue.value);
+            changedValue = [CURR_DATE_STR, CURR_DATE_STR];
           } else {
-            setRangeModeDateByIndex(calendarType !== 'main' | 0, CURR_DATE_STR);
+            var currIndex = +(calendarType === 'expanded');
+            changedValue[currIndex] = CURR_DATE_STR;
           }
 
-          emit('update:modelValue', _toConsumableArray(selectedValue.value));
+          emit('update:modelValue', changedValue);
           break;
         }
 
       case 'dateTimeRange':
         {
-          if (!selectedValue.value.length) {
+          var _changedValue = _toConsumableArray(selectedValue.value);
+
+          if (!_changedValue.length) {
             var fromDate = "".concat(CURR_DATE_STR, " 00:00:00");
             var toDate = "".concat(CURR_DATE_STR, " 00:00:00");
 
@@ -20948,27 +21068,24 @@ var calendar_uses_useEvent = function useEvent(param) {
               toDate = getChangedValueByTimeFormat(timeFormat[1], toDate);
             }
 
-            selectedValue.value.push(fromDate);
-            selectedValue.value.push(toDate);
-            updateCalendarPage(selectedValue.value);
-            setHmsTime();
+            _changedValue = [fromDate, toDate];
           } else {
-            var _selectedValue$value$2;
+            var _changedValue$_currIn;
 
-            var currIndex = calendarType !== 'main' | 0;
+            var _currIndex = +(calendarType === 'expanded');
 
-            var _CURR_TIME_HMS = ((_selectedValue$value$2 = selectedValue.value[currIndex]) === null || _selectedValue$value$2 === void 0 ? void 0 : _selectedValue$value$2.split(' ')[1]) || '00:00:00';
+            var _CURR_TIME_HMS = ((_changedValue$_currIn = _changedValue[_currIndex]) === null || _changedValue$_currIn === void 0 ? void 0 : _changedValue$_currIn.split(' ')[1]) || '00:00:00';
 
             var currDate = "".concat(CURR_DATE_STR, " ").concat(_CURR_TIME_HMS);
 
             if (timeFormat && timeFormat.length) {
-              currDate = getChangedValueByTimeFormat(timeFormat[currIndex], currDate);
+              currDate = getChangedValueByTimeFormat(timeFormat[_currIndex], currDate);
             }
 
-            setRangeModeDateByIndex(currIndex, currDate);
+            _changedValue[_currIndex] = currDate;
           }
 
-          emit('update:modelValue', _toConsumableArray(selectedValue.value));
+          emit('update:modelValue', _changedValue);
           break;
         }
 
@@ -20989,29 +21106,29 @@ var calendar_uses_useEvent = function useEvent(param) {
       return;
     }
 
-    var calendarPageInfo = calendarType === 'expanded' ? expandedCalendarPageInfo : mainCalendarPageInfo;
+    var pageInfo = calendarPageInfo[calendarType];
     var FIRST_PAGE = 1;
     var HOUR_MAX_PAGE = 2;
     var MINUTE_MAX_PAGE = 5;
     var SECOND_MAX_PAGE = 5;
 
     if (timeType === 'hour') {
-      if (arrow === 'down' && calendarPageInfo.hour < HOUR_MAX_PAGE) {
-        calendarPageInfo.hour++;
-      } else if (arrow === 'up' && calendarPageInfo.hour > FIRST_PAGE) {
-        calendarPageInfo.hour--;
+      if (arrow === 'down' && pageInfo.hour < HOUR_MAX_PAGE) {
+        pageInfo.hour++;
+      } else if (arrow === 'up' && pageInfo.hour > FIRST_PAGE) {
+        pageInfo.hour--;
       }
     } else if (timeType === 'min') {
-      if (arrow === 'down' && calendarPageInfo.min < MINUTE_MAX_PAGE) {
-        calendarPageInfo.min++;
-      } else if (arrow === 'up' && calendarPageInfo.min > FIRST_PAGE) {
-        calendarPageInfo.min--;
+      if (arrow === 'down' && pageInfo.min < MINUTE_MAX_PAGE) {
+        pageInfo.min++;
+      } else if (arrow === 'up' && pageInfo.min > FIRST_PAGE) {
+        pageInfo.min--;
       }
     } else if (timeType === 'sec') {
-      if (arrow === 'down' && calendarPageInfo.sec < SECOND_MAX_PAGE) {
-        calendarPageInfo.sec++;
-      } else if (arrow === 'up' && calendarPageInfo.sec > FIRST_PAGE) {
-        calendarPageInfo.sec--;
+      if (arrow === 'down' && pageInfo.sec < SECOND_MAX_PAGE) {
+        pageInfo.sec++;
+      } else if (arrow === 'up' && pageInfo.sec > FIRST_PAGE) {
+        pageInfo.sec--;
       }
     }
   };
@@ -21031,9 +21148,9 @@ var calendar_uses_useEvent = function useEvent(param) {
       return;
     }
 
-    var calendarPageInfo = calendarType === 'expanded' ? expandedCalendarPageInfo : mainCalendarPageInfo;
-    var timeInfo = calendarType === 'main' ? mainTimeTableInfo : expandedTimeTableInfo;
-    var currPage = calendarPageInfo[timeType] - 1;
+    var pageInfo = calendarPageInfo[calendarType];
+    var timeInfo = calendarTimeTableInfo[calendarType];
+    var currPage = pageInfo[timeType] - 1;
     var currRowIdx = i - 1;
     var currColIdx = j - 1;
     var clickedNum = currPage * CELL_CNT_IN_ONE_PAGE + currRowIdx * CELL_CNT_IN_ONE_ROW + currColIdx;
@@ -21082,31 +21199,34 @@ var calendar_uses_useEvent = function useEvent(param) {
     };
 
     if (props.mode === 'dateTime') {
+      var changedValue;
+
       if (!props.modelValue) {
         EXIST_MODEL = false;
-        selectedValue.value = getChangedValueByTimeFormat(timeFormat, getTimeValueByType());
-        emit('update:modelValue', selectedValue.value);
+        changedValue = getChangedValueByTimeFormat(timeFormat, getTimeValueByType());
       } else {
-        selectedValue.value = getChangedValueByTimeFormat(timeFormat, getChangedValue(props.modelValue));
-        emit('update:modelValue', selectedValue.value);
+        changedValue = getChangedValueByTimeFormat(timeFormat, getChangedValue(props.modelValue));
       }
 
-      valueListByUpdatePage.push(selectedValue.value);
+      emit('update:modelValue', changedValue);
+      valueListByUpdatePage.push(changedValue);
     } else {
       var index = calendarType !== 'main' | 0;
 
+      var _changedValue2 = _toConsumableArray(selectedValue.value);
+
       if (!props.modelValue.length) {
         var timeValue = getTimeValueByType();
-        selectedValue.value = [timeValue, timeValue];
+        _changedValue2 = [timeValue, timeValue];
 
         if (timeFormat && timeFormat.length) {
-          selectedValue.value = _toConsumableArray(selectedValue.value.map(function (v, idx) {
+          _changedValue2 = _toConsumableArray(_changedValue2.map(function (v, idx) {
             return getChangedValueByTimeFormat(timeFormat[idx], v);
           }));
         }
 
         EXIST_MODEL = false;
-        valueListByUpdatePage = selectedValue.value;
+        valueListByUpdatePage = _changedValue2;
       } else {
         var currDateTime = getChangedValue(props.modelValue[index]);
 
@@ -21114,10 +21234,10 @@ var calendar_uses_useEvent = function useEvent(param) {
           currDateTime = getChangedValueByTimeFormat(timeFormat[index], currDateTime);
         }
 
-        selectedValue.value[index] = currDateTime;
+        _changedValue2[index] = currDateTime;
       }
 
-      emit('update:modelValue', _toConsumableArray(selectedValue.value));
+      emit('update:modelValue', _changedValue2);
     }
 
     setHmsTime(); // dateTime의 v-model값이 없는 경우 time area를 클릭하였을 때 date의 값은 today로 세팅
@@ -21134,8 +21254,7 @@ var calendar_uses_useEvent = function useEvent(param) {
 
 
   var wheelMonth = function wheelMonth(calendarType, e) {
-    moveMonth(calendarType, e.deltaY > 0 ? 'next' : 'prev');
-    setCalendarDate(calendarType);
+    clickPrevNextBtn(calendarType, e.deltaY > 0 ? 'next' : 'prev');
   };
   /**
    * Wheel up or wheel down In Calendar Time(HMS) area
@@ -21169,10 +21288,10 @@ var calendar_uses_useEvent = function useEvent(param) {
     var isNext = target.classList.contains('next');
 
     if (target.classList.length > 0 && !isDisabled) {
-      var calendarPageInfo = calendarType === 'main' ? mainCalendarPageInfo : expandedCalendarPageInfo;
+      var pageInfo = calendarPageInfo[calendarType];
       var yearMonth = {
-        year: +calendarPageInfo.year,
-        month: +calendarPageInfo.month,
+        year: +pageInfo.year,
+        month: +pageInfo.month,
         date: e.target.innerText
       }; // 달력 내 이전달, 다음달 일자의 경우 연, 월 보정
 
@@ -21211,6 +21330,10 @@ var calendar_uses_useEvent = function useEvent(param) {
     var disabledDate = props.options.disabledDate;
 
     if (isRangeMode) {
+      var _selectedValue$value5 = _slicedToArray(selectedValue.value, 2),
+          fromDate = _selectedValue$value5[0],
+          toDate = _selectedValue$value5[1];
+
       var disabledFromDate = disabledDate,
           disabledToDate = disabledDate;
 
@@ -21221,9 +21344,9 @@ var calendar_uses_useEvent = function useEvent(param) {
         disabledToDate = _disabledDate[1];
       }
 
-      if (currValue[0] && disabledFromDate && disabledFromDate(new Date(currValue[0]))) {
+      if (currValue[0] && currValue[0] !== fromDate && disabledFromDate && disabledFromDate(new Date(currValue[0]))) {
         return true;
-      } else if (currValue[1] && disabledToDate && disabledToDate(new Date(currValue[1]))) {
+      } else if (currValue[1] && currValue[1] !== toDate && disabledToDate && disabledToDate(new Date(currValue[1]))) {
         return true;
       } else if (!disabledDate && compareFromAndToDateTime(props.mode, 'main', currValue[0], currValue)) {
         return true;
@@ -21263,11 +21386,15 @@ var calendar_uses_useEvent = function useEvent(param) {
 
       updateCalendarPage(updateValue);
       setHmsTime();
+    } else if (props.mode === 'date') {
+      updateCalendarPage([curr]);
     }
   });
   return {
+    clickYearMonthBtn: clickYearMonthBtn,
     clickPrevNextBtn: clickPrevNextBtn,
     clickDate: clickDate,
+    clickYearMonth: clickYearMonth,
     clickHmsBtn: clickHmsBtn,
     clickTime: clickTime,
     wheelMonth: wheelMonth,
@@ -21350,37 +21477,43 @@ var calendar_uses_useEvent = function useEvent(param) {
   },
   setup: function setup(props) {
     var _useModel = calendar_uses_useModel(),
+        calendarList = _useModel.calendarList,
         selectedValue = _useModel.selectedValue,
-        mainCalendarPageInfo = _useModel.mainCalendarPageInfo,
-        expandedCalendarPageInfo = _useModel.expandedCalendarPageInfo,
-        mainCalendarMonth = _useModel.mainCalendarMonth,
-        expandedCalendarMonth = _useModel.expandedCalendarMonth,
-        dayOfTheWeekList = _useModel.dayOfTheWeekList;
+        calendarPageInfo = _useModel.calendarPageInfo,
+        calendarMonth = _useModel.calendarMonth,
+        dayOfTheWeekList = _useModel.dayOfTheWeekList,
+        calendarYearRangeInfo = _useModel.calendarYearRangeInfo,
+        selectedListType = _useModel.selectedListType;
 
     var _useCalendarDate = uses_useCalendarDate({
       selectedValue: selectedValue,
-      mainCalendarPageInfo: mainCalendarPageInfo,
-      expandedCalendarPageInfo: expandedCalendarPageInfo
+      calendarPageInfo: calendarPageInfo,
+      calendarYearRangeInfo: calendarYearRangeInfo
     }),
-        mainCalendarTableInfo = _useCalendarDate.mainCalendarTableInfo,
-        expandedCalendarTableInfo = _useCalendarDate.expandedCalendarTableInfo,
-        mainTimeTableInfo = _useCalendarDate.mainTimeTableInfo,
-        expandedTimeTableInfo = _useCalendarDate.expandedTimeTableInfo,
+        calendarTableInfo = _useCalendarDate.calendarTableInfo,
+        calendarMonthTableInfo = _useCalendarDate.calendarMonthTableInfo,
+        calendarYearTableInfo = _useCalendarDate.calendarYearTableInfo,
+        calendarTimeTableInfo = _useCalendarDate.calendarTimeTableInfo,
         setCalendarDate = _useCalendarDate.setCalendarDate,
+        setCalendarMonth = _useCalendarDate.setCalendarMonth,
+        setCalendarYear = _useCalendarDate.setCalendarYear,
         setHmsTime = _useCalendarDate.setHmsTime,
         getTimeInfo = _useCalendarDate.getTimeInfo;
 
     var _useEvent = calendar_uses_useEvent({
       selectedValue: selectedValue,
-      mainCalendarPageInfo: mainCalendarPageInfo,
-      expandedCalendarPageInfo: expandedCalendarPageInfo,
-      mainTimeTableInfo: mainTimeTableInfo,
-      expandedTimeTableInfo: expandedTimeTableInfo,
+      calendarPageInfo: calendarPageInfo,
+      calendarTimeTableInfo: calendarTimeTableInfo,
+      selectedListType: selectedListType,
       setCalendarDate: setCalendarDate,
+      setCalendarMonth: setCalendarMonth,
+      setCalendarYear: setCalendarYear,
       setHmsTime: setHmsTime
     }),
         clickPrevNextBtn = _useEvent.clickPrevNextBtn,
+        clickYearMonthBtn = _useEvent.clickYearMonthBtn,
         clickDate = _useEvent.clickDate,
+        clickYearMonth = _useEvent.clickYearMonth,
         clickHmsBtn = _useEvent.clickHmsBtn,
         clickTime = _useEvent.clickTime,
         wheelMonth = _useEvent.wheelMonth,
@@ -21400,19 +21533,22 @@ var calendar_uses_useEvent = function useEvent(param) {
     }
 
     return {
+      calendarList: calendarList,
       selectedValue: selectedValue,
-      mainCalendarPageInfo: mainCalendarPageInfo,
-      expandedCalendarPageInfo: expandedCalendarPageInfo,
-      mainCalendarMonth: mainCalendarMonth,
-      expandedCalendarMonth: expandedCalendarMonth,
+      calendarPageInfo: calendarPageInfo,
+      calendarMonth: calendarMonth,
       dayOfTheWeekList: dayOfTheWeekList,
-      mainCalendarTableInfo: mainCalendarTableInfo,
-      expandedCalendarTableInfo: expandedCalendarTableInfo,
-      mainTimeTableInfo: mainTimeTableInfo,
-      expandedTimeTableInfo: expandedTimeTableInfo,
+      calendarYearRangeInfo: calendarYearRangeInfo,
+      selectedListType: selectedListType,
+      calendarTableInfo: calendarTableInfo,
+      calendarMonthTableInfo: calendarMonthTableInfo,
+      calendarYearTableInfo: calendarYearTableInfo,
+      calendarTimeTableInfo: calendarTimeTableInfo,
       getTimeInfo: getTimeInfo,
       clickPrevNextBtn: clickPrevNextBtn,
+      clickYearMonthBtn: clickYearMonthBtn,
       clickDate: clickDate,
+      clickYearMonth: clickYearMonth,
       clickHmsBtn: clickHmsBtn,
       clickTime: clickTime,
       wheelMonth: wheelMonth,
@@ -21425,8 +21561,8 @@ var calendar_uses_useEvent = function useEvent(param) {
 });
 // CONCATENATED MODULE: ./src/components/calendar/Calendar.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/calendar/Calendar.vue?vue&type=style&index=0&id=05101d63&lang=scss
-var Calendarvue_type_style_index_0_id_05101d63_lang_scss = __webpack_require__("7d3a");
+// EXTERNAL MODULE: ./src/components/calendar/Calendar.vue?vue&type=style&index=0&id=9e5fff8c&lang=scss
+var Calendarvue_type_style_index_0_id_9e5fff8c_lang_scss = __webpack_require__("e4f4");
 
 // CONCATENATED MODULE: ./src/components/calendar/Calendar.vue
 
@@ -21436,7 +21572,7 @@ var Calendarvue_type_style_index_0_id_05101d63_lang_scss = __webpack_require__("
 
 
 
-const Calendar_exports_ = /*#__PURE__*/exportHelper_default()(Calendarvue_type_script_lang_js, [['render',Calendarvue_type_template_id_05101d63_render]])
+const Calendar_exports_ = /*#__PURE__*/exportHelper_default()(Calendarvue_type_script_lang_js, [['render',Calendarvue_type_template_id_9e5fff8c_render]])
 
 /* harmony default export */ var Calendar = (Calendar_exports_);
 // CONCATENATED MODULE: ./src/components/calendar/index.js
@@ -21520,7 +21656,7 @@ var DatePickervue_type_template_id_72fd682a_hoisted_15 = {
   key: 0,
   class: "ev-date-picker-dropbox__button-layout"
 };
-var DatePickervue_type_template_id_72fd682a_hoisted_16 = {
+var _hoisted_16 = {
   key: 1,
   class: "ev-date-picker-dropbox__divider"
 };
@@ -21671,7 +21807,7 @@ function DatePickervue_type_template_id_72fd682a_render(_ctx, _cache, $props, $s
       }), 128))];
     }),
     _: 1
-  }))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), $setup.usedShortcuts.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", DatePickervue_type_template_id_72fd682a_hoisted_16)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+  }))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), $setup.usedShortcuts.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", _hoisted_16)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
     class: {
       'ev-date-picker-dropbox__calendar': $setup.usedShortcuts.length
     }
@@ -21707,6 +21843,7 @@ function DatePickervue_type_template_id_72fd682a_render(_ctx, _cache, $props, $s
 
 
 
+
 var uses_dateReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/);
 var uses_dateTimeReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]/);
 var datePicker_uses_useModel = function useModel() {
@@ -21717,7 +21854,28 @@ var datePicker_uses_useModel = function useModel() {
       emit = _getCurrentInstance.emit;
 
   var timeFormat = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.timeFormat;
-  var isRangeMode = ['dateTimeRange', 'dateRange', 'dateMulti'].includes(props.mode); // Select 컴포넌트의 v-model 값
+  var isRangeMode = ['dateTimeRange', 'dateRange', 'dateMulti'].includes(props.mode);
+  /**
+   * time 이 포함된 mode 인 경우 timeFormat 에 따라 값 변경
+   * @returns {string | string[]}
+   */
+
+  var getDateTimeValue = function getDateTimeValue(currValue) {
+    var dateTimeValue;
+
+    if (props.mode === 'dateTime') {
+      dateTimeValue = getChangedValueByTimeFormat(timeFormat, currValue);
+    } else if (props.modelValue.length) {
+      var _timeFormat = _slicedToArray(timeFormat, 2),
+          fromTimeFormat = _timeFormat[0],
+          toTimeFormat = _timeFormat[1];
+
+      dateTimeValue = [getChangedValueByTimeFormat(fromTimeFormat, currValue[0]), getChangedValueByTimeFormat(toTimeFormat, currValue[1])];
+    }
+
+    return dateTimeValue;
+  }; // Select 컴포넌트의 v-model 값
+
 
   var mv = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])({
     get: function get() {
@@ -21726,21 +21884,18 @@ var datePicker_uses_useModel = function useModel() {
       }
 
       if (['dateTime', 'dateTimeRange'].includes(props.mode) && timeFormat) {
-        if (props.mode === 'dateTime') {
-          return getChangedValueByTimeFormat(timeFormat, props.modelValue);
-        } else if (props.modelValue.length) {
-          var _timeFormat = _slicedToArray(timeFormat, 2),
-              fromTimeFormat = _timeFormat[0],
-              toTimeFormat = _timeFormat[1];
-
-          return [getChangedValueByTimeFormat(fromTimeFormat, props.modelValue[0]), getChangedValueByTimeFormat(toTimeFormat, props.modelValue[1])];
-        }
+        return getDateTimeValue(props.modelValue);
       }
 
       return isRangeMode ? _toConsumableArray(props.modelValue) : props.modelValue;
     },
     set: function set(value) {
-      return emit('update:modelValue', value);
+      if (['dateTime', 'dateTimeRange'].includes(props.mode) && timeFormat) {
+        emit('update:modelValue', getDateTimeValue(value));
+        return;
+      }
+
+      emit('update:modelValue', value);
     }
   }); // mode: 'date' or 'dateTime'시 input box의 입력된 텍스트값
 
@@ -21766,37 +21921,51 @@ var datePicker_uses_useModel = function useModel() {
   } else {
     currentValue = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(isRangeMode ? _toConsumableArray(props.modelValue) : props.modelValue);
   }
+  /**
+   * Datepicker valid 체크
+   * @param curr
+   */
+
 
   var validateValue = function validateValue(curr) {
-    var dateRule = function dateRule(date) {
-      return date.length === 10 && uses_dateReg.exec(date);
+    var dateRule = function dateRule(targetDate) {
+      return !!(targetDate.length === 10 && uses_dateReg.exec(targetDate));
+    };
+
+    var dateTimeRule = function dateTimeRule(targetDate) {
+      return !!(targetDate.length === 19 && uses_dateTimeReg.exec(targetDate));
     };
 
-    var dateTimeRule = function dateTimeRule(date) {
-      return date.length === 19 && uses_dateTimeReg.exec(date);
+    var checkValidDate = function checkValidDate(targetDate) {
+      var dateValue = targetDate.split(' ')[0];
+      var year = +dateValue.split('-')[0];
+      var month = +dateValue.split('-')[1];
+      var date = +dateValue.split('-')[2];
+      var lastDateOfMonth = getLastDateOfMonth(year, month);
+      return +date <= lastDateOfMonth && year >= new Date(0).getFullYear();
     };
 
     var isValid = true;
 
-    if (props.mode === 'date' && !dateRule(curr)) {
-      isValid = false;
-    } else if (props.mode === 'dateTime' && !dateTimeRule(curr)) {
-      isValid = false;
-    } else if (props.mode === 'dateRange' && curr.some(function (value) {
-      return !dateRule(value);
-    })) {
-      isValid = false;
-    } else if (props.mode === 'dateTimeRange' && curr.some(function (value) {
-      return !dateTimeRule(value);
-    })) {
-      isValid = false;
+    if (props.mode === 'date') {
+      isValid = dateRule(curr) && checkValidDate(curr);
+    } else if (props.mode === 'dateTime') {
+      isValid = dateTimeRule(curr) && checkValidDate(curr);
+    } else if (props.mode === 'dateRange') {
+      isValid = curr.every(function (value) {
+        return dateRule(value) && checkValidDate(value);
+      });
+    } else if (props.mode === 'dateTimeRange') {
+      isValid = curr.every(function (value) {
+        return dateTimeRule(value) && checkValidDate(value);
+      });
     }
 
     if (isValid) {
       mv.value = isRangeMode ? _toConsumableArray(curr) : curr;
-    } else {
-      currentValue.value = isRangeMode ? _toConsumableArray(mv.value) : mv.value;
     }
+
+    currentValue.value = isRangeMode ? _toConsumableArray(mv.value) : mv.value;
   }; // clearable 모드일 때, 항목(mv) 전체 삭제 아이콘 존재여부
 
 
@@ -27160,23 +27329,23 @@ var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_16 = /*#
   class: "form-row-title wide"
 }, "Value", -1);
 
-var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_17 = {
+var _hoisted_17 = {
   class: "form-row-contents"
 };
 
-var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+var _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_138f0008_scoped_true_hoisted_19 = {
+var _hoisted_19 = {
   class: "confirm-wrap"
 };
 
-var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Save ");
+var _hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Save ");
 
-var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Cancel ");
+var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Cancel ");
 
-var grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Apply ");
+var _hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" Apply ");
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
@@ -27230,7 +27399,7 @@ var grid_filter_windowvue_type_template_id_138f0008_scoped_true_render = /*#__PU
         }),
         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_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, {
+      }, 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", _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;
@@ -27241,12 +27410,12 @@ var grid_filter_windowvue_type_template_id_138f0008_scoped_true_render = /*#__PU
         type: "text",
         placeholder: "Please enter the content",
         class: "item-input"
-      }, 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, {
+      }, null, 8, ["modelValue"])])])])]), _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", _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_138f0008_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_20];
+          return [_hoisted_20];
         }),
         _: 1
       }, 8, ["onClick"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_button, {
@@ -27254,7 +27423,7 @@ var grid_filter_windowvue_type_template_id_138f0008_scoped_true_render = /*#__PU
         onClick: $setup.onCancel
       }, {
         default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_21];
+          return [_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, {
@@ -27281,7 +27450,7 @@ var grid_filter_windowvue_type_template_id_138f0008_scoped_true_render = /*#__PU
         onClick: $setup.onApply
       }, {
         default: grid_filter_windowvue_type_template_id_138f0008_scoped_true_withId(function () {
-          return [grid_filter_windowvue_type_template_id_138f0008_scoped_true_hoisted_22];
+          return [_hoisted_22];
         }),
         _: 1
       }, 8, ["onClick"])])])];
@@ -31033,18 +31202,20 @@ 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=0627777b
+// 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=b33e4442
 
-var Chartvue_type_template_id_0627777b_hoisted_1 = {
+var Chartvue_type_template_id_b33e4442_hoisted_1 = {
   key: 0,
   ref: "evChartToolbarRef"
 };
-function Chartvue_type_template_id_0627777b_render(_ctx, _cache, $props, $setup, $data, $options) {
+function Chartvue_type_template_id_b33e4442_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _$setup$zoomOptions$t;
+
   var _component_ev_chart_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-chart-toolbar");
 
   var _directive_resize = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("resize");
 
-  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, [$setup.zoomOptions.toolbar.show && !$setup.injectIsChartGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Chartvue_type_template_id_0627777b_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
+  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, [(_$setup$zoomOptions$t = $setup.zoomOptions.toolbar) !== null && _$setup$zoomOptions$t !== void 0 && _$setup$zoomOptions$t.show && !$setup.injectIsChartGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Chartvue_type_template_id_b33e4442_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
     toolbar: $setup.zoomOptions.toolbar,
     onOnClickToolbar: $setup.onClickToolbar
   }, null, 8, ["toolbar", "onOnClickToolbar"])], 512)) : 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", {
@@ -31053,7 +31224,7 @@ function Chartvue_type_template_id_0627777b_render(_ctx, _cache, $props, $setup,
     class: "ev-chart"
   }, null, 4), [[_directive_resize, $setup.onResize]])], 64);
 }
-// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=0627777b
+// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=b33e4442
 
 // CONCATENATED MODULE: ./node_modules/lodash-es/_arrayEach.js
 /**
@@ -33431,7 +33602,7 @@ var modules = {
         }
       }
 
-      itemPosition = dataIndex.map(function (idx) {
+      itemPosition = dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.map(function (idx) {
         var _dataInfo$xp, _dataInfo$yp;
 
         var dataInfo = _this6.getDataByValues(firShowSeriesID, idx);
@@ -33553,7 +33724,7 @@ var modules = {
    *
    * @returns {object} clicked series id
    */
-  getSeriesIdByPosition: function getSeriesIdByPosition(offset) {
+  getSeriesInfoByPosition: function getSeriesInfoByPosition(offset) {
     var _this7 = this;
 
     var _offset = _slicedToArray(offset, 2),
@@ -33734,11 +33905,12 @@ var modules = {
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y
+   * @param {string | null}  targetAxis    target Axis Location ('xAxis', 'yAxis' , null)
    *
    * @returns {object} clicked label information
    */
-  getLabelInfoByPosition: function getLabelInfoByPosition(offset) {
-    var _Object$values$sort$, _Object$values$sort$2, _scale$labels;
+  getLabelInfoByPosition: function getLabelInfoByPosition(offset, targetAxis) {
+    var _Object$values$sort$, _Object$values$sort$2, _scale, _scale$labels;
 
     var _offset2 = _slicedToArray(offset, 2),
         x = _offset2[0],
@@ -33750,8 +33922,8 @@ var modules = {
       y1: this.chartRect.y1 + this.labelOffset.top,
       y2: this.chartRect.y2 - this.labelOffset.bottom
     };
-    var seiresList = this.data.series;
-    var pointSize = (_Object$values$sort$ = (_Object$values$sort$2 = Object.values(seiresList).sort(function (a, b) {
+    var seriesList = this.data.series;
+    var pointSize = (_Object$values$sort$ = (_Object$values$sort$2 = Object.values(seriesList).sort(function (a, b) {
       var _ref13, _b$pointSize;
 
       return (_ref13 = (_b$pointSize = b.pointSize) !== null && _b$pointSize !== void 0 ? _b$pointSize : 0 - a.pointSize) !== null && _ref13 !== void 0 ? _ref13 : 0;
@@ -33760,15 +33932,25 @@ var modules = {
     var _this$options = this.options,
         horizontal = _this$options.horizontal,
         selectLabel = _this$options.selectLabel;
-    var scale = horizontal ? this.axesY[0] : this.axesX[0];
+    var scale;
+
+    if (targetAxis === 'xAxis') {
+      scale = this.axesX[0];
+    } else if (targetAxis === 'yAxis') {
+      scale = this.axesY[0];
+    } else {
+      scale = 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 !== null && scale !== void 0 && (_scale$labels = scale.labels) !== null && _scale$labels !== void 0 && _scale$labels.length) {
+    if ((_scale = scale) !== null && _scale !== void 0 && (_scale$labels = _scale.labels) !== null && _scale$labels !== void 0 && _scale$labels.length) {
       var labelGap = (endPoint - startPoint) / scale.labels.length;
-      var index = Math.floor(((horizontal ? y : x) - startPoint) / labelGap);
+      var isYAxis = targetAxis === 'yAxis' || horizontal;
+      var index = Math.floor(((isYAxis ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
       var _hitInfo$maxIndex;
@@ -37341,23 +37523,23 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
       this.size.h = yArea / this.labels.y.length;
 
       var getOpacity = function getOpacity(item, opacity, index) {
-        var selectLabelOption = selectLabel === null || selectLabel === void 0 ? void 0 : selectLabel.option;
-        var useSelectLabel = (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.use) && (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.useSeriesOpacity);
-        var selectItemOption = selectItem === null || selectItem === void 0 ? void 0 : selectItem.option;
-        var useSelectItem = (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.use) && (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.useSeriesOpacity);
-
         if (!legendHitInfo) {
-          var isDownplay = false;
-
-          if (useSelectItem) {
-            var _selectItem$selected;
-
-            isDownplay = (selectItem === null || selectItem === void 0 ? void 0 : selectItem.selected) && index !== (selectItem === null || selectItem === void 0 ? void 0 : (_selectItem$selected = selectItem.selected) === null || _selectItem$selected === void 0 ? void 0 : _selectItem$selected.dataIndex);
-          } else if (useSelectLabel) {
-            var _selectLabel$selected;
-
-            var selectedLabelList = selectLabel === null || selectLabel === void 0 ? void 0 : (_selectLabel$selected = selectLabel.selected) === null || _selectLabel$selected === void 0 ? void 0 : _selectLabel$selected.label;
-            isDownplay = selectedLabelList.length && !selectedLabelList.includes(_this2.isHorizontal ? item.y : item.x);
+          var _selectedLabel$label;
+
+          var isDownplay;
+          var selectedItemOpt = selectItem.option,
+              selectedItem = selectItem.selected;
+          var selectedLabelOpt = selectLabel.option,
+              selectedLabel = selectLabel.selected;
+          var isSelectedItem = truthy(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.dataIndex) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.dataIndex) > -1;
+          var isSelectedLabel = (selectedLabel === null || selectedLabel === void 0 ? void 0 : (_selectedLabel$label = selectedLabel.label) === null || _selectedLabel$label === void 0 ? void 0 : _selectedLabel$label.length) > 0;
+
+          if (isSelectedItem) {
+            isDownplay = selectedItemOpt.useSeriesOpacity ? index !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.dataIndex) : false;
+          } else if (isSelectedLabel) {
+            var _selectedLabel$label2;
+
+            isDownplay = selectedLabelOpt.useSeriesOpacity ? !(selectedLabel !== null && selectedLabel !== void 0 && (_selectedLabel$label2 = selectedLabel.label) !== null && _selectedLabel$label2 !== void 0 && _selectedLabel$label2.includes(_this2.getItemLabel(selectLabel, item))) : false;
           }
 
           return isDownplay ? 0.1 : 1;
@@ -37390,13 +37572,13 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
           ctx.save();
 
           if (show) {
-            var _selectItem$selected2;
+            var _selectItem$selected;
 
             ctx.fillStyle = helpers_util.colorStringToRgba(item.dataColor, itemOpacity);
             var borderOpt = _this2.stroke;
             var selectItemOption = selectItem === null || selectItem === void 0 ? void 0 : selectItem.option;
             var useSelectItem = (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.use) && (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.showBorder);
-            var isHit = index === (selectItem === null || selectItem === void 0 ? void 0 : (_selectItem$selected2 = selectItem.selected) === null || _selectItem$selected2 === void 0 ? void 0 : _selectItem$selected2.dataIndex);
+            var isHit = index === (selectItem === null || selectItem === void 0 ? void 0 : (_selectItem$selected = selectItem.selected) === null || _selectItem$selected === void 0 ? void 0 : _selectItem$selected.dataIndex);
 
             if (useSelectItem && isHit) {
               borderOpt = _objectSpread2({
@@ -37775,6 +37957,19 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
 
       return selectionRange;
     }
+  }, {
+    key: "getItemLabel",
+    value: function getItemLabel(selectLabel, item) {
+      var selectedLabelOpt = selectLabel.option,
+          selectedLabel = selectLabel.selected;
+      var targetLabel = this.isHorizontal ? item.y : item.x;
+
+      if (selectedLabelOpt !== null && selectedLabelOpt !== void 0 && selectedLabelOpt.useBothAxis && selectedLabel !== null && selectedLabel !== void 0 && selectedLabel.targetAxis) {
+        targetLabel = (selectedLabel === null || selectedLabel === void 0 ? void 0 : selectedLabel.targetAxis) === 'yAxis' ? item.y : item.x;
+      }
+
+      return targetLabel;
+    }
   }]);
 
   return HeatMap;
@@ -39222,16 +39417,18 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
     }
     /**
      * Draw axis
-     * @param {object} chartRect      min/max information
-     * @param {object} labelOffset    label offset information
-     * @param {object} stepInfo       label steps information
+     * @param {object} chartRect  min/max information
+     * @param {object} labelOffset  label offset information
+     * @param {object} stepInfo  label steps information
+     * @param {object} hitInfo  legend Hit Info
+     * @param {object} selectedLabelInfo Selected Label Info
      *
      * @returns {undefined}
      */
 
   }, {
     key: "draw",
-    value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
+    value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectedLabelInfo) {
       var _this$labelStyle,
           _this$plotBands,
           _this$plotLines,
@@ -39298,13 +39495,25 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         var index;
 
         for (index = 0; index < oriSteps; index += count) {
-          var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data, _selectLabelInfo$data2;
+          var _selectedLabelInfo$da, _selectedLabelInfo$da2;
 
           var item = this.labels[index];
           labelCenter = Math.round(startPoint + labelGap * index);
           linePosition = labelCenter + aliasPixel;
           labelText = this.getLabelFormat(item, maxWidth);
-          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(index));
+          var _this$options = this.options,
+              selectLabelOpt = _this$options.selectLabel,
+              selectItemOpt = _this$options.selectItem,
+              horizontal = _this$options.horizontal;
+          var targetAxis = void 0;
+
+          if (selectedLabelInfo !== null && selectedLabelInfo !== void 0 && selectedLabelInfo.targetAxis) {
+            targetAxis = (selectedLabelInfo === null || selectedLabelInfo === void 0 ? void 0 : selectedLabelInfo.targetAxis) === 'yAxis' ? 'y' : 'x';
+          } else {
+            targetAxis = horizontal ? 'y' : 'x';
+          }
+
+          var isBlurredLabel = (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.use) && (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.useLabelOpacity) && targetAxis === this.type && (selectedLabelInfo === null || selectedLabelInfo === void 0 ? void 0 : (_selectedLabelInfo$da = selectedLabelInfo.dataIndex) === null || _selectedLabelInfo$da === void 0 ? void 0 : _selectedLabelInfo$da.length) && !(selectedLabelInfo !== null && selectedLabelInfo !== void 0 && (_selectedLabelInfo$da2 = selectedLabelInfo.dataIndex) !== null && _selectedLabelInfo$da2 !== void 0 && _selectedLabelInfo$da2.includes(index));
           var labelColor = this.labelStyle.color;
           var defaultOpacity = 1;
 
@@ -39315,17 +39524,15 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
           ctx.fillStyle = helpers_util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
           if (this.type === 'x') {
-            var _this$options3, _this$options3$select, _this$options4;
-
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
             var xPoint = alignToGridLine ? labelCenter : labelCenter + labelGap / 2;
             ctx.fillText(labelText, xPoint, labelPoint);
 
-            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)) {
+            if (!isBlurredLabel && selectItemOpt !== null && selectItemOpt !== void 0 && selectItemOpt.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !horizontal) {
               var selectedLabel = hitInfo.label;
 
               if (selectedLabel === labelText) {
-                var _this$labelStyle2, _this$options5, _this$options5$select, _this$options5$select2, _this$options6, _this$options6$select, _this$options6$select2;
+                var _this$labelStyle2, _selectItemOpt$labelT, _selectItemOpt$labelT2;
 
                 var height = Math.round(ctx.measureText((_this$labelStyle2 = this.labelStyle) === null || _this$labelStyle2 === void 0 ? void 0 : _this$labelStyle2.fontSize).width);
                 helpers_util.showLabelTip({
@@ -39337,8 +39544,8 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
                   borderRadius: 2,
                   arrowSize: 3,
                   text: labelText,
-                  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
+                  backgroundColor: selectItemOpt === null || selectItemOpt === void 0 ? void 0 : (_selectItemOpt$labelT = selectItemOpt.labelTipStyle) === null || _selectItemOpt$labelT === void 0 ? void 0 : _selectItemOpt$labelT.backgroundColor,
+                  textColor: selectItemOpt === null || selectItemOpt === void 0 ? void 0 : (_selectItemOpt$labelT2 = selectItemOpt.labelTipStyle) === null || _selectItemOpt$labelT2 === void 0 ? void 0 : _selectItemOpt$labelT2.textColor
                 });
               }
             }
@@ -41797,6 +42004,127 @@ var plugins_legend_gradient_modules = {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.from-entries.js
 var es_object_from_entries = __webpack_require__("c1f9");
 
+// CONCATENATED MODULE: ./node_modules/lodash-es/_baseInRange.js
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var _baseInRange_nativeMax = Math.max,
+    _baseInRange_nativeMin = Math.min;
+
+/**
+ * The base implementation of `_.inRange` which doesn't coerce arguments.
+ *
+ * @private
+ * @param {number} number The number to check.
+ * @param {number} start The start of the range.
+ * @param {number} end The end of the range.
+ * @returns {boolean} Returns `true` if `number` is in the range, else `false`.
+ */
+function baseInRange(number, start, end) {
+  return number >= _baseInRange_nativeMin(start, end) && number < _baseInRange_nativeMax(start, end);
+}
+
+/* harmony default export */ var _baseInRange = (baseInRange);
+
+// CONCATENATED MODULE: ./node_modules/lodash-es/toFinite.js
+
+
+/** Used as references for various `Number` constants. */
+var toFinite_INFINITY = 1 / 0,
+    MAX_INTEGER = 1.7976931348623157e+308;
+
+/**
+ * Converts `value` to a finite number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.12.0
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {number} Returns the converted number.
+ * @example
+ *
+ * _.toFinite(3.2);
+ * // => 3.2
+ *
+ * _.toFinite(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toFinite(Infinity);
+ * // => 1.7976931348623157e+308
+ *
+ * _.toFinite('3.2');
+ * // => 3.2
+ */
+function toFinite(value) {
+  if (!value) {
+    return value === 0 ? value : 0;
+  }
+  value = lodash_es_toNumber(value);
+  if (value === toFinite_INFINITY || value === -toFinite_INFINITY) {
+    var sign = (value < 0 ? -1 : 1);
+    return sign * MAX_INTEGER;
+  }
+  return value === value ? value : 0;
+}
+
+/* harmony default export */ var lodash_es_toFinite = (toFinite);
+
+// CONCATENATED MODULE: ./node_modules/lodash-es/inRange.js
+
+
+
+
+/**
+ * Checks if `n` is between `start` and up to, but not including, `end`. If
+ * `end` is not specified, it's set to `start` with `start` then set to `0`.
+ * If `start` is greater than `end` the params are swapped to support
+ * negative ranges.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.3.0
+ * @category Number
+ * @param {number} number The number to check.
+ * @param {number} [start=0] The start of the range.
+ * @param {number} end The end of the range.
+ * @returns {boolean} Returns `true` if `number` is in the range, else `false`.
+ * @see _.range, _.rangeRight
+ * @example
+ *
+ * _.inRange(3, 2, 4);
+ * // => true
+ *
+ * _.inRange(4, 8);
+ * // => true
+ *
+ * _.inRange(4, 2);
+ * // => false
+ *
+ * _.inRange(2, 2);
+ * // => false
+ *
+ * _.inRange(1.2, 2);
+ * // => true
+ *
+ * _.inRange(5.2, 4);
+ * // => false
+ *
+ * _.inRange(-3, -2, -6);
+ * // => true
+ */
+function inRange(number, start, end) {
+  start = lodash_es_toFinite(start);
+  if (end === undefined) {
+    end = start;
+    start = 0;
+  } else {
+    end = lodash_es_toFinite(end);
+  }
+  number = lodash_es_toNumber(number);
+  return _baseInRange(number, start, end);
+}
+
+/* harmony default export */ var lodash_es_inRange = (inRange);
+
 // CONCATENATED MODULE: ./src/components/chart/plugins/plugins.interaction.js
 
 
@@ -41815,6 +42143,7 @@ var es_object_from_entries = __webpack_require__("c1f9");
 
 
 
+
 var plugins_interaction_modules = {
   /**
    * Hide legend components by manipulating css
@@ -41823,8 +42152,8 @@ var plugins_interaction_modules = {
    */
   createEventFunctions: function createEventFunctions() {
     var _this = this,
-        _this$options4,
-        _this$options4$toolti;
+        _this$options5,
+        _this$options5$toolti;
 
     /**
      * To show tooltip and item highlighting, add event listener on mousemove
@@ -41956,9 +42285,18 @@ var plugins_interaction_modules = {
         e: e
       };
 
-      if (_this.options.selectItem.use && _this.options.selectItem.useClick) {
-        var offset = _this.getMousePosition(e);
+      var offset = _this.getMousePosition(e);
 
+      var _this$options3 = _this.options,
+          chartType = _this$options3.type,
+          selectItemOpt = _this$options3.selectItem,
+          selectLabelOpt = _this$options3.selectLabel,
+          selectSeriesOpt = _this$options3.selectSeries;
+      var useSelectItem = (selectItemOpt === null || selectItemOpt === void 0 ? void 0 : selectItemOpt.use) && (selectItemOpt === null || selectItemOpt === void 0 ? void 0 : selectItemOpt.useClick);
+      var useSelectLabel = (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.use) && (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.useClick);
+      var useSelectSeries = (selectSeriesOpt === null || selectSeriesOpt === void 0 ? void 0 : selectSeriesOpt.use) && (selectSeriesOpt === null || selectSeriesOpt === void 0 ? void 0 : selectSeriesOpt.useClick);
+
+      var setSelectedItemInfo = function setSelectedItemInfo() {
         var hitInfo = _this.getItemByPosition(offset, false);
 
         args.label = hitInfo.label;
@@ -41967,35 +42305,114 @@ var plugins_interaction_modules = {
         args.dataIndex = hitInfo.maxIndex;
         args.acc = hitInfo.acc;
 
-        if (_this.options.type === 'heatMap') {
-          args.deselect = _this.setDeselectItem(hitInfo);
+        if (hitInfo !== null && hitInfo !== void 0 && hitInfo.sId) {
+          args.selected = {
+            eventTarget: 'item',
+            seriesId: _this.isDeselectItem(hitInfo) ? null : hitInfo.sId,
+            dataIndex: _this.isDeselectItem(hitInfo) ? null : hitInfo.maxIndex
+          };
         }
+      };
 
-        if (hitInfo.label !== null) {
-          _this.render(hitInfo);
-        }
-      } else if (_this.options.selectLabel.use && _this.options.selectLabel.useClick) {
-        var _offset = _this.getMousePosition(e);
+      var setSelectedLabelInfo = function setSelectedLabelInfo(targetAxis) {
+        var _this$getLabelInfoByP = _this.getLabelInfoByPosition(offset, targetAxis),
+            clickedLabelIndex = _this$getLabelInfoByP.labelIndex;
 
-        var clickedLabelInfo = _this.getLabelInfoByPosition(_offset);
+        var _this$regulateSelecte = _this.regulateSelectedLabelInfo(clickedLabelIndex, targetAxis),
+            dataIndexList = _this$regulateSelecte.dataIndex;
 
-        var selected = _this.selectLabel(clickedLabelInfo.labelIndex);
+        _this.defaultSelectInfo = _this.getSelectedLabelInfoWithLabelData(dataIndexList, targetAxis);
 
-        _this.renderWithSelected(selected.dataIndex);
+        if (targetAxis) {
+          _this.defaultSelectInfo.targetAxis = dataIndexList !== null && dataIndexList !== void 0 && dataIndexList.length ? targetAxis : null;
+        }
 
-        args.selected = lodash_es_cloneDeep(_this.defaultSelectInfo);
-      } else if (_this.options.selectSeries.use && _this.options.selectSeries.useClick) {
-        var _offset2 = _this.getMousePosition(e);
+        args.selected = _objectSpread2({
+          eventTarget: 'label'
+        }, lodash_es_cloneDeep(_this.defaultSelectInfo));
+      };
 
-        var _hitInfo = _this.getSeriesIdByPosition(_offset2);
+      var setSelectedSeriesInfo = function setSelectedSeriesInfo() {
+        var hitInfo = _this.getSeriesInfoByPosition(offset);
 
-        if (_hitInfo.sId !== null) {
-          var _selected = _this.selectSeries(_hitInfo.sId);
+        if (hitInfo.sId !== null) {
+          var allSelectedList = _this.updateSelectedSeriesInfo(hitInfo.sId);
 
-          _this.renderWithSelected(_selected.seriesId);
+          _this.defaultSelectInfo.seriesId = allSelectedList.seriesId;
+          args.selected = _objectSpread2({
+            eventTarget: 'series'
+          }, lodash_es_cloneDeep(_this.defaultSelectInfo));
         }
+      };
+
+      switch (chartType) {
+        case 'line':
+          {
+            if (useSelectItem) {
+              setSelectedItemInfo();
+            } else if (useSelectLabel) {
+              setSelectedLabelInfo();
+            } else if (useSelectSeries) {
+              setSelectedSeriesInfo();
+            }
+
+            break;
+          }
+
+        case 'bar':
+          {
+            if (useSelectItem) {
+              setSelectedItemInfo();
+            } else if (useSelectLabel) {
+              setSelectedLabelInfo();
+            }
+
+            break;
+          }
 
-        args.selected = lodash_es_cloneDeep(_this.defaultSelectInfo);
+        case 'heatMap':
+          {
+            if (useSelectItem && useSelectLabel) {
+              var useBothAxis = selectLabelOpt.useBothAxis;
+
+              var location = _this.getClickedLocation(offset);
+
+              if (location === 'chartBackground') {
+                _this.clearSelectedLabelInfo();
+
+                args.deselected = {
+                  eventTarget: 'label'
+                };
+                setSelectedItemInfo();
+              } else if (location === 'yAxis' || location === 'xAxis') {
+                _this.clearSelectedItemInfo();
+
+                args.deselected = {
+                  eventTarget: 'item'
+                };
+                setSelectedLabelInfo(useBothAxis ? location : null);
+              }
+            } else if (useSelectItem) {
+              setSelectedItemInfo();
+            } else if (useSelectLabel) {
+              setSelectedLabelInfo();
+            }
+
+            break;
+          }
+
+        case 'pie':
+        case 'scatter':
+          {
+            if (useSelectItem) {
+              setSelectedItemInfo();
+            }
+
+            break;
+          }
+
+        default:
+          break;
       }
 
       if (typeof _this.listeners.click === 'function') {
@@ -42012,9 +42429,9 @@ var plugins_interaction_modules = {
 
 
     this.onMouseDown = function (e) {
-      var _this$options3 = _this.options,
-          dragSelection = _this$options3.dragSelection,
-          type = _this$options3.type;
+      var _this$options4 = _this.options,
+          dragSelection = _this$options4.dragSelection,
+          type = _this$options4.type;
 
       if (dragSelection.use && (type === 'scatter' || type === 'line' || type === 'heatMap')) {
         _this.removeSelectionArea();
@@ -42032,7 +42449,7 @@ var plugins_interaction_modules = {
       }
     };
 
-    if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && (_this$options4$toolti = _this$options4.tooltip) !== null && _this$options4$toolti !== void 0 && _this$options4$toolti.useScrollbar) {
+    if ((_this$options5 = this.options) !== null && _this$options5 !== void 0 && (_this$options5$toolti = _this$options5.tooltip) !== null && _this$options5$toolti !== void 0 && _this$options5$toolti.useScrollbar) {
       this.overlayCanvas.addEventListener('wheel', this.onWheel, {
         passive: false
       });
@@ -42173,7 +42590,7 @@ var plugins_interaction_modules = {
         var args = {
           e: e,
           data: _this2.findSelectedItems(dragInfo),
-          range: type === 'heatMap' ? _this2.getSelectionRangeForHeatMap(dragInfo) : _this2.getSelectionRage(dragInfo)
+          range: type === 'heatMap' ? _this2.getSelectionRangeForHeatMap(dragInfo) : _this2.getSelectionRange(dragInfo)
         };
         _this2.dragInfoBackup = lodash_es_defaultsDeep({}, dragInfo);
 
@@ -42450,11 +42867,12 @@ var plugins_interaction_modules = {
   },
 
   /**
-   *
+   * Select Item
+   * Set backup data that selected item information
+   * render chart
    * @param targetInfo {object}  '{ dataIndex: number, seriesID: string }'
-   * @param chartType {string}  'bar', 'line', 'pie', 'scatter'
+   * @param chartType {string}  'bar', 'line', 'pie', 'scatter', 'heatMap'
    *
-   * @returns {boolean}
    */
   selectItemByData: function selectItemByData(targetInfo, chartType) {
     this.defaultSelectItemInfo = targetInfo;
@@ -42466,116 +42884,122 @@ var plugins_interaction_modules = {
         sId: targetInfo.seriesID
       };
     } else {
-      if (isNaN(targetInfo === null || targetInfo === void 0 ? void 0 : targetInfo.dataIndex)) {
-        return false;
-      }
-
-      foundInfo = this.getItem(targetInfo, false);
-    }
-
-    if (foundInfo) {
-      this.render(foundInfo);
-    } else {
-      return false;
+      foundInfo = isNaN(targetInfo === null || targetInfo === void 0 ? void 0 : targetInfo.dataIndex) ? null : this.getItem(targetInfo, false);
     }
 
-    return true;
+    this.render(foundInfo);
   },
 
   /**
-   * render after selected label or selected series
-   * @param indexList {array}  '[0, 1 ...]'
+   * Select Label
+   * set backup data that selected label information list
+   * render chart
+   * @param labelIndexList {number[]}
+   * @param targetAxis {string | null}
+   * @returns {boolean}
    */
-  renderWithSelected: function renderWithSelected(list) {
-    if (this.options.selectLabel.use) {
-      this.defaultSelectInfo.dataIndex = list;
-    } else if (this.options.selectSeries.use) {
-      this.defaultSelectInfo.seriesId = list;
-    }
+  selectLabelByData: function selectLabelByData(labelIndexList, targetAxis) {
+    this.defaultSelectInfo = this.getSelectedLabelInfoWithLabelData(labelIndexList, targetAxis);
+    this.render();
+  },
 
-    this.initSelectedInfo();
+  /**
+   * Select Series
+   * set backup data that selected series information list
+   * render chart
+   * @param seriesIdList {number[]}  '
+   * @returns {boolean}
+   */
+  selectSeriesByData: function selectSeriesByData(seriesIdList) {
+    this.defaultSelectInfo.seriesId = seriesIdList;
     this.render();
   },
 
   /**
-   * init defaultSelectInfo object.
-   * - at selectLabel using: set each series data and label text
-   * - at selectSeries using: set series state
+   * Get each series data and label text
+   * @param labelIndexList{number[]}
+   * @param targetAxis{string | null}
+   * @returns {object[]}
    */
-  initSelectedInfo: function initSelectedInfo() {
+  getSelectedLabelInfoWithLabelData: function getSelectedLabelInfoWithLabelData(labelIndexList, targetAxis) {
     var _this3 = this;
 
-    if (this.options.selectLabel.use) {
-      if (!this.defaultSelectInfo) {
-        this.defaultSelectInfo = {
-          dataIndex: []
-        };
-      }
+    var _this$options6 = this.options,
+        selectLabelOpt = _this$options6.selectLabel,
+        chartType = _this$options6.type,
+        horizontal = _this$options6.horizontal;
+    var result = lodash_es_cloneDeep(this.defaultSelectInfo);
+    result.dataIndex = labelIndexList;
 
-      if (this.options.type === 'heatMap') {
-        this.initSelectedInfoForHeatMap();
-        return;
-      }
+    switch (chartType) {
+      case 'bar':
+      case 'line':
+        {
+          result.dataIndex.splice(selectLabelOpt.limit);
+          result.label = result.dataIndex.map(function (i) {
+            return _this3.data.labels[i];
+          });
+          var dataEntries = Object.entries(this.data.data);
+          result.data = result.dataIndex.map(function (labelIdx) {
+            return Object.fromEntries(dataEntries.map(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 2),
+                  sId = _ref4[0],
+                  data = _ref4[1];
+
+              return [sId, data[labelIdx]];
+            }));
+          });
+          break;
+        }
 
-      var limit = this.options.selectLabel.limit;
-      var infoObj = this.defaultSelectInfo;
-      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 (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-              sId = _ref4[0],
-              data = _ref4[1];
-
-          return [sId, data[labelIdx]];
-        }));
-      });
-    } else if (this.options.selectSeries.use) {
-      if (!this.defaultSelectInfo) {
-        this.defaultSelectInfo = {
-          seriesId: []
-        };
-      }
-    }
-  },
+      case 'heatMap':
+        {
+          var _this$options$selectL = this.options.selectLabel,
+              limit = _this$options$selectL.limit,
+              useBothAxis = _this$options$selectL.useBothAxis;
+          result.dataIndex.splice(limit);
+          var targetAxisDirection;
+
+          if (useBothAxis) {
+            targetAxisDirection = targetAxis === 'yAxis' ? 'y' : 'x';
+          } else {
+            targetAxisDirection = horizontal ? 'y' : 'x';
+          }
 
-  /**
-   * init defaultSelectInfo object for HeatMap.
-   * - at selectLabel using: set each series data and label text
-   */
-  initSelectedInfoForHeatMap: function initSelectedInfoForHeatMap() {
-    var _this4 = this;
+          result.label = result.dataIndex.map(function (i) {
+            return _this3.data.labels[targetAxisDirection][i];
+          });
+          var dataValues = Object.values(this.data.data)[0];
+          result.data = dataValues.filter(function (_ref5) {
+            var x = _ref5.x,
+                y = _ref5.y;
+            return result.label.includes(targetAxisDirection === 'y' ? y : x);
+          });
+          break;
+        }
 
-    var limit = this.options.selectLabel.limit;
-    var isHorizontal = this.options.horizontal;
-    var infoObj = this.defaultSelectInfo;
-    infoObj.dataIndex.splice(limit);
-    var targetLabel = isHorizontal ? 'y' : 'x';
-    infoObj.label = infoObj.dataIndex.map(function (i) {
-      return _this4.data.labels[targetLabel][i];
-    });
-    var dataValues = Object.values(this.data.data)[0];
-    infoObj.data = dataValues.filter(function (_ref5) {
-      var x = _ref5.x,
-          y = _ref5.y;
-      return infoObj.label.includes(isHorizontal ? y : x);
-    });
+      default:
+        break;
+    }
+
+    return result;
   },
 
   /**
    * Add or delete selected label index, according to policy and option
-   * (set each series data and label text)
-   * @param labelIndex {array}  '[0, 1 ...]'
+   * @param labelIndex {number}
+   * @param targetAxis {string | null}
+   * @returns after {number[]}  '[0, 1 ...]' result Label index List
    */
-  selectLabel: function selectLabel(labelIndex) {
-    var _this$options$selectL, _this$options5, _this$defaultSelectIn;
+  regulateSelectedLabelInfo: function regulateSelectedLabelInfo(labelIndex, targetAxis) {
+    var _this$options$selectL2, _this$options7, _this$defaultSelectIn;
 
-    var option = (_this$options$selectL = (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.selectLabel) !== null && _this$options$selectL !== void 0 ? _this$options$selectL : {};
-    var before = (_this$defaultSelectIn = this.defaultSelectInfo) !== null && _this$defaultSelectIn !== void 0 ? _this$defaultSelectIn : {
-      dataIndex: []
+    var option = (_this$options$selectL2 = (_this$options7 = this.options) === null || _this$options7 === void 0 ? void 0 : _this$options7.selectLabel) !== null && _this$options$selectL2 !== void 0 ? _this$options$selectL2 : {};
+    var before = ((_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.targetAxis) === targetAxis ? _objectSpread2(_objectSpread2({}, this.defaultSelectInfo), {}, {
+      targetAxis: targetAxis
+    }) : {
+      dataIndex: [],
+      targetAxis: targetAxis
     };
     var after = lodash_es_cloneDeep(before);
 
@@ -42596,10 +43020,16 @@ var plugins_interaction_modules = {
 
     return after;
   },
-  selectSeries: function selectSeries(seriesId) {
-    var _this$options$selectS, _this$options6, _this$defaultSelectIn2;
 
-    var option = (_this$options$selectS = (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.selectSeries) !== null && _this$options$selectS !== void 0 ? _this$options$selectS : {};
+  /**
+   * Add or delete selected series Index,according to policy and option
+   * @param seriesId {number}
+   * @returns after {number[]}  '[0, 1 ...]' result series Id List
+   */
+  updateSelectedSeriesInfo: function updateSelectedSeriesInfo(seriesId) {
+    var _this$options$selectS, _this$options8, _this$defaultSelectIn2;
+
+    var option = (_this$options$selectS = (_this$options8 = this.options) === null || _this$options8 === void 0 ? void 0 : _this$options8.selectSeries) !== null && _this$options$selectS !== void 0 ? _this$options$selectS : {};
     var before = (_this$defaultSelectIn2 = this.defaultSelectInfo) !== null && _this$defaultSelectIn2 !== void 0 ? _this$defaultSelectIn2 : {
       seriesId: []
     };
@@ -42660,7 +43090,7 @@ var plugins_interaction_modules = {
    *                 object.range: coordinate-based range in graph
    * @returns {object}
    */
-  getSelectionRage: function getSelectionRage(_ref6) {
+  getSelectionRange: function getSelectionRange(_ref6) {
     var xsp = _ref6.xsp,
         ysp = _ref6.ysp,
         width = _ref6.width,
@@ -42735,22 +43165,64 @@ var plugins_interaction_modules = {
       yMax: yMax !== null && yMax !== void 0 ? yMax : dataRangeY.graphMax
     };
   },
-  setDeselectItem: function setDeselectItem(hitInfo) {
-    var deselect = false;
 
-    if (this.options.selectItem.useDeselectItem) {
-      var _this$defaultSelectIt;
+  /**
+   * Check hitInfo is deselected Item through re-click
+   * @param hitInfo
+   * @returns {boolean}
+   */
+  isDeselectItem: function isDeselectItem(hitInfo) {
+    var _this$defaultSelectIt, _this$defaultSelectIt2;
 
-      var isEqualSelectItem = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) === ((_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.dataIndex);
+    return this.options.selectItem.useDeselectItem && (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) === ((_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.dataIndex) && (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.sId) === ((_this$defaultSelectIt2 = this.defaultSelectItemInfo) === null || _this$defaultSelectIt2 === void 0 ? void 0 : _this$defaultSelectIt2.seriesID) && !isNaN(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex);
+  },
 
-      if (!isNaN(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) && isEqualSelectItem) {
-        deselect = true;
-        this.defaultSelectItemInfo = null;
-        return true;
-      }
+  /**
+   * Get mouse click location (xAxis, yAxis, chartBackground, canvas)
+   * @param offset
+   * @returns {string}
+   */
+  getClickedLocation: function getClickedLocation(offset) {
+    var _offset = _slicedToArray(offset, 2),
+        offsetX = _offset[0],
+        offsetY = _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 xAxisStartPoint = aPos[this.axesX[0].units.rectStart];
+    var xAxisEndPoint = aPos[this.axesX[0].units.rectEnd];
+    var yAxisStartPoint = aPos[this.axesY[0].units.rectStart];
+    var yAxisEndPoint = aPos[this.axesY[0].units.rectEnd];
+
+    if (lodash_es_inRange(offsetX, this.chartRect.x1, aPos.x1) && lodash_es_inRange(offsetY, yAxisStartPoint, yAxisEndPoint)) {
+      return 'yAxis';
+    } else if (lodash_es_inRange(offsetX, xAxisStartPoint, xAxisEndPoint) && lodash_es_inRange(offsetY, aPos.y2, this.chartRect.y2)) {
+      return 'xAxis';
+    } else if (lodash_es_inRange(offsetX, aPos.x1, aPos.x2) && lodash_es_inRange(offsetY, aPos.y1, aPos.y2)) {
+      return 'chartBackground';
     }
 
-    return deselect;
+    return 'canvas';
+  },
+
+  /**
+   * Clear 'defaultSelectInfo'
+   */
+  clearSelectedLabelInfo: function clearSelectedLabelInfo() {
+    this.defaultSelectInfo = {
+      dataIndex: []
+    };
+  },
+
+  /**
+   * Clear 'defaultSelectItemInfo'
+   */
+  clearSelectedItemInfo: function clearSelectedItemInfo() {
+    this.defaultSelectItemInfo = null;
   }
 };
 /* harmony default export */ var plugins_interaction = (plugins_interaction_modules);
@@ -44531,7 +45003,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   _createClass(EvChart, [{
     key: "init",
     value: function init() {
-      var _this$initSelectedInf, _this$createEventFunc;
+      var _this$createEventFunc;
 
       var _this$data = this.data,
           series = _this$data.series,
@@ -44557,7 +45029,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
-      (_this$initSelectedInf = this.initSelectedInfo) === null || _this$initSelectedInf === void 0 ? void 0 : _this$initSelectedInf.call(this);
+      this.initDefaultSelectInfo();
       this.drawChart();
 
       if (tooltip.use) {
@@ -44602,7 +45074,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * To draw canvas chart, it processes several sequential jobs
-     * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
+     * @param {any} [hitInfo=undefined]    from mousemove callback (object or object[] of undefined)
      *
      * @returns {undefined}
      */
@@ -44657,6 +45129,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           option: selectSeries,
           selected: this.defaultSelectInfo
         },
+        selectItem: {
+          option: selectItem,
+          selected: this.defaultSelectItemInfo
+        },
         overlayCtx: this.overlayCtx,
         isBrush: !!brush,
         displayOverflow: displayOverflow
@@ -44691,22 +45167,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               {
                 var _legendHitInfo = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
 
-                var selectInfo = void 0;
-                var defaultSelectInfo = this.defaultSelectItemInfo;
-
-                if (defaultSelectInfo !== null && defaultSelectInfo !== void 0 && defaultSelectInfo.dataIndex || (defaultSelectInfo === null || defaultSelectInfo === void 0 ? void 0 : defaultSelectInfo.dataIndex) === 0) {
-                  selectInfo = _objectSpread2({}, defaultSelectInfo);
-                } else {
-                  selectInfo = null;
-                }
-
                 series.draw(_objectSpread2({
-                  legendHitInfo: _legendHitInfo,
-                  selectInfo: selectInfo,
-                  selectItem: {
-                    option: selectItem,
-                    selected: selectInfo
-                  }
+                  legendHitInfo: _legendHitInfo
                 }, opt));
                 break;
               }
@@ -44739,7 +45201,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               {
                 var _this$lastHitInfo, _this$defaultSelectIt;
 
-                var _selectInfo = (_this$lastHitInfo = this.lastHitInfo) !== null && _this$lastHitInfo !== void 0 ? _this$lastHitInfo : {
+                var selectInfo = (_this$lastHitInfo = this.lastHitInfo) !== null && _this$lastHitInfo !== void 0 ? _this$lastHitInfo : {
                   sId: (_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.seriesID
                 };
 
@@ -44747,12 +45209,12 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
                 if (this.options.sunburst) {
                   this.drawSunburst({
-                    selectInfo: _selectInfo,
+                    selectInfo: selectInfo,
                     legendHitInfo: _legendHitInfo3
                   });
                 } else {
                   this.drawPie({
-                    selectInfo: _selectInfo,
+                    selectInfo: selectInfo,
                     legendHitInfo: _legendHitInfo3
                   });
                 }
@@ -44768,27 +45230,27 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               {
                 var _legendHitInfo4 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
 
-                var _selectInfo2 = void 0;
+                var _selectInfo = void 0;
 
                 if (selectItem.use && selectItem.useSeriesOpacity) {
                   var lastHitInfo = this.lastHitInfo;
-                  var _defaultSelectInfo = this.defaultSelectItemInfo;
+                  var defaultSelectInfo = this.defaultSelectItemInfo;
 
                   if (lastHitInfo !== null && lastHitInfo !== void 0 && lastHitInfo.maxIndex || (lastHitInfo === null || lastHitInfo === void 0 ? void 0 : lastHitInfo.maxIndex) === 0) {
-                    _selectInfo2 = {
+                    _selectInfo = {
                       seriesID: lastHitInfo.sId,
                       dataIndex: lastHitInfo.maxIndex
                     };
-                  } else if (_defaultSelectInfo !== null && _defaultSelectInfo !== void 0 && _defaultSelectInfo.dataIndex || (_defaultSelectInfo === null || _defaultSelectInfo === void 0 ? void 0 : _defaultSelectInfo.dataIndex) === 0) {
-                    _selectInfo2 = _objectSpread2({}, _defaultSelectInfo);
+                  } else if (defaultSelectInfo !== null && defaultSelectInfo !== void 0 && defaultSelectInfo.dataIndex || (defaultSelectInfo === null || defaultSelectInfo === void 0 ? void 0 : defaultSelectInfo.dataIndex) === 0) {
+                    _selectInfo = _objectSpread2({}, defaultSelectInfo);
                   } else {
-                    _selectInfo2 = null;
+                    _selectInfo = null;
                   }
                 }
 
                 series.draw(_objectSpread2({
                   legendHitInfo: _legendHitInfo4,
-                  selectInfo: _selectInfo2
+                  selectInfo: _selectInfo
                 }, opt));
                 break;
               }
@@ -45194,8 +45656,6 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(updateInfo) {
-      var _this$initSelectedInf2;
-
       var options = this.options;
       var data = this.data.data;
       var labels = this.data.labels;
@@ -45293,7 +45753,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', options.axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
-      (_this$initSelectedInf2 = this.initSelectedInfo) === null || _this$initSelectedInf2 === void 0 ? void 0 : _this$initSelectedInf2.call(this);
+      this.initDefaultSelectInfo();
       this.render(updateInfo === null || updateInfo === void 0 ? void 0 : updateInfo.hitInfo);
       var isDragMove = this.dragInfo && this.drawSelectionArea;
 
@@ -45469,6 +45929,42 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         this.tooltipDOM.style.display = 'none';
       }
     }
+    /**
+     * init defaultSelectInfo (for selectLabel, selectSeries options)
+     */
+
+  }, {
+    key: "initDefaultSelectInfo",
+    value: function initDefaultSelectInfo() {
+      var _this$options4 = this.options,
+          chartType = _this$options4.type,
+          selectLabel = _this$options4.selectLabel,
+          selectSeries = _this$options4.selectSeries;
+
+      if (selectLabel.use) {
+        var _this$defaultSelectIn2;
+
+        var targetAxis = null;
+
+        if (chartType === 'heatMap' && selectLabel !== null && selectLabel !== void 0 && selectLabel.useBothAxis) {
+          var _this$defaultSelectIn;
+
+          targetAxis = (_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.targetAxis;
+        }
+
+        this.defaultSelectInfo = !((_this$defaultSelectIn2 = this.defaultSelectInfo) !== null && _this$defaultSelectIn2 !== void 0 && _this$defaultSelectIn2.dataIndex) ? {
+          dataIndex: [],
+          label: [],
+          data: []
+        } : this.getSelectedLabelInfoWithLabelData(this.defaultSelectInfo.dataIndex, targetAxis);
+      }
+
+      if (selectSeries.use && !this.defaultSelectInfo) {
+        this.defaultSelectInfo = {
+          seriesId: []
+        };
+      }
+    }
   }]);
 
   return EvChart;
@@ -46038,7 +46534,6 @@ var chartZoom_core_EvChartZoom = /*#__PURE__*/function () {
 
 
 
-
 var DEFAULT_OPTIONS = {
   padding: {
     top: 20,
@@ -46197,7 +46692,8 @@ var DEFAULT_OPTIONS = {
       fontWeight: 400
     },
     showTextTip: false,
-    showIndicator: false
+    showIndicator: false,
+    useBothAxis: false
   },
   selectSeries: {
     use: false,
@@ -46262,7 +46758,7 @@ var DEFAULT_DATA = {
   labels: [],
   data: {}
 };
-var chart_uses_useModel = function useModel(selectedLabel) {
+var chart_uses_useModel = function useModel(injectGroupSelectedLabel) {
   var _props$selectedLabel;
 
   var _getCurrentInstance = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
@@ -46293,14 +46789,15 @@ var chart_uses_useModel = function useModel(selectedLabel) {
   };
 
   var selectItemInfo = lodash_es_cloneDeep(props.selectedItem);
-  var selectLabelInfo = lodash_es_cloneDeep((_props$selectedLabel = props.selectedLabel) !== null && _props$selectedLabel !== void 0 ? _props$selectedLabel : selectedLabel === null || selectedLabel === void 0 ? void 0 : selectedLabel.value);
+  var selectLabelInfo = lodash_es_cloneDeep((_props$selectedLabel = props.selectedLabel) !== null && _props$selectedLabel !== void 0 ? _props$selectedLabel : injectGroupSelectedLabel === null || injectGroupSelectedLabel === void 0 ? void 0 : injectGroupSelectedLabel.value);
   var selectSeriesInfo = lodash_es_cloneDeep(props.selectedSeries);
   var eventListeners = {
     click: function () {
       var _click = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
-        var _e$selected, _e$selected2;
+        var _e$selected, _e$deselected;
+
+        var _ref, seriesId, dataIndex, eventTarget, targetAxis, _ref2, deselectedEventTarget;
 
-        var selectedItem;
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -46309,42 +46806,59 @@ var chart_uses_useModel = function useModel(selectedLabel) {
                 return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])();
 
               case 2:
-                if (e.label) {
-                  selectedItem = {
-                    seriesID: e.seriesId,
-                    dataIndex: e.dataIndex
-                  };
-
-                  if ('deselect' in e) {
-                    if (e.deselect) {
-                      selectedItem = null;
-                    }
-
-                    delete e.deselect;
-                  }
+                _ref = (_e$selected = e === null || e === void 0 ? void 0 : e.selected) !== null && _e$selected !== void 0 ? _e$selected : {}, seriesId = _ref.seriesId, dataIndex = _ref.dataIndex, eventTarget = _ref.eventTarget, targetAxis = _ref.targetAxis;
+                _ref2 = (_e$deselected = e === null || e === void 0 ? void 0 : e.deselected) !== null && _e$deselected !== void 0 ? _e$deselected : {}, deselectedEventTarget = _ref2.eventTarget;
+                _context.t0 = eventTarget;
+                _context.next = _context.t0 === 'item' ? 7 : _context.t0 === 'label' ? 9 : _context.t0 === 'series' ? 11 : 13;
+                break;
 
-                  emit('update:selectedItem', selectedItem);
-                }
+              case 7:
+                if (seriesId !== null) {
+                  emit('update:selectedItem', {
+                    seriesID: seriesId,
+                    dataIndex: dataIndex
+                  });
 
-                if ((_e$selected = e.selected) !== null && _e$selected !== void 0 && _e$selected.dataIndex) {
-                  if (selectedLabel !== null && selectedLabel !== void 0 && selectedLabel.value) {
-                    selectedLabel.value.dataIndex = e.selected.dataIndex;
-                  } else {
+                  if (deselectedEventTarget === 'label') {
                     emit('update:selectedLabel', {
-                      dataIndex: e.selected.dataIndex
+                      dataIndex: []
                     });
                   }
+                } else {
+                  emit('update:selectedItem', null);
                 }
 
-                if ((_e$selected2 = e.selected) !== null && _e$selected2 !== void 0 && _e$selected2.seriesId) {
-                  emit('update:selectedSeries', {
-                    seriesId: e.selected.seriesId
+                return _context.abrupt("break", 14);
+
+              case 9:
+                if (injectGroupSelectedLabel !== null && injectGroupSelectedLabel !== void 0 && injectGroupSelectedLabel.value) {
+                  injectGroupSelectedLabel.value.dataIndex = dataIndex;
+                } else {
+                  emit('update:selectedLabel', {
+                    dataIndex: dataIndex,
+                    targetAxis: targetAxis
                   });
+
+                  if (deselectedEventTarget === 'item') {
+                    emit('update:selectedItem', null);
+                  }
                 }
 
+                return _context.abrupt("break", 14);
+
+              case 11:
+                emit('update:selectedSeries', {
+                  seriesId: seriesId
+                });
+                return _context.abrupt("break", 14);
+
+              case 13:
+                return _context.abrupt("break", 14);
+
+              case 14:
                 emit('click', e);
 
-              case 6:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -46445,13 +46959,12 @@ var uses_useWrapper = function useWrapper(options) {
     wrapperStyle: wrapperStyle
   };
 };
-var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, selectedLabelOrItem) {
-  var evChartWrapper = _ref.wrapper,
-      evChartGroupRef = _ref.evChartGroupRef;
+var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref3, selectedLabelOrItem, evChartPropsInGroup) {
+  var evChartWrapper = _ref3.wrapper,
+      evChartGroupRef = _ref3.evChartGroupRef;
 
   var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
       props = _getCurrentInstance2.props,
-      slots = _getCurrentInstance2.slots,
       emit = _getCurrentInstance2.emit;
 
   var isExecuteZoom = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(false);
@@ -46501,9 +47014,9 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
       } else {
         var _evChartClone$options;
 
-        var _ref2 = (_evChartClone$options = evChartClone.options[idx].dragSelection) !== null && _evChartClone$options !== void 0 ? _evChartClone$options : {},
-            originUseOption = _ref2.use,
-            originKeepDisplayOption = _ref2.keepDisplay;
+        var _ref4 = (_evChartClone$options = evChartClone.options[idx].dragSelection) !== null && _evChartClone$options !== void 0 ? _evChartClone$options : {},
+            originUseOption = _ref4.use,
+            originKeepDisplayOption = _ref4.keepDisplay;
 
         option.dragSelection = {
           use: !!originUseOption,
@@ -46514,27 +47027,17 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
   };
 
   var createEvChartZoom = function createEvChartZoom() {
-    if (evChartGroupRef) {
+    if (evChartGroupRef !== null && evChartGroupRef !== void 0 && evChartGroupRef.value) {
       evChartInfo.dom = evChartGroupRef.value.querySelectorAll('.ev-chart-container');
-      var chartIdx = 0;
 
       if (evChartInfo.dom.length) {
-        slots.default(evChartInfo.dom).forEach(function (_ref3) {
-          var type = _ref3.type,
-              evChartProps = _ref3.props;
-
-          if ((type === null || type === void 0 ? void 0 : type.name) === 'EvChart') {
-            var options = evChartProps.options,
-                data = evChartProps.data;
-            data.chartIdx = chartIdx;
-            chartIdx++;
-            evChartInfo.props.data.push(data);
-            evChartInfo.props.options.push(options);
-          } else if ((type === null || type === void 0 ? void 0 : type.name) === 'EvChartBrush') {
-            var _evChartProps$options, _evChartProps$options2;
-
-            brushChartIdx.value.push((_evChartProps$options = evChartProps === null || evChartProps === void 0 ? void 0 : (_evChartProps$options2 = evChartProps.options) === null || _evChartProps$options2 === void 0 ? void 0 : _evChartProps$options2.chartIdx) !== null && _evChartProps$options !== void 0 ? _evChartProps$options : 0);
-          }
+        evChartPropsInGroup.value.forEach(function (_ref5, idx) {
+          var data = _ref5.data,
+              options = _ref5.options;
+          data.chartIdx = idx;
+          evChartInfo.props.data.push(data);
+          evChartInfo.props.options.push(options);
+          brushChartIdx.value.push(idx);
         });
       }
     } else {
@@ -46656,13 +47159,13 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
 
   Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
     return [brushIdx.start, brushIdx.end];
-  }, function (_ref4, _ref5) {
-    var _ref6 = _slicedToArray(_ref4, 2),
-        curBrushStartIdx = _ref6[0],
-        curBrushEndIdx = _ref6[1];
+  }, function (_ref6, _ref7) {
+    var _ref8 = _slicedToArray(_ref6, 2),
+        curBrushStartIdx = _ref8[0],
+        curBrushEndIdx = _ref8[1];
 
-    var _ref7 = _slicedToArray(_ref5, 1),
-        prevBrushStartIdx = _ref7[0];
+    var _ref9 = _slicedToArray(_ref7, 1),
+        prevBrushStartIdx = _ref9[0];
 
     if (selectedLabelOrItem !== null && selectedLabelOrItem !== void 0 && selectedLabelOrItem.value) {
       if (typeof selectedLabelOrItem.value.dataIndex === 'number') {
@@ -46688,14 +47191,14 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
   });
   Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
     return [brushIdx.isUseButton, brushIdx.isUseScroll];
-  }, function (_ref8, _ref9) {
-    var _ref10 = _slicedToArray(_ref8, 2),
-        curIsUseButton = _ref10[0],
-        curIsUseScroll = _ref10[1];
+  }, function (_ref10, _ref11) {
+    var _ref12 = _slicedToArray(_ref10, 2),
+        curIsUseButton = _ref12[0],
+        curIsUseScroll = _ref12[1];
 
-    var _ref11 = _slicedToArray(_ref9, 2),
-        prevIsUseButton = _ref11[0],
-        prevIsUseScroll = _ref11[1];
+    var _ref13 = _slicedToArray(_ref11, 2),
+        prevIsUseButton = _ref13[0],
+        prevIsUseScroll = _ref13[1];
 
     if (prevIsUseButton && !curIsUseButton) {
       evChartZoom.setZoomAreaMemory(brushIdx.start, brushIdx.end);
@@ -46782,6 +47285,7 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
       start: 0,
       end: -1
     });
+    var injectEvChartPropsInGroup = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('evChartPropsInGroup', []);
 
     var _useModel = chart_uses_useModel(injectGroupSelectedLabel),
         eventListeners = _useModel.eventListeners,
@@ -46804,17 +47308,17 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
         wrapper = _useWrapper.wrapper,
         wrapperStyle = _useWrapper.wrapperStyle;
 
-    var _useZoomModel = uses_useZoomModel(normalizedOptions, {
+    var _ref = injectIsChartGroup ? {} : uses_useZoomModel(normalizedOptions, {
       wrapper: wrapper,
       evChartGroupRef: null
-    }, props.selectedLabel ? selectedLabel : selectedItem),
-        evChartZoomOptions = _useZoomModel.evChartZoomOptions,
-        evChartToolbarRef = _useZoomModel.evChartToolbarRef,
-        createEvChartZoom = _useZoomModel.createEvChartZoom,
-        setOptionsForUseZoom = _useZoomModel.setOptionsForUseZoom,
-        setDataForUseZoom = _useZoomModel.setDataForUseZoom,
-        controlZoomIdx = _useZoomModel.controlZoomIdx,
-        onClickToolbar = _useZoomModel.onClickToolbar;
+    }, props.selectedLabel ? selectedLabel : selectedItem, injectEvChartPropsInGroup),
+        evChartZoomOptions = _ref.evChartZoomOptions,
+        evChartToolbarRef = _ref.evChartToolbarRef,
+        createEvChartZoom = _ref.createEvChartZoom,
+        setOptionsForUseZoom = _ref.setOptionsForUseZoom,
+        setDataForUseZoom = _ref.setDataForUseZoom,
+        controlZoomIdx = _ref.controlZoomIdx,
+        onClickToolbar = _ref.onClickToolbar;
 
     var createChart = function createChart() {
       var selected;
@@ -46920,8 +47424,8 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
 
       return (_injectGroupSelectedL = injectGroupSelectedLabel === null || injectGroupSelectedLabel === void 0 ? void 0 : injectGroupSelectedLabel.value) !== null && _injectGroupSelectedL !== void 0 ? _injectGroupSelectedL : selectedLabel.value;
     }, function (newValue) {
-      if (newValue.dataIndex) {
-        evChart.renderWithSelected(newValue.dataIndex);
+      if (newValue !== null && newValue !== void 0 && newValue.dataIndex) {
+        evChart.selectLabelByData(newValue.dataIndex, newValue === null || newValue === void 0 ? void 0 : newValue.targetAxis);
       }
     }, {
       deep: true,
@@ -46931,7 +47435,7 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
       return props.selectedSeries;
     }, function (newValue) {
       if (newValue.seriesId) {
-        evChart.renderWithSelected(newValue.seriesId);
+        evChart.selectSeriesByData(newValue.seriesId);
       }
     }, {
       deep: true,
@@ -46941,10 +47445,10 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
     if (!injectIsChartGroup) {
       Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
         return [props.zoomStartIdx, props.zoomEndIdx];
-      }, function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            zoomStartIdx = _ref2[0],
-            zoomEndIdx = _ref2[1];
+      }, function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            zoomStartIdx = _ref3[0],
+            zoomEndIdx = _ref3[1];
 
         controlZoomIdx(zoomStartIdx, zoomEndIdx);
       });
@@ -46955,14 +47459,18 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              if (injectEvChartPropsInGroup !== null && injectEvChartPropsInGroup !== void 0 && injectEvChartPropsInGroup.value) {
+                injectEvChartPropsInGroup.value.push(props);
+              }
+
+              _context.next = 3;
               return createChart();
 
-            case 2:
-              _context.next = 4;
+            case 3:
+              _context.next = 5;
               return drawChart();
 
-            case 4:
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -46970,9 +47478,15 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
       }, _callee);
     })));
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeUnmount"])(function () {
+      var _injectEvChartPropsIn;
+
       if (evChart && 'destroy' in evChart) {
         evChart.destroy();
       }
+
+      if (injectEvChartPropsInGroup !== null && injectEvChartPropsInGroup !== void 0 && (_injectEvChartPropsIn = injectEvChartPropsInGroup.value) !== null && _injectEvChartPropsIn !== void 0 && _injectEvChartPropsIn.length) {
+        injectEvChartPropsInGroup.value.length = 0;
+      }
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onDeactivated"])(function () {
       if (evChart && 'hideTooltip' in evChart) {
@@ -47006,14 +47520,16 @@ var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, se
       injectIsChartGroup: injectIsChartGroup,
       onClickToolbar: onClickToolbar,
       normalizedOptions: normalizedOptions,
-      zoomOptions: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRef"])(evChartZoomOptions, 'zoom')
+      zoomOptions: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRef"])(evChartZoomOptions !== null && evChartZoomOptions !== void 0 ? evChartZoomOptions : {
+        zoom: {}
+      }, 'zoom')
     };
   }
 });
 // 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=0627777b&lang=scss
-var Chartvue_type_style_index_0_id_0627777b_lang_scss = __webpack_require__("74f8");
+// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=b33e4442&lang=scss
+var Chartvue_type_style_index_0_id_b33e4442_lang_scss = __webpack_require__("43f9");
 
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue
 
@@ -47023,7 +47539,7 @@ var Chartvue_type_style_index_0_id_0627777b_lang_scss = __webpack_require__("74f
 
 
 
-const Chart_exports_ = /*#__PURE__*/exportHelper_default()(Chartvue_type_script_lang_js, [['render',Chartvue_type_template_id_0627777b_render]])
+const Chart_exports_ = /*#__PURE__*/exportHelper_default()(Chartvue_type_script_lang_js, [['render',Chartvue_type_template_id_b33e4442_render]])
 
 /* harmony default export */ var Chart = (Chart_exports_);
 // CONCATENATED MODULE: ./src/components/chart/index.js
@@ -47037,33 +47553,33 @@ Chart.install = function (app) {
 };
 
 /* harmony default export */ var chart = (Chart);
-// 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/chartGroup/ChartGroup.vue?vue&type=template&id=2db10c44&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/chartGroup/ChartGroup.vue?vue&type=template&id=1f6971cd&scoped=true
 
 
-var ChartGroupvue_type_template_id_2db10c44_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-2db10c44");
+var ChartGroupvue_type_template_id_1f6971cd_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-1f6971cd");
 
-Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-2db10c44");
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-1f6971cd");
 
-var ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_1 = {
+var ChartGroupvue_type_template_id_1f6971cd_scoped_true_hoisted_1 = {
   key: 0,
   ref: "evChartToolbarRef"
 };
-var ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_2 = {
+var ChartGroupvue_type_template_id_1f6971cd_scoped_true_hoisted_2 = {
   ref: "evChartGroupRef",
   class: "ev-chart-group__wrapper"
 };
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
-var ChartGroupvue_type_template_id_2db10c44_scoped_true_render = /*#__PURE__*/ChartGroupvue_type_template_id_2db10c44_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+var ChartGroupvue_type_template_id_1f6971cd_scoped_true_render = /*#__PURE__*/ChartGroupvue_type_template_id_1f6971cd_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ev_chart_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-chart-toolbar");
 
-  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, [$setup.zoomOptions.toolbar.show ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
+  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, [$setup.zoomOptions.toolbar.show ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", ChartGroupvue_type_template_id_1f6971cd_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
     toolbar: $setup.zoomOptions.toolbar,
     onOnClickToolbar: $setup.onClickToolbar
-  }, null, 8, ["toolbar", "onOnClickToolbar"])], 512)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default")], 512)], 64);
+  }, null, 8, ["toolbar", "onOnClickToolbar"])], 512)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", ChartGroupvue_type_template_id_1f6971cd_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default")], 512)], 64);
 });
-// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=2db10c44&scoped=true
+// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=1f6971cd&scoped=true
 
 // CONCATENATED MODULE: ./src/components/chartGroup/uses.js
 
@@ -47103,6 +47619,7 @@ var uses_DEFAULT_OPTIONS = {
 var uses_useGroupModel = function useGroupModel() {
   var isExecuteZoom = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(false);
   var evChartGroupRef = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])();
+  var evChartPropsInGroup = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])([]);
   var brushSeries = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
     list: [],
     chartIdx: null
@@ -47116,7 +47633,8 @@ var uses_useGroupModel = function useGroupModel() {
     getNormalizedOptions: getNormalizedOptions,
     isExecuteZoom: isExecuteZoom,
     brushSeries: brushSeries,
-    evChartGroupRef: evChartGroupRef
+    evChartGroupRef: evChartGroupRef,
+    evChartPropsInGroup: evChartPropsInGroup
   };
 };
 // 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/chartGroup/ChartGroup.vue?vue&type=script&lang=js
@@ -47159,12 +47677,14 @@ var uses_useGroupModel = function useGroupModel() {
         getNormalizedOptions = _useGroupModel.getNormalizedOptions,
         isExecuteZoom = _useGroupModel.isExecuteZoom,
         brushSeries = _useGroupModel.brushSeries,
-        evChartGroupRef = _useGroupModel.evChartGroupRef;
+        evChartGroupRef = _useGroupModel.evChartGroupRef,
+        evChartPropsInGroup = _useGroupModel.evChartPropsInGroup;
 
     var normalizedOptions = getNormalizedOptions(props.options);
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('isExecuteZoom', isExecuteZoom);
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('isChartGroup', true);
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('brushSeries', brushSeries);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('evChartPropsInGroup', evChartPropsInGroup);
     var groupSelectedLabel = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])({
       get: function get() {
         return props.groupSelectedLabel;
@@ -47178,7 +47698,7 @@ var uses_useGroupModel = function useGroupModel() {
     var _useZoomModel = uses_useZoomModel(normalizedOptions, {
       wrapper: null,
       evChartGroupRef: evChartGroupRef
-    }, groupSelectedLabel),
+    }, groupSelectedLabel, evChartPropsInGroup),
         evChartZoomOptions = _useZoomModel.evChartZoomOptions,
         evChartInfo = _useZoomModel.evChartInfo,
         evChartToolbarRef = _useZoomModel.evChartToolbarRef,
@@ -47234,8 +47754,8 @@ var uses_useGroupModel = function useGroupModel() {
 });
 // CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=style&index=0&id=2db10c44&lang=scss&scoped=true
-var ChartGroupvue_type_style_index_0_id_2db10c44_lang_scss_scoped_true = __webpack_require__("7f2c");
+// EXTERNAL MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=style&index=0&id=1f6971cd&lang=scss&scoped=true
+var ChartGroupvue_type_style_index_0_id_1f6971cd_lang_scss_scoped_true = __webpack_require__("64a7");
 
 // CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue
 
@@ -47245,7 +47765,7 @@ var ChartGroupvue_type_style_index_0_id_2db10c44_lang_scss_scoped_true = __webpa
 
 
 
-const ChartGroup_exports_ = /*#__PURE__*/exportHelper_default()(ChartGroupvue_type_script_lang_js, [['render',ChartGroupvue_type_template_id_2db10c44_scoped_true_render],['__scopeId',"data-v-2db10c44"]])
+const ChartGroup_exports_ = /*#__PURE__*/exportHelper_default()(ChartGroupvue_type_script_lang_js, [['render',ChartGroupvue_type_template_id_1f6971cd_scoped_true_render],['__scopeId',"data-v-1f6971cd"]])
 
 /* harmony default export */ var ChartGroup = (ChartGroup_exports_);
 // CONCATENATED MODULE: ./src/components/chartGroup/index.js
@@ -47320,33 +47840,37 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   _createClass(EvChartBrush, [{
     key: "init",
     value: function init(isResize) {
+      var _this$evChartBrushRef;
+
       if (this.brushIdx.start > this.brushIdx.end) {
         this.removeBrushCanvas();
         return;
       }
 
-      var existedBrushCanvas = this.evChartBrushRef.value.querySelector('.brush-canvas');
+      if ((_this$evChartBrushRef = this.evChartBrushRef) !== null && _this$evChartBrushRef !== void 0 && _this$evChartBrushRef.value) {
+        var existedBrushCanvas = this.evChartBrushRef.value.querySelector('.brush-canvas');
 
-      if (!existedBrushCanvas) {
-        var brushCanvas = document.createElement('canvas');
-        brushCanvas.setAttribute('class', 'brush-canvas');
-        brushCanvas.setAttribute('style', 'display: block; z-index: 1;');
-        var evChartBrushContainer = this.evChartBrushRef.value.querySelector('.ev-chart-brush-container');
+        if (!existedBrushCanvas) {
+          var brushCanvas = document.createElement('canvas');
+          brushCanvas.setAttribute('class', 'brush-canvas');
+          brushCanvas.setAttribute('style', 'display: block; z-index: 1;');
+          var evChartBrushContainer = this.evChartBrushRef.value.querySelector('.ev-chart-brush-container');
 
-        if (evChartBrushContainer) {
-          this.brushCanvas = brushCanvas;
-          evChartBrushContainer.appendChild(brushCanvas);
-          this.evChartBrushContainer = evChartBrushContainer;
+          if (evChartBrushContainer) {
+            this.brushCanvas = brushCanvas;
+            evChartBrushContainer.appendChild(brushCanvas);
+            this.evChartBrushContainer = evChartBrushContainer;
+            this.drawBrushRect({
+              brushCanvas: brushCanvas
+            });
+            this.addEvent(brushCanvas);
+          }
+        } else {
           this.drawBrushRect({
-            brushCanvas: brushCanvas
+            brushCanvas: existedBrushCanvas,
+            isResize: isResize
           });
-          this.addEvent(brushCanvas);
         }
-      } else {
-        this.drawBrushRect({
-          brushCanvas: existedBrushCanvas,
-          isResize: isResize
-        });
       }
     }
   }, {