@king-design/vue 3.5.2 → 3.6.0

package/components/datepicker/index.vdt.js

@@ -7,84 +7,81 @@ import { DatepickerTime } from './time';
 import { Icon } from '../icon';
 import { Button } from '../button';
 import { _$ } from '../../i18n';
-import { makePanelStyles } from './styles';
-import { PanelTypes, PanelFlags } from './usePanel';
+import { makeStyles, makePanelStyles, makeHighlightStyles } from './styles';
+import { PanelFlags } from './usePanel';
 import { isFunction } from 'intact-shared';
 import { Tabs, Tab } from '../tabs';
+import { Position } from './useHighlight';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
+    _classDatePickerObj,
     _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+  var k = this.config.k;
   var _this$get = this.get(),
     className = _this$get.className,
     type = _this$get.type,
     range = _this$get.range,
     multiple = _this$get.multiple,
-    shortcuts = _this$get.shortcuts;
+    shortcuts = _this$get.shortcuts,
+    size = _this$get.size;
   var _this$value = this.value,
     value = _this$value.value.value,
     onChangeDate = _this$value.onChangeDate,
-    onConfirm = _this$value.onConfirm,
     onChangeTime = _this$value.onChangeTime,
     onChangeDateForRange = _this$value.onChangeDateForRange,
     getTimeValue = _this$value.getTimeValue;
-  var k = this.config.k;
+  var onConfirm = this.confirm.onConfirm;
+  var _this$highlight = this.highlight,
+    position = _this$highlight.position,
+    handleInputClick = _this$highlight.handleInputClick,
+    highlightWidth = _this$highlight.highlightWidth,
+    highlightLeft = _this$highlight.highlightLeft;
+  // 判断是否显示双面板
+  var showDualPanels = range && type !== 'datetime';
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-content"] = true, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
+  var classDatePickerObj = (_classDatePickerObj = {}, _classDatePickerObj[k + "-datepicker"] = true, _classDatePickerObj[makeHighlightStyles(k, size, highlightWidth.value, highlightLeft.value)] = range, _classDatePickerObj[makeStyles(k)] = true, _classDatePickerObj);
   var _this$disabled = this.disabled,
     isDisabledTime = _this$disabled.isDisabledTime,
     isDisabledConfirm = _this$disabled.isDisabledConfirm;
   var _this$panel = this.panel,
-    startPanel = _this$panel.startPanel,
-    endPanel = _this$panel.endPanel,
-    getPanel = _this$panel.getPanel,
     startRef = _this$panel.startRef,
     endRef = _this$panel.endRef;
   var generatePanel = function generatePanel(flag) {
-    var panel = getPanel(flag);
-    var timeValue = getTimeValue(flag);
-    return _$ce(2, 'div', [function () {
-      if (type === 'datetime') {
-        var dateString = '0000-00-00';
-        var timeString = '00:00:00';
-        if (timeValue) {
-          var valueString = _this.formats.getShowString(timeValue).split(/\s+/);
-          dateString = valueString[0];
-          timeString = valueString[1];
-        }
-        return _$cc(Tabs, {
-          'type': 'card',
-          'value': panel.value,
-          'ev-$change:value': panel.set,
-          'children': [_$cc(Tab, {
-            'value': PanelTypes.Date,
-            'children': dateString
-          }), _$cc(Tab, {
-            'value': PanelTypes.Time,
-            'disabled': !timeValue,
-            'children': timeString
-          })]
-        });
-      }
-    }(), panel.value === PanelTypes.Date ? _$cc(DatepickerCalendar, {
+    return _$ce(2, 'div', [_$cc(DatepickerCalendar, {
       'value': value,
       'ev-change': onChangeDate,
       'type': type === 'datetime' ? 'date' : type,
       'flag': flag,
-      'ref': flag === PanelFlags.Start ? startRef : endRef
-    }, null, flag === PanelFlags.Start ? startRef : endRef) : _$cc(DatepickerTime, {
-      'value': timeValue,
-      'ev-$change:value': function ev$changeValue(v) {
-        return onChangeTime(v, flag);
-      },
-      'format': _this.formats.getValueFormat(),
-      'flag': flag,
-      'isDisabledTime': isDisabledTime
-    })], 0, _$cn(k + "-datepicker-calendar-wrapper"));
+      'ref': flag === PanelFlags.Start ? startRef : endRef,
+      'highlightPosition': position.value
+    }, null, flag === PanelFlags.Start ? startRef : endRef), type === 'datetime' ? _$ce(2, 'div', function () {
+      var timeValue = getTimeValue(flag);
+      if (flag === PanelFlags.End && !timeValue) {
+        timeValue = getTimeValue(PanelFlags.Start);
+      }
+      var timeString = '00:00:00';
+      if (timeValue) {
+        var valueString = _this.formats.getShowString(timeValue).split(/\s+/);
+        timeString = valueString[1];
+      }
+      return [_$ce(2, 'div', timeString, 0, _$cn(k + "-datepicker-time-time")), _$cc(DatepickerTime, {
+        'value': timeValue,
+        'ev-$change:value': function ev$changeValue(v) {
+          return onChangeTime(v, flag);
+        },
+        'format': _this.formats.getValueFormat(),
+        'flag': flag,
+        'isDisabledTime': isDisabledTime
+      })];
+    }(), 0, _$cn(k + "-datepicker-time-wrapper")) : undefined], 0, _$cn(k + "-datepicker-calendar-time-wrapper"));
   };
   return _$su.call($this, {
-    'className': _$cn(k + "-datepicker")
+    'className': _$cn(classDatePickerObj),
+    'onClick': handleInputClick,
+    'alwaysShowOnClick': true
   }, function ($blocks) {
     var _$blocks = {},
       __$blocks = _$ex({}, $blocks);
@@ -98,7 +95,7 @@ export default function ($props, $blocks, $__proto__) {
             'title': label,
             'ev-click': linkEvent($value, _this2.setByShortcut)
           });
-        }), 0, _$cn(k + "-datepicker-shortcuts")) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
+        }), 0, _$cn(k + "-datepicker-shortcuts")) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(!showDualPanels && position.value === Position.End ? PanelFlags.End : PanelFlags.Start), _$ct('\n                    '), showDualPanels ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),

package/components/datepicker/shortcuts.d.ts

@@ -1,5 +1,5 @@
 import { Children } from 'intact-vue-next';
-import { Value } from './basepicker';
+import { Value } from './useValueBase';
 export type Shortcut = {
     label: (() => Children) | Children;
     value: () => Value | [Value, Value];

package/components/datepicker/styles.d.ts

@@ -1,3 +1,4 @@
+import { Sizes } from '../../styles/utils';
 import '../../styles/global';
 declare const defaults: {
     width: string;
@@ -5,7 +6,9 @@ declare const defaults: {
     border: string;
     item: {
         gutter: string;
+        yearGutter: string;
         height: string;
+        rangeGutter: string;
         readonly hoverBgColor: string;
         readonly exceedColor: string;
         readonly todayBorder: string;
@@ -34,6 +37,17 @@ declare const defaults: {
     footer: {
         padding: string;
     };
+    week: {
+        height: string;
+        width: string;
+        margin: string;
+        padding: string;
+        currentWeek: string;
+    };
+    calendarTime: {
+        height: string;
+        fontSize: string;
+    };
     shortcuts: {
         width: string;
         padding: string;
@@ -46,6 +60,10 @@ declare const defaults: {
 };
 declare let datepicker: typeof defaults;
 export { datepicker };
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
 export declare const makePanelStyles: {
     (k: string): string;
     clearCache(): {};
@@ -58,3 +76,7 @@ export declare const makeTimeStyles: {
     (k: string): string;
     clearCache(): {};
 };
+export declare const makeHighlightStyles: {
+    (k: string, size: Sizes, highlightWidth: number, highlightLeft: number): string;
+    clearCache(): {};
+};

package/components/datepicker/styles.js

@@ -1,15 +1,18 @@
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, palette } from '../../styles/utils';
+import { deepDefaults, getLeft, palette } from '../../styles/utils';
 import '../../styles/global';
 import { cache } from '../utils';
+import { select } from '../select/styles';
 var defaults = {
   width: "300px",
   padding: "16px 16px 4px",
   border: "1px solid #e5e5e5",
   item: {
     gutter: "7px",
+    yearGutter: '36px',
     height: "24px",
+    rangeGutter: "17px",
     get hoverBgColor() {
       return theme.color.bg;
     },
@@ -52,6 +55,17 @@ var defaults = {
   footer: {
     padding: "8px 16px"
   },
+  week: {
+    height: "20px",
+    width: "40px",
+    margin: "0 0 0 10px",
+    padding: "0 2px",
+    currentWeek: '#eee'
+  },
+  calendarTime: {
+    height: "44px",
+    fontSize: "14px"
+  },
   shortcuts: {
     width: '100px',
     padding: '12px 0',
@@ -72,14 +86,22 @@ setDefault(function () {
   makePanelStyles == null || makePanelStyles.clearCache();
   makeCalendarStyles == null || makeCalendarStyles.clearCache();
   makeTimeStyles == null || makeTimeStyles.clearCache();
+  makeHighlightStyles == null || makeHighlightStyles.clearCache();
 });
 export { datepicker };
+export var makeStyles = cache(function (k) {
+  return /*#__PURE__*/css("&.", k, "-dropdown-open{.", k, "-input-inner{color:", theme.color.placeholder, ";}}");
+});
 export var makePanelStyles = cache(function makePanelStyles(k) {
-  return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
+  return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-calendar-time-wrapper{display:flex;.", k, "-datepicker-time-time{height:", datepicker.calendarTime.height, ";line-height:", datepicker.calendarTime.height, ";text-align:center;font-size:", datepicker.calendarTime.fontSize, ";}.", k, "-datepicker-time-wrapper{overflow:hidden;height:320px;}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 });
 export var makeCalendarStyles = cache(function makeCalendarStyles(k) {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;justify-items:center;grid-template-columns:repeat(3, 1fr);gap:0;.", k, "-calendar-item{height:20px;width:40px;&.", k, "-in-range:after{width:calc(100% + 14px);left:calc(-", datepicker.item.yearGutter, " / 2);padding:0 calc(", datepicker.item.yearGutter, " / 2);}}}.", k, "-weeks{display:grid;.week-row{display:flex;align-items:center;width:", datepicker.week.width, ";margin:", datepicker.week.margin, ";.", k, "-week-number{padding:", datepicker.week.padding, ";cursor:pointer;}}.", k, "-calendar-item{height:", datepicker.week.height, ";&.", k, "-today:not(:last-child) .", k, "-value{background:", datepicker.week.currentWeek, ";border:0;&:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.week.currentWeek, ";width:100%;height:100%;left:0;padding:0 ", datepicker.item.rangeGutter, ";z-index:-1;}}&.", k, "-today:last-child .", k, "-value{border:0;}}}");
 });
 export var makeTimeStyles = cache(function makeTimeStyles(k) {
-  return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
+  return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:265px;}");
+});
+export var makeHighlightStyles = cache(function makeHighlightStyles(k, size, highlightWidth, highlightLeft) {
+  var paddingLeft = getLeft(select[size].padding);
+  return /*#__PURE__*/css("&.", k, "-dropdown-open{&:before{content:'';display:block;width:", highlightWidth ? highlightWidth + 'px' : '50%', ";height:1px;position:absolute;background-color:", datepicker.item.active.bgColor, ";left:calc(", paddingLeft, " + ", highlightLeft, "px);bottom:0;transition:left ", theme.transition.middle, ";}}");
 });

package/components/datepicker/useConfirm.d.ts

@@ -0,0 +1,6 @@
+import type { useFormats } from './useFormats';
+import { useHighlight } from './useHighlight';
+import { useValue } from './useValue';
+export declare function useConfirm(highlight: ReturnType<typeof useHighlight>, value: ReturnType<typeof useValue>, getValueString: ReturnType<typeof useFormats>['getValueString']): {
+    onConfirm: () => void;
+};

package/components/datepicker/useConfirm.js

@@ -0,0 +1,65 @@
+import { useInstance } from 'intact-vue-next';
+import { last } from '../utils';
+export function useConfirm(highlight, value, getValueString) {
+  var instance = useInstance();
+  var selectionState = [false, false];
+  /**
+   * can not use hide event to do it
+   * because value will be reset to dayjsValue on hide in useValue
+   */
+  instance.on('$change:show', function (show) {
+    if (!show) {
+      reset();
+      if (instance.get('range') && hasWholeRangeValue()) {
+        // to fix the order
+        value.updateValue();
+      }
+    }
+  });
+  instance.on('selecting', function () {
+    var _instance$get = instance.get(),
+      type = _instance$get.type;
+    if (type !== 'datetime') {
+      onConfirm();
+    }
+  });
+  function reset() {
+    selectionState = [false, false];
+  }
+  function onConfirm() {
+    var _instance$get2 = instance.get(),
+      multiple = _instance$get2.multiple,
+      range = _instance$get2.range;
+    if (range) {
+      var position = highlight.position.value;
+      selectionState[position] = true;
+      if (selectionState.every(function (state) {
+        return state;
+      })) {
+        if (!multiple) {
+          instance.hide();
+        } else {
+          // update value directly on multiple mode
+          reset();
+          value.unique();
+          value.updateValue();
+        }
+      }
+      highlight.togglePosition();
+    } else {
+      if (!multiple) {
+        instance.hide();
+      } else {
+        value.unique();
+      }
+      value.updateValue();
+    }
+  }
+  function hasWholeRangeValue() {
+    var lastValue = last(value.value.value);
+    return lastValue && lastValue.length === 2;
+  }
+  return {
+    onConfirm: onConfirm
+  };
+}

package/components/datepicker/useDisabled.d.ts

@@ -1,11 +1,13 @@
 import { State } from '../../hooks/useState';
-import { Dayjs, OpUnitType } from 'dayjs';
+import { Dayjs, OpUnitType, QUnitType } from './dayjs';
 import type { useFormats } from './useFormats';
-import { PanelFlags } from './usePanel';
-export declare function useDisabled({ createDateByValueFormat }: ReturnType<typeof useFormats>): {
-    isDisabled: (value: Dayjs, type?: OpUnitType) => boolean;
-    isDisabledTime: (value: Dayjs, flag: PanelFlags) => boolean;
+import { StateValueItem } from './useValueBase';
+import { Position } from './useHighlight';
+export declare function useDisabled({ createDateByValueFormat }: ReturnType<typeof useFormats>, getHighlightPosition?: () => State<Position>): {
+    isDisabled: (value: Dayjs, type?: OpUnitType | QUnitType) => boolean;
+    isDisabledTime: (value: Dayjs) => boolean;
     isDisabledConfirm: () => boolean;
+    isDisabledValue: (value: StateValueItem) => boolean;
     maxDate: State<Dayjs | null>;
     minDate: State<Dayjs | null>;
 };

package/components/datepicker/useDisabled.js

@@ -2,8 +2,7 @@ import { useInstance } from 'intact-vue-next';
 import { useState } from '../../hooks/useState';
 import { isNullOrUndefined } from 'intact-shared';
 import { isGT, isLT, last } from './helpers';
-import { PanelFlags, PanelTypes } from './usePanel';
-export function useDisabled(_ref) {
+export function useDisabled(_ref, getHighlightPosition) {
   var createDateByValueFormat = _ref.createDateByValueFormat;
   var instance = useInstance();
   var maxDate = useState(null);
@@ -29,41 +28,36 @@ export function useDisabled(_ref) {
       disabledDate = _instance$get.disabledDate;
     return isGT(value, maxDate.value, type) || isLT(value, minDate.value, type) || !!disabledDate && disabledDate(value);
   }
-  function isDisabledTime(value, flag) {
-    if (!isDisabled(value, 'second')) {
-      if (!instance.get('range')) return false;
-      // compare the start and the end datetime 
-      var anotherDatetime = instance.value.getTimeValue(flag === PanelFlags.Start ? PanelFlags.End : PanelFlags.Start);
-      if (!anotherDatetime) return false;
-      if (flag === PanelFlags.Start) {
-        return value.isAfter(anotherDatetime, 'second');
-      } else {
-        return value.isBefore(anotherDatetime, 'second');
-      }
-    }
-    return true;
+  function isDisabledTime(value) {
+    return isDisabled(value, 'second');
   }
   function isDisabledConfirm() {
     var lastValue = last(instance.value.value.value);
-    if (!lastValue) return true;
     var _instance$get2 = instance.get(),
-      range = _instance$get2.range;
-    if (range && lastValue.length < 2) return true;
-    var _instance$panel = instance.panel,
-      startPanel = _instance$panel.startPanel,
-      endPanel = _instance$panel.endPanel;
-    if (startPanel.value === PanelTypes.Date && endPanel.value === PanelTypes.Date) {
-      return true;
+      range = _instance$get2.range,
+      multiple = _instance$get2.multiple;
+    if (!lastValue || instance.value.allValuesUpdatedInMultipleMode()) return true;
+    if (range && getHighlightPosition) {
+      var position = getHighlightPosition();
+      // if the position is not selected, it should be disabled
+      if (!lastValue[position.value]) {
+        return true;
+      }
     }
+    return isDisabledValue(lastValue);
+  }
+  function isDisabledValue(value) {
+    var _instance$get3 = instance.get(),
+      range = _instance$get3.range;
     var start;
     var end;
     if (range) {
-      start = lastValue[0];
-      end = lastValue[1];
+      start = value[0];
+      end = value[1];
     } else {
-      start = lastValue;
+      start = value;
     }
-    if (isDisabledTime(start, PanelFlags.Start) || end && isDisabledTime(end, PanelFlags.End)) {
+    if (isDisabledTime(start) || end && isDisabledTime(end)) {
       return true;
     }
     return false;
@@ -72,6 +66,7 @@ export function useDisabled(_ref) {
     isDisabled: isDisabled,
     isDisabledTime: isDisabledTime,
     isDisabledConfirm: isDisabledConfirm,
+    isDisabledValue: isDisabledValue,
     maxDate: maxDate,
     minDate: minDate
   };

package/components/datepicker/useFormats.d.ts

@@ -1,5 +1,5 @@
-import dayjs, { Dayjs } from './dayjs';
-import { Value } from './basepicker';
+import dayjs, { Dayjs } from 'dayjs';
+import type { Value } from './useValueBase';
 export declare function useFormats(): {
     getValueFormat: () => string;
     getShowFormat: () => string;

package/components/datepicker/useFormats.js

@@ -1,11 +1,13 @@
 import { useInstance } from 'intact-vue-next';
-import dayjs from './dayjs';
+import dayjs from 'dayjs';
 import { isString } from 'intact-shared';
 var FORMATS = {
   date: 'YYYY-MM-DD',
   datetime: 'YYYY-MM-DD HH:mm:ss',
   year: 'YYYY',
-  month: 'YYYY-MM'
+  month: 'YYYY-MM',
+  quarter: 'YYYY-[Q]Q',
+  week: 'YYYY-w[周]'
 };
 export function useFormats() {
   var instance = useInstance();
@@ -23,8 +25,12 @@ export function useFormats() {
       type = _instance$get2.type;
     return showFormat || format || FORMATS[type];
   }
+  /**
+   * 根据日期字符串，按照格式创建日期对象
+   */
   function createDateByValueFormat(value) {
-    return dayjs(value, isString(value) ? getValueFormat() : undefined);
+    var format = isString(value) ? getValueFormat() : undefined;
+    return dayjs(value, format);
   }
   function createDateByShowFormat(value) {
     return dayjs(value, getShowFormat(), true); // strict parsing 

package/components/datepicker/useHighlight.d.ts

@@ -0,0 +1,14 @@
+import { State } from '../../hooks/useState';
+import { StateValue } from './useValueBase';
+import { Dayjs } from 'dayjs';
+export declare enum Position {
+    Start = 0,
+    End = 1
+}
+export declare function useHighlight(value: State<StateValue>, getShowString: (value: Dayjs) => string, keywords: State<string>): {
+    position: State<Position>;
+    handleInputClick: () => void;
+    togglePosition: () => void;
+    highlightWidth: State<number>;
+    highlightLeft: State<number>;
+};

package/components/datepicker/useHighlight.js

@@ -0,0 +1,60 @@
+import { useInstance, onMounted } from 'intact-vue-next';
+import { useState, watchState } from '../../hooks/useState';
+import dayjs from 'dayjs';
+export var Position;
+(function (Position) {
+  Position[Position["Start"] = 0] = "Start";
+  Position[Position["End"] = 1] = "End";
+})(Position || (Position = {}));
+var DELIMITER_WIDTH = 14;
+var fakeDate = dayjs();
+export function useHighlight(value, getShowString, keywords) {
+  var instance = useInstance();
+  var position = useState(Position.Start);
+  var highlightWidth = useState(0);
+  var highlightLeft = useState(0);
+  /**
+   * calculate the real width by rendering the showString to fake div
+   */
+  onMounted(function () {
+    var showString = getShowString(fakeDate);
+    instance.input.inputRef.value.getStringWidth(showString).then(function (width) {
+      highlightWidth.set(width);
+    });
+  });
+  /**
+   * change the left of style on position changed
+   */
+  watchState(position, function (position) {
+    highlightLeft.set(position === Position.Start ? 0 : highlightWidth.value + DELIMITER_WIDTH);
+  });
+  // if value is cleared reset the position to start
+  instance.watch('value', function (v) {
+    if (!v || Array.isArray(v) && !v.length) {
+      position.set(Position.Start);
+    }
+  });
+  function handleInputClick() {
+    var _instance$get = instance.get(),
+      range = _instance$get.range,
+      type = _instance$get.type;
+    if (!range) return;
+    var cursorPosition = instance.input.inputRef.value.getSelectionStart();
+    var showString = getShowString(fakeDate);
+    if (!cursorPosition || cursorPosition <= showString.length + 1 /* one whitespace */) {
+      position.set(Position.Start);
+    } else {
+      position.set(Position.End);
+    }
+  }
+  function togglePosition() {
+    position.set(position.value === Position.Start ? Position.End : Position.Start);
+  }
+  return {
+    position: position,
+    handleInputClick: handleInputClick,
+    togglePosition: togglePosition,
+    highlightWidth: highlightWidth,
+    highlightLeft: highlightLeft
+  };
+}

package/components/datepicker/useKeyboards.js

@@ -72,7 +72,8 @@ export function useKeyboards(panelRef, focusDate) {
         break;
     }
     var _focusDate = focusDate.value;
-    _focusDate = _focusDate.add(offset, type === 'date' ? 'day' : type);
+    var unit = type === 'date' ? 'day' : type;
+    _focusDate = _focusDate.add(offset, unit);
     focusDate.set(_focusDate);
     // change panel show date
     calendar.showDate.date.set(_focusDate);

package/components/datepicker/useMergeRange.d.ts

@@ -0,0 +1,5 @@
+import { DayjsValue } from './useValueBase';
+import type { useFormats } from './useFormats';
+export declare function useMergeRange(formats: ReturnType<typeof useFormats>): {
+    formatMultipleValues: (dayjsValue: DayjsValue, results: string[]) => string[];
+};

package/components/datepicker/useMergeRange.js

@@ -0,0 +1,45 @@
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance } from 'intact-vue-next';
+// TODO isMerge
+export function useMergeRange(formats) {
+  var instance = useInstance();
+  function _mergeRanges(dayjsValue, getShowString) {
+    var _context, _context2;
+    var ranges = _sortInstanceProperty(_context = _mapInstanceProperty(_context2 = _filterInstanceProperty(dayjsValue).call(dayjsValue, Array.isArray)).call(_context2, function (range) {
+      return {
+        start: range[0],
+        end: range[1]
+      };
+    })).call(_context, function (a, b) {
+      return a.start.valueOf() - b.start.valueOf();
+    });
+    if (ranges.length === 0) return [];
+    // 合并有交集的时间范围
+    var mergedRange = ranges.reduce(function (acc, curr) {
+      if (!acc) return curr;
+      return {
+        start: acc.start,
+        end: curr.end.valueOf() > acc.end.valueOf() ? curr.end : acc.end
+      };
+    });
+    return [getShowString(mergedRange.start) + " ~ " + getShowString(mergedRange.end)];
+  }
+  function formatMultipleValues(dayjsValue, results) {
+    // const {isMerge, nowrap} = instance.get();
+    // if (isMerge && nowrap) {
+    //     const mergedResults = _mergeRanges(dayjsValue, (v: Dayjs) => v.format(formats.getShowFormat()));
+    //     if (mergedResults.length > 0) {
+    //         return [
+    //             ...mergedResults,
+    //             ...results.slice(1).map((result, index) => `${result}-${index}`)
+    //         ];
+    //     }
+    // }
+    return results;
+  }
+  return {
+    formatMultipleValues: formatMultipleValues
+  };
+}

package/components/datepicker/useMonths.js

@@ -26,10 +26,12 @@ export function useMonths(showDate, status, focusDate) {
   function onClick(date) {
     showDate.set(date);
     var datepickerType = instance.datepicker.get('type');
-    if (datepickerType !== 'month' && datepickerType !== 'year') {
-      instance.type.set('date');
-    } else {
+    if (datepickerType === 'month' || datepickerType === 'year') {
       instance.triggerChange(date);
+    } else if (datepickerType === 'week') {
+      instance.type.set('week');
+    } else {
+      instance.type.set('date');
     }
   }
   return {