@nutui/nutui-react 1.4.0 → 1.4.1

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.4.0-beta.1 Wed Dec 21 2022 14:29:34 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.4.1-beta.0 Wed Dec 28 2022 16:47:00 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -425,7 +425,7 @@
   })(classnames);
   var classNames = classnames.exports;
   const defaultOverlayProps = {
-    zIndex: 2e3,
+    zIndex: 1e3,
     duration: 0.3,
     overlayClass: "",
     closeOnClickOverlay: true,
@@ -996,7 +996,7 @@
     },
     ...defaultOverlayProps
   };
-  let _zIndex = 2e3;
+  let _zIndex = 1e3;
   const Popup = (props) => {
     const {
       children,
@@ -7731,7 +7731,7 @@
       ])
     }, tabTitle)));
   };
-  function clamp(v, min, max) {
+  function clamp$1(v, min, max) {
     return Math.max(min, Math.min(v, max));
   }
   const V = {
@@ -7762,7 +7762,7 @@
   }
   function rubberbandIfOutOfBounds$1(position, min, max, constant = 0.15) {
     if (constant === 0)
-      return clamp(position, min, max);
+      return clamp$1(position, min, max);
     if (position < min)
       return -rubberband$1(min - position, max - min, constant) + min;
     if (position > max)
@@ -8651,15 +8651,14 @@
     pointerCapture(_v, _k, {
       pointer: {
         capture = true,
-        buttons = 1
+        buttons = 1,
+        keys = true
       } = {}
     }) {
       this.pointerButtons = buttons;
+      this.keys = keys;
       return !this.pointerLock && this.device === "pointer" && capture;
     },
-    keys(value = true) {
-      return value;
-    },
     threshold(value, _k, {
       filterTaps = false,
       tapsThreshold = 3,
@@ -9260,7 +9259,7 @@
       return value;
     }
   };
-  const _excluded$4 = ["target", "eventOptions", "window", "enabled", "transform"];
+  const _excluded$3 = ["target", "eventOptions", "window", "enabled", "transform"];
   function resolveWith(config2 = {}, resolvers) {
     const result = {};
     for (const [key, resolver] of Object.entries(resolvers)) {
@@ -9288,7 +9287,7 @@
       window: window2,
       enabled,
       transform
-    } = _ref, rest = _objectWithoutProperties(_ref, _excluded$4);
+    } = _ref, rest = _objectWithoutProperties(_ref, _excluded$3);
     _config.shared = resolveWith({
       target,
       eventOptions,
@@ -9889,6 +9888,7 @@
     const index = arr.findIndex(test);
     return index < 0 ? arr.length : index;
   }
+  const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
   const colors = {
     transparent: 0,
     aliceblue: 4042850303,
@@ -10210,6 +10210,64 @@
         break;
     return i - 1;
   }
+  const steps = (steps2, direction = "end") => (progress) => {
+    progress = direction === "end" ? Math.min(progress, 0.999) : Math.max(progress, 1e-3);
+    const expanded = progress * steps2;
+    const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
+    return clamp(0, 1, rounded / steps2);
+  };
+  const c1 = 1.70158;
+  const c2 = c1 * 1.525;
+  const c3 = c1 + 1;
+  const c4 = 2 * Math.PI / 3;
+  const c5 = 2 * Math.PI / 4.5;
+  const bounceOut = (x) => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (x < 1 / d1) {
+      return n1 * x * x;
+    } else if (x < 2 / d1) {
+      return n1 * (x -= 1.5 / d1) * x + 0.75;
+    } else if (x < 2.5 / d1) {
+      return n1 * (x -= 2.25 / d1) * x + 0.9375;
+    } else {
+      return n1 * (x -= 2.625 / d1) * x + 0.984375;
+    }
+  };
+  const easings = {
+    linear: (x) => x,
+    easeInQuad: (x) => x * x,
+    easeOutQuad: (x) => 1 - (1 - x) * (1 - x),
+    easeInOutQuad: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
+    easeInCubic: (x) => x * x * x,
+    easeOutCubic: (x) => 1 - Math.pow(1 - x, 3),
+    easeInOutCubic: (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
+    easeInQuart: (x) => x * x * x * x,
+    easeOutQuart: (x) => 1 - Math.pow(1 - x, 4),
+    easeInOutQuart: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
+    easeInQuint: (x) => x * x * x * x * x,
+    easeOutQuint: (x) => 1 - Math.pow(1 - x, 5),
+    easeInOutQuint: (x) => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
+    easeInSine: (x) => 1 - Math.cos(x * Math.PI / 2),
+    easeOutSine: (x) => Math.sin(x * Math.PI / 2),
+    easeInOutSine: (x) => -(Math.cos(Math.PI * x) - 1) / 2,
+    easeInExpo: (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+    easeOutExpo: (x) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+    easeInOutExpo: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
+    easeInCirc: (x) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+    easeOutCirc: (x) => Math.sqrt(1 - Math.pow(x - 1, 2)),
+    easeInOutCirc: (x) => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
+    easeInBack: (x) => c3 * x * x * x - c1 * x * x,
+    easeOutBack: (x) => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
+    easeInOutBack: (x) => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+    easeInElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
+    easeOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+    easeInOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
+    easeInBounce: (x) => 1 - bounceOut(1 - x),
+    easeOutBounce: bounceOut,
+    easeInOutBounce: (x) => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+    steps
+  };
   function _extends$3() {
     _extends$3 = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -10891,57 +10949,6 @@
       friction: 120
     }
   };
-  const c1 = 1.70158;
-  const c2 = c1 * 1.525;
-  const c3 = c1 + 1;
-  const c4 = 2 * Math.PI / 3;
-  const c5 = 2 * Math.PI / 4.5;
-  const bounceOut = (x) => {
-    const n1 = 7.5625;
-    const d1 = 2.75;
-    if (x < 1 / d1) {
-      return n1 * x * x;
-    } else if (x < 2 / d1) {
-      return n1 * (x -= 1.5 / d1) * x + 0.75;
-    } else if (x < 2.5 / d1) {
-      return n1 * (x -= 2.25 / d1) * x + 0.9375;
-    } else {
-      return n1 * (x -= 2.625 / d1) * x + 0.984375;
-    }
-  };
-  const easings = {
-    linear: (x) => x,
-    easeInQuad: (x) => x * x,
-    easeOutQuad: (x) => 1 - (1 - x) * (1 - x),
-    easeInOutQuad: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
-    easeInCubic: (x) => x * x * x,
-    easeOutCubic: (x) => 1 - Math.pow(1 - x, 3),
-    easeInOutCubic: (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
-    easeInQuart: (x) => x * x * x * x,
-    easeOutQuart: (x) => 1 - Math.pow(1 - x, 4),
-    easeInOutQuart: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
-    easeInQuint: (x) => x * x * x * x * x,
-    easeOutQuint: (x) => 1 - Math.pow(1 - x, 5),
-    easeInOutQuint: (x) => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
-    easeInSine: (x) => 1 - Math.cos(x * Math.PI / 2),
-    easeOutSine: (x) => Math.sin(x * Math.PI / 2),
-    easeInOutSine: (x) => -(Math.cos(Math.PI * x) - 1) / 2,
-    easeInExpo: (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
-    easeOutExpo: (x) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
-    easeInOutExpo: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
-    easeInCirc: (x) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
-    easeOutCirc: (x) => Math.sqrt(1 - Math.pow(x - 1, 2)),
-    easeInOutCirc: (x) => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
-    easeInBack: (x) => c3 * x * x * x - c1 * x * x,
-    easeOutBack: (x) => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
-    easeInOutBack: (x) => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
-    easeInElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
-    easeOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
-    easeInOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
-    easeInBounce: (x) => 1 - bounceOut(1 - x),
-    easeOutBounce: bounceOut,
-    easeInOutBounce: (x) => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2
-  };
   const defaults = _extends$1({}, config.default, {
     mass: 1,
     damping: 1,
@@ -11137,7 +11144,7 @@
       };
       const animate = (arg1, arg2) => {
         const bailSignal = new BailSignal();
-        const skipAnimationSignal = new SkipAniamtionSignal();
+        const skipAnimationSignal = new SkipAnimationSignal();
         return (async () => {
           if (globals.skipAnimation) {
             stopAsync(state);
@@ -11186,7 +11193,7 @@
       } catch (err) {
         if (err instanceof BailSignal) {
           result = err.result;
-        } else if (err instanceof SkipAniamtionSignal) {
+        } else if (err instanceof SkipAnimationSignal) {
           result = err.result;
         } else {
           throw err;
@@ -11220,7 +11227,7 @@
       this.result = void 0;
     }
   }
-  class SkipAniamtionSignal extends Error {
+  class SkipAnimationSignal extends Error {
     constructor() {
       super("SkipAnimationSignal");
       this.result = void 0;
@@ -12251,11 +12258,11 @@
     }
     return target;
   }
-  const _excluded$3 = ["children"];
+  const _excluded$6 = ["children"];
   const SpringContext = (_ref) => {
     let {
       children
-    } = _ref, props = _objectWithoutPropertiesLoose$1(_ref, _excluded$3);
+    } = _ref, props = _objectWithoutPropertiesLoose$1(_ref, _excluded$6);
     const inherited = React.useContext(ctx);
     const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
     props = useMemoOne(() => ({
@@ -12558,7 +12565,7 @@
     }
     return target;
   }
-  const _excluded$2 = ["style", "children", "scrollTop", "scrollLeft"];
+  const _excluded$2 = ["style", "children", "scrollTop", "scrollLeft", "viewBox"];
   const isCustomPropRE = /^--/;
   function dangerousStyleValue(name, value) {
     if (value == null || typeof value === "boolean" || value === "")
@@ -12577,7 +12584,8 @@
       style,
       children,
       scrollTop,
-      scrollLeft
+      scrollLeft,
+      viewBox
     } = _ref, attributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     const values = Object.values(attributes);
     const names = Object.keys(attributes).map((name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, (n) => "-" + n.toLowerCase())));
@@ -12603,6 +12611,9 @@
     if (scrollLeft !== void 0) {
       instance.scrollLeft = scrollLeft;
     }
+    if (viewBox !== void 0) {
+      instance.setAttribute("viewBox", viewBox);
+    }
   }
   let isUnitlessNumber = {
     animationIterationCount: true,
@@ -14110,7 +14121,6 @@
       button,
       vertical,
       marks,
-      change,
       dragStart,
       dragEnd,
       onChange,
@@ -14131,7 +14141,7 @@
     const root = React.useRef(null);
     const [marksList, SetMarksList] = React.useState([]);
     React.useEffect(() => {
-      if (modelValue) {
+      if (typeof modelValue === "number") {
         if (!range2 && (modelValue < min || modelValue > max)) {
           SetInitValue(0);
           Toast.text(`${modelValue} ${locale.range.rangeText}`);
@@ -14281,7 +14291,6 @@
         SetInitValue(value);
       }
       if ((marks || end) && !isSameValue(value, startValue)) {
-        change && change(value);
         onChange && onChange(value);
       }
     };
@@ -16584,7 +16593,8 @@
         `${disabled ? `${prefixCls}-disabled` : ""}`,
         `${required2 ? `${prefixCls}-required` : ""}`,
         `${error ? `${prefixCls}-error` : ""}`,
-        `${border ? `${prefixCls}-border` : ""}`
+        `${border ? `${prefixCls}-border` : ""}`,
+        `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ""}`
       ].filter(Boolean).join(" ");
     }, [disabled, required2, error, border]);
     const updateValue = (value, trigger = "onChange") => {
@@ -16759,7 +16769,7 @@
       onClick: (e2) => {
         handleClear(e2);
       }
-    }) : null, rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    }) : null), rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-right-icon",
       onClick: (e2) => {
         handleClickRightIcon(e2);
@@ -16771,7 +16781,7 @@
       size: rightIconSize
     })) : null, slotButton ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-button"
-    }, slotButton) : null), showWordLimit && maxlength ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, slotButton) : null, showWordLimit && maxlength ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-word-limit"
     }, /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "nut-input-word-num"
