@opentiny/vue-renderless 3.1.0-alpha.0

package/picker/vue.js

@@ -0,0 +1,415 @@
+import { getPanel, getType, watchIsRange, parseAsFormatAndType, watchPickerVisible, getValueEmpty, getMode, displayValue, typeValueResolveMap, formatAsFormatAndType, dateFormatter, dateParser, rangeFormatter, rangeParser, parsedValue, firstInputId, secondInputId, focus, blur, parseValue, formatToValue, parseString, formatToString, handleMouseEnter, handleChange, handleStartInput, handleEndInput, handleStartChange, handleEndChange, handleClose, handleFocus, handleKeydown, hidePicker, showPicker, emitInput, isValidValue, emitChange, mountPicker, updateOptions, handleClickIcon, handlePick, handleSelectRange, getTimezone, getValueFormat, watchModelValue, computedFormat, computedTriggerClass, computedHaveTrigger, intiPopper, initGlobalTimezone, emitDbTime } from './index';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'btnClick', 'handleEndChange', 'handleEndInput', 'focus', 'handleFocus', 'handleStartChange', 'handleStartInput', 'handleKeydown', 'handleMouseEnter', 'handleClickIcon', 'handleMouseEnter', 'handleChange', 'handleClose', 'handlePick', 'handleSelectRange', 'handleSelectChange', 'popperElm'];
+var initState = function initState(_ref) {
+  var api = _ref.api,
+    reactive = _ref.reactive,
+    refs = _ref.refs,
+    computed = _ref.computed,
+    props = _ref.props,
+    utils = _ref.utils;
+  var state = reactive({
+    date: null,
+    pickerVisible: false,
+    showClose: false,
+    userInput: null,
+    valueOnOpen: null,
+    popperElm: null,
+    unwatchPickerOptions: null,
+    ranged: computed(function () {
+      return state.type.indexOf(DATEPICKER.Range) > -1;
+    }),
+    reference: computed(function () {
+      return refs.reference.$el || refs.reference;
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    refInput: computed(function () {
+      return state.reference ? [].slice.call(state.reference.querySelectorAll('input')) : [];
+    }),
+    valueIsEmpty: computed(function () {
+      return api.getValueEmpty();
+    }),
+    triggerClass: computed(function () {
+      return api.computedTriggerClass();
+    }),
+    selectionMode: computed(function () {
+      return api.getMode();
+    }),
+    haveTrigger: computed(function () {
+      return api.computedHaveTrigger();
+    }),
+    displayValue: computed(function () {
+      return api.displayValue();
+    }),
+    parsedValue: computed(function () {
+      return api.parsedValue();
+    }),
+    pickerSize: computed(function () {
+      return props.size;
+    }),
+    pickerDisabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    firstInputId: computed(function () {
+      return api.firstInputId();
+    }),
+    secondInputId: computed(function () {
+      return api.secondInputId();
+    }),
+    type: computed(function () {
+      return api.getType();
+    }),
+    timezone: computed(function () {
+      return api.getTimezone();
+    }),
+    valueFormat: computed(function () {
+      return getValueFormat({
+        props: props,
+        utils: utils
+      });
+    }),
+    format: computed(function () {
+      return api.computedFormat();
+    })
+  });
+  return state;
+};
+var initApi2 = function initApi2(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    t = _ref2.t;
+  Object.assign(api, {
+    t: t,
+    state: state,
+    blur: blur(state),
+    getMode: getMode({
+      state: state
+    }),
+    getType: getType({
+      props: props
+    }),
+    dateParser: dateParser({
+      t: t
+    }),
+    rangeParser: rangeParser(api),
+    rangeFormatter: rangeFormatter(api),
+    dateFormatter: dateFormatter({
+      t: t
+    }),
+    getValueEmpty: getValueEmpty(props),
+    handleEndInput: handleEndInput(state),
+    handleStartInput: handleStartInput(state),
+    firstInputId: firstInputId({
+      props: props,
+      state: state
+    }),
+    secondInputId: secondInputId({
+      props: props,
+      state: state
+    }),
+    handleMouseEnter: handleMouseEnter({
+      props: props,
+      state: state
+    }),
+    initGlobalTimezone: initGlobalTimezone({
+      api: api,
+      state: state,
+      props: props
+    }),
+    parseValue: parseValue({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handleSelectRange: handleSelectRange(state)
+  });
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    hooks = _ref3.hooks,
+    state = _ref3.state,
+    vnode = _ref3.vnode,
+    others = _ref3.others,
+    utils = _ref3.utils;
+  var t = vnode.t,
+    emit = vnode.emit,
+    refs = vnode.refs,
+    dispatch = vnode.dispatch,
+    nextTick = vnode.nextTick,
+    vm = vnode.vm;
+  var TimePanel = others.TimePanel,
+    TimeRangePanel = others.TimeRangePanel;
+  var _intiPopper = intiPopper({
+      props: props,
+      hooks: hooks,
+      vnode: vnode
+    }),
+    destroyPopper = _intiPopper.destroyPopper,
+    popperElm = _intiPopper.popperElm,
+    updatePopper = _intiPopper.updatePopper;
+  state.popperElm = popperElm;
+  state.picker = null;
+  Object.assign(api, {
+    destroyPopper: destroyPopper,
+    emitDbTime: emitDbTime({
+      emit: emit,
+      state: state,
+      t: t
+    }),
+    hidePicker: hidePicker({
+      destroyPopper: destroyPopper,
+      state: state
+    }),
+    handleSelectChange: function handleSelectChange(_ref4) {
+      var tz = _ref4.tz,
+        date = _ref4.date;
+      return emit('select-change', {
+        tz: tz,
+        date: date
+      });
+    },
+    getPanel: getPanel(others),
+    handleFocus: handleFocus({
+      emit: emit,
+      refs: refs,
+      state: state
+    }),
+    getTimezone: getTimezone({
+      props: props,
+      utils: utils
+    }),
+    emitChange: emitChange({
+      api: api,
+      dispatch: dispatch,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    parsedValue: parsedValue({
+      api: api,
+      props: props,
+      state: state,
+      t: t
+    }),
+    parseAsFormatAndType: parseAsFormatAndType({
+      api: api
+    }),
+    typeValueResolveMap: typeValueResolveMap({
+      api: api,
+      t: t
+    }),
+    updateOptions: updateOptions({
+      api: api,
+      props: props,
+      state: state
+    }),
+    focus: focus({
+      api: api,
+      props: props,
+      refs: refs
+    }),
+    handleChange: handleChange({
+      api: api,
+      state: state
+    }),
+    isValidValue: isValidValue({
+      api: api,
+      state: state
+    }),
+    emitInput: emitInput({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleKeydown: handleKeydown({
+      api: api,
+      state: state
+    }),
+    handleEndChange: handleEndChange({
+      api: api,
+      state: state
+    }),
+    handleStartChange: handleStartChange({
+      api: api,
+      state: state
+    }),
+    handleClickIcon: handleClickIcon({
+      api: api,
+      props: props,
+      state: state
+    }),
+    showPicker: showPicker({
+      api: api,
+      nextTick: nextTick,
+      updatePopper: updatePopper,
+      state: state
+    }),
+    formatToValue: formatToValue({
+      api: api,
+      props: props,
+      state: state
+    }),
+    formatAsFormatAndType: formatAsFormatAndType({
+      api: api
+    }),
+    parseString: parseString({
+      api: api,
+      state: state
+    }),
+    handleClose: handleClose({
+      api: api,
+      props: props,
+      state: state
+    }),
+    displayValue: displayValue({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handlePick: handlePick({
+      api: api,
+      state: state
+    }),
+    watchPickerVisible: watchPickerVisible({
+      api: api,
+      vm: vm,
+      dispatch: dispatch,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    formatToString: formatToString({
+      api: api,
+      state: state
+    }),
+    watchIsRange: watchIsRange({
+      api: api,
+      props: props,
+      state: state,
+      TimePanel: TimePanel,
+      TimeRangePanel: TimeRangePanel
+    }),
+    mountPicker: mountPicker({
+      api: api,
+      vm: vm,
+      props: props,
+      state: state,
+      updatePopper: updatePopper
+    }),
+    watchModelValue: watchModelValue({
+      api: api,
+      props: props,
+      state: state,
+      dispatch: dispatch
+    }),
+    computedFormat: computedFormat({
+      props: props,
+      utils: utils
+    }),
+    computedTriggerClass: computedTriggerClass({
+      props: props,
+      state: state
+    }),
+    computedHaveTrigger: computedHaveTrigger({
+      props: props
+    })
+  });
+  initApi2({
+    api: api,
+    props: props,
+    state: state,
+    t: t
+  });
+};
+var initWatch = function initWatch(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state,
+    props = _ref5.props,
+    watch = _ref5.watch,
+    markRaw = _ref5.markRaw;
+  watch(function () {
+    return state.type;
+  }, function (type) {
+    return state.panel = markRaw(api.getPanel(type));
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.pickerVisible;
+  }, api.watchPickerVisible);
+  watch(function () {
+    return props.defaultValue;
+  }, function (value) {
+    return state.picker && (state.picker.state.defaultValue = value);
+  });
+  watch(function () {
+    return state.parsedValue;
+  }, function (value) {
+    return state.picker && (state.picker.state.value = value);
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.isRange;
+  }, api.watchIsRange);
+  watch(function () {
+    return props.modelValue;
+  }, api.watchModelValue);
+  watch(function () {
+    return props.pickerOptions;
+  }, api.updateOptions, {
+    deep: true
+  });
+};
+export var renderless = function renderless(props, hooks, vnode, others) {
+  var api = {};
+  var reactive = hooks.reactive,
+    computed = hooks.computed,
+    watch = hooks.watch,
+    onBeforeUnmount = hooks.onBeforeUnmount,
+    inject = hooks.inject,
+    markRaw = hooks.markRaw;
+  var refs = vnode.refs,
+    service = vnode.service,
+    parent = vnode.parent;
+  var _ref6 = service || {},
+    _ref6$utils = _ref6.utils,
+    utils = _ref6$utils === void 0 ? {} : _ref6$utils;
+  var state = initState({
+    api: api,
+    reactive: reactive,
+    refs: refs,
+    computed: computed,
+    props: props,
+    utils: utils
+  });
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  initApi({
+    api: api,
+    props: props,
+    hooks: hooks,
+    state: state,
+    vnode: vnode,
+    others: others,
+    utils: utils
+  });
+  initWatch({
+    api: api,
+    state: state,
+    props: props,
+    watch: watch,
+    markRaw: markRaw
+  });
+  api.initGlobalTimezone();
+  onBeforeUnmount(function () {
+    api.destroyPopper('remove');
+    state.popperElm = null;
+    state.picker = null;
+  });
+  return api;
+};

package/picker-column/index.js

@@ -0,0 +1,261 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var computedWrapperStyle = function computedWrapperStyle(state) {
+  return function () {
+    var wrapperStyle = {
+      transform: "translate3d(0, ".concat(state.offset + state.baseOffset, "px, 0)"),
+      transitionDuration: "".concat(state.duration, "ms"),
+      transitionProperty: state.duration ? 'all' : 'none',
+      lineHeight: "".concat(state.itemHeight, "px")
+    };
+    return wrapperStyle;
+  };
+};
+export var computedBaseOffset = function computedBaseOffset(_ref) {
+  var state = _ref.state,
+    props = _ref.props;
+  return function () {
+    return state.itemHeight * (props.visibleItemCount - 1) / 2;
+  };
+};
+export var onClickItem = function onClickItem(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function (index) {
+    if (state.moving) {
+      return;
+    }
+    state.duration = state.defaultDuration;
+    api.setIndex(index, true);
+  };
+};
+export var setIndex = function setIndex(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    emit = _ref3.emit;
+  return function (index, emitChange) {
+    index = api.adjustIndex(index) || 0;
+    var offset = -index * state.itemHeight;
+    var trigger = function trigger() {
+      if (index !== state.currentIndex) {
+        state.currentIndex = index;
+        if (emitChange) {
+          emit('change', index);
+        }
+      }
+    };
+    if (state.moving && offset !== state.offset) {
+      state.transitionEndTrigger = trigger;
+    }
+    trigger();
+    state.offset = offset;
+  };
+};
+var range = function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+var isOptionDisabled = function isOptionDisabled(option) {
+  return option !== null && _typeof(option) === 'object' && option.disabled;
+};
+export var adjustIndex = function adjustIndex(state) {
+  return function (index) {
+    index = range(index, 0, state.count);
+    for (var i = index; i < state.count; i++) {
+      if (!isOptionDisabled(state.columnsItem.values[i])) return i;
+    }
+    for (var _i = index - 1; _i >= 0; _i--) {
+      if (!isOptionDisabled(state.columnsItem.values[_i])) return _i;
+    }
+  };
+};
+export var onTouchstart = function onTouchstart(_ref4) {
+  var refs = _ref4.refs,
+    state = _ref4.state;
+  return function (event) {
+    state.direction = '';
+    state.deltaX = 0;
+    state.deltaY = 0;
+    state.offsetX = 0;
+    state.offsetY = 0;
+    state.startX = event.touches[0].clientX;
+    state.startY = event.touches[0].clientY;
+    if (state.moving) {
+      var style = window.getComputedStyle(refs.track);
+      var transform = style.transform || style.webkitTransform;
+      var translateY = Number(transform.slice(7, transform.length - 1).split(', ')[5]);
+      state.offset = Math.min(0, translateY - state.baseOffset);
+      state.startOffset = state.offset;
+    } else {
+      state.startOffset = state.offset;
+    }
+    state.duration = 0;
+    state.transitionEndTrigger = null;
+    state.touchStartTime = Date.now();
+    state.momentumOffset = state.startOffset;
+  };
+};
+var getDirection = function getDirection(x, y) {
+  var MIN_DISTANCE = 10;
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+};
+export var onTouchmove = function onTouchmove(_ref5) {
+  var state = _ref5.state;
+  return function (event) {
+    var touch = event.touches[0];
+    state.deltaX = touch.clientX - state.startX;
+    state.deltaY = touch.clientY - state.startY;
+    state.offsetX = Math.abs(state.deltaX);
+    state.offsetY = Math.abs(state.deltaY);
+    state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+    if (state.direction === 'vertical') {
+      state.moving = true;
+    }
+    state.offset = range(state.startOffset + state.deltaY, -(state.count * state.itemHeight), state.itemHeight);
+    var now = Date.now();
+    if (now - state.touchStartTime > state.momentumLimitTime) {
+      state.touchStartTime = now;
+      state.momentumOffset = state.offset;
+    }
+  };
+};
+export var onTouchend = function onTouchend(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function () {
+    var distance = state.offset - state.momentumOffset;
+    var duration = Date.now() - state.touchStartTime;
+    var allowMomentum = duration < state.momentumLimitTime && Math.abs(distance) > state.momentumLimitDistance;
+    if (allowMomentum) {
+      api.momentum(distance, duration);
+      return;
+    }
+    var index = range(Math.round(-state.offset / state.itemHeight), 0, state.count - 1);
+    state.duration = state.defaultDuration;
+    api.setIndex(index, true);
+    setTimeout(function () {
+      state.moving = false;
+    }, 0);
+  };
+};
+export var mountedHandler = function mountedHandler(_ref7) {
+  var api = _ref7.api,
+    refs = _ref7.refs,
+    state = _ref7.state;
+  return function () {
+    var track = refs.track;
+    on(track, 'touchstart', api.onTouchstart);
+    on(track, 'touchmove', api.onTouchmove);
+    on(track, 'touchend', api.onTouchend);
+    state.clumnsWrapHeight = state.itemHeight * state.visibleItemCount;
+    state.maskStyle = {
+      backgroundSize: "100% ".concat((state.clumnsWrapHeight - state.itemHeight) / 2, "px")
+    };
+  };
+};
+export var beforeUnmountHandler = function beforeUnmountHandler(_ref8) {
+  var api = _ref8.api,
+    refs = _ref8.refs;
+  return function () {
+    var track = refs.track;
+    off(track, 'touchstart', api.onTouchstart);
+    off(track, 'touchmove', api.onTouchmove);
+    off(track, 'touchend', api.onTouchend);
+  };
+};
+export var momentum = function momentum(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state,
+    props = _ref9.props;
+  return function (distance, duration) {
+    var speed = Math.abs(distance / duration);
+    distance = state.offset + speed / 0.002 * (distance < 0 ? -1 : 1);
+    var index = range(Math.round(-distance / state.itemHeight), 0, state.count - 1);
+    state.duration = +props.swipeDuration;
+    api.setIndex(index, true);
+  };
+};
+export var onTransitionEnd = function onTransitionEnd(state) {
+  return function () {
+    state.moving = false;
+    state.duration = 0;
+    if (state.transitionEndTrigger) {
+      state.transitionEndTrigger();
+      state.transitionEndTrigger = null;
+    }
+  };
+};
+export var setValue = function setValue(_ref10) {
+  var api = _ref10.api,
+    state = _ref10.state;
+  return function (value) {
+    var columnsItem = state.columnsItem;
+    var values = columnsItem.values;
+    for (var i = 0; i < values.length; i++) {
+      if (api.getOptionText(values[i]) === value) {
+        return api.setIndex(i);
+      }
+    }
+  };
+};
+export var getOptionText = function getOptionText(_ref11) {
+  var state = _ref11.state,
+    props = _ref11.props;
+  return function (option) {
+    if (option !== null && _typeof(option) === 'object' && props.valueKey in option) {
+      return option[state.valueKey];
+    }
+    return option;
+  };
+};
+export var getValue = function getValue(state) {
+  return function () {
+    return state.columnsItem.values[state.currentIndex];
+  };
+};
+var deepAssign;
+var assignKey = function assignKey(to, from, key) {
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+  var val = from[key];
+  if (val === undefined || val === null) {
+    return;
+  }
+  if (!hasOwnProperty.call(to, key) || _typeof(val) !== 'object') {
+    to[key] = val;
+  } else {
+    to[key] = deepAssign(Object(to[key]), from[key]);
+  }
+};
+deepAssign = function deepAssign(to, from) {
+  Object.keys(from).forEach(function (key) {
+    assignKey(to, from, key);
+  });
+  return to;
+};
+export var deepClone = function deepClone(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(function (item) {
+      return deepClone(item);
+    });
+  }
+  if (_typeof(obj) === 'object') {
+    return deepAssign({}, obj);
+  }
+  return obj;
+};
+export var setOptions = function setOptions(_ref12) {
+  var api = _ref12.api,
+    state = _ref12.state,
+    props = _ref12.props;
+  return function (options) {
+    if (JSON.stringify(options) !== JSON.stringify(state.columnsItem.values)) {
+      state.columnsItem.values = deepClone(options);
+      api.setIndex(props.defaultIndex);
+    }
+  };
+};