@nutui/nutui-react 1.3.10 → 1.3.11-beta.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.10 Wed Nov 09 2022 13:49:01 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.11-beta.0 Wed Nov 16 2022 13:41:37 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -208,7 +208,7 @@ const Button = (props) => {
       onClick(e2);
     }
   };
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("button", {
     className: `${btnName} ${className}`,
     style: { ...btnStyle, ...style },
     ...rest,
@@ -223,8 +223,8 @@ const Button = (props) => {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
     name: icon
-  }) : "", /* @__PURE__ */ React__default.createElement("div", {
-    className: "text"
+  }) : "", children && /* @__PURE__ */ React__default.createElement("div", {
+    className: icon || loading ? "text" : ""
   }, children)));
 };
 Button.defaultProps = defaultProps$1k;
@@ -2487,7 +2487,14 @@ const defaultProps$1e = {
   gutter: "0"
 };
 const Col = (props) => {
-  const { span, offset, children, onClick } = { ...defaultProps$1e, ...props };
+  const {
+    className,
+    style = {},
+    span,
+    offset,
+    children,
+    onClick
+  } = { ...defaultProps$1e, ...props };
   const [colName, setColName] = useState("");
   const [colStyle, setColStyle] = useState({});
   const { gutter } = useContext$1(DataContext$2);
@@ -2496,18 +2503,18 @@ const Col = (props) => {
     return `${prefixCls} ${prefixCls}-${span} ${gutter ? `${prefixCls}-gutter` : ""} ${prefixCls}-${offset}`;
   };
   const getStyle = () => {
-    const style = {};
-    style.paddingLeft = `${gutter / 2}px`;
-    style.paddingRight = `${gutter / 2}px`;
-    return style;
+    const style2 = {};
+    style2.paddingLeft = `${gutter / 2}px`;
+    style2.paddingRight = `${gutter / 2}px`;
+    return style2;
   };
   useEffect(() => {
     setColName(classs);
     setColStyle(getStyle);
   }, [span, offset, gutter]);
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${colName}`,
-    style: { ...colStyle },
+    className: `${colName} ${className}`,
+    style: { ...style, ...colStyle },
     onClick: (e2) => {
       onClick && onClick(e2, "col");
     }
@@ -2523,15 +2530,25 @@ const defaultProps$1d = {
   gutter: "0"
 };
 const Row = (props) => {
-  const { children, type, justify, align, wrap, gutter, onClick } = {
+  const {
+    className,
+    style = {},
+    children,
+    type,
+    justify,
+    align,
+    wrap,
+    gutter,
+    onClick
+  } = {
     ...defaultProps$1d,
     ...props
   };
   const prefixCls = "nut-row";
   const getClass = (prefix2, type2) => {
     const classType = type2 ? `nut-row-${prefix2}-${type2}` : "";
-    const className = prefix2 ? classType : `nut-row-${type2}`;
-    return className;
+    const className2 = prefix2 ? classType : `nut-row-${type2}`;
+    return className2;
   };
   const getClasses = () => {
     return `
@@ -2550,7 +2567,8 @@ const Row = (props) => {
   }, React__default.createElement(
     "div",
     {
-      className: getClasses(),
+      className: `${getClasses()} ${className}`,
+      style,
       onClick: (e2) => {
         onClick && onClick(e2, "row");
       }
@@ -9199,7 +9217,7 @@ const defaultProps$Z = {
   fontClassName: "nutui-iconfont",
   onChange: (value) => void 0
 };
-const MenuItem = (props) => {
+const MenuItem = forwardRef((props, ref) => {
   useConfig();
   const mergedProps = { ...defaultProps$Z, ...props };
   const {
@@ -9229,6 +9247,9 @@ const MenuItem = (props) => {
   useEffect(() => {
     getParentOffset();
   }, [_showPopup]);
+  useImperativeHandle(ref, () => ({
+    toggle: parent.toggleItemShow
+  }));
   const getIconCName = (optionVal, value2) => {
     return classNames({
       [activeTitleClass]: optionVal === value2,
@@ -9334,7 +9355,7 @@ const MenuItem = (props) => {
       }
     }, item.text));
   }), children))));
-};
+});
 MenuItem.defaultProps = defaultProps$Z;
 MenuItem.displayName = "NutMenuItem";
 const MIN_DISTANCE = 10;
@@ -10961,7 +10982,7 @@ const CheckboxGroup = React__default.forwardRef(
           checked: childChecked
         });
       });
