@nutui/nutui-react 1.3.9 → 1.3.10

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.9-beta.0 Wed Nov 02 2022 15:15:31 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.10 Wed Nov 09 2022 13:49:01 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -250,7 +250,9 @@
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
       name: icon
-    }) : "", children));
+    }) : "", /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "text"
+    }, children)));
   };
   Button.defaultProps = defaultProps$1k;
   Button.displayName = "NutButton";
@@ -3258,7 +3260,7 @@
     ...ComponentDefaults,
     dot: false,
     size: "",
-    classPrefix: "nut-icon",
+    className: "",
     tabTitle: "",
     icon: "",
     href: "",
@@ -3275,7 +3277,8 @@
     const {
       dot,
       size,
-      classPrefix,
+      className,
+      style,
       tabTitle,
       icon,
       href,
@@ -3305,8 +3308,9 @@
       }
     }, [active, history, href, to2]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2({ active })}`,
+      className: `${b2({ active })} ${className}`,
       style: {
+        ...style,
         color: active ? activeColor : unactiveColor
       },
       onClick: () => {
@@ -4297,6 +4301,17 @@
       return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
     }
   });
+  function clampStateInternalMovementToBounds(state) {
+    const [ox, oy] = state.overflow;
+    const [dx, dy] = state._delta;
+    const [dirx, diry] = state._direction;
+    if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
+      state._movement[0] = state._movementBound[0];
+    }
+    if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
+      state._movement[1] = state._movementBound[1];
+    }
+  }
   const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
   const PINCH_WHEEL_RATIO = 100;
   class PinchEngine extends Engine {
@@ -4526,6 +4541,7 @@
       const state = this.state;
       state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
       V.addTo(state._movement, state._delta);
+      clampStateInternalMovementToBounds(state);
       this.state.origin = [event.clientX, event.clientY];
       this.compute(event);
       this.emit();
@@ -4545,9 +4561,11 @@
         bindFunction(device, "end", this[device + "End"].bind(this));
         bindFunction(device, "cancel", this[device + "End"].bind(this));
       }
-      bindFunction("wheel", "", this.wheel.bind(this), {
-        passive: false
-      });
+      if (this.config.pinchOnWheel) {
+        bindFunction("wheel", "", this.wheel.bind(this), {
+          passive: false
+        });
+      }
     }
   }
   const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
@@ -4600,6 +4618,9 @@
       if (value === void 0)
         return "ctrlKey";
       return value;
+    },
+    pinchOnWheel(value = true) {
+      return value;
     }
   });
   class MoveEngine extends CoordinatesEngine {
@@ -4698,15 +4719,7 @@
       const state = this.state;
       state._delta = wheelValues(event);
       V.addTo(state._movement, state._delta);
-      const [ox, oy] = state.overflow;
-      const [dx, dy] = state._delta;
-      const [dirx, diry] = state._direction;
-      if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
-        state._movement[0] = state._movementBound[0];
-      }
-      if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
-        state._movement[1] = state._movementBound[1];
-      }
+      clampStateInternalMovementToBounds(state);
       this.compute(event);
       this.emit();
     }
@@ -5017,10 +5030,16 @@
         }
         const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
         for (const eventKey in this.nativeHandlers) {
-          nativeBindFunction(eventKey, "", (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
-            event,
-            args
-          })), void 0, true);
+          nativeBindFunction(
+            eventKey,
+            "",
+            (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
+              event,
+              args
+            })),
+            void 0,
+            true
+          );
         }
       }
       for (const handlerProp in props) {
@@ -9153,7 +9172,7 @@
     }, React__default["default"].Children.toArray(children).map((child, index) => {
       if (!child)
         return null;
-      const { disabled, title, value, direction, options: options2 } = child.props;
+      const { disabled, title, value, direction, options: options2, className: className2 } = child.props;
       const currentTitle = options2 == null ? void 0 : options2.filter(
         (option) => option.value === value
       );
@@ -9170,7 +9189,7 @@
         className: `nut-menu__item ${classNames({
           active: itemShow[index],
           disabled
-        })}`,
+        })} ${className2}`,
         style: { color: itemShow[index] ? activeColor : "" },
         key: index,
         onClick: () => {
@@ -9211,7 +9230,6 @@
     useConfig();
     const mergedProps = { ...defaultProps$Z, ...props };
     const {
-      className,
       style,
       options: options2,
       value,
@@ -9295,7 +9313,7 @@
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `placeholder-element ${classNames({
         up: direction === "up"
-      })} ${className}`,
+      })}`,
       style: placeholderStyle(),
       onClick: () => parent.toggleItemShow(orderKey)
     }), /* @__PURE__ */ React__default["default"].createElement(Overlay, {
@@ -10865,13 +10883,22 @@
     checkedValue: [],
     max: void 0,
     onChange: (value) => {
-    }
+    },
+    options: []
   };
   const CheckboxGroup = React__default["default"].forwardRef(
     (props, ref) => {
       const { children } = { ...defaultProps$V, ...props };
       const b2 = cn("checkboxgroup");
-      const { className, disabled, onChange, checkedValue, max, ...rest } = props;
+      const {
+        className,
+        disabled,
+        onChange,
+        checkedValue,
+        max,
+        options: options2,
+        ...rest
+      } = props;
       const [innerDisabled, setInnerDisabled] = React.useState(disabled);
       const [innerValue, setInnerValue] = React.useState(checkedValue);
       React.useImperativeHandle(ref, () => ({
@@ -10923,6 +10950,11 @@
           return false;
         return (innerValue == null ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
       }
+      function validateChecked(value) {
+        if (innerValue === null)
+          return false;
+        return innerValue === value;
+      }
       function getParentVals() {
         return innerValue;
       }
@@ -10941,10 +10973,26 @@
           });
         });
       }
+      const renderOptionsChildren = React.useCallback(() => {
+        return options2 == null ? void 0 : options2.map(({ label, value, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
+          const childChecked = validateChecked(value);
+          return /* @__PURE__ */ React__default["default"].createElement(Checkbox, {
+            key: value == null ? void 0 : value.toString(),
+            children: label,
+            label: value,
+            disabled: innerDisabled ? true : disabled2,
+            onChange: handleChildChange,
+            ...rest2,
+            max,
+            getParentVals,
+            checked: childChecked
+          });
+        });
+      }, [innerValue]);
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `${b2()} ${className || ""}`,
         ...rest
-      }, cloneChildren());
+      }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren());
     }
   );
   CheckboxGroup.defaultProps = defaultProps$V;
@@ -11984,6 +12032,7 @@
   const defaultProps$R = {
     ...ComponentDefaults,
     type: "text",
+    name: "",
     defaultValue: "",
     placeholder: "",
     label: "",
@@ -12016,11 +12065,12 @@
     slotButton: null,
     slotInput: null
   };
-  const Input = (props) => {
+  const Input = React.forwardRef((props, ref) => {
     const { locale } = useConfig();
     const {
       children,
       type,
+      name,
       defaultValue,
       placeholder,
       label,
@@ -12100,6 +12150,9 @@
         resetValidation();
       }
     }, [inputValue]);
+    React.useImperativeHandle(ref, () => {
+      return inputRef.current;
+    });
     const inputClass = React.useCallback(() => {
       const prefixCls = "nut-input";
       return [
@@ -12231,6 +12284,7 @@
         handleClickInput(e2);
       }
     }, type === "textarea" ? /* @__PURE__ */ React__default["default"].createElement("textarea", {
+      name,
       className: "input-text",
       ref: inputRef,
       style: {
@@ -12253,6 +12307,7 @@
         handleInput(e2);
       }
     }) : /* @__PURE__ */ React__default["default"].createElement("input", {
+      name,
       className: "input-text",
       ref: inputRef,
       style: { textAlign: inputAlign },
@@ -12303,7 +12358,7 @@
         textAlign: errorMessageAlign
       }
     }, errorMessage) : null)));
-  };
+  });
   Input.defaultProps = defaultProps$R;
   Input.displayName = "NutInput";
   const radioContext = {
@@ -12316,13 +12371,22 @@
     textPosition: "right",
     onChange: (value) => {
     },
-    direction: "vertical"
+    direction: "vertical",
+    options: []
   };
   const RadioGroup = React__default["default"].forwardRef(
     (props, ref) => {
       const { children } = { ...defaultProps$Q, ...props };
       cn("RadioGroup");
-      const { className, value, onChange, textPosition, direction, ...rest } = props;
+      const {
+        className,
+        value,
+        onChange,
+        textPosition,
+        direction,
+        options: options2,
+        ...rest
+      } = props;
       const [val2State, setVal2State] = React.useState(value);
       React.useEffect(() => {
         setVal2State(value);
@@ -12332,6 +12396,11 @@
           return false;
         return val2State === child.props.value;
       }
+      function validateChecked(value2) {
+        if (val2State === null)
+          return false;
+        return val2State === value2;
+      }
       function cloneChildren() {
         return React__default["default"].Children.map(children, (child, index) => {
           const childChecked = validateChildChecked(child);
@@ -12344,6 +12413,21 @@
           });
         });
       }
+      const renderOptionsChildren = React.useCallback(() => {
+        return options2 == null ? void 0 : options2.map(({ label, value: value2, disabled, onChange: onChange2, ...rest2 }) => {
+          const childChecked = validateChecked(value2);
+          return /* @__PURE__ */ React__default["default"].createElement(Radio, {
+            key: value2 == null ? void 0 : value2.toString(),
+            children: label,
+            value: value2,
+            disabled,
+            onChange: onChange2,
+            ...rest2,
+            textPosition,
+            checked: childChecked
+          });
+        });
+      }, [val2State]);
       return /* @__PURE__ */ React__default["default"].createElement(RadioContext.Provider, {
         value: {
           onChange: (val) => {
@@ -12352,9 +12436,9 @@
           }
         }
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: `nut-radiogroup nut-radiogroup--${props.direction}`,
+        className: `nut-radiogroup nut-radiogroup--${props.direction} ${className || ""}`,
         ...rest
-      }, cloneChildren()));
+      }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren()));
     }
   );
   RadioGroup.defaultProps = defaultProps$Q;
@@ -16124,13 +16208,11 @@
         }
       }, n2 * speed);
     };
-    const go = (item) => {
-      click && click(item);
-      onClick && onClick(item);
-    };
-    const handleClickIcon = () => {
-      close && close(scrollList[0]);
-      onClose && onClose(scrollList[0]);
+    const handleClickIcon = (event) => {
+      event.stopPropagation();
+      SetShowNoticeBar(!closeMode);
+      close && close(event);
+      onClose && onClose(event);
     };
     const iconShow = () => {
       if (leftIcon === "close") {
@@ -16206,9 +16288,10 @@
       fontClassName: iconFontClassName,
       name: rightIcon || "close",
       color
-    })) : null) : null, scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    })) : null) : null, showNoticeBar && scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-noticebar-vertical",
-      style: barStyle
+      style: barStyle,
+      onClick: handleClick2
     }, children ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "horseLamp_list",
       style: horseLampStyle
@@ -16221,20 +16304,17 @@
       return /* @__PURE__ */ React__default["default"].createElement("li", {
         className: "horseLamp_list_item",
         style: { height },
-        key: index,
-        onClick: () => {
-          go(item);
-        }
+        key: index
       }, item);
     })), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "go",
-      onClick: () => {
-        handleClickIcon();
+      onClick: (e2) => {
+        handleClickIcon(e2);
       }
     }, rightIcon || (closeMode ? /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
-      name: "cross",
+      name: rightIcon || "close",
       color,
       size: "11px"
     }) : null))) : null);
@@ -16980,6 +17060,8 @@
     symbol: "&yen;",
     decimalDigits: 2,
     thousands: false,
+    position: "before",
+    size: "large",
     className: ""
   };
   const Price = (props) => {
@@ -16989,6 +17071,8 @@
       symbol,
       decimalDigits,
       thousands,
+      position,
+      size,
       className,
       ...rest
     } = {
@@ -16996,18 +17080,8 @@
       ...props
     };
     const b2 = cn("price");
-    const replaceSpecialChar = (symbol2) => {
-      let desSymbol = symbol2;
-      desSymbol = symbol2.replace(/&quot;/g, '"');
-      desSymbol = symbol2.replace(/&amp;/g, "&");
-      desSymbol = symbol2.replace(/&lt;/g, "<");
-      desSymbol = symbol2.replace(/&gt;/g, ">");
-      desSymbol = symbol2.replace(/&nbsp;/g, " ");
-      desSymbol = symbol2.replace(/&yen;/g, "\uFFE5");
-      return desSymbol;
-    };
     const showSymbol = () => {
-      return { __html: (needSymbol ? replaceSpecialChar(symbol) : "") || "" };
+      return { __html: needSymbol ? symbol : "" };
     };
     const checkPoint = (price2) => {
       return String(price2).indexOf(".") > 0;
@@ -17033,7 +17107,7 @@
       }
       if (checkPoint(decimalNum)) {
         decimalNum = Number(decimalNum).toFixed(decimalDigits);
-        decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1];
+        decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1] || 0;
       } else {
         decimalNum = 0;
       }
@@ -17041,19 +17115,22 @@
       const resultFixed = Number(result).toFixed(decimalDigits);
       return String(resultFixed).substring(2, resultFixed.length);
     };
+    const renderSymbol = () => {
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: `${b2("symbol")} ${b2(`symbol-${size}`)}`,
+        dangerouslySetInnerHTML: showSymbol()
+      });
+    };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2()} ${className}`,
       ...rest
