@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/swipe/Swipe.js

@@ -0,0 +1,408 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _elements = require("../utils/elements");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var SWIPE_DELAY = 250;
+var SWIPE_DISTANCE = 20;
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-swipe",
+  ref: "swipeEl"
+};
+var _hoisted_2 = ["onClick"];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-swipe__track", [_ctx.vertical ? 'var-swipe--vertical' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      width: !_ctx.vertical ? _ctx.trackSize + "px" : undefined,
+      height: _ctx.vertical ? _ctx.trackSize + "px" : undefined,
+      transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)",
+      transitionDuration: _ctx.lockDuration ? "0ms" : _ctx.toNumber(_ctx.duration) + "ms"
+    }),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 38
+  /* CLASS, STYLE, HYDRATE_EVENTS */
+  ), (0, _vue.renderSlot)(_ctx.$slots, "indicator", {
+    index: _ctx.index,
+    length: _ctx.length
+  }, () => [_ctx.indicator && _ctx.length ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var-swipe__indicators", [_ctx.vertical ? 'var-swipe--indicators-vertical' : null]])
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.length, (l, idx) => {
+    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      class: (0, _vue.normalizeClass)(["var-swipe__indicator", [_ctx.index === idx ? 'var-swipe--indicator-active' : null, _ctx.vertical ? 'var-swipe--indicator-vertical' : null]]),
+      style: (0, _vue.normalizeStyle)({
+        background: _ctx.indicatorColor
+      }),
+      key: l,
+      onClick: $event => _ctx.to(idx)
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_2);
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)])], 512
+  /* NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSwipe',
+  props: _props.props,
+
+  setup(props) {
+    var swipeEl = (0, _vue.ref)(null);
+    var size = (0, _vue.ref)(0);
+    var vertical = (0, _vue.computed)(() => props.vertical);
+    var trackSize = (0, _vue.ref)(0);
+    var translate = (0, _vue.ref)(0);
+    var lockDuration = (0, _vue.ref)(false);
+    var index = (0, _vue.ref)(0);
+    var {
+      swipeItems,
+      bindSwipeItems,
+      length
+    } = (0, _provide.useSwipeItems)();
+    var touching = false;
+    var timer = -1;
+    var startX;
+    var startY;
+    var startTime;
+    var prevX;
+    var prevY;
+
+    var findSwipeItem = idx => swipeItems.find(({
+      index
+    }) => index.value === idx);
+
+    var dispatchBorrower = () => {
+      if (!props.loop) {
+        return;
+      } // track越左边界
+
+
+      if (translate.value >= 0) {
+        findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
+      } // track越右边界
+
+
+      if (translate.value <= -(trackSize.value - size.value)) {
+        findSwipeItem(0).setTranslate(trackSize.value);
+      } // track没越界
+
+
+      if (translate.value > -(trackSize.value - size.value) && translate.value < 0) {
+        findSwipeItem(length.value - 1).setTranslate(0);
+        findSwipeItem(0).setTranslate(0);
+      }
+    };
+
+    var getSwipeIndex = targetSwipeIndex => {
+      var swipeIndex = (0, _shared.isNumber)(targetSwipeIndex) ? targetSwipeIndex : Math.floor((translate.value - size.value / 2) / -size.value);
+      var {
+        loop
+      } = props;
+
+      if (swipeIndex <= -1) {
+        return loop ? -1 : 0;
+      }
+
+      if (swipeIndex >= length.value) {
+        return loop ? length.value : length.value - 1;
+      }
+
+      return swipeIndex;
+    };
+
+    var swipeIndexToIndex = swipeIndex => {
+      var {
+        loop
+      } = props;
+
+      if (swipeIndex === -1) {
+        return loop ? length.value - 1 : 0;
+      }
+
+      if (swipeIndex === length.value) {
+        return loop ? 0 : length.value - 1;
+      }
+
+      return swipeIndex;
+    };
+
+    var boundaryIndex = index => {
+      var {
+        loop
+      } = props;
+
+      if (index < 0) {
+        return loop ? length.value - 1 : 0;
+      }
+
+      if (index > length.value - 1) {
+        return loop ? 0 : length.value - 1;
+      }
+
+      return index;
+    };
+
+    var fixPosition = fn => {
+      var overLeft = translate.value >= size.value;
+      var overRight = translate.value <= -trackSize.value;
+      var leftTranslate = 0;
+      var rightTranslate = -(trackSize.value - size.value);
+      lockDuration.value = true; // 检测是否有越界情况 越界修正
+
+      if (overLeft || overRight) {
+        lockDuration.value = true;
+        translate.value = overRight ? leftTranslate : rightTranslate;
+        findSwipeItem(0).setTranslate(0);
+        findSwipeItem(length.value - 1).setTranslate(0);
+      }
+
+      (0, _elements.nextTickFrame)(() => {
+        lockDuration.value = false;
+        fn == null ? void 0 : fn();
+      });
+    };
+
+    var initialIndex = () => {
+      lockDuration.value = true;
+      index.value = boundaryIndex((0, _shared.toNumber)(props.initialIndex));
+      translate.value = index.value * -size.value;
+      (0, _elements.nextTickFrame)(() => {
+        lockDuration.value = false;
+      });
+    };
+
+    var startAutoplay = () => {
+      var {
+        autoplay
+      } = props;
+
+      if (!autoplay || length.value <= 1) {
+        return;
+      }
+
+      stopAutoplay();
+      timer = window.setTimeout(() => {
+        next();
+        startAutoplay();
+      }, (0, _shared.toNumber)(autoplay));
+    };
+
+    var stopAutoplay = () => {
+      timer && clearInterval(timer);
+    };
+
+    var getDirection = (x, y) => {
+      if (x > y && x > 10) {
+        return 'horizontal';
+      }
+
+      if (y > x && y > 10) {
+        return 'vertical';
+      }
+    };
+
+    var handleTouchstart = event => {
+      if (length.value <= 1 || !props.touchable) {
+        return;
+      }
+
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      startX = clientX;
+      startY = clientY;
+      startTime = performance.now();
+      touching = true;
+      stopAutoplay();
+      fixPosition(() => {
+        lockDuration.value = true;
+      });
+    };
+
+    var handleTouchmove = event => {
+      var {
+        touchable,
+        vertical
+      } = props;
+
+      if (!touching || !touchable) {
+        return;
+      }
+
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      var deltaX = Math.abs(clientX - startX);
+      var deltaY = Math.abs(clientY - startY);
+      var direction = getDirection(deltaX, deltaY);
+      var expectDirection = vertical ? 'vertical' : 'horizontal';
+
+      if (direction === expectDirection) {
+        event.preventDefault();
+        var moveX = prevX !== undefined ? clientX - prevX : 0;
+        var moveY = prevY !== undefined ? clientY - prevY : 0;
+        prevX = clientX;
+        prevY = clientY;
+        translate.value += vertical ? moveY : moveX;
+        dispatchBorrower();
+      }
+    };
+
+    var handleTouchend = () => {
+      if (!touching) {
+        return;
+      }
+
+      var {
+        vertical,
+        onChange
+      } = props;
+      var positive = vertical ? prevY < startY : prevX < startX;
+      var distance = vertical ? Math.abs(startY - prevY) : Math.abs(startX - prevX);
+      var quickSwiping = performance.now() - startTime <= SWIPE_DELAY && distance >= SWIPE_DISTANCE;
+      var swipeIndex = quickSwiping ? positive ? getSwipeIndex(index.value + 1) : getSwipeIndex(index.value - 1) : getSwipeIndex();
+      touching = false;
+      lockDuration.value = false;
+      prevX = undefined;
+      prevY = undefined;
+      translate.value = swipeIndex * -size.value;
+      var prevIndex = index.value;
+      index.value = swipeIndexToIndex(swipeIndex);
+      startAutoplay();
+      prevIndex !== index.value && (onChange == null ? void 0 : onChange(index.value));
+    }; // expose
+
+
+    var resize = () => {
+      size.value = props.vertical ? swipeEl.value.offsetHeight : swipeEl.value.offsetWidth;
+      trackSize.value = size.value * length.value;
+      initialIndex();
+      startAutoplay();
+    }; // expose
+
+
+    var next = () => {
+      if (length.value <= 1) {
+        return;
+      }
+
+      var {
+        loop,
+        onChange
+      } = props;
+      var currentIndex = index.value;
+      index.value = boundaryIndex(currentIndex + 1);
+      onChange == null ? void 0 : onChange(index.value);
+      fixPosition(() => {
+        if (currentIndex === length.value - 1 && loop) {
+          findSwipeItem(0).setTranslate(trackSize.value);
+          translate.value = length.value * -size.value;
+          return;
+        }
+
+        if (currentIndex !== length.value - 1) {
+          translate.value = index.value * -size.value;
+        }
+      });
+    }; // expose
+
+
+    var prev = () => {
+      if (length.value <= 1) {
+        return;
+      }
+
+      var {
+        loop,
+        onChange
+      } = props;
+      var currentIndex = index.value;
+      index.value = boundaryIndex(currentIndex - 1);
+      onChange == null ? void 0 : onChange(index.value);
+      fixPosition(() => {
+        if (currentIndex === 0 && loop) {
+          findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
+          translate.value = size.value;
+          return;
+        }
+
+        if (currentIndex !== 0) {
+          translate.value = index.value * -size.value;
+        }
+      });
+    }; // expose
+
+
+    var to = idx => {
+      if (length.value <= 1 || idx === index.value) {
+        return;
+      }
+
+      idx = idx < 0 ? 0 : idx;
+      idx = idx >= length.value ? length.value : idx;
+      var task = idx > index.value ? next : prev;
+      Array.from({
+        length: Math.abs(idx - index.value)
+      }).forEach(task);
+    };
+
+    var swipeProvider = {
+      size,
+      vertical
+    };
+    bindSwipeItems(swipeProvider);
+    (0, _vue.watch)(() => length.value, resize);
+    (0, _vue.onMounted)(() => {
+      window.addEventListener('resize', resize);
+    });
+    (0, _vue.onUnmounted)(() => {
+      window.removeEventListener('resize', resize);
+      stopAutoplay();
+    });
+    return {
+      length,
+      index,
+      swipeEl,
+      trackSize,
+      translate,
+      lockDuration,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      next,
+      prev,
+      to,
+      resize,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/swipe/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._SwipeComponent = void 0;
+
+var _Swipe = _interopRequireDefault(require("./Swipe.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Swipe.default.install = function (app) {
+  app.component(_Swipe.default.name, _Swipe.default);
+};
+
+var _SwipeComponent = _Swipe.default;
+exports._SwipeComponent = _SwipeComponent;
+var _default = _Swipe.default;
+exports.default = _default;

package/lib/swipe/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  loop: {
+    type: Boolean,
+    default: true
+  },
+  autoplay: {
+    type: [String, Number]
+  },
+  duration: {
+    type: [String, Number],
+    default: 300
+  },
+  initialIndex: {
+    type: [String, Number],
+    default: 0
+  },
+  indicator: {
+    type: Boolean,
+    default: true
+  },
+  indicatorColor: {
+    type: String
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  touchable: {
+    type: Boolean,
+    default: true
+  },
+  onChange: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/swipe/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useSwipeItems = useSwipeItems;
+exports.SWIPE_COUNT_SWIPE_ITEM_KEY = exports.SWIPE_BIND_SWIPE_ITEM_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var SWIPE_BIND_SWIPE_ITEM_KEY = Symbol('SWIPE_BIND_SWIPE_ITEM_KEY');
+exports.SWIPE_BIND_SWIPE_ITEM_KEY = SWIPE_BIND_SWIPE_ITEM_KEY;
+var SWIPE_COUNT_SWIPE_ITEM_KEY = Symbol('SWIPE_COUNT_SWIPE_ITEM_KEY');
+exports.SWIPE_COUNT_SWIPE_ITEM_KEY = SWIPE_COUNT_SWIPE_ITEM_KEY;
+
+function useSwipeItems() {
+  var {
+    childProviders,
+    bindChildren
+  } = (0, _components.useChildren)(SWIPE_BIND_SWIPE_ITEM_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(SWIPE_COUNT_SWIPE_ITEM_KEY);
+  return {
+    length,
+    swipeItems: childProviders,
+    bindSwipeItems: bindChildren
+  };
+}

package/lib/swipe/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../swipe.css')
+require('../SwipeSfc.css')

package/lib/swipe/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../swipe.less')
+require('../SwipeSfc.less')

package/lib/swipe/swipe.css

@@ -0,0 +1 @@
+:root { --swipe-indicator-color: #fff; --swipe-indicators-offset: 10px; --swipe-indicator-offset: 4px;}.var-swipe { position: relative; overflow: hidden; user-select: none;}.var-swipe__track { width: 100%; height: 100%; display: flex; transition-property: transform;}.var-swipe__indicators { position: absolute; display: flex; bottom: var(--swipe-indicators-offset); left: 50%; transform: translateX(-50%);}.var-swipe__indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--swipe-indicator-color); opacity: 0.3; margin: 0 var(--swipe-indicator-offset); transition: opacity 0.3s;}.var-swipe--vertical { flex-direction: column;}.var-swipe--indicators-vertical { flex-direction: column; left: var(--swipe-indicators-offset); bottom: 50%; transform: translateY(50%);}.var-swipe--indicator-active { opacity: 1;}.var-swipe--indicator-vertical { margin: var(--swipe-indicator-offset) 0;}

package/lib/swipe/swipe.less

@@ -0,0 +1,59 @@
+@swipe-indicator-color: #fff;
+@swipe-indicators-offset: 10px;
+@swipe-indicator-offset: 4px;
+
+:root {
+  --swipe-indicator-color: @swipe-indicator-color;
+  --swipe-indicators-offset: @swipe-indicators-offset;
+  --swipe-indicator-offset: @swipe-indicator-offset;
+}
+
+.var-swipe {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    transition-property: transform;
+  }
+
+  &__indicators {
+    position: absolute;
+    display: flex;
+    bottom: var(--swipe-indicators-offset);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &__indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--swipe-indicator-color);
+    opacity: 0.3;
+    margin: 0 var(--swipe-indicator-offset);
+    transition: opacity 0.3s;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--indicators-vertical {
+    flex-direction: column;
+    left: var(--swipe-indicators-offset);
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+
+  &--indicator-active {
+    opacity: 1;
+  }
+
+  &--indicator-vertical {
+    margin: var(--swipe-indicator-offset) 0;
+  }
+}

package/lib/swipe-item/SwipeItem.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-swipe-item",
+    style: (0, _vue.normalizeStyle)({
+      width: !_ctx.vertical ? _ctx.size + "px" : undefined,
+      height: _ctx.vertical ? _ctx.size + "px" : undefined,
+      transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)"
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
+  /* STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSwipeItem',
+
+  setup() {
+    var translate = (0, _vue.ref)(0);
+    var {
+      swipe,
+      bindSwipe,
+      index
+    } = (0, _provide.useSwipe)();
+    var {
+      size,
+      vertical
+    } = swipe;
+
+    var setTranslate = x => {
+      translate.value = x;
+    };
+
+    var swipeItemProvider = {
+      index,
+      setTranslate
+    };
+    bindSwipe(swipeItemProvider);
+    return {
+      size,
+      vertical,
+      translate
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/swipe-item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._SwipeItemComponent = void 0;
+
+var _SwipeItem = _interopRequireDefault(require("./SwipeItem.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_SwipeItem.default.install = function (app) {
+  app.component(_SwipeItem.default.name, _SwipeItem.default);
+};
+
+var _SwipeItemComponent = _SwipeItem.default;
+exports._SwipeItemComponent = _SwipeItemComponent;
+var _default = _SwipeItem.default;
+exports.default = _default;

package/lib/swipe-item/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useSwipe = useSwipe;
+
+var _components = require("../utils/components");
+
+var _provide = require("../swipe/provide");
+
+function useSwipe() {
+  var {
+    bindParent,
+    parentProvider
+  } = (0, _components.useParent)(_provide.SWIPE_BIND_SWIPE_ITEM_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.SWIPE_COUNT_SWIPE_ITEM_KEY);
+
+  if (!bindParent || !parentProvider || !index) {
+    throw Error('<var-swipe-item/> must in <var-swipe/>');
+  }
+
+  return {
+    index,
+    swipe: parentProvider,
+    bindSwipe: bindParent
+  };
+}

package/lib/swipe-item/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../swipeItem.css')
+require('../SwipeItemSfc.css')

package/lib/swipe-item/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../swipeItem.less')
+require('../SwipeItemSfc.less')

package/lib/swipe-item/swipeItem.css

@@ -0,0 +1 @@
+.var-swipe-item { flex-shrink: 0; width: 100%; height: 100%;}

package/lib/swipe-item/swipeItem.less

@@ -0,0 +1,5 @@
+.var-swipe-item {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+}