@opentiny/vue-renderless 3.1.0-alpha.0

package/picker/index.js

@@ -0,0 +1,1039 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { toDate, getDateWithNewTimezone, getStrTimezone, getLocalTimezone } from '@opentiny/vue-renderless/common/date';
+import { isNumber, isDate } from '@opentiny/vue-renderless/common/type';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+import { formatDate, parseDate, isDateObject, getWeekNumber } from '@opentiny/vue-renderless/common/deps/date-util';
+import { extend } from '@opentiny/vue-renderless/common/object';
+import globalTimezone from '@opentiny/vue-renderless/picker/timezone';
+var iso8601Reg = /^\d{4}-\d{2}-\d{2}(.)\d{2}:\d{2}:\d{2}(.+)$/;
+export var getPanel = function getPanel(_ref) {
+  var DatePanel = _ref.DatePanel,
+    DateRangePanel = _ref.DateRangePanel,
+    MonthRangePanel = _ref.MonthRangePanel,
+    TimePanel = _ref.TimePanel,
+    TimeRangePanel = _ref.TimeRangePanel,
+    TimeSelect = _ref.TimeSelect;
+  return function (type) {
+    if (type === DATEPICKER.DateRange || type === DATEPICKER.DateTimeRange) {
+      return DateRangePanel;
+    } else if (type === DATEPICKER.MonthRange) {
+      return MonthRangePanel;
+    } else if (type === DATEPICKER.TimeRange) {
+      return TimeRangePanel;
+    } else if (type === DATEPICKER.Time) {
+      return TimePanel;
+    } else if (type === DATEPICKER.TimeSelect) {
+      return TimeSelect;
+    }
+    return DatePanel;
+  };
+};
+export var watchPickerVisible = function watchPickerVisible(_ref2) {
+  var api = _ref2.api,
+    vm = _ref2.vm,
+    dispatch = _ref2.dispatch,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (value) {
+    if (props.readonly || state.pickerDisabled) return;
+    if (value) {
+      api.showPicker();
+      state.valueOnOpen = Array.isArray(props.modelValue) ? _toConsumableArray(props.modelValue) : props.modelValue;
+    } else {
+      api.hidePicker();
+      api.emitChange(props.modelValue);
+      state.userInput = null;
+      if (props.validateEvent) {
+        dispatch('FormItem', 'form.blur');
+      }
+      emit('blur', vm);
+      api.blur();
+    }
+  };
+};
+export var getValueEmpty = function getValueEmpty(props) {
+  return function () {
+    var modelValue = props.modelValue;
+    if (Array.isArray(modelValue)) {
+      for (var i = 0, len = modelValue.length; i < len; i++) {
+        if (modelValue[i]) {
+          return false;
+        }
+      }
+    } else {
+      if (modelValue) {
+        return false;
+      }
+    }
+    return true;
+  };
+};
+export var getMode = function getMode(_ref3) {
+  var state = _ref3.state;
+  return function () {
+    if (state.type === DATEPICKER.Week) {
+      return DATEPICKER.Week;
+    } else if (state.type === DATEPICKER.Month) {
+      return DATEPICKER.Month;
+    } else if (state.type === DATEPICKER.Year) {
+      return DATEPICKER.Year;
+    } else if (state.type === DATEPICKER.Dates) {
+      return DATEPICKER.Dates;
+    }
+    return DATEPICKER.Day;
+  };
+};
+export var formatAsFormatAndType = function formatAsFormatAndType(_ref4) {
+  var api = _ref4.api;
+  return function (value, customFormat, type) {
+    if (!value) return null;
+    var formatter = (api.typeValueResolveMap()[type] || api.typeValueResolveMap()['default']).formatter;
+    var format = customFormat || DATEPICKER.DateFormats[type];
+    return formatter(value, format);
+  };
+};
+export var displayValue = function displayValue(_ref5) {
+  var api = _ref5.api,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    var formattedValue = api.formatAsFormatAndType(state.parsedValue, state.format, state.type, props.rangeSeparator);
+    if (Array.isArray(state.userInput)) {
+      return [state.userInput[0] || formattedValue && formattedValue[0] || '', state.userInput[1] || formattedValue && formattedValue[1] || ''];
+    } else if (state.userInput !== null) {
+      return state.userInput;
+    } else if (formattedValue) {
+      return state.type === DATEPICKER.Dates ? formattedValue.join(', ') : formattedValue;
+    }
+    return '';
+  };
+};
+export var parseAsFormatAndType = function parseAsFormatAndType(_ref6) {
+  var api = _ref6.api;
+  return function (value, customFormat, type) {
+    var rangeSeparator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '-';
+    if (!value) return null;
+    var parser = (api.typeValueResolveMap()[type] || api.typeValueResolveMap()['default']).parser;
+    var format = customFormat || DATEPICKER.DateFormats[type];
+    return parser(value, format, rangeSeparator);
+  };
+};
+export var parsedValue = function parsedValue(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props,
+    state = _ref7.state,
+    t = _ref7.t;
+  return function () {
+    if (!props.modelValue) return props.modelValue;
+    if (state.type === DATEPICKER.TimeSelect) return props.modelValue;
+    var valueIsDateObject = isDateObject(props.modelValue) || Array.isArray(props.modelValue) && props.modelValue.every(isDateObject);
+    var _state$timezone = state.timezone,
+      from = _state$timezone.from,
+      to = _state$timezone.to,
+      isServiceTimezone = _state$timezone.isServiceTimezone;
+    if (valueIsDateObject && !isServiceTimezone) {
+      return props.modelValue;
+    }
+    if (state.valueFormat) {
+      var date = props.modelValue;
+      if (isServiceTimezone) {
+        if (Array.isArray(date)) {
+          date = [].concat(date).map(function (item) {
+            return isDate(item) ? formatDate(item, state.valueFormat, t) : item;
+          });
+        } else {
+          date = formatDate(date, state.valueFormat, t);
+        }
+      }
+      var result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
+      if (Array.isArray(result)) {
+        return result.map(function (date) {
+          return getDateWithNewTimezone(date, from, to);
+        });
+      }
+      return getDateWithNewTimezone(result || props.modelValue, from, to);
+    }
+    var trans = function trans(value) {
+      return typeof value === 'string' || isNumber(value) ? toDate(value) : value;
+    };
+    var values = [].concat(props.modelValue).map(function (val) {
+      return getDateWithNewTimezone(trans(val), from, to);
+    });
+    return values.length > 1 ? values : values[0];
+  };
+};
+export var getTimezone = function getTimezone(_ref8) {
+  var props = _ref8.props,
+    utils = _ref8.utils;
+  return function () {
+    var dbTimezone = props.dbTimezone,
+      timezone = props.timezone,
+      isutc8 = props.isutc8,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'date' : _props$type,
+      iso8601 = props.iso8601;
+    var setting = utils.getDateFormat && utils.getDateFormat();
+    var _ref9 = setting || {},
+      DbTimezone = _ref9.DbTimezone,
+      Timezone = _ref9.Timezone;
+    var cur = getLocalTimezone();
+    var isTzNumber = function isTzNumber(z) {
+      return typeof z === 'number' && z >= -12 && z <= 12;
+    };
+    if (!~type.indexOf('datetime')) {
+      return {
+        from: cur,
+        to: cur
+      };
+    }
+    var serveTimezone = isTzNumber(dbTimezone) ? dbTimezone : isTzNumber(DbTimezone) ? DbTimezone : cur;
+    var clientTimezone = isTzNumber(timezone) ? timezone : isTzNumber(Timezone) ? Timezone : cur;
+    var value = props.modelValue;
+    var str = (Array.isArray(value) ? value[0] : value) || '';
+    var match = typeof str === 'string' && str.match(/(-|\+)(\d{2}):?(\d{2})$/);
+    if ((iso8601 || setting) && match) {
+      serveTimezone = getStrTimezone(str);
+    }
+    return {
+      from: serveTimezone,
+      to: isutc8 ? 8 : clientTimezone,
+      isServiceTimezone: !!setting
+    };
+  };
+};
+var nullOrString = function nullOrString(value) {
+  var arr = Array.isArray(value) ? value : [value];
+  return arr.every(function (val) {
+    return !val && !isNumber(val) || typeof val === 'string';
+  });
+};
+export var getValueFormat = function getValueFormat(_ref10) {
+  var props = _ref10.props,
+    utils = _ref10.utils;
+  var valueFormat = props.valueFormat,
+    iso8601 = props.iso8601,
+    value = props.modelValue,
+    _props$type2 = props.type,
+    type = _props$type2 === void 0 ? 'date' : _props$type2;
+  var setting = utils.getDateFormat && utils.getDateFormat();
+  var suffix = '';
+  var separator = ' ';
+  if (!valueFormat && ~type.indexOf('datetime') && (iso8601 || setting) && nullOrString(value)) {
+    var str = (Array.isArray(value) ? value[0] : value) || '';
+    var match = str.match(iso8601Reg);
+    if (match && match.length === 3) {
+      suffix = match[2] || '';
+      separator = match[1];
+    }
+    return "yyyy-MM-dd".concat(separator, "HH:mm:ss").concat(suffix);
+  }
+  return valueFormat;
+};
+export var dateFormatter = function dateFormatter(_ref11) {
+  var t = _ref11.t;
+  return function (value, format) {
+    if (format === DATEPICKER.TimesTamp) return value.getTime();
+    return formatDate(value, format, t);
+  };
+};
+export var dateParser = function dateParser(_ref12) {
+  var t = _ref12.t;
+  return function (text, format) {
+    if (format === DATEPICKER.TimesTamp) return new Date(Number(text));
+    return parseDate(text, format, t);
+  };
+};
+export var rangeFormatter = function rangeFormatter(api) {
+  return function (value, format) {
+    if (Array.isArray(value) && value.length === 2) {
+      var start = value[0];
+      var end = value[1];
+      if (start && end) {
+        return [api.dateFormatter(start, format), api.dateFormatter(end, format)];
+      }
+    }
+    return '';
+  };
+};
+export var rangeParser = function rangeParser(api) {
+  return function (array, format, separator) {
+    if (!Array.isArray(array)) {
+      array = array.split(separator);
+    }
+    if (array.length === 2) {
+      var range1 = array[0];
+      var range2 = array[1];
+      return [api.dateParser(range1, format), api.dateParser(range2, format)];
+    }
+    return [];
+  };
+};
+export var getWeekData = function getWeekData(value) {
+  var valueday = new Date(value).getDay();
+  var newDate = new Date(value);
+  if (valueday >= 2) {
+    newDate.setTime(new Date(value).getTime() - (valueday - 1) * 86400000);
+  } else if (valueday === 0) {
+    newDate.setTime(new Date(value).getTime() + (valueday + 1) * 86400000);
+  }
+  return newDate;
+};
+var getDefaultOfTypeValueResolveMap = function getDefaultOfTypeValueResolveMap() {
+  return {
+    formatter: function formatter(value) {
+      return value ? '' + value : '';
+    },
+    parser: function parser(text) {
+      return text === undefined || text === '' ? null : text;
+    }
+  };
+};
+var getWeekOfTypeValueResolveMap = function getWeekOfTypeValueResolveMap(_ref13) {
+  var t = _ref13.t,
+    api = _ref13.api;
+  return {
+    formatter: function formatter(value, format) {
+      var weekDate = getWeekData(value);
+      var week = getWeekNumber(weekDate);
+      var month = weekDate.getMonth();
+      var trueDate = new Date(weekDate);
+      if (week === 1 && month === 11) {
+        trueDate.setHours(0, 0, 0, 0);
+        trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);
+      }
+      var date = formatDate(trueDate, format, t);
+      date = /WW/.test(date) ? date.replace(/WW/, week < 10 ? '0' + week : week) : date.replace(/W/, week);
+      return date;
+    },
+    parser: function parser(text, format) {
+      return api.typeValueResolveMap().date.parser(text, format);
+    }
+  };
+};
+var getNumberOfTypeValueResolveMap = function getNumberOfTypeValueResolveMap() {
+  return {
+    formatter: function formatter(value) {
+      return value ? '' + value : '';
+    },
+    parser: function parser(text) {
+      var result = Number(text);
+      return !isNaN(text) ? result : null;
+    }
+  };
+};
+var getDatesOfTypeValueResolveMap = function getDatesOfTypeValueResolveMap(api) {
+  return {
+    formatter: function formatter(value, format) {
+      return value.map(function (date) {
+        return api.dateFormatter(date, format);
+      });
+    },
+    parser: function parser(value, format) {
+      return (typeof value === 'string' ? value.split(', ') : value).map(function (date) {
+        return date instanceof Date ? date : api.dateParser(date, format);
+      });
+    }
+  };
+};
+export var typeValueResolveMap = function typeValueResolveMap(_ref14) {
+  var api = _ref14.api,
+    t = _ref14.t;
+  return function () {
+    return {
+      "default": getDefaultOfTypeValueResolveMap(),
+      week: getWeekOfTypeValueResolveMap({
+        t: t,
+        api: api
+      }),
+      date: {
+        formatter: api.dateFormatter,
+        parser: api.dateParser
+      },
+      datetime: {
+        formatter: api.dateFormatter,
+        parser: api.dateParser
+      },
+      daterange: {
+        formatter: api.rangeFormatter,
+        parser: api.rangeParser
+      },
+      monthrange: {
+        formatter: api.rangeFormatter,
+        parser: api.rangeParser
+      },
+      datetimerange: {
+        formatter: api.rangeFormatter,
+        parser: api.rangeParser
+      },
+      timerange: {
+        formatter: api.rangeFormatter,
+        parser: api.rangeParser
+      },
+      time: {
+        formatter: api.dateFormatter,
+        parser: api.dateParser
+      },
+      month: {
+        formatter: api.dateFormatter,
+        parser: api.dateParser
+      },
+      year: {
+        formatter: api.dateFormatter,
+        parser: api.dateParser
+      },
+      number: getNumberOfTypeValueResolveMap(),
+      dates: getDatesOfTypeValueResolveMap(api)
+    };
+  };
+};
+export var firstInputId = function firstInputId(_ref15) {
+  var props = _ref15.props,
+    state = _ref15.state;
+  return function () {
+    var obj = {};
+    var id;
+    if (state.ranged) {
+      id = props.id && props.id[0];
+    } else {
+      id = props.id;
+    }
+    if (id) obj.id = id;
+    return obj;
+  };
+};
+export var secondInputId = function secondInputId(_ref16) {
+  var props = _ref16.props,
+    state = _ref16.state;
+  return function () {
+    var obj = {};
+    var id;
+    if (state.ranged) {
+      id = props.id && props.id[1];
+    }
+    if (id) obj.id = id;
+    return obj;
+  };
+};
+export var focus = function focus(_ref17) {
+  var api = _ref17.api,
+    props = _ref17.props,
+    refs = _ref17.refs;
+  return function () {
+    return !props.ranged ? refs.reference.focus() : api.handleFocus();
+  };
+};
+export var blur = function blur(state) {
+  return function () {
+    return state.refInput.forEach(function (input) {
+      return input.blur();
+    });
+  };
+};
+export var parseValue = function parseValue(_ref18) {
+  var api = _ref18.api,
+    props = _ref18.props,
+    state = _ref18.state;
+  return function (value) {
+    var isParsed = isDateObject(value) || Array.isArray(value) && value.every(isDateObject);
+    if (state.valueFormat && !isParsed) {
+      return api.parseAsFormatAndType(value, state.valueFormat, state.type, props.rangeSeparator) || value;
+    }
+    return value;
+  };
+};
+export var formatToValue = function formatToValue(_ref19) {
+  var api = _ref19.api,
+    props = _ref19.props,
+    state = _ref19.state;
+  return function (date) {
+    var isFormattable = isDateObject(date) || Array.isArray(date) && date.every(isDateObject);
+    if (state.valueFormat && isFormattable) {
+      return api.formatAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
+    }
+    return date;
+  };
+};
+export var parseString = function parseString(_ref20) {
+  var api = _ref20.api,
+    state = _ref20.state;
+  return function (value) {
+    var type = Array.isArray(value) ? state.type : state.type.replace(DATEPICKER.Range, '');
+    return api.parseAsFormatAndType(value, state.format, type);
+  };
+};
+export var formatToString = function formatToString(_ref21) {
+  var api = _ref21.api,
+    state = _ref21.state;
+  return function (value) {
+    var type = Array.isArray(value) ? state.type : state.type.replace(DATEPICKER.Range, '');
+    return api.formatAsFormatAndType(value, state.format, type);
+  };
+};
+export var handleMouseEnter = function handleMouseEnter(_ref22) {
+  var props = _ref22.props,
+    state = _ref22.state;
+  return function () {
+    if (props.readonly || state.pickerDisabled) return;
+    if (!state.valueIsEmpty && props.clearable) {
+      state.showClose = true;
+    }
+  };
+};
+export var handleChange = function handleChange(_ref23) {
+  var api = _ref23.api,
+    state = _ref23.state;
+  return function () {
+    if (state.userInput) {
+      var value = api.parseString(state.displayValue);
+      if (value) {
+        state.picker.state.value = value;
+        if (api.isValidValue(value)) {
+          api.emitInput(value);
+          state.userInput = null;
+        }
+      }
+    }
+    if (state.userInput === '') {
+      api.emitInput(null);
+      api.emitChange(null);
+      state.userInput = null;
+    }
+  };
+};
+export var handleStartInput = function handleStartInput(state) {
+  return function (event) {
+    if (state.userInput) {
+      state.userInput = [event.target.value, state.userInput[1]];
+    } else {
+      state.userInput = [event.target.value, null];
+    }
+  };
+};
+export var handleEndInput = function handleEndInput(state) {
+  return function (event) {
+    if (state.userInput) {
+      state.userInput = [state.userInput[0], event.target.value];
+    } else {
+      state.userInput = [null, event.target.value];
+    }
+  };
+};
+export var handleStartChange = function handleStartChange(_ref24) {
+  var api = _ref24.api,
+    state = _ref24.state;
+  return function () {
+    var value = api.parseString(state.userInput && state.userInput[0]);
+    if (value) {
+      var newValue;
+      if (state.displayValue[1]) {
+        state.userInput = [api.formatToString(value), state.displayValue[1]];
+        newValue = [value, state.picker.state.value && state.picker.state.value[1]];
+      } else {
+        var now = new Date();
+        if (now.getTime() < value.getTime()) {
+          state.userInput = [api.formatToString(value), api.formatToString(value)];
+          newValue = [value, value];
+        } else {
+          state.userInput = [api.formatToString(value), api.formatToString(now)];
+          newValue = [value, now];
+        }
+      }
+      state.picker.state.value = newValue;
+      if (api.isValidValue(newValue)) {
+        api.emitInput(newValue);
+        state.userInput = null;
+      }
+    }
+  };
+};
+export var handleEndChange = function handleEndChange(_ref25) {
+  var api = _ref25.api,
+    state = _ref25.state;
+  return function () {
+    var value = api.parseString(state.userInput && state.userInput[1]);
+    if (value) {
+      var newValue;
+      if (state.displayValue[0]) {
+        state.userInput = [state.displayValue[0], api.formatToString(value)];
+        newValue = [state.picker.state.value && state.picker.state.value[0], value];
+      } else {
+        var now = new Date();
+        if (now.getTime() < value.getTime()) {
+          state.userInput = [api.formatToString(now), api.formatToString(value)];
+          newValue = [now, value];
+        } else {
+          state.userInput = [api.formatToString(value), api.formatToString(value)];
+          newValue = [value, value];
+        }
+      }
+      state.picker.state.value = newValue;
+      if (api.isValidValue(newValue)) {
+        api.emitInput(newValue);
+        state.userInput = null;
+      }
+    }
+  };
+};
+export var handleClickIcon = function handleClickIcon(_ref26) {
+  var api = _ref26.api,
+    props = _ref26.props,
+    state = _ref26.state;
+  return function (event) {
+    if (props.readonly || state.pickerDisabled) return;
+    if (state.showClose) {
+      state.valueOnOpen = props.modelValue;
+      event.stopPropagation();
+      api.emitInput(null);
+      api.emitChange(null);
+      state.showClose = false;
+      if (state.picker && typeof state.picker.handleClear === 'function') {
+        state.picker.handleClear();
+      }
+    } else {
+      state.pickerVisible = !state.pickerVisible;
+    }
+  };
+};
+export var handleClose = function handleClose(_ref27) {
+  var api = _ref27.api,
+    props = _ref27.props,
+    state = _ref27.state;
+  return function () {
+    if (!state.pickerVisible) return;
+    state.pickerVisible = false;
+    if (state.type === DATEPICKER.Dates) {
+      var oldValue = api.parseAsFormatAndType(state.valueOnOpen, state.valueFormat, state.type, props.rangeSeparator) || state.valueOnOpen;
+      api.emitInput(oldValue);
+    }
+  };
+};
+export var handleFocus = function handleFocus(_ref28) {
+  var emit = _ref28.emit,
+    refs = _ref28.refs,
+    state = _ref28.state;
+  return function () {
+    var type = state.type;
+    if (DATEPICKER.TriggerTypes.indexOf(type) !== -1 && !state.pickerVisible) {
+      state.pickerVisible = true;
+    }
+    emit('focus', refs.reference);
+  };
+};
+export var handleKeydown = function handleKeydown(_ref29) {
+  var api = _ref29.api,
+    state = _ref29.state;
+  return function (event) {
+    var keyCode = event.keyCode;
+    if (keyCode === 27) {
+      state.pickerVisible = false;
+      event.stopPropagation();
+      return;
+    }
+    if (keyCode === 9) {
+      if (!state.ranged) {
+        api.handleChange();
+        state.pickerVisible = state.picker.state.visible = false;
+        api.blur();
+        event.stopPropagation();
+      } else {
+        setTimeout(function () {
+          if (state.refInput.indexOf(document.activeElement) === -1) {
+            state.pickerVisible = false;
+            api.blur();
+            event.stopPropagation();
+          }
+        }, 0);
+      }
+      return;
+    }
+    if (keyCode === 13) {
+      if (state.userInput === '' || api.isValidValue(api.parseString(state.displayValue))) {
+        api.handleChange();
+        state.pickerVisible = state.picker.state.visible = false;
+        api.blur();
+      }
+      event.stopPropagation();
+      return;
+    }
+    if (state.userInput) {
+      event.stopPropagation();
+      return;
+    }
+    if (state.picker && state.picker.handleKeydown) {
+      state.picker.handleKeydown(event);
+    }
+  };
+};
+export var hidePicker = function hidePicker(_ref30) {
+  var destroyPopper = _ref30.destroyPopper,
+    state = _ref30.state;
+  return function () {
+    if (state.picker) {
+      state.picker.resetView && state.picker.resetView();
+      state.pickerVisible = state.picker.visible = state.picker.state.visible = false;
+      destroyPopper();
+    }
+  };
+};
+export var showPicker = function showPicker(_ref31) {
+  var api = _ref31.api,
+    nextTick = _ref31.nextTick,
+    updatePopper = _ref31.updatePopper,
+    state = _ref31.state;
+  return function () {
+    if (state.$isServer) {
+      return;
+    }
+    if (!state.picker) {
+      api.mountPicker();
+    }
+    state.pickerVisible = state.picker.state.visible = true;
+    state.picker.state.value = state.parsedValue;
+    state.picker.resetView && state.picker.resetView();
+    nextTick(function () {
+      updatePopper(state.picker.$el);
+      state.picker.adjustSpinners && state.picker.adjustSpinners();
+    });
+  };
+};
+export var handlePick = function handlePick(_ref32) {
+  var state = _ref32.state,
+    api = _ref32.api;
+  return function () {
+    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var visible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    state.userInput = null;
+    state.pickerVisible = state.picker.state.visible = visible;
+    api.emitInput(date);
+    state.date = date;
+    state.picker.resetView && state.picker.resetView();
+  };
+};
+export var handleSelectRange = function handleSelectRange(state) {
+  return function (start, end, pos) {
+    if (state.refInput.length === 0) {
+      return;
+    }
+    var adjust = function adjust(value, start, end) {
+      if (!value) {
+        return {
+          start: start,
+          end: end
+        };
+      }
+      var valueReg = /(\d+):(\d+):(\d+)(\s+.+)?/;
+      if (valueReg.test(value)) {
+        var matched = valueReg.exec(value);
+        var hourLength = matched[1].length;
+        var minuteLength = matched[2].length;
+        var secondLength = matched[3].length;
+        if (start === 0) {
+          end = hourLength;
+        } else if (start === 3) {
+          start = hourLength + 1;
+          end = hourLength + minuteLength + 1;
+        } else {
+          start = hourLength + minuteLength + 2;
+          end = hourLength + minuteLength + secondLength + 2;
+        }
+      }
+      return {
+        start: start,
+        end: end
+      };
+    };
+    if (!pos || pos === 'min') {
+      var value = state.refInput[0].value;
+      var res = adjust(value, start, end);
+      state.refInput[0].setSelectionRange(res.start, res.end);
+      state.refInput[0].focus();
+    } else if (pos === 'max') {
+      var _value = state.refInput[1].value;
+      var _res = adjust(_value, start, end);
+      state.refInput[1].setSelectionRange(_res.start, _res.end);
+      state.refInput[1].focus();
+    }
+  };
+};
+export var mountPicker = function mountPicker(_ref33) {
+  var api = _ref33.api,
+    props = _ref33.props,
+    state = _ref33.state,
+    vm = _ref33.vm,
+    updatePopper = _ref33.updatePopper;
+  return function () {
+    state.picker = vm.$refs.picker;
+    state.picker.state.defaultValue = props.defaultValue;
+    state.picker.state.defaultTime = props.defaultTime;
+    state.picker.state.popperClass = props.popperClass;
+    state.picker.state.popperAppendToBody = props.popperAppendToBody;
+    state.picker.state.fnUpdatePopper = updatePopper;
+    state.picker.state.currentInstans = state.picker;
+    state.picker.state.timezone = state.timezone;
+    state.picker.state.timezoneData = state.timezoneData;
+    state.picker.state.showTimezone = props.showTimezone || state.timezone.isServiceTimezone;
+    state.picker.state.width = state.reference.getBoundingClientRect().width;
+    state.picker.state.timefmt = props.timeFormat || '';
+    state.picker.state.showTime = state.type === DATEPICKER.DateTime || state.type === DATEPICKER.DateTimeRange;
+    state.picker.state.selectionMode = state.selectionMode;
+    state.picker.state.defaultTimezone = props.defaultTimezone;
+    state.picker.state.unlinkPanels = props.unlinkPanels;
+    state.picker.state.emitDbTime = api.emitDbTime;
+    state.picker.state.arrowControl = state.arrowControl || props.timeArrowControl || props.arrowControl || false;
+    api.updateOptions();
+    state.picker.resetView && state.picker.resetView();
+  };
+};
+export var updateOptions = function updateOptions(_ref34) {
+  var api = _ref34.api,
+    props = _ref34.props,
+    state = _ref34.state;
+  return function () {
+    if (!state.picker) return;
+    var options = props.pickerOptions;
+    if (options && options.selectableRange) {
+      var ranges = options.selectableRange;
+      var parser = api.typeValueResolveMap().datetimerange.parser;
+      var format = DATEPICKER.DateFormats.timerange;
+      ranges = Array.isArray(ranges) ? ranges : [ranges];
+      state.picker.state.selectableRange = ranges.map(function (range) {
+        return parser(range, format, props.rangeSeparator);
+      });
+    }
+    for (var option in options) {
+      if (option in options && option !== DATEPICKER.SelectbaleRange) {
+        state.picker.state[option] = options[option];
+      }
+    }
+    if (props.format) {
+      state.picker.state.format = props.format;
+    }
+  };
+};
+export var valueEquals = function valueEquals(left, right) {
+  var dateEquals = function dateEquals(a, b) {
+    var bIsDate = b instanceof Date;
+    var aIsDate = a instanceof Date;
+    if (aIsDate && bIsDate) {
+      return a.getTime() === b.getTime();
+    }
+    if (!aIsDate && !bIsDate) {
+      return a === b;
+    }
+    return false;
+  };
+  var aIsArray = left instanceof Array;
+  var bIsArray = right instanceof Array;
+  if (aIsArray && bIsArray) {
+    if (left.length !== right.length) {
+      return false;
+    }
+    return left.every(function (item, index) {
+      return dateEquals(item, right[index]);
+    });
+  }
+  if (!aIsArray && !bIsArray) {
+    return dateEquals(left, right);
+  }
+  return false;
+};
+export var emitChange = function emitChange(_ref35) {
+  var api = _ref35.api,
+    dispatch = _ref35.dispatch,
+    emit = _ref35.emit,
+    props = _ref35.props,
+    state = _ref35.state;
+  return function (val) {
+    if (!valueEquals(val, state.valueOnOpen)) {
+      emit('change', val);
+      state.valueOnOpen = val;
+      if (props.validateEvent) {
+        dispatch('FormItem', 'form.change', val);
+      }
+      api.emitDbTime(props.value);
+    }
+  };
+};
+export var emitInput = function emitInput(_ref36) {
+  var api = _ref36.api,
+    emit = _ref36.emit,
+    props = _ref36.props,
+    state = _ref36.state;
+  return function (val) {
+    var value = val;
+    var _state$timezone2 = state.timezone,
+      from = _state$timezone2.from,
+      to = _state$timezone2.to;
+    if (props.type === 'datetime') {
+      value = getDateWithNewTimezone(value, to, from);
+    } else if (props.type === 'datetimerange' && Array.isArray(value)) {
+      value = value.map(function (val) {
+        return getDateWithNewTimezone(val, to, from);
+      });
+    }
+    var formatted = api.formatToValue(value) || val;
+    if (!valueEquals(props.modelValue, formatted)) {
+      emit('update:modelValue', formatted);
+    }
+  };
+};
+export var isValidValue = function isValidValue(_ref37) {
+  var api = _ref37.api,
+    state = _ref37.state;
+  return function (value) {
+    if (!state.picker) {
+      api.mountPicker();
+    }
+    if (state.picker.isValidValue) {
+      return value && state.picker.isValidValue(value);
+    }
+    return true;
+  };
+};
+export var watchIsRange = function watchIsRange(_ref38) {
+  var api = _ref38.api,
+    state = _ref38.state,
+    TimePanel = _ref38.TimePanel,
+    TimeRangePanel = _ref38.TimeRangePanel;
+  return function (value) {
+    state.type = value ? DATEPICKER.TimeRange : DATEPICKER.Time;
+    state.panel = value ? TimeRangePanel : TimePanel;
+    api.mountPicker();
+  };
+};
+export var getType = function getType(_ref39) {
+  var props = _ref39.props;
+  return function () {
+    if (props.componentName === DATEPICKER.DatePicker) {
+      return props.type;
+    } else if (props.componentName === DATEPICKER.TimePicker) {
+      return props.isRange ? DATEPICKER.TimeRange : DATEPICKER.Time;
+    }
+    return DATEPICKER.TimeSelect;
+  };
+};
+export var watchModelValue = function watchModelValue(_ref40) {
+  var api = _ref40.api,
+    props = _ref40.props,
+    state = _ref40.state,
+    dispatch = _ref40.dispatch;
+  return function (value, oldValue) {
+    api.emitChange(props.modelValue);
+    if (!valueEquals(value, oldValue) && !state.pickerVisible && props.validateEvent) {
+      dispatch('FormItem', 'form.change', value);
+    }
+  };
+};
+export var computedFormat = function computedFormat(_ref41) {
+  var props = _ref41.props,
+    utils = _ref41.utils;
+  return function () {
+    var type = props.type,
+      format = props.format;
+    if (!format && utils.getDateFormat) {
+      var config = utils.getDateFormat() || {};
+      if (~['date', 'dates', 'daterange'].indexOf(type)) {
+        format = config.DateFormat;
+      }
+      if (~['datetime', 'datetimerange'].indexOf(type)) {
+        format = config.DateTimeFormat;
+      }
+    }
+    return format;
+  };
+};
+export var computedTriggerClass = function computedTriggerClass(_ref42) {
+  var props = _ref42.props,
+    state = _ref42.state;
+  return function () {
+    return props.suffixIcon || props.prefixIcon || (state.type.indexOf(DATEPICKER.Time) !== -1 ? DATEPICKER.IconTime : DATEPICKER.IconDate);
+  };
+};
+export var computedHaveTrigger = function computedHaveTrigger(_ref43) {
+  var props = _ref43.props;
+  return function () {
+    return typeof props.showTrigger !== 'undefined' ? props.showTrigger : DATEPICKER.TriggerTypes.indexOf(props.type) !== -1;
+  };
+};
+export var intiPopper = function intiPopper(_ref44) {
+  var props = _ref44.props,
+    hooks = _ref44.hooks,
+    vnode = _ref44.vnode;
+  var reactive = hooks.reactive,
+    watch = hooks.watch,
+    toRefs = hooks.toRefs,
+    onBeforeUnmount = hooks.onBeforeUnmount,
+    onDeactivated = hooks.onDeactivated;
+  var emit = vnode.emit,
+    refs = vnode.refs,
+    slots = vnode.slots,
+    nextTick = vnode.nextTick;
+  var placementMap = DATEPICKER.PlacementMap;
+  return userPopper({
+    reactive: reactive,
+    watch: watch,
+    emit: emit,
+    props: _objectSpread(_objectSpread({}, props), {}, {
+      popperOptions: {
+        boundariesPadding: 0,
+        gpuAcceleration: false
+      },
+      visibleArrow: true,
+      offset: 0,
+      boundariesPadding: 5,
+      arrowOffset: 35,
+      placement: placementMap[props.align] || placementMap.left
+    }),
+    toRefs: toRefs,
+    refs: refs,
+    slots: slots,
+    nextTick: nextTick,
+    onBeforeUnmount: onBeforeUnmount,
+    onDeactivated: onDeactivated
+  });
+};
+export var emitDbTime = function emitDbTime(_ref45) {
+  var emit = _ref45.emit,
+    state = _ref45.state,
+    t = _ref45.t;
+  return function (date) {
+    var _state$timezone3 = state.timezone,
+      isServiceTimezone = _state$timezone3.isServiceTimezone,
+      from = _state$timezone3.from;
+    if (isServiceTimezone && !valueEquals(date, state.dbTime)) {
+      var hasDate = false;
+      var dbTime = [].concat(date).map(function (item) {
+        if (isDate(item)) {
+          hasDate = true;
+          var currentDate = getDateWithNewTimezone(item, getLocalTimezone(), from);
+          if (state.valueFormat) {
+            currentDate = formatDate(currentDate, state.valueFormat, t);
+          }
+          return currentDate;
+        }
+        return item;
+      });
+      state.dbTime = dbTime.length > 1 ? dbTime : dbTime[0];
+      hasDate && emit('input', state.dbTime);
+    }
+  };
+};
+export var initGlobalTimezone = function initGlobalTimezone(_ref46) {
+  var api = _ref46.api,
+    state = _ref46.state,
+    props = _ref46.props;
+  return function () {
+    var isServiceTimezone = state.timezone.isServiceTimezone;
+    if (isServiceTimezone) {
+      state.timezoneData = globalTimezone;
+    } else if (props.showTimezone) {
+      state.timezoneData = props.timezoneData ? extend(true, {}, props.timezoneData) : globalTimezone;
+    }
+    api.emitDbTime(props.value);
+  };
+};