@opentiny/vue-renderless 3.1.0-alpha.0

package/text-popup/index.js

@@ -0,0 +1,75 @@
+export var computedWidth = function computedWidth(_ref) {
+  var props = _ref.props;
+  return function () {
+    if (typeof props.width === 'number' || !Number.isNaN(+props.width)) {
+      return props.width + 'px';
+    }
+    return props.width;
+  };
+};
+export var watchValue = function watchValue(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (newValue) {
+    newValue = newValue.toString();
+    if (state.type === 'textarea') {
+      state.textAreaValue = api.jointText(newValue, props.separtor);
+    } else {
+      state.text && (state.text.value = newValue);
+    }
+  };
+};
+export var mounted = function mounted(_ref3) {
+  var props = _ref3.props,
+    refs = _ref3.refs,
+    state = _ref3.state;
+  return function () {
+    state.text = refs['text'];
+    state.popup = refs['popup'];
+    state.text.value = props.modelValue.toString();
+  };
+};
+export var onFocus = function onFocus(_ref4) {
+  var api = _ref4.api,
+    emit = _ref4.emit,
+    props = _ref4.props,
+    nextTick = _ref4.nextTick,
+    state = _ref4.state;
+  return function () {
+    state.type = 'textarea';
+    nextTick(function () {
+      state.popup.focus();
+      state.text.placeholder && (state.popup.placeholder = state.text.placeholder);
+      state.textAreaValue = api.jointText(state.text.value, props.separtor);
+      emit('popup', true);
+    });
+  };
+};
+export var onBlur = function onBlur(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    state.type = 'input';
+    state.text.value = api.separteText(state.textAreaValue, props.separtor);
+    emit('popup', false);
+  };
+};
+export var onInput = function onInput(_ref6) {
+  var api = _ref6.api,
+    emit = _ref6.emit,
+    props = _ref6.props;
+  return function (event) {
+    var value = api.separteText(event.target.value, props.separtor);
+    emit('update:modelValue', value);
+  };
+};
+export var separteText = function separteText(str, separtor) {
+  return str.replace(/\n/g, separtor);
+};
+export var jointText = function jointText(str, separtor) {
+  if (separtor === ']') separtor = '\\' + separtor;
+  return str.replace(new RegExp("[".concat(separtor, "]"), 'g'), '\n');
+};

package/text-popup/vue.js

