@king-design/vue 2.1.4 → 2.1.6

package/components/datepicker/basepicker.js

@@ -8,12 +8,14 @@ import { __decorate } from "tslib";
 /**
  * The base hook for handling value of Datepicker and Timepicker
  */
+
 import { useInstance } from 'intact-vue-next';
 import { useState, watchState } from '../../hooks/useState';
 import dayjs from './dayjs';
 import { findValueIndex } from './helpers';
 import { isEqualArray, last, bind } from '../utils';
 import { BaseSelect } from '../select/base';
+
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
   value: [String, Array, Date, Number, dayjs.Dayjs],
   range: Boolean,
@@ -24,42 +26,52 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
   max: [String, Date, Number, dayjs.Dayjs],
   disabledDate: Function
 });
+
 var defaults = function defaults() {
   return _extends({}, BaseSelect.defaults(), {
     filterable: true
   });
 };
+
 var events = _extends({}, BaseSelect.events, {
   selecting: true
 });
+
 export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
   _inheritsLoose(BasePicker, _BaseSelect);
+
   function BasePicker() {
     return _BaseSelect.apply(this, arguments) || this;
   }
+
   var _proto = BasePicker.prototype;
+
   _proto.resetKeywords = function resetKeywords(keywords) {
     var _this$get = this.get(),
-      multiple = _this$get.multiple,
-      range = _this$get.range;
+        multiple = _this$get.multiple,
+        range = _this$get.range;
+
     var dayjsValue = this.value.getDayjsValue();
     var getShowString = this.formats.getShowString;
     var value = last(dayjsValue);
     keywords.set(multiple ? '' : !range ? value ? getShowString(value) : '' : value ? [getShowString(value[0]), getShowString(value[1])].join(' ~ ') : '');
   };
+
   return BasePicker;
 }(BaseSelect);
 BasePicker.typeDefs = typeDefs;
 BasePicker.defaults = defaults;
 BasePicker.events = events;
+
 __decorate([bind], BasePicker.prototype, "resetKeywords", null);
+
 export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInput, getEqualType, updateStateValue) {
   var createDateByValueFormat = _ref.createDateByValueFormat,
-    createDateByShowFormat = _ref.createDateByShowFormat,
-    getShowString = _ref.getShowString,
-    getValueString = _ref.getValueString;
+      createDateByShowFormat = _ref.createDateByShowFormat,
+      getShowString = _ref.getShowString,
+      getValueString = _ref.getValueString;
   var isDisabled = _ref2.isDisabled,
-    minDate = _ref2.minDate;
+      minDate = _ref2.minDate;
   // Normalize the value to multipe values, no matter it's multipe or not
   var value = useState([]);
   var instance = useInstance();
@@ -67,106 +79,138 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
   instance.watch('value', function (newValue, oldValue) {
     if (isEqualArray(newValue, oldValue)) return;
     dayjsValue = convertToDayjs(newValue);
-    updateStateValue(dayjsValue, value);
-    // should update keywords
+    updateStateValue(dayjsValue, value); // should update keywords
+
     instance.resetKeywords(instance.input.keywords);
   });
   watchState(instance.input.keywords, function (v) {
     var _instance$get = instance.get(),
-      range = _instance$get.range,
-      multiple = _instance$get.multiple;
+        range = _instance$get.range,
+        multiple = _instance$get.multiple;
+
     if (!multiple && v === '') return instance.set('value', null);
+
     if (range) {
       var _context;
+
       var _v$split$map = _mapInstanceProperty(_context = v.split(/\s*~\s*/)).call(_context, function (s) {
-          return _trimInstanceProperty(s).call(s);
-        }),
-        start = _v$split$map[0],
-        end = _v$split$map[1];
+        return _trimInstanceProperty(s).call(s);
+      }),
+          start = _v$split$map[0],
+          end = _v$split$map[1];
+
       if (start && end) {
         var startDate = createDateByShowFormat(start);
+
         if (!isValidDate(startDate)) {
           return;
         }
+
         var endDate = createDateByShowFormat(end);
+
         if (!isValidDate(endDate)) {
           return;
         }
+
         if (endDate.isAfter(startDate)) {
           updateValueOnInput([startDate, endDate]);
         }
       }
     } else {
       var date = createDateByShowFormat(v);
+
       if (isValidDate(date)) {
         updateValueOnInput(date);
       }
     }
   });
