@nutui/nutui-react 2.5.2 → 2.6.1

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.5.2 Wed Apr 03 2024 18:19:41 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.1 Fri Apr 19 2024 14:49:31 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1230,7 +1230,7 @@ const defaultProps$1t = {
 };
 const classPrefix$r = "nut-cell-group";
 const CellGroup = (props) => {
-  const { children, className, style, title, description, divider, ...rest } = {
+  const { children, className, title, description, divider, ...rest } = {
     ...defaultProps$1t,
     ...props
   };
@@ -2617,7 +2617,8 @@ const Image$1 = (props) => {
         alt,
         loading: "lazy",
         onLoad: handleLoad,
-        onError: handleError
+        onError: handleError,
+        draggable: props.draggable
       }
     ) : /* @__PURE__ */ React__default.createElement(
       "img",
@@ -2628,7 +2629,8 @@ const Image$1 = (props) => {
         src,
         alt,
         onLoad: handleLoad,
-        onError: handleError
+        onError: handleError,
+        draggable: props.draggable
       }
     ),
     renderLoading(),
@@ -4381,16 +4383,20 @@ function useTouch() {
   const offsetX = useRef(0);
   const offsetY = useRef(0);
   const direction = useRef("");
-  const touchTime = useRef(null);
+  const last = useRef(false);
+  const velocity = useRef(0);
+  const touchTime = useRef(Date.now());
   const isVertical = () => direction.current === "vertical";
   const isHorizontal = () => direction.current === "horizontal";
   const reset = () => {
-    touchTime.current = null;
+    touchTime.current = Date.now();
     deltaX.current = 0;
     deltaY.current = 0;
     offsetX.current = 0;
     offsetY.current = 0;
+    delta.current = 0;
     direction.current = "";
+    last.current = false;
   };
   const start2 = (event) => {
     reset();
@@ -4409,7 +4415,12 @@ function useTouch() {
       direction.current = getDirection(offsetX.current, offsetY.current);
     }
   };
+  const end = (event) => {
+    last.current = true;
+    velocity.current = Math.sqrt(deltaX.current ** 2 + deltaY.current ** 2) / (Date.now() - touchTime.current);
+  };
   return {
+    end,
     move,
     start: start2,
     reset,
@@ -4423,7 +4434,8 @@ function useTouch() {
     offsetY,
     direction,
     isVertical,
-    isHorizontal
+    isHorizontal,
+    last
   };
 }
 const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
@@ -4628,7 +4640,7 @@ const Overlay = (props) => {
 };
 Overlay.defaultProps = defaultOverlayProps;
 Overlay.displayName = "NutOverlay";
-const DataContext$2 = createContext({});
+const DataContext$1 = createContext({});
 const defaultProps$1q = {
   ...ComponentDefaults,
   span: "24",
@@ -4642,7 +4654,7 @@ const Col = (props) => {
   };
   const [colName, setColName] = useState("");
   const [colStyle, setColStyle] = useState({});
-  const { gutter } = useContext(DataContext$2);
+  const { gutter } = useContext(DataContext$1);
   const classs = () => {
     const prefixCls2 = "nut-col";
     return `${prefixCls2} ${prefixCls2}-${span} ${gutter ? `${prefixCls2}-gutter` : ""} ${prefixCls2}-offset-${offset}`;
@@ -4893,7 +4905,7 @@ const Row = (props) => {
   const parentRow = {
     gutter
   };
-  return /* @__PURE__ */ React__default.createElement(DataContext$2.Provider, { value: parentRow }, React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(DataContext$1.Provider, { value: parentRow }, React__default.createElement(
     "div",
     {
       className: classNames(getClasses(), className),
@@ -22786,7 +22798,6 @@ const Video = (props) => {
 };
 Video.defaultProps = defaultProps$j;
 Video.displayName = "NutVideo";
-const DataContext$1 = createContext({});
 const defaultProps$i = {
   total: 3,
   current: 0,
@@ -22820,413 +22831,410 @@ const Indicator = (props) => {
 };
 Indicator.defaultProps = defaultProps$i;
 Indicator.displayName = "NutIndicator";
+const getRefValue = (ref) => {
+  return ref.current;
+};
+const useRefState = (param) => {
+  const ref = useRef(param);
+  const [, setState] = useState(param);
+  const updateState = (p) => {
+    ref.current = p;
+    setState(p);
+  };
+  return [ref, updateState];
+};
+const getPerSlidePosition$1 = (index, position, loop2, count) => {
+  const currentPosition = index * 100 + position;
+  if (loop2) {
+    const cycle = count * 100;
+    const shift = cycle / 2;
+    const nextPosition = (currentPosition + shift) % cycle;
+    const shiftedPosition = (nextPosition < 0 ? nextPosition + cycle : nextPosition) - shift;
+    return `${shiftedPosition}%`;
+  }
+  return `${currentPosition}%`;
+};
+const defaultEffect = (args) => {
+  return React__default.Children.map(args.children, (child, index) => {
+    const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+    return /* @__PURE__ */ React__default.createElement(
+      animated.div,
+      {
+        className: "nut-swiper-slide",
+        style: {
+          [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
+            return getPerSlidePosition$1(index, position, loop2, count);
+          }),
+          [isVertical ? "top" : "left"]: `-${index * 100}%`
+        }
+      },
+      child
+    );
+  });
+};
+const getPerSlidePosition = (index, position, loop2, count) => {
+  const currentPosition = index * 100 + position;
+  if (loop2) {
+    const cycle = count * 100;
+    const shift = cycle / 2;
+    const nextPosition = (currentPosition + shift) % cycle;
+    const shiftedPosition = (nextPosition < 0 ? nextPosition + cycle : nextPosition) - shift;
+    return `${shiftedPosition}%`;
+  }
+  return `${currentPosition}%`;
+};
+const focusEffect = (args) => {
+  return React__default.Children.map(args.children, (child, index) => {
+    const {
+      isVertical,
+      springs,
+      transforms,
+      loop: loop2,
+      count,
+      swiperDirection,
+      dragging,
+      current,
+      effect
+    } = args;
+    return /* @__PURE__ */ React__default.createElement(
+      animated.div,
+      {
+        className: "nut-swiper-slide",
+        style: {
+          [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to(
+            (position) => {
+              return getPerSlidePosition(index, position, loop2, count);
+            }
+          ),
+          [isVertical ? "top" : "left"]: `-${index * 100}%`,
+          scale: springs.s.to((ss) => {
+            const scales = getRefValue(transforms);
+            if (!scales)
+              return 1;
+            const scale = scales[index];
+            const currentRefValue = getRefValue(current);
+            if (dragging === false)
+              ss = 0;
+            const ps = ss * scale;
+            if (index === currentRefValue) {
+              return Math.max(scale - ps, effect.scale);
+            }
+            if (index === currentRefValue + swiperDirection.current) {
+              return Math.min(scale + ps, 1);
+            }
+            return scale;
+          })
+        }
+      },
+      child
+    );
+  });
+};
+const useList = (effect, count, current) => {
+  const [transforms, setTransforms] = useRefState([]);
+  useEffect(() => {
+    setTransforms(
+      Array.from({ length: count }).fill(1).map(
+        (scale, index) => index !== getRefValue(current) ? scale * (effect ? effect.scale : 1) : scale
+      )
+    );
+  }, [count]);
+  return [transforms, setTransforms];
+};
+const updateTransform = (transforms, setTransforms, effect, page) => {
+  setTransforms(
+    getRefValue(transforms).map(
+      (s, index) => (
+        // eslint-disable-next-line no-nested-ternary
+        page === index ? 1 : effect ? effect.scale : 1
+      )
+    )
+  );
+};
 const defaultProps$h = {
-  duration: 500,
-  defaultValue: 0,
-  autoPlay: 0,
   direction: "horizontal",
   indicator: false,
   loop: false,
+  duration: 3e3,
+  autoPlay: false,
+  defaultValue: 0,
   touchable: true,
-  preventDefault: true,
-  stopPropagation: true,
-  center: false,
-  className: ""
+  effect: void 0
 };
-const Swiper = React__default.forwardRef((props, ref) => {
-  const rtl = useRtl();
-  const mergedProps = { ...defaultProps$h, ...props };
-  const {
-    children,
-    direction,
-    className,
-    onChange,
-    defaultValue,
-    indicator,
-    touchable,
-    preventDefault: preventDefault2,
-    stopPropagation,
-    autoPlay,
-    center,
-    ...rest
-  } = mergedProps;
-  const container = useRef(null);
-  const innerRef = useRef(null);
-  const swiperRef = useRef({
-    moving: false,
-    autoplayTimer: null,
-    width: 0,
-    height: 0,
-    offset: 0,
-    size: 0
-  });
-  const touch = useTouch();
-  const isVertical = direction === "vertical";
-  const [rect, setRect] = useState(null);
-  let [active, setActive] = useState(0);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const [childOffset, setChildOffset] = useState([]);
-  const [ready, setReady] = useState(false);
-  let size = isVertical ? height : width;
-  const { swiperItems, swiperItemCount } = useMemo$1(() => {
-    let count = 0;
-    const swiperItems2 = React__default.Children.map(props.children, (child) => {
-      if (!React__default.isValidElement(child))
-        return null;
-      count++;
-      return child;
-    });
-    return {
-      swiperItems: swiperItems2,
-      swiperItemCount: count
-    };
-  }, [props.children]);
-  let trackSize = swiperItemCount * Number(size);
-  const parent = {
-    propSwiper: mergedProps,
-    size
-  };
-  const minOffset = (() => {
-    if (rect) {
-      const base = isVertical ? rect.height : rect.width;
-      return base - Number(size) * swiperItemCount;
-    }
-    return 0;
-  })();
-  const stopAutoPlay = () => {
-    clearTimeout(swiperRef.current.autoplayTimer);
-    swiperRef.current.autoplayTimer = null;
-  };
-  const startPlay = () => {
-    if (Number(mergedProps.autoPlay) <= 0 || swiperItemCount <= 1)
-      return;
-    stopAutoPlay();
-    swiperRef.current.autoplayTimer = setTimeout(() => {
-      next();
-      startPlay();
-    }, Number(mergedProps.autoPlay));
-  };
-  const resetPosition = () => {
-    swiperRef.current.moving = true;
-    if (active <= -1) {
-      move({ pace: swiperItemCount });
-    }
-    if (active >= swiperItemCount) {
-      move({ pace: -swiperItemCount });
-    }
-  };
-  const prev = () => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame$1(() => {
-      requestAniFrame$1(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: -1,
-          isEmit: true
-        });
-      });
-    });
-  };
-  const next = () => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame$1(() => {
-      requestAniFrame$1(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: 1,
-          isEmit: true
-        });
-      });
-    });
-  };
-  const to2 = (index) => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame$1(() => {
-      requestAniFrame$1(() => {
-        swiperRef.current.moving = false;
-        let targetIndex;
-        if (props.loop && swiperItemCount === index) {
-          targetIndex = active === 0 ? 0 : index;
-        } else {
-          targetIndex = index % swiperItemCount;
-        }
-        move({
-          pace: targetIndex - active,
-          isEmit: true
-        });
+const Swiper = React__default.forwardRef(
+  (props, ref) => {
+    const classPrefix2 = "nut-swiper";
+    const {
+      children,
+      direction,
+      indicator,
+      loop: loop2,
+      effect,
+      autoPlay,
+      touchable,
+      defaultValue,
+      duration,
+      style,
+      className
+    } = { ...defaultProps$h, ...props };
+    const isVertical = direction === "vertical";
+    const count = useMemo$1(() => {
+      let c6 = 0;
+      React__default.Children.map(children, (child, index) => {
+        c6 += 1;
       });
-    });
-  };
-  const resize = () => {
-    init(active);
-  };
-  const move = ({
-    pace = 0,
-    offset: offset2 = 0,
-    isEmit = false,
-    movingStatus = false
-  }) => {
-    var _a;
-    if (swiperItemCount <= 1)
-      return;
-    const targetActive = getActive(pace);
-    const targetOffset = getOffset(targetActive, offset2);
-    if (props.loop) {
-      if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-        const rightBound = targetOffset < minOffset;
-        childOffset[0] = rightBound ? trackSize : 0;
+      return c6;
+    }, [children]);
+    const getSlideSize = () => {
+      if (props.slideSize)
+        return props.slideSize;
+      if (stageRef.current) {
+        if (isVertical)
+          return stageRef.current.offsetHeight;
+        return stageRef.current.offsetWidth;
       }
-      if (Array.isArray(children) && children[swiperItemCount - 1] && targetOffset !== 0) {
-        const leftBound = targetOffset > 0;
-        childOffset[swiperItemCount - 1] = leftBound ? -trackSize : 0;
-      }
-      setChildOffset(childOffset);
-    }
-    if (isEmit && active !== targetActive) {
-      (_a = props.onChange) == null ? void 0 : _a.call(props, (targetActive + swiperItemCount) % swiperItemCount);
-    }
-    active = targetActive;
-    setActive(targetActive);
-    setOffset(targetOffset);
-    getStyle(targetOffset);
-  };
-  React__default.useImperativeHandle(ref, () => ({
-    to: to2,
-    next,
-    prev,
-    resize
-  }));
-  const getActive = (pace) => {
-    if (pace) {
-      const _active = active + pace;
-      if (props.loop) {
-        return range3(_active, -1, swiperItemCount);
+      return 0;
+    };
+    const getSwiperSize = () => {
+      if (swiperRef.current) {
+        if (isVertical)
+          return swiperRef.current.offsetHeight;
+        return swiperRef.current.offsetWidth;
       }
-      return range3(_active, 0, swiperItemCount - 1);
-    }
-    return active;
-  };
-  const getOffset = (active2, offset2 = 0) => {
-    let currentPosition = active2 * Number(size);
-    if (!props.loop) {
-      currentPosition = Math.min(currentPosition, -minOffset);
-    }
-    let targetOffset = offset2 - currentPosition;
-    if (!props.loop) {
-      targetOffset = range3(targetOffset, minOffset, 0);
-    }
-    return targetOffset;
-  };
-  const range3 = (num, min, max) => {
-    return Math.min(Math.max(num, min), max);
-  };
-  const classPrefix2 = "nut-swiper";
-  const contentClass = classNames({
-    [`${classPrefix2}-inner`]: true,
-    [`${classPrefix2}-vertical`]: isVertical
-  });
-  const getStyle = (moveOffset = offset) => {
-    const target = innerRef.current;
-    if (!target)
-      return;
-    let _offset = 0;
-    if (!center) {
-      _offset = moveOffset;
-    } else {
-      const _size = isVertical ? height : width;
-      const val = isVertical ? rect.height - _size : rect.width - _size;
-      _offset = moveOffset + (active === swiperItemCount - 1 && !props.loop ? -val / 2 : val / 2);
-    }
-    target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
-    target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
-    target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-    target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
-  };
-  const onTouchStart = (e2) => {
-    if (!props.touchable)
-      return;
-    touch.start(e2);
-    stopAutoPlay();
-    resetPosition();
-  };
-  const onTouchMove = (e2) => {
-    if (props.preventDefault)
-      e2.preventDefault();
-    if (props.stopPropagation)
-      e2.stopPropagation();
-    if (props.touchable && swiperRef.current.moving) {
-      touch.move(e2);
-      if (touch.direction.current === props.direction) {
-        move({
-          offset: touch.delta.current
-        });
+      return 0;
+    };
+    const bound2 = (v, min, max) => {
+      if (min !== void 0) {
+        v = Math.max(v, min);
       }
-    }
-  };
-  const onTouchEnd = (e2) => {
-    if (!props.touchable || !swiperRef.current.moving)
-      return;
-    const speed = touch.delta.current / (Date.now() - touch.touchTime.current);
-    const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta.current) > Number((size / 2).toFixed(2));
-    swiperRef.current.moving = false;
-    if (isShouldMove && touch.direction.current === props.direction) {
-      let pace = 0;
-      const offset2 = touch.isVertical() ? touch.offsetY : touch.offsetX;
-      if (props.loop) {
-        if (offset2.current > 0) {
-          pace = touch.delta.current > 0 ? -1 : 1;
-        }
-      } else {
-        pace = -Math[touch.delta.current > 0 ? "ceil" : "floor"](
-          touch.delta.current / size
-        );
+      if (max !== void 0) {
+        v = Math.min(v, max);
       }
-      move({
-        pace,
-        isEmit: true
+      return v;
+    };
+    const timeoutRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [current, setCurrent] = useRefState(defaultValue);
+    const stageRef = useRef(null);
+    const swiperRef = useRef(null);
+    const [springs, api] = useSpring(() => ({
+      x: !isVertical ? current.current * 100 * -1 : 0,
+      y: isVertical ? current.current * 100 * -1 : 0,
+      s: 0,
+      reset: () => {
+      },
+      config: { tension: 200, friction: 30 }
+    }));
+    useEffect(() => {
+      api.start({
+        [isVertical ? "y" : "x"]: boundIndex(current.current) * -1 * 100,
+        immediate: true
       });
-    } else if (touch.delta.current) {
-      move({ pace: 0 });
-    } else {
-      getStyle();
-    }
-    startPlay();
-  };
-  const getItemStyle = (index) => {
-    const style = {};
-    if (size) {
-      style[direction === "horizontal" ? "width" : "height"] = `${size}px`;
-    }
-    const offset2 = childOffset[index];
-    if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
-    }
-    return style;
-  };
-  const init = (index) => {
-    const rect2 = getRect(container == null ? void 0 : container.current);
-    const currentIndex = Math.max(
-      Math.min(swiperItemCount - 1, index || Number(mergedProps.defaultValue)),
-      0
-    );
-    const width2 = Number(mergedProps.width) || rect2.width;
-    const height2 = Number(mergedProps.height) || rect2.height;
-    size = isVertical ? height2 : width2;
-    trackSize = swiperItemCount * Number(size);
-    const targetOffset = getOffset(currentIndex);
-    swiperRef.current.moving = true;
-    if (ready) {
-      swiperRef.current.moving = false;
-    }
-    setRect(rect2);
-    setActive(currentIndex);
-    setWidth(width2);
-    setHeight(height2);
-    setOffset(targetOffset);
-    setReady(true);
-  };
-  useEffect(() => {
-    if (ready) {
-      getStyle();
-    }
-  }, [isVertical, width, height, offset, ready]);
-  useEffect(() => {
-    if (ready) {
-      stopAutoPlay();
-      startPlay();
-    }
-    return () => setReady(false);
-  }, [ready]);
-  useEffect(() => {
-    const events = [
-      { name: "touchstart", e: onTouchStart },
-      { name: "touchmove", e: onTouchMove },
-      { name: "touchend", e: onTouchEnd }
-    ];
-    events.forEach((item) => {
+    }, [swiperRef.current]);
+    const swiperDirection = useRef(1);
+    const [transforms, setTransforms] = useList(effect, count, current);
+    const runTimeSwiper = () => {
+      const durationNumber = typeof duration === "string" ? parseInt(duration) : duration;
+      const d = typeof autoPlay === "number" ? autoPlay : durationNumber;
+      timeoutRef.current = window.setTimeout(() => {
+        next();
+        runTimeSwiper();
+      }, d);
+    };
+    useEffect(() => {
+      if (!autoPlay || dragging)
+        return;
+      runTimeSwiper();
+      return () => {
+        if (timeoutRef.current)
+          window.clearTimeout(timeoutRef.current);
+      };
+    }, [autoPlay, duration, dragging, count]);
+    function boundIndex(current2) {
+      const min = 0;
+      const max = count - 1;
+      if (current2 === max && !loop2 && props.slideSize) {
+        const slideSize = props.slideSize;
+        const swiperSize = getSwiperSize();
+        const ratio = (swiperSize - slideSize) / slideSize;
+        return bound2(current2, min, max - ratio);
+      }
+      return current2;
+    }
+    const to2 = (index, immediate = false) => {
       var _a;
-      (_a = container.current) == null ? void 0 : _a.addEventListener(item.name, item.e, false);
-    });
-    return () => {
-      events.forEach((item) => {
-        var _a;
-        (_a = container.current) == null ? void 0 : _a.removeEventListener(item.name, item.e, false);
+      let targetIndex = bound2(index, 0, count - 1);
+      if (loop2) {
+        const cycleIndex = index % count;
+        targetIndex = cycleIndex < 0 ? cycleIndex + count : cycleIndex;
+      }
+      setCurrent(targetIndex);
+      (_a = props.onChange) == null ? void 0 : _a.call(props, targetIndex);
+      if (effect) {
+        updateTransform(transforms, setTransforms, effect, targetIndex);
+      }
+      api.start({
+        // 这里需要统一成百分比
+        [isVertical ? "y" : "x"]: (loop2 ? -index : boundIndex(targetIndex) * -1) * 100,
+        s: 0,
+        immediate
       });
     };
-  });
-  useEffect(() => init(), [props.defaultValue]);
-  useEffect(() => {
-    return () => stopAutoPlay();
-  }, []);
-  const renderIndicator = () => {
-    if (React__default.isValidElement(indicator))
-      return indicator;
-    if (!indicator)
-      return null;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: classNames({
-          [`${classPrefix2}-indicator`]: true,
-          [`${classPrefix2}-indicator-vertical`]: isVertical
-        })
+    const getSpringsAxis = () => {
+      return springs[isVertical ? "y" : "x"];
+    };
+    const next = () => {
+      to2(Math.round(-getSpringsAxis().get() / 100) + 1);
+    };
+    const prev = () => {
+      to2(Math.round(-getSpringsAxis().get() / 100) - 1);
+    };
+    React__default.useImperativeHandle(ref, () => ({
+      to: to2,
+      next,
+      prev
+    }));
+    const bind = useDrag(
+      (state) => {
+        const axis = Number(isVertical);
+        const slideSize = getSlideSize();
+        const offset = state.offset[axis];
+        setDragging(!!state.dragging);
+        const distance = state.distance[axis];
+        swiperDirection.current = state.direction[axis];
+        if (state.last) {
+          const swipeDirection = state.direction[axis];
+          const velocity = state.velocity[axis];
+          const minIndex = Math.floor(offset / slideSize);
+          const maxIndex = minIndex + 1;
+          const index = Math.round(
+            (offset + velocity * 2e3 * swipeDirection) / slideSize
+          );
+          to2(bound2(index, minIndex, maxIndex));
+        } else {
+          api.start({
+            [isVertical ? "y" : "x"]: -(offset / slideSize * 100),
+            s: distance / slideSize,
+            immediate: true
+          });
+        }
       },
-      /* @__PURE__ */ React__default.createElement(
-        Indicator,
-        {
-          current: (active + swiperItemCount) % swiperItemCount,
-          total: swiperItems == null ? void 0 : swiperItems.length,
-          direction
+      {
+        enabled: touchable,
+        transform: ([x, y]) => [-x, -y],
+        from: () => {
+          const slideSize = getSlideSize();
+          const x = springs.x.get() / 100 * slideSize;
+          const y = springs.y.get() / 100 * slideSize;
+          return [-x, -y];
+        },
+        triggerAllEvents: true,
+        bounds: () => {
+          if (loop2)
+            return {};
+          const slideSize = getSlideSize();
+          getSwiperSize();
+          if (isVertical) {
+            return { top: 0, bottom: (count - 1) * slideSize };
+          }
+          return { left: 0, right: (count - 1) * slideSize };
+        },
+        preventDefault: true,
+        rubberband: true,
+        axis: isVertical ? "y" : "x",
+        pointer: {
+          touch: true
         }
-      )
+      }
     );
-  };
-  return /* @__PURE__ */ React__default.createElement(DataContext$1.Provider, { value: parent }, /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: classNames(classPrefix2, className),
-      ref: container,
-      ...rest
-    },
-    /* @__PURE__ */ React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(swiperItems, (child, index) => /* @__PURE__ */ React__default.createElement(
+    const renderIndicator = () => {
+      if (React__default.isValidElement(indicator))
+        return indicator;
+      if (!indicator)
+        return null;
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: classNames({
+            [`${classPrefix2}-indicator`]: true,
+            [`${classPrefix2}-indicator-vertical`]: isVertical,
+            [`${classPrefix2}-indicator-horizontal`]: !isVertical
+          })
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Indicator,
+          {
+            current: getRefValue(current),
+            total: count,
+            direction
+          }
+        )
+      );
+    };
+    const renderEffect = () => {
+      if (!effect)
+        return defaultEffect({
+          children,
+          getSpringsAxis,
+          loop: loop2,
+          count,
+          isVertical
+        });
+      if (effect && effect.name === "focus") {
+        return focusEffect({
+          children,
+          springs,
+          loop: loop2,
+          count,
+          isVertical,
+          effect,
+          current,
+          swiperDirection,
+          dragging,
+          transforms
+        });
+      }
+    };
+    const renderSlides = () => {
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: stageRef,
+          className: classNames("nut-swiper-inner", {
+            "nut-swiper-inner-vertical": isVertical,
+            "nut-swiper-inner-horizontal": !isVertical
+          }),
+          style: {
+            ...props.slideSize ? { [isVertical ? "height" : "width"]: `${props.slideSize}px` } : {}
+          }
+        },
+        renderEffect()
+      );
+    };
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: `${classPrefix2}-item-wrapper`,
-        style: getItemStyle(index),
-        key: index
+        className: classNames("nut-swiper", className),
+        style,
+        ref: swiperRef,
+        ...bind()
       },
-      child
-    ))),
-    renderIndicator()
-  ));
-});
+      renderSlides(),
+      renderIndicator()
+    );
+  }
+);
 Swiper.defaultProps = defaultProps$h;
 Swiper.displayName = "NutSwiper";
 const defaultProps$g = {
-  direction: "horizontal"
+  onClick: (e2) => void 0
 };
-const SwiperItem = React__default.forwardRef((props, ref) => {
+const SwiperItem = (props) => {
   const classPrefix2 = "nut-swiper-item";
-  const _props = { ...defaultProps$g, ...props };
-  const { className, style, children, direction, size } = _props;
-  const parent = useContext(DataContext$1);
+  const { className, style, children } = { ...defaultProps$g, ...props };
   const classes = classNames(classPrefix2, className);
-  const getStyle = () => {
-    const style2 = {};
-    const _direction = (parent == null ? void 0 : parent.propSwiper.direction) || direction;
-    const _size = (parent == null ? void 0 : parent.size) || size;
-    if (_size) {
-      style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
-    }
-    return style2;
-  };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, style: { ...style, ...getStyle() } }, children);
-});
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, onClick: props.onClick, style }, children);
+};
 SwiperItem.defaultProps = defaultProps$g;
 SwiperItem.displayName = "NutSwiperItem";
 const InnerSwiper = Swiper;
