@nutui/nutui 3.1.6 → 3.1.7

package/dist/packages/_es/Swipe.js

@@ -0,0 +1,193 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { u as useTouch } from "./index.js";
+import { computed, ref, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { componentName, create } = createComponent("swipe");
+const _sfc_main = create({
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["open", "close"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const getRefWidth = (ref2) => {
+      var _a;
+      return ((_a = ref2.value) == null ? void 0 : _a.clientWidth) || 0;
+    };
+    const leftRef = ref(), leftRefWidth = computed(() => {
+      return getRefWidth(leftRef);
+    });
+    const rightRef = ref(), rightRefWidth = computed(() => {
+      return getRefWidth(rightRef);
+    });
+    let opened = false;
+    let position = "";
+    let oldPosition = "";
+    const state = reactive({
+      offset: 0,
+      moving: false
+    });
+    const open = (p = "") => {
+      opened = true;
+      if (p) {
+        state.offset = p === "left" ? -rightRefWidth.value : leftRefWidth.value;
+      }
+      emit("open", {
+        name: props.name,
+        position: position || p
+      });
+    };
+    const close = () => {
+      state.offset = 0;
+      opened = false;
+      emit("close", {
+        name: props.name,
+        position
+      });
+    };
+    const touchStyle = computed(() => {
+      return {
+        transform: `translate3d(${state.offset}px, 0, 0)`
+      };
+    });
+    const setoffset = (deltaX) => {
+      position = deltaX > 0 ? "right" : "left";
+      let offset = deltaX;
+      switch (position) {
+        case "left":
+          if (opened && oldPosition === position) {
+            offset = -rightRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
+          }
+          break;
+        case "right":
+          if (opened && oldPosition === position) {
+            offset = leftRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
+          }
+          break;
+      }
+      state.offset = offset;
+    };
+    const touch = useTouch();
+    const touchMethods = {
+      onTouchStart(event) {
+        if (props.disabled)
+          return;
+        touch.start(event);
+      },
+      onTouchMove(event) {
+        if (props.disabled)
+          return;
+        if (touch.isVertical() == false) {
+          state.moving = true;
+          touch.move(event);
+          setoffset(touch.deltaX.value);
+          event.preventDefault();
+        }
+      },
+      onTouchEnd() {
+        if (state.moving) {
+          state.moving = false;
+          oldPosition = position;
+          switch (position) {
+            case "left":
+              if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = -rightRefWidth.value;
+                open();
+              }
+              break;
+            case "right":
+              if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = leftRefWidth.value;
+                open();
+              }
+              break;
+          }
+        }
+      }
+    };
+    return __spreadProps(__spreadValues({
+      classes,
+      touchStyle
+    }, touchMethods), {
+      leftRef,
+      rightRef,
+      open,
+      close
+    });
+  }
+});
+const _hoisted_1 = {
+  class: "nut-swipe__left",
+  ref: "leftRef"
+};
+const _hoisted_2 = { class: "nut-swipe__content" };
+const _hoisted_3 = {
+  class: "nut-swipe__right",
+  ref: "rightRef"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.touchStyle),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
+    ], 512),
+    createElementVNode("view", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("view", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
+    ], 512)
+  ], 38);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Swiper.js

