@opentiny/vue-renderless 3.1.0-alpha.0

package/date-panel/vue.js

@@ -0,0 +1,319 @@
+import { proxyTimePickerDataProperties, getRenderTz, toggleTz, handleTzPickClose, debounceChange, searchTz, selectTz, handleYearPick, cusPrevYear, cusNextYear, cusPrevMonth, cusNextMonth, handleTimePickClose, handleMonthPick, handleDatePick, changeToNow, confirm, resetView, handleKeydown, handleLeave, handleEnter, getYearLabel, showYearPicker, showMonthPicker, handleTimePick, checkDateWithinRange, cusEmit, getDefaultValue, isValidValue, handleVisibleDateChange, handleVisibleTimeChange, handleKeyControl, handleShortcutClick, watchValue, watchDefaultValue, watchSelectionMode, watchTimePickerVisible, handleClear, doPick, computerVisibleTime, computerVisibleDate, computerTimeFormat, watchVisible } from './index';
+import { getWeekNumber, extractDateFormat } from '@opentiny/vue-renderless/common/deps/date-util';
+import { DATEPICKER, DATE } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'isValidValue', 'handleTzPickClose', 'toggleTz', 'searchTz', 'selectTz', 'confirm', 'cusPrevYear', 'cusNextYear', 'cusPrevMonth', 'cusNextMonth', 'changeToNow', 'handleMonthPick', 'handleYearPick', 'handleDatePick', 'showMonthPicker', 'showYearPicker', 'handleTimePick', 'handleEnter', 'handleVisibleTimeChange', 'handleVisibleDateChange', 'handleLeave', 'handleShortcutClick', 'handleTimePickClose'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    i18n = _ref.i18n;
+  var state = reactive({
+    popperClass: '',
+    date: new Date(),
+    value: '',
+    defaultValue: null,
+    defaultTime: null,
+    showTime: false,
+    selectionMode: DATEPICKER.Day,
+    shortcuts: '',
+    visible: false,
+    currentView: DATEPICKER.Date,
+    disabledDate: '',
+    cellClassName: '',
+    selectableRange: [],
+    firstDayOfWeek: 7,
+    showWeekNumber: false,
+    timePickerVisible: false,
+    format: '',
+    timeFmt: '',
+    timezone: {},
+    arrowControl: false,
+    userInputDate: null,
+    userInputTime: null,
+    showTimezone: false,
+    showpopup: false,
+    tz: '',
+    selectedTz: null,
+    animationName: '',
+    year: computed(function () {
+      return state.date.getFullYear();
+    }),
+    month: computed(function () {
+      return state.date.getMonth();
+    }),
+    week: computed(function () {
+      return getWeekNumber(state.date);
+    }),
+    monthDate: computed(function () {
+      return state.date.getDate();
+    }),
+    footerVisible: computed(function () {
+      return state.showTime || state.selectionMode === DATEPICKER.Dates;
+    }),
+    visibleTime: computed(function () {
+      return api.computerVisibleTime();
+    }),
+    visibleDate: computed(function () {
+      return api.computerVisibleDate();
+    }),
+    yearLabel: computed(function () {
+      return api.getYearLabel();
+    }),
+    timeFormat: computed(function () {
+      return api.computerTimeFormat();
+    }),
+    dateFormat: computed(function () {
+      return state.format ? extractDateFormat(state.format.replace(state.timefmt, '')) : DATE.Date;
+    }),
+    lang: computed(function () {
+      return i18n ? i18n.locale.replace(/_/g, '-') : 'zh-CN';
+    }),
+    isShowTz: computed(function () {
+      return state.showTimezone && state.showTime;
+    }),
+    isShowFooter: computed(function () {
+      return state.footerVisible && state.currentView === 'date';
+    })
+  });
+  state.needChangeTimezoneData = true;
+  return state;
+};
+var initWatch = function initWatch(_ref2) {
+  var watch = _ref2.watch,
+    state = _ref2.state,
+    api = _ref2.api,
+    nextTick = _ref2.nextTick;
+  watch(function () {
+    return state.isShowTz;
+  }, function () {
+    setTimeout(function () {
+      return state.fnUpdatePopper && state.fnUpdatePopper();
+    });
+  });
+  watch(function () {
+    return state.isShowFooter;
+  }, function () {
+    setTimeout(function () {
+      return state.fnUpdatePopper && state.fnUpdatePopper();
+    });
+  });
+  watch(function () {
+    return state.lang;
+  }, function () {
+    return state.needChangeTimezoneData = true;
+  });
+  watch(function () {
+    return state.defaultValue;
+  }, api.watchDefaultValue);
+  watch(function () {
+    return state.value;
+  }, api.watchValue);
+  watch(function () {
+    return state.timePickerVisible;
+  }, api.watchTimePickerVisible);
+  watch(function () {
+    return state.selectionMode;
+  }, api.watchSelectionMode);
+  watch(function () {
+    return state.timePickerVisible;
+  }, function () {
+    return nextTick(api.proxyTimePickerDataProperties);
+  });
+  watch(function () {
+    return state.visible;
+  }, api.watchVisible);
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    t = _ref3.t,
+    emit = _ref3.emit,
+    nextTick = _ref3.nextTick,
+    vm = _ref3.vm,
+    refs = _ref3.refs,
+    watch = _ref3.watch;
+  Object.assign(api, {
+    t: t,
+    state: state,
+    debounceChange: debounceChange,
+    toggleTz: toggleTz(state),
+    watchVisible: watchVisible({
+      api: api,
+      state: state
+    }),
+    getRenderTz: getRenderTz({
+      state: state
+    }),
+    selectTz: selectTz({
+      emit: emit,
+      state: state
+    }),
+    handleTzPickClose: handleTzPickClose(state),
+    getDefaultValue: getDefaultValue(state),
+    showYearPicker: showYearPicker({
+      state: state
+    }),
+    handleTimePickClose: handleTimePickClose(state),
+    cusNextMonth: cusNextMonth({
+      state: state
+    }),
+    cusPrevMonth: cusPrevMonth({
+      state: state
+    }),
+    resetView: resetView({
+      state: state
+    }),
+    showMonthPicker: showMonthPicker({
+      state: state
+    }),
+    cusNextYear: cusNextYear({
+      state: state
+    }),
+    cusPrevYear: cusPrevYear({
+      state: state
+    }),
+    watchDefaultValue: watchDefaultValue({
+      state: state
+    }),
+    getYearLabel: getYearLabel({
+      state: state,
+      t: t
+    }),
+    cusEmit: cusEmit({
+      state: state,
+      emit: emit
+    }),
+    watchTimePickerVisible: watchTimePickerVisible({
+      nextTick: nextTick,
+      vm: vm
+    }),
+    checkDateWithinRange: checkDateWithinRange({
+      state: state
+    }),
+    watchSelectionMode: watchSelectionMode({
+      state: state
+    }),
+    proxyTimePickerDataProperties: proxyTimePickerDataProperties({
+      refs: refs,
+      state: state,
+      watch: watch
+    }),
+    handleKeyControl: handleKeyControl({
+      state: state,
+      emit: emit
+    }),
+    doPick: doPick(emit),
+    searchTz: searchTz({
+      api: api,
+      state: state
+    }),
+    handleEnter: handleEnter(api),
+    handleLeave: handleLeave({
+      api: api,
+      emit: emit
+    }),
+    changeToNow: changeToNow({
+      api: api,
+      state: state
+    }),
+    isValidValue: isValidValue({
+      api: api,
+      state: state
+    }),
+    handleClear: handleClear({
+      api: api,
+      state: state,
+      emit: emit
+    }),
+    watchValue: watchValue({
+      api: api,
+      state: state
+    }),
+    handleKeydown: handleKeydown({
+      api: api,
+      state: state
+    }),
+    confirm: confirm({
+      api: api,
+      state: state,
+      t: t
+    }),
+    handleMonthPick: handleMonthPick({
+      api: api,
+      state: state
+    }),
+    handleVisibleDateChange: handleVisibleDateChange({
+      api: api,
+      state: state,
+      t: t
+    }),
+    handleTimePick: handleTimePick({
+      api: api,
+      state: state,
+      t: t
+    }),
+    handleVisibleTimeChange: handleVisibleTimeChange({
+      api: api,
+      refs: refs,
+      state: state,
+      t: t
+    }),
+    handleYearPick: handleYearPick({
+      api: api,
+      state: state
+    }),
+    handleDatePick: handleDatePick({
+      api: api,
+      state: state,
+      t: t
+    }),
+    handleShortcutClick: handleShortcutClick(api),
+    computerVisibleTime: computerVisibleTime({
+      state: state,
+      t: t
+    }),
+    computerVisibleDate: computerVisibleDate({
+      state: state,
+      t: t
+    }),
+    computerTimeFormat: computerTimeFormat({
+      state: state
+    })
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    nextTick = _ref4.nextTick;
+  var t = _ref5.t,
+    refs = _ref5.refs,
+    $emit = _ref5.emit,
+    vm = _ref5.vm,
+    i18n = _ref5.i18n;
+  var api = {};
+  var emit = props.emitter ? props.emitter.emit : $emit;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    i18n: i18n
+  });
+  initApi({
+    api: api,
+    state: state,
+    t: t,
+    emit: emit,
+    nextTick: nextTick,
+    vm: vm,
+    refs: refs,
+    watch: watch
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    nextTick: nextTick
+  });
+  return api;
+};