@@ -23402,6 +23410,7 @@ const ImagePreview = (props) => {
       onCloseInner();
     }
   };
+  const duration = typeof autoPlay === "string" ? parseInt(autoPlay) : autoPlay;
   return /* @__PURE__ */ React__default.createElement(
     Popup,
     {
@@ -23419,15 +23428,14 @@ const ImagePreview = (props) => {
         onClick: closeOnImg,
         onTouchStart
       },
-      /* @__PURE__ */ React__default.createElement(
+      showPop ? /* @__PURE__ */ React__default.createElement(
         InnerSwiper,
         {
-          autoPlay,
+          autoPlay: !!duration,
+          duration,
           className: `${classPrefix2}-swiper`,
           loop: true,
-          preventDefault: false,
           style: {
-            display: showPop ? "block" : "none",
             "--nutui-indicator-color": indicatorColor
           },
           direction: "horizontal",
@@ -23439,10 +23447,10 @@ const ImagePreview = (props) => {
           return /* @__PURE__ */ React__default.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React__default.createElement(Video, { source: item.source, options: item.options }));
         }) : []).concat(
           images && images.length > 0 ? images.map((item, index) => {
-            return /* @__PURE__ */ React__default.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React__default.createElement(Image$1, { src: item.src }));
+            return /* @__PURE__ */ React__default.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React__default.createElement(Image$1, { src: item.src, draggable: false }));
           }) : []
         )
-      )
+      ) : null
     ),
     /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)),
     closeIcon !== false ? /* @__PURE__ */ React__default.createElement(