@@ -0,0 +1,429 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, ref, computed, provide, onMounted, nextTick, onActivated, onDeactivated, onBeforeUnmount, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useExpose } from "./index2.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const DISTANCE = 5;
+function useTouch() {
+  const state = reactive({
+    startX: 0,
+    startY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    direction: ""
+  });
+  const getDirection = (x, y) => {
+    if (x > y && x > DISTANCE)
+      return "horizontal";
+    if (y > x && y > DISTANCE)
+      return "vertical";
+    return "";
+  };
+  const reset = () => {
+    state.startX = 0;
+    state.startY = 0;
+    state.deltaX = 0;
+    state.deltaY = 0;
+    state.offsetX = 0;
+    state.offsetY = 0;
+    state.direction = "";
+  };
+  const start = (e) => {
+    reset();
+    state.startX = e.touches[0].clientX;
+    state.startY = e.touches[0].clientY;
+  };
+  const move = (e) => {
+    state.deltaX = e.touches[0].clientX - state.startX;
+    state.deltaY = e.touches[0].clientY - state.startY;
+    state.offsetX = Math.abs(state.deltaX);
+    state.offsetY = Math.abs(state.deltaY);
+    if (!state.direction) {
+      state.direction = getDirection(state.offsetX, state.offsetY);
+    }
+  };
+  return {
+    state,
+    start,
+    reset,
+    move
+  };
+}
+const { create, componentName } = createComponent("swiper");
+const _sfc_main = create({
+  props: {
+    width: {
+      type: [Number, String],
+      default: window.innerWidth
+    },
+    height: {
+      type: [Number, String],
+      default: 0
+    },
+    direction: {
+      type: [String],
+      default: "horizontal"
+    },
+    paginationVisible: {
+      type: Boolean,
+      default: false
+    },
+    paginationColor: {
+      type: String,
+      default: "#fff"
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    duration: {
+      type: [Number, String],
+      default: 500
+    },
+    autoPlay: {
+      type: [Number, String],
+      default: 0
+    },
+    initPage: {
+      type: [Number, String],
+      default: 0
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    isPreventDefault: {
+      type: Boolean,
+      default: true
+    },
+    isStopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["change"],
+  setup(props, { emit, slots }) {
+    const container = ref();
+    const state = reactive({
+      active: 0,
+      num: 0,
+      rect: null,
+      width: 0,
+      height: 0,
+      moving: false,
+      offset: 0,
+      touchTime: 0,
+      autoplayTimer: 0,
+      children: [],
+      style: {}
+    });
+    const touch = useTouch();
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const isVertical = computed(() => props.direction === "vertical");
+    const delTa = computed(() => {
+      return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+    });
+    const isCorrectDirection = computed(() => {
+      return touch.state.direction === props.direction;
+    });
+    const childCount = computed(() => state.children.length);
+    const size = computed(() => state[isVertical.value ? "height" : "width"]);
+    const trackSize = computed(() => childCount.value * size.value);
+    const minOffset = computed(() => {
+      if (state.rect) {
+        const base = isVertical.value ? state.rect.height : state.rect.width;
+        return base - size.value * childCount.value;
+      }
+      return 0;
+    });
+    const activePagination = computed(() => (state.active + childCount.value) % childCount.value);
+    const getStyle = () => {
+      state.style = {
+        transitionDuration: `${state.moving ? 0 : props.duration}ms`,
+        transform: `translate${isVertical.value ? "Y" : "X"}(${state.offset}px)`,
+        [isVertical.value ? "height" : "width"]: `${size.value * childCount.value}px`,
+        [isVertical.value ? "width" : "height"]: `${isVertical.value ? state.width : state.height}px`
+      };
+    };
+    const relation = (child) => {
+      if (child.proxy) {
+        state.children.push(child.proxy);
+      }
+    };
+    const range = (num, min, max) => {
+      return Math.min(Math.max(num, min), max);
+    };
+    const requestFrame = (fn) => {
+      window.requestAnimationFrame.call(window, fn);
+    };
+    const getOffset = (active, offset = 0) => {
+      let currentPosition = active * size.value;
+      if (!props.loop) {
+        currentPosition = Math.min(currentPosition, -minOffset.value);
+      }
+      let targetOffset = offset - currentPosition;
+      if (!props.loop) {
+        targetOffset = range(targetOffset, minOffset.value, 0);
+      }
+      return targetOffset;
+    };
+    const getActive = (pace) => {
+      const { active } = state;
+      if (pace) {
+        if (props.loop) {
+          return range(active + pace, -1, childCount.value);
+        }
+        return range(active + pace, 0, childCount.value - 1);
+      }
+      return active;
+    };
+    const move = ({ pace = 0, offset = 0, isEmit = false }) => {
+      if (childCount.value <= 1)
+        return;
+      const { active } = state;
+      const targetActive = getActive(pace);
+      const targetOffset = getOffset(targetActive, offset);
+      if (props.loop) {
+        if (state.children[0] && targetOffset !== minOffset.value) {
+          const rightBound = targetOffset < minOffset.value;
+          state.children[0].setOffset(rightBound ? trackSize.value : 0);
+        }
+        if (state.children[childCount.value - 1] && targetOffset !== 0) {
+          const leftBound = targetOffset > 0;
+          state.children[childCount.value - 1].setOffset(leftBound ? -trackSize.value : 0);
+        }
+      }
+      state.active = targetActive;
+      state.offset = targetOffset;
+      if (isEmit && active !== state.active) {
+        emit("change", activePagination.value);
+      }
+      getStyle();
+    };
+    const resettPosition = () => {
+      state.moving = true;
+      if (state.active <= -1) {
+        move({ pace: childCount.value });
+      }
+      if (state.active >= childCount.value) {
+        move({ pace: -childCount.value });
+      }
+    };
+    const stopAutoPlay = () => {
+      clearTimeout(state.autoplayTimer);
+    };
+    const prev = () => {
+      resettPosition();
+      touch.reset();
+      requestFrame(() => {
+        requestFrame(() => {
+          state.moving = false;
+          move({
+            pace: -1,
+            isEmit: true
+          });
+        });
+      });
+    };
+    const next = () => {
+      resettPosition();
+      touch.reset();
+      requestFrame(() => {
+        requestFrame(() => {
+          state.moving = false;
+          move({
+            pace: 1,
+            isEmit: true
+          });
+        });
+      });
+    };
+    const to = (index2) => {
+      resettPosition();
+      touch.reset();
+      requestFrame(() => {
+        requestFrame(() => {
+          state.moving = false;
+          let targetIndex;
+          if (props.loop && childCount.value === index2) {
+            targetIndex = state.active === 0 ? 0 : index2;
+          } else {
+            targetIndex = index2 % childCount.value;
+          }
+          move({
+            pace: targetIndex - state.active,
+            isEmit: true
+          });
+        });
+      });
+    };
+    const autoplay = () => {
+      if (props.autoPlay <= 0 || childCount.value <= 1)
+        return;
+      stopAutoPlay();
+      state.autoplayTimer = setTimeout(() => {
+        next();
+        autoplay();
+      }, Number(props.autoPlay));
+    };
+    const init = (active = +props.initPage) => {
+      stopAutoPlay();
+      state.rect = container.value.getBoundingClientRect();
+      active = Math.min(childCount.value - 1, active);
+      state.width = props.width ? +props.width : state.rect.width;
+      state.height = props.height ? +props.height : state.rect.height;
+      state.active = active;
+      state.offset = getOffset(state.active);
+      state.moving = true;
+      getStyle();
+      autoplay();
+    };
+    const onTouchStart = (e) => {
+      if (props.isPreventDefault)
+        e.preventDefault();
+      if (props.isStopPropagation)
+        e.stopPropagation();
+      if (!props.touchable)
+        return;
+      touch.start(e);
+      state.touchTime = Date.now();
+      stopAutoPlay();
+      resettPosition();
+    };
+    const onTouchMove = (e) => {
+      if (props.touchable && state.moving) {
+        touch.move(e);
+        if (isCorrectDirection.value) {
+          move({
+            offset: delTa.value
+          });
+        }
+      }
+    };
+    const onTouchEnd = (e) => {
+      if (!props.touchable || !state.moving)
+        return;
+      const speed = delTa.value / (Date.now() - state.touchTime);
+      const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(delTa.value) > +(size.value / 2).toFixed(2);
+      if (isShouldMove && isCorrectDirection.value) {
+        let pace = 0;
+        const offset = isVertical.value ? touch.state.offsetY : touch.state.offsetX;
+        if (props.loop) {
+          pace = offset > 0 ? delTa.value > 0 ? -1 : 1 : 0;
+        } else {
+          pace = -Math[delTa.value > 0 ? "ceil" : "floor"](delTa.value / size.value);
+        }
+        move({
+          pace,
+          isEmit: true
+        });
+      } else if (delTa.value) {
+        move({ pace: 0 });
+      }
+      state.moving = false;
+      getStyle();
+      autoplay();
+    };
+    provide("parent", {
+      props,
+      size,
+      relation
+    });
+    useExpose({
+      prev,
+      next,
+      to
+    });
+    onMounted(() => {
+      nextTick(() => {
+        init();
+      });
+    });
+    onActivated(() => {
+      nextTick(() => {
+        init();
+      });
+    });
+    onDeactivated(() => {
+      stopAutoPlay();
+    });
+    onBeforeUnmount(() => {
+      stopAutoPlay();
+    });
+    watch(() => props.initPage, (val) => {
+      nextTick(() => {
+        init(Number(val));
+      });
+    });
+    watch(() => state.children.length, () => {
+      nextTick(() => {
+        init(state.active);
+      });
+    });
+    watch(() => props.autoPlay, (val) => {
+      val > 0 ? autoplay() : stopAutoPlay();
+    });
+    return {
+      state,
+      classes,
+      container,
+      componentName,
+      isVertical,
+      slots,
+      activePagination,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    ref: "container",
+    class: normalizeClass(_ctx.classes),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass({
+        [`${_ctx.componentName}-inner`]: true,
+        [`${_ctx.componentName}-vertical`]: _ctx.isVertical
+      }),
+      style: normalizeStyle(_ctx.state.style)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 6),
+    renderSlot(_ctx.$slots, "page"),
+    _ctx.paginationVisible && !_ctx.slots.page ? (openBlock(), createElementBlock("view", {
+      key: 0,
+      class: normalizeClass({
+        [`${_ctx.componentName}-pagination`]: true,
+        [`${_ctx.componentName}-pagination-vertical`]: _ctx.isVertical
+      })
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.state.children.length, (item, index2) => {
+        return openBlock(), createElementBlock("i", {
+          style: normalizeStyle({
+            backgroundColor: _ctx.activePagination === index2 ? _ctx.paginationColor : "#ddd"
+          }),
+          key: index2
+        }, null, 4);
+      }), 128))
+    ], 2)) : createCommentVNode("", true)
+  ], 34);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/SwiperItem.js

@@ -0,0 +1,60 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { getCurrentInstance, inject, reactive, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+function useExpose(apis) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    Object.assign(instance.proxy, apis);
+  }
+}
+const { create, componentName } = createComponent("swiper-item");
+const _sfc_main = create({
+  props: {},
+  setup(props, { slots }) {
+    const parent = inject("parent");
+    parent["relation"](getCurrentInstance());
+    const state = reactive({
+      offset: 0
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const style = computed(() => {
+      const style2 = {};
+      const direction = parent == null ? void 0 : parent.props.direction;
+      if (parent == null ? void 0 : parent.size.value) {
+        style2[direction === "horizontal" ? "width" : "height"] = `${parent == null ? void 0 : parent.size.value}px`;
+      }
+      if (state.offset) {
+        style2["transform"] = `translate${direction === "horizontal" ? "X" : "Y"}(${state.offset}px)`;
+      }
+      return style2;
+    });
+    const setOffset = (offset) => {
+      state.offset = offset;
+    };
+    useExpose({ setOffset });
+    return {
+      style,
+      classes
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.style)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };