bkui-vue 0.0.1-beta.216 → 0.0.1-beta.218

package/dist/index.esm.js

@@ -15347,13 +15347,6 @@ var Component$j = defineComponent({
         initActiveOptionValue();
       }
     });
-    const watchOnce = watch(isPopoverShow, () => {
-      setTimeout(() => {
-        var _a, _b;
-        enableVirtualRender.value && ((_b = (_a = virtualRenderRef.value) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a));
-        watchOnce();
-      });
-    });
     const initActiveOptionValue = () => {
       var _a;
       const firstSelected = selected.value[0];
@@ -15573,6 +15566,12 @@ var Component$j = defineComponent({
       hidePopover();
       handleBlur();
     };
+    const handlePopoverShow = () => {
+      setTimeout(() => {
+        var _a, _b;
+        enableVirtualRender.value && ((_b = (_a = virtualRenderRef.value) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a));
+      });
+    };
     provide(selectKey, reactive({
       multiple,
       selected,
@@ -15640,7 +15639,8 @@ var Component$j = defineComponent({
       handleInputChange,
       handleInputEnter,
       handleKeydown,
-      handleSelectedAllOptionMouseEnter
+      handleSelectedAllOptionMouseEnter,
+      handlePopoverShow
     };
   },
   render() {
@@ -15799,6 +15799,7 @@ var Component$j = defineComponent({
       "class": selectClass
     }, [createVNode(BkPopover2, mergeProps(this.popoverConfig, {
       "onClickoutside": this.handleClickOutside,
+      "onAfterShow": this.handlePopoverShow,
       "ref": "popoverRef"
     }), {
       default: () => renderSelectTrigger(),
@@ -16265,9 +16266,10 @@ var SORT_OPTION = /* @__PURE__ */ ((SORT_OPTION2) => {
   SORT_OPTION2["ASC"] = "asc";
   SORT_OPTION2["DESC"] = "desc";
   SORT_OPTION2["NULL"] = "null";
+  SORT_OPTION2["CUSTOM"] = "custom";
   return SORT_OPTION2;
 })(SORT_OPTION || {});
-const SORT_OPTIONS = ["asc", "desc", "null"];
+const SORT_OPTIONS = ["asc", "desc", "null", "custom"];
 var SortScope = /* @__PURE__ */ ((SortScope2) => {
   SortScope2["CURRENT"] = "current";
   SortScope2["ALL"] = "all";
@@ -16283,7 +16285,8 @@ const IColumnType = {
   showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     content: PropTypes.string.def(""),
     disabled: PropTypes.bool.def(false),
-    watchCellResize: PropTypes.bool.def(true)
+    watchCellResize: PropTypes.bool.def(true),
+    mode: PropTypes.commonType(["static", "auto"], "showOverflowTooltipMode").def("auto")
   })]).def(void 0),
   type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
   resizable: PropTypes.bool.def(true),
@@ -16369,11 +16372,16 @@ const tableProps = {
   showOverflowTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     content: PropTypes.string.def(""),
     disabled: PropTypes.bool.def(false),
-    watchCellResize: PropTypes.bool.def(true)
+    watchCellResize: PropTypes.bool.def(true),
+    mode: PropTypes.commonType(["static", "auto"], "showOverflowTooltipMode").def("auto")
   })]).def(false),
   asyncData: PropTypes.bool.def(false),
   rowHover: PropTypes.oneOf(ROW_HOVER_OPTIONS).def(ROW_HOVER.HIGHLIGHT),
-  defaultSort: PropTypes.shape({}).def({})
+  defaultSort: PropTypes.shape({}).def({}),
+  isRowSelectEnable: PropTypes.oneOfType([
+    PropTypes.func.def(() => true),
+    PropTypes.bool.def(true)
+  ]).def(true)
 };
 var Column = defineComponent({
   name: "TableColumn",
@@ -17203,6 +17211,70 @@ const resolveCellSpan = (column, colIndex, row, rowIndex) => {
     rowspan
   };
 };
+const getSortFn = (column, sortType) => {
+  var _a, _b;
+  const fieldName = column.field;
+  const getVal = (row) => getRowText(row, fieldName, column);
+  const sortFn0 = (a2, b2) => {
+    const val0 = getVal(a2);
+    const val1 = getVal(b2);
+    if (typeof val0 === "number" && typeof val1 === "number") {
+      return val0 - val1;
+    }
+    return String.prototype.localeCompare.call(val0, val1);
+  };
+  const sortFn = typeof ((_a = column.sort) == null ? void 0 : _a.sortFn) === "function" ? (_b = column.sort) == null ? void 0 : _b.sortFn : sortFn0;
+  return sortType === SORT_OPTION.NULL ? () => true : (_a2, _b2) => sortFn(_a2, _b2) * (sortType === SORT_OPTION.DESC ? -1 : 1);
+};
+const getNextSortType = (sortType) => {
+  const steps2 = {
+    [SORT_OPTION.NULL]: 0,
+    [SORT_OPTION.ASC]: 1,
+    [SORT_OPTION.DESC]: 2
+  };
+  if (sortType === void 0) {
+    return SORT_OPTION.NULL;
+  }
+  return Object.keys(steps2)[(steps2[sortType] + 1) % 3];
+};
+const resolveSort = (sort) => {
+  if (typeof sort === "string") {
+    return {
+      value: sort
+    };
+  }
+  if (typeof sort === "boolean" && sort) {
+    return {
+      value: SORT_OPTION.ASC
+    };
+  }
+  if (typeof sort === "object" && sort !== null) {
+    if (typeof sort.sortFn) {
+      return __spreadValues({
+        value: "custom"
+      }, sort);
+    }
+    return sort;
+  }
+  return null;
+};
+const isRowSelectEnable = (props2, {
+  row,
+  index,
+  isCheckAll
+}) => {
+  if (typeof props2.isRowSelectEnable === "boolean") {
+    return props2.isRowSelectEnable;
+  }
+  if (typeof props2.isRowSelectEnable === "function") {
+    return props2.isRowSelectEnable({
+      row,
+      index,
+      isCheckAll
+    });
+  }
+  return true;
+};
 var TableCell = defineComponent({
   name: "TableCell",
   props: {
@@ -17235,6 +17307,7 @@ var TableCell = defineComponent({
     const resolveTooltipOption = () => {
       let disabled = true;
       let content = refRoot.value.innerText;
+      let mode = "auto";
       if (typeof showOverflowTooltip === "boolean") {
         disabled = !showOverflowTooltip;
       }
@@ -17244,10 +17317,12 @@ var TableCell = defineComponent({
           content = showOverflowTooltip.content(props2.column, props2.row);
         }
         content = showOverflowTooltip.content || refRoot.value.innerText;
+        mode = showOverflowTooltip.mode || "auto";
       }
       return {
         disabled,
-        content
+        content,
+        mode
       };
     };
     const resolveOverflowTooltip = () => {
@@ -17255,14 +17330,20 @@ var TableCell = defineComponent({
         return;
       }
       const {
-        content
+        content,
+        mode
       } = resolveTooltipOption();
-      const textWidth = getElementTextWidth(refRoot.value, content);
-      const cellWidth = refRoot.value.clientWidth;
-      const computedStyle = window.getComputedStyle(refRoot.value);
-      const paddingWidth = ["padding-left", "padding-right"].reduce((width, prop) => width + Number(computedStyle.getPropertyValue(prop).replace("px", "")), 0);
-      const cellInnerWidth = cellWidth - paddingWidth;
-      isTipsEnabled.value = textWidth > cellInnerWidth;
+      if (mode === "auto") {
+        const textWidth = getElementTextWidth(refRoot.value, content);
+        const cellWidth = refRoot.value.clientWidth;
+        const computedStyle = window.getComputedStyle(refRoot.value);
+        const paddingWidth = ["padding-left", "padding-right"].reduce((width, prop) => width + Number(computedStyle.getPropertyValue(prop).replace("px", "")), 0);
+        const cellInnerWidth = cellWidth - paddingWidth;
+        isTipsEnabled.value = textWidth > cellInnerWidth;
+      }
+      if (mode === "static") {
+        isTipsEnabled.value = true;
+      }
       if (isTipsEnabled.value) {
         const bindings = ref(resolveTooltipOption());
         if (bkEllipsisIns === null) {
@@ -17498,36 +17579,28 @@ var HeadSort = defineComponent({
     var _a, _b;
     const defSort = ((_b = (_a = props2.column) == null ? void 0 : _a.sort) == null ? void 0 : _b.value) || props2.defaultSort || SORT_OPTION.NULL;
     const sortType = ref(defSort);
+    watch(() => [props2.defaultSort], ([val]) => {
+      sortType.value = val;
+    });
     const handleSortClick = (e, type) => {
-      var _a2, _b2;
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();
-      if (sortType.value === type) {
-        sortType.value = SORT_OPTION.NULL;
-      } else {
-        sortType.value = type;
+      let currentSort = type;
+      if (type === SORT_OPTION.NULL) {
+        currentSort = getNextSortType(type);
       }
-      if (props2.column.sort === "custom") {
-        emit("change", null, type);
+      const sort = resolveSort(props2.column.sort);
+      if ((sort == null ? void 0 : sort.value) === "custom") {
+        emit("change", null, currentSort);
         return;
       }
-      const fieldName = props2.column.field;
-      const getVal = (row) => getRowText(row, fieldName, props2.column);
-      const sortFn0 = (a2, b2) => {
-        const val0 = getVal(a2);
-        const val1 = getVal(b2);
-        if (typeof val0 === "number" && typeof val1 === "number") {
-          return val0 - val1;
-        }
-        return String.prototype.localeCompare.call(val0, val1);
-      };
-      const sortFn = typeof ((_a2 = props2.column.sort) == null ? void 0 : _a2.sortFn) === "function" ? (_b2 = props2.column.sort) == null ? void 0 : _b2.sortFn : sortFn0;
-      const execFn = sortType.value === SORT_OPTION.NULL ? () => true : (_a3, _b3) => sortFn(_a3, _b3) * (type === SORT_OPTION.DESC ? -1 : 1);
-      emit("change", execFn, type);
+      const execFn = getSortFn(props2.column, currentSort);
+      emit("change", execFn, currentSort);
     };
     return () => createVNode("span", {
-      "class": resolveClassName("head-cell-sort")
+      "class": resolveClassName("head-cell-sort"),
+      "onClick": (e) => handleSortClick(e, SORT_OPTION.NULL)
     }, [createVNode(angleDownFill, {
       "class": ["sort-action", "sort-asc", sortType.value === SORT_OPTION.ASC ? "active" : ""],
       "onClick": (e) => handleSortClick(e, SORT_OPTION.ASC)
@@ -17983,14 +18056,32 @@ class TableRender {
       });
     }
   }
-  handleColumnHeadClick(index) {
+  handleColumnHeadClick(index, column) {
     if (this.props.columnPick !== "disabled") {
       this.setColumnActive(index, this.props.columnPick === "single");
       this.context.emit(EMIT_EVENTS.COLUMN_PICK, this.propActiveCols);
     }
+    if (column.sort && !column.filter) {
+      const columnName = resolvePropVal(column, ["field", "type"], [column, index]);
+      const nextSort = getNextSortType(this.reactiveProp.defaultSort[columnName]);
+      Object.assign(this.reactiveProp.defaultSort, {
+        [columnName]: nextSort
+      });
+      const sortFn = getSortFn(column, nextSort);
+      this.emitEvent(EVENTS$1.ON_SORT_BY_CLICK, [{
+        sortFn,
+        column,
+        index,
+        nextSort
+      }]);
+    }
   }
   getSortCell(column, index) {
+    const columnName = resolvePropVal(column, ["field", "type"], [column, index]);
     const handleSortClick = (sortFn, type) => {
+      Object.assign(this.reactiveProp.defaultSort, {
+        [columnName]: type
+      });
       this.emitEvent(EVENTS$1.ON_SORT_BY_CLICK, [{
         sortFn,
         column,
@@ -17998,16 +18089,10 @@ class TableRender {
         type
       }]);
     };
-    let defaultSort = SORT_OPTION.NULL;
-    if (typeof this.props.defaultSort === "object" && this.props.defaultSort !== null) {
-      const columnName = resolvePropVal(column, ["field", "type"], [column, index]);
-      if (Object.prototype.hasOwnProperty.call(this.props.defaultSort, columnName)) {
-        defaultSort = this.props.defaultSort[columnName];
-      }
-    }
+    const nextSort = this.reactiveProp.defaultSort[columnName];
     return createVNode(HeadSort, {
       "column": column,
-      "defaultSort": defaultSort,
+      "defaultSort": nextSort,
       "onChange": handleSortClick
     }, null);
   }
@@ -18084,7 +18169,7 @@ class TableRender {
           "rowspan": 1,
           "class": this.getHeadColumnClass(column, index),
           "style": resolveFixedColumnStyle(column),
-          "onClick": () => this.handleColumnHeadClick(index)
+          "onClick": () => this.handleColumnHeadClick(index, column)
         }, resolveEventListener(column)), [createVNode(TableCell, null, _isSlot$1(_slot = renderHeadCell(column, index)) ? _slot : {
           default: () => [_slot]
         })]);
@@ -18219,8 +18304,14 @@ class TableRender {
       }]);
     };
     const indeterminate = isAll && !!this.reactiveProp.rowActions.get(TABLE_ROW_ATTRIBUTE.ROW_SELECTION_INDETERMINATE);
+    const isEnable = isRowSelectEnable(this.props, {
+      row,
+      index,
+      isCheckAll: isAll
+    });
     return createVNode(BkCheckbox, {
       "onChange": handleChecked,
+      "disabled": !isEnable,
       "modelValue": row[TABLE_ROW_ATTRIBUTE.ROW_SELECTION],
       "indeterminate": indeterminate
     }, null);
@@ -18624,6 +18715,14 @@ const useInit = (props2, targetColumns) => {
     resetResizeEvents();
     registerResizeEvent();
   }, { immediate: true, deep: true });
+  const defSort = props2.columns.reduce((out, col, index) => {
+    const columnName = resolvePropVal(col, ["field", "type"], [col, index]);
+    const sort = resolveSort(col.sort);
+    if (sort) {
+      return __spreadProps(__spreadValues({}, out || {}), { [columnName]: sort == null ? void 0 : sort.value });
+    }
+    return out;
+  }, null);
   const reactiveSchema = reactive({
     rowActions: /* @__PURE__ */ new Map(),
     scrollTranslateY: 0,
@@ -18636,7 +18735,8 @@ const useInit = (props2, targetColumns) => {
     setting: {
       size: (_a = props2.settings) == null ? void 0 : _a.size,
       height: SETTING_SIZE[(_b = props2.settings) == null ? void 0 : _b.size]
-    }
+    },
+    defaultSort: defSort || props2.defaultSort
   });
   const isRowExpand = (rowId) => {
     var _a2;
@@ -21716,11 +21816,14 @@ var Confirm = defineComponent({
       "class": "bk-picker-confirm",
       "ref": "elRef",
       "onKeydown": this.handleTab
-    }, [this.showTime ? createVNode("a", {
-      "href": "javascript: void(0);",
+    }, [this.showTime ? createVNode(BkButton, {
+      "text": true,
       "class": "bk-picker-confirm-time",
+      "disabled": this.timeDisabled,
       "onClick": this.handleToggleTime
-    }, [this.labels.time]) : "", this.clearable ? createVNode("a", {
+    }, {
+      default: () => [this.labels.time]
+    }) : "", this.clearable ? createVNode("a", {
       "href": "javascript: void(0);",
       "onClick": this.handleClear,
       "onKeydown": this.handleClear
@@ -23900,7 +24003,7 @@ const formatDate = (val, type, multiple, format2) => {
 const datePickerKey = Symbol("date-picker");
 const timePickerKey = Symbol("time-picker");
 function findChildComponents(context, componentName) {
-  return context.$children.reduce((components2, child) => {
+  return (context.$children || []).reduce((components2, child) => {
     if (child.$options.name === componentName) {
       components2.push(child);
     }
@@ -23998,7 +24101,7 @@ const dateTableProps = {
     type: Date,
     required: true
   },
-  disableDate: Function,
+  disabledDate: Function,
   selectionMode: {
     type: String,
     required: true
@@ -24047,7 +24150,7 @@ var DateTable = defineComponent({
       const rangeStart = props2.rangeState.from && clearHours(props2.rangeState.from);
       const rangeEnd = props2.rangeState.to && clearHours(props2.rangeState.to);
       const isRange = props2.selectionMode === "range";
-      const disableTestFn = typeof props2.disableDate === "function" && props2.disableDate;
+      const disableTestFn = typeof props2.disabledDate === "function" && props2.disabledDate;
       return calendar.value(tableYear, tableMonth, (cell) => {
         if (cell.date instanceof Date) {
           cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 6e4);
@@ -24252,7 +24355,7 @@ const datePickerProps = {
       return ["simplicity", "normal"].indexOf(v2) > -1;
     }
   },
-  disableDate: Function,
+  disabledDate: Function,
   withValidate: {
     type: Boolean,
     default: true
@@ -24648,7 +24751,7 @@ const timeProps = {
   }
 };
 var TimePanel = defineComponent({
-  name: "TimePickerPanel",
+  name: "TimePanel",
   props: __spreadValues(__spreadValues(__spreadValues({}, datePickerProps), timePanelProps), timeProps),
   emits: ["pick", "pick-click"],
   setup(props2, {
@@ -24791,7 +24894,6 @@ const datePanelProps = {
   startDate: {
     type: Date
   },
-  disableDate: Function,
   focusedDate: {
     type: Date,
     required: true
@@ -24811,6 +24913,10 @@ const datePanelProps = {
   disabledDate: {
     type: Function,
     default: () => false
+  },
+  timePickerOptions: {
+    type: Object,
+    default: () => ({})
   }
 };
 var DatePanel = defineComponent({
@@ -24840,7 +24946,6 @@ var DatePanel = defineComponent({
     const timeSpinnerRef = ref(null);
     const timeSpinnerEndRef = ref(null);
     watch(() => state.currentView, (val) => {
-      console.error(11111, val);
       emit("selection-mode-change", val);
       if (state.currentView === "time") {
         nextTick(() => {
@@ -24853,6 +24958,11 @@ var DatePanel = defineComponent({
       state.currentView = type;
       state.pickerTable = getTableType(type);
     });
+    watch(() => props2.modelValue, (newVal) => {
+      state.dates = newVal;
+      const panelDate = props2.multiple ? state.dates[state.dates.length - 1] : props2.startDate || state.dates[0];
+      state.panelDate = panelDate || new Date();
+    });
     const resetView = () => {
       setTimeout(() => {
         state.currentView = props2.selectionMode;
@@ -25033,7 +25143,7 @@ var DatePanel = defineComponent({
         case "date-table":
           return createVNode(DateTable, {
             "tableDate": this.panelDate,
-            "disableDate": this.disableDate,
+            "disabledDate": this.disabledDate,
             "selectionMode": this.selectionMode,
             "modelValue": this.dates,
             "focusedDate": this.focusedDate,
@@ -25048,11 +25158,14 @@ var DatePanel = defineComponent({
       "format": this.format,
       "disabledDate": this.disabledDate,
       "onPick": this.handlePick,
+      "onPick-click": this.handlePickClick,
       "onPick-clear": this.handlePickClear,
-      "onPick-success": this.handlePickSuccess
+      "onPick-success": this.handlePickSuccess,
+      "onPick-toggle-time": this.handleToggleTime
     }, null)]), this.confirm ? createVNode(Confirm, {
       "clearable": this.clearable,
       "showTime": this.showTime,
+      "timeDisabled": this.timeDisabled,
       "isTime": this.isTime,
       "onPick-toggle-time": this.handleToggleTime,
       "onPick-clear": this.handlePickClear,
@@ -25062,6 +25175,154 @@ var DatePanel = defineComponent({
     }, [(_c = (_b = (_a = this.$slots).shortcuts) == null ? void 0 : _b.call(_a)) != null ? _c : null]) : null]);
   }
 });
+const timeRangeProps = {
+  steps: {
+    type: Array,
+    default: () => []
+  },
+  format: {
+    type: String,
+    default: "HH:mm:ss"
+  },
+  value: {
+    type: Array,
+    required: true
+  },
+  allowCrossDay: {
+    type: Boolean,
+    default: false
+  }
+};
+var TimeRangePanel = defineComponent({
+  name: "TimeRangePanel",
+  props: __spreadValues(__spreadValues(__spreadValues({}, datePickerProps), timePanelProps), timeRangeProps),
+  emits: ["pick", "pick-click"],
+  setup(props2, {
+    emit
+  }) {
+    const [dateStart, dateEnd] = props2.value.slice();
+    const state = reactive({
+      showDate: false,
+      dateStart: dateStart || initTime(),
+      dateEnd: dateEnd || initTime()
+    });
+    const parentProvide = inject(timePickerKey);
+    const showSeconds = computed(() => !(props2.format || "").match(/mm$/));
+    const leftDatePanelLabel = computed(() => fecha.format(parentProvide.dates[0], props2.format));
+    const rightDatePanelLabel = computed(() => fecha.format(parentProvide.dates[1], props2.format));
+    watch(() => props2.value, (dates) => {
+      const [dateStart2, dateEnd2] = dates.slice();
+      state.dateStart = dateStart2 || initTime();
+      state.dateEnd = dateEnd2 || initTime();
+    });
+    onMounted(() => {
+      if (parentProvide && parentProvide.parentName === "DatePanel") {
+        state.showDate = true;
+      }
+    });
+    function handlePickClick() {
+      emit("pick-click");
+    }
+    function handleChange(idx, start2, end2, isEmit = true) {
+      let dateStart2 = new Date(state.dateStart);
+      let dateEnd2 = new Date(state.dateEnd);
+      Object.keys(start2).forEach((type) => {
+        dateStart2[`set${capitalize(type)}`](start2[type]);
+      });
+      Object.keys(end2).forEach((type) => {
+        dateEnd2[`set${capitalize(type)}`](end2[type]);
+      });
+      if (!props2.allowCrossDay && dateEnd2 < dateStart2) {
+        if (idx === "start") {
+          dateEnd2 = dateStart2;
+        }
+        if (idx === "end") {
+          dateStart2 = dateEnd2;
+        }
+      }
+      if (isEmit) {
+        emit("pick", [dateStart2, dateEnd2], true, "time");
+      }
+    }
+    function handleStartChange(date) {
+      handleChange("start", date, {});
+    }
+    function handleEndChange(date) {
+      handleChange("end", {}, date);
+    }
+    const timeSpinnerRef = ref(null);
+    const timeSpinnerEndRef = ref(null);
+    function updateScroll() {
+      var _a, _b;
+      (_a = timeSpinnerRef == null ? void 0 : timeSpinnerRef.value) == null ? void 0 : _a.updateScroll();
+      (_b = timeSpinnerEndRef == null ? void 0 : timeSpinnerEndRef.value) == null ? void 0 : _b.updateScroll();
+    }
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
+      showSeconds,
+      leftDatePanelLabel,
+      rightDatePanelLabel,
+      handleStartChange,
+      handleEndChange,
+      handlePickClick,
+      updateScroll,
+      timeSpinnerRef,
+      timeSpinnerEndRef
+    });
+  },
+  render() {
+    return createVNode("div", {
+      "class": ["bk-picker-panel-body-wrapper", "bk-time-picker-with-range", this.showSeconds ? "bk-time-picker-with-seconds" : ""],
+      "onMousedown": (e) => {
+        e.preventDefault();
+      }
+    }, [createVNode("div", {
+      "class": "bk-picker-panel-body",
+      "style": {
+        width: `${this.width * 2}px`
+      }
+    }, [createVNode("div", {
+      "class": "bk-picker-panel-content bk-picker-panel-content-left",
+      "style": {
+        width: `${this.width}px`
+      }
+    }, [this.showDate ? createVNode("div", {
+      "class": "bk-time-picker-header"
+    }, [this.leftDatePanelLabel]) : "", createVNode(TimeSpinner, {
+      "ref": "timeSpinnerRef",
+      "steps": this.steps,
+      "showSeconds": this.showSeconds,
+      "hours": this.value[0] && this.dateStart.getHours(),
+      "minutes": this.value[0] && this.dateStart.getMinutes(),
+      "seconds": this.value[0] && this.dateStart.getSeconds(),
+      "disabledHours": this.disabledHours,
+      "disabledMinutes": this.disabledMinutes,
+      "disabledSeconds": this.disabledSeconds,
+      "hideDisabledOptions": this.hideDisabledOptions,
+      "onChange": this.handleStartChange,
+      "onPick-click": this.handlePickClick
+    }, null)]), createVNode("div", {
+      "class": "bk-picker-panel-content bk-picker-panel-content-right",
+      "style": {
+        width: `${this.width}px`
+      }
+    }, [this.showDate ? createVNode("div", {
+      "class": "bk-time-picker-header"
+    }, [this.rightDatePanelLabel]) : "", createVNode(TimeSpinner, {
+      "ref": "timeSpinnerEndRef",
+      "steps": this.steps,
+      "showSeconds": this.showSeconds,
+      "hours": this.value[1] && this.dateEnd.getHours(),
+      "minutes": this.value[1] && this.dateEnd.getMinutes(),
+      "seconds": this.value[1] && this.dateEnd.getSeconds(),
+      "disabledHours": this.disabledHours,
+      "disabledMinutes": this.disabledMinutes,
+      "disabledSeconds": this.disabledSeconds,
+      "hideDisabledOptions": this.hideDisabledOptions,
+      "onChange": this.handleEndChange,
+      "onPick-click": this.handlePickClick
+    }, null)])])]);
+  }
+});
 const dateRangePanelProps = {
   modelValue: {
     type: [Date, String, Number, Array]
@@ -25116,7 +25377,7 @@ const dateRangePanelProps = {
     type: Boolean,
     default: false
   },
-  disableDate: Function,
+  disabledDate: Function,
   focusedDate: {
     type: Date,
     required: true
@@ -25124,12 +25385,20 @@ const dateRangePanelProps = {
   confirm: {
     type: Boolean,
     default: false
+  },
+  format: {
+    type: String,
+    default: "yyyy-MM-dd"
+  },
+  timePickerOptions: {
+    type: Object,
+    default: () => ({})
   }
 };
 var DateRangePanel = defineComponent({
   name: "DateRangePanel",
   props: dateRangePanelProps,
-  emits: ["pick", "pick-success"],
+  emits: ["pick", "pick-success", "pick-clear", "pick-click"],
   setup(props2, {
     slots,
     emit
@@ -25150,6 +25419,13 @@ var DateRangePanel = defineComponent({
       upToNowEnable: false,
       dates: props2.modelValue
     });
+    const {
+      proxy
+    } = getCurrentInstance();
+    provide(timePickerKey, {
+      dates: state.dates,
+      parentName: proxy.$options.name
+    });
     const dateSorter = (a2, b2) => {
       if (!a2 || !b2) {
         return 0;
@@ -25242,7 +25518,6 @@ var DateRangePanel = defineComponent({
       emit("pick", state.dates, visible, type || props2.type);
     };
     const handleRangePick = (val, type) => {
-      console.warn("handleRangePick");
       if (state.rangeState.selecting || state.currentView === "time") {
         if (state.currentView === "time") {
           state.dates = val;
@@ -25301,9 +25576,26 @@ var DateRangePanel = defineComponent({
     const handleChangeRange = (val) => {
       state.rangeState.to = val;
     };
+    function setPanelDates(leftPanelDate2) {
+      state.leftPanelDate = leftPanelDate2;
+      const rightPanelDate = new Date(leftPanelDate2.getFullYear(), leftPanelDate2.getMonth() + 1, 1);
+      const splitRightPanelDate = state.dates[1] ? state.dates[1].getTime() : state.dates[1];
+      state.rightPanelDate = props2.splitPanels ? new Date(Math.max(splitRightPanelDate, rightPanelDate.getTime())) : rightPanelDate;
+    }
     watch(() => props2.selectionMode, (v2) => {
       state.currentView = v2 || "range";
     });
+    watch(() => props2.modelValue, (newVal) => {
+      const minDate2 = newVal[0] ? toDate(newVal[0]) : null;
+      const maxDate2 = newVal[1] ? toDate(newVal[1]) : null;
+      state.dates = [minDate2, maxDate2].sort(dateSorter);
+      state.rangeState = {
+        from: state.dates[0],
+        to: state.dates[1],
+        selecting: false
+      };
+      setPanelDates(props2.startDate || state.dates[0] || new Date());
+    });
     const isTime = computed(() => state.currentView === "time");
     const leftDatePanelLabel = computed(() => panelLabelConfig("left"));
     const rightDatePanelLabel = computed(() => panelLabelConfig("right"));
@@ -25328,6 +25620,26 @@ var DateRangePanel = defineComponent({
       var _a;
       return slots.shortcuts || ((_a = props2.shortcuts) == null ? void 0 : _a.length);
     });
+    const handleToggleTime = () => {
+      state.currentView = state.currentView === "time" ? "date" : "time";
+    };
+    const resetView = () => {
+      setTimeout(() => {
+        state.currentView = props2.selectionMode;
+      }, 500);
+    };
+    const handlePickSuccess = () => {
+      resetView();
+      emit("pick-success");
+    };
+    const handlePickClear = () => {
+      resetView();
+      emit("pick-clear");
+    };
+    function handlePickClick() {
+      emit("pick-click");
+    }
+    const timeDisabled = computed(() => !(state.dates[0] && state.dates[1]));
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       isTime,
       hasShortcuts,
@@ -25345,14 +25657,39 @@ var DateRangePanel = defineComponent({
       rightShowLabelSecond,
       preSelecting,
       panelPickerHandlers,
+      timeDisabled,
       handleShortcutClick,
       reset: reset2,
       onToggleVisibility,
       handleRangePick,
-      handleChangeRange
+      handleChangeRange,
+      handleToggleTime,
+      handlePickSuccess,
+      handlePickClear,
+      handlePickClick
     });
   },
   render() {
+    let shortcuts = null;
+    if (this.hasShortcuts) {
+      let inner = "";
+      if (this.$slots.shortcuts) {
+        inner = typeof this.$slots.shortcuts === "function" ? this.$slots.shortcuts() : this.$slots.shortcuts;
+      } else {
+        if (this.shortcuts.length) {
+          inner = createVNode("div", {
+            "class": "bk-picker-panel-shortcuts"
+          }, [this.shortcuts.map((item, index) => createVNode("div", {
+            "key": index,
+            "class": "shortcuts-item",
+            "onClick": () => this.handleShortcutClick(item, index)
+          }, [item.text]))]);
+        }
+      }
+      shortcuts = createVNode("div", {
+        "class": "bk-picker-panel-sidebar"
+      }, [inner]);
+    }
     return 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": (e) => {
@@ -25409,7 +25746,7 @@ var DateRangePanel = defineComponent({
           return createVNode(DateTable, {
             "selectionMode": "range",
             "tableDate": this.leftPanelDate,
-            "disableDate": this.disableDate,
+            "disabledDate": this.disabledDate,
             "rangeState": this.rangeState,
             "modelValue": this.preSelecting.left ? [this.dates[0]] : this.dates,
             "focusedDate": this.focusedDate,
@@ -25478,7 +25815,7 @@ var DateRangePanel = defineComponent({
           return createVNode(DateTable, {
             "selectionMode": "range",
             "tableDate": this.rightPanelDate,
-            "disableDate": this.disableDate,
+            "disabledDate": this.disabledDate,
             "rangeState": this.rangeState,
             "modelValue": this.preSelecting.right ? [this.dates[this.dates.length - 1]] : this.dates,
             "focusedDate": this.focusedDate,
@@ -25488,15 +25825,25 @@ var DateRangePanel = defineComponent({
         default:
           return null;
       }
-    })() : ""]), [[vShow, !this.isTime]])]), this.hasShortcuts ? createVNode("div", {
-      "class": "bk-picker-panel-sidebar"
-    }, [this.$slots.shortcuts ? typeof this.$slots.shortcuts === "function" ? this.$slots.shortcuts() : this.$slots.shortcuts : this.shortcuts.length ? createVNode("div", {
-      "class": "bk-picker-panel-shortcuts"
-    }, [this.shortcuts.map((item, index) => createVNode("div", {
-      "key": index,
-      "class": "shortcuts-item",
-      "onClick": () => this.handleShortcutClick(item, index)
-    }, [item.text]))]) : ""]) : null]);
+    })() : ""]), [[vShow, !this.isTime]]), this.isTime ? createVNode(TimeRangePanel, {
+      "ref": "timePickerRef",
+      "value": this.dates,
+      "format": this.format,
+      "disabledDate": this.disabledDate,
+      "onPick": this.handleRangePick,
+      "onPick-click": this.handlePickClick,
+      "onPick-clear": this.handlePickClear,
+      "onPick-success": this.handlePickSuccess,
+      "onPick-toggle-time": this.handleToggleTime
+    }, null) : "", this.confirm ? createVNode(Confirm, {
+      "clearable": this.clearable,
+      "showTime": this.showTime,
+      "timeDisabled": this.timeDisabled,
+      "isTime": this.isTime,
+      "onPick-toggle-time": this.handleToggleTime,
+      "onPick-clear": this.handlePickClear,
+      "onPick-success": this.handlePickSuccess
+    }, null) : ""]), shortcuts]);
   }
 });
 var Component$a = defineComponent({
@@ -25728,7 +26075,7 @@ var Component$a = defineComponent({
       const newValue = e.target.value;
       const newDate = parseDate(newValue, props2.type, props2.multiple, props2.format);
       const valueToTest = isArrayValue ? newDate : newDate[0];
-      const isDisabled = (_a = props2.disableDate) == null ? void 0 : _a.call(props2, valueToTest);
+      const isDisabled = (_a = props2.disabledDate) == null ? void 0 : _a.call(props2, valueToTest);
       const isValidDate = newDate.reduce((valid, date) => valid && date instanceof Date, true);
       if (newValue !== oldValue && !isDisabled && isValidDate) {
         emitChange(props2.type);
@@ -25994,15 +26341,18 @@ var Component$a = defineComponent({
             }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, this.panel === "DateRangePanel" ? createVNode(DateRangePanel, {
               "ref": "pickerPanelRef",
               "type": this.type,
+              "showTime": this.type === "datetime" || this.type === "datetimerange",
               "confirm": this.isConfirm,
               "shortcuts": this.shortcuts,
               "shortcutClose": this.shortcutClose,
               "modelValue": this.internalValue,
               "selectionMode": this.selectionMode,
               "startDate": this.startDate,
-              "disableDate": this.disableDate,
+              "disabledDate": this.disabledDate,
               "focusedDate": this.focusedDate,
+              "timePickerOptions": this.timePickerOptions,
               "onPick": this.onPick,
+              "onPick-clear": this.handleClear,
               "onPick-success": this.onPickSuccess,
               "onSelection-mode-change": this.onSelectionModeChange
             }, shortcutsSlot) : createVNode(DatePanel, {
@@ -26016,8 +26366,9 @@ var Component$a = defineComponent({
               "selectionMode": this.selectionMode,
               "modelValue": this.internalValue,
               "startDate": this.startDate,
-              "disableDate": this.disableDate,
+              "disabledDate": this.disabledDate,
               "focusedDate": this.focusedDate,
+              "timePickerOptions": this.timePickerOptions,
               "onPick": this.onPick,
               "onPick-clear": this.handleClear,
               "onPick-success": this.onPickSuccess,
@@ -26267,7 +26618,7 @@ var TimePicker = defineComponent({
       const newValue = e.target.value;
       const newDate = parseDate(newValue, props2.type, props2.multiple, props2.format);
       const valueToTest = isArrayValue ? newDate : newDate[0];
-      const isDisabled = (_a = props2.disableDate) == null ? void 0 : _a.call(props2, valueToTest);
+      const isDisabled = (_a = props2.disabledDate) == null ? void 0 : _a.call(props2, valueToTest);
       const isValidDate = newDate.reduce((valid, date) => valid && date instanceof Date, true);
       if (newValue !== oldValue && !isDisabled && isValidDate) {
         emitChange(props2.type);
@@ -26289,8 +26640,8 @@ var TimePicker = defineComponent({
       }
     };
     const reset2 = () => {
-      var _a;
-      (_a = pickerPanelRef == null ? void 0 : pickerPanelRef.value) == null ? void 0 : _a.reset();
+      var _a, _b;
+      (_b = (_a = pickerPanelRef == null ? void 0 : pickerPanelRef.value) == null ? void 0 : _a.reset) == null ? void 0 : _b.call(_a);
     };
     const handleBlur = (e) => {
       var _a, _b;
@@ -26402,8 +26753,6 @@ var TimePicker = defineComponent({
       emit("shortcut-change", state.shortcut, shortcutIndex);
     };
     const triggerRef = ref(null);
-    console.error(panel);
-    console.error(panel.value);
     return __spreadProps(__spreadValues({}, toRefs(state)), {
       panel,
       publicStringValue,
@@ -26537,7 +26886,22 @@ var TimePicker = defineComponent({
             var _a2, _b2, _c2, _d, _e, _f;
             return [this.hasHeader ? createVNode("div", {
               "class": ["bk-date-picker-top-wrapper", this.headerSlotCls]
-            }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, createVNode(TimePanel, {
+            }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, this.panel === "RangeTimePickerPanel" ? createVNode(TimeRangePanel, {
+              "ref": "pickerPanelRef",
+              "clearable": this.clearable,
+              "shortcuts": this.shortcuts,
+              "multiple": this.multiple,
+              "shortcutClose": this.shortcutClose,
+              "value": this.internalValue,
+              "startDate": this.startDate,
+              "disabledDate": this.disabledDate,
+              "onPick": this.onPick,
+              "onPick-clear": this.handleClear,
+              "onPick-success": this.onPickSuccess,
+              "disabledHours": this.ownPickerProps.disabledHours,
+              "disabledMinutes": this.ownPickerProps.disabledMinutes,
+              "disabledSeconds": this.ownPickerProps.disabledSeconds
+            }, shortcutsSlot) : createVNode(TimePanel, {
               "ref": "pickerPanelRef",
               "clearable": this.clearable,
               "confirm": this.isConfirm,
@@ -26546,7 +26910,7 @@ var TimePicker = defineComponent({
               "shortcutClose": this.shortcutClose,
               "value": this.internalValue,
               "startDate": this.startDate,
-              "disableDate": this.disableDate,
+              "disabledDate": this.disabledDate,
               "onPick": this.onPick,
               "onPick-clear": this.handleClear,
               "onPick-success": this.onPickSuccess,