@nutui/nutui-react 2.5.2 → 2.6.1

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @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.
 */
@@ -1248,7 +1248,7 @@ Check the top-level render call using <` + t2 + ">.");
   };
   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
     };
@@ -2635,7 +2635,8 @@ Check the top-level render call using <` + t2 + ">.");
           alt,
           loading: "lazy",
           onLoad: handleLoad,
-          onError: handleError
+          onError: handleError,
+          draggable: props.draggable
         }
       ) : /* @__PURE__ */ React.createElement(
         "img",
@@ -2646,7 +2647,8 @@ Check the top-level render call using <` + t2 + ">.");
           src,
           alt,
           onLoad: handleLoad,
-          onError: handleError
+          onError: handleError,
+          draggable: props.draggable
         }
       ),
       renderLoading(),
@@ -4399,16 +4401,20 @@ Check the top-level render call using <` + t2 + ">.");
     const offsetX = React.useRef(0);
     const offsetY = React.useRef(0);
     const direction = React.useRef("");
-    const touchTime = React.useRef(null);
+    const last = React.useRef(false);
+    const velocity = React.useRef(0);
+    const touchTime = React.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();
@@ -4427,7 +4433,12 @@ Check the top-level render call using <` + t2 + ">.");
         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,
@@ -4441,7 +4452,8 @@ Check the top-level render call using <` + t2 + ">.");
       offsetY,
       direction,
       isVertical,
-      isHorizontal
+      isHorizontal,
+      last
     };
   }
   const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
@@ -4646,7 +4658,7 @@ Check the top-level render call using <` + t2 + ">.");
   };
   Overlay.defaultProps = defaultOverlayProps;
   Overlay.displayName = "NutOverlay";
-  const DataContext$2 = React.createContext({});
+  const DataContext$1 = React.createContext({});
   const defaultProps$1q = {
     ...ComponentDefaults,
     span: "24",
@@ -4660,7 +4672,7 @@ Check the top-level render call using <` + t2 + ">.");
     };
     const [colName, setColName] = React.useState("");
     const [colStyle, setColStyle] = React.useState({});