@@ -22193,6 +22203,7 @@
     autoPlay: 0,
     direction: "horizontal",
     paginationColor: "#fff",
+    paginationBgColor: "#ddd",
     paginationVisible: false,
     loop: true,
     touchable: true,
@@ -22447,10 +22458,10 @@
         const val = isVertical ? rect.height - _size : rect.width - _size;
         _offset = moveOffset + (active === childCount - 1 && !props.loop ? -val / 2 : val / 2);
       }
-      target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
       target.style.transitionDuration = `${_swiper.current.moving ? 0 : props.duration}ms`;
       target.style[isVertical ? "height" : "width"] = `${Number(size) * childCount}px`;
       target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
+      target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
     };
     const onTouchStart = (e2) => {
       if (props.isPreventDefault)
@@ -22604,9 +22615,10 @@
       return /* @__PURE__ */ React__default["default"].createElement("i", {
         style: (active + childCount) % childCount === index ? {
           backgroundColor: propSwiper.paginationColor
-        } : void 0,
+        } : {
+          backgroundColor: propSwiper.paginationBgColor
+        },
         className: classNames({
-          [`${b("pagination-item")}`]: true,
           active: (active + childCount) % childCount === index
         }),
         key: index

package/dist/packages/input/input.scss

@@ -112,6 +112,21 @@ textarea {
     flex: 1;
     vertical-align: middle;
   }
+  &-right-mark {
+    .nut-input-value {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .nut-input-inner {
+      flex: 1;
+    }
+    .nut-input-button,
+    .nut-input-right-icon {
+      width: auto;
+    }
+  }
   &-inner {
     position: relative;
     display: flex;

package/dist/packages/searchbar/searchbar.scss

@@ -34,7 +34,6 @@
   padding: 0 20px;
 }
 .nut-searchbar {
-  position: relative;
   display: flex;
   align-items: center;
   width: $searchbar-width;
@@ -45,21 +44,19 @@
   &__content {
     position: relative;
     flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $searchbar-input-height;
   }
   &__icon {
     position: absolute !important;
-    z-index: 888;
-    transform: translate(-50%, -50%);
-    width: 15px;
-    overflow: hidden;
   }
   &__leftin-icon {
-    left: 15px;
-    top: 53%;
+    left: 10px;
   }
   &__rightin-icon {
     right: 5px;
-    top: 53%;
   }
   .nut-searchbar__input-box {
     display: flex;
@@ -70,14 +67,12 @@
     border: 0;
     outline: 0;
     box-sizing: border-box;
-
     width: $searchbar-input-width;
     height: $searchbar-input-height;
     width: 100%;
     padding: $searchbar-input-padding;
     border-radius: 0;
     font-size: $font-size-small;
-    // box-shadow: $searchbar-input-box-shadow;
     background: $searchbar-input-background;
     color: $searchbar-input-text-color;
   }
@@ -90,9 +85,7 @@
   &__clear {
     position: absolute !important;
     z-index: 888;
-    right: 3px;
-    top: 47%;
-    transform: translate(-50%, -40%);
+    right: 8px;
     i {
       color: $gray1 !important;
     }

package/dist/packages/swiper/swiper.scss

@@ -30,9 +30,6 @@
       }
     }
   }
-  &__pagination-item {
-    background-color: $swiper-pagination-item-background-color;
-  }
   &__pagination-vertical {
     top: 50%;
     left: 12px;