-    }, needSymbol ? /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2("symbol")}`,
-      dangerouslySetInnerHTML: showSymbol()
-    }) : null, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2("big")}`
-    }, formatThousands(price)), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2("point")}`
-    }, "."), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2("small")}`
-    }, formatDecimal(price)));
+    }, needSymbol && position === "before" ? renderSymbol() : null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: `${b2("integer")} ${b2(`integer-${size}`)}`
+    }, formatThousands(price)), decimalDigits !== 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: `${b2("decimal")} ${b2(`decimal-${size}`)}`
+    }, ".") : null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: `${b2("decimal")} ${b2(`decimal-${size}`)}`
+    }, formatDecimal(price)), needSymbol && position === "after" ? renderSymbol() : null);
   };
   Price.defaultProps = defaultProps$o;
   Price.displayName = "NutPrice";
@@ -17136,6 +17213,8 @@
   };
   const Tag = (props) => {
     const {
+      className,
+      style,
       color,
       plain,
       type,
@@ -17184,23 +17263,23 @@
       }
     };
     const getStyle = () => {
-      const style = {};
+      const style2 = {};
       if (textColor) {
-        style.color = textColor;
+        style2.color = textColor;
         if (plain) {
-          style.background = "#fff";
+          style2.background = "#fff";
         } else if (color) {
-          style.background = color;
+          style2.background = color;
         }
       } else if (color) {
-        style.color = "#fff";
-        style.background = color;
+        style2.color = "#fff";
+        style2.background = color;
       }
-      return style;
+      return style2;
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", null, closeable ? isTagShow && /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${btnName}`,
-      style: getStyle(),
+      className: `${btnName} ${className}`,
+      style: { ...style, ...getStyle() },
       onClick: (e2) => handleClick2(e2)
     }, children && /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "text"