-    const { gutter } = React.useContext(DataContext$2);
+    const { gutter } = React.useContext(DataContext$1);
     const classs = () => {
       const prefixCls2 = "nut-col";
       return `${prefixCls2} ${prefixCls2}-${span} ${gutter ? `${prefixCls2}-gutter` : ""} ${prefixCls2}-offset-${offset}`;
@@ -4911,7 +4923,7 @@ Check the top-level render call using <` + t2 + ">.");
     const parentRow = {
       gutter
     };
-    return /* @__PURE__ */ React.createElement(DataContext$2.Provider, { value: parentRow }, React.createElement(
+    return /* @__PURE__ */ React.createElement(DataContext$1.Provider, { value: parentRow }, React.createElement(
       "div",
       {
         className: classNames(getClasses(), className),
@@ -22804,7 +22816,6 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Video.defaultProps = defaultProps$j;
   Video.displayName = "NutVideo";
-  const DataContext$1 = React.createContext({});
   const defaultProps$i = {
     total: 3,
     current: 0,
@@ -22838,413 +22849,410 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Indicator.defaultProps = defaultProps$i;
   Indicator.displayName = "NutIndicator";
+  const getRefValue = (ref) => {
+    return ref.current;
+  };
+  const useRefState = (param) => {
+    const ref = React.useRef(param);
+    const [, setState] = React.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.Children.map(args.children, (child, index) => {
+      const { isVertical, getSpringsAxis, loop: loop2, count } = args;
+      return /* @__PURE__ */ React.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.Children.map(args.children, (child, index) => {
+      const {
+        isVertical,
+        springs,
+        transforms,
+        loop: loop2,
+        count,
+        swiperDirection,
+        dragging,
+        current,
+        effect
+      } = args;
+      return /* @__PURE__ */ React.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([]);
+    React.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.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 = React.useRef(null);
-    const innerRef = React.useRef(null);
-    const swiperRef = React.useRef({
-      moving: false,
-      autoplayTimer: null,
-      width: 0,
-      height: 0,
-      offset: 0,
-      size: 0
-    });
-    const touch = useTouch();
-    const isVertical = direction === "vertical";
-    const [rect, setRect] = React.useState(null);
-    let [active, setActive] = React.useState(0);
-    const [width, setWidth] = React.useState(0);
-    const [height, setHeight] = React.useState(0);
-    const [offset, setOffset] = React.useState(0);
-    const [childOffset, setChildOffset] = React.useState([]);
-    const [ready, setReady] = React.useState(false);
-    let size = isVertical ? height : width;
-    const { swiperItems, swiperItemCount } = React.useMemo(() => {
-      let count = 0;
-      const swiperItems2 = React.Children.map(props.children, (child) => {
-        if (!React.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.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 = React.useMemo(() => {
+        let c6 = 0;
+        React.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.useImperativeHandle(ref, () => ({
-      to: to2,
-      next,
-      prev,
-      resize
-    }));
-    const getActive = (pace) => {
-      if (pace) {
-        const _active = active + pace;
-        if (props.loop) {
-          return range2(_active, -1, swiperItemCount);
+        return 0;
+      };
+      const getSwiperSize = () => {
+        if (swiperRef.current) {
+          if (isVertical)
+            return swiperRef.current.offsetHeight;
+          return swiperRef.current.offsetWidth;
         }
-        return range2(_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 = range2(targetOffset, minOffset, 0);
-      }
-      return targetOffset;
-    };
-    const range2 = (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 = React.useRef(null);
+      const [dragging, setDragging] = React.useState(false);
+      const [current, setCurrent] = useRefState(defaultValue);
+      const stageRef = React.useRef(null);
+      const swiperRef = React.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 }
+      }));
+      React.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);
-    };
-    React.useEffect(() => {
-      if (ready) {
-        getStyle();
-      }
-    }, [isVertical, width, height, offset, ready]);
-    React.useEffect(() => {
-      if (ready) {
-        stopAutoPlay();
-        startPlay();
-      }
-      return () => setReady(false);
-    }, [ready]);
-    React.useEffect(() => {
-      const events = [
-        { name: "touchstart", e: onTouchStart },
-        { name: "touchmove", e: onTouchMove },
-        { name: "touchend", e: onTouchEnd }
-      ];
-      events.forEach((item) => {
+      }, [swiperRef.current]);
+      const swiperDirection = React.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);
+      };
+      React.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
         });
       };
-    });
-    React.useEffect(() => init(), [props.defaultValue]);
-    React.useEffect(() => {
-      return () => stopAutoPlay();
-    }, []);
-    const renderIndicator = () => {
-      if (React.isValidElement(indicator))
-        return indicator;
-      if (!indicator)
-        return null;
-      return /* @__PURE__ */ React.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.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.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.createElement(DataContext$1.Provider, { value: parent }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(classPrefix2, className),
-        ref: container,
-        ...rest
-      },
-      /* @__PURE__ */ React.createElement("div", { className: contentClass, ref: innerRef }, React.Children.map(swiperItems, (child, index) => /* @__PURE__ */ React.createElement(
+      const renderIndicator = () => {
+        if (React.isValidElement(indicator))
+          return indicator;
+        if (!indicator)
+          return null;
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames({
+              [`${classPrefix2}-indicator`]: true,
+              [`${classPrefix2}-indicator-vertical`]: isVertical,
+              [`${classPrefix2}-indicator-horizontal`]: !isVertical
+            })
+          },
+          /* @__PURE__ */ React.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.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.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.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 = React.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.createElement("div", { className: classes, style: { ...style, ...getStyle() } }, children);
-  });
+    return /* @__PURE__ */ React.createElement("div", { className: classes, onClick: props.onClick, style }, children);
+  };
   SwiperItem.defaultProps = defaultProps$g;
   SwiperItem.displayName = "NutSwiperItem";
   const InnerSwiper = Swiper;
@@ -23420,6 +23428,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onCloseInner();
       }
     };
+    const duration = typeof autoPlay === "string" ? parseInt(autoPlay) : autoPlay;
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
@@ -23437,15 +23446,14 @@ Please add \`${key}Action\` when creating your handler.`);
           onClick: closeOnImg,
           onTouchStart
         },
-        /* @__PURE__ */ React.createElement(
+        showPop ? /* @__PURE__ */ React.createElement(
           InnerSwiper,
           {
-            autoPlay,
+            autoPlay: !!duration,
+            duration,
             className: `${classPrefix2}-swiper`,
             loop: true,
-            preventDefault: false,
             style: {
-              display: showPop ? "block" : "none",
               "--nutui-indicator-color": indicatorColor
             },
             direction: "horizontal",
@@ -23457,10 +23465,10 @@ Please add \`${key}Action\` when creating your handler.`);
             return /* @__PURE__ */ React.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React.createElement(Video, { source: item.source, options: item.options }));
           }) : []).concat(
             images && images.length > 0 ? images.map((item, index) => {
-              return /* @__PURE__ */ React.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React.createElement(Image$1, { src: item.src }));
+              return /* @__PURE__ */ React.createElement(SwiperItem, { key: index }, /* @__PURE__ */ React.createElement(Image$1, { src: item.src, draggable: false }));
             }) : []
           )
-        )
+        ) : null
       ),
       /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)),
       closeIcon !== false ? /* @__PURE__ */ React.createElement(