bkui-vue 1.0.3-beta.9 → 2.0.1-beta.1

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, ["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, ["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 });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -442,25 +442,7 @@ var pickerDropdownProps = {
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+    @@ -23,68 +24,72 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
@@ -1105,6 +1087,10 @@ var typeValueResolver = {
       return src_fecha.parse(text, format || 'yyyy-MM-dd');
     }
   },
+  monthrange: {
+    formatter: rangeFormatter,
+    parser: rangeParser
+  },
   year: {
     formatter: function formatter(value, format) {
       return dateFormat(value, format);
@@ -1205,6 +1191,7 @@ var extractTime = function extractTime(date) {
 var DEFAULT_FORMATS = {
   date: 'yyyy-MM-dd',
   month: 'yyyy-MM',
+  monthrange: 'yyyy-MM',
   year: 'yyyy',
   datetime: 'yyyy-MM-dd HH:mm:ss',
   time: 'HH:mm:ss',
@@ -1581,6 +1568,7 @@ var dateTableProps = {
 ;// CONCATENATED MODULE: ../../packages/date-picker/src/base/month-table.tsx
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -1653,7 +1641,7 @@ var monthTableProps = {
 /* harmony default export */ const month_table = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'MonthTable',
   props: monthTableProps,
-  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 () {
@@ -1663,6 +1651,7 @@ var monthTableProps = {
       var rangeSelecting = selectionMode === 'range' && rangeState.selecting;
       return rangeSelecting ? [rangeState.from] : modelValue;
     });
+    var isRange = props.selectionMode === 'range';
     var cells = (0,external_vue_namespaceObject.computed)(function () {
       var cells = [];
       var cellTmpl = {
@@ -1675,13 +1664,23 @@ var monthTableProps = {
         return clearHours(new Date(date.getFullYear(), date.getMonth(), 1));
       });
       var focusedDate = clearHours(new Date(props.focusedDate.getFullYear(), props.focusedDate.getMonth(), 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 < 12; i++) {
         var cell = JSON.parse(JSON.stringify(cellTmpl));
         cell.date = new Date(tableYear, i, 1);
         cell.text = tCell(i + 1);
         var day = clearHours(cell.date);
-        cell.disabled = typeof props.disabledDate === 'function' && props.disabledDate(cell.date) && props.selectionMode === 'month';
+        var time = cell.date && clearHours(cell.date);
+        cell.disabled = typeof props.disabledDate === 'function' && props.disabledDate(cell.date);
         cell.selected = selectedDays.includes(day);
+        cell.range = isRange && isInRange(time, rangeStart, rangeEnd);
+        cell.start = isRange && time === minDay;
+        cell.end = isRange && time === maxDay;
         cell.focused = day === focusedDate;
         cells.push(cell);
       }
@@ -1693,7 +1692,12 @@ 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)];
+      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'),
+      // {
+      //   [resolveClassName('date-picker-cells-cell-today')]: cell.type === 'today',
+      //   [resolveClassName('date-picker-cells-cell-range')]: cell.range && !cell.start && !cell.end,
+      // },
+      ];
     };
     var handleClick = function handleClick(cell) {
       if (cell.disabled || cell.type === 'weekLabel') {
@@ -1711,7 +1715,7 @@ var monthTableProps = {
         return;
       }
       var newDate = cell.date;
-      emit('change-range', newDate);
+      emit('changeRange', newDate);
     };
     return {
       cells: cells,
@@ -1938,7 +1942,7 @@ var datePickerProps = {
     type: String,
     "default": 'date',
     validator: function validator(value) {
-      var validList = ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
+      var validList = ['year', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
       if (validList.indexOf(value) < 0) {
         console.error("type property is not valid: '".concat(value, "'"));
         return false;
@@ -3514,6 +3518,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 = {
@@ -3524,7 +3529,7 @@ var dateRangePanelProps = {
     type: String,
     "default": 'date',
     validator: function validator(value) {
-      var validList = ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
+      var validList = ['year', 'month', 'monthrange', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange'];
       if (validList.indexOf(value) < 0) {
         console.error("type property is not valid: '".concat(value, "'"));
         return false;
@@ -3612,12 +3617,13 @@ 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 state = (0,external_vue_namespaceObject.reactive)({
       currentView: props.selectionMode || 'date',
       leftPickerTable: "".concat(props.selectionMode, "-table"),
       rightPickerTable: "".concat(props.selectionMode, "-table"),
       leftPanelDate: leftPanelDate,
-      rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1),
+      rightPanelDate: rightPanelDate,
       rangeState: {
         from: props.modelValue[0],
         to: props.modelValue[1],
@@ -4055,7 +4061,7 @@ var dateRangePanelProps = {
       "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' ? (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' ? (0,external_vue_namespaceObject.createVNode)("span", {
       "class": iconBtnCls('next', '-double'),
       "onClick": function onClick() {
         return _this.nextYear('left');
@@ -4090,6 +4096,17 @@ var dateRangePanelProps = {
             "onChangeRange": _this.handleChangeRange,
             "onPick": _this.panelPickerHandlers.left
           }, null);
+        case 'month-table':
+          return (0,external_vue_namespaceObject.createVNode)(month_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;
       }
@@ -4098,7 +4115,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' ? (0,external_vue_namespaceObject.createVNode)("span", {
+    }, [this.splitPanels || this.rightPickerTable !== 'date-table' && this.rightPickerTable !== 'month-table' ? (0,external_vue_namespaceObject.createVNode)("span", {
       "class": iconBtnCls('prev', '-double'),
       "onClick": function onClick() {
         return _this.prevYear('right');
@@ -4177,6 +4194,17 @@ var dateRangePanelProps = {
             "onChangeRange": _this.handleChangeRange,
             "onPick": _this.panelPickerHandlers.right
           }, null);
+        case 'month-table':
+          return (0,external_vue_namespaceObject.createVNode)(month_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;
       }
@@ -4260,6 +4288,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       emit = _ref.emit;
     var formItem = (0,shared_namespaceObject.useFormItem)();
     var isRange = props.type.includes('range');
+    var teleportTo = (0,external_vue_namespaceObject.ref)((0,shared_namespaceObject.getFullscreenRoot)());
     var emptyArray = isRange ? [null, null] : [null];
     var initialArr = isRange ? props.value || props.modelValue : [props.value || props.modelValue];
     var initialValue = isAllEmptyArr(initialArr) ? emptyArray : parseDate(props.value || props.modelValue, props.type, props.multiple, props.format);
@@ -4303,6 +4332,10 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (_type.match(/^date/)) {
         type = 'date';
       }
+      // 增加了 monthrange
+      if (_type.match(/^month/)) {
+        type = 'month';
+      }
       // return ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
       state.selectionMode = ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
       return state.selectionMode;
@@ -4334,7 +4367,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';
+      var isRange = props.type === 'daterange' || props.type === 'datetimerange' || props.type === 'monthrange';
       return isRange ? 'DateRangePanel' : 'DatePanel';
     });
     var opened = (0,external_vue_namespaceObject.computed)(function () {
@@ -4575,6 +4608,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (props.readonly) {
         return;
       }
+      teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
       if (e && e.type === 'focus') {
         return;
@@ -4760,6 +4794,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       localReadonly: localReadonly,
       allowCrossDayProp: allowCrossDayProp,
       ownPickerProps: ownPickerProps,
+      teleportTo: teleportTo,
       pickerDropdownRef: pickerDropdownRef,
       inputRef: inputRef,
       triggerRef: triggerRef,
@@ -4835,7 +4870,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_this$$slots$trigger = (_this$$slots$trigger2 = (_this$$slots2 = this.$slots).trigger) === null || _this$$slots$trigger2 === void 0 ? void 0 : _this$$slots$trigger2.call(_this$$slots2, this.displayValue)) !== null && _this$$slots$trigger !== void 0 ? _this$$slots$trigger : defaultTrigger]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-      "to": "body",
+      "to": this.teleportTo,
       "disabled": !this.appendToBody
     }, {
       "default": function _default() {
@@ -4960,6 +4995,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       emit = _ref.emit;
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
+    var teleportTo = (0,external_vue_namespaceObject.ref)((0,shared_namespaceObject.getFullscreenRoot)());
     var formItem = (0,shared_namespaceObject.useFormItem)();
     var isRange = props.type.includes('range');
     var emptyArray = isRange ? [null, null] : [null];
@@ -5272,6 +5308,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (props.readonly) {
         return;
       }
+      teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
       if (e && e.type === 'focus') {
         return;
@@ -5459,6 +5496,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       inputRef: inputRef,
       triggerRef: triggerRef,
       pickerPanelRef: pickerPanelRef,
+      teleportTo: teleportTo,
       handleClose: handleClose,
       handleIconClick: handleIconClick,
       handleInputMouseenter: handleInputMouseenter,
@@ -5522,7 +5560,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_this$$slots$trigger = (_this$$slots$trigger2 = (_this$$slots2 = this.$slots).trigger) === null || _this$$slots$trigger2 === void 0 ? void 0 : _this$$slots$trigger2.call(_this$$slots2, this.displayValue)) !== null && _this$$slots$trigger !== void 0 ? _this$$slots$trigger : defaultTrigger]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-      "to": "body",
+      "to": this.teleportTo,
       "disabled": !this.appendToBody
     }, {
       "default": function _default() {

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' | 'date' | 'daterange' | 'datetime' | 'datetimerange';
+export type DatePickerTypeType = 'year' | 'month' | 'monthrange' | 'date' | 'daterange' | 'datetime' | 'datetimerange';
 export type TimePickerTypeType = 'time' | 'timerange';
 export type PickerTypeType = DatePickerTypeType | TimePickerTypeType;
 export interface IDatePickerShortcut {

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

@@ -165,6 +165,7 @@ declare const _default: import("vue").DefineComponent<{
     inputRef: import("vue").Ref<any>;
     triggerRef: import("vue").Ref<HTMLElement>;
     pickerPanelRef: import("vue").Ref<any>;
+    teleportTo: import("vue").Ref<any>;
     handleClose: (e?: Event) => boolean;
     handleIconClick: () => void;
     handleInputMouseenter: () => void;

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

@@ -34,6 +34,10 @@ export declare const typeValueResolver: {
         formatter: (value: any, format: any) => string;
         parser: (text: any, format: any) => any;
     };
+    monthrange: {
+        formatter: (value: any, format: any) => string;
+        parser: (text: any, format: any) => any[];
+    };
     year: {
         formatter: (value: any, format: any) => string;
         parser: (text: any, format: any) => any;