bkui-vue 0.0.1-beta.11 → 0.0.1-beta.12

package/dist/bkui-vue.cjs.js

@@ -68,7 +68,7 @@ var tree = ".bk-tree .bk-tree-node {\n  position: relative;\n  height: var(--lin
 var slider = ".bk-slider {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.bk-slider .bk-slider-runway {\n  position: relative;\n  width: 100%;\n  height: 4px;\n  vertical-align: middle;\n  cursor: pointer;\n  background: #dcdee5;\n  border-radius: 2px;\n  opacity: 1;\n}\n.bk-slider .bk-slider-runway .bk-slider-bar {\n  position: absolute;\n  height: 4px;\n  background: #3a84ff;\n  border-bottom-left-radius: 3px;\n  border-top-left-radius: 3px;\n}\n.bk-slider .bk-slider-runway .bk-slider-bar.vertical {\n  width: 4px;\n}\n.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {\n  height: 4px;\n}\n.bk-slider .bk-slider-runway .disable {\n  background: #979ba5;\n}\n.bk-slider .bk-slider-runway .bk-slider-labels {\n  position: relative;\n}\n.bk-slider .bk-slider-runway .bk-slider-labels.vertical {\n  left: 18px;\n  display: flex;\n  width: 10px;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {\n  top: 10px;\n  display: flex;\n  width: 100%;\n  height: 10px;\n  flex-direction: row;\n  justify-content: space-between;\n}\n.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {\n  position: absolute;\n  display: flex;\n  width: 10px;\n  height: 10px;\n  text-align: center;\n  white-space: nowrap;\n  align-items: center;\n  justify-content: center;\n}\n.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {\n  left: 10px;\n  transform: translateY(50%);\n}\n.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {\n  top: 10px;\n  transform: translateX(-50%);\n}\n.bk-slider .bk-slider-interval {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  background-color: #fff;\n  border-radius: 100%;\n  transform: translateX(-50%);\n}\n.bk-slider .bk-slider-interval.vertical {\n  left: 2px;\n}\n.bk-slider-input {\n  display: flex;\n  margin: 0 0 0 28px;\n  flex-direction: row;\n  align-items: center;\n}\n.bk-slider-input .input-item {\n  width: 92px;\n}\n.bk-slider-input .input-center {\n  margin: 0 7px;\n}\n.bk-slider-button {\n  position: absolute;\n  z-index: 1001;\n  display: flex;\n  width: 24px;\n  height: 24px;\n  line-height: normal;\n  text-align: center;\n  background-color: transparent;\n  user-select: none;\n  justify-content: center;\n  align-items: center;\n}\n.bk-slider-button:hover {\n  cursor: grab;\n}\n.bk-slider-button.grabbing {\n  cursor: grabbing;\n}\n.bk-slider-button.vertical {\n  left: -10px;\n  transform: translateY(50%);\n}\n.bk-slider-button.horizontal {\n  top: -10px;\n  transform: translateX(-50%);\n}\n.bk-slider-button .slider-button {\n  width: 12px;\n  height: 12px;\n  background-color: #fff;\n  border: 2px solid #3a84ff;\n  border-radius: 50%;\n  transition: 0.2s;\n  user-select: none;\n}\n.bk-slider-button .slider-button-disable {\n  border: 2px solid #979ba5;\n}\n.bk-slider-button .slider-button:hover {\n  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);\n}\n.bk-slider-button .slider-button:focus {\n  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);\n}\n.bk-slider-button .slider-button-label {\n  position: absolute;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n}\n.bk-slider-button .slider-button-label.vertical {\n  left: 28px;\n}\n.bk-slider-button .slider-button-label.horizontal {\n  top: 20px;\n}\n";
 var menu = "@keyframes loading-scale-animate {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.6);\n  }\n}\n@keyframes fade {\n  100% {\n    background-color: transparent;\n  }\n}\n.bk-fade-transtion .bk-fade-enter-active,\n.bk-fade-transtion .bk-fade-leave-active {\n  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n}\n.bk-fade-transtion .bk-fade-enter,\n.bk-fade-transtion .bk-fade-leave-to {\n  opacity: 0;\n}\n.collapse {\n  width: 60px;\n}\n.open {\n  background: #151d2c;\n}\n.bk-menu {\n  display: flex;\n  width: 260px;\n  background-color: #182132;\n  flex-direction: column;\n  transition: width 0.3s ease-out;\n}\n.bk-menu.is-collapse {\n  width: 60px;\n}\n.bk-menu-submenu {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n  align-items: center;\n  transition: width 0.3s ease-out;\n}\n.bk-menu-submenu.is-opened {\n  background: #151d2c;\n}\n.bk-menu-submenu:hover {\n  color: white;\n  cursor: pointer;\n}\n.bk-menu-submenu .submenu-header {\n  display: flex;\n  width: 100%;\n  height: 40px;\n  align-items: center;\n}\n.bk-menu-submenu .submenu-header.is-collapse {\n  color: white;\n  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);\n}\n.bk-menu-submenu .submenu-header-icon {\n  display: flex;\n  height: 100%;\n  font-size: 18px;\n  flex: 0 0 60px;\n  align-items: center;\n  justify-content: center;\n}\n.bk-menu-submenu .submenu-header-icon .menu-icon {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  font-size: 16px;\n  align-items: center;\n  justify-content: center;\n  color: #b0bdd5;\n}\n.bk-menu-submenu .submenu-header-content {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  flex: 1;\n  color: #acb9d1;\n}\n.bk-menu-submenu .submenu-header-collapse {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  font-size: 16px;\n  align-items: center;\n  justify-content: center;\n  margin-right: 16px;\n  color: #acb9d1;\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease-out;\n}\n.bk-menu-submenu .submenu-header-collapse.is-collapse {\n  transform: rotate(0deg);\n}\n.bk-menu-submenu .submenu-list {\n  display: flex;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  flex-direction: column;\n  flex: 1;\n  /* stylelint-disable-next-line declaration-no-important */\n  transition-property: all !important;\n}\n.bk-menu-item {\n  display: flex;\n  width: 100%;\n  height: 40px;\n  min-height: 40px;\n  margin: 2px 0;\n  overflow: hidden;\n  font-size: 14px;\n  color: #96a2b9;\n  text-overflow: clip;\n  white-space: nowrap;\n  align-items: center;\n  transition: width 0.3s ease-in-out;\n}\n.bk-menu-item:hover {\n  color: white;\n  cursor: pointer;\n}\n.bk-menu-item.is-active {\n  color: white;\n  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);\n}\n.bk-menu-item .item-icon {\n  display: flex;\n  height: 100%;\n  font-size: 18px;\n  flex: 0 0 60px;\n  align-items: center;\n  justify-content: center;\n}\n.bk-menu-item .item-icon .default-icon {\n  display: inline-block;\n  width: 3px;\n  height: 3px;\n  background: #63656e;\n  background-color: white;\n  border-radius: 50%;\n}\n.bk-menu-item .item-content {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  flex: 1;\n}\n.bk-menu-group {\n  display: flex;\n  flex-direction: column;\n}\n.bk-menu-group .group-name {\n  display: flex;\n  height: 40px;\n  margin: 0 18px;\n  overflow: hidden;\n  font-size: 12px;\n  line-height: 16px;\n  color: #63656e;\n  text-overflow: clip;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n.bk-menu-group .group-wrap {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n}\n.bk-menu .collapse-transition {\n  transition: all 0.3s ease-in-out;\n}\n";
 var navigation = ".bk-navigation {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n.bk-navigation-title {\n  display: flex;\n  height: 100%;\n  padding: 0 16px;\n  overflow: hidden;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  align-items: center;\n  justify-content: flex-start;\n  flex: 0 0 260px;\n}\n.bk-navigation-title .title-icon {\n  display: flex;\n  font-size: 28px;\n  color: #768197;\n  flex: 0 0 28px;\n  align-items: center;\n  justify-content: center;\n}\n.bk-navigation-title .title-desc {\n  display: inline-block;\n  margin-left: 16px;\n  overflow: hidden;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 24px;\n  color: #96a2b9;\n  white-space: nowrap;\n}\n.bk-navigation-header {\n  flex: 0 0 52px;\n  display: flex;\n  align-items: center;\n  padding-right: 24px;\n  overflow: hidden;\n  background: #182132;\n}\n.bk-navigation-header .header-right {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n}\n.bk-navigation-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n}\n.bk-navigation-wrapper .navigation-nav {\n  position: relative;\n  z-index: 101;\n  display: flex;\n  width: 60px;\n  min-width: 0;\n  min-height: 0;\n  overflow: visible;\n  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n  flex: 0 1 auto;\n  flex-direction: column;\n}\n.bk-navigation-wrapper .navigation-nav:hover {\n  cursor: pointer;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider {\n  display: flex;\n  width: 60px;\n  height: 100%;\n  background-color: #182132;\n  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n  flex: 1;\n  flex-direction: column;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-list {\n  max-height: calc(100vh - 100px);\n  padding: 12px 0 4px 0;\n  margin: 0;\n  overflow: auto;\n  flex: 1 1 auto;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {\n  display: none;\n  width: 6px;\n  height: 5px;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {\n  transform: none;\n  transition: opacity 340ms ease-out;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer {\n  display: flex;\n  padding-left: 14px;\n  flex: 0 0 56px;\n  align-items: center;\n  justify-content: flex-start;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  font-size: 14px;\n  color: #63656e;\n  border-radius: 100%;\n  align-items: center;\n  justify-content: center;\n  transform-origin: center center;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  font-size: 16px;\n  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n  align-items: center;\n  justify-content: center;\n  transform-origin: center center;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {\n  color: #96a2b9;\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {\n  color: #d3d9e4;\n  cursor: pointer;\n  background: linear-gradient(270deg, #253047 0%, #263247 100%);\n}\n.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {\n  color: #3a3c42;\n  cursor: pointer;\n  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);\n}\n.bk-navigation-wrapper .navigation-container {\n  position: relative;\n  display: flex;\n  max-width: calc(100vw - 60px);\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 1px;\n  flex-direction: column;\n}\n.bk-navigation-wrapper .navigation-container .container-header {\n  z-index: 100;\n  display: flex;\n  width: 100%;\n  height: 60px;\n  padding: 0 24px;\n  background: #fff;\n  border-bottom: 1px solid #dcdee5;\n  box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);\n  flex-basis: 60px;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n}\n.bk-navigation-wrapper .navigation-container .container-header-title {\n  height: 21px;\n  font-size: 16px;\n  line-height: 21px;\n  color: #313238;\n}\n.bk-navigation-wrapper .navigation-container .container-header-sets {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  justify-content: flex-end;\n}\n.bk-navigation-wrapper .navigation-container .container-content {\n  max-height: calc(100vh - 60px);\n  padding: 20px 24px 0;\n  overflow: auto;\n  background: #f5f7fa;\n  flex: 1;\n}\n.bk-navigation-wrapper .navigation-container .container-footer {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n";
