@opentiny/vue-renderless 3.1.0-alpha.0

package/date-panel/index.js

@@ -0,0 +1,584 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { getWeekData } from '@opentiny/vue-renderless/picker';
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import { isDate, parseDate, modifyDate, modifyTime, clearTime, prevYear, nextYear, prevMonth, nextMonth, timeWithinRange, clearMilliseconds, modifyWithTimeString, changeYearMonthAndClampDate, formatDate, extractTimeFormat } from '@opentiny/vue-renderless/common/deps/date-util';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { getDateWithNewTimezone, getLocalTimezone } from '@opentiny/vue-renderless/common/date';
+import { fillChar } from '@opentiny/vue-renderless/common/string';
+export var getYearLabel = function getYearLabel(_ref) {
+  var state = _ref.state,
+    t = _ref.t;
+  return function () {
+    var yearTranslation = t(DATEPICKER.YearI18n);
+    if (state.currentView === DATEPICKER.Year) {
+      var startYear = Math.floor(state.year / 10) * 10;
+      if (yearTranslation) {
+        return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
+      }
+      return startYear + ' - ' + (startYear + 9);
+    }
+    return state.year + ' ' + yearTranslation;
+  };
+};
+export var watchValue = function watchValue(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function (value) {
+    if (state.selectionMode === DATEPICKER.Dates && state.value) return;
+    if (isDate(value)) {
+      state.date = state.selectionMode === 'week' ? getWeekData(value) : new Date(value);
+    } else {
+      state.date = api.getDefaultValue();
+    }
+  };
+};
+export var watchDefaultValue = function watchDefaultValue(_ref3) {
+  var state = _ref3.state;
+  return function (value) {
+    if (!isDate(state.value)) {
+      state.date = value ? new Date(value) : new Date();
+    }
+  };
+};
+export var watchTimePickerVisible = function watchTimePickerVisible(_ref4) {
+  var nextTick = _ref4.nextTick,
+    vm = _ref4.vm;
+  return function (value) {
+    if (value) {
+      nextTick(function () {
+        vm.$refs.timepicker.adjustSpinners();
+      });
+    }
+  };
+};
+export var watchSelectionMode = function watchSelectionMode(_ref5) {
+  var state = _ref5.state;
+  return function (value) {
+    if (value === DATEPICKER.Month) {
+      if (state.currentView !== DATEPICKER.Year || state.currentView !== DATEPICKER.Month) {
+        state.currentView = DATEPICKER.Month;
+      }
+    } else if (value === DATEPICKER.Dates) {
+      state.currentView = DATEPICKER.Date;
+    } else if (value === DATEPICKER.Year) {
+      state.currentView = DATEPICKER.Year;
+    }
+  };
+};
+export var proxyTimePickerDataProperties = function proxyTimePickerDataProperties(_ref6) {
+  var refs = _ref6.refs,
+    state = _ref6.state,
+    watch = _ref6.watch;
+  return function () {
+    var format = function format(timeFormat) {
+      if (refs.timepicker) refs.timepicker.state.format = timeFormat;
+    };
+    var value = function value(_value) {
+      if (refs.timepicker) {
+        refs.timepicker.state.value = null;
+        if (_value) {
+          refs.timepicker.state.value = _value;
+        }
+      }
+    };
+    var date = function date(_date) {
+      if (refs.timepicker) {
+        refs.timepicker.state.date = _date;
+      }
+    };
+    var selectableRange = function selectableRange(_selectableRange) {
+      if (refs.timepicker) {
+        refs.timepicker.state.selectableRange = _selectableRange;
+      }
+    };
+    watch(function () {
+      return state.value;
+    }, value);
+    watch(function () {
+      return state.date;
+    }, date, {
+      deep: true
+    });
+    watch(function () {
+      return state.selectableRange;
+    }, selectableRange, {
+      deep: true
+    });
+    format(state.timeFormat);
+    value(state.value);
+    date(state.date);
+    selectableRange(state.selectableRange);
+  };
+};
+export var handleClear = function handleClear(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state,
+    emit = _ref7.emit;
+  return function () {
+    state.date = api.getDefaultValue();
+    emit('pick', null);
+  };
+};
+export var cusEmit = function cusEmit(_ref8) {
+  var state = _ref8.state,
+    emit = _ref8.emit;
+  return function (value) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    if (!value) {
+      emit.apply(void 0, ['pick', value].concat(args));
+    } else if (Array.isArray(value)) {
+      var dates = value.map(function (date) {
+        return state.showTime ? clearMilliseconds(date) : clearTime(date);
+      });
+      emit.apply(void 0, ['pick', dates].concat(args));
+    } else {
+      emit.apply(void 0, ['pick', state.showTime ? clearMilliseconds(value) : clearTime(value)].concat(args));
+    }
+    state.userInputDate = null;
+    state.userInputTime = null;
+  };
+};
+export var showMonthPicker = function showMonthPicker(_ref9) {
+  var state = _ref9.state;
+  return function () {
+    return state.currentView = DATEPICKER.Month;
+  };
+};
+export var showYearPicker = function showYearPicker(_ref10) {
+  var state = _ref10.state;
+  return function () {
+    return state.currentView = DATEPICKER.Year;
+  };
+};
+export var cusPrevMonth = function cusPrevMonth(_ref11) {
+  var state = _ref11.state;
+  return function () {
+    return state.date = prevMonth(state.date);
+  };
+};
+export var cusNextMonth = function cusNextMonth(_ref12) {
+  var state = _ref12.state;
+  return function () {
+    return state.date = nextMonth(state.date);
+  };
+};
+export var cusPrevYear = function cusPrevYear(_ref13) {
+  var state = _ref13.state;
+  return function () {
+    if (state.currentView === DATEPICKER.Year) {
+      state.date = prevYear(state.date, 10);
+    } else {
+      state.date = prevYear(state.date);
+    }
+  };
+};
+export var cusNextYear = function cusNextYear(_ref14) {
+  var state = _ref14.state;
+  return function () {
+    if (state.currentView === DATEPICKER.Year) {
+      state.date = nextYear(state.date, 10);
+    } else {
+      state.date = nextYear(state.date);
+    }
+  };
+};
+export var handleShortcutClick = function handleShortcutClick(api) {
+  return function (shortcut) {
+    if (shortcut.onClick) {
+      var picker = {
+        $emit: function $emit(type, start, end) {
+          api.doPick(start, end);
+        }
+      };
+      shortcut.onClick(picker);
+    }
+  };
+};
+export var doPick = function doPick(emit) {
+  return function (date) {
+    emit('pick', date, false);
+  };
+};
+export var handleTimePick = function handleTimePick(_ref15) {
+  var api = _ref15.api,
+    state = _ref15.state,
+    t = _ref15.t;
+  return function (value, visible, first) {
+    if (isDate(value)) {
+      var newDate = state.value ? modifyTime(state.value, value.getHours(), value.getMinutes(), value.getSeconds()) : modifyWithTimeString(api.getDefaultValue(), state.defaultTime, t);
+      state.date = newDate;
+      api.cusEmit(state.date, true);
+    } else {
+      api.cusEmit(value, true);
+    }
+    if (!first) {
+      state.timePickerVisible = visible;
+    }
+  };
+};
+export var handleTimePickClose = function handleTimePickClose(state) {
+  return function () {
+    state.timePickerVisible = false;
+  };
+};
+export var handleMonthPick = function handleMonthPick(_ref16) {
+  var api = _ref16.api,
+    state = _ref16.state;
+  return function (month) {
+    if (state.selectionMode === DATEPICKER.Month) {
+      state.date = modifyDate(state.date, state.year, month, 1);
+      api.cusEmit(state.date);
+    } else {
+      state.date = changeYearMonthAndClampDate(state.date, state.year, month);
+      state.currentView = DATEPICKER.Date;
+    }
+  };
+};
+export var handleDatePick = function handleDatePick(_ref17) {
+  var api = _ref17.api,
+    state = _ref17.state,
+    t = _ref17.t;
+  return function (value) {
+    if (state.selectionMode === DATEPICKER.Day) {
+      var newDate = state.value ? modifyDate(state.value, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithTimeString(value, state.defaultTime, t);
+      if (!api.checkDateWithinRange(newDate)) {
+        newDate = modifyDate(state.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate());
+      }
+      state.date = newDate;
+      api.cusEmit(state.date, state.showTime);
+    } else if (state.selectionMode === DATEPICKER.Week) {
+      api.cusEmit(value.date);
+    } else if (state.selectionMode === DATEPICKER.Dates) {
+      api.cusEmit(value, true);
+    }
+  };
+};
+export var handleYearPick = function handleYearPick(_ref18) {
+  var api = _ref18.api,
+    state = _ref18.state;
+  return function (year) {
+    if (state.selectionMode === DATEPICKER.Year) {
+      state.date = modifyDate(state.date, year, 0, 1);
+      api.cusEmit(state.date);
+    } else {
+      state.date = changeYearMonthAndClampDate(state.date, year, state.month);
+      state.currentView = DATEPICKER.Month;
+    }
+  };
+};
+var dateToLocaleStringForIE = function dateToLocaleStringForIE(timezone, value) {
+  var localTimezone = getLocalTimezone();
+  var offsetTimezone = timezone - localTimezone;
+  var offsetTime = new Date(value).getTime() + offsetTimezone * 3600000;
+  return new Date(offsetTime);
+};
+export var changeToNow = function changeToNow(_ref19) {
+  var api = _ref19.api,
+    state = _ref19.state;
+  return function () {
+    var now = new Date();
+    var timezone = state.timezone;
+    var isServiceTimezone = timezone.isServiceTimezone;
+    var disabledDate = !state.disabledDate;
+    if (isServiceTimezone) {
+      var date = getDateWithNewTimezone(now, getLocalTimezone(), timezone.to);
+      state.date = date;
+      disabledDate = disabledDate || !state.disabledDate(date);
+    } else {
+      disabledDate = disabledDate || !state.disabledDate(now);
+    }
+    if (disabledDate && api.checkDateWithinRange(now)) {
+      if (!isServiceTimezone) {
+        if (state.showTimezone && state.selectedTz) {
+          state.date = dateToLocaleStringForIE(state.selectedTz.offset, state.date);
+        } else {
+          state.date = now;
+        }
+      }
+      api.cusEmit(state.date);
+      state.emitDbTime(now);
+    }
+  };
+};
+export var confirm = function confirm(_ref20) {
+  var api = _ref20.api,
+    state = _ref20.state,
+    t = _ref20.t;
+  return function () {
+    if (state.selectionMode === DATEPICKER.Dates) {
+      api.cusEmit(state.value);
+    } else {
+      var value = state.value ? state.value : modifyWithTimeString(api.getDefaultValue(), state.defaultTime, t);
+      var timezone = state.timezone;
+      if (!state.value && timezone.isServiceTimezone) {
+        value = state.date = getDateWithNewTimezone(value, getLocalTimezone(), timezone.to);
+      } else {
+        state.date = new Date(value);
+      }
+      api.cusEmit(value);
+    }
+  };
+};
+export var resetView = function resetView(_ref21) {
+  var state = _ref21.state;
+  return function () {
+    if (state.selectionMode === DATEPICKER.Month) {
+      state.currentView = DATEPICKER.Month;
+    } else if (state.selectionMode === DATEPICKER.Year) {
+      state.currentView = DATEPICKER.Year;
+    } else {
+      state.currentView = DATEPICKER.Date;
+    }
+  };
+};
+export var handleEnter = function handleEnter(api) {
+  return function () {
+    on(document.body, 'keydown', api.handleKeydown);
+  };
+};
+export var handleLeave = function handleLeave(_ref22) {
+  var api = _ref22.api,
+    emit = _ref22.emit;
+  return function () {
+    emit('dodestroy');
+    off(document.body, 'keydown', api.handleKeydown);
+  };
+};
+export var handleKeydown = function handleKeydown(_ref23) {
+  var api = _ref23.api,
+    state = _ref23.state;
+  return function (event) {
+    var keyCode = event.keyCode;
+    if (state.visible && !state.timePickerVisible) {
+      if (DATEPICKER.List.indexOf(keyCode) !== -1) {
+        api.handleKeyControl(keyCode);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      if (keyCode === 13 && state.userInputDate === null && state.userInputTime === null) {
+        api.cusEmit(state.date, false);
+      }
+    }
+  };
+};
+export var handleKeyControl = function handleKeyControl(_ref24) {
+  var state = _ref24.state,
+    emit = _ref24.emit;
+  return function (keyCode) {
+    var mapping = {
+      year: _objectSpread(_objectSpread({}, DATEPICKER.YearObj), {}, {
+        offset: function offset(date, step) {
+          return date.setFullYear(date.getFullYear() + step);
+        }
+      }),
+      month: _objectSpread(_objectSpread({}, DATEPICKER.YearObj), {}, {
+        offset: function offset(date, step) {
+          return date.setMonth(date.getMonth() + step);
+        }
+      }),
+      week: _objectSpread(_objectSpread({}, DATEPICKER.WeekObj), {}, {
+        offset: function offset(date, step) {
+          return date.setDate(date.getDate() + step * 7);
+        }
+      }),
+      day: _objectSpread(_objectSpread({}, DATEPICKER.DayObj), {}, {
+        offset: function offset(date, step) {
+          return date.setDate(date.getDate() + step);
+        }
+      })
+    };
+    var mode = state.selectionMode;
+    var year = 3.1536e10;
+    var now = state.date.getTime();
+    var newDate = new Date(state.date.getTime());
+    while (Math.abs(now - newDate.getTime()) <= year) {
+      var map = mapping[mode];
+      map.offset(newDate, map[keyCode]);
+      if (!(typeof state.disabledDate === 'function' && state.disabledDate(newDate))) {
+        state.date = newDate;
+        emit('pick', newDate, true);
+        break;
+      }
+    }
+  };
+};
+export var handleVisibleTimeChange = function handleVisibleTimeChange(_ref25) {
+  var api = _ref25.api,
+    refs = _ref25.refs,
+    state = _ref25.state,
+    t = _ref25.t;
+  return function (value) {
+    var time = parseDate(value, state.timeFormat, t);
+    if (time && api.checkDateWithinRange(time)) {
+      state.date = modifyDate(time, state.year, state.month, state.monthDate);
+      state.userInputTime = null;
+      if (refs.timepicker) refs.timepicker.state.value = state.date;
+      state.timePickerVisible = false;
+      api.cusEmit(state.date, true);
+    }
+  };
+};
+export var handleVisibleDateChange = function handleVisibleDateChange(_ref26) {
+  var api = _ref26.api,
+    state = _ref26.state,
+    t = _ref26.t;
+  return function (value) {
+    var date = parseDate(value, state.dateFormat, t);
+    if (date) {
+      if (typeof state.disabledDate === 'function' && state.disabledDate(date)) {
+        return;
+      }
+      state.date = modifyTime(date, state.date.getHours(), state.date.getMinutes(), state.date.getSeconds());
+      state.userInputDate = null;
+      api.resetView();
+      api.cusEmit(state.date, true);
+    }
+  };
+};
+export var isValidValue = function isValidValue(_ref27) {
+  var api = _ref27.api,
+    state = _ref27.state;
+  return function (value) {
+    return value && !isNaN(value) && (typeof state.disabledDate === 'function' ? !state.disabledDate(value) : true) && api.checkDateWithinRange(value);
+  };
+};
+export var getDefaultValue = function getDefaultValue(state) {
+  return function () {
+    return state.defaultValue ? new Date(state.defaultValue) : new Date();
+  };
+};
+export var checkDateWithinRange = function checkDateWithinRange(_ref28) {
+  var state = _ref28.state;
+  return function (date) {
+    return state.selectableRange.length > 0 ? timeWithinRange(date, state.selectableRange, state.format || 'HH:mm:ss') : true;
+  };
+};
+export var selectTz = function selectTz(_ref29) {
+  var emit = _ref29.emit,
+    state = _ref29.state;
+  return function (tz) {
+    if (state.timezone.isServiceTimezone) return;
+    state.tz = tz.name;
+    state.selectedTz = tz;
+    state.showpopup = false;
+    state.value = dateToLocaleStringForIE(tz.offset, state.date);
+    emit('select-change', {
+      tz: tz,
+      date: state.value
+    });
+  };
+};
+export var searchTz = function searchTz(_ref30) {
+  var api = _ref30.api,
+    state = _ref30.state;
+  return function (input) {
+    return api.debounceChange(state, input);
+  };
+};
+export var debounceChange = debounce(500, function (state, input) {
+  if (!input) {
+    state.showpopup = false;
+    return;
+  }
+  var tzList = state.renderTzdata.slice();
+  var count = 0;
+  var filterAry = [];
+  state.renderTzdata = tzList.map(function (tz) {
+    if (tz.name.toLowerCase().indexOf(input) > -1) {
+      tz.visible = false;
+      filterAry.push(tz);
+      count++;
+    } else {
+      tz.visible = true;
+    }
+    return tz;
+  });
+  if (count === 1) {
+    state.tz = filterAry[0].name;
+    state.showpopup = false;
+  } else {
+    state.showpopup = true;
+  }
+});
+export var toggleTz = function toggleTz(state) {
+  return function () {
+    if (state.timezone.isServiceTimezone) return;
+    state.renderTzdata = state.renderTzdata && state.renderTzdata.map(function (item) {
+      item.visible = false;
+      return item;
+    });
+    state.showpopup = true;
+  };
+};
+export var handleTzPickClose = function handleTzPickClose(state) {
+  return function () {
+    return state.showpopup = false;
+  };
+};
+export var getRenderTz = function getRenderTz(_ref31) {
+  var state = _ref31.state;
+  return function (value) {
+    if (!state.showTimezone || !value) {
+      return;
+    }
+    state.renderTzdata = value[state.lang];
+    if (state.renderTzdata) {
+      var _state$timezone = state.timezone,
+        isServiceTimezone = _state$timezone.isServiceTimezone,
+        to = _state$timezone.to;
+      var selectedTz = state.selectedTz || {};
+      var defaultTimezone = selectedTz.tz ? selectedTz.tz : state.defaultTimezone;
+      var findTimezoneKey;
+      if (to === 0) {
+        findTimezoneKey = '';
+      } else {
+        findTimezoneKey = to > 0 ? '+' : '-';
+        findTimezoneKey = findTimezoneKey + fillChar(Math.abs(to) + '', 2) + ':00';
+      }
+      findTimezoneKey = "(UTC".concat(findTimezoneKey, ")");
+      state.renderTzdata.some(function (item) {
+        if (~[selectedTz.tz, defaultTimezone].indexOf(item.tz) || isServiceTimezone && ~item.name.indexOf(findTimezoneKey)) {
+          state.selectedTz = item;
+          state.tz = state.selectedTz.name;
+          return true;
+        }
+        return false;
+      }) || (state.selectedTz = undefined);
+    }
+  };
+};
+export var computerVisibleTime = function computerVisibleTime(_ref32) {
+  var state = _ref32.state,
+    t = _ref32.t;
+  return function () {
+    return state.userInputTime !== null ? state.userInputTime : formatDate(state.value || state.defaultValue, state.timeFormat, t);
+  };
+};
+export var computerVisibleDate = function computerVisibleDate(_ref33) {
+  var state = _ref33.state,
+    t = _ref33.t;
+  return function () {
+    return state.userInputDate !== null ? state.userInputDate : formatDate(state.value || state.defaultValue, state.dateFormat, t);
+  };
+};
+export var computerTimeFormat = function computerTimeFormat(_ref34) {
+  var state = _ref34.state;
+  return function () {
+    return state.format ? extractTimeFormat(state.timefmt || state.format) : DATEPICKER.DateFormats.timerange;
+  };
+};
+export var watchVisible = function watchVisible(_ref35) {
+  var api = _ref35.api,
+    state = _ref35.state;
+  return function () {
+    if (state.needChangeTimezoneData) {
+      api.getRenderTz(state.timezoneData);
+      state.needChangeTimezoneData = false;
+    }
+  };
+};