@@ -0,0 +1,64 @@
+import { computedWidth, watchValue, mounted, onFocus, onBlur, onInput, separteText, jointText } from './index';
+export var api = ['state', 'onFocus', 'onBlur', 'onInput'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    refs = _ref2.refs;
+  var api = {};
+  var state = reactive({
+    type: 'input',
+    textAreaValue: '',
+    text: null,
+    popup: null,
+    width: computed(function () {
+      return api.computedWidth();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    jointText: jointText,
+    separteText: separteText,
+    computedWidth: computedWidth({
+      props: props
+    }),
+    mounted: mounted({
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    onInput: onInput({
+      api: api,
+      emit: emit,
+      props: props
+    }),
+    watchValue: watchValue({
+      api: api,
+      props: props,
+      state: state
+    }),
+    onBlur: onBlur({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    onFocus: onFocus({
+      api: api,
+      emit: emit,
+      props: props,
+      nextTick: nextTick,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue, {
+    immediate: true
+  });
+  onMounted(api.mounted);
+  return api;
+};

package/time/index.js

@@ -0,0 +1,121 @@
+import { limitTimeRange, clearMilliseconds, timeWithinRange } from '@opentiny/vue-renderless/common/deps/date-util';
+export var watchValue = function watchValue(_ref) {
+  var api = _ref.api,
+    nextTick = _ref.nextTick,
+    state = _ref.state;
+  return function (value) {
+    var date;
+    if (value instanceof Date) {
+      date = limitTimeRange(value, state.selectableRange, state.format);
+    } else if (!value) {
+      date = state.defaultValue ? new Date(state.defaultValue) : new Date();
+    }
+    state.date = date;
+    if (state.visible && state.needInitAdjust) {
+      nextTick(function () {
+        return api.adjustSpinners();
+      });
+      state.needInitAdjust = false;
+    }
+  };
+};
+export var watchVisible = function watchVisible(_ref2) {
+  var nextTick = _ref2.nextTick,
+    refs = _ref2.refs,
+    state = _ref2.state;
+  return function (value) {
+    if (value) {
+      state.oldValue = state.value;
+      nextTick(function () {
+        return refs.spinner.emitSelectRange('hours');
+      });
+    } else {
+      state.needInitAdjust = true;
+    }
+  };
+};
+export var handleCancel = function handleCancel(_ref3) {
+  var state = _ref3.state,
+    emit = _ref3.emit;
+  return function () {
+    emit('pick', state.oldValue, false);
+  };
+};
+export var handleChange = function handleChange(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state,
+    emit = _ref4.emit;
+  return function (date) {
+    if (state.visible) {
+      state.date = clearMilliseconds(date);
+      if (api.isValidValue(state.date)) {
+        emit('pick', state.date, true);
+      }
+    }
+  };
+};
+export var setSelectionRange = function setSelectionRange(_ref5) {
+  var state = _ref5.state,
+    emit = _ref5.emit;
+  return function (start, end) {
+    emit('select-range', start, end);
+    state.selectionRange = [start, end];
+  };
+};
+export var handleConfirm = function handleConfirm(_ref6) {
+  var state = _ref6.state,
+    emit = _ref6.emit;
+  return function () {
+    var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    if (first) return;
+    var date = clearMilliseconds(limitTimeRange(state.date, state.selectableRange, state.format));
+    emit('pick', date, visible, first);
+  };
+};
+export var handleKeydown = function handleKeydown(_ref7) {
+  var api = _ref7.api,
+    refs = _ref7.refs;
+  return function (event) {
+    var mapping = {
+      38: -1,
+      40: 1,
+      37: -1,
+      39: 1
+    };
+    var keyCode = event.keyCode;
+    if (keyCode === 37 || keyCode === 39) {
+      var key = mapping[keyCode];
+      api.changeSelectionRange(key);
+      event.preventDefault();
+      return;
+    }
+    if (keyCode === 38 || keyCode === 40) {
+      var _key = mapping[keyCode];
+      refs.spinner.scrollDown(_key);
+      event.preventDefault();
+    }
+  };
+};
+export var isValidValue = function isValidValue(_ref8) {
+  var state = _ref8.state;
+  return function (date) {
+    return timeWithinRange(date, state.selectableRange, state.format);
+  };
+};
+export var adjustSpinners = function adjustSpinners(refs) {
+  return function () {
+    return refs.spinner.adjustSpinners();
+  };
+};
+export var changeSelectionRange = function changeSelectionRange(_ref9) {
+  var refs = _ref9.refs,
+    state = _ref9.state;
+  return function (step) {
+    var list = [0, 3].concat(state.showSeconds ? [6] : []);
+    var mapping = ['hours', 'minutes'].concat(state.showSeconds ? ['seconds'] : []);
+    var index = list.indexOf(state.selectionRange[0]);
+    var next = (index + step + list.length) % list.length;
+    refs.spinner.emitSelectRange(mapping[next]);
+  };
+};

package/time/vue.js

@@ -0,0 +1,124 @@
+import { changeSelectionRange, adjustSpinners, isValidValue, handleKeydown, watchValue, watchVisible, handleCancel, handleChange, setSelectionRange, handleConfirm } from './index';
+import { compuAmPmMode } from '@opentiny/vue-renderless/time-range';
+import { isDate } from '@opentiny/vue-renderless/common/deps/date-util';
+export var api = ['state', 'handleChange', 'setSelectionRange', 'handleCancel', 'handleConfirm', 'adjustSpinners'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    popperClass: '',
+    format: 'HH:mm:ss',
+    value: '',
+    defaultValue: null,
+    date: props.value || new Date(),
+    oldValue: new Date(),
+    selectableRange: [],
+    selectionRange: [0, 2],
+    disabled: false,
+    arrowControl: false,
+    visible: false,
+    needInitAdjust: true,
+    showSeconds: computed(function () {
+      return (state.format || '').indexOf('ss') !== -1;
+    }),
+    useArrow: computed(function () {
+      return state.arrowControl || props.timeArrowControl || false;
+    }),
+    amPmMode: computed(function () {
+      return api.compuAmPmMode();
+    })
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    onMounted = _ref2.onMounted,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch,
+    nextTick = _ref2.nextTick;
+  var t = _ref3.t,
+    $emit = _ref3.emit,
+    refs = _ref3.refs;
+  var api = {};
+  var emit = props.emitter ? props.emitter.emit : $emit;
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed,
+    api: api
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    compuAmPmMode: compuAmPmMode(state),
+    adjustSpinners: adjustSpinners(refs),
+    handleCancel: handleCancel({
+      state: state,
+      emit: emit
+    }),
+    setSelectionRange: setSelectionRange({
+      state: state,
+      emit: emit
+    }),
+    watchVisible: watchVisible({
+      nextTick: nextTick,
+      refs: refs,
+      state: state
+    }),
+    isValidValue: isValidValue({
+      state: state
+    }),
+    changeSelectionRange: changeSelectionRange({
+      refs: refs,
+      state: state
+    }),
+    handleConfirm: handleConfirm({
+      state: state,
+      emit: emit
+    }),
+    handleKeydown: handleKeydown({
+      api: api,
+      refs: refs
+    }),
+    handleChange: handleChange({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    watchValue: watchValue({
+      api: api,
+      emit: emit,
+      nextTick: nextTick,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.value;
+  }, api.watchValue);
+  watch(function () {
+    return props.show;
+  }, function (value) {
+    state.visible = value;
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.selectableRange;
+  }, function (value) {
+    return refs.spinner.state.selectableRange = value;
+  });
+  watch(function () {
+    return state.defaultValue;
+  }, function (value) {
+    return !isDate(state.value) && (state.date = value ? new Date(value) : new Date());
+  });
+  onMounted(function () {
+    api.handleConfirm(true, true);
+  });
+  watch(function () {
+    return state.visible;
+  }, api.watchVisible);
+  return api;
+};

package/time-line/index.js

@@ -0,0 +1,60 @@
+import { format } from '@opentiny/vue-renderless/common/date';
+export var getDate = function getDate(dateTime) {
+  return {
+    date: format(dateTime, 'yyyy-MM-dd'),
+    time: format(dateTime, 'hh:mm')
+  };
+};
+export var getStatus = function getStatus(_ref) {
+  var state = _ref.state,
+    t = _ref.t;
+  return function (value) {
+    var status = state.current - value;
+    return status > 0 ? t('ui.steps.done') : status === 0 ? t('ui.steps.doing') : t('ui.steps.wait');
+  };
+};
+export var handleClick = function handleClick(_ref2) {
+  var emit = _ref2.emit,
+    state = _ref2.state;
+  return function (_ref3) {
+    var index = _ref3.index,
+      node = _ref3.node;
+    emit('click', state.isReverse ? state.nodes.length - index - 1 : index, node);
+  };
+};
+export var getStatusCls = function getStatusCls(_ref4) {
+  var constants = _ref4.constants,
+    state = _ref4.state;
+  return function (index) {
+    var PROCESS_DONE_CLS = constants.PROCESS_DONE_CLS,
+      PROCESS_CUR_CLS = constants.PROCESS_CUR_CLS,
+      PROCESS_WAIT_CLS = constants.PROCESS_WAIT_CLS;
+    var cls = {};
+    var reverse = state.isReverse;
+    cls[PROCESS_DONE_CLS] = reverse ? index > state.current : index < state.current;
+    cls[PROCESS_CUR_CLS] = index === state.current;
+    cls[PROCESS_WAIT_CLS] = reverse ? index < state.current : index > state.current;
+    return cls;
+  };
+};
+export var computedData = function computedData(_ref5) {
+  var props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    return state.isReverse ? props.data.map(function (item, i) {
+      return props.data[props.data.length - 1 - i];
+    }) : props.data;
+  };
+};
+export var computedCurrent = function computedCurrent(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    return state.isReverse ? state.nodes.length - props.active - 1 : props.active;
+  };
+};
+export var computedIsReverse = function computedIsReverse(props) {
+  return function () {
+    return props.reverse && props.vertical;
+  };
+};

package/time-line/vue.js

@@ -0,0 +1,49 @@
+import { handleClick, getStatusCls, getStatus, computedData, getDate, computedCurrent, computedIsReverse } from './index';
+export var api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var t = _ref2.t,
+    emit = _ref2.emit,
+    constants = _ref2.constants;
+  var api = {};
+  var state = reactive({
+    nodes: computed(function () {
+      return api.computedData();
+    }),
+    current: computed(function () {
+      return api.computedCurrent();
+    }),
+    isReverse: computed(function () {
+      return api.computedIsReverse();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    getDate: getDate,
+    computedData: computedData({
+      props: props,
+      state: state
+    }),
+    computedCurrent: computedCurrent({
+      props: props,
+      state: state
+    }),
+    computedIsReverse: computedIsReverse(props),
+    getStatus: getStatus({
+      state: state,
+      t: t
+    }),
+    handleClick: handleClick({
+      emit: emit,
+      state: state,
+      api: api
+    }),
+    getStatusCls: getStatusCls({
+      constants: constants,
+      props: props,
+      state: state
+    })
+  });
+  return api;
+};

package/time-panel/index.js

@@ -0,0 +1,189 @@
+import scrollIntoView from '@opentiny/vue-renderless/common/deps/scroll-into-view';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var parseTime = function parseTime() {
+  return function (time) {
+    var values = (time || '').split(':');
+    if (values.length >= 2) {
+      var hours = parseInt(values[0], 10);
+      var minutes = parseInt(values[1], 10);
+      return {
+        hours: hours,
+        minutes: minutes
+      };
+    }
+    return null;
+  };
+};
+export var compareTime = function compareTime(api) {
+  return function (time1, time2) {
+    var value1 = api.parseTime(time1);
+    var value2 = api.parseTime(time2);
+    var minutes1 = value1.minutes + value1.hours * 60;
+    var minutes2 = value2.minutes + value2.hours * 60;
+    if (minutes1 === minutes2) {
+      return 0;
+    }
+    return minutes1 > minutes2 ? 1 : -1;
+  };
+};
+export var formatTime = function formatTime() {
+  return function (time) {
+    return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes);
+  };
+};
+export var nextTime = function nextTime(api) {
+  return function (time, step) {
+    var timeValue = api.parseTime(time);
+    var stepValue = api.parseTime(step);
+    var next = {
+      hours: timeValue.hours,
+      minutes: timeValue.minutes
+    };
+    next.minutes += stepValue.minutes;
+    next.hours += stepValue.hours;
+    next.hours += Math.floor(next.minutes / 60);
+    next.minutes = next.minutes % 60;
+    return api.formatTime(next);
+  };
+};
+export var emitDestroy = function emitDestroy(emit) {
+  return function () {
+    return emit('dodestroy');
+  };
+};
+export var emitPick = function emitPick(_ref) {
+  var emit = _ref.emit,
+    state = _ref.state;
+  return function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? null : _ref2$value,
+      _ref2$visible = _ref2.visible,
+      visible = _ref2$visible === void 0 ? false : _ref2$visible;
+    var lastEmitValue = JSON.stringify({
+      value: value,
+      visible: visible
+    });
+    if (!state.lastEmitValue || state.lastEmitValue !== lastEmitValue) {
+      state.lastEmitValue = lastEmitValue;
+      emit('pick', value, visible);
+    }
+  };
+};
+export var watchValue = function watchValue(_ref3) {
+  var api = _ref3.api,
+    nextTick = _ref3.nextTick;
+  return function (value) {
+    if (!value) {
+      return;
+    }
+    nextTick(function () {
+      return api.scrollToOption();
+    });
+  };
+};
+export var computItems = function computItems(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state;
+  return function () {
+    var start = state.start;
+    var end = state.end;
+    var step = state.step;
+    var result = [];
+    if (start && end && step) {
+      var current = start;
+      while (api.compareTime(current, end) <= 0) {
+        result.push({
+          value: current,
+          disabled: api.compareTime(current, state.minTime || DATEPICKER.CompareOne) <= 0 || api.compareTime(current, state.maxTime || DATEPICKER.CompareHundred) >= 0
+        });
+        current = api.nextTime(current, step);
+      }
+    }
+    return result;
+  };
+};
+export var handleClick = function handleClick(api) {
+  return function (item) {
+    return !item.disabled && api.emitPick({
+      value: item.value
+    });
+  };
+};
+export var handleClear = function handleClear(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state;
+  return function () {
+    state.defaultValue = '';
+    state.defaultTime = '';
+    api.emitPick();
+  };
+};
+export var scrollToOption = function scrollToOption(_ref6) {
+  var refs = _ref6.refs;
+  return function () {
+    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DATEPICKER.selClass;
+    var menu = refs.popper.querySelector(DATEPICKER.queryClass);
+    scrollIntoView(menu, menu.querySelector(selector));
+  };
+};
+export var handleMenuEnter = function handleMenuEnter(_ref7) {
+  var api = _ref7.api,
+    nextTick = _ref7.nextTick,
+    state = _ref7.state;
+  return function () {
+    var selected = state.items.map(function (item) {
+      return item.value;
+    }).indexOf(state.value) !== -1;
+    var hasDefault = state.items.map(function (item) {
+      return item.value;
+    }).indexOf(state["default"]) !== -1;
+    var option = selected && DATEPICKER.selClass || hasDefault && DATEPICKER.defaultClass || DATEPICKER.disableClass;
+    nextTick(function () {
+      return api.scrollToOption(option);
+    });
+  };
+};
+export var scrollDown = function scrollDown(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state;
+  return function (step) {
+    var items = state.items;
+    var length = items.length;
+    var total = items.length;
+    var index = items.map(function (item) {
+      return item.value;
+    }).indexOf(state.value);
+    while (total--) {
+      index = (index + step + length) % length;
+      if (!items[index].disabled) {
+        api.emitPick({
+          value: items[index].value,
+          visible: true
+        });
+        return;
+      }
+    }
+  };
+};
+export var isValidValue = function isValidValue(state) {
+  return function (date) {
+    return state.items.filter(function (item) {
+      return !item.disabled;
+    }).map(function (item) {
+      return item.value;
+    }).indexOf(date) !== -1;
+  };
+};
+export var handleKeydown = function handleKeydown(_ref9) {
+  var api = _ref9.api;
+  return function (event) {
+    var keyCode = event.keyCode;
+    if (keyCode === 38 || keyCode === 40) {
+      var mapping = DATEPICKER.MappingKeyCode;
+      var offset = mapping[keyCode.toString()];
+      api.scrollDown(offset);
+      event.stopPropagation();
+    }
+  };
+};

package/time-panel/scrollIntoView.js

@@ -0,0 +1,23 @@
+export default (function (container, selected) {
+  if (!selected) {
+    container.scrollTop = 0;
+    return;
+  }
+  var offsetParents = [];
+  var pointer = selected.offsetParent;
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent;
+  }
+  var top = selected.offsetTop + offsetParents.reduce(function (prev, curr) {
+    return prev + curr.offsetTop;
+  }, 0);
+  var bottom = top + selected.offsetHeight;
+  var viewRectTop = container.scrollTop;
+  var viewRectBottom = viewRectTop + container.clientHeight;
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
+});