@opentiny/vue-renderless 3.1.0-alpha.0

package/time-panel/vue.js

@@ -0,0 +1,110 @@
+import { handleKeydown, isValidValue, scrollDown, handleMenuEnter, scrollToOption, handleClear, handleClick, parseTime, formatTime, nextTime, compareTime, watchValue, computItems, emitPick, emitDestroy } from './index';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'handleMenuEnter', 'handleClick', 'handleClear', 'emitDestroy'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api;
+  var Start = DATEPICKER.Start,
+    End = DATEPICKER.End,
+    Step = DATEPICKER.Step;
+  var state = reactive({
+    popperClass: '',
+    start: Start,
+    end: End,
+    step: Step,
+    realValue: '',
+    defaultValue: '',
+    defaultTime: '',
+    visible: false,
+    minTime: '',
+    maxTime: '',
+    width: 0,
+    lastEmitValue: '',
+    items: computed(function () {
+      return api.computItems();
+    }),
+    "default": computed(function () {
+      return state.defaultValue || state.defaultTime || '';
+    }),
+    value: computed({
+      get: function get() {
+        return state.realValue || state["default"];
+      },
+      set: function set(value) {
+        var valid = state.items.some(function (item) {
+          return item.value === value;
+        });
+        state.realValue = valid ? value : '';
+      }
+    })
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch,
+    nextTick = _ref2.nextTick;
+  var refs = _ref3.refs,
+    $emit = _ref3.emit;
+  var api = {};
+  var emit = props.emitter ? props.emitter.emit : $emit;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api
+  });
+  Object.assign(api, {
+    state: state,
+    parseTime: parseTime(),
+    formatTime: formatTime(),
+    isValidValue: isValidValue(state),
+    scrollToOption: scrollToOption({
+      refs: refs
+    }),
+    emitPick: emitPick({
+      emit: emit,
+      state: state
+    }),
+    emitDestroy: emitDestroy(emit),
+    nextTime: nextTime(api),
+    compareTime: compareTime(api),
+    handleClick: handleClick(api),
+    scrollDown: scrollDown({
+      api: api,
+      state: state
+    }),
+    handleClear: handleClear({
+      api: api,
+      state: state
+    }),
+    watchValue: watchValue({
+      api: api,
+      nextTick: nextTick
+    }),
+    handleKeydown: handleKeydown({
+      api: api
+    }),
+    computItems: computItems({
+      api: api,
+      state: state
+    }),
+    handleMenuEnter: handleMenuEnter({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.value;
+  }, api.watchValue);
+  watch(function () {
+    return state.visible;
+  }, function () {
+    return setTimeout(function () {
+      return state.fnUpdatePopper && state.fnUpdatePopper();
+    });
+  });
+  return api;
+};

package/time-range/index.js

@@ -0,0 +1,199 @@
+import { clearMilliseconds, timeWithinRange, limitTimeRange, modifyDate } from '@opentiny/vue-renderless/common/deps/date-util';
+export var minTimeOfDay = function minTimeOfDay(_ref) {
+  var MIN_TIME = _ref.MIN_TIME;
+  return function (date) {
+    return modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate());
+  };
+};
+export var maxTimeOfDay = function maxTimeOfDay(_ref2) {
+  var MAX_TIME = _ref2.MAX_TIME;
+  return function (date) {
+    return modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate());
+  };
+};
+export var advanceTime = function advanceTime(api) {
+  return function (date, amount) {
+    return new Date(Math.min(date.getTime() + amount, api.maxTimeOfDay(date).getTime()));
+  };
+};
+export var compuAmPmMode = function compuAmPmMode(state) {
+  return function () {
+    if ((state.format || '').indexOf('A') !== -1) return 'A';
+    if ((state.format || '').indexOf('a') !== -1) return 'a';
+    return '';
+  };
+};
+export var watchValue = function watchValue(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state;
+  return function (value) {
+    if (Array.isArray(value)) {
+      if (value[0]) {
+        state.minDate = new Date(value[0]);
+      } else {
+        state.minDate = value[1] ? new Date(api.minTimeOfDay(new Date(value[1])).getTime()) : new Date();
+      }
+      if (value[1]) {
+        state.maxDate = new Date(value[1]);
+      } else {
+        state.maxDate = value[0] ? api.advanceTime(new Date(value[0]), 60 * 60 * 1000) : api.advanceTime(new Date(), 60 * 60 * 1000);
+      }
+    } else {
+      if (Array.isArray(state.defaultValue)) {
+        state.minDate = new Date(state.defaultValue[0]);
+        state.maxDate = new Date(state.defaultValue[1]);
+      } else if (state.defaultValue) {
+        state.minDate = new Date(state.defaultValue);
+        state.maxDate = api.advanceTime(new Date(state.defaultValue), 60 * 60 * 1000);
+      } else {
+        state.minDate = new Date();
+        state.maxDate = api.advanceTime(new Date(), 60 * 60 * 1000);
+      }
+    }
+  };
+};
+var adjustSpinners = function adjustSpinners(refs) {
+  refs.minSpinner.adjustSpinners();
+  refs.maxSpinner.adjustSpinners();
+};
+var setMaxMinData = function setMaxMinData(state) {
+  if (Array.isArray(state.oldValue)) {
+    state.oldValue[0] && (state.minDate = clearMilliseconds(state.oldValue[0]));
+    state.oldValue[1] && (state.maxDate = clearMilliseconds(state.oldValue[1]));
+  }
+};
+export var watchVisible = function watchVisible(_ref4) {
+  var nextTick = _ref4.nextTick,
+    refs = _ref4.refs,
+    state = _ref4.state;
+  return function (value) {
+    if (value) {
+      state.oldValue = state.value;
+      nextTick(function () {
+        setMaxMinData(state);
+        adjustSpinners(refs);
+      });
+    }
+  };
+};
+export var handleClear = function handleClear(emit) {
+  return function () {
+    return emit('pick', null);
+  };
+};
+export var handleCancel = function handleCancel(_ref5) {
+  var emit = _ref5.emit,
+    refs = _ref5.refs,
+    state = _ref5.state;
+  return function () {
+    state.visible = false;
+    emit('pick', state.oldValue);
+    setMaxMinData(state);
+    adjustSpinners(refs);
+  };
+};
+export var handleMinChange = function handleMinChange(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function (date) {
+    state.minDate = clearMilliseconds(date);
+    api.handleChange();
+  };
+};
+export var handleMaxChange = function handleMaxChange(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function (date) {
+    state.maxDate = clearMilliseconds(date);
+    api.handleChange();
+  };
+};
+export var handleChange = function handleChange(_ref8) {
+  var api = _ref8.api,
+    emit = _ref8.emit,
+    refs = _ref8.refs,
+    state = _ref8.state;
+  return function () {
+    if (api.isValidValue([state.minDate, state.maxDate])) {
+      refs.minSpinner.state.selectableRange = [[api.minTimeOfDay(state.minDate), state.maxDate]];
+      refs.maxSpinner.state.selectableRange = [[state.minDate, api.maxTimeOfDay(state.maxDate)]];
+      emit('pick', [state.minDate, state.maxDate], state.visible);
+    }
+  };
+};
+export var setMinSelectionRange = function setMinSelectionRange(_ref9) {
+  var emit = _ref9.emit,
+    state = _ref9.state;
+  return function (start, end) {
+    emit('select-range', start, end, 'min');
+    state.selectionRange = [start, end];
+  };
+};
+export var setMaxSelectionRange = function setMaxSelectionRange(_ref10) {
+  var emit = _ref10.emit,
+    state = _ref10.state;
+  return function (start, end) {
+    emit('select-range', start, end, 'max');
+    state.selectionRange = [start + state.offset, end + state.offset];
+  };
+};
+export var handleConfirm = function handleConfirm(_ref11) {
+  var emit = _ref11.emit,
+    refs = _ref11.refs,
+    state = _ref11.state;
+  return function () {
+    var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var minSelectableRange = refs.minSpinner.state.selectableRange;
+    var maxSelectableRange = refs.maxSpinner.state.selectableRange;
+    state.minDate = limitTimeRange(state.minDate, minSelectableRange, state.format);
+    state.maxDate = limitTimeRange(state.maxDate, maxSelectableRange, state.format);
+    emit('pick', [state.minDate, state.maxDate], visible);
+  };
+};
+export var changeSelectionRange = function changeSelectionRange(_ref12) {
+  var refs = _ref12.refs,
+    state = _ref12.state;
+  return function (step) {
+    var list = state.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
+    var mapping = ['hours', 'minutes'].concat(state.showSeconds ? ['seconds'] : []);
+    var index = list.indexOf(state.selectionRange[0]);
+    var next = (index + step + list.length) % list.length;
+    var half = list.length / 2;
+    if (next < half) {
+      refs.minSpinner.emitSelectRange(mapping[next]);
+    } else {
+      refs.maxSpinner.emitSelectRange(mapping[next - half]);
+    }
+  };
+};
+export var isValidValue = function isValidValue(_ref13) {
+  var refs = _ref13.refs,
+    state = _ref13.state;
+  return function (date) {
+    return Array.isArray(date) && timeWithinRange(state.minDate, refs.minSpinner.state.selectableRange) && timeWithinRange(state.maxDate, refs.maxSpinner.state.selectableRange);
+  };
+};
+export var handleKeydown = function handleKeydown(_ref14) {
+  var api = _ref14.api,
+    state = _ref14.state;
+  return function (event) {
+    var keyCode = event.keyCode;
+    var mapping = {
+      38: -1,
+      40: 1,
+      37: -1,
+      39: 1
+    };
+    if (keyCode === 37 || keyCode === 39) {
+      var step = mapping[keyCode];
+      api.changeSelectionRange(step);
+      event.preventDefault();
+      return;
+    }
+    if (keyCode === 38 || keyCode === 40) {
+      var _step = mapping[keyCode];
+      state.spinner.scrollDown(_step);
+      event.preventDefault();
+    }
+  };
+};