-    }, [innerValue]);
+    }, [innerValue, options2]);
     return /* @__PURE__ */ React__default.createElement("div", {
       className: `${b2()} ${className || ""}`,
       ...rest
@@ -12113,9 +12134,7 @@ const Input = forwardRef((props, ref) => {
   });
   useEffect(() => {
     setClasses(inputClass);
-    if (defaultValue) {
-      SetInputValue(defaultValue);
-    }
+    SetInputValue(defaultValue);
   }, [defaultValue]);
   useEffect(() => {
     if (inputValue) {
@@ -12400,7 +12419,7 @@ const RadioGroup = React__default.forwardRef(
           checked: childChecked
         });
       });
-    }, [val2State]);
+    }, [val2State, options2]);
     return /* @__PURE__ */ React__default.createElement(RadioContext.Provider, {
       value: {
         onChange: (val) => {
@@ -12533,6 +12552,8 @@ const defaultProps$O = {
 };
 const Rate = (props) => {
   const {
+    className,
+    style,
     count,
     modelValue,
     minimizeValue,
@@ -12588,7 +12609,8 @@ const Rate = (props) => {
     onChange && onChange(value);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: b2()
+    className: `${b2()} ${className}`,
+    style
   }, countArray.map((n2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       className: bi(),
@@ -16861,11 +16883,11 @@ const defaultProps$r = {
 };
 const SwiperItem = React__default.forwardRef((props, ref) => {
   const _props = { ...defaultProps$r, ...props };
-  const { children, direction, size } = _props;
+  const { className, style, children, direction, size } = _props;
   const parent = useContext$1(DataContext);
   const b2 = cn("swiper-item");
-  const classes = classNames(b2(""));
-  const style = () => {
+  const classes = classNames(b2(""), className);
+  const getStyle = () => {
     const style2 = {};
     const _direction = (parent == null ? void 0 : parent.propSwiper.direction) || direction;
     const _size = (parent == null ? void 0 : parent.size) || size;
@@ -16876,7 +16898,7 @@ const SwiperItem = React__default.forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes,
-    style: style()
+    style: { ...style, ...getStyle() }
   }, children);
 });
 SwiperItem.defaultProps = defaultProps$r;
@@ -16886,6 +16908,7 @@ const defaultProps$q = {
   ...ComponentDefaults,
   size: "",
   icon: "",
+  iconSize: "",
   bgColor: "#eee",
   color: "#666",
   prefixCls: "nut-avatar",
@@ -16904,6 +16927,7 @@ const Avatar = (props) => {
     url,
     alt,
     icon,
+    iconSize,
     className,
     style,
     activeAvatar,
@@ -16980,6 +17004,7 @@ const Avatar = (props) => {
     onClick: clickAvatar,
     ref: avatarRef
   }, (!((_j = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _j.maxCount) || avatarIndex <= ((_k = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _k.maxCount)) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, url && /* @__PURE__ */ React__default.createElement("img", {
+    className: "avatar-img",
     src: url,
     alt,
     onError: errorEvent
@@ -16987,7 +17012,8 @@ const Avatar = (props) => {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
     className: "icon",
-    name: iconStyles
+    name: iconStyles,
+    size: iconSize
   }), children && /* @__PURE__ */ React__default.createElement("span", {
     className: "text"
   }, children)), showMax && /* @__PURE__ */ React__default.createElement("div", {
@@ -17120,6 +17146,8 @@ const defaultProps$n = {
 };
 const Badge = (props) => {
   const {
+    className,
+    style,
     children,
     dot,
     top,
@@ -17144,15 +17172,16 @@ const Badge = (props) => {
     return value;
   }
   const getStyle = () => {
-    const style = {};
-    style.top = `${Number(top) || parseFloat(top) || 0}px`;
-    style.right = `${Number(right) || parseFloat(right) || 0}px`;
-    style.zIndex = zIndex;
-    style.backgroundColor = color;
-    return style;
+    const style2 = {};
+    style2.top = `${Number(top) || parseFloat(top) || 0}px`;
+    style2.right = `${Number(right) || parseFloat(right) || 0}px`;
+    style2.zIndex = zIndex;
+    style2.backgroundColor = color;
+    return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-badge"
+    className: `nut-badge ${className}`,
+    style
   }, icons !== "" && /* @__PURE__ */ React__default.createElement("div", {
     className: "slot-icons"
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
@@ -17250,7 +17279,7 @@ const Tag = (props) => {
     }
     return style2;
   };
-  return /* @__PURE__ */ React__default.createElement("div", null, closeable ? isTagShow && /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, closeable ? isTagShow && /* @__PURE__ */ React__default.createElement("div", {
     className: `${btnName} ${className}`,
     style: { ...style, ...getStyle() },
     onClick: (e2) => handleClick2(e2)

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.10 Wed Nov 09 2022 13:49:01 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.11-beta.0 Wed Nov 16 2022 13:41:37 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -235,7 +235,7 @@
         onClick(e2);
       }
     };
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
+    return /* @__PURE__ */ React__default["default"].createElement("button", {
       className: `${btnName} ${className}`,
       style: { ...btnStyle, ...style },
       ...rest,
@@ -250,8 +250,8 @@
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
       name: icon
-    }) : "", /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "text"
+    }) : "", children && /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: icon || loading ? "text" : ""
     }, children)));
   };
   Button.defaultProps = defaultProps$1k;
@@ -2514,7 +2514,14 @@
     gutter: "0"
   };
   const Col = (props) => {
-    const { span, offset, children, onClick } = { ...defaultProps$1e, ...props };
+    const {
+      className,
+      style = {},
+      span,
+      offset,
+      children,
+      onClick
+    } = { ...defaultProps$1e, ...props };
     const [colName, setColName] = React.useState("");
     const [colStyle, setColStyle] = React.useState({});
     const { gutter } = React.useContext(DataContext$2);
@@ -2523,18 +2530,18 @@
       return `${prefixCls} ${prefixCls}-${span} ${gutter ? `${prefixCls}-gutter` : ""} ${prefixCls}-${offset}`;
     };
     const getStyle = () => {
-      const style = {};
-      style.paddingLeft = `${gutter / 2}px`;
-      style.paddingRight = `${gutter / 2}px`;
-      return style;
+      const style2 = {};
+      style2.paddingLeft = `${gutter / 2}px`;
+      style2.paddingRight = `${gutter / 2}px`;
+      return style2;
     };
     React.useEffect(() => {
       setColName(classs);
       setColStyle(getStyle);
     }, [span, offset, gutter]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${colName}`,
-      style: { ...colStyle },
+      className: `${colName} ${className}`,
+      style: { ...style, ...colStyle },
       onClick: (e2) => {
         onClick && onClick(e2, "col");
       }
@@ -2550,15 +2557,25 @@
     gutter: "0"
   };
   const Row = (props) => {
-    const { children, type, justify, align, wrap, gutter, onClick } = {
+    const {
+      className,
+      style = {},
+      children,
+      type,
+      justify,
+      align,
+      wrap,
+      gutter,
+      onClick
+    } = {
       ...defaultProps$1d,
       ...props
     };
     const prefixCls = "nut-row";
     const getClass = (prefix2, type2) => {
       const classType = type2 ? `nut-row-${prefix2}-${type2}` : "";
-      const className = prefix2 ? classType : `nut-row-${type2}`;
-      return className;
+      const className2 = prefix2 ? classType : `nut-row-${type2}`;
+      return className2;
     };
     const getClasses = () => {
       return `
@@ -2577,7 +2594,8 @@
     }, React__default["default"].createElement(
       "div",
       {
-        className: getClasses(),
+        className: `${getClasses()} ${className}`,
+        style,
         onClick: (e2) => {
           onClick && onClick(e2, "row");
         }
@@ -9226,7 +9244,7 @@
     fontClassName: "nutui-iconfont",
     onChange: (value) => void 0
   };
-  const MenuItem = (props) => {
+  const MenuItem = React.forwardRef((props, ref) => {
     useConfig();
     const mergedProps = { ...defaultProps$Z, ...props };
     const {
@@ -9256,6 +9274,9 @@
     React.useEffect(() => {
       getParentOffset();
     }, [_showPopup]);
+    React.useImperativeHandle(ref, () => ({
+      toggle: parent.toggleItemShow
+    }));
     const getIconCName = (optionVal, value2) => {
       return classNames({
         [activeTitleClass]: optionVal === value2,
@@ -9361,7 +9382,7 @@
         }
       }, item.text));
     }), children))));
-  };
+  });
   MenuItem.defaultProps = defaultProps$Z;
   MenuItem.displayName = "NutMenuItem";
   const MIN_DISTANCE = 10;
@@ -10988,7 +11009,7 @@
             checked: childChecked
           });
         });
-      }, [innerValue]);
+      }, [innerValue, options2]);
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `${b2()} ${className || ""}`,
         ...rest