package/date-picker/index.js

@@ -0,0 +1,301 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var getMonthEndDay = function getMonthEndDay(constants) {
+  return function (year, month) {
+    return constants.MonthDay - new Date(year, month - 1, constants.MonthDay).getDate();
+  };
+};
+export var getTrueValue = function getTrueValue(value) {
+  if (!value) {
+    return 0;
+  }
+  while (isNaN(parseInt(value, 10))) {
+    if (value.length > 1) {
+      value = value.slice(1);
+    } else {
+      return 0;
+    }
+  }
+  return parseInt(value, 10);
+};
+export var getBoundary = function getBoundary(_ref) {
+  var api = _ref.api,
+    constants = _ref.constants,
+    props = _ref.props;
+  return function (_ref2) {
+    var _ref3;
+    var type = _ref2.type,
+      val = _ref2.value;
+    var boundary = props["".concat(type).concat(constants.CapDate)];
+    var year = boundary.getFullYear();
+    var month = 1;
+    var date = 1;
+    var hour = 0;
+    var minute = 0;
+    if (type === constants.Max) {
+      month = constants.TotalMonth;
+      date = api.getMonthEndDay(val.getFullYear(), val.getMonth() + 1);
+      hour = constants.Hours;
+      minute = constants.Minutes;
+    }
+    if (val.getFullYear() === year) {
+      month = boundary.getMonth() + 1;
+      if (val.getMonth() + 1 === month) {
+        date = boundary.getDate();
+        if (val.getDate() === date) {
+          hour = boundary.getHours();
+          if (val.getHours() === hour) {
+            minute = boundary.getMinutes();
+          }
+        }
+      }
+    }
+    return _ref3 = {}, _defineProperty(_ref3, "".concat(type).concat(constants.CapYear), year), _defineProperty(_ref3, "".concat(type).concat(constants.CapMonth), month), _defineProperty(_ref3, "".concat(type).concat(constants.CapDate), date), _defineProperty(_ref3, "".concat(type).concat(constants.CapHour), hour), _defineProperty(_ref3, "".concat(type).concat(constants.CapMinute), minute), _ref3;
+  };
+};
+export var updateInnerValue = function updateInnerValue(_ref4) {
+  var api = _ref4.api,
+    constants = _ref4.constants,
+    props = _ref4.props,
+    refs = _ref4.refs,
+    state = _ref4.state;
+  return function () {
+    var indexes = refs.picker && refs.picker.getIndexes();
+    var getValue = function getValue(index) {
+      var values = state.originColumns[index].values;
+      return getTrueValue(values[indexes[index]]);
+    };
+    var year = getValue(0);
+    var month = getValue(1);
+    var maxDate = api.getMonthEndDay(year, month);
+    var date;
+    if (props.type === constants.YearMonth) {
+      date = 1;
+    } else {
+      date = getValue(2);
+    }
+    date = date > maxDate ? maxDate : date;
+    var hour = 0;
+    var minute = 0;
+    if (props.type === constants.DateTime) {
+      hour = getValue(3);
+      minute = getValue(4);
+    }
+    var value = new Date(year, month - 1, date, hour, minute);
+    state.innerValue = api.formatValue(value);
+  };
+};
+export var formatValue = function formatValue(props) {
+  return function (value) {
+    if (!Object.prototype.toString.call(value) === '[object Date]' && !isNaN(value.getTime())) {
+      value = props.minDate;
+    }
+    value = Math.max(value, props.minDate.getTime());
+    value = Math.min(value, props.maxDate.getTime());
+    return new Date(value);
+  };
+};
+export var onChange = function onChange(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    refs = _ref5.refs,
+    nextTick = _ref5.nextTick;
+  return function () {
+    api.updateInnerValue();
+    nextTick(function () {
+      nextTick(function () {
+        emit('change', refs.picker);
+        document.body.style.overflow = '';
+      });
+    });
+  };
+};
+export var padZero = function padZero(num) {
+  var targetLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  var str = num + '';
+  while (str.length < targetLength) {
+    str = '0' + str;
+  }
+  return str;
+};
+export var updateColumnValue = function updateColumnValue(_ref6) {
+  var constants = _ref6.constants,
+    nextTick = _ref6.nextTick,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    state = _ref6.state;
+  return function () {
+    var value = state.innerValue;
+    var formatter = props.formatter;
+    var values = [formatter('year', "".concat(value.getFullYear())), formatter('month', padZero(value.getMonth() + 1)), formatter('day', padZero(value.getDate()))];
+    if (props.type === constants.DateTime) {
+      values.push(formatter('hour', padZero(value.getHours())), formatter('minute', padZero(value.getMinutes())));
+    }
+    if (props.type === constants.YearMonth) {
+      values = values.slice(0, 2);
+    }
+    nextTick(function () {
+      refs.picker.setValues(values);
+    });
+  };
+};
+export var getRanges = function getRanges(_ref7) {
+  var api = _ref7.api,
+    constants = _ref7.constants,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function () {
+    var _api$getBoundary = api.getBoundary({
+        type: constants.Max,
+        value: state.innerValue
+      }),
+      maxYear = _api$getBoundary.maxYear,
+      maxDate = _api$getBoundary.maxDate,
+      maxMonth = _api$getBoundary.maxMonth,
+      maxHour = _api$getBoundary.maxHour,
+      maxMinute = _api$getBoundary.maxMinute;
+    var _api$getBoundary2 = api.getBoundary({
+        type: constants.Min,
+        value: state.innerValue
+      }),
+      minYear = _api$getBoundary2.minYear,
+      minDate = _api$getBoundary2.minDate,
+      minMonth = _api$getBoundary2.minMonth,
+      minHour = _api$getBoundary2.minHour,
+      minMinute = _api$getBoundary2.minMinute;
+    var result = [{
+      type: constants.Year,
+      range: [minYear, maxYear]
+    }, {
+      type: 'month',
+      range: [minMonth, maxMonth]
+    }, {
+      type: constants.Day,
+      range: [minDate, maxDate]
+    }, {
+      type: constants.Hour,
+      range: [minHour, maxHour]
+    }, {
+      type: constants.Minute,
+      range: [minMinute, maxMinute]
+    }];
+    if (props.type === constants.Date) result.splice(3, 2);
+    if (props.type === constants.YearMonth) result.splice(2, 3);
+    return result;
+  };
+};
+export function times(n, iteratee) {
+  var index = -1;
+  var result = Array(n);
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+  return result;
+}
+export var getOrigiCol = function getOrigiCol(state) {
+  return function () {
+    return state.ranges.map(function (_ref8) {
+      var type = _ref8.type,
+        rangeArr = _ref8.range;
+      var values = times(rangeArr[1] - rangeArr[0] + 1, function (index) {
+        var value = padZero(rangeArr[0] + index);
+        return value;
+      });
+      return {
+        type: type,
+        values: values
+      };
+    });
+  };
+};
+export var getColumns = function getColumns(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  return function () {
+    return state.originColumns.map(function (column) {
+      return {
+        values: column.values.map(function (value) {
+          return props.formatter(column.type, value);
+        })
+      };
+    });
+  };
+};
+export var onConfirm = function onConfirm(_ref10) {
+  var api = _ref10.api,
+    emit = _ref10.emit,
+    state = _ref10.state;
+  return function () {
+    state.visible = false;
+    emit('confirm', state.innerValue);
+    emit('update:modelValue', state.innerValue);
+    emit('update:visible', state.visible);
+    document.body.style.overflow = '';
+    state.displayValue = api.getDisplayValue();
+    state.clearable = false;
+  };
+};
+export var onCancel = function onCancel(_ref11) {
+  var emit = _ref11.emit,
+    state = _ref11.state;
+  return function () {
+    state.visible = false;
+    emit('cancel');
+    emit('update:visible', state.visible);
+    document.body.style.overflow = '';
+  };
+};
+export var getDisplayValue = function getDisplayValue(_ref12) {
+  var constants = _ref12.constants,
+    DATE = _ref12.DATE,
+    props = _ref12.props,
+    state = _ref12.state;
+  return function () {
+    var format = function format(value, fmt) {
+      var o = {
+        'M+': value.getMonth() + 1,
+        'd+': value.getDate(),
+        'h+': value.getHours(),
+        'm+': value.getMinutes(),
+        's+': value.getSeconds(),
+        'q+': Math.floor((value.getMonth() + 3) / 3),
+        'S': value.getMilliseconds()
+      };
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length));
+      }
+      for (var k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+        }
+      }
+      return fmt;
+    };
+    return format(state.innerValue, props.type === constants.DateTime ? DATE.Datetime : DATE.Date);
+  };
+};
+export var hookMounted = function hookMounted(_ref13) {
+  var constants = _ref13.constants,
+    parent = _ref13.parent,
+    refs = _ref13.refs,
+    nextTick = _ref13.nextTick;
+  return function () {
+    nextTick(function () {
+      parent.$emit(constants.HookMounted, refs.refrence.$el);
+    });
+  };
+};
+export var showPickerAndlockSrcoll = function showPickerAndlockSrcoll(_ref14) {
+  var constants = _ref14.constants,
+    state = _ref14.state;
+  return function () {
+    state.visible = true;
+    document.body.style.overflow = constants.Hidden;
+    state.isReadonly = true;
+  };
+};
+export var clearDisplayValue = function clearDisplayValue(state) {
+  return function () {
+    state.displayValue = '';
+    state.clearable = true;
+  };
+};