package/time-range/vue.js

@@ -0,0 +1,129 @@
+import { handleKeydown, isValidValue, changeSelectionRange, handleConfirm, setMaxSelectionRange, setMinSelectionRange, handleChange, handleMaxChange, handleMinChange, handleCancel, handleClear, watchVisible, watchValue, minTimeOfDay, maxTimeOfDay, advanceTime, compuAmPmMode } from './index';
+import { parseDate } from '@opentiny/vue-renderless/common/deps/date-util';
+export var api = ['state', 'handleMinChange', 'handleConfirm', 'setMinSelectionRange', 'handleCancel', 'setMaxSelectionRange', 'handleMaxChange'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    refs = _ref.refs,
+    api = _ref.api;
+  var state = reactive({
+    popperClass: '',
+    defaultValue: null,
+    format: 'HH:mm:ss',
+    visible: false,
+    value: [],
+    oldValue: [new Date(), new Date()],
+    selectionRange: [0, 2],
+    arrowControl: false,
+    maxDate: new Date(),
+    minDate: new Date(),
+    showSeconds: computed(function () {
+      return (state.format || '').indexOf('ss') !== -1;
+    }),
+    offset: computed(function () {
+      return state.showSeconds ? 11 : 8;
+    }),
+    spinner: computed(function () {
+      return state.selectionRange[0] < state.offset ? refs.minSpinner : refs.maxSpinner;
+    }),
+    btnDisabled: computed(function () {
+      return state.minDate.getTime() > state.maxDate.getTime();
+    }),
+    amPmMode: computed(function () {
+      return api.compuAmPmMode();
+    })
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch,
+    nextTick = _ref2.nextTick;
+  var t = _ref3.t,
+    refs = _ref3.refs,
+    $emit = _ref3.emit;
+  var api = {};
+  var emit = props.emitter ? props.emitter.emit : $emit;
+  var MIN_TIME = parseDate('00:00:00', 'HH:mm:ss', t);
+  var MAX_TIME = parseDate('23:59:59', 'HH:mm:ss', t);
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    refs: refs,
+    api: api
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    handleClear: handleClear(emit),
+    compuAmPmMode: compuAmPmMode(state),
+    maxTimeOfDay: maxTimeOfDay({
+      MAX_TIME: MAX_TIME
+    }),
+    minTimeOfDay: minTimeOfDay({
+      MIN_TIME: MIN_TIME
+    }),
+    changeSelectionRange: changeSelectionRange({
+      refs: refs,
+      state: state
+    }),
+    setMaxSelectionRange: setMaxSelectionRange({
+      emit: emit,
+      state: state
+    }),
+    setMinSelectionRange: setMinSelectionRange({
+      emit: emit,
+      state: state
+    }),
+    isValidValue: isValidValue({
+      refs: refs,
+      state: state
+    }),
+    handleConfirm: handleConfirm({
+      emit: emit,
+      refs: refs,
+      state: state
+    }),
+    handleCancel: handleCancel({
+      emit: emit,
+      refs: refs,
+      state: state
+    }),
+    watchVisible: watchVisible({
+      nextTick: nextTick,
+      refs: refs,
+      state: state
+    }),
+    advanceTime: advanceTime(api),
+    watchValue: watchValue({
+      api: api,
+      state: state
+    }),
+    handleKeydown: handleKeydown({
+      api: api,
+      state: state
+    }),
+    handleChange: handleChange({
+      api: api,
+      emit: emit,
+      refs: refs,
+      state: state
+    }),
+    handleMinChange: handleMinChange({
+      api: api,
+      state: state
+    }),
+    handleMaxChange: handleMaxChange({
+      api: api,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.value;
+  }, api.watchValue);
+  watch(function () {
+    return state.visible;
+  }, api.watchVisible);
+  return api;
+};

package/time-spinner/index.js

@@ -0,0 +1,175 @@
+import { modifyTime } from '@opentiny/vue-renderless/common/deps/date-util';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var getArrowHourList = function getArrowHourList(state) {
+  return function () {
+    var hours = state.hours;
+    return [hours > 0 ? hours - 1 : undefined, hours, hours < 23 ? hours + 1 : undefined];
+  };
+};
+export var getArrowMinuteList = function getArrowMinuteList(state) {
+  return function () {
+    var minutes = state.minutes;
+    return [minutes > 0 ? minutes - 1 : undefined, minutes, minutes < 59 ? minutes + 1 : undefined];
+  };
+};
+export var getArrowSecondList = function getArrowSecondList(state) {
+  return function () {
+    var seconds = state.seconds;
+    return [seconds > 0 ? seconds - 1 : undefined, seconds, seconds < 59 ? seconds + 1 : undefined];
+  };
+};
+export var increase = function increase(api) {
+  return function () {
+    return api.scrollDown(1);
+  };
+};
+export var decrease = function decrease(api) {
+  return function () {
+    return api.scrollDown(-1);
+  };
+};
+export var modifyDateField = function modifyDateField(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (type, value) {
+    if (state[type] === value) return;
+    switch (type) {
+      case 'hours':
+        emit('change', modifyTime(props.date, value, state.minutes, state.seconds));
+        break;
+      case 'minutes':
+        emit('change', modifyTime(props.date, state.hours, value, state.seconds));
+        break;
+      case 'seconds':
+        emit('change', modifyTime(props.date, state.hours, state.minutes, value));
+        break;
+      default:
+        break;
+    }
+  };
+};
+export var handleClick = function handleClick(api) {
+  return function (type, _ref2) {
+    var value = _ref2.value,
+      disabled = _ref2.disabled;
+    if (!disabled) {
+      api.modifyDateField(type, value);
+      api.emitSelectRange(type);
+      api.adjustSpinner(type, value);
+    }
+  };
+};
+export var emitSelectRange = function emitSelectRange(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function (type) {
+    if (type === 'hours') {
+      emit('select-range', 0, 2);
+    } else if (type === 'minutes') {
+      emit('select-range', 3, 5);
+    } else if (type === 'seconds') {
+      emit('select-range', 6, 8);
+    }
+    state.currentScrollbar = type;
+  };
+};
+export var bindScrollEvent = function bindScrollEvent(_ref4) {
+  var api = _ref4.api,
+    refs = _ref4.refs;
+  return function () {
+    var bindFuntion = function bindFuntion(type) {
+      refs[type].$refs.wrap.onscroll = function (e) {
+        api.handleScroll(type, e);
+      };
+    };
+    bindFuntion('hours');
+    bindFuntion('minutes');
+    bindFuntion('seconds');
+  };
+};
+export var handleScroll = function handleScroll(_ref5) {
+  var api = _ref5.api,
+    refs = _ref5.refs;
+  return function (type) {
+    var value = Math.min(Math.round((refs[type].$refs.wrap.scrollTop - (api.scrollBarHeight(type) * 0.5 - 10) / api.typeItemHeight(type) + 3) / api.typeItemHeight(type)), type === 'hours' ? 23 : 59);
+    api.modifyDateField(type, value);
+  };
+};
+export var adjustSpinners = function adjustSpinners(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function () {
+    api.adjustSpinner('hours', state.hours);
+    api.adjustSpinner('minutes', state.minutes);
+    api.adjustSpinner('seconds', state.seconds);
+  };
+};
+export var adjustCurrentSpinner = function adjustCurrentSpinner(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function (type) {
+    api.adjustSpinner(type, state[type]);
+  };
+};
+export var adjustSpinner = function adjustSpinner(_ref8) {
+  var api = _ref8.api,
+    props = _ref8.props,
+    refs = _ref8.refs;
+  return function (type, value) {
+    if (props.arrowControl) return;
+    var el = refs[type].$refs.wrap;
+    if (el) {
+      el.scrollTop = Math.max(0, value * api.typeItemHeight(type));
+    }
+  };
+};
+export var scrollDown = function scrollDown(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state;
+  return function (step) {
+    if (!state.currentScrollbar) {
+      api.emitSelectRange('hours');
+    }
+    var label = state.currentScrollbar;
+    var hoursArr = state.hoursList;
+    var now = state[label];
+    if (state.currentScrollbar === 'hours') {
+      var total = Math.abs(step);
+      step = step > 0 ? 1 : -1;
+      var length = hoursArr.length;
+      while (length-- && total) {
+        now = (now + step + hoursArr.length) % hoursArr.length;
+        if (!hoursArr[now]) {
+          total--;
+        }
+      }
+      if (hoursArr[now]) return;
+    } else {
+      now = (now + step + 60) % 60;
+    }
+    api.modifyDateField(label, now);
+    api.adjustSpinner(label, now);
+  };
+};
+export var amPm = function amPm(props) {
+  return function (hour) {
+    var shouldShowAmPm = props.amPmMode.toLowerCase() === 'a';
+    if (!shouldShowAmPm) return '';
+    var isCapital = props.amPmMode === 'A';
+    var content = hour < 12 ? ' am' : ' pm';
+    if (isCapital) content = content.toUpperCase();
+    return content;
+  };
+};
+export var typeItemHeight = function typeItemHeight(_ref10) {
+  var refs = _ref10.refs;
+  return function (type) {
+    return refs[type].$el.querySelector(DATEPICKER.Qurtyli).offsetHeight;
+  };
+};
+export var scrollBarHeight = function scrollBarHeight(refs) {
+  return function (type) {
+    return refs[type].$el.offsetHeight;
+  };
+};