@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Swiper.js

@@ -1,11 +1,12 @@
-import { ref as Q, reactive as Z, computed as s, provide as _, onDeactivated as ee, onBeforeUnmount as te, watch as E, nextTick as Y, openBlock as P, createElementBlock as b, normalizeClass as S, createElementVNode as ne, normalizeStyle as L, renderSlot as j, Fragment as oe, renderList as ae, createCommentVNode as ie } from "vue";
-import { c as le, e as B } from "./component-234624bc.js";
-import { u as re } from "./index-53ec2d4d.js";
-import { u as ue } from "./index-fadb0974.js";
-import { r as k } from "./raf-a74f1a06.js";
-import { _ as se } from "./_plugin-vue_export-helper-dad06003.js";
+import { ref, reactive, computed, provide, onDeactivated, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
+import { c as createComponent, e as clamp } from "./component-81a4c1d0.js";
+import { u as useTouch } from "./index-7a7385e4.js";
+import { u as useExpose } from "./index-79c5dc33.js";
+import { r as requestAniFrame } from "./raf-729dad54.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { create: ce, componentName: M } = le("swiper"), fe = ce({
+const { create, componentName } = createComponent("swiper");
+const _sfc_main = create({
   props: {
     width: {
       type: [Number, String],
@@ -22,7 +23,7 @@ const { create: ce, componentName: M } = le("swiper"), fe = ce({
     },
     paginationVisible: {
       type: Boolean,
-      default: !1
+      default: false
     },
     paginationColor: {
       type: String,
@@ -30,7 +31,7 @@ const { create: ce, componentName: M } = le("swiper"), fe = ce({
     },
     loop: {
       type: Boolean,
-      default: !0
+      default: true
     },
     duration: {
       type: [Number, String],
@@ -46,225 +47,361 @@ const { create: ce, componentName: M } = le("swiper"), fe = ce({
     },
     touchable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     isPreventDefault: {
       type: Boolean,
-      default: !0
+      default: true
     },
     isStopPropagation: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   emits: ["change"],
-  setup(n, { emit: c, slots: p }) {
-    const N = Q(), e = Z({
+  setup(props, { emit, slots }) {
+    const container = ref();
+    const state = reactive({
       active: 0,
       num: 0,
       rect: null,
       width: 0,
       height: 0,
-      moving: !1,
+      moving: false,
       offset: 0,
       touchTime: 0,
       autoplayTimer: null,
       children: [],
       childrenVNode: [],
       style: {}
-    }), f = re(), v = s(() => ({
-      [M]: !0
-    })), l = s(() => n.direction === "vertical"), q = s(() => {
-      const t = M;
+    });
+    const touch = useTouch();
+    const classes = computed(() => {
+      const prefixCls = componentName;
       return {
-        [`${t}-inner`]: !0,
-        [`${t}-vertical`]: l.value
+        [prefixCls]: true
       };
-    }), R = s(() => {
-      const t = M;
+    });
+    const isVertical = computed(() => props.direction === "vertical");
+    const classesInner = computed(() => {
+      const prefixCls = componentName;
       return {
-        [`${t}-pagination`]: !0,
-        [`${t}-pagination-vertical`]: l.value
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-vertical`]: isVertical.value
       };
-    }), h = s(() => l.value ? f.deltaY.value : f.deltaX.value), D = s(() => f.direction.value === n.direction), i = s(() => e.children.length), d = s(() => e[l.value ? "height" : "width"]), A = s(() => i.value * d.value), T = s(() => e.rect ? (l.value ? e.rect.height : e.rect.width) - d.value * i.value : 0), O = s(() => (e.active + i.value) % i.value), $ = () => {
-      let t = 0;
-      t = e.offset, e.style = {
-        transitionDuration: `${e.moving ? 0 : n.duration}ms`,
-        transform: `translate${l.value ? "Y" : "X"}(${t}px)`,
-        [l.value ? "height" : "width"]: `${d.value * i.value}px`,
-        [l.value ? "width" : "height"]: `${l.value ? e.width : e.height}px`
+    });
+    const classesPagination = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-pagination`]: true,
+        [`${prefixCls}-pagination-vertical`]: isVertical.value
+      };
+    });
+    const delTa = computed(() => {
+      return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
+    });
+    const isCorrectDirection = computed(() => {
+      return touch.direction.value === 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 = () => {
+      let offset = 0;
+      offset = state.offset;
+      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`
       };
-    }, U = (t) => {
-      var m;
-      let o = [];
-      const u = e.childrenVNode.length;
-      let r = (m = p == null ? void 0 : p.default) == null ? void 0 : m.call(p);
-      if (r = r.filter((a) => a.children && Array.isArray(a.children)), r.forEach((a) => {
-        o = o.concat(a.children);
-      }), !u)
-        e.childrenVNode = o.slice(), t.proxy && e.children.push(t.proxy);
-      else if (u > o.length)
-        e.children = e.children.filter((a) => t.proxy !== a);
-      else if (u < o.length) {
-        for (let a = 0; a < u; a++)
-          if (o[a].key !== e.childrenVNode[a].key) {
-            t.proxy && e.children.splice(a, 0, t.proxy), t.vnode && e.childrenVNode.splice(a, 0, t.vnode);
-            break;
+    };
+    const relation = (child) => {
+      var _a;
+      let children = [];
+      const childrenVNodeLen = state.childrenVNode.length;
+      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);
+      });
+      if (!childrenVNodeLen) {
+        state.childrenVNode = children.slice();
+        child.proxy && state.children.push(child.proxy);
+      } else {
+        if (childrenVNodeLen > children.length) {
+          state.children = state.children.filter((item) => child.proxy !== item);
+        } else if (childrenVNodeLen < children.length) {
+          for (let i = 0; i < childrenVNodeLen; 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;
+            }
           }
-        u !== o.length && (t.proxy && e.children.push(t.proxy), t.vnode && e.childrenVNode.push(t.vnode));
-      } else
-        e.childrenVNode = o.slice(), t.proxy && e.children.push(t.proxy);
-    }, z = (t, o = 0) => {
-      let u = t * d.value;
-      n.loop || (u = Math.min(u, -T.value));
-      let r = o - u;
-      return n.loop || (r = B(r, T.value, 0)), r;
-    }, W = (t) => {
-      const { active: o } = e;
-      return t ? n.loop ? B(o + t, -1, i.value) : B(o + t, 0, i.value - 1) : o;
-    }, g = ({ pace: t = 0, offset: o = 0, isEmit: u = !1 }) => {
-      if (i.value <= 1)
+          if (childrenVNodeLen !== 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 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 = clamp(targetOffset, minOffset.value, 0);
+      }
+      return targetOffset;
+    };
+    const getActive = (pace) => {
+      const { active } = state;
+      if (pace) {
+        if (props.loop) {
+          return clamp(active + pace, -1, childCount.value);
+        }
+        return clamp(active + pace, 0, childCount.value - 1);
+      }
+      return active;
+    };
+    const move = ({ pace = 0, offset = 0, isEmit = false }) => {
+      if (childCount.value <= 1)
         return;
-      const { active: r } = e, m = W(t), a = z(m, o);
-      if (n.loop) {
-        if (e.children[0] && a !== T.value) {
-          const V = a < T.value;
-          e.children[0].setOffset(V ? A.value : 0);
+      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 (e.children[i.value - 1] && a !== 0) {
-          const V = a > 0;
-          e.children[i.value - 1].setOffset(V ? -A.value : 0);
+        if (state.children[childCount.value - 1] && targetOffset !== 0) {
+          const leftBound = targetOffset > 0;
+          state.children[childCount.value - 1].setOffset(leftBound ? -trackSize.value : 0);
         }
       }
-      e.active = m, e.offset = a, u && r !== e.active && c("change", O.value), $();
-    }, C = () => {
-      e.moving = !0, e.active <= -1 && g({ pace: i.value }), e.active >= i.value && g({ pace: -i.value });
-    }, y = () => {
-      e.autoplayTimer && clearTimeout(e.autoplayTimer);
-    }, F = (t) => {
-      C(), f.reset(), k(() => {
-        k(() => {
-          e.moving = !1, g({
-            pace: t,
-            isEmit: !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 = () => {
+      if (state.autoplayTimer) {
+        clearTimeout(state.autoplayTimer);
+      }
+    };
+    const jump = (pace) => {
+      resettPosition();
+      touch.reset();
+      requestAniFrame(() => {
+        requestAniFrame(() => {
+          state.moving = false;
+          move({
+            pace,
+            isEmit: true
           });
         });
       });
-    }, x = () => {
-      F(-1);
-    }, I = () => {
-      F(1);
-    }, G = (t) => {
-      C(), f.reset(), k(() => {
-        e.moving = !1;
-        let o;
-        n.loop && i.value === t ? o = e.active === 0 ? 0 : t : o = t % i.value, g({
-          pace: o - e.active,
-          isEmit: !0
+    };
+    const prev = () => {
+      jump(-1);
+    };
+    const next = () => {
+      jump(1);
+    };
+    const to = (index) => {
+      resettPosition();
+      touch.reset();
+      requestAniFrame(() => {
+        state.moving = false;
+        let targetIndex;
+        if (props.loop && childCount.value === index) {
+          targetIndex = state.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % childCount.value;
+        }
+        move({
+          pace: targetIndex - state.active,
+          isEmit: true
         });
       });
-    }, w = () => {
-      n.autoPlay <= 0 || i.value <= 1 || (y(), e.autoplayTimer = setTimeout(() => {
-        I(), w();
-      }, Number(n.autoPlay)));
-    }, X = (t = +n.initPage) => {
-      y(), e.rect = N.value.getBoundingClientRect(), t = Math.min(i.value - 1, t), e.width = n.width ? +n.width : e.rect.width, e.height = n.height ? +n.height : e.rect.height, e.active = t, e.offset = z(e.active), e.moving = !0, $(), w();
-    }, H = (t) => {
-      n.isPreventDefault && t.preventDefault(), n.isStopPropagation && t.stopPropagation(), n.touchable && (f.start(t), e.touchTime = Date.now(), y(), C());
-    }, J = (t) => {
-      n.touchable && e.moving && (f.move(t), D.value && g({
-        offset: h.value
-      }));
-    }, K = (t) => {
-      if (!n.touchable || !e.moving)
+    };
+    const autoplay = () => {
+      if (props.autoPlay <= 0 || childCount.value <= 1)
         return;
-      const o = h.value / (Date.now() - e.touchTime);
-      if ((Math.abs(o) > 0.3 || Math.abs(h.value) > +(d.value / 2).toFixed(2)) && D.value) {
-        let r = 0;
-        const m = l.value ? f.offsetY.value : f.offsetX.value;
-        n.loop ? r = m > 0 ? h.value > 0 ? -1 : 1 : 0 : r = -Math[h.value > 0 ? "ceil" : "floor"](h.value / d.value), g({
-          pace: r,
-          isEmit: !0
+      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.offsetY.value : touch.offsetX.value;
+        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
-        h.value && g({ pace: 0 });
-      e.moving = !1, $(), w();
+      } else if (delTa.value) {
+        move({ pace: 0 });
+      }
+      state.moving = false;
+      getStyle();
+      autoplay();
     };
-    return _("parent", {
-      props: n,
-      size: d,
-      relation: U
-    }), ue({
-      prev: x,
-      next: I,
-      to: G
-    }), ee(() => {
-      y();
-    }), te(() => {
-      y();
-    }), E(
-      () => n.initPage,
-      (t) => {
-        Y(() => {
-          X(Number(t));
+    provide("parent", {
+      props,
+      size,
+      relation
+    });
+    useExpose({
+      prev,
+      next,
+      to
+    });
+    onDeactivated(() => {
+      stopAutoPlay();
+    });
+    onBeforeUnmount(() => {
+      stopAutoPlay();
+    });
+    watch(
+      () => props.initPage,
+      (val) => {
+        nextTick(() => {
+          init(Number(val));
         });
       }
-    ), E(
-      () => e.children.length,
+    );
+    watch(
+      () => state.children.length,
       () => {
-        Y(() => {
-          X();
+        nextTick(() => {
+          init();
         });
       }
-    ), E(
-      () => n.autoPlay,
-      (t) => {
-        t > 0 ? w() : y();
+    );
+    watch(
+      () => props.autoPlay,
+      (val) => {
+        val > 0 ? autoplay() : stopAutoPlay();
       }
-    ), {
-      state: e,
-      classes: v,
-      classesInner: q,
-      classesPagination: R,
-      container: N,
-      activePagination: O,
-      onTouchStart: H,
-      onTouchMove: J,
-      onTouchEnd: K
+    );
+    return {
+      state,
+      classes,
+      classesInner,
+      classesPagination,
+      container,
+      activePagination,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
     };
   }
 });
-function ve(n, c, p, N, e, f) {
-  return P(), b("view", {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
     ref: "container",
-    class: S(n.classes),
-    onTouchstart: c[0] || (c[0] = (...v) => n.onTouchStart && n.onTouchStart(...v)),
-    onTouchmove: c[1] || (c[1] = (...v) => n.onTouchMove && n.onTouchMove(...v)),
-    onTouchend: c[2] || (c[2] = (...v) => n.onTouchEnd && n.onTouchEnd(...v)),
-    onTouchcancel: c[3] || (c[3] = (...v) => n.onTouchEnd && n.onTouchEnd(...v))
+    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))
   }, [
-    ne("view", {
-      class: S(n.classesInner),
-      style: L(n.state.style)
+    createElementVNode("view", {
+      class: normalizeClass(_ctx.classesInner),
+      style: normalizeStyle(_ctx.state.style)
     }, [
-      j(n.$slots, "default")
+      renderSlot(_ctx.$slots, "default")
     ], 6),
-    j(n.$slots, "page"),
-    n.paginationVisible && !n.$slots.page ? (P(), b("view", {
+    renderSlot(_ctx.$slots, "page"),
+    _ctx.paginationVisible && !_ctx.$slots.page ? (openBlock(), createElementBlock("view", {
       key: 0,
-      class: S(n.classesPagination)
+      class: normalizeClass(_ctx.classesPagination)
     }, [
-      (P(!0), b(oe, null, ae(n.state.children.length, (v, l) => (P(), b("i", {
-        style: L({
-          backgroundColor: n.activePagination === l ? n.paginationColor : "#ddd"
-        }),
-        class: S({ active: n.activePagination === l }),
-        key: l
-      }, null, 6))), 128))
-    ], 2)) : ie("", !0)
+      (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);
 }
-const we = /* @__PURE__ */ se(fe, [["render", ve]]);
+const Swiper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  we as default
+  Swiper as default
 };

package/dist/packages/_es/SwiperItem.js

@@ -1,39 +1,55 @@
-import { inject as p, getCurrentInstance as c, reactive as m, computed as a, onUnmounted as u, openBlock as d, createElementBlock as $, normalizeClass as h, normalizeStyle as z, renderSlot as _ } from "vue";
-import { c as x } from "./component-234624bc.js";
-import { u as y } from "./index-fadb0974.js";
-import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
+import { inject, getCurrentInstance, reactive, computed, onUnmounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { u as useExpose } from "./index-79c5dc33.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { create: v, componentName: w } = x("swiper-item"), S = v({
-  setup(s, { slots: l }) {
-    const e = p("parent");
-    e.relation(c());
-    const o = m({
+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
-    }), r = a(() => ({
-      [w]: !0
-    })), n = a(() => {
-      const t = {}, i = e == null ? void 0 : e.props.direction;
-      return e != null && e.size.value && (t[i === "horizontal" ? "width" : "height"] = `${e == null ? void 0 : e.size.value}px`), o.offset && (t.transform = `translate${i === "horizontal" ? "X" : "Y"}(${o.offset}px)`), t;
-    }), f = (t) => {
-      o.offset = t;
+    });
+    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;
     };
-    return u(() => {
-      e.relation(c(), "unmount");
-    }), y({ setOffset: f }), {
-      style: n,
-      classes: r
+    onUnmounted(() => {
+      parent["relation"](getCurrentInstance(), "unmount");
+    });
+    useExpose({ setOffset });
+    return {
+      style,
+      classes
     };
   }
 });
-function g(s, l, e, o, r, n) {
-  return d(), $("view", {
-    class: h(s.classes),
-    style: z(s.style)
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.style)
   }, [
-    _(s.$slots, "default")
+    renderSlot(_ctx.$slots, "default")
   ], 6);
 }
-const N = /* @__PURE__ */ C(S, [["render", g]]);
+const SwiperItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  N as default
+  SwiperItem as default
 };