@@ -17217,8 +17296,8 @@
         }
       }
     })) : /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${btnName}`,
-      style: getStyle(),
+      className: `${btnName} ${className}`,
+      style: { ...style, ...getStyle() },
       onClick: (e2) => handleClick2(e2)
     }, children && /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "text"

package/dist/packages/badge/badge.scss

@@ -18,30 +18,30 @@
     border-radius: 7px;
     top: -20%;
     right: -20%;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
-    z-index: 1;
+    border-radius: $badge-border-radius;
+    z-index: $badge-z-index;
   }
   .sup {
     position: absolute;
     background: $badge-background-color;
     border-radius: 7px;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
+    border-radius: $badge-border-radius;
     font-size: $badge-font-size;
     font-weight: normal;
     color: $badge-default-background-color;
     line-height: 16px;
   }
   .nut-badge__content {
-    transform: translateY(-50%) translateX(100%);
+    transform: $badge-content-transform;
   }
   .is-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 7px;
-    padding: 0;
+    width: $badge-dot-width;
+    height: $badge-dot-height;
+    border-radius: $badge-dot-border-radius;
+    padding: $badge-dot-padding;
   }
 }

package/dist/packages/button/button.scss

@@ -120,15 +120,15 @@
   }
 
   &--normal {
-    padding: 0 18px;
+    padding: $button-default-padding;
     font-size: $button-default-font-size;
   }
 
   &--small {
     height: $button-small-height;
     line-height: $button-small-line-height;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
   }
 
   &--block {

package/dist/packages/cell/cell.scss

@@ -33,9 +33,6 @@
   &--large {
     font-size: $cell-large-title-font;
     padding: $cell-large-padding;
-    .nut-cell__title-desc {
-      font-size: $cell-large-title-desc-font;
-    }
     .nut-cell__subtitle {
       font-size: $cell-large-title-desc-font;
     }
@@ -75,7 +72,7 @@
   &__icon {
     display: flex;
     flex-direction: row;
-    margin-right: $cell-default-icon-margin;
+    margin: $cell-default-icon-margin;
   }
 
   &__title {

package/dist/packages/cellgroup/cellgroup.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-cell-group__wrap {
+    background: $dark-background2;
+    color: $dark-color;
+    box-shadow: none;
+  }
+}
+
 .nut-cell-group {
   display: block;
   &__title {

package/dist/packages/countdown/countdown.scss

@@ -1,3 +1,3 @@
 .nut-countdown {
-  display: flex;
+  display: $countdown-display;
 }

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -47,7 +47,7 @@
     width: 100%;
     padding-top: 16px;
     font-size: $font-size-small;
-    color: $infinite-bottom-color;
+    color: $infiniteloading-bottom-color;
     text-align: center;
 
     .bottom-box {

package/dist/packages/inputnumber/inputnumber.scss

@@ -21,7 +21,7 @@
 }
 
 .nut-inputnumber {
-  display: flex;
+  display: $inputnumber-display;
   align-items: center;
 
   &--disabled {
@@ -46,8 +46,8 @@
     height: 100%;
     text-align: center;
     outline: none;
-    border: 0;
-    margin: 0 6px;
+    border: $inputnumber-input-border;
+    margin: $inputnumber-input-margin;
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }

package/dist/packages/noticebar/noticebar.scss

@@ -126,6 +126,9 @@
     .go {
       align-self: center;
       display: flex;
+      justify-content: center;
+      width: $noticebar-right-icon-width;
+      margin: $noticebar-righticon-margin;
     }
   }
 }