@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/picker-column/index.js

@@ -1,265 +1,215 @@
-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);
-        }
+import "../chunk-PKUHTIDK.js";
+import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+const computedWrapperStyle = (state) => () => {
+  const wrapperStyle = {
+    transform: `translate3d(0, ${state.offset + state.baseOffset}px, 0)`,
+    transitionDuration: `${state.duration}ms`,
+    transitionProperty: state.duration ? "all" : "none",
+    lineHeight: `${state.itemHeight}px`
+  };
+  return wrapperStyle;
+};
+const computedBaseOffset = ({ state, props }) => () => state.itemHeight * (props.visibleItemCount - 1) / 2;
+const onClickItem = ({ api, state }) => (index) => {
+  if (state.moving) {
+    return;
+  }
+  state.duration = state.defaultDuration;
+  api.setIndex(index, true);
+};
+const setIndex = ({ api, state, emit }) => (index, emitChange) => {
+  index = api.adjustIndex(index) || 0;
+  const offset = -index * state.itemHeight;
+  const 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;
-      }
+  if (state.moving && offset !== state.offset) {
+    state.transitionEndTrigger = trigger;
+  }
+  trigger();
+  state.offset = offset;
+};
+const range = (num, min, max) => Math.min(Math.max(num, min), max);
+const isOptionDisabled = (option) => option !== null && typeof option === "object" && option.disabled;
+const adjustIndex = (state) => (index) => {
+  index = range(index, 0, state.count);
+  for (let 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;
-      }
+  }
+  for (let 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;
-  };
+const onTouchstart = ({ refs, state }) => (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) {
+    const style = window.getComputedStyle(refs.track);
+    const transform = style.transform || style.webkitTransform;
+    const 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;
+const getDirection = (x, y) => {
+  const MIN_DISTANCE = 10;
   if (x > y && x > MIN_DISTANCE) {
-    return 'horizontal';
+    return "horizontal";
   }
   if (y > x && y > MIN_DISTANCE) {
-    return 'vertical';
+    return "vertical";
+  }
+  return "";
+};
+const onTouchmove = ({ state }) => (event) => {
+  const 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);
+  const now = Date.now();
+  if (now - state.touchStartTime > state.momentumLimitTime) {
+    state.touchStartTime = now;
+    state.momentumOffset = state.offset;
   }
-  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 = Number(props.swipeDuration);
-    api.setIndex(index, true);
-  };
 };
