@nutui/nutui-react 2.0.17 → 2.0.18-beta.1

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.17 Wed Sep 13 2023 17:08:08 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v2.0.18 Wed Sep 20 2023 14:59:05 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -6129,7 +6129,7 @@ Check the top-level render call using <` + t + ">.");
     ...ComponentDefaults,
     position: "top",
     threshold: 0,
-    zIndex: 2e3
+    zIndex: 900
   };
   const classPrefix$j = "nut-sticky";
   const Sticky = (props) => {
@@ -6265,7 +6265,7 @@ Check the top-level render call using <` + t + ">.");
     ...ComponentDefaults,
     target: "",
     threshold: 200,
-    zIndex: 10,
+    zIndex: 900,
     duration: 1e3
   };
   const BackTop = (props) => {
@@ -11864,7 +11864,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onCloseIconClick: (e) => true,
     ...defaultOverlayProps
   };
-  let _zIndex = 1e3;
+  let _zIndex = 1100;
   const Popup = (props) => {
     const {
       children,
@@ -12232,8 +12232,8 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     const getStyle = () => {
       const style2 = {};
-      style2.top = `${Number(top) || parseFloat(top) || 0}px`;
-      style2.right = `${Number(right) || parseFloat(right) || 0}px`;
+      style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
+      style2.right = `${Number(right) || parseFloat(String(right)) || 0}px`;
       style2.background = color;
       return style2;
     };
@@ -13311,7 +13311,7 @@ Please add \`${key}Action\` when creating your handler.`);
      * @return {Boolse} true|false
      */
     isLeapYear(y2) {
-      return y2 % 4 == 0 && y2 % 100 != 0 || y2 % 400 == 0;
+      return y2 % 4 === 0 && y2 % 100 !== 0 || y2 % 400 === 0;
     },
     /**
      * 返回星期数
@@ -13414,9 +13414,9 @@ Please add \`${key}Action\` when creating your handler.`);
      * 时间是否相等
      * @return {Boolean}
      */
-    isEqual(date1 = "", date2) {
-      const startTime = new Date(date1.replace("-", "/")).getTime();
-      const endTime = new Date(date2.replace("-", "/")).getTime();
+    isEqual(date1, date2) {
+      const startTime = new Date((date1 || "").replace(/-/g, "/")).getTime();
+      const endTime = new Date(date2.replace(/-/g, "/")).getTime();
       if (startTime === endTime) {
         return true;
       }
@@ -16413,6 +16413,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Schema.warning = warning;
   Schema.messages = messages;
   Schema.validators = validators;
+  const SECRET = "NUT_FORM_INTERNAL";
   class FormStore {
     constructor() {
       // 初始化数据
@@ -16448,12 +16449,12 @@ Please add \`${key}Action\` when creating your handler.`);
       /**
        * 获取全部字段
        */
-      __publicField(this, "getFieldsValue", (name) => {
-        if (typeof name === "boolean") {
+      __publicField(this, "getFieldsValue", (nameList) => {
+        if (typeof nameList === "boolean") {
           return JSON.parse(JSON.stringify(this.store));
         }
         const fieldsValue = {};
-        name.forEach((field) => {
+        nameList.forEach((field) => {
           fieldsValue[field] = this.getFieldValue(field);
         });
         return fieldsValue;
@@ -16573,20 +16574,27 @@ Please add \`${key}Action\` when creating your handler.`);
       __publicField(this, "dispatch", ({ name }) => {
         this.validateFields([name]);
       });
+      __publicField(this, "getInternal", (key) => {
+        if (key === SECRET) {
+          return {
+            registerField: this.registerField,
+            setCallback: this.setCallback,
+            setInitialValues: this.setInitialValues,
+            dispatch: this.dispatch,
+            store: this.store,
+            fieldEntities: this.fieldEntities
+          };
+        }
+      });
       __publicField(this, "getForm", () => {
         return {
-          dispatch: this.dispatch,
-          setInitialValues: this.setInitialValues,
-          setCallback: this.setCallback,
-          registerField: this.registerField,
           getFieldValue: this.getFieldValue,
           getFieldsValue: this.getFieldsValue,
           setFieldsValue: this.setFieldsValue,
           resetFields: this.resetFields,
           submit: this.submit,
-          store: this.store,
           errors: this.errors,
-          fieldEntities: this.fieldEntities
+          getInternal: this.getInternal
         };
       });
       this.callbacks = {
@@ -16651,7 +16659,8 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       React.useImperativeHandle(ref, () => formInstance);
       formInstance.starPosition = starPosition;
-      const { setCallback, submit, resetFields, setInitialValues } = formInstance;
+      const { submit, resetFields } = formInstance;
+      const { setCallback, setInitialValues } = formInstance.getInternal(SECRET);
       setCallback({
         onFinish,
         onFinishFailed
@@ -16713,7 +16722,8 @@ Please add \`${key}Action\` when creating your handler.`);
       // children添加value属性和onChange事件
       __publicField(this, "getControlled", (children) => {
         var _a2;
-        const { setFieldsValue, getFieldValue, dispatch } = this.context;
+        const { setFieldsValue, getFieldValue } = this.context;
+        const { dispatch } = this.context.getInternal(SECRET);
         const { name = "" } = this.props;
         if ((_a2 = children == null ? void 0 : children.props) == null ? void 0 : _a2.defaultValue) {
           console.warn("通过 initialValue 设置初始值");
@@ -16822,7 +16832,8 @@ Please add \`${key}Action\` when creating your handler.`);
       };
     }
     componentDidMount() {
-      this.cancelRegister = this.context.registerField(this);
+      const { registerField } = this.context.getInternal(SECRET);
+      this.cancelRegister = registerField(this);
     }
     componentWillUnmount() {
       if (this.cancelRegister) {
@@ -17331,6 +17342,7 @@ Please add \`${key}Action\` when creating your handler.`);
     columns: 1,
     direction: "down",
     icon: null,
+    closeOnClickAway: true,
     activeTitleClass: "",
     inactiveTitleClass: "",
     onChange: (value) => void 0
@@ -17341,6 +17353,7 @@ Please add \`${key}Action\` when creating your handler.`);
       style,
       options: options2,
       value,
+      defaultValue,
       columns,
       title,
       icon,
@@ -17359,7 +17372,15 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const [showPopup, setShowPopup] = React.useState(show2);
-    const [innerValue, setValue] = React.useState(value);
+    const [innerValue, setValue] = usePropsValue({
+      defaultValue,
+      value,
+      finalValue: void 0,
+      onChange: (v) => {
+        const [option] = options2.filter((o) => o.value === v);
+        onChange == null ? void 0 : onChange(option);
+      }
+    });
     React.useEffect(() => {
       setShowPopup(show2);
     }, [show2]);
@@ -17367,7 +17388,9 @@ Please add \`${key}Action\` when creating your handler.`);
       getParentOffset();
     }, [showPopup]);
     React.useImperativeHandle(ref, () => ({
-      toggle: parent.toggleMenuItem
+      toggle: (s) => {
+        s ? parent.toggleMenuItem(index) : parent.hideMenuItem(index);
+      }
     }));
     const getIconCName = (optionVal, value2) => {
       return classNames({
@@ -17384,7 +17407,6 @@ Please add \`${key}Action\` when creating your handler.`);
       parent.toggleMenuItem(index);
       setTitle(item.text);
       setValue(item.value);
-      onChange && onChange(item);
     };
     const isShow = () => {
       if (showPopup)
@@ -17395,6 +17417,9 @@ Please add \`${key}Action\` when creating your handler.`);
       top: 0,
       height: 0
     });
+    const scrollParent = React.useMemo(() => {
+      return getScrollParent(parent.menuRef, window);
+    }, [parent.menuRef]);
     const getParentOffset = () => {
       setTimeout(() => {
         const p = parent.menuRef.current;
@@ -17405,6 +17430,12 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       });
     };
+    React.useEffect(() => {
+      scrollParent == null ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
+      return () => {
+        scrollParent == null ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
+      };
+    }, []);
     const getPosition = () => {
       return direction === "down" ? {
         top: `${position.top + position.height}px`,
@@ -17436,7 +17467,7 @@ Please add \`${key}Action\` when creating your handler.`);
         className: "nut-menu-item-container",
         ref: micRef
       },
-      /* @__PURE__ */ React.createElement(
+      parent.overlay ? /* @__PURE__ */ React.createElement(
         Overlay,
         {
           className: "nut-menu__overlay",
@@ -17448,7 +17479,7 @@ Please add \`${key}Action\` when creating your handler.`);
             parent.closeOnOverlayClick && parent.toggleMenuItem(index);
           }
         }
-      ),
+      ) : null,
       /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -17514,10 +17545,11 @@ Please add \`${key}Action\` when creating your handler.`);
     closeOnOverlayClick: true,
     scrollFixed: false,
     lockScroll: true,
+    overlay: true,
     icon: null,
-    onOpen: () => {
+    onOpen: (index) => {
     },
-    onClose: () => {
+    onClose: (index) => {
     }
   };
   const Menu = (props) => {
@@ -17526,6 +17558,7 @@ Please add \`${key}Action\` when creating your handler.`);
       icon,
       scrollFixed,
       lockScroll,
+      overlay,
       closeOnOverlayClick,
       children,
       activeColor,
@@ -17558,9 +17591,9 @@ Please add \`${key}Action\` when creating your handler.`);
     const toggleMenuItem = (index) => {
       showMenuItem[index] = !showMenuItem[index];
       if (showMenuItem[index]) {
-        onOpen && onOpen();
+        onOpen && onOpen(index);
       } else {
-        onClose && onClose();
+        onClose && onClose(index);
       }
       const temp = showMenuItem.map(
         (i, idx) => idx === index ? i : false
@@ -17570,7 +17603,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const hideMenuItem = (index) => {
       showMenuItem[index] = false;
       setShowMenuItem([...showMenuItem]);
-      onClose && onClose();
+      onClose && onClose(index);
     };
     const updateTitle = (text, index) => {
       menuItemTitle[index] = text;
@@ -17585,6 +17618,7 @@ Please add \`${key}Action\` when creating your handler.`);
           activeColor,
           parent: {
             closeOnOverlayClick,
+            overlay,
             lockScroll,
             toggleMenuItem,
             updateTitle,
@@ -17597,9 +17631,9 @@ Please add \`${key}Action\` when creating your handler.`);
     const menuTitle = () => {
       return React.Children.map(children, (child, index) => {
         if (React.isValidElement(child)) {
-          const { title, options: options2, value, disabled, direction } = child.props;
+          const { title, options: options2, value, defaultValue, disabled, direction } = child.props;
           const selected = options2 == null ? void 0 : options2.filter(
-            (option) => option.value === value
+            (option) => option.value === (value !== void 0 ? value : defaultValue)
           );
           const finallyTitle = () => {
             if (title)
@@ -17621,6 +17655,8 @@ Please add \`${key}Action\` when creating your handler.`);
               key: index,
               onClick: (e) => {
                 e.stopPropagation();
+                if ((!options2 || !options2.length) && !child.props.children)
+                  return;
                 !disabled && toggleMenuItem(index);
               }
             },
@@ -19474,7 +19510,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const handleItemClick = (file) => {
       onFileItemClick && onFileItemClick(file);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children, maxCount > fileList.length && /* @__PURE__ */ React.createElement(React.Fragment, null, capture ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(React.Fragment, null, capture ? /* @__PURE__ */ React.createElement(
       "input",
       {
         className: "nut-uploader__input",
@@ -19504,14 +19540,15 @@ Please add \`${key}Action\` when creating your handler.`);
           className: `nut-uploader__preview ${previewType}`,
           key: item.uid
         },
-        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, deletable && /* @__PURE__ */ React.createElement(
+        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
           x$9,
           {
             color: "rgba(0,0,0,0.6)",
             className: "close",
             onClick: () => onDeleteItem(item, index)
           }
-        ), item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
+        ),
+        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(x$9, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(
           k$3,
           {
             className: "nut-icon-loading",
@@ -19541,8 +19578,7 @@ Please add \`${key}Action\` when creating your handler.`);
             className: "nut-uploader__preview-img__file__name"
           },
           /* @__PURE__ */ React.createElement(x$6, { color: "#808080" }),
-          " ",
-          item.name
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
         ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
         previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
           "div",
@@ -19551,8 +19587,7 @@ Please add \`${key}Action\` when creating your handler.`);
             onClick: () => handleItemClick(item)
           },
           /* @__PURE__ */ React.createElement(x$6, null),
-          " ",
-          item.name
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
         ), deletable && /* @__PURE__ */ React.createElement(
           y$8,
           {
@@ -19894,7 +19929,7 @@ Please add \`${key}Action\` when creating your handler.`);
       Overlay,
       {
         style: overlayStyle,
-        className: overlayClassName,
+        className: classNames("nut-dialog-overlay", overlayClassName),
         visible,
         closeOnOverlayClick,
         lockScroll,
@@ -23428,10 +23463,6 @@ Please add \`${key}Action\` when creating your handler.`);
       target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
     };
     const onTouchStart = (e) => {
-      if (props.preventDefault)
-        e.preventDefault();
-      if (props.stopPropagation)
-        e.stopPropagation();
       if (!props.touchable)
         return;
       touchStart(e);
@@ -23440,6 +23471,10 @@ Please add \`${key}Action\` when creating your handler.`);
       resetPosition();
     };
     const onTouchMove = (e) => {
+      if (props.preventDefault)
+        e.preventDefault();
+      if (props.stopPropagation)
+        e.stopPropagation();
       if (props.touchable && swiperRef.current.moving) {
         handleTouchMove(e);
         if (touch.stateDirection === props.direction) {

package/dist/packages/badge/badge.scss

@@ -26,6 +26,7 @@
     line-height: 16px;
     border: $badge-border;
     border-radius: $badge-border-radius;
+    min-width: $badge-min-width;
   }
 
   &__content {

package/dist/packages/dialog/dialog.scss

@@ -9,12 +9,18 @@
   padding: $dialog-padding;
   box-sizing: border-box;
 
+  &-overlay {
+    --nutui-overlay-zIndex: 1200;
+  }
+
   &__outer {
     position: fixed;
     max-height: 100%;
     overflow-y: auto;
     background-color: $white;
-    transition: transform 0.2s, -webkit-transform 0.2s;
+    transition:
+      transform 0.2s,
+      -webkit-transform 0.2s;
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;

package/dist/packages/fixednav/fixednav.scss

@@ -1,11 +1,4 @@
-.nut-theme-dark {
-  .nut-fixednav {
-    &__list {
-      // background-color: $dark2;
-      // color: $white;
-    }
-  }
-}
+
 .nut-fixednav {
   position: fixed;
   z-index: $fixednav-index;

package/dist/packages/menuitem/menuitem.scss

@@ -38,7 +38,7 @@
 .nut-menu-item__wrap-up {
   position: absolute;
   width: 100%;
-  z-index: 2052;
+  z-index: $menu-item-z-index;
   overflow: hidden;
 }
 
@@ -48,7 +48,7 @@
 
 .overlay-fade-enter-active.nut-menu__overlay {
   top: auto;
-  z-index: 2052;
+  z-index: $menu-item-z-index;
 }
 
 .nut-menu__pop.nut-popup {

package/dist/packages/toast/toast.scss

@@ -15,9 +15,10 @@
   height: 100%;
   text-align: center;
   pointer-events: none;
-  z-index: 9999;
+  z-index: 1300;
   &__overlay-default {
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
+    --nutui-overlay-zIndex: 1300;
   }
   &-small {
     .nut-toast__inner {

package/dist/packages/tour/tour.scss

@@ -1,3 +1,4 @@
+
 .nut-tour {
   &-mask {
     position: fixed;

package/dist/packages/uploader/uploader.scss

@@ -68,6 +68,7 @@
     position: relative;
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
+    border-radius: $uploader-picture-border-radius;
     box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
 
     &__progress {
@@ -103,23 +104,20 @@
     &-list {
       width: 100%;
       height: 32px;
+      box-sizing: border-box;
       display: flex;
-      flex-direction: column;
-      position: relative;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
       background-color: $gray5;
 
       .nut-uploader__preview-img__file__name {
+        display: flex;
         -webkit-line-clamp: 1;
         padding: 2px;
         height: 24px;
       }
 
-      .nut-uploader__preview-img__file__del {
-        position: absolute;
-        right: 4px;
-        top: 6px;
-      }
-
       .nut-progress {
         position: absolute;
         left: 0;
@@ -137,6 +135,7 @@
       right: $uploader-preview-close-right;
       top: $uploader-preview-close-top;
       transform: translate(50%, -50%);
+      z-index: 1;
     }
 
     &-img {
@@ -144,6 +143,7 @@
       width: $uploader-picture-width;
       height: $uploader-picture-height;
       border-radius: $uploader-picture-border-radius;
+      overflow: hidden;
 
       i {
         color: $gray1;
@@ -171,7 +171,7 @@
         width: 100%;
         height: 100%;
         position: initial;
-        border-radius: 6px;
+        border-radius: $uploader-picture-border-radius;
       }
 
       &__file {
@@ -184,7 +184,7 @@
 
         &__name {
           display: flex;
-          width: 100%;
+          width: 90%;
           font-size: 12px;
           color: $text-color;
 
@@ -198,8 +198,8 @@
 
           .nut-icon-link {
             &::before {
-              margin-left: -25%;
-              margin-top: -25%;
+              margin-left: -45%;
+              margin-top: -45%;
               transform: none;
             }
           }