-var datePicker = ".bk-date-picker {\n  display: inline-block;\n  width: 261px;\n  line-height: normal;\n}\n.bk-date-picker.long {\n  width: 342px;\n}\n.bk-date-picker.medium-width {\n  width: 362px;\n}\n.bk-date-picker.large-width {\n  width: 402px;\n}\n.bk-date-picker-rel {\n  position: relative;\n}\n.bk-date-picker-rel .bk-date-picker-editor {\n  display: block;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px 0 30px;\n  font-size: 12px;\n  line-height: 32px;\n  color: #63656e;\n  cursor: pointer;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  outline: none;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {\n  border-color: transparent transparent #c4c6cc transparent;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {\n  border-color: transparent transparent #3a84ff transparent;\n  box-shadow: none;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {\n  border-color: transparent transparent #dcdee5 transparent;\n}\n.bk-date-picker-rel .bk-date-picker-editor:focus {\n  border: 1px solid #3a84ff;\n}\n.bk-date-picker-rel .bk-date-picker-editor::placeholder {\n  color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor[disabled] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #fafbfd;\n  border-color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor.readonly {\n  background-color: #fafbfd;\n  border-color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor.medium-font {\n  font-size: 14px;\n}\n.bk-date-picker-rel .bk-date-picker-editor.large-font {\n  font-size: 16px;\n}\n.bk-date-picker-rel .clear-action {\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  font-size: 14px;\n  color: #c4c6cc;\n  cursor: pointer;\n  transform: translateY(-50%);\n}\n.bk-date-picker-rel .clear-action:hover {\n  color: #979ba5;\n}\n.bk-date-picker-rel .icon-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: #c4c6cc;\n  cursor: pointer;\n  background-color: transparent;\n}\n.bk-date-picker-rel .icon-wrapper.disabled {\n  cursor: not-allowed;\n}\n.bk-date-picker-rel .icon-wrapper i.icon-clock {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.bk-date-picker-rel .icon-wrapper .picker-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 18px;\n  height: 18px;\n  transform: translate(-50%, -50%);\n}\n.bk-date-picker-dropdown {\n  position: absolute;\n  z-index: 900;\n  padding: 5px 0 0 0;\n  overflow: auto;\n  background-color: #fff;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n  box-sizing: border-box;\n}\n.bk-date-picker .bk-select-dropdown {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n.bk-date-picker-footer-wrapper {\n  clear: both;\n  font-size: 14px;\n  color: #979ba5;\n  background-color: #fafbfd;\n  border-top: 1px solid #dcdee5;\n}\n.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {\n  padding-right: 140px;\n}\n.bk-picker-panel-body-wrapper .bk-picker-panel-sidebar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 140px;\n  padding: 12px 0;\n  overflow: auto;\n  font-size: 14px;\n  color: #3a84ff;\n  background-color: #fafbfd;\n  border-left: 1px solid #dcdee5;\n}\n.bk-picker-panel-body-wrapper .bk-picker-panel-sidebar .bk-picker-panel-shortcut {\n  /* &:nth-of-type(1) {\n            padding-top: 18px;\n        }\n        &:last-child {\n            padding-bottom: 18px;\n        } */\n  padding: 6px 21px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.bk-picker-panel-body-wrapper .bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {\n  background-color: #e1ecff;\n}\n.bk-picker-panel-body-wrapper .bk-picker-panel-body {\n  float: left;\n}\n.bk-picker-panel-body-wrapper .bk-date-picker-header {\n  height: 46px;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 46px;\n  color: #63656e;\n  text-align: center;\n  border-bottom: 1px solid #dcdee5;\n}\n.bk-picker-panel-body-wrapper .bk-date-picker-header .bk-date-picker-header-label {\n  cursor: pointer;\n}\n.bk-picker-panel-body-wrapper .bk-date-picker-header .bk-date-picker-header-label:hover {\n  color: #3a84ff;\n}\n.bk-picker-panel-body-wrapper .bk-date-picker-header .up-to-now {\n  margin-left: 3px;\n  font-weight: 400;\n  cursor: pointer;\n}\n.bk-picker-panel-body-wrapper .bk-date-picker-header .up-to-now.disabled {\n  color: #c4c6cc;\n  cursor: not-allowed;\n}\n.bk-date-picker-cells {\n  margin: 9px;\n  font-size: 12px;\n  color: #63656e;\n  white-space: normal;\n}\n.bk-date-picker-cells span {\n  display: inline-block;\n  width: 34px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n}\n.bk-date-picker-cells span em {\n  display: inline-block;\n  width: 34px;\n  height: 32px;\n  font-style: normal;\n  line-height: 32px;\n  cursor: pointer;\n}\n.bk-date-picker-cells .bk-date-picker-cells-header {\n  text-align: center;\n}\n.bk-date-picker-cells .bk-date-picker-cells-header span {\n  width: 28px;\n  height: 26px;\n  margin: 3px;\n  line-height: 26px;\n  color: #63656e;\n  text-align: center;\n  cursor: default;\n}\n.bk-date-picker-cells-cell:hover em {\n  /* background-color: #e1ecff; */\n  background-color: #f0f1f5;\n}\n.bk-date-picker-cells-focused em {\n  color: #3a84ff;\n  box-shadow: 0 0 0 1px #a3c5fd inset;\n}\n.bk-date-picker-cells-cell-prev-month em,\n.bk-date-picker-cells-cell-next-month em {\n  color: #c4c6cc;\n}\n.bk-date-picker-cells-cell-prev-month:hover em,\n.bk-date-picker-cells-cell-next-month:hover em {\n  background: transparent;\n}\nspan.bk-date-picker-cells-cell-week-label,\nspan.bk-date-picker-cells-cell-week-label:hover,\nspan.bk-date-picker-cells-cell-disabled,\nspan.bk-date-picker-cells-cell-disabled:hover {\n  color: #c4c6cc;\n  cursor: not-allowed;\n}\nspan.bk-date-picker-cells-cell-week-label em,\nspan.bk-date-picker-cells-cell-week-label:hover em,\nspan.bk-date-picker-cells-cell-disabled em,\nspan.bk-date-picker-cells-cell-disabled:hover em {\n  color: inherit;\n  cursor: not-allowed;\n  background: inherit;\n}\nspan.bk-date-picker-cells-cell-disabled,\nspan.bk-date-picker-cells-cell-disabled:hover {\n  background-color: #f0f1f5;\n}\n.bk-date-picker-cells-cell-today em {\n  position: relative;\n  color: #3a84ff;\n  box-shadow: 0 0 0 1px #a3c5fd inset;\n}\n.bk-date-picker-cells-cell-range {\n  position: relative;\n}\n.bk-date-picker-cells-cell-range:before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  background: #e1ecff;\n  border: 0;\n  border-radius: 0;\n  content: '';\n}\n.bk-date-picker-cells-cell-range em {\n  position: relative;\n  z-index: 1;\n}\n.bk-date-picker-cells-cell-selected em,\n.bk-date-picker-cells-cell-selected:hover em {\n  color: #fff;\n  background-color: #3a84ff;\n  box-shadow: 0 0 0 1px #3a84ff inset;\n}\nspan.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {\n  color: #f7f7f7;\n  background: #c4c6cc;\n}\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {\n  background: #fff;\n}\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {\n  box-shadow: 0 0 0 1px #3a84ff inset;\n}\n.bk-date-picker-cells-year,\n.bk-date-picker-cells-month {\n  margin-top: 7px;\n}\n.bk-date-picker-cells-year span,\n.bk-date-picker-cells-month span {\n  width: 36px;\n  height: 32px;\n  margin: 10px 12px;\n  line-height: 32px;\n  text-align: center;\n  border-radius: 3px;\n}\n.bk-date-picker-cells-year span em,\n.bk-date-picker-cells-month span em {\n  width: 36px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n}\n.bk-picker-panel-icon-btn {\n  display: inline-block;\n  width: 20px;\n  height: 46px;\n  line-height: 44px;\n  color: #979ba5;\n  text-align: center;\n  cursor: pointer;\n  transition: color 0.2s ease-in-out;\n}\n.bk-picker-panel-icon-btn:hover {\n  color: #2d8cf0;\n}\n.bk-picker-panel-icon-btn i {\n  font-size: 20px;\n}\n.bk-date-picker-prev-btn {\n  float: left;\n}\n.bk-date-picker-prev-btn-arrow-double {\n  margin-left: 10px;\n}\n.bk-date-picker-prev-btn-arrow-double i:after {\n  margin-left: -8px;\n}\n.bk-date-picker-next-btn {\n  float: right;\n}\n.bk-date-picker-next-btn-arrow-double {\n  margin-right: 10px;\n}\n.bk-date-picker-next-btn-arrow-double i:after {\n  margin-left: -8px;\n}\n.bk-date-picker-with-range .bk-picker-panel-body {\n  min-width: 532px;\n}\n.bk-date-picker-with-range .bk-picker-panel-content {\n  float: left;\n}\n.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {\n  min-width: 492px;\n}\n.bk-fade-down-transition-enter-from,\n.bk-fade-down-transition-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n.bk-fade-down-transition-enter-to,\n.bk-fade-down-transition-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n.bk-fade-down-transition-enter-active {\n  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.bk-fade-down-transition-leave-active {\n  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n";
+var datePicker = ".bk-date-picker {\n  display: inline-block;\n  width: 261px;\n  line-height: normal;\n}\n.bk-date-picker.long {\n  width: 342px;\n}\n.bk-date-picker.medium-width {\n  width: 362px;\n}\n.bk-date-picker.large-width {\n  width: 402px;\n}\n.bk-date-picker-rel {\n  position: relative;\n}\n.bk-date-picker-rel .bk-date-picker-editor {\n  display: block;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px 0 30px;\n  font-size: 12px;\n  line-height: 32px;\n  color: #63656e;\n  cursor: pointer;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  outline: none;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {\n  border-color: transparent transparent #c4c6cc transparent;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {\n  border-color: transparent transparent #3a84ff transparent;\n  box-shadow: none;\n}\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],\n.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {\n  border-color: transparent transparent #dcdee5 transparent;\n}\n.bk-date-picker-rel .bk-date-picker-editor:focus {\n  border: 1px solid #3a84ff;\n}\n.bk-date-picker-rel .bk-date-picker-editor::placeholder {\n  color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor[disabled] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #fafbfd;\n  border-color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor.readonly {\n  background-color: #fafbfd;\n  border-color: #c4c6cc;\n}\n.bk-date-picker-rel .bk-date-picker-editor.medium-font {\n  font-size: 14px;\n}\n.bk-date-picker-rel .bk-date-picker-editor.large-font {\n  font-size: 16px;\n}\n.bk-date-picker-rel .clear-action {\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  font-size: 14px;\n  color: #c4c6cc;\n  cursor: pointer;\n  transform: translateY(-50%);\n}\n.bk-date-picker-rel .clear-action:hover {\n  color: #979ba5;\n}\n.bk-date-picker-rel .icon-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: #c4c6cc;\n  cursor: pointer;\n  background-color: transparent;\n}\n.bk-date-picker-rel .icon-wrapper.disabled {\n  cursor: not-allowed;\n}\n.bk-date-picker-rel .icon-wrapper i.icon-clock {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.bk-date-picker-rel .icon-wrapper .picker-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 18px;\n  height: 18px;\n  transform: translate(-50%, -50%);\n}\n.bk-date-picker-dropdown {\n  position: absolute;\n  z-index: 900;\n  padding: 5px 0 0 0;\n  overflow: auto;\n  background-color: #fff;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n  box-sizing: border-box;\n}\n.bk-date-picker .bk-select-dropdown {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n.bk-date-picker-footer-wrapper {\n  clear: both;\n  font-size: 14px;\n  color: #979ba5;\n  background-color: #fafbfd;\n  border-top: 1px solid #dcdee5;\n}\n.bk-date-picker-top-wrapper {\n  margin-top: -5px;\n  clear: both;\n  font-size: 14px;\n  color: #979ba5;\n}\n.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {\n  padding-right: 140px;\n}\n.bk-picker-panel-sidebar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 140px;\n  padding: 12px 0;\n  overflow: auto;\n  font-size: 14px;\n  color: #3a84ff;\n  background-color: #fafbfd;\n  border-left: 1px solid #dcdee5;\n}\n.bk-picker-panel-sidebar .bk-picker-panel-shortcut {\n  /* &:nth-of-type(1) {\n          padding-top: 18px;\n      }\n      &:last-child {\n          padding-bottom: 18px;\n      } */\n  padding: 6px 21px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {\n  background-color: #e1ecff;\n}\n.bk-picker-panel-body {\n  float: left;\n}\n.bk-picker-confirm {\n  height: 42px;\n  padding: 0 20px;\n  clear: both;\n  font-size: 14px;\n  line-height: 41px;\n  text-align: right;\n  background-color: #fafbfd;\n  border-top: 1px solid #dcdee5;\n}\n.bk-picker-confirm a {\n  color: #979ba5;\n}\n.bk-picker-confirm a.confirm {\n  margin-left: 10px;\n  color: #3a84ff;\n}\n.bk-picker-confirm a[disabled] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n}\n.bk-picker-confirm .bk-picker-confirm-time {\n  float: left;\n}\n.bk-date-picker-header {\n  height: 46px;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 46px;\n  color: #63656e;\n  text-align: center;\n  border-bottom: 1px solid #dcdee5;\n}\n.bk-date-picker-header .bk-date-picker-header-label {\n  cursor: pointer;\n}\n.bk-date-picker-header .bk-date-picker-header-label:hover {\n  color: #3a84ff;\n}\n.bk-date-picker-header .up-to-now {\n  margin-left: 3px;\n  font-weight: 400;\n  cursor: pointer;\n}\n.bk-date-picker-header .up-to-now.disabled {\n  color: #c4c6cc;\n  cursor: not-allowed;\n}\n.bk-date-picker-cells {\n  margin: 9px;\n  font-size: 12px;\n  color: #63656e;\n  white-space: normal;\n}\n.bk-date-picker-cells span {\n  display: inline-block;\n  width: 34px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n}\n.bk-date-picker-cells span em {\n  display: inline-block;\n  width: 34px;\n  height: 32px;\n  font-style: normal;\n  line-height: 32px;\n  cursor: pointer;\n}\n.bk-date-picker-cells .bk-date-picker-cells-header {\n  text-align: center;\n}\n.bk-date-picker-cells .bk-date-picker-cells-header span {\n  width: 28px;\n  height: 26px;\n  margin: 3px;\n  line-height: 26px;\n  color: #63656e;\n  text-align: center;\n  cursor: default;\n}\n.bk-date-picker-cells-cell:hover em {\n  /* background-color: #e1ecff; */\n  background-color: #f0f1f5;\n}\n.bk-date-picker-cells-focused em {\n  color: #3a84ff;\n  box-shadow: 0 0 0 1px #a3c5fd inset;\n}\n.bk-date-picker-cells-cell-prev-month em,\n.bk-date-picker-cells-cell-next-month em {\n  color: #c4c6cc;\n}\n.bk-date-picker-cells-cell-prev-month:hover em,\n.bk-date-picker-cells-cell-next-month:hover em {\n  background: transparent;\n}\nspan.bk-date-picker-cells-cell-week-label,\nspan.bk-date-picker-cells-cell-week-label:hover,\nspan.bk-date-picker-cells-cell-disabled,\nspan.bk-date-picker-cells-cell-disabled:hover {\n  color: #c4c6cc;\n  cursor: not-allowed;\n}\nspan.bk-date-picker-cells-cell-week-label em,\nspan.bk-date-picker-cells-cell-week-label:hover em,\nspan.bk-date-picker-cells-cell-disabled em,\nspan.bk-date-picker-cells-cell-disabled:hover em {\n  color: inherit;\n  cursor: not-allowed;\n  background: inherit;\n}\nspan.bk-date-picker-cells-cell-disabled,\nspan.bk-date-picker-cells-cell-disabled:hover {\n  background-color: #f0f1f5;\n}\n.bk-date-picker-cells-cell-today em {\n  position: relative;\n  color: #3a84ff;\n  box-shadow: 0 0 0 1px #a3c5fd inset;\n}\n.bk-date-picker-cells-cell-range {\n  position: relative;\n}\n.bk-date-picker-cells-cell-range:before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  background: #e1ecff;\n  border: 0;\n  border-radius: 0;\n  content: '';\n}\n.bk-date-picker-cells-cell-range em {\n  position: relative;\n  z-index: 1;\n}\n.bk-date-picker-cells-cell-selected em,\n.bk-date-picker-cells-cell-selected:hover em {\n  color: #fff;\n  background-color: #3a84ff;\n  box-shadow: 0 0 0 1px #3a84ff inset;\n}\nspan.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {\n  color: #f7f7f7;\n  background: #c4c6cc;\n}\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {\n  background: #fff;\n}\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,\n.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {\n  box-shadow: 0 0 0 1px #3a84ff inset;\n}\n.bk-date-picker-cells-year,\n.bk-date-picker-cells-month {\n  margin-top: 7px;\n}\n.bk-date-picker-cells-year span,\n.bk-date-picker-cells-month span {\n  width: 36px;\n  height: 32px;\n  margin: 10px 12px;\n  line-height: 32px;\n  text-align: center;\n  border-radius: 3px;\n}\n.bk-date-picker-cells-year span em,\n.bk-date-picker-cells-month span em {\n  width: 36px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n}\n.bk-picker-panel-icon-btn {\n  display: inline-block;\n  width: 20px;\n  height: 46px;\n  line-height: 44px;\n  color: #979ba5;\n  text-align: center;\n  cursor: pointer;\n  transition: color 0.2s ease-in-out;\n}\n.bk-picker-panel-icon-btn:hover {\n  color: #2d8cf0;\n}\n.bk-picker-panel-icon-btn i {\n  font-size: 20px;\n}\n.bk-date-picker-prev-btn {\n  float: left;\n}\n.bk-date-picker-prev-btn-arrow-double {\n  margin-left: 10px;\n}\n.bk-date-picker-prev-btn-arrow-double i:after {\n  margin-left: -8px;\n}\n.bk-date-picker-next-btn {\n  float: right;\n}\n.bk-date-picker-next-btn-arrow-double {\n  margin-right: 10px;\n}\n.bk-date-picker-next-btn-arrow-double i:after {\n  margin-left: -8px;\n}\n.bk-date-picker-with-range .bk-picker-panel-body {\n  min-width: 532px;\n}\n.bk-date-picker-with-range .bk-picker-panel-content {\n  float: left;\n}\n.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {\n  min-width: 492px;\n}\n.bk-date-picker-transfer {\n  z-index: 1060;\n  max-height: none;\n}\n.bk-fade-down-transition-enter-from,\n.bk-fade-down-transition-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n.bk-fade-down-transition-enter-to,\n.bk-fade-down-transition-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n.bk-fade-down-transition-enter-active {\n  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.bk-fade-down-transition-leave-active {\n  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n";
 var divider = ".bk-divider {\n  position: relative;\n  background: #c4c6cc;\n}\n.bk-divider-horizontal {\n  width: 100%;\n  height: 1px;\n  margin: 1em 0;\n}\n.bk-divider-info {\n  position: absolute;\n  top: 50%;\n  padding: 0 1.4em;\n  color: #63656e;\n  background-color: white;\n  transform: translateY(-50%);\n}\n.bk-divider-info-center {\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n}\n.bk-divider-info .bk-divider-horizontal-left {\n  left: 2em;\n}\n.bk-divider-info .bk-divider-horizontal-right {\n  right: 2em;\n}\n.bk-divider-vertical .bk-divider-info {\n  padding: 20px 0;\n}\n.bk-divider-vertical {\n  display: inline-block;\n  width: 1px;\n  height: 100%;\n  min-height: 1em;\n  margin: 0 8px;\n  vertical-align: middle;\n}\n";
 var tab = ".bk-tab {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n.bk-tab--top {\n  flex-direction: column;\n}\n.bk-tab--right {\n  flex-direction: row-reverse;\n}\n.bk-tab-header {\n  display: flex;\n  color: #63656e;\n}\n.bk-tab-header > div {\n  display: flex;\n  margin-bottom: -1px;\n  flex-wrap: nowrap;\n}\n.bk-tab--card .bk-tab-header > div,\n.bk-tab--border-card .bk-tab-header > div {\n  border-right: 1px solid #dcdee5;\n}\n.bk-tab--top .bk-tab-header-nav {\n  overflow-x: auto;\n  overflow-y: visible;\n}\n.bk-tab--left .bk-tab-header-nav,\n.bk-tab--right .bk-tab-header-nav {\n  overflow-x: visible;\n  overflow-y: auto;\n}\n.bk-tab--card .bk-tab-header-nav,\n.bk-tab--border-card .bk-tab-header-nav {\n  border-left: 1px solid #dcdee5;\n}\n.bk-tab-header-nav::-webkit-scrollbar {\n  display: none;\n  width: 0;\n  height: 0;\n}\n.bk-tab-header-operation .bk-tab-header-item {\n  padding: 0 12px;\n}\n.bk-tab--left .bk-tab-header {\n  border-right: 1px solid #dcdee5;\n}\n.bk-tab--right .bk-tab-header {\n  border-left: 1px solid #dcdee5;\n}\n.bk-tab--left .bk-tab-header,\n.bk-tab--right .bk-tab-header {\n  flex-direction: column;\n}\n.bk-tab--left .bk-tab-header > div,\n.bk-tab--right .bk-tab-header > div {\n  flex-direction: column;\n}\n.bk-tab--card .bk-tab-header {\n  border-bottom: 1px solid #dcdee5;\n}\n.bk-tab--border-card .bk-tab-header {\n  background: #FAFBFD;\n  border: solid #dcdee5;\n  border-width: 1px 1px 1px 0;\n}\n.bk-tab--unborder-card .bk-tab-header {\n  border-bottom: 1px solid #dcdee5;\n}\n.bk-tab-header-item {\n  display: flex;\n  white-space: nowrap;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n}\n.bk-tab-header-item:hover {\n  color: #3a84ff;\n}\n.bk-tab-header-item:hover .bk-tab-header-item-close {\n  display: block;\n  margin-left: 10px;\n  color: #ea3636;\n}\n.bk-tab--top .bk-tab-header-item {\n  padding: 0 20px;\n}\n.bk-tab--left .bk-tab-header-item,\n.bk-tab--right .bk-tab-header-item {\n  padding: 0 12px;\n}\n.bk-tab--left .bk-tab-header-item {\n  text-align: right;\n}\n.bk-tab--card .bk-tab-header-item {\n  border-top: 1px solid #dcdee5;\n}\n.bk-tab--card .bk-tab-header-item,\n.bk-tab--border-card .bk-tab-header-item {\n  border-right: 1px solid #dcdee5;\n  border-bottom: 1px solid #dcdee5;\n}\n.bk-tab--card .bk-tab-header-item:last-of-type,\n.bk-tab--border-card .bk-tab-header-item:last-of-type {\n  border-right: none;\n}\n.bk-tab-header-operation .bk-tab-header-item {\n  padding-right: 12px;\n  padding-left: 12px;\n}\n.bk-tab-header-item-close {\n  display: none;\n  color: #c4c6cc;\n}\n.bk-tab-header--active {\n  color: #3a84ff;\n}\n.bk-tab--card .bk-tab-header--active,\n.bk-tab--border-card .bk-tab-header--active {\n  border-bottom-color: white;\n}\n.bk-tab--unborder-card .bk-tab-header--active {\n  border-bottom: 2px solid #3a84ff;\n}\n.bk-tab--left .bk-tab-header--active {\n  border-right: 2px solid #3a84ff;\n}\n.bk-tab--right .bk-tab-header--active {\n  border-left: 2px solid #3a84ff;\n}\n.bk-tab-header--disabled {\n  color: #aaa;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.bk-tab-content {\n  flex: 1;\n  padding: 10px;\n}\n.bk-tab--border-card .bk-tab-content {\n  border: solid #dcdee5;\n  border-width: 0 1px 1px;\n}\n.bk-tab-panel {\n  height: 100%;\n}\n";
 var BKLAYERTYPE;
