bkui-vue 2.0.1-beta.1 → 2.0.1-beta.11

package/lib/cascader/cascader.css

@@ -281,10 +281,10 @@
   cursor: not-allowed;
   background-color: white;
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node.is-disabled .icon-angle-right {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node.is-disabled .bk-icon-angle-right {
   color: #c4c6cc;
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .icon-angle-right {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-icon-angle-right {
   position: absolute;
   top: 50%;
   right: 0;
@@ -292,7 +292,7 @@
   color: #979ba5;
   transform: translateY(-50%);
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .icon-spinner {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-icon-spinner {
   position: absolute;
   top: 50%;
   right: 5px;

package/lib/cascader/cascader.less

@@ -1,7 +1,7 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/mixins.less';
 
-.@{bk-prefix}-cascader-popover.@{bk-prefix}-pop2-content.bk-popover {
+.@{bk-prefix}-cascader-popover.@{bk-prefix}-pop2-content.@{bk-prefix}-popover {
   padding: 0;
 }
 .@{bk-prefix}-cascader-popover-wrapper {
@@ -240,12 +240,12 @@
         cursor: not-allowed;
         background-color: @white-color;
 
-        .icon-angle-right {
+        .@{bk-prefix}-icon-angle-right {
           color: @light-gray;
         }
       }
 
-      .icon-angle-right {
+      .@{bk-prefix}-icon-angle-right {
         position: absolute;
         top: 50%;
         right: 0;
@@ -254,7 +254,7 @@
         transform: translateY(-50%);
       }
 
-      .icon-spinner {
+      .@{bk-prefix}-icon-spinner {
         position: absolute;
         top: 50%;
         right: 5px;

package/lib/cascader/cascader.variable.css

@@ -410,10 +410,10 @@
   cursor: not-allowed;
   background-color: white;
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node.is-disabled .icon-angle-right {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node.is-disabled .bk-icon-angle-right {
   color: #c4c6cc;
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .icon-angle-right {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-icon-angle-right {
   position: absolute;
   top: 50%;
   right: 0;
@@ -421,7 +421,7 @@
   color: #979ba5;
   transform: translateY(-50%);
 }
-.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .icon-spinner {
+.bk-cascader-panel-wrapper .bk-cascader-panel .bk-cascader-node .bk-icon-spinner {
   position: absolute;
   top: 50%;
   right: 5px;

package/lib/cascader/index.js

@@ -883,6 +883,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var t = (0,config_provider_namespaceObject.useLocale)('cascader');
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
     var store = props.store;
     var menus = (0,external_vue_namespaceObject.reactive)({
       list: [props.store.getNodes()]
@@ -1031,9 +1033,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     };
     var iconRender = function iconRender(node) {
       return node.loading ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
-        "class": "icon-spinner"
+        "class": resolveClassName('icon-spinner')
       }, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, {
-        "class": "icon-angle-right"
+        "class": resolveClassName('icon-angle-right')
       }, null);
     };
     (0,external_vue_namespaceObject.watch)(function () {
@@ -1048,8 +1050,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }, function (value) {
       menus.list = [value.getNodes()];
     });
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
     return {
       menus: menus,
       activePath: activePath,

package/lib/color-picker/color-picker.css

@@ -53,7 +53,7 @@
   box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
   transition: border 0.2s, box-shadow 0.2s;
 }
-.bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
+.bk-color-picker.bk-color-picker-show-dropdown .bk-icon-angle-down {
   transform: rotate(-180deg);
   transition: transform 0.3s;
 }
@@ -65,7 +65,7 @@
 .bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
   color: #3a84ff;
 }
-.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
+.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .bk-icon-angle-down {
   color: #3a84ff;
 }
 .bk-color-picker .bk-color-picker-color {
@@ -102,7 +102,7 @@
   margin-right: 5px;
   transform: rotate(180deg);
 }
-.bk-color-picker .bk-color-picker-icon .icon-angle-down {
+.bk-color-picker .bk-color-picker-icon .bk-icon-angle-down {
   position: absolute;
   right: 4px;
   display: flex;

package/lib/color-picker/color-picker.less

@@ -65,7 +65,7 @@
     box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
     transition: border .2s, box-shadow .2s;
 
-    .icon-angle-down {
+    .@{bk-prefix}-icon-angle-down {
       transform: rotate(-180deg);
       transition: transform .3s;
     }
@@ -80,7 +80,7 @@
       color: #3a84ff;
     }
 
-    .@{bk-prefix}-color-picker-icon .icon-angle-down {
+    .@{bk-prefix}-color-picker-icon .@{bk-prefix}-icon-angle-down {
       color: #3a84ff;
     }
   }
@@ -124,7 +124,7 @@
     transform: rotate(180deg);
 
 
-    .icon-angle-down {
+    .@{bk-prefix}-icon-angle-down {
       position: absolute;
       right: 4px;
       display: flex;

package/lib/color-picker/color-picker.variable.css

@@ -182,7 +182,7 @@
   box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
   transition: border 0.2s, box-shadow 0.2s;
 }
-.bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
+.bk-color-picker.bk-color-picker-show-dropdown .bk-icon-angle-down {
   transform: rotate(-180deg);
   transition: transform 0.3s;
 }
@@ -194,7 +194,7 @@
 .bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
   color: #3a84ff;
 }
-.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
+.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .bk-icon-angle-down {
   color: #3a84ff;
 }
 .bk-color-picker .bk-color-picker-color {
@@ -231,7 +231,7 @@
   margin-right: 5px;
   transform: rotate(180deg);
 }
-.bk-color-picker .bk-color-picker-icon .icon-angle-down {
+.bk-color-picker .bk-color-picker-icon .bk-icon-angle-down {
   position: absolute;
   right: 4px;
   display: flex;

package/lib/color-picker/index.js

@@ -2582,7 +2582,7 @@ var whiteColorObj = formatColor('#FFFFFF');
       }, [(0,external_vue_namespaceObject.createVNode)("span", null, [colorStr.value])]) : undefined, (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-icon'))
       }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleUp, {
-        "class": "icon-angle-down"
+        "class": resolveClassName('icon-angle-down')
       }, null)])]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
         "name": "bk-fade-down-transition"
       }, {

package/lib/date-picker/base/year-table.d.ts

@@ -75,7 +75,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (cell: any) => void;
     handleMouseMove: (cell: any) => void;
     resolveClassName: (cls: string) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "pick-click" | "change-range")[], "pick" | "pick-click" | "change-range", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "pick-click" | "changeRange")[], "pick" | "pick-click" | "changeRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly tableDate: {
         readonly type: DateConstructor;
         readonly required: true;
@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onPick?: (...args: any[]) => any;
     "onPick-click"?: (...args: any[]) => any;
-    "onChange-range"?: (...args: any[]) => any;
+    onChangeRange?: (...args: any[]) => any;
 }, {
     readonly rangeState: Record<string, any>;
     readonly cellClass: Function;

package/lib/date-picker/index.js

@@ -43,7 +43,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["BKPopover"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.BKPopover, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["capitalize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.capitalize, ["getFullscreenRoot"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.getFullscreenRoot, ["resolveClassName"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.resolveClassName, ["scrollTop"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.scrollTop, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.useFormItem, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+const shared_namespaceObject = x({ ["BKPopover"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.BKPopover, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["capitalize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.capitalize, ["getFullscreenRoot"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.getFullscreenRoot, ["scrollTop"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.scrollTop, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.useFormItem, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -1099,6 +1099,10 @@ var typeValueResolver = {
       return src_fecha.parse(text, format || 'yyyy-MM-dd');
     }
   },
+  yearrange: {
+    formatter: rangeFormatter,
+    parser: rangeParser
+  },
   multiple: {
     formatter: function formatter(value, format) {
       return value.filter(Boolean).map(function (date) {
@@ -1193,6 +1197,7 @@ var DEFAULT_FORMATS = {
   month: 'yyyy-MM',
   monthrange: 'yyyy-MM',
   year: 'yyyy',
+  yearrange: 'yyyy',
   datetime: 'yyyy-MM-dd HH:mm:ss',
   time: 'HH:mm:ss',
   timerange: 'HH:mm:ss',
@@ -1271,7 +1276,9 @@ var timePickerKey = Symbol('time-picker');
 // }
 function iconBtnCls(direction) {
   var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return [(0,shared_namespaceObject.resolveClassName)('picker-panel-icon-btn'), (0,shared_namespaceObject.resolveClassName)("date-picker-".concat(direction, "-btn")), (0,shared_namespaceObject.resolveClassName)("date-picker-".concat(direction, "-btn-arrow").concat(type))];
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  return [resolveClassName('picker-panel-icon-btn'), resolveClassName("date-picker-".concat(direction, "-btn")), resolveClassName("date-picker-".concat(direction, "-btn-arrow").concat(type))];
 }
 var getDayCountOfMonth = function getDayCountOfMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
@@ -1363,7 +1370,15 @@ var isInRange = function isInRange(time, a, b) {
   if (!a || !b) {
     return false;
   }
-  var _sort = [a, b].sort(),
+  var _sort = [a, b].sort(function (x, y) {
+      if (x - y > 0) {
+        return 1;
+      }
+      if (x - y < 0) {
+        return -1;
+      }
+      return 0;
+    }),
     _sort2 = _slicedToArray(_sort, 2),
     start = _sort2[0],
     end = _sort2[1];
@@ -1670,6 +1685,8 @@ var monthTableProps = {
         maxDay = _dates$value$map2[1];
       var rangeStart = props.rangeState.from && clearHours(props.rangeState.from);
       var rangeEnd = props.rangeState.to && clearHours(props.rangeState.to);
+      var now = new Date();
+      var currentMonth = clearHours(new Date(now.getFullYear(), now.getMonth(), 1));
       for (var i = 0; i < 12; i++) {
         var cell = JSON.parse(JSON.stringify(cellTmpl));
         cell.date = new Date(tableYear, i, 1);
@@ -1682,6 +1699,7 @@ var monthTableProps = {
         cell.start = isRange && time === minDay;
         cell.end = isRange && time === maxDay;
         cell.focused = day === focusedDate;
+        cell.isCurrentMonth = day === currentMonth;
         cells.push(cell);
       }
       return cells;
@@ -1692,7 +1710,7 @@ var monthTableProps = {
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var getCellCls = function getCellCls(cell) {
-      return [resolveClassName('date-picker-cells-cell'), _defineProperty(_defineProperty(_defineProperty({}, resolveClassName('date-picker-cells-cell-selected'), cell.selected), resolveClassName('date-picker-cells-cell-disabled'), cell.disabled), resolveClassName('date-picker-cells-cell-range'), cell.range && !cell.start && !cell.end) // resolveClassName('date-picker-cells-cell'),
+      return [resolveClassName('date-picker-cells-cell'), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, resolveClassName('date-picker-cells-cell-selected'), cell.selected), resolveClassName('date-picker-cells-cell-disabled'), cell.disabled), resolveClassName('date-picker-cells-cell-today'), cell.isCurrentMonth), resolveClassName('date-picker-cells-cell-range'), cell.range && !cell.start && !cell.end) // resolveClassName('date-picker-cells-cell'),
       // {
       //   [resolveClassName('date-picker-cells-cell-today')]: cell.type === 'today',
       //   [resolveClassName('date-picker-cells-cell-range')]: cell.range && !cell.start && !cell.end,
@@ -1745,6 +1763,7 @@ var monthTableProps = {
 ;// CONCATENATED MODULE: ../../packages/date-picker/src/base/year-table.tsx
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -1817,7 +1836,7 @@ var yearTableProps = {
 /* harmony default export */ const year_table = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'YearTable',
   props: yearTableProps,
-  emits: ['pick', 'pick-click', 'change-range'],
+  emits: ['pick', 'pick-click', 'changeRange'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var dates = (0,external_vue_namespaceObject.computed)(function () {
@@ -1827,6 +1846,7 @@ var yearTableProps = {
       var rangeSelecting = selectionMode === 'range' && rangeState.selecting;
       return rangeSelecting ? [rangeState.from] : modelValue;
     });
+    var isRange = props.selectionMode === 'range';
     var startYear = (0,external_vue_namespaceObject.computed)(function () {
       return Math.floor(props.tableDate.getFullYear() / 10) * 10;
     });
@@ -1841,13 +1861,25 @@ var yearTableProps = {
         return clearHours(new Date(date.getFullYear(), 0, 1));
       });
       var focusedDate = clearHours(new Date(props.focusedDate.getFullYear(), 0, 1));
+      var currentYear = clearHours(new Date(new Date().getFullYear(), 0, 1));
+      var _dates$value$map = dates.value.map(clearHours),
+        _dates$value$map2 = _slicedToArray(_dates$value$map, 2),
+        minDay = _dates$value$map2[0],
+        maxDay = _dates$value$map2[1];
+      var rangeStart = props.rangeState.from && clearHours(props.rangeState.from);
+      var rangeEnd = props.rangeState.to && clearHours(props.rangeState.to);
       for (var i = 0; i < 10; i++) {
         var cell = JSON.parse(JSON.stringify(cellTmpl));
         cell.date = new Date(startYear.value + i, 0, 1);
-        cell.disabled = typeof props.disabledDate === 'function' && props.disabledDate(cell.date) && props.selectionMode === 'year';
+        cell.disabled = typeof props.disabledDate === 'function' && props.disabledDate(cell.date);
         var day = clearHours(cell.date);
+        var time = cell.date && clearHours(cell.date);
+        cell.range = isRange && isInRange(time, rangeStart, rangeEnd);
+        cell.start = isRange && time === minDay;
+        cell.end = isRange && time === maxDay;
         cell.selected = selectedDays.includes(day);
         cell.focused = day === focusedDate;
+        cell.isCurrent = day === currentYear;
         cells.push(cell);
       }
       return cells;
@@ -1855,7 +1887,7 @@ var yearTableProps = {
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var getCellCls = function getCellCls(cell) {
-      return [resolveClassName('date-picker-cells-cell'), _defineProperty(_defineProperty(_defineProperty({}, resolveClassName('date-picker-cells-cell-selected'), cell.selected), resolveClassName('date-picker-cells-cell-disabled'), cell.disabled), resolveClassName('date-picker-cells-cell-range'), cell.range && !cell.start && !cell.end)];
+      return [resolveClassName('date-picker-cells-cell'), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, resolveClassName('date-picker-cells-cell-selected'), cell.selected), resolveClassName('date-picker-cells-cell-disabled'), cell.disabled), resolveClassName('date-picker-cells-cell-today'), cell.isCurrent), resolveClassName('date-picker-cells-cell-range'), cell.range && !cell.start && !cell.end)];
     };
     var handleClick = function handleClick(cell) {
       if (cell.disabled || cell.type === 'weekLabel') {
@@ -1873,7 +1905,7 @@ var yearTableProps = {
         return;
       }
       var newDate = cell.date;
-      emit('change-range', newDate);
+      emit('changeRange', newDate);
     };
     return {
       cells: cells,
@@ -1942,7 +1974,7 @@ var datePickerProps = {
     type: String,
     "default": 'date',
     validator: function validator(value) {
-      var validList = ['year', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
+      var validList = ['year', 'yearrange', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
       if (validList.indexOf(value) < 0) {
         console.error("type property is not valid: '".concat(value, "'"));
         return false;
@@ -3519,6 +3551,7 @@ function date_range_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
 
 
 
+
 // import MonthTable from '../base/month-table';
 // import YearTable from '../base/year-table';
 var dateRangePanelProps = {
@@ -3529,7 +3562,7 @@ var dateRangePanelProps = {
     type: String,
     "default": 'date',
     validator: function validator(value) {
-      var validList = ['year', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
+      var validList = ['year', 'yearrange', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
       if (validList.indexOf(value) < 0) {
         console.error("type property is not valid: '".concat(value, "'"));
         return false;
@@ -3617,7 +3650,14 @@ var dateRangePanelProps = {
       minDate = _props$modelValue$map2[0],
       maxDate = _props$modelValue$map2[1];
     var leftPanelDate = props.startDate ? props.startDate : minDate;
-    var rightPanelDate = props.type === 'monthrange' ? new Date(leftPanelDate.getFullYear() + 1, leftPanelDate.getMonth(), 1) : new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
+    var rightPanelDate;
+    if (props.type === 'monthrange') {
+      rightPanelDate = new Date(leftPanelDate.getFullYear() + 1, leftPanelDate.getMonth(), 1);
+    } else if (props.type === 'yearrange') {
+      rightPanelDate = new Date(leftPanelDate.getFullYear() + 10, leftPanelDate.getMonth(), 1);
+    } else {
+      rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
+    }
     var state = (0,external_vue_namespaceObject.reactive)({
       currentView: props.selectionMode || 'date',
       leftPickerTable: "".concat(props.selectionMode, "-table"),
@@ -3673,11 +3713,13 @@ var dateRangePanelProps = {
       }
       if (props.splitPanels) {
         var otherPanel = panel === 'left' ? 'right' : 'left';
-        if (panel === 'left' && state.leftPanelDate >= state.rightPanelDate) {
-          changePanelDate(otherPanel, type, 1);
+        if (panel === 'left' && (state.leftPanelDate >= state.rightPanelDate || Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10)) {
+          // changePanelDate(otherPanel, type, 1);
+          changePanelDate(otherPanel, type, state.currentView === 'year' ? 10 : 1);
         }
-        if (panel === 'right' && state.rightPanelDate <= state.leftPanelDate) {
-          changePanelDate(otherPanel, type, -1);
+        if (panel === 'right' && (state.rightPanelDate <= state.leftPanelDate || Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10)) {
+          // changePanelDate(otherPanel, type, -1);
+          changePanelDate(otherPanel, type, state.currentView === 'year' ? -10 : -1);
         }
       } else {
         var _otherPanel = panel === 'left' ? 'right' : 'left';
@@ -3845,7 +3887,15 @@ var dateRangePanelProps = {
     };
     function setPanelDates(leftPanelDate) {
       state.leftPanelDate = leftPanelDate;
-      var rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
+      // const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
+      var rightPanelDate;
+      if (props.type === 'monthrange') {
+        rightPanelDate = new Date(leftPanelDate.getFullYear() + 1, leftPanelDate.getMonth(), 1);
+      } else if (props.type === 'yearrange') {
+        rightPanelDate = new Date(leftPanelDate.getFullYear() + 10, leftPanelDate.getMonth(), 1);
+      } else {
+        rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
+      }
       var splitRightPanelDate = state.dates[1] ? state.dates[1].getTime() : state.dates[1];
       state.rightPanelDate = props.splitPanels ? new Date(Math.max(splitRightPanelDate, rightPanelDate.getTime())) : rightPanelDate;
     }
@@ -4056,12 +4106,12 @@ var dateRangePanelProps = {
       "onClick": function onClick() {
         return _this.leftDatePanelLabel.labels[0].handler;
       }
-    }, [this.leftDatePanelLabel.labels[0].label]), [[external_vue_namespaceObject.vShow, this.leftShowLabelFirst]]), this.leftDatePanelView === 'date' ? " ".concat(this.leftDatePanelLabel.separator, " ") : ' ', (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("span", {
+    }, [this.type === 'yearrange' ? "".concat(Math.floor(this.leftDatePanelLabel.labels[0].label / 10) * 10, " - ").concat(Math.ceil(this.leftDatePanelLabel.labels[0].label / 10) * 10 - 1) : this.leftDatePanelLabel.labels[0].label]), [[external_vue_namespaceObject.vShow, this.leftShowLabelFirst]]), this.leftDatePanelView === 'date' ? " ".concat(this.leftDatePanelLabel.separator, " ") : ' ', (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("span", {
       "class": this.resolveClassName('date-picker-header-label'),
       "onClick": function onClick() {
         return _this.leftDatePanelLabel.labels[1].handler;
       }
-    }, [this.leftDatePanelLabel.labels[1].label]), [[external_vue_namespaceObject.vShow, this.leftShowLabelSecond]])]) : '', this.splitPanels || this.leftPickerTable !== 'date-table' && this.leftPickerTable !== 'month-table' ? (0,external_vue_namespaceObject.createVNode)("span", {
+    }, [this.leftDatePanelLabel.labels[1].label]), [[external_vue_namespaceObject.vShow, this.leftShowLabelSecond]])]) : '', this.splitPanels || this.leftPickerTable !== 'date-table' && this.leftPickerTable !== 'month-table' && this.leftPickerTable !== 'year-table' ? (0,external_vue_namespaceObject.createVNode)("span", {
       "class": iconBtnCls('next', '-double'),
       "onClick": function onClick() {
         return _this.nextYear('left');
@@ -4107,6 +4157,17 @@ var dateRangePanelProps = {
             "onChangeRange": _this.handleChangeRange,
             "onPick": _this.panelPickerHandlers.left
           }, null);
+        case 'year-table':
+          return (0,external_vue_namespaceObject.createVNode)(year_table, {
+            "selectionMode": "range",
+            "tableDate": _this.leftPanelDate,
+            "disabledDate": _this.disabledDate,
+            "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;
       }
@@ -4115,7 +4176,7 @@ var dateRangePanelProps = {
       "style": "width: 261px;"
     }, [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
       "class": this.resolveClassName('date-picker-header')
-    }, [this.splitPanels || this.rightPickerTable !== 'date-table' && this.rightPickerTable !== 'month-table' ? (0,external_vue_namespaceObject.createVNode)("span", {
+    }, [this.splitPanels || this.rightPickerTable !== 'date-table' && this.rightPickerTable !== 'month-table' && this.rightPickerTable !== 'year-table' ? (0,external_vue_namespaceObject.createVNode)("span", {
       "class": iconBtnCls('prev', '-double'),
       "onClick": function onClick() {
         return _this.prevYear('right');
@@ -4142,7 +4203,7 @@ var dateRangePanelProps = {
       "onClick": function onClick() {
         return _this.rightDatePanelLabel.labels[0].handler;
       }
-    }, [this.rightDatePanelLabel.labels[0].label]), [[external_vue_namespaceObject.vShow, this.rightShowLabelFirst]]), this.rightDatePanelView === 'date' ? " ".concat(this.rightDatePanelLabel.separator, " ") : ' ', (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("span", {
+    }, [this.type === 'yearrange' ? "".concat(Math.floor(this.rightDatePanelLabel.labels[0].label / 10) * 10, " - ").concat(Math.ceil(this.rightDatePanelLabel.labels[0].label / 10) * 10 - 1) : this.rightDatePanelLabel.labels[0].label]), [[external_vue_namespaceObject.vShow, this.rightShowLabelFirst]]), this.rightDatePanelView === 'date' ? " ".concat(this.rightDatePanelLabel.separator, " ") : ' ', (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("span", {
       "class": this.resolveClassName('date-picker-header-label'),
       "onClick": function onClick() {
         return _this.rightDatePanelLabel.labels[1].handler;
@@ -4205,6 +4266,17 @@ var dateRangePanelProps = {
             "onChangeRange": _this.handleChangeRange,
             "onPick": _this.panelPickerHandlers.right
           }, null);
+        case 'year-table':
+          return (0,external_vue_namespaceObject.createVNode)(year_table, {
+            "selectionMode": "range",
+            "tableDate": _this.rightPanelDate,
+            "disabledDate": _this.disabledDate,
+            "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;
       }
@@ -4336,6 +4408,10 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (_type.match(/^month/)) {
         type = 'month';
       }
+      // 增加了 yearrange
+      if (_type.match(/^year/)) {
+        type = 'year';
+      }
       // return ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
       state.selectionMode = ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
       return state.selectionMode;
@@ -4367,7 +4443,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }) : formatDate(publicVModelValue.value, props.type, props.multiple, props.format);
     });
     var panel = (0,external_vue_namespaceObject.computed)(function () {
-      var isRange = props.type === 'daterange' || props.type === 'datetimerange' || props.type === 'monthrange';
+      var isRange = props.type === 'daterange' || props.type === 'datetimerange' || props.type === 'monthrange' || props.type === 'yearrange';
       return isRange ? 'DateRangePanel' : 'DatePanel';
     });
     var opened = (0,external_vue_namespaceObject.computed)(function () {
@@ -5134,10 +5210,9 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       return panel.value === 'RangeTimePickerPanel' ? props.allowCrossDay : false;
     });
     var inputRef = (0,external_vue_namespaceObject.ref)(null);
-    var inputFocus = function inputFocus() {
-      var _inputRef$value;
-      inputRef === null || inputRef === void 0 || (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
-    };
+    // const inputFocus = () => {
+    //   inputRef?.value?.focus();
+    // };
     var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
       proxy = _getCurrentInstance.proxy;
     var pickerDropdownRef = (0,external_vue_namespaceObject.ref)(null);
@@ -5205,12 +5280,14 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
         state.visible = props.open;
       }
       // this.$on('focus-input', () => this.focus())
-      (0,external_vue_namespaceObject.provide)(datePickerKey, {
-        props: props,
-        focus: function focus() {
-          return inputFocus();
-        }
-      });
+      // provide(datePickerKey, {
+      //   props,
+      //   focus: () => inputFocus(),
+      // });
+    });
+    (0,external_vue_namespaceObject.provide)(timePickerKey, {
+      panelDate: state.focusedDate,
+      parentName: proxy.$options.name
     });
     var pickerPanelRef = (0,external_vue_namespaceObject.ref)(null);
     var handleClose = function handleClose(e) {
@@ -5238,9 +5315,9 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       state.disableClickOutSide = false;
     };
     var handleIconClick = function handleIconClick() {
-      var _inputRef$value2, _inputRef$value3;
-      inputRef === null || inputRef === void 0 || (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.focus();
-      inputRef === null || inputRef === void 0 || (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.click();
+      var _inputRef$value, _inputRef$value2;
+      inputRef === null || inputRef === void 0 || (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
+      inputRef === null || inputRef === void 0 || (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.click();
     };
     var handleInputMouseenter = function handleInputMouseenter() {
       if (props.readonly || props.disabled) {
@@ -5266,8 +5343,8 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
         emit('change', publicStringValue.value, type);
         // this.dispatch('bk-form-item', 'form-change');
         if (props.type.indexOf('time') < 0) {
-          var _inputRef$value4;
-          inputRef === null || inputRef === void 0 || (_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 || _inputRef$value4.blur();
+          var _inputRef$value3;
+          inputRef === null || inputRef === void 0 || (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.blur();
         }
       });
     };
@@ -5417,14 +5494,14 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }
     };
     var onPickSuccess = function onPickSuccess() {
-      var _inputRef$value5;
+      var _inputRef$value4;
       state.visible = false;
       // 点击 shortcuts 会关闭弹层时，如果不在 nextTick 里触发 pick-success，那么会导致触发 pick-success 的时候，
       // v-model 的值还是之前的值
       (0,external_vue_namespaceObject.nextTick)(function () {
         emit('pick-success');
       });
-      inputRef === null || inputRef === void 0 || (_inputRef$value5 = inputRef.value) === null || _inputRef$value5 === void 0 || _inputRef$value5.blur();
+      inputRef === null || inputRef === void 0 || (_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 || _inputRef$value4.blur();
       reset();
     };
     var onPick = function onPick(_dates) {

package/lib/date-picker/interface.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedPlacement } from '@popperjs/core';
 import type { DatePickerProps } from './props';
 export type DatePickerPlacementType = ComputedPlacement;
-export type DatePickerTypeType = 'year' | 'month' | 'monthrange' | 'date' | 'daterange' | 'datetime' | 'datetimerange';
+export type DatePickerTypeType = 'year' | 'yearrange' | 'month' | 'monthrange' | 'date' | 'daterange' | 'datetime' | 'datetimerange';
 export type TimePickerTypeType = 'time' | 'timerange';
 export type PickerTypeType = DatePickerTypeType | TimePickerTypeType;
 export interface IDatePickerShortcut {