-export var onTransitionEnd = function onTransitionEnd(state) {
-  return function () {
+const onTouchend = ({ api, state }) => () => {
+  const distance = state.offset - state.momentumOffset;
+  const duration = Date.now() - state.touchStartTime;
+  const allowMomentum = duration < state.momentumLimitTime && Math.abs(distance) > state.momentumLimitDistance;
+  if (allowMomentum) {
+    api.momentum(distance, duration);
+    return;
+  }
+  const index = range(Math.round(-state.offset / state.itemHeight), 0, state.count - 1);
+  state.duration = state.defaultDuration;
+  api.setIndex(index, true);
+  setTimeout(() => {
     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);
-      }
-    }
-  };
+  }, 0);
+};
+const mountedHandler = ({ api, refs, state }) => () => {
+  const 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% ${(state.clumnsWrapHeight - state.itemHeight) / 2}px`
+  };
+};
+const beforeUnmountHandler = ({ api, refs }) => () => {
+  const track = refs.track;
+  off(track, "touchstart", api.onTouchstart);
+  off(track, "touchmove", api.onTouchmove);
+  off(track, "touchend", api.onTouchend);
+};
+const momentum = ({ api, state, props }) => (distance, duration) => {
+  const speed = Math.abs(distance / duration);
+  distance = state.offset + speed / 2e-3 * (distance < 0 ? -1 : 1);
+  const index = range(Math.round(-distance / state.itemHeight), 0, state.count - 1);
+  state.duration = Number(props.swipeDuration);
+  api.setIndex(index, true);
+};
+const onTransitionEnd = (state) => () => {
+  state.moving = false;
+  state.duration = 0;
+  if (state.transitionEndTrigger) {
+    state.transitionEndTrigger();
+    state.transitionEndTrigger = null;
+  }
 };
-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];
+const setValue = ({ api, state }) => (value) => {
+  const { columnsItem } = state;
+  const values = columnsItem.values;
+  for (let i = 0; i < values.length; i++) {
+    if (api.getOptionText(values[i]) === value) {
+      return api.setIndex(i);
     }
-    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) {
+const getOptionText = ({ state, props }) => (option) => {
+  if (option !== null && typeof option === "object" && props.valueKey in option) {
+    return option[state.valueKey];
+  }
+  return option;
+};
+const getValue = (state) => () => state.columnsItem.values[state.currentIndex];
+let deepAssign;
+const assignKey = (to, from, key) => {
+  const { hasOwnProperty } = Object.prototype;
+  const val = from[key];
+  if (val === void 0 || val === null) {
     return;
   }
-  if (!hasOwnProperty.call(to, key) || _typeof(val) !== 'object') {
+  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) {
+deepAssign = (to, from) => {
+  Object.keys(from).forEach((key) => {
     assignKey(to, from, key);
   });
   return to;
 };
-export var deepClone = function deepClone(obj) {
+const deepClone = (obj) => {
   if (Array.isArray(obj)) {
-    return obj.map(function (item) {
-      return deepClone(item);
-    });
+    return obj.map((item) => deepClone(item));
   }
-  if (_typeof(obj) === 'object') {
+  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);
-    }
-  };
-};
+const setOptions = ({ api, state, props }) => (options) => {
+  if (JSON.stringify(options) !== JSON.stringify(state.columnsItem.values)) {
+    state.columnsItem.values = deepClone(options);
+    api.setIndex(props.defaultIndex);
+  }
+};
+export {
+  adjustIndex,
+  beforeUnmountHandler,
+  computedBaseOffset,
+  computedWrapperStyle,
+  deepClone,
+  getOptionText,
+  getValue,
+  momentum,
+  mountedHandler,
+  onClickItem,
+  onTouchend,
+  onTouchmove,
+  onTouchstart,
+  onTransitionEnd,
+  setIndex,
+  setOptions,
+  setValue
+};

package/picker-column/vue.js

@@ -1,11 +1,26 @@
-import { computedWrapperStyle, computedBaseOffset, onClickItem, setIndex, adjustIndex, mountedHandler, momentum, onTransitionEnd, getOptionText, setValue, getValue, setOptions, deepClone, beforeUnmountHandler, onTouchstart, onTouchmove, onTouchend } from './index';
-export var api = ['state', 'onClickItem', 'onTransitionEnd', 'setValue', 'getValue', 'setOptions', 'setIndex'];
-var initState = function initState(_ref) {
-  var reactive = _ref.reactive,
-    computed = _ref.computed,
-    props = _ref.props,
-    api = _ref.api;
-  var state = reactive({
+import "../chunk-PKUHTIDK.js";
+import {
+  computedWrapperStyle,
+  computedBaseOffset,
+  onClickItem,
+  setIndex,
+  adjustIndex,
+  mountedHandler,
+  momentum,
+  onTransitionEnd,
+  getOptionText,
+  setValue,
+  getValue,
+  setOptions,
+  deepClone,
+  beforeUnmountHandler,
+  onTouchstart,
+  onTouchmove,
+  onTouchend
+} from "./index";
+const api = ["state", "onClickItem", "onTransitionEnd", "setValue", "getValue", "setOptions", "setIndex"];
+const initState = ({ reactive, computed, props, api: api2 }) => {
+  const state = reactive({
     columnsItem: props.columnsItem,
     columnsItemArr: props.columnsItem.values,
     currentIndex: props.defaultIndex,
@@ -20,7 +35,7 @@ var initState = function initState(_ref) {
     momentumLimitDistance: 15,
     touchStartTime: null,
     momentumOffset: 0,
-    direction: '',
+    direction: "",
     deltaX: 0,
     deltaY: 0,
     offsetX: 0,
@@ -29,135 +44,61 @@ var initState = function initState(_ref) {
     transitionEndTrigger: null,
     clumnsWrapHeight: null,
     maskStyle: null,
-    wrapperStyle: computed(function () {
-      return api.computedWrapperStyle();
-    }),
-    baseOffset: computed(function () {
-      return api.computedBaseOffset();
-    })
+    wrapperStyle: computed(() => api2.computedWrapperStyle()),
+    baseOffset: computed(() => api2.computedBaseOffset())
   });
   return state;
 };
-var initApi = function initApi(_ref2) {
-  var api = _ref2.api,
-    props = _ref2.props,
-    state = _ref2.state,
-    refs = _ref2.refs,
-    emit = _ref2.emit;
-  Object.assign(api, {
-    state: state,
+const initApi = ({ api: api2, props, state, refs, emit }) => {
+  Object.assign(api2, {
+    state,
     getValue: getValue(state),
     adjustIndex: adjustIndex(state),
-    onTouchmove: onTouchmove({
-      state: state
-    }),
-    onTouchstart: onTouchstart({
-      state: state
-    }),
-    getOptionText: getOptionText({
-      state: state,
-      props: props
-    }),
+    onTouchmove: onTouchmove({ state }),
+    onTouchstart: onTouchstart({ state }),
+    getOptionText: getOptionText({ state, props }),
     onTransitionEnd: onTransitionEnd(state),
-    computedBaseOffset: computedBaseOffset({
-      state: state,
-      props: props
-    }),
+    computedBaseOffset: computedBaseOffset({ state, props }),
     computedWrapperStyle: computedWrapperStyle(state),
-    setValue: setValue({
-      api: api,
-      state: state
-    }),
-    onTouchend: onTouchend({
-      api: api,
-      state: state
-    }),
-    setOptions: setOptions({
-      api: api,
-      state: state,
-      props: props
-    }),
-    momentum: momentum({
-      api: api,
-      state: state,
-      props: props
-    }),
-    setIndex: setIndex({
-      api: api,
-      state: state,
-      emit: emit
-    }),
-    onClickItem: onClickItem({
-      api: api,
-      state: state
-    }),
-    mountedHandler: mountedHandler({
-      api: api,
-      state: state,
-      refs: refs
-    }),
-    beforeUnmountHandler: beforeUnmountHandler({
-      api: api,
-      refs: refs
-    })
+    setValue: setValue({ api: api2, state }),
+    onTouchend: onTouchend({ api: api2, state }),
+    setOptions: setOptions({ api: api2, state, props }),
+    momentum: momentum({ api: api2, state, props }),
+    setIndex: setIndex({ api: api2, state, emit }),
+    onClickItem: onClickItem({ api: api2, state }),
+    mountedHandler: mountedHandler({ api: api2, state, refs }),
+    beforeUnmountHandler: beforeUnmountHandler({ api: api2, refs })
   });
 };
-var initWatch = function initWatch(_ref3) {
-  var watch = _ref3.watch,
-    props = _ref3.props,
-    state = _ref3.state,
-    api = _ref3.api;
-  watch(function () {
-    return props.defaultIndex;
-  }, api.setIndex, {
-    immediate: true
-  });
-  watch(function () {
-    return props.columnsItem;
-  }, function (value) {
-    state.columnsItem = value;
-  }, {
-    immediate: true
-  });
-  watch(function () {
-    return props.columnsItem.values;
-  }, function (value) {
-    state.count = value.length;
-  }, {
-    immediate: true
-  });
+const initWatch = ({ watch, props, state, api: api2 }) => {
+  watch(() => props.defaultIndex, api2.setIndex, { immediate: true });
+  watch(
+    () => props.columnsItem,
+    (value) => {
+      state.columnsItem = value;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.columnsItem.values,
+    (value) => {
+      state.count = value.length;
+    },
+    { immediate: true }
+  );
 };
-export var renderless = function renderless(props, _ref4, _ref5) {
-  var computed = _ref4.computed,
-    onMounted = _ref4.onMounted,
-    reactive = _ref4.reactive,
-    watch = _ref4.watch,
-    onBeforeUnmount = _ref4.onBeforeUnmount;
-  var emit = _ref5.emit,
-    refs = _ref5.refs;
-  var api = {};
-  var state = initState({
-    reactive: reactive,
-    computed: computed,
-    props: props,
-    api: api
-  });
-  initApi({
-    api: api,
-    props: props,
-    state: state,
-    refs: refs,
-    emit: emit
-  });
-  api.setIndex(state.currentIndex);
+const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount }, { emit, refs }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, props, api: api2 });
+  initApi({ api: api2, props, state, refs, emit });
+  api2.setIndex(state.currentIndex);
   state.columnsItem = deepClone(props.columnsItem);
-  initWatch({
-    watch: watch,
-    props: props,
-    state: state,
-    api: api
-  });
-  onMounted(api.mountedHandler);
-  onBeforeUnmount(api.beforeUnmountHandler);
-  return api;
-};
+  initWatch({ watch, props, state, api: api2 });
+  onMounted(api2.mountedHandler);
+  onBeforeUnmount(api2.beforeUnmountHandler);
+  return api2;
+};
+export {
+  api,
+  renderless
+};