@@ -8023,6 +8023,13 @@ const typeValueResolver = {
     }
   }
 };
+const initTime = () => {
+  const date = new Date();
+  date.setHours(0);
+  date.setMinutes(0);
+  date.setSeconds(0);
+  return date;
+};
 const isAllEmptyArr = (arr) => arr.every((item) => !item || typeof item === "string" && item.trim() === "");
 const extractTime = (date) => {
   if (!date) {
@@ -8545,7 +8552,7 @@ const dateTableProps = {
 };
 var DateTable = vue.defineComponent({
   props: dateTableProps,
-  emits: ["pick", "pick-click", "change-range"],
+  emits: ["pick", "pick-click", "changeRange"],
   setup(props, {
     emit
   }) {
@@ -8603,7 +8610,7 @@ var DateTable = vue.defineComponent({
         return;
       }
       const newDate = cell.date;
-      emit("change-range", newDate);
+      emit("changeRange", newDate);
     };
     const getCellCls = (cell) => ["bk-date-picker-cells-cell", {
       ["bk-date-picker-cells-cell-selected"]: cell.selected || cell.start || cell.end,
@@ -8635,6 +8642,9 @@ var DateTable = vue.defineComponent({
   }
 });
 const datePanelProps = {
+  modelValue: {
+    type: [Date, String, Number, Array]
+  },
   shortcuts: {
     type: Array,
     default: () => []
@@ -8653,10 +8663,14 @@ const datePanelProps = {
   },
   selectionMode: {
     type: String,
-    default: "date"
-  },
-  modelValue: {
-    type: [Date, String, Number, Array]
+    default: "date",
+    validator(v2) {
+      if (["year", "month", "date", "time"].indexOf(v2) < 0) {
+        console.error(`selectionMode property is not valid: '${v2}'`);
+        return false;
+      }
+      return true;
+    }
   },
   startDate: {
     type: Date
@@ -8695,6 +8709,7 @@ var DatePanel = vue.defineComponent({
       }
     };
     const handlePick = (value, type) => {
+      console.warn("handlePick");
       let val = value;
       if (props.selectionMode === "year") {
         val = new Date(value.getFullYear(), 0, 1);
@@ -8768,7 +8783,7 @@ var DatePanel = vue.defineComponent({
     const showLabelFirst = vue.computed(() => datePanelLabel.value.labels[0].type === "year" || state.currentView === "date");
     const showLabelSecond = vue.computed(() => datePanelLabel.value.labels[1].type === "year" || state.currentView === "date");
     const isTime = vue.computed(() => state.currentView === "time");
-    console.error("panelDatepanelDate", state.panelDate);
+    console.warn("panelDatepanelDate", state.panelDate);
     return __spreadProps(__spreadValues({}, vue.toRefs(state)), {
       panelPickerHandlers,
       datePanelLabel,
@@ -8855,6 +8870,406 @@ var DatePanel = vue.defineComponent({
     })() : ""])])]);
   }
 });
+const dateRangePanelProps = {
+  modelValue: {
+    type: [Date, String, Number, Array]
+  },
+  type: {
+    type: String,
+    default: "date",
+    validator(value) {
+      const validList = ["year", "month", "date", "daterange", "datetime", "datetimerange", "time", "timerange"];
+      if (validList.indexOf(value) < 0) {
+        console.error(`type property is not valid: '${value}'`);
+        return false;
+      }
+      return true;
+    }
+  },
+  shortcuts: {
+    type: Array,
+    default: () => []
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  splitPanels: {
+    type: Boolean,
+    default: true
+  },
+  shortcutClose: {
+    type: Boolean,
+    default: false
+  },
+  showTime: {
+    type: Boolean,
+    default: false
+  },
+  selectionMode: {
+    type: String,
+    default: "date",
+    validator(v2) {
+      if (["year", "month", "date", "time"].indexOf(v2) < 0) {
+        console.error(`selectionMode property is not valid: '${v2}'`);
+        return false;
+      }
+      return true;
+    }
+  },
+  startDate: {
+    type: Date
+  },
+  upToNow: {
+    type: Boolean,
+    default: false
+  },
+  disableDate: Function,
+  focusedDate: {
+    type: Date,
+    required: true
+  }
+};
+var DateRangePanel = vue.defineComponent({
+  props: dateRangePanelProps,
+  emits: ["pick"],
+  setup(props, {
+    emit
+  }) {
+    const [minDate, maxDate] = props.modelValue.map((date) => date || initTime());
+    const leftPanelDate = props.startDate ? props.startDate : minDate;
+    const state = vue.reactive({
+      currentView: props.selectionMode || "date",
+      leftPickerTable: `${props.selectionMode}-table`,
+      rightPickerTable: `${props.selectionMode}-table`,
+      leftPanelDate,
+      rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1),
+      rangeState: {
+        from: props.modelValue[0],
+        to: props.modelValue[1],
+        selecting: minDate && !maxDate
+      },
+      upToNowEnable: false,
+      dates: props.modelValue
+    });
+    const dateSorter = (a2, b2) => {
+      if (!a2 || !b2) {
+        return 0;
+      }
+      return a2.getTime() - b2.getTime();
+    };
+    const reset2 = () => {
+      state.currentView = props.selectionMode;
+      state.leftPickerTable = `${state.currentView}-table`;
+      state.rightPickerTable = `${state.currentView}-table`;
+    };
+    const timeSpinner = vue.ref(null);
+    const timeSpinnerEnd = vue.ref(null);
+    const onToggleVisibility = (open) => {
+      var _a, _b;
+      if (open) {
+        (_a = timeSpinner == null ? void 0 : timeSpinner.value) == null ? void 0 : _a.updateScroll();
+        (_b = timeSpinnerEnd == null ? void 0 : timeSpinnerEnd.value) == null ? void 0 : _b.updateScroll();
+      }
+    };
+    const changePanelDate = (panel, type, increment, updateOtherPanel = true) => {
+      const current = new Date(state[`${panel}PanelDate`]);
+      current[`set${type}`](current[`get${type}`]() + increment);
+      state[`${panel}PanelDate`] = current;
+      if (!updateOtherPanel) {
+        return;
+      }
+      if (props.splitPanels) {
+        const otherPanel = panel === "left" ? "right" : "left";
+        if (panel === "left" && state.leftPanelDate >= state.rightPanelDate) {
+          changePanelDate(otherPanel, type, 1);
+        }
+        if (panel === "right" && state.rightPanelDate <= state.leftPanelDate) {
+          changePanelDate(otherPanel, type, -1);
+        }
+      } else {
+        const otherPanel = panel === "left" ? "right" : "left";
+        const currentDate = state[`${otherPanel}PanelDate`];
+        const temp = new Date(currentDate);
+        if (type === "Month") {
+          const nextMonthLastDate = new Date(temp.getFullYear(), temp.getMonth() + increment + 1, 0).getDate();
+          temp.setDate(Math.min(nextMonthLastDate, temp.getDate()));
+        }
+        temp[`set${type}`](temp[`get${type}`]() + increment);
+        state[`${otherPanel}PanelDate`] = temp;
+      }
+    };
+    const prevYear = (panel) => {
+      const increment = state.currentView === "year" ? -10 : -1;
+      changePanelDate(panel, "FullYear", increment);
+    };
+    const nextYear = (panel) => {
+      const increment = state.currentView === "year" ? 10 : 1;
+      changePanelDate(panel, "FullYear", increment);
+    };
+    const prevMonth = (panel) => {
+      changePanelDate(panel, "Month", -1);
+    };
+    const nextMonth = (panel) => {
+      changePanelDate(panel, "Month", 1);
+    };
+    const showYearPicker = (panel) => {
+      state[`${panel}PickerTable`] = "year-table";
+    };
+    const showMonthPicker = (panel) => {
+      state[`${panel}PickerTable`] = "month-table";
+    };
+    const panelLabelConfig = (direction) => {
+      const locale2 = "zh-CN";
+      const datePanelLabel = "[yyyy]-[mm]";
+      const date = state[`${direction}PanelDate`];
+      const {
+        labels: labels2,
+        separator
+      } = formatDateLabels(locale2, datePanelLabel, date);
+      const handler = (type) => {
+        const fn2 = type === "month" ? showMonthPicker : showYearPicker;
+        return () => fn2(direction);
+      };
+      return {
+        separator,
+        labels: labels2.map((obj) => {
+          const ret = obj;
+          ret.handler = handler(obj.type);
+          return ret;
+        })
+      };
+    };
+    const handleConfirm = (visible, type) => {
+      emit("pick", state.dates, visible, type || props.type);
+    };
+    const handleRangePick = (val, type) => {
+      console.warn("handleRangePick");
+      if (state.rangeState.selecting || state.currentView === "time") {
+        if (state.currentView === "time") {
+          state.dates = val;
+        } else {
+          const [minDate2, maxDate2] = [state.rangeState.from, val].sort(dateSorter);
+          const maxDateLastMoment = type === "upToNow" ? new Date() : new Date(new Date(new Date(maxDate2.setHours(23)).setMinutes(59)).setSeconds(59));
+          state.dates = [minDate2, maxDateLastMoment];
+          state.rangeState = {
+            from: minDate2,
+            to: maxDateLastMoment,
+            selecting: false
+          };
+        }
+        handleConfirm(false, type || "date");
+      } else {
+        state.upToNowEnable = new Date(val).getTime() < new Date().getTime();
+        state.rangeState = {
+          from: val,
+          to: null,
+          selecting: true
+        };
+      }
+    };
+    const handlePreSelection = (panelPosition, value) => {
+      state[`${panelPosition}PanelDate`] = value;
+      const currentViewType = state[`${panelPosition}PickerTable`];
+      if (currentViewType === "year-table") {
+        state[`${panelPosition}PickerTable`] = "month-table";
+      } else {
+        state[`${panelPosition}PickerTable`] = `${state.currentView}-table`;
+      }
+      if (!props.splitPanels) {
+        const otherPanel = panelPosition === "left" ? "right" : "left";
+        state[`${otherPanel}PanelDate`] = value;
+        const increment = otherPanel === "left" ? -1 : 1;
+        changePanelDate(otherPanel, "Month", increment, false);
+      }
+    };
+    const handleChangeRange = (val) => {
+      state.rangeState.to = val;
+    };
+    vue.watch(() => props.selectionMode, (v2) => {
+      state.currentView = v2 || "range";
+    });
+    const isTime = vue.computed(() => state.currentView === "time");
+    const leftDatePanelLabel = vue.computed(() => panelLabelConfig("left"));
+    const rightDatePanelLabel = vue.computed(() => panelLabelConfig("right"));
+    const leftDatePanelView = vue.computed(() => state.leftPickerTable.split("-").shift());
+    const rightDatePanelView = vue.computed(() => state.rightPickerTable.split("-").shift());
+    const leftShowLabelFirst = vue.computed(() => leftDatePanelLabel.value.labels[0].type === "year" || state.currentView === "date");
+    const leftShowLabelSecond = vue.computed(() => leftDatePanelLabel.value.labels[1].type === "year" || state.currentView === "date");
+    const rightShowLabelFirst = vue.computed(() => rightDatePanelLabel.value.labels[0].type === "year" || state.currentView === "date");
+    const rightShowLabelSecond = vue.computed(() => rightDatePanelLabel.value.labels[1].type === "year" || state.currentView === "date");
+    const preSelecting = vue.computed(() => {
+      const tableType = `${state.currentView}-table`;
+      return {
+        left: state.leftPickerTable !== tableType,
+        right: state.rightPickerTable !== tableType
+      };
+    });
+    const panelPickerHandlers = vue.computed(() => ({
+      left: preSelecting.value.left ? handlePreSelection.bind("left") : handleRangePick,
+      right: preSelecting.value.right ? handlePreSelection.bind("right") : handleRangePick
+    }));
+    return __spreadProps(__spreadValues({}, vue.toRefs(state)), {
+      isTime,
+      prevYear,
+      nextYear,
+      prevMonth,
+      nextMonth,
+      leftDatePanelLabel,
+      rightDatePanelLabel,
+      leftDatePanelView,
+      rightDatePanelView,
+      leftShowLabelFirst,
+      leftShowLabelSecond,
+      rightShowLabelFirst,
+      rightShowLabelSecond,
+      preSelecting,
+      panelPickerHandlers,
+      reset: reset2,
+      onToggleVisibility,
+      handleRangePick,
+      handleChangeRange
+    });
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": ["bk-picker-panel-body-wrapper", "bk-date-picker-with-range", this.shortcuts.length || this.$slots.shortcuts ? "bk-picker-panel-with-sidebar" : ""],
+      "onMousedown": (e2) => {
+        e2.preventDefault();
+      }
+    }, [vue.createVNode("div", {
+      "class": ["bk-picker-panel-body", this.showTime ? "bk-picker-panel-body-time" : "bk-picker-panel-body-date"]
+    }, [vue.withDirectives(vue.createVNode("div", {
+      "class": "bk-picker-panel-content bk-picker-panel-content-left",
+      "style": "width: 261px;"
+    }, [vue.withDirectives(vue.createVNode("div", {
+      "class": "bk-date-picker-header"
+    }, [vue.createVNode("span", {
+      "class": iconBtnCls("prev", "-double"),
+      "onClick": () => this.prevYear("left")
+    }, [vue.createVNode(angleDoubleLeft, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), this.leftPickerTable === "date-table" ? vue.withDirectives(vue.createVNode("span", {
+      "class": iconBtnCls("prev"),
+      "onClick": () => this.prevMonth("left")
+    }, [vue.createVNode(angleLeft, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), [[vue.vShow, this.currentView === "date"]]) : "", this.leftDatePanelLabel && Object.keys(this.leftDatePanelLabel).length > 0 ? vue.createVNode("span", null, [vue.withDirectives(vue.createVNode("span", {
+      "class": "bk-date-picker-header-label",
+      "onClick": () => this.leftDatePanelLabel.labels[0].handler
+    }, [this.leftDatePanelLabel.labels[0].label]), [[vue.vShow, this.leftShowLabelFirst]]), this.leftDatePanelView === "date" ? ` ${this.leftDatePanelLabel.separator} ` : " ", vue.withDirectives(vue.createVNode("span", {
+      "class": "bk-date-picker-header-label",
+      "onClick": () => this.leftDatePanelLabel.labels[1].handler
+    }, [this.leftDatePanelLabel.labels[1].label]), [[vue.vShow, this.leftShowLabelSecond]])]) : "", this.splitPanels || this.leftPickerTable !== "date-table" ? vue.createVNode("span", {
+      "class": iconBtnCls("next", "-double"),
+      "onClick": () => this.nextYear("left")
+    }, [vue.createVNode(angleDoubleRight, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]) : "", this.splitPanels || this.leftPickerTable === "date-table" ? vue.withDirectives(vue.createVNode("span", {
+      "class": iconBtnCls("next"),
+      "onClick": () => this.nextMonth("left")
+    }, [vue.createVNode(angleRight, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), [[vue.vShow, this.currentView === "date"]]) : ""]), [[vue.vShow, this.currentView !== "time"]]), this.currentView !== "time" ? (() => {
+      switch (this.leftPickerTable) {
+        case "date-table":
+          return vue.createVNode(DateTable, {
+            "selectionMode": "range",
+            "tableDate": this.leftPanelDate,
+            "disableDate": this.disableDate,
+            "rangeState": this.rangeState,
+            "modelValue": this.preSelecting.left ? [this.dates[0]] : this.dates,
+            "focusedDate": this.focusedDate,
+            "onChangeRange": this.handleChangeRange,
+            "onPick": this.panelPickerHandlers.left
+          }, null);
+        default:
+          return null;
+      }
+    })() : ""]), [[vue.vShow, !this.isTime]]), vue.withDirectives(vue.createVNode("div", {
+      "class": "bk-picker-panel-content bk-picker-panel-content-right",
+      "style": "width: 261px;"
+    }, [vue.withDirectives(vue.createVNode("div", {
+      "class": "bk-date-picker-header"
+    }, [this.splitPanels || this.rightPickerTable !== "date-table" ? vue.createVNode("span", {
+      "class": iconBtnCls("prev", "-double"),
+      "onClick": () => this.prevYear("right")
+    }, [vue.createVNode(angleDoubleLeft, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]) : "", this.splitPanels && this.rightPickerTable === "date-table" ? vue.withDirectives(vue.createVNode("span", {
+      "class": iconBtnCls("prev", "-double"),
+      "onClick": () => this.prevMonth("right")
+    }, [vue.createVNode(angleLeft, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), [[vue.vShow, this.currentView === "date"]]) : "", this.rightDatePanelLabel && Object.keys(this.rightDatePanelLabel).length > 0 ? vue.createVNode("span", null, [vue.withDirectives(vue.createVNode("span", {
+      "class": "bk-date-picker-header-label",
+      "onClick": () => this.rightDatePanelLabel.labels[0].handler
+    }, [this.rightDatePanelLabel.labels[0].label]), [[vue.vShow, this.rightShowLabelFirst]]), this.rightDatePanelView === "date" ? ` ${this.rightDatePanelLabel.separator} ` : " ", vue.withDirectives(vue.createVNode("span", {
+      "class": "bk-date-picker-header-label",
+      "onClick": () => this.rightDatePanelLabel.labels[1].handler
+    }, [this.rightDatePanelLabel.labels[1].label]), [[vue.vShow, this.rightShowLabelSecond]])]) : "", this.upToNow ? (() => {
+      if ((this.rangeState.selecting || this.currentView === "time") && this.upToNowEnable) {
+        return vue.createVNode("span", {
+          "class": "up-to-now",
+          "onClick": () => this.handleRangePick(new Date(), "upToNow")
+        }, [vue.createTextVNode("\u81F3\u4ECA")]);
+      }
+      return vue.createVNode("span", {
+        "class": "up-to-now disabled"
+      }, [vue.createTextVNode("\u81F3\u4ECA")]);
+    })() : "", vue.createVNode("span", {
+      "class": iconBtnCls("next", "-double"),
+      "onClick": () => this.nextYear("right")
+    }, [vue.createVNode(angleDoubleRight, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), this.rightPickerTable === "date-table" ? vue.withDirectives(vue.createVNode("span", {
+      "class": iconBtnCls("next"),
+      "onClick": () => this.nextMonth("right")
+    }, [vue.createVNode(angleRight, {
+      "style": {
+        fontSize: "20px",
+        lineHeight: 1
+      }
+    }, null)]), [[vue.vShow, this.currentView === "date"]]) : ""]), [[vue.vShow, this.currentView !== "time"]]), this.currentView !== "time" ? (() => {
+      switch (this.rightPickerTable) {
+        case "date-table":
+          return vue.createVNode(DateTable, {
+            "selectionMode": "range",
+            "tableDate": this.rightPanelDate,
+            "disableDate": this.disableDate,
+            "rangeState": this.rangeState,
+            "modelValue": this.preSelecting.right ? [this.dates[this.dates.length - 1]] : this.dates,
+            "focusedDate": this.focusedDate,
+            "onChangeRange": this.handleChangeRange,
+            "onPick": this.panelPickerHandlers.right
+          }, null);
+        default:
+          return null;
+      }
+    })() : ""]), [[vue.vShow, !this.isTime]])])]);
+  }
+});
 const datePickerProps = {
   type: {
     type: String,
@@ -9460,7 +9875,17 @@ var Component = vue.defineComponent({
           "appendToBody": this.appendToBody,
           "onClick": this.handleTransferClick
         }, {
-          default: () => [this.panel === "DateRangePanel" ? vue.createVNode("div", null, [vue.createTextVNode("range")]) : vue.createVNode(DatePanel, {
+          default: () => [this.panel === "DateRangePanel" ? vue.createVNode(DateRangePanel, {
+            "ref": "pickerPanelRef",
+            "shortcuts": this.shortcuts,
+            "modelValue": this.internalValue,
+            "type": this.type,
+            "selectionMode": this.selectionMode,
+            "startDate": this.startDate,
+            "disableDate": this.disableDate,
+            "focusedDate": this.focusedDate,
+            "onPick": this.onPick
+          }, null) : vue.createVNode(DatePanel, {
             "ref": "pickerPanelRef",
             "shortcuts": this.shortcuts,
             "multiple": this.multiple,