@nutui/nutui 3.1.22 → 3.1.23-beta.2

package/dist/packages/_es/Swiper.js

@@ -1,137 +1,460 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, ref as t, computed as a, provide as o, onDeactivated as i, onBeforeUnmount as l, watch as n, nextTick as r, openBlock as c, createElementBlock as u, normalizeClass as s, createElementVNode as h, normalizeStyle as d, renderSlot as v, Fragment as p, renderList as f, createCommentVNode as m } from "vue";
-import { c as g } from "./component.js";
-import { u as y } from "./index3.js";
-import { _ as N } from "./plugin-vue_export-helper.js";
+import { reactive, ref, computed, provide, onDeactivated, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useExpose } from "./index3.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: w, componentName: T } = g("swiper");
-var b = N(w({ 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(c2, { emit: u2, slots: s2 }) {
-  const h2 = t(), d2 = e({ active: 0, num: 0, rect: null, width: 0, height: 0, moving: false, offset: 0, touchTime: 0, autoplayTimer: 0, children: [], childrenVNode: [], style: {} }), v2 = function() {
-    const t2 = e({ startX: 0, startY: 0, deltaX: 0, deltaY: 0, offsetX: 0, offsetY: 0, direction: "" }), a2 = () => {
-      t2.startX = 0, t2.startY = 0, t2.deltaX = 0, t2.deltaY = 0, t2.offsetX = 0, t2.offsetY = 0, t2.direction = "";
-    };
-    return { state: t2, start: (e2) => {
-      a2(), t2.startX = e2.touches[0].clientX, t2.startY = e2.touches[0].clientY;
-    }, reset: a2, move: (e2) => {
-      var a3, o2;
-      t2.deltaX = e2.touches[0].clientX - t2.startX, t2.deltaY = e2.touches[0].clientY - t2.startY, t2.offsetX = Math.abs(t2.deltaX), t2.offsetY = Math.abs(t2.deltaY), t2.direction || (t2.direction = (a3 = t2.offsetX) > (o2 = t2.offsetY) && a3 > 5 ? "horizontal" : o2 > a3 && o2 > 5 ? "vertical" : "");
-    } };
-  }(), p2 = a(() => ({ [T]: true })), f2 = a(() => c2.direction === "vertical"), m2 = a(() => f2.value ? v2.state.deltaY : v2.state.deltaX), g2 = a(() => v2.state.direction === c2.direction), N2 = a(() => d2.children.length), w2 = a(() => d2[f2.value ? "height" : "width"]), b2 = a(() => N2.value * w2.value), x = a(() => {
-    if (d2.rect) {
-      return (f2.value ? d2.rect.height : d2.rect.width) - w2.value * N2.value;
+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 0;
-  }), X = a(() => (d2.active + N2.value) % N2.value), Y = () => {
-    d2.style = { transitionDuration: `${d2.moving ? 0 : c2.duration}ms`, transform: `translate${f2.value ? "Y" : "X"}(${d2.offset}px)`, [f2.value ? "height" : "width"]: w2.value * N2.value + "px", [f2.value ? "width" : "height"]: `${f2.value ? d2.width : d2.height}px` };
-  }, V = (e2, t2, a2) => Math.min(Math.max(e2, t2), a2), P = (e2) => {
-    window.requestAnimationFrame.call(window, e2);
-  }, M = (e2, t2 = 0) => {
-    let a2 = e2 * w2.value;
-    c2.loop || (a2 = Math.min(a2, -x.value));
-    let o2 = t2 - a2;
-    return c2.loop || (o2 = V(o2, x.value, 0)), o2;
-  }, S = ({ pace: e2 = 0, offset: t2 = 0, isEmit: a2 = false }) => {
-    if (N2.value <= 1)
-      return;
-    const { active: o2 } = d2, i2 = ((e3) => {
-      const { active: t3 } = d2;
-      return e3 ? c2.loop ? V(t3 + e3, -1, N2.value) : V(t3 + e3, 0, N2.value - 1) : t3;
-    })(e2), l2 = M(i2, t2);
-    if (c2.loop) {
-      if (d2.children[0] && l2 !== x.value) {
-        const e3 = l2 < x.value;
-        d2.children[0].setOffset(e3 ? b2.value : 0);
+  };
+  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
+    },
+    isCenter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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: [],
+      childrenVNode: [],
+      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;
       }
-      if (d2.children[N2.value - 1] && l2 !== 0) {
-        const e3 = l2 > 0;
-        d2.children[N2.value - 1].setOffset(e3 ? -b2.value : 0);
+      return 0;
+    });
+    const activePagination = computed(() => (state.active + childCount.value) % childCount.value);
+    const getStyle = () => {
+      let offset = 0;
+      if (!props.isCenter) {
+        offset = state.offset;
+      } else {
+        let val = isVertical.value ? state.rect.height - size.value : state.rect.width - size.value;
+        offset = state.offset + (state.active === childCount.value - 1 ? -val / 2 : val / 2);
       }
-    }
-    d2.active = i2, d2.offset = l2, a2 && o2 !== d2.active && u2("change", X.value), Y();
-  }, E = () => {
-    d2.moving = true, d2.active <= -1 && S({ pace: N2.value }), d2.active >= N2.value && S({ pace: -N2.value });
-  }, $ = () => {
-    clearTimeout(d2.autoplayTimer);
-  }, k = () => {
-    E(), v2.reset(), P(() => {
-      P(() => {
-        d2.moving = false, S({ pace: 1, isEmit: true });
+      state.style = {
+        transitionDuration: `${state.moving ? 0 : props.duration}ms`,
+        transform: `translate${isVertical.value ? "Y" : "X"}(${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) => {
+      var _a;
+      let children = [];
+      let slot = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots);
+      slot = slot.filter((item) => item.children && Array.isArray(item.children));
+      slot.forEach((item) => {
+        children = children.concat(item.children);
       });
-    });
-  }, B = () => {
-    c2.autoPlay <= 0 || N2.value <= 1 || ($(), d2.autoplayTimer = setTimeout(() => {
-      k(), B();
-    }, Number(c2.autoPlay)));
-  }, D = (e2 = +c2.initPage) => {
-    $(), d2.rect = h2.value.getBoundingClientRect(), e2 = Math.min(N2.value - 1, e2), d2.width = c2.width ? +c2.width : d2.rect.width, d2.height = c2.height ? +c2.height : d2.rect.height, d2.active = e2, d2.offset = M(d2.active), d2.moving = true, Y(), B();
-  };
-  return o("parent", { props: c2, size: w2, relation: (e2) => {
-    var _a;
-    let t2 = [], a2 = (_a = s2 == null ? void 0 : s2.default) == null ? void 0 : _a.call(s2);
-    if (a2 = a2.filter((e3) => e3.children && Array.isArray(e3.children)), a2.forEach((e3) => {
-      t2 = t2.concat(e3.children);
-    }), d2.childrenVNode.length)
-      if (d2.childrenVNode.length > t2.length)
-        d2.children = d2.children.filter((t3) => e2.proxy !== t3);
-      else if (d2.childrenVNode.length < t2.length) {
-        for (let a3 = 0; a3 < d2.childrenVNode.length; a3++)
-          if (t2[a3].key !== d2.childrenVNode[a3].key) {
-            e2.proxy && d2.children.splice(a3, 0, e2.proxy), e2.vnode && d2.childrenVNode.splice(a3, 0, e2.vnode);
-            break;
+      if (!state.childrenVNode.length) {
+        state.childrenVNode = children.slice();
+        child.proxy && state.children.push(child.proxy);
+      } else {
+        if (state.childrenVNode.length > children.length) {
+          state.children = state.children.filter((item) => child.proxy !== item);
+        } else if (state.childrenVNode.length < children.length) {
+          for (let i = 0; i < state.childrenVNode.length; i++) {
+            if (children[i].key !== state.childrenVNode[i].key) {
+              child.proxy && state.children.splice(i, 0, child.proxy);
+              child.vnode && state.childrenVNode.splice(i, 0, child.vnode);
+              break;
+            }
+          }
+          if (state.childrenVNode.length !== children.length) {
+            child.proxy && state.children.push(child.proxy);
+            child.vnode && state.childrenVNode.push(child.vnode);
+          }
+        } else {
+          state.childrenVNode = children.slice();
+          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 = (index) => {
+      resettPosition();
+      touch.reset();
+      requestFrame(() => {
+        requestFrame(() => {
+          state.moving = false;
+          let targetIndex;
+          if (props.loop && childCount.value === index) {
+            targetIndex = state.active === 0 ? 0 : index;
+          } else {
+            targetIndex = index % childCount.value;
           }
-        d2.childrenVNode.length !== t2.length && (e2.proxy && d2.children.push(e2.proxy), e2.vnode && d2.childrenVNode.push(e2.vnode));
-      } else
-        d2.childrenVNode = t2.slice(), e2.proxy && d2.children.push(e2.proxy);
-    else
-      d2.childrenVNode = t2.slice(), e2.proxy && d2.children.push(e2.proxy);
-  } }), y({ prev: () => {
-    E(), v2.reset(), P(() => {
-      P(() => {
-        d2.moving = false, S({ pace: -1, isEmit: true });
+          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
+    });
+    onDeactivated(() => {
+      stopAutoPlay();
     });
-  }, next: k, to: (e2) => {
-    E(), v2.reset(), P(() => {
-      P(() => {
-        let t2;
-        d2.moving = false, t2 = c2.loop && N2.value === e2 ? d2.active === 0 ? 0 : e2 : e2 % N2.value, S({ pace: t2 - d2.active, isEmit: true });
+    onBeforeUnmount(() => {
+      stopAutoPlay();
+    });
+    watch(() => props.initPage, (val) => {
+      nextTick(() => {
+        init(Number(val));
       });
     });
-  } }), i(() => {
-    $();
-  }), l(() => {
-    $();
-  }), n(() => c2.initPage, (e2) => {
-    r(() => {
-      D(Number(e2));
+    watch(() => state.children.length, () => {
+      nextTick(() => {
+        init();
+      });
     });
-  }), n(() => d2.children.length, () => {
-    r(() => {
-      D();
+    watch(() => props.autoPlay, (val) => {
+      val > 0 ? autoplay() : stopAutoPlay();
     });
-  }), n(() => c2.autoPlay, (e2) => {
-    e2 > 0 ? B() : $();
-  }), { state: d2, classes: p2, container: h2, componentName: T, isVertical: f2, slots: s2, activePagination: X, onTouchStart: (e2) => {
-    c2.isPreventDefault && e2.preventDefault(), c2.isStopPropagation && e2.stopPropagation(), c2.touchable && (v2.start(e2), d2.touchTime = Date.now(), $(), E());
-  }, onTouchMove: (e2) => {
-    c2.touchable && d2.moving && (v2.move(e2), g2.value && S({ offset: m2.value }));
-  }, onTouchEnd: (e2) => {
-    if (!c2.touchable || !d2.moving)
-      return;
-    const t2 = m2.value / (Date.now() - d2.touchTime);
-    if ((Math.abs(t2) > 0.3 || Math.abs(m2.value) > +(w2.value / 2).toFixed(2)) && g2.value) {
-      let e3 = 0;
-      const t3 = f2.value ? v2.state.offsetY : v2.state.offsetX;
-      e3 = c2.loop ? t3 > 0 ? m2.value > 0 ? -1 : 1 : 0 : -Math[m2.value > 0 ? "ceil" : "floor"](m2.value / w2.value), S({ pace: e3, isEmit: true });
-    } else
-      m2.value && S({ pace: 0 });
-    d2.moving = false, Y(), B();
-  } };
-} }), [["render", function(e2, t2, a2, o2, i2, l2) {
-  return c(), u("view", { ref: "container", class: s(e2.classes), onTouchstart: t2[0] || (t2[0] = (...t3) => e2.onTouchStart && e2.onTouchStart(...t3)), onTouchmove: t2[1] || (t2[1] = (...t3) => e2.onTouchMove && e2.onTouchMove(...t3)), onTouchend: t2[2] || (t2[2] = (...t3) => e2.onTouchEnd && e2.onTouchEnd(...t3)), onTouchcancel: t2[3] || (t2[3] = (...t3) => e2.onTouchEnd && e2.onTouchEnd(...t3)) }, [h("view", { class: s({ [`${e2.componentName}-inner`]: true, [`${e2.componentName}-vertical`]: e2.isVertical }), style: d(e2.state.style) }, [v(e2.$slots, "default")], 6), v(e2.$slots, "page"), e2.paginationVisible && !e2.slots.page ? (c(), u("view", { key: 0, class: s({ [`${e2.componentName}-pagination`]: true, [`${e2.componentName}-pagination-vertical`]: e2.isVertical }) }, [(c(true), u(p, null, f(e2.state.children.length, (t3, a3) => (c(), u("i", { style: d({ backgroundColor: e2.activePagination === a3 ? e2.paginationColor : "#ddd" }), class: s({ active: e2.activePagination === a3 }), key: a3 }, null, 6))), 128))], 2)) : m("", true)], 34);
-}]]);
-export { b as default };
+    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, index) => {
+        return openBlock(), createElementBlock("i", {
+          style: normalizeStyle({
+            backgroundColor: _ctx.activePagination === index ? _ctx.paginationColor : "#ddd"
+          }),
+          class: normalizeClass({ active: _ctx.activePagination === index }),
+          key: index
+        }, null, 6);
+      }), 128))
+    ], 2)) : createCommentVNode("", true)
+  ], 34);
+}
+var Swiper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Swiper as default };

package/dist/packages/_es/SwiperItem.js

@@ -1,27 +1,58 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject as e, getCurrentInstance as t, reactive as s, computed as o, onUnmounted as r, openBlock as n, createElementBlock as a, normalizeClass as l, normalizeStyle as i, renderSlot as f } from "vue";
-import { c as p } from "./component.js";
-import { u as m } from "./index3.js";
-import { _ as u } from "./plugin-vue_export-helper.js";
+import { inject, getCurrentInstance, reactive, computed, onUnmounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useExpose } from "./index3.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: c, componentName: d } = p("swiper-item");
-var h = u(c({ setup(n2, { slots: a2 }) {
-  const l2 = e("parent");
-  l2.relation(t());
-  const i2 = s({ offset: 0 }), f2 = o(() => ({ [d]: true })), p2 = o(() => {
-    const e2 = {}, t2 = l2 == null ? void 0 : l2.props.direction;
-    return (l2 == null ? void 0 : l2.size.value) && (e2[t2 === "horizontal" ? "width" : "height"] = `${l2 == null ? void 0 : l2.size.value}px`), i2.offset && (e2.transform = `translate${t2 === "horizontal" ? "X" : "Y"}(${i2.offset}px)`), e2;
-  });
-  return r(() => {
-    l2.relation(t(), "unmount");
-  }), m({ setOffset: (e2) => {
-    i2.offset = e2;
-  } }), { style: p2, classes: f2 };
-} }), [["render", function(e2, t2, s2, o2, r2, p2) {
-  return n(), a("view", { class: l(e2.classes), style: i(e2.style) }, [f(e2.$slots, "default")], 6);
-}]]);
-export { h as default };
+const { create, componentName } = createComponent("swiper-item");
+const _sfc_main = create({
+  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;
+    };
+    onUnmounted(() => {
+      parent["relation"](getCurrentInstance(), "unmount");
+    });
+    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 SwiperItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { SwiperItem as default };