+
   function convertToDayjs(v) {
     if (!v || Array.isArray(v) && !v.length) return [];
+
     var _instance$get2 = instance.get(),
-      multiple = _instance$get2.multiple;
+        multiple = _instance$get2.multiple;
+
     if (!multiple) {
       v = [v];
     }
+
     return _mapInstanceProperty(v).call(v, function (value) {
       if (Array.isArray(value)) {
         // range
         return _mapInstanceProperty(value).call(value, createDateByValueFormat);
       }
+
       return createDateByValueFormat(value);
     });
   }
+
   function convertToValueString(v) {
     var results = _mapInstanceProperty(v).call(v, function (value) {
       if (Array.isArray(value)) {
         return _mapInstanceProperty(value).call(value, getValueString);
       }
+
       return getValueString(value);
     });
+
     if (!instance.get('multiple')) {
       return results[0] || null;
     }
+
     return results;
   }
+
   function format() {
     var results = _mapInstanceProperty(dayjsValue).call(dayjsValue, function (value) {
       if (Array.isArray(value)) {
         return _mapInstanceProperty(value).call(value, getShowString).join(' ~ ');
       }
+
       return getShowString(value);
     });
+
     if (!instance.get('multiple')) {
       return results[0];
     }
+
     return results;
   }
+
   function setSingleDate(v, fromInput) {
     var _instance$get3 = instance.get(),
-      range = _instance$get3.range;
+        range = _instance$get3.range;
+
     value.set([v]);
+
     if (fromInput || shouldUpdateValue(v)) {
       updateValue();
     }
   }
+
   function addMultipeDate(v, fromInput) {
     var _instance$get4 = instance.get(),
-      range = _instance$get4.range;
+        range = _instance$get4.range;
+
     var _value = value.value;
     _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
+
     if (range && v.length === 2) {
       // pop the last value firstly, if it only has the start date 
       var lastValue = last(_value);
+
       if (lastValue && lastValue.length < 2) {
         _value.pop();
       }
     }
+
     var _shouldUpdateValue = true;
+
     if (fromInput || shouldUpdateValue(v)) {
       // if select the date/year/month, then toggle the value.
       // if from input, treat the value as the final value
       var index = findValueIndex(_value, v, getEqualType());
+
       if (index > -1) {
         _spliceInstanceProperty(_value).call(_value, index, 1);
       } else {
@@ -176,27 +220,34 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
       // select the datetime, only push the value,
       // and unique the array on click confrim button
       _value.push(v);
+
       _shouldUpdateValue = false;
     }
+
     value.set(_value);
+
     if (_shouldUpdateValue) {
       updateValue();
     }
   }
+
   function setValue(v, fromInput) {
     var multiple = instance.get('multiple');
+
     if (multiple) {
       addMultipeDate(v, fromInput);
     } else {
       setSingleDate(v, fromInput);
     }
   }
+
   function updateValue() {
     var _value = value.value;
     var valueStr = convertToValueString(_value);
     instance.set('value', valueStr);
     instance.resetKeywords(instance.input.keywords);
   }
+
   function onConfirm() {
     // unique
     if (!instance.get('multiple')) {
@@ -205,57 +256,76 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
       unique();
       panel.reset();
     }
+
     updateValue();
   }
+
   function unique() {
     var _value = value.value;
     var map = {};
     var results = [];
+
     _value.forEach(function (value) {
       var key;
+
       if (Array.isArray(value)) {
         key = _mapInstanceProperty(value).call(value, getValueString).join(' ~ ');
       } else {
         key = getValueString(value);
       }
+
       if (!map[key]) {
         map[key] = true;
         results.push(value);
       }
     });
+
     value.set(results);
   }
+
   function isValidDate(date) {
     return date.isValid() && !isDisabled(date, getEqualType());
   }
+
   function onChangeTime(date, flag) {
     var _context2;
+
     var _instance$get5 = instance.get(),
-      range = _instance$get5.range;
+        range = _instance$get5.range;
+
     var values = _sliceInstanceProperty(_context2 = value.value).call(_context2);
+
     var lastIndex = values.length - 1;
     var _value = date;
+
     if (range) {
       var _context3;
+
       _value = _sliceInstanceProperty(_context3 = values[lastIndex]).call(_context3);
       _value[flag] = date;
       instance.trigger('selecting', _value);
     }
+
     values[lastIndex] = _value;
     value.set(values);
   }
+
   function getTimeValue(flag) {
     var _value = value.value;
     if (!_value.length) return null;
+
     var _instance$get6 = instance.get(),
-      range = _instance$get6.range,
-      min = _instance$get6.min;
+        range = _instance$get6.range,
+        min = _instance$get6.min;
+
     var lastValue = last(_value);
     return range ? lastValue[flag] : lastValue;
   }
+
   function getDayjsValue() {
     return dayjsValue;
   }
+
   return {
     value: value,
     format: format,

package/components/datepicker/calendar.js

@@ -12,19 +12,25 @@ import { bind } from '../utils';
 import { useYears } from './useYears';
 import { useMonths } from './useMonths';
 import { useStatus } from './useStatus';
+
 var defaults = function defaults() {
   return {
     type: 'date'
   };
 };
+
 export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DatepickerCalendar, _Component);
+
   function DatepickerCalendar() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.type = useType(_assertThisInitialized(_this));
     _this.datepicker = inject(DATEPICKER);
@@ -35,15 +41,20 @@ export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
     _this.months = useMonths(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     return _this;
   }
+
   var _proto = DatepickerCalendar.prototype;
+
   _proto.triggerChange = function triggerChange(value) {
     this.trigger('change', value, this.get('flag'));
   };
+
   return DatepickerCalendar;
 }(Component);
 DatepickerCalendar.template = template;
 DatepickerCalendar.defaults = defaults;