@@ -12140,9 +12161,7 @@
     });
     React.useEffect(() => {
       setClasses(inputClass);
-      if (defaultValue) {
-        SetInputValue(defaultValue);
-      }
+      SetInputValue(defaultValue);
     }, [defaultValue]);
     React.useEffect(() => {
       if (inputValue) {
@@ -12427,7 +12446,7 @@
             checked: childChecked
           });
         });
-      }, [val2State]);
+      }, [val2State, options2]);
       return /* @__PURE__ */ React__default["default"].createElement(RadioContext.Provider, {
         value: {
           onChange: (val) => {
@@ -12560,6 +12579,8 @@
   };
   const Rate = (props) => {
     const {
+      className,
+      style,
       count,
       modelValue,
       minimizeValue,
@@ -12615,7 +12636,8 @@
       onChange && onChange(value);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: b2()
+      className: `${b2()} ${className}`,
+      style
     }, countArray.map((n2) => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: bi(),
@@ -16888,11 +16910,11 @@
   };
   const SwiperItem = React__default["default"].forwardRef((props, ref) => {
     const _props = { ...defaultProps$r, ...props };
-    const { children, direction, size } = _props;
+    const { className, style, children, direction, size } = _props;
     const parent = React.useContext(DataContext);
     const b2 = cn("swiper-item");
-    const classes = classNames(b2(""));
-    const style = () => {
+    const classes = classNames(b2(""), className);
+    const getStyle = () => {
       const style2 = {};
       const _direction = (parent == null ? void 0 : parent.propSwiper.direction) || direction;
       const _size = (parent == null ? void 0 : parent.size) || size;
@@ -16903,7 +16925,7 @@
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classes,
-      style: style()
+      style: { ...style, ...getStyle() }
     }, children);
   });
   SwiperItem.defaultProps = defaultProps$r;
@@ -16913,6 +16935,7 @@
     ...ComponentDefaults,
     size: "",
     icon: "",
+    iconSize: "",
     bgColor: "#eee",
     color: "#666",
     prefixCls: "nut-avatar",
@@ -16931,6 +16954,7 @@
       url,
       alt,
       icon,
+      iconSize,
       className,
       style,
       activeAvatar,
@@ -17007,6 +17031,7 @@
       onClick: clickAvatar,
       ref: avatarRef
     }, (!((_j = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _j.maxCount) || avatarIndex <= ((_k = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _k.maxCount)) && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, url && /* @__PURE__ */ React__default["default"].createElement("img", {
+      className: "avatar-img",
       src: url,
       alt,
       onError: errorEvent
@@ -17014,7 +17039,8 @@
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
       className: "icon",
-      name: iconStyles
+      name: iconStyles,
+      size: iconSize
     }), children && /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "text"
     }, children)), showMax && /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -17147,6 +17173,8 @@
   };
   const Badge = (props) => {
     const {
+      className,
+      style,
       children,
       dot,
       top,
@@ -17171,15 +17199,16 @@
       return value;
     }
     const getStyle = () => {
-      const style = {};
-      style.top = `${Number(top) || parseFloat(top) || 0}px`;
-      style.right = `${Number(right) || parseFloat(right) || 0}px`;
-      style.zIndex = zIndex;
-      style.backgroundColor = color;
-      return style;
+      const style2 = {};
+      style2.top = `${Number(top) || parseFloat(top) || 0}px`;
+      style2.right = `${Number(right) || parseFloat(right) || 0}px`;
+      style2.zIndex = zIndex;
+      style2.backgroundColor = color;
+      return style2;
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "nut-badge"
+      className: `nut-badge ${className}`,
+      style
     }, icons !== "" && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "slot-icons"
     }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
@@ -17277,7 +17306,7 @@
       }
       return style2;
     };
-    return /* @__PURE__ */ React__default["default"].createElement("div", null, closeable ? isTagShow && /* @__PURE__ */ React__default["default"].createElement("div", {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, closeable ? isTagShow && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${btnName} ${className}`,
       style: { ...style, ...getStyle() },
       onClick: (e2) => handleClick2(e2)

package/dist/packages/avatar/avatar.scss

@@ -6,7 +6,7 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
-  img {
+  .avatar-img {
     position: absolute;
     width: 100%;
     height: 100%;

package/dist/packages/button/button.scss

@@ -1,3 +1,4 @@
+
 .nut-button {
   position: relative;
   display: inline-block;
@@ -14,9 +15,11 @@
   -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+
   .text {
     margin-left: 5px;
   }
+
   &::before {
     position: absolute;
     top: 50%;
@@ -31,9 +34,11 @@
     opacity: 0;
     content: ' ';
   }
+
   &:active::before {
     opacity: 0.1;
   }
+
   &__warp {
     height: 100%;
     width: 100%;
@@ -48,6 +53,7 @@
       display: none;
     }
   }
+
   &--default {
     color: $button-default-color;
     background: $button-default-bg-color;