+
 __decorate([bind], DatepickerCalendar.prototype, "triggerChange", null);
+
 function useType(instance) {
   var type = useState('date');
   instance.on('$receive:type', function (v) {

package/components/datepicker/calendar.vdt.js

@@ -31,6 +31,7 @@ var _$tmp5 = {
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
@@ -42,8 +43,9 @@ export default function ($props, $blocks, $__proto__) {
   }, _classNameObj[makeCalendarStyles()] = true, _classNameObj);
   var now = getNowDate();
   var _this$datepicker$focu = this.datepicker.focusDate,
-    focusDate = _this$datepicker$focu.focusDate,
-    resetFocusDate = _this$datepicker$focu.reset;
+      focusDate = _this$datepicker$focu.focusDate,
+      resetFocusDate = _this$datepicker$focu.reset;
+
   var getItems = function getItems(data, onClick) {
     return _$ma(data, function ($value, $key) {
       return _$ce(2, 'div', _$ce(2, 'div', $value.label, 0, 'k-value'), 2, _$cn({
@@ -65,17 +67,18 @@ export default function ($props, $blocks, $__proto__) {
       });
     }, $this);
   };
+
   var _this$days = this.days,
-    getDays = _this$days.getDays,
-    onClickDay = _this$days.onClick;
+      getDays = _this$days.getDays,
+      onClickDay = _this$days.onClick;
   var _this$showDate = this.showDate,
-    getDateLabel = _this$showDate.getDateLabel,
-    prevMonth = _this$showDate.prevMonth,
-    nextMonth = _this$showDate.nextMonth,
-    prevYear = _this$showDate.prevYear,
-    nextYear = _this$showDate.nextYear,
-    prevTenYears = _this$showDate.prevTenYears,
-    nextTenYears = _this$showDate.nextTenYears;
+      getDateLabel = _this$showDate.getDateLabel,
+      prevMonth = _this$showDate.prevMonth,
+      nextMonth = _this$showDate.nextMonth,
+      prevYear = _this$showDate.prevYear,
+      nextYear = _this$showDate.nextYear,
+      prevTenYears = _this$showDate.prevTenYears,
+      nextTenYears = _this$showDate.nextTenYears;
   return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Button, {
     'icon': true,
     'type': 'none',

package/components/datepicker/constants.js

@@ -1,4 +1,5 @@
 var _context, _context2;
+
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { range, strPad } from '../utils';
 export var DATEPICKER = 'Datepicker';

package/components/datepicker/dayjs.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 dayjs.extend(customParseFormat);
 export default dayjs;

package/components/datepicker/helpers.js

@@ -24,40 +24,52 @@ export function isEqual(a, b, type) {
   if (type === void 0) {
     type = 'date';
   }
+
   if (a && b) {
     return a.isSame(b, type);
   }
+
   return false;
 }
 export function isLT(a, b, type) {
   if (type === void 0) {
     type = 'date';
   }
+
   if (a && b) {
     return a.isBefore(b, type);
   }
+
   return false;
 }
 export function isGT(a, b, type) {
   if (type === void 0) {
     type = 'date';
   }
+
   return isLT(b, a, type);
 }
 export function createDate(date) {
   if (typeof date === 'string') {
     var _context;
+
     var _date$split = date.split(' '),
-      dateString = _date$split[0],
-      timeString = _date$split[1];
+        dateString = _date$split[0],
+        timeString = _date$split[1];
+
     var args = _mapInstanceProperty(_context = dateString.split('-')).call(_context, Number);
+
     args[1] = args[1] - 1;
+
     if (timeString) {
       var _context2;
+
       args.push.apply(args, _mapInstanceProperty(_context2 = timeString.split(':')).call(_context2, Number));
     }
+
     return _construct(Date, args);
   }
+
   if (!date) return new Date();
   return new Date(date);
 }
@@ -66,7 +78,7 @@ export function findValueIndex(values, value, type) {
     if (Array.isArray(item)) {
       // is multipe range values
       var start = value[0],
-        end = value[1];
+          end = value[1];
       return isEqual(item[0], start, type) && isEqual(item[1], end, type);
     } else {
       return isEqual(value, item, type);

package/components/datepicker/index.d.ts

@@ -0,0 +1,63 @@
+import { TypeDefs } from 'intact-vue-next';
+import dayjs from './dayjs';
+import { State } from '../../hooks/useState';
+import { Shortcut } from './shortcuts';
+import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value } from './basepicker';
+export * as shortcuts from './shortcuts';
+export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
+    type?: 'date' | 'datetime' | 'year' | 'month';
+    shortcuts?: Shortcut[];
+}
+export interface DatepickerEvents extends BasePickerEvents {
+}
+export interface DatepickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BasePickerBlocks<V, R> {
+}
+export declare class Datepicker<V extends Value = Value, M extends boolean = false, R extends boolean = false> extends BasePicker<DatepickerProps<V, M, R>, DatepickerEvents, DatepickerBlocks<V, R>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DatepickerProps<Value, boolean, boolean>>>;
+    static defaults: () => Partial<DatepickerProps<Value, boolean, boolean>>;
+    formats: {
+        getValueFormat: () => string;
+        getShowFormat: () => string;
+        createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+        createDateByShowFormat: (value: string) => dayjs.Dayjs;
+        getShowString: (value: dayjs.Dayjs) => string;
+        getValueString: (value: dayjs.Dayjs) => string;
+    };
+    disabled: {
+        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
+        isDisabledTime: (value: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => boolean;
+        isDisabledConfirm: () => boolean;
+        maxDate: State<dayjs.Dayjs | null>;
+        minDate: State<dayjs.Dayjs | null>;
+    };
+    panel: {
+        startPanel: State<import("./usePanel").PanelTypes>;
+        endPanel: State<import("./usePanel").PanelTypes>;
+        changePanel: (type: import("./usePanel").PanelTypes, flag?: import("./usePanel").PanelFlags) => void;
+        getPanel: (flag: import("./usePanel").PanelFlags) => State<import("./usePanel").PanelTypes>;
+        reset: () => void;
+        startRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+        endRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+    };
+    focusDate: {
+        focusDate: State<dayjs.Dayjs | null>;
+        reset: () => void;
+    };
+    value: {
+        format: () => string | string[];
+        onConfirm: () => void;
+        onChangeTime: (date: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+        getTimeValue: (flag: import("./usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
+        convertToDayjs: (v: Value | [Value, Value] | Value[] | [Value, Value][] | null | undefined) => import("./basepicker").DayjsValue;
+        getDayjsValue: () => import("./basepicker").DayjsValue;
+        value: State<import("./basepicker").StateValue>;
+        setValue: (v: import("./basepicker").StateValueItem, fromInput: boolean) => void;
+        onChangeDate: (v: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+    };
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import("intact").Children[];
+    protected getLabel(): string | string[];
+    protected clear(e: MouseEvent): void;
+    private setByShortcut;
+}

package/components/datepicker/index.js

@@ -17,23 +17,30 @@ import { useKeyboards } from './useKeyboards';
 import { BasePicker } from './basepicker';
 import * as _shortcuts from './shortcuts';
 export { _shortcuts as shortcuts };
+
 var typeDefs = _extends({}, BasePicker.typeDefs, {
   type: ['date', 'datetime', 'year', 'month'],
   shortcuts: Array
 });
+
 var defaults = function defaults() {
   return _extends({}, BasePicker.defaults(), {
     type: 'date'
   });
 };
+
 export var Datepicker = /*#__PURE__*/function (_BasePicker) {
   _inheritsLoose(Datepicker, _BasePicker);
+
   function Datepicker() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _BasePicker.call.apply(_BasePicker, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.formats = useFormats();
     _this.disabled = useDisabled(_this.formats);
@@ -42,54 +49,73 @@ export var Datepicker = /*#__PURE__*/function (_BasePicker) {
     _this.value = useValue(_this.formats, _this.disabled, _this.panel);
     return _this;
   }
+
   var _proto = Datepicker.prototype;
+
   _proto.init = function init() {
     _BasePicker.prototype.init.call(this);
+
     provide(DATEPICKER, this);
     useKeyboards(this.panel.startRef, this.focusDate.focusDate);
   };
+
   _proto.getPlaceholder = function getPlaceholder() {
     var _this$get = this.get(),
-      placeholder = _this$get.placeholder,
-      type = _this$get.type,
-      range = _this$get.range;
+        placeholder = _this$get.placeholder,
+        type = _this$get.type,
+        range = _this$get.range;
+
     if (!isNullOrUndefined(placeholder)) return placeholder;
+
     switch (type) {
       case 'datetime':
         return range ? _$('开始时间 ~ 结束时间') : _$('请选择日期和时间');
+
       case 'year':
         return _$('请选择年份');
+
       case 'month':
         return _$('请选择月份');
+
       default:
         return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
     }
   };
+
   _proto.getLabel = function getLabel() {
     return this.value.format();
   };
+
   _proto.clear = function clear(e) {
     _BasePicker.prototype.clear.call(this, e);
+
     if (this.get('type') === 'datetime') {
       // reset the state to let user re-select
       this.panel.reset();
     }
   };
+
   _proto.setByShortcut = function setByShortcut(shortcut) {
     var _this$value = this.value,
-      setValue = _this$value.setValue,
-      convertToDayjs = _this$value.convertToDayjs;
+        setValue = _this$value.setValue,
+        convertToDayjs = _this$value.convertToDayjs;
+
     var _this$get2 = this.get(),
-      multiple = _this$get2.multiple;
+        multiple = _this$get2.multiple;
+
     setValue(convertToDayjs(shortcut.value())[0], true);
+
     if (!multiple) {
       this.hide();
     }
   };
+
   return Datepicker;
 }(BasePicker);
 Datepicker.template = template;
 Datepicker.typeDefs = typeDefs;
 Datepicker.defaults = defaults;
+
 __decorate([bind], Datepicker.prototype, "clear", null);
+
 __decorate([bind], Datepicker.prototype, "setByShortcut", null);