@nutui/nutui-react 2.0.0-alpha.12 → 2.0.0-alpha.14

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.12 Fri May 26 2023 15:23:48 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.14 Fri Jun 02 2023 17:08:20 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2504,7 +2504,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: (event) => {
     }
   };
-  const classPrefix$j = "nut-cell";
+  const classPrefix$m = "nut-cell";
   const Cell = (props) => {
     const {
       children,
@@ -2535,19 +2535,19 @@ Check the top-level render call using <` + t + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$j, className),
+        className: classNames(classPrefix$m, className),
         onClick: (event) => handleClick2(event),
         style: baseStyle,
         ...rest
       },
-      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
+      children || /* @__PURE__ */ React.createElement(React.Fragment, null, title || description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$m}__left` }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$m}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$m}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${classPrefix$j}__extra`,
+          className: `${classPrefix$m}__extra`,
           style: styles
         },
         extra
-      ) : null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}__divider` }))
+      ) : null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$m}__divider` }))
     );
   };
   Cell.defaultProps = defaultProps$1r;
@@ -2558,16 +2558,16 @@ Check the top-level render call using <` + t + ">.");
     description: "",
     divider: true
   };
-  const classPrefix$i = "nut-cell-group";
+  const classPrefix$l = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, style, title, description, divider, ...rest } = {
       ...defaultProps$1q,
       ...props
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$i, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$i}__description` }, description) : null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$l, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$l}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$l}__description` }, description) : null, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classPrefix$i}__wrap ${divider ? `${classPrefix$i}__wrap--divider` : ""}`
+        className: `${classPrefix$l}__wrap ${divider ? `${classPrefix$l}__wrap--divider` : ""}`
       },
       children
     ));
@@ -3044,7 +3044,7 @@ Check the top-level render call using <` + t + ">.");
     loading: true,
     lazy: false
   };
-  const classPrefix$h = "nut-image";
+  const classPrefix$k = "nut-image";
   const Image$1 = (props) => {
     const {
       className,
@@ -3155,7 +3155,7 @@ Check the top-level render call using <` + t + ">.");
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$h, className),
+        className: classNames(classPrefix$k, className),
         style: containerStyle,
         onClick: (e) => {
           imageClick(e);
@@ -3321,21 +3321,21 @@ Check the top-level render call using <` + t + ">.");
     contentPosition: "center",
     direction: "horizontal"
   };
-  const classPrefix$g = `nut-divider`;
+  const classPrefix$j = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
       ...defaultProps$1m,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
-      [`${classPrefix$g}`]: true,
-      [`${classPrefix$g}__center`]: children,
-      [`${classPrefix$g}__left`]: contentPosition === "left",
-      [`${classPrefix$g}__right`]: contentPosition === "right",
-      [`${classPrefix$g}__hairline`]: true
+      [`${classPrefix$j}`]: true,
+      [`${classPrefix$j}__center`]: children,
+      [`${classPrefix$j}__left`]: contentPosition === "left",
+      [`${classPrefix$j}__right`]: contentPosition === "right",
+      [`${classPrefix$j}__hairline`]: true
     }) : classNames({
-      [`${classPrefix$g}`]: true,
-      [`${classPrefix$g}__vertical`]: direction === "vertical"
+      [`${classPrefix$j}`]: true,
+      [`${classPrefix$j}__vertical`]: direction === "vertical"
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
@@ -3493,7 +3493,7 @@ Check the top-level render call using <` + t + ">.");
   };
   Layout.defaultProps = defaultProps$1j;
   Layout.displayName = "NutLayout";
-  const classPrefix$f = "nut-row";
+  const classPrefix$i = "nut-row";
   const defaultProps$1i = {
     ...ComponentDefaults,
     type: "",
@@ -3528,7 +3528,7 @@ Check the top-level render call using <` + t + ">.");
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${classPrefix$f}
+    ${classPrefix$i}
    `;
     };
     const parentRow = {
@@ -3627,7 +3627,7 @@ Check the top-level render call using <` + t + ">.");
     threshold: 0,
     zIndex: 2e3
   };
-  const classPrefix$e = "nut-sticky";
+  const classPrefix$h = "nut-sticky";
   const Sticky = (props) => {
     const {
       position,
@@ -3749,7 +3749,7 @@ Check the top-level render call using <` + t + ">.");
       {
         ref: rootRef,
         style: { ...style, ...rootStyle },
-        className: classNames(classPrefix$e, className),
+        className: classNames(classPrefix$h, className),
         ...rest
       },
       /* @__PURE__ */ React.createElement("div", { className: "nut-sticky--box", ref: stickyRef, style: stickyStyle }, children)
@@ -11260,21 +11260,22 @@ Please add \`${key}Action\` when creating your handler.`);
     const isIcon = e.target.className.includes("arrow-icon");
     const isTitle = e.target.className.includes("__title") || isIcon;
     const currentClass = e.currentTarget.className;
-    const isShow = currentClass.includes("nutShow");
+    const isShow = currentClass.includes("sidenavbar-show");
     const arrowIcon = e.currentTarget.querySelector(".arrow-icon");
     const iconClass = arrowIcon.className;
     if (isTitle) {
-      e.currentTarget.className = isShow ? currentClass.replace("nutShow", "nutHide") : currentClass.replace("nutHide", "nutShow");
+      e.currentTarget.className = isShow ? currentClass.replace("sidenavbar-show", "sidenavbar-hide") : currentClass.replace("sidenavbar-hide", "sidenavbar-show");
       arrowIcon.className = isShow ? iconClass.replace("arrow-down", "arrow-up") : iconClass.replace("arrow-up", "arrow-down");
     }
   };
   const OffsetContext = React.createContext(20);
   const defaultProps$1b = {
-    showhead: false,
+    ...ComponentDefaults,
     position: "left",
     width: "80%"
   };
   const SideNavBar = (props) => {
+    const classPrefix2 = "nut-sidenavbar";
     const {
       title,
       visible,
@@ -11282,14 +11283,13 @@ Please add \`${key}Action\` when creating your handler.`);
       position,
       children,
       className,
-      showhead,
       onClose,
       ...rest
     } = {
       ...defaultProps$1b,
       ...props
     };
-    const offset = props.offset ? Number(props.offset) : 20;
+    const indent = props.indent ? Number(props.indent) : 20;
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
@@ -11298,37 +11298,39 @@ Please add \`${key}Action\` when creating your handler.`);
         position,
         onClose
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: classNames(className, classPrefix2), ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: className ? `${className} nut-sidenavbar` : "nut-sidenavbar",
-          ...rest
+          className: `${classPrefix2}__list sidenavbar-show`,
+          onClick: handleClick
         },
-        /* @__PURE__ */ React.createElement("div", { className: "nut-sidenavbar__content" }, /* @__PURE__ */ React.createElement("div", { className: "nut-sidenavbar__list nutShow", onClick: handleClick }, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "nut-sidenavbar__title border-bt ",
-            style: { paddingLeft: `${offset}px` }
+            className: `${classPrefix2}__title ${classPrefix2}-border-bt`,
+            style: { paddingLeft: `${indent}px` }
           },
           title,
           " ",
           /* @__PURE__ */ React.createElement("i", { className: "arrow-icon arrow-down" })
-        ), /* @__PURE__ */ React.createElement(OffsetContext.Provider, { value: offset }, /* @__PURE__ */ React.createElement("div", { className: "nut-sidenavbar__content" }, children))))
-      )
+        ),
+        /* @__PURE__ */ React.createElement(OffsetContext.Provider, { value: indent }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, children))
+      )))
     );
   };
   SideNavBar.defaultProps = defaultProps$1b;
   SideNavBar.displayName = "NutSideNavBar";
   const SideNavBarItem = (props) => {
-    const { title, key, children, onClick, ...rest } = props;
+    const classPrefix2 = "nut-subsidenavbar";
+    const { title, value, children, onClick, ...rest } = props;
     const clickFn = (e) => {
       e.stopPropagation();
-      onClick && onClick({ title, key });
+      onClick && onClick({ title, value });
     };
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "nut-subsidenavbar__item border-bt",
+        className: `${classPrefix2}__item ${classPrefix2}-border-bt`,
         onClick: clickFn,
         ...rest
       },
@@ -11339,17 +11341,17 @@ Please add \`${key}Action\` when creating your handler.`);
     open: true
   };
   const SubSideNavBar = (props) => {
-    const { title, key, children, onClick, open, ...rest } = {
+    const classPrefix2 = "nut-subsidenavbar";
+    const { title, value, children, onClick, open, ...rest } = {
       ...defaultProps$1a,
       ...props
     };
     const offset = React.useContext(OffsetContext);
-    console.log("offset>>>>>>>", offset);
     const listRef = React.useRef(null);
     const setListLevel = React.useCallback(
       (nodeList, level = 1) => {
         const titleClass = nodeList[0].className;
-        if (titleClass.includes("nut-subsidenavbar__title")) {
+        if (titleClass.includes(`${classPrefix2}__title`)) {
           const left = offset * (level + 1);
           nodeList[0].style.paddingLeft = `${left}px`;
         }
@@ -11358,11 +11360,11 @@ Please add \`${key}Action\` when creating your handler.`);
         );
         childNodes.forEach((item) => {
           const itemClass = item.className;
-          if (itemClass.includes("nut-subsidenavbar__item")) {
+          if (itemClass.includes(`${classPrefix2}__item`)) {
             const left = offset * (level + 2);
             item.style.paddingLeft = `${left}px`;
           }
-          if (itemClass.includes("nut-subsidenavbar__list")) {
+          if (itemClass.includes(`${classPrefix2}__list`)) {
             let level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
             level2 += 1;
             item.setAttribute("level", level2.toString());
@@ -11375,8 +11377,8 @@ Please add \`${key}Action\` when creating your handler.`);
     const clickFn = (e) => {
       handleClick(e);
       const currentClass = e.currentTarget.className;
-      const isShow = currentClass.includes("nutShow");
-      onClick && onClick({ title, key, isShow });
+      const isShow = currentClass.includes("sidenavbar-show");
+      onClick && onClick({ title, value, isShow });
     };
     React.useEffect(() => {
       var _a2, _b;
@@ -11384,9 +11386,9 @@ Please add \`${key}Action\` when creating your handler.`);
       (_b = listRef.current) == null ? void 0 : _b.setAttribute("level", "1");
       childNodes && setListLevel(childNodes);
     }, [setListLevel]);
-    const divClass = open ? "nut-subsidenavbar__list  nutShow" : "nut-subsidenavbar__list  nutHide";
+    const divClass = open ? `${classPrefix2}__list sidenavbar-show` : `${classPrefix2}__list sidenavbar-hide`;
     const iconClass = open ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
-    return /* @__PURE__ */ React.createElement("div", { className: divClass, ref: listRef, onClick: clickFn, ...rest }, /* @__PURE__ */ React.createElement("div", { className: "nut-subsidenavbar__title border-bt" }, title, " ", /* @__PURE__ */ React.createElement("i", { className: iconClass })), /* @__PURE__ */ React.createElement("div", { className: "nut-subsidenavbar__content" }, children));
+    return /* @__PURE__ */ React.createElement("div", { className: divClass, ref: listRef, onClick: clickFn, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title ${classPrefix2}-border-bt` }, title, " ", /* @__PURE__ */ React.createElement("i", { className: iconClass })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, children));
   };
   function usePropsValue({
     value,
@@ -11601,7 +11603,7 @@ Please add \`${key}Action\` when creating your handler.`);
     duration: 300,
     autoHeight: false
   };
-  const classPrefix$d = "nut-tabs";
+  const classPrefix$g = "nut-tabs";
   const Tabs = (props) => {
     const {
       activeColor,
@@ -11695,14 +11697,14 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }, [children]);
     const classes = classNames(
-      classPrefix$d,
-      `${classPrefix$d}--${direction}`,
+      classPrefix$g,
+      `${classPrefix$g}--${direction}`,
       className
     );
-    const classesTitle = classNames(`${classPrefix$d}__titles`, {
-      [`${classPrefix$d}__titles--${activeType}`]: activeType,
-      [`${classPrefix$d}__titles--scrollable`]: true,
-      [`${classPrefix$d}__titles--${align}`]: align
+    const classesTitle = classNames(`${classPrefix$g}__titles`, {
+      [`${classPrefix$g}__titles--${activeType}`]: activeType,
+      [`${classPrefix$g}__titles--scrollable`]: true,
+      [`${classPrefix$g}__titles--${align}`]: align
     });
     const tabsActiveStyle = {
       color: activeType === "smile" ? activeColor : "",
@@ -11732,7 +11734,7 @@ Please add \`${key}Action\` when creating your handler.`);
           onClick: () => {
             tabChange(item);
           },
-          className: classNames(`${classPrefix$d}__titles-item`, {
+          className: classNames(`${classPrefix$g}__titles-item`, {
             [`nut-tabs__titles-item--active`]: !item.disabled && String(item.value) === String(value),
             [`nut-tabs__titles-item--disabled`]: item.disabled,
             [`nut-tabs__titles-item--${align}`]: align
@@ -11743,14 +11745,14 @@ Please add \`${key}Action\` when creating your handler.`);
         activeType === "line" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix$d}__titles-item__line`,
+            className: `${classPrefix$g}__titles-item__line`,
             style: tabsActiveStyle
           }
         ),
         activeType === "smile" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix$d}__titles-item__smile`,
+            className: `${classPrefix$g}__titles-item__smile`,
             style: tabsActiveStyle
           },
           /* @__PURE__ */ React.createElement(x$7, { color: activeColor, width: 40, height: 20 })
@@ -11762,13 +11764,13 @@ Please add \`${key}Action\` when creating your handler.`);
               {
                 ellipsis: true
               },
-              `${classPrefix$d}__titles-item__text`
+              `${classPrefix$g}__titles-item__text`
             )
           },
           item.title
         )
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$d}__content__wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$d}__content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
+    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$g}__content__wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$g}__content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
       if (!React.isValidElement(child)) {
         return null;
       }
@@ -13841,7 +13843,7 @@ Please add \`${key}Action\` when creating your handler.`);
     },
     options: []
   };
-  const classPrefix$c = "nut-checkboxgroup";
+  const classPrefix$f = "nut-checkboxgroup";
   const CheckboxGroup = React.forwardRef(
     (props, ref) => {
       const { children } = { ...defaultProps$Z, ...props };
@@ -13923,7 +13925,7 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$c, className, {
+            className: classNames(classPrefix$f, className, {
               [`nut-checkboxgroup--${props.direction}`]: props.direction
             }),
             ...rest
@@ -13945,7 +13947,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onChange: (value) => {
     }
   };
-  const classPrefix$b = "nut-checkbox";
+  const classPrefix$e = "nut-checkbox";
   const Checkbox = (props) => {
     const { children } = {
       ...defaultProps$Y,
@@ -14007,22 +14009,22 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const color = () => {
       if (innerDisabled) {
-        return `${classPrefix$b}__icon--disable`;
+        return `${classPrefix$e}__icon--disable`;
       }
       if (innerChecked) {
         if (innerIndeterminate) {
-          return `${classPrefix$b}__icon--indeterminate`;
+          return `${classPrefix$e}__icon--indeterminate`;
         }
-        return `${classPrefix$b}__icon`;
+        return `${classPrefix$e}__icon`;
       }
-      return `${classPrefix$b}__icon--unchecked`;
+      return `${classPrefix$e}__icon--unchecked`;
     };
     const renderLabel = () => {
       return /* @__PURE__ */ React.createElement(
         "span",
         {
-          className: classNames(`${classPrefix$b}__label `, {
-            [`${classPrefix$b}__label--disabled`]: innerDisabled
+          className: classNames(`${classPrefix$e}__label `, {
+            [`${classPrefix$e}__label--disabled`]: innerDisabled
           })
         },
         children || label
@@ -14041,8 +14043,8 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(classPrefix$b, className, {
-          [`${classPrefix$b}--reverse`]: labelPosition === "left"
+        className: classNames(classPrefix$e, className, {
+          [`${classPrefix$e}--reverse`]: labelPosition === "left"
         }),
         ...rest,
         onClick: handleClick2
@@ -14358,6 +14360,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const InternalPicker = (props, ref) => {
     const { locale } = useConfig();
     const {
+      children,
       visible,
       title,
       options: options2 = [],
@@ -14383,6 +14386,7 @@ Please add \`${key}Action\` when creating your handler.`);
         (_a2 = props.onConfirm) == null ? void 0 : _a2.call(props, setSelectedOptions(), val);
       }
     });
+    const [innerValue, setInnerValue] = React.useState(selectedValue);
     const [columnIndex, setColumnIndex] = React.useState(0);
     const pickerRef = React.useRef(null);
     const [refs, setRefs] = useRefs();
@@ -14422,41 +14426,48 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return "single";
     };
-    const normalListData = () => {
+    const normalListData = (innerValue2) => {
       const type2 = columnsType();
       switch (type2) {
         case "multiple":
           return options2;
         case "cascade":
-          return formatCascade(options2, selectedValue);
+          return formatCascade(options2, innerValue2);
         default:
           return [options2];
       }
     };
     const init = () => {
-      const normalData = normalListData();
+      const normalData = normalListData(
+        innerValue
+      );
       setColumnsList(normalData);
       const data = [];
       normalData.length > 0 && normalData.map((item) => {
         item[0] && data.push(item[0].value);
         return item;
       });
-      if (!defaultValue.length && selectedValue.length === 0) {
-        setSelectedValue([...data]);
+      if (!innerValue.length && innerValue.length === 0) {
+        setInnerValue([...data]);
       }
     };
     React.useEffect(() => {
-      if (!visible) {
-        return;
+      setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
+    }, [visible]);
+    React.useEffect(() => {
+      if (visible) {
+        init();
       }
-      init();
     }, [options2, visible]);
+    React.useEffect(() => {
+      onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
+    }, [innerValue, columnsList]);
     const setSelectedOptions = () => {
       const options22 = [];
       let currOptions = [];
       columnsList.forEach((columnOptions, index) => {
         currOptions = columnOptions.filter(
-          (item) => item.value === selectedValue[index]
+          (item) => item.value === innerValue[index]
         );
         if (currOptions[0]) {
           options22.push(currOptions[0]);
@@ -14466,36 +14477,30 @@ Please add \`${key}Action\` when creating your handler.`);
       });
       return options22;
     };
-    React.useEffect(() => {
-      if (!visible) {
-        return;
-      }
-      onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
-      if (isConfirmEvent.current) {
-        isConfirmEvent.current = false;
-        onConfirm && onConfirm(setSelectedOptions(), selectedValue);
-      }
-    }, [selectedValue, columnsList, visible]);
     const chooseItem = (columnOptions, columnIndex2) => {
       var _a2, _b;
+      const values = [];
+      const start2 = columnIndex2;
       if (columnOptions && Object.keys(columnOptions).length) {
-        if (selectedValue[columnIndex2] !== columnOptions.value) {
+        if (values[columnIndex2] !== columnOptions.value) {
           if (columnsType() === "cascade") {
-            selectedValue[columnIndex2] = columnOptions.value || "";
-            setSelectedValue([...selectedValue]);
+            values[columnIndex2] = columnOptions.value || "";
             while ((_a2 = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _a2[0]) {
-              selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
-              setSelectedValue([...selectedValue]);
+              values[columnIndex2 + 1] = columnOptions.children[0].value;
               columnIndex2++;
               columnOptions = columnOptions.children[0];
             }
             if ((_b = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _b.length) {
-              selectedValue[columnIndex2 + 1] = "";
-              setSelectedValue([...selectedValue]);
+              values[columnIndex2 + 1] = "";
             }
-            setColumnsList(normalListData());
+            const combineResult = [
+              ...innerValue.slice(0, start2),
+              ...values.splice(start2)
+            ];
+            setInnerValue(combineResult);
+            setColumnsList(normalListData(combineResult));
           } else {
-            setSelectedValue((data) => {
+            setInnerValue((data) => {
               const cdata = [...data];
               cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(
                 columnOptions,
@@ -14509,16 +14514,16 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const confirm2 = () => {
-      let movings = false;
+      let moving = false;
       refs.forEach((ref2) => {
         if (ref2.moving)
-          movings = true;
+          moving = true;
         ref2.stopMomentum();
       });
-      if (movings) {
+      if (moving) {
         isConfirmEvent.current = true;
       } else {
-        onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+        setSelectedValue(innerValue);
         closePicker();
       }
       setTimeout(() => {
@@ -14526,8 +14531,8 @@ Please add \`${key}Action\` when creating your handler.`);
       }, 0);
     };
     const closePicker = () => {
-      onClose && onClose(setSelectedOptions(), selectedValue);
-      afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+      onClose && onClose(setSelectedOptions(), innerValue);
+      afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
     };
     const renderTitleBar = () => {
       return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__control` }, /* @__PURE__ */ React.createElement(
@@ -14548,12 +14553,12 @@ Please add \`${key}Action\` when creating your handler.`);
           closePicker();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), children, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           PickerPanel$1,
           {
             ref: setRefs(index),
-            defaultValue: selectedValue == null ? void 0 : selectedValue[index],
+            defaultValue: innerValue == null ? void 0 : innerValue[index],
             options: item,
             threeDimensional,
             chooseItem: (value, index2) => chooseItem(value, index2),
@@ -16466,7 +16471,7 @@ Please add \`${key}Action\` when creating your handler.`);
     digits: 0,
     async: false
   };
-  const classPrefix$a = `nut-inputnumber`;
+  const classPrefix$d = `nut-inputnumber`;
   const InputNumber = (props) => {
     const {
       children,
@@ -16509,8 +16514,8 @@ Please add \`${key}Action\` when creating your handler.`);
     }, []);
     const classes = classNames(
       {
-        [`${classPrefix$a}`]: true,
-        [`${classPrefix$a}--disabled`]: disabled
+        [`${classPrefix$d}`]: true,
+        [`${classPrefix$d}--disabled`]: disabled
       },
       className
     );
@@ -17168,7 +17173,7 @@ Please add \`${key}Action\` when creating your handler.`);
     direction: "vertical",
     options: []
   };
-  const classPrefix$9 = "nut-radiogroup";
+  const classPrefix$c = "nut-radiogroup";
   const RadioGroup = React.forwardRef(
     (props, ref) => {
       const {
@@ -17224,8 +17229,8 @@ Please add \`${key}Action\` when creating your handler.`);
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(classPrefix$9, className, {
-              [`${classPrefix$9}--${props.direction}`]: props.direction
+            className: classNames(classPrefix$c, className, {
+              [`${classPrefix$c}--${props.direction}`]: props.direction
             }),
             ...rest
           },
@@ -18487,6 +18492,14 @@ Please add \`${key}Action\` when creating your handler.`);
   const isPromise = (val) => {
     return isObject(val) && isFunction(val.then) && isFunction(val.catch);
   };
+  const upperCaseFirst = (str) => {
+    var str = str.toLowerCase();
+    str = str.replace(
+      /\b\w+\b/g,
+      (word) => word.substring(0, 1).toUpperCase() + word.substring(1)
+    );
+    return str;
+  };
   const funcInterceptor = (interceptor, {
     args = [],
     done,
@@ -19428,7 +19441,7 @@ Please add \`${key}Action\` when creating your handler.`);
     imageSize: "",
     status: "empty"
   };
-  const classPrefix$8 = `nut-empty`;
+  const classPrefix$b = `nut-empty`;
   const Empty = (props) => {
     const { locale } = useConfig();
     const {
@@ -19463,7 +19476,7 @@ Please add \`${key}Action\` when creating your handler.`);
         };
       });
     }, [imageSize]);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$8} ${className}`, ...rest }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$8}__image`, style: imgStyle }, imageNode), typeof description === "string" ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$8}__description` }, description || locale.noData) : description, children));
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$b} ${className}`, ...rest }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$b}__image`, style: imgStyle }, imageNode), typeof description === "string" ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$b}__description` }, description || locale.noData) : description, children));
   };
   Empty.defaultProps = defaultProps$A;
   Empty.displayName = "NutEmpty";
@@ -20036,7 +20049,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   NoticeBar.defaultProps = defaultProps$y;
   NoticeBar.displayName = "NutNoticeBar";
-  const classPrefix$7 = "nut-notify";
+  const classPrefix$a = "nut-notify";
   let Notification$1 = (_a = class extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
@@ -20087,10 +20100,10 @@ Please add \`${key}Action\` when creating your handler.`);
       const { style, message, type: type2, className, position } = this.props;
       const { show: show2 } = this.state;
       const classes = classNames({
-        [`${classPrefix$7}--popup-top`]: position === "top",
-        [`${classPrefix$7}--popup-bottom`]: position === "bottom",
-        [`${classPrefix$7}`]: true,
-        [`${classPrefix$7}--${type2}`]: true
+        [`${classPrefix$a}--popup-top`]: position === "top",
+        [`${classPrefix$a}--popup-bottom`]: position === "bottom",
+        [`${classPrefix$a}`]: true,
+        [`${classPrefix$a}--${type2}`]: true
       });
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         CSSTransition$1,
@@ -20199,164 +20212,288 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
   };
-  function fillRef(ref, node) {
-    if (typeof ref === "function") {
-      ref(node);
-    } else if (typeof ref === "object" && ref && "current" in ref) {
-      ref.current = node;
+  const getTargetElement = (target) => {
+    let targetElement;
+    if (isFunction(target)) {
+      targetElement = target();
+    } else if ("current" in target) {
+      targetElement = target.current;
+    } else {
+      targetElement = target;
     }
-  }
-  function composeRef(...refs) {
-    return (node) => {
-      refs.forEach((ref) => {
-        fillRef(ref, node);
-      });
-    };
-  }
-  class Trigger extends React.Component {
-    fireEvents(type2, e) {
-      const childCallback = this.props.children.props[type2];
-      if (childCallback) {
-        childCallback(e);
+    return targetElement;
+  };
+  function useClickAway(onClickAway, target, eventName = "click", isListener, outerVar) {
+    const handler = (event) => {
+      const targets = Array.isArray(target) ? target : [target];
+      if (targets.some((item) => {
+        const targetElement = getTargetElement(item);
+        return !targetElement || targetElement.contains(event.target);
+      })) {
+        return;
       }
-      const callback = this.props[type2];
-      if (callback) {
-        callback(e);
+      if (outerVar) {
+        onClickAway();
       }
-    }
-    render() {
-      const { children, className = "" } = this.props;
-      const child = React.Children.only(children);
-      const newChildProps = {
-        key: "trigger"
-      };
-      if (child && child.props && child.props.className) {
-        newChildProps.className = className;
+    };
+    React.useEffect(() => {
+      if (isListener) {
+        window.addEventListener(eventName, handler, true);
+      } else {
+        window.removeEventListener(eventName, handler, true);
       }
-      const cloneProps = {
-        ...newChildProps
+      return () => {
+        window.removeEventListener(eventName, handler, true);
       };
-      cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
-      const trigger = React.cloneElement(child, cloneProps);
-      return trigger;
-    }
+    }, [target]);
   }
   const defaultProps$x = {
     ...ComponentDefaults,
     list: [],
-    theme: "light",
     location: "bottom",
     visible: false,
-    offset: 20,
+    offset: [0, 12],
+    targetId: "",
     className: "",
-    onClick: (e) => {
+    background: "",
+    color: "",
+    showArrow: true,
+    duration: 0.3,
+    overlay: false,
+    overlayClassName: "",
+    overlayStyle: {},
+    closeOnClickOutside: true,
+    closeOnClickAction: true,
+    closeOnOverlayClick: true,
+    onClick: () => {
+    },
+    onOpen: () => {
     },
-    onChoose: (item, index) => {
+    onClose: () => {
+    },
+    onSelect: (item, index) => {
     }
   };
+  const classPrefix$9 = `nut-popover`;
   const Popover = (props) => {
     const {
       children,
       list,
-      theme,
       location,
       visible,
       offset,
+      targetId,
+      overlay,
+      overlayStyle,
+      overlayClassName,
+      closeOnClickOutside,
+      closeOnClickAction,
+      closeOnOverlayClick,
       className,
+      showArrow,
       style,
+      background,
+      color,
       onClick,
-      onChoose,
+      onOpen,
+      onClose,
+      onSelect,
       ...reset
     } = {
       ...defaultProps$x,
       ...props
     };
-    const goodItem = React.useRef(null);
-    setTimeout(() => {
-      if (goodItem.current && getRect(goodItem.current)) {
-        setElWidth(getRect(goodItem.current).width);
-        setElHeight(getRect(goodItem.current).height);
-      }
-    });
-    const [classes, setClasses] = React.useState("");
+    const popoverRef = React.useRef(null);
+    const popoverContentRef = React.useRef(null);
+    const [showPopup, setShowPopup] = React.useState(false);
     const [elWidth, setElWidth] = React.useState(0);
     const [elHeight, setElHeight] = React.useState(0);
-    const [popoverContent, setPopoverContent] = React.useState("");
-    const [popoverArrow, setPopoverArrow] = React.useState("");
+    const [rootPosition, setRootPosition] = React.useState();
     React.useEffect(() => {
-      setClasses(classesSelf());
-      setPopoverContent(popoverContentSelf());
-      setPopoverArrow(popoverArrowSelf());
-    }, [list, theme]);
-    const getStyle = () => {
-      const offNumer = Number(offset) ? Number(offset) : 0;
-      const style2 = {};
-      if (location.includes("top")) {
-        style2.bottom = `${elHeight + offNumer}px`;
-      } else if (location.includes("right")) {
-        style2.left = `${elWidth + offNumer}px`;
-      } else if (location.includes("left")) {
-        style2.right = `${elWidth + offNumer}px`;
+      setShowPopup(visible);
+      if (visible) {
+        setTimeout(() => {
+          getContentWidth();
+        }, 0);
+      }
+    }, [visible]);
+    const targetSet = [
+      targetId ? document.querySelector(`#${targetId}`) : popoverRef.current,
+      popoverContentRef.current
+    ];
+    useClickAway(
+      () => {
+        props.onClick && props.onClick();
+        onClose && onClose();
+      },
+      targetSet,
+      "touchstart",
+      visible,
+      closeOnClickOutside
+    );
+    const getContentWidth = () => {
+      let rect = getRect(popoverRef.current);
+      if (targetId) {
+        setTimeout(() => {
+          rect = getRect(document.querySelector(`#${targetId}`));
+          setRootPosition({
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            top: rect.top,
+            right: rect.right
+          });
+          if (popoverContentRef.current) {
+            setElWidth(popoverContentRef.current.clientWidth);
+            setElHeight(popoverContentRef.current.clientHeight);
+          }
+        }, 0);
       } else {
-        style2.top = `${elHeight + offNumer}px`;
+        setRootPosition({
+          width: rect.width,
+          height: rect.height,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right
+        });
+        if (popoverContentRef.current) {
+          setElWidth(popoverContentRef.current.clientWidth);
+          setElHeight(popoverContentRef.current.clientHeight);
+        }
       }
-      return style2;
-    };
-    const classesSelf = () => {
-      const prefixCls2 = "nut-popover";
-      return `${prefixCls2} ${theme ? `${prefixCls2}--${theme}` : ""}`;
     };
-    const popoverContentSelf = () => {
-      const prefixCls2 = "popover-content";
-      return `${prefixCls2}-show ${prefixCls2} ${location ? `${prefixCls2}--${location}` : ""}`;
+    const classes = classNames(
+      {
+        [`${classPrefix$9}`]: true
+      },
+      className
+    );
+    const customStyle = () => {
+      const styles = {};
+      if (background) {
+        styles.background = background;
+      }
+      if (color) {
+        styles.color = color;
+      }
+      return styles;
     };
-    const filter = () => {
-      const ms = ["top", "bottom", "left", "right"];
-      return ms.filter((m) => location.includes(m))[0];
+    const popoverArrow = () => {
+      const prefixCls2 = "nut-popover-arrow";
+      const loca = location;
+      const direction = loca.split("-")[0];
+      return `${prefixCls2} ${prefixCls2}-${direction} ${prefixCls2}--${loca}`;
     };
-    const popoverArrowSelf = () => {
-      const prefixCls2 = "popover-arrow";
-      return `${prefixCls2} ${prefixCls2}-${filter()} ${location ? `${prefixCls2}--${location}` : ""}`;
+    const popoverArrowStyle = () => {
+      const styles = {};
+      const { background: background2 } = props;
+      const direction = location.split("-")[0];
+      if (background2) {
+        styles[`border${upperCaseFirst(direction)}Color`] = background2;
+      }
+      return styles;
     };
-    const handleClick2 = (e) => {
-      if (props.onClick) {
-        props.onClick(e);
+    const getRootPosition = () => {
+      let styles = {};
+      if (!rootPosition)
+        return {};
+      const contentWidth = elWidth;
+      const contentHeight = elHeight;
+      const { width, height, left, top, right } = rootPosition;
+      const direction = location.split("-")[0];
+      const skew = location.split("-")[1];
+      let cross = 0;
+      let parallel = 0;
+      if (Array.isArray(offset) && offset.length == 2) {
+        cross += +offset[1];
+        parallel += +offset[0];
+      }
+      if (width) {
+        if (["bottom", "top"].includes(direction)) {
+          const h = direction == "bottom" ? height + cross : -(contentHeight + cross);
+          styles.top = `${top + h}px`;
+          if (!skew) {
+            styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
+          }
+          if (skew == "start") {
+            styles.left = `${left + parallel}px`;
+          }
+          if (skew == "end") {
+            styles.left = `${right + parallel}px`;
+          }
+        }
+        if (["left", "right"].includes(direction)) {
+          const contentW = direction == "left" ? -(contentWidth + cross) : width + cross;
+          styles.left = `${left + contentW}px`;
+          if (!skew) {
+            styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
+          }
+          if (skew == "start") {
+            styles.top = `${top + parallel}px`;
+          }
+          if (skew == "end") {
+            styles.top = `${top + height + parallel}px`;
+          }
+        }
       }
+      return styles;
     };
-    const handleChoose = (item, index) => {
+    const handleSelect = (item, index) => {
       if (!item.disabled) {
-        onChoose(item, index);
+        onSelect(item, index);
+      }
+      if (closeOnClickAction) {
+        props.onClick && props.onClick();
+        onClose && onClose();
       }
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, !targetId && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `${classes} ${className}`,
-        style: { ...style },
-        ...reset
+        className: "nut-popover-wrapper",
+        ref: popoverRef,
+        onClick: () => {
+          props.onClick && props.onClick();
+          if (!visible) {
+            onOpen && onOpen();
+          } else {
+            onClose && onClose();
+          }
+        },
+        style
+      },
+      Array.isArray(children) ? children[0] : children
+    ), /* @__PURE__ */ React.createElement("div", { className: classes, style: getRootPosition(), ...reset }, /* @__PURE__ */ React.createElement(
+      Popup,
+      {
+        className: `nut-popover-content nut-popover-content--${location}`,
+        style: customStyle(),
+        position: "default",
+        overlay,
+        overlayStyle,
+        overlayClassName,
+        closeOnOverlayClick,
+        visible: showPopup
       },
-      /* @__PURE__ */ React.createElement(Trigger, { forwardedRef: goodItem }, /* @__PURE__ */ React.createElement("div", { onClick: (e) => handleClick2(e) }, Array.isArray(children) ? children[0] : children, visible ? /* @__PURE__ */ React.createElement("div", { className: `${popoverContent}`, style: getStyle() }, /* @__PURE__ */ React.createElement("div", { className: `${popoverArrow}` }), Array.isArray(children) ? children[1] : "", /* @__PURE__ */ React.createElement("div", null, list.map((item, i) => {
+      /* @__PURE__ */ React.createElement("div", { className: "nut-popover-content-group", ref: popoverContentRef }, showArrow && /* @__PURE__ */ React.createElement("div", { className: popoverArrow(), style: popoverArrowStyle() }), Array.isArray(children) ? children[1] : "", list.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
-            key: item.name,
-            className: `popover-menu-item ${item.disabled ? "disabled" : ""}`,
-            onClick: () => {
-              handleChoose(item, i);
-            }
+            className: classNames(
+              {
+                "nut-popover-menu-item": true,
+                "nut-popover-menu-disabled": item.disabled
+              },
+              item.className
+            ),
+            key: item.key,
+            onClick: () => handleSelect(item, index)
           },
           item.icon ? item.icon : null,
-          /* @__PURE__ */ React.createElement("div", { className: "popover-menu-item-name" }, item.name)
+          /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name)
         );
-      }))) : null))
-    ), visible ? /* @__PURE__ */ React.createElement(
-      Overlay,
-      {
-        visible,
-        onClick: (e) => handleClick2(e),
-        style: { background: "transparent" }
-      }
-    ) : null);
+      }))
+    )));
   };
   Popover.defaultProps = defaultProps$x;
   Popover.displayName = "NutPopover";
@@ -20570,7 +20707,7 @@ Please add \`${key}Action\` when creating your handler.`);
     src: "",
     alt: ""
   };
-  const classPrefix$6 = `nut-avatar`;
+  const classPrefix$8 = `nut-avatar`;
   const Avatar = (props) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const {
@@ -20602,7 +20739,7 @@ Please add \`${key}Action\` when creating your handler.`);
       [`nut-avatar-${((_a2 = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _a2.size) || size || "normal"}`]: true,
       [`nut-avatar-${((_b = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _b.shape) || shape}`]: true
     });
-    const cls = classNames(classPrefix$6, classes, className);
+    const cls = classNames(classPrefix$8, classes, className);
     const styles = {
       width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
       height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
@@ -20918,7 +21055,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   Swipe.defaultProps = defaultProps$t;
   Swipe.displayName = "NutSwipe";
-  const classPrefix$5 = "nut-toast";
+  const classPrefix$7 = "nut-toast";
   class Notification extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
@@ -20971,7 +21108,7 @@ Please add \`${key}Action\` when creating your handler.`);
             iconNode = /* @__PURE__ */ React__namespace.createElement(x$8, null);
             break;
         }
-        return /* @__PURE__ */ React__namespace.createElement("p", { className: `${classPrefix$5}__icon-wrapper` }, iconNode);
+        return /* @__PURE__ */ React__namespace.createElement("p", { className: `${classPrefix$7}__icon-wrapper` }, iconNode);
       }
       return icon;
     }
@@ -21004,22 +21141,22 @@ Please add \`${key}Action\` when creating your handler.`);
         {
           visible: true,
           style,
-          className: `${classPrefix$5}__overlay-default ${className}`,
+          className: `${classPrefix$7}__overlay-default ${className}`,
           onClick: () => {
             console.log("onclick");
             this.clickCover();
           },
           closeOnOverlayClick
         },
-        /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$5} ${classes}`, id: `toast-${id}` }, /* @__PURE__ */ React__namespace.createElement(
+        /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$7} ${classes}`, id: `toast-${id}` }, /* @__PURE__ */ React__namespace.createElement(
           "div",
           {
-            className: `${classPrefix$5}__inner ${classPrefix$5}-${position} ${contentClassName}`,
+            className: `${classPrefix$7}__inner ${classPrefix$7}-${position} ${contentClassName}`,
             style: contentStyle
           },
           this.renderIcon(),
-          title ? /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$5}-title` }, title) : null,
-          /* @__PURE__ */ React__namespace.createElement("span", { className: `${classPrefix$5}-text` }, content)
+          title ? /* @__PURE__ */ React__namespace.createElement("div", { className: `${classPrefix$7}-title` }, title) : null,
+          /* @__PURE__ */ React__namespace.createElement("span", { className: `${classPrefix$7}-text` }, content)
         ))
       ));
     }
@@ -21130,7 +21267,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onClick: (event) => {
     }
   };
-  const classPrefix$4 = `nut-animate`;
+  const classPrefix$6 = `nut-animate`;
   const Animate = (props) => {
     const { className, type: type2, action, loop: loop2, onClick, children, ...rest } = {
       ...defaultProps$s,
@@ -21139,7 +21276,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const [clicked, setClicked] = React.useState(false);
     const classes = classNames({
       "nut-ani-container": true,
-      [`${classPrefix$4}-${type2}`]: action === "initial" || clicked ? type2 : false,
+      [`${classPrefix$6}-${type2}`]: action === "initial" || clicked ? type2 : false,
       loop: loop2
     });
     const cls = classNames(classes, className);
@@ -21157,37 +21294,38 @@ Please add \`${key}Action\` when creating your handler.`);
   Animate.defaultProps = defaultProps$s;
   Animate.displayName = "NutAnimate";
   const defaultProps$r = {
-    maxLen: 0,
-    endNumber: "",
-    delaySpeed: 300,
-    easeSpeed: 1,
-    thousands: false,
-    className: ""
+    ...ComponentDefaults,
+    length: 0,
+    value: "",
+    delay: 300,
+    duration: 1,
+    thousands: false
   };
   const CountUp = (props) => {
     const {
-      maxLen,
-      endNumber,
-      delaySpeed,
-      easeSpeed,
+      length,
+      value,
+      delay,
+      duration,
       className,
       thousands,
+      style,
       ...reset
     } = {
       ...defaultProps$r,
       ...props
     };
-    const b = cn("countup");
+    const classPrefix2 = "nut-countup";
     const countupRef = React.useRef(null);
     const timerRef = React.useRef(0);
     const numbers = Array.from({ length: 10 }, (v, i) => i);
     const getShowNumber = () => {
-      const splitArr = endNumber.split(".");
-      const intNumber = maxLen && splitArr[0].length < maxLen ? (Array(maxLen).join("0") + splitArr[0]).slice(-maxLen) : splitArr[0];
+      const splitArr = value.split(".");
+      const intNumber = length && splitArr[0].length < length ? (Array(length).join("0") + splitArr[0]).slice(-length) : splitArr[0];
       const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") : intNumber}${splitArr[1] ? "." : ""}${splitArr[1] || ""}`;
       return currNumber.split("");
     };
-    const numerArr = React.useMemo(getShowNumber, [endNumber, maxLen, thousands]);
+    const numerArr = React.useMemo(getShowNumber, [value, length, thousands]);
     const setNumberTransform = () => {
       if (countupRef.current) {
         const numberItems = countupRef.current.querySelectorAll(
@@ -21208,28 +21346,33 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const numberEaseStyle = {
-      transition: `transform ${easeSpeed}s ease-in-out`
+      transition: `transform ${duration}s ease-in-out`
     };
     React.useEffect(() => {
       timerRef.current = window.setTimeout(() => {
         setNumberTransform();
-      }, delaySpeed);
+      }, delay);
       return () => {
         window.clearTimeout(timerRef.current);
       };
     }, [numerArr]);
-    return /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, ref: countupRef }, /* @__PURE__ */ React.createElement("ul", { className: b("list") }, numerArr.map((item, idx) => {
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, ref: countupRef }, /* @__PURE__ */ React.createElement("ul", { className: `${classPrefix2}__list` }, numerArr.map((item, idx) => {
       return /* @__PURE__ */ React.createElement(
         "li",
         {
-          className: `${b("listitem", {
-            number: !Number.isNaN(Number(item))
-          })}`,
+          className: `${classPrefix2}__listitem ${!Number.isNaN(Number(item)) ? `${classPrefix2}__listitem--number` : ""}`,
           key: idx
         },
-        !Number.isNaN(Number(item)) ? /* @__PURE__ */ React.createElement("span", { className: b("number"), style: numberEaseStyle }, [...numbers, ...numbers].map((number2, subidx) => {
-          return /* @__PURE__ */ React.createElement("span", { key: subidx }, number2);
-        })) : /* @__PURE__ */ React.createElement("span", { className: b("separator") }, item)
+        !Number.isNaN(Number(item)) ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: `${classPrefix2}__number`,
+            style: numberEaseStyle
+          },
+          [...numbers, ...numbers].map((number2, subidx) => {
+            return /* @__PURE__ */ React.createElement("span", { key: subidx }, number2);
+          })
+        ) : /* @__PURE__ */ React.createElement("span", { className: `${classPrefix2}__separator` }, item)
       );
     })));
   };
@@ -21509,12 +21652,12 @@ Please add \`${key}Action\` when creating your handler.`);
     gap: "-8",
     level: "left"
   };
-  const classPrefix$3 = `nut-avatar-group`;
+  const classPrefix$5 = `nut-avatar-group`;
   const AvatarGroup = (props) => {
     const propAvatarGroup = { ...defaultProps$o, ...props };
     const { className, style, children } = propAvatarGroup;
     const avatarGroupRef = React.useRef(null);
-    const cls = classNames(classPrefix$3, className);
+    const cls = classNames(classPrefix$5, className);
     const parentAvatar = {
       propAvatarGroup,
       avatarGroupRef
@@ -21532,7 +21675,7 @@ Please add \`${key}Action\` when creating your handler.`);
     background: "#e5e9f2",
     clockwise: true
   };
-  const classPrefix$2 = `nut-circleprogress`;
+  const classPrefix$4 = `nut-circleprogress`;
   const CircleProgress = (props) => {
     var _a2;
     const {
@@ -21551,7 +21694,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$n,
       ...props
     };
-    const classes = classNames(className, classPrefix$2);
+    const classes = classNames(className, classPrefix$4);
     const refRandomId = Math.random().toString(36).slice(-8);
     const styles = {
       height: `${Number(radius) * 2}px`,
@@ -22054,7 +22197,7 @@ Please add \`${key}Action\` when creating your handler.`);
     symbol: "...",
     lineHeight: "20"
   };
-  const classPrefix$1 = `nut-ellipsis`;
+  const classPrefix$3 = `nut-ellipsis`;
   const Ellipsis = (props) => {
     var _a2, _b;
     const {
@@ -22077,7 +22220,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const [expanded, setExpanded] = React.useState(false);
     const ellipsis = React.useRef();
     const root2 = React.useRef(null);
-    const classes = classNames(classPrefix$1, className);
+    const classes = classNames(classPrefix$3, className);
     React.useLayoutEffect(() => {
       if (content) {
         createContainer();
@@ -22221,6 +22364,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Ellipsis.defaultProps = defaultProps$j;
   Ellipsis.displayName = "NutEllipsis";
   const defaultProps$i = {
+    ...ComponentDefaults,
     source: {
       type: {},
       src: ""
@@ -22235,15 +22379,13 @@ Please add \`${key}Action\` when creating your handler.`);
       loop: false
     }
   };
+  const classPrefix$2 = `nut-video`;
   const Video = (props) => {
     const {
       children,
       source,
       options: options2,
       className,
-      play,
-      pause,
-      playend,
       onPlay,
       onPause,
       onPlayEnd,
@@ -22253,8 +22395,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const rootRef = React.useRef(null);
-    const b = cn("video");
-    const classes = classNames(className, b(""));
+    const classes = classNames(className, classPrefix$2);
     React.useEffect(() => {
       init();
     }, []);
@@ -22274,16 +22415,13 @@ Please add \`${key}Action\` when creating your handler.`);
         }
         videoRef.addEventListener("play", () => {
           onPlay && onPlay(videoRef);
-          play && play(videoRef);
         });
         videoRef.addEventListener("pause", () => {
           onPause && onPause(videoRef);
-          pause && pause(videoRef);
         });
         videoRef.addEventListener("ended", () => {
           videoRef.currentTime = 0;
           onPlayEnd && onPlayEnd(videoRef);
-          playend && playend(videoRef);
         });
       }
     };
@@ -22311,14 +22449,14 @@ Please add \`${key}Action\` when creating your handler.`);
     current: 0,
     direction: "horizontal"
   };
-  const classPrefix = `nut-indicator`;
+  const classPrefix$1 = `nut-indicator`;
   const Indicator = (props) => {
     const { total, current, children, className, direction, ...rest } = {
       ...defaultProps$h,
       ...props
     };
     const classes = classNames({
-      [`${classPrefix}__vertical`]: direction === "vertical"
+      [`${classPrefix$1}__vertical`]: direction === "vertical"
     });
     const renderElement = () => {
       const childs = [];
@@ -22328,9 +22466,9 @@ Please add \`${key}Action\` when creating your handler.`);
             "div",
             {
               key: item,
-              className: `${classPrefix}__dot ${classPrefix}__active`
+              className: `${classPrefix$1}__dot ${classPrefix$1}__active`
             }
-          ) : /* @__PURE__ */ React.createElement("div", { key: item, className: `${classPrefix}__dot` })
+          ) : /* @__PURE__ */ React.createElement("div", { key: item, className: `${classPrefix$1}__dot` })
         );
       }
       return childs;
@@ -23839,22 +23977,24 @@ Please add \`${key}Action\` when creating your handler.`);
   Tag.defaultProps = defaultProps$7;
   Tag.displayName = "NutTag";
   const defaultProps$6 = {
-    barrageList: [],
-    frequency: 500,
+    ...ComponentDefaults,
+    list: [],
+    interval: 500,
     loop: true,
-    speeds: 3e3,
+    duration: 3e3,
     rows: 3,
-    top: 10
+    gapY: 10
   };
+  const classPrefix = `nut-barrage`;
   const InternalBarrage = (props, ref) => {
     const {
       className,
-      frequency,
+      interval,
       loop: loop2,
-      barrageList,
-      speeds,
+      list,
+      duration,
       rows,
-      top,
+      gapY,
       ...restProps
     } = {
       ...defaultProps$6,
@@ -23865,15 +24005,14 @@ Please add \`${key}Action\` when creating your handler.`);
     const barrageCWidth = React.useRef(0);
     const timer = React.useRef(0);
     const index = React.useRef(0);
-    const b = cn("barrage");
-    const classes = classNames(className, b(""));
+    const classes = classNames(classPrefix, className);
     React.useImperativeHandle(ref, () => ({
       add: (word) => {
-        const _index = index.current % barrageList.length;
-        if (!loop2 && index.current === barrageList.length) {
-          barrageList.splice(barrageList.length, 0, word);
+        const _index = index.current % list.length;
+        if (!loop2 && index.current === list.length) {
+          list.splice(list.length, 0, word);
         } else {
-          barrageList.splice(_index, 0, word);
+          list.splice(_index, 0, word);
         }
       }
     }));
@@ -23893,27 +24032,27 @@ Please add \`${key}Action\` when creating your handler.`);
       return () => {
         clearInterval(timer.current);
       };
-    }, [barrageList]);
+    }, [list]);
     const run = () => {
       clearInterval(timer.current);
       timer.current = window.setTimeout(() => {
         play();
-      }, frequency);
+      }, interval);
     };
     const play = () => {
-      if (!loop2 && index.current >= barrageList.length) {
+      if (!loop2 && index.current >= list.length) {
         return;
       }
-      const _index = loop2 ? index.current % barrageList.length : index.current;
+      const _index = loop2 ? index.current % list.length : index.current;
       const el = document.createElement(`div`);
-      el.innerHTML = barrageList[_index];
+      el.innerHTML = list[_index];
       el.classList.add("barrage-item");
       barrageContainer.current.appendChild(el);
       const width = el.offsetWidth;
       const height = el.offsetHeight;
       el.classList.add("move");
-      el.style.animationDuration = `${speeds}ms`;
-      el.style.top = `${_index % rows * (height + top) + 20}px`;
+      el.style.animationDuration = `${duration}ms`;
+      el.style.top = `${_index % rows * (height + gapY) + 20}px`;
       el.style.width = `${width}px`;
       el.addEventListener("animationend", () => {
         barrageContainer.current.removeChild(el);
@@ -24172,43 +24311,42 @@ Please add \`${key}Action\` when creating your handler.`);
   TimeSelect.defaultProps = defaultProps$2;
   TimeSelect.displayName = "NutTimeSelect";
   const defaultProps$1 = {
-    rate: 0,
+    ...ComponentDefaults,
+    value: 0,
     digits: 2,
-    showSign: false,
-    showZero: false,
+    symbol: false,
+    zero: false,
     arrowLeft: false,
-    syncTextColor: true,
-    textColor: "#333",
+    syncColor: true,
+    color: "#333",
     riseColor: "#fa2c19",
     dropColor: "#64b578",
-    upIcon: null,
-    downIcon: null,
-    className: ""
+    riseIcon: null,
+    downIcon: null
   };
   const TrendArrow = (props) => {
     const {
-      rate,
+      value,
       digits,
-      showSign,
-      showZero,
+      symbol,
+      zero,
       arrowLeft,
-      syncTextColor,
-      textColor,
+      syncColor,
+      color,
       riseColor,
       dropColor,
-      upIcon,
+      riseIcon,
       downIcon,
       className,
+      style,
       children,
       ...rest
     } = { ...defaultProps$1, ...props };
-    const b = cn("trendarrow");
-    const handleClick2 = () => {
-    };
-    const rateTrend = React.useRef(rate > 0);
+    const classPrefix2 = "nut-trendarrow";
+    const rateTrend = React.useRef(value > 0);
     const myFixed = (num, digit = 2) => {
       if (Object.is(parseFloat(num), NaN)) {
-        return console.log(`传入的值：${num}不是一个数字`);
+        return console.warn(`传入的值：${num}不是一个数字`);
       }
       num = parseFloat(num);
       const numPow = Math.pow(10, digit);
@@ -24216,20 +24354,20 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const calcStyle = (() => {
       const arrowColor = rateTrend.current ? riseColor : dropColor;
-      const textEquArrowColor = syncTextColor ? arrowColor : textColor;
-      const style = {
-        color: rate === 0 ? textColor : textEquArrowColor
+      const textEquArrowColor = syncColor ? arrowColor : color;
+      const style2 = {
+        color: value === 0 ? color : textEquArrowColor
       };
-      return style;
+      return style2;
     })();
     const calcRate = (() => {
-      rateTrend.current = rate > 0;
-      const absRate = Math.abs(rate);
-      if (!showZero && rate === 0) {
+      rateTrend.current = value > 0;
+      const absRate = Math.abs(value);
+      if (!zero && value === 0) {
         return "--";
       }
       const resultRate = `${// eslint-disable-next-line no-nested-ternary
-      showSign && rate !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
+      symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
       return resultRate;
     })();
     const calcIconProps = (() => {
@@ -24240,13 +24378,21 @@ Please add \`${key}Action\` when creating your handler.`);
     })();
     const renderContent = (arrowLeft2) => {
       const classNameSuffix = !arrowLeft2 ? "icon-after" : "icon-before";
-      return /* @__PURE__ */ React.createElement("span", { className: `${b(classNameSuffix)} ${b("rate")}`, style: calcStyle }, calcRate);
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: `${classPrefix2}__${classNameSuffix} ${classPrefix2}__value`,
+          style: calcStyle
+        },
+        calcRate
+      );
     };
-    return /* @__PURE__ */ React.createElement("div", { className: `${b()} ${className}`, ...rest, onClick: handleClick2 }, !arrowLeft && renderContent(!arrowLeft), children || /* @__PURE__ */ React.createElement(React.Fragment, null, Number(rate) !== 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, rateTrend ? /* @__PURE__ */ React.createElement(y, { color: calcIconProps.color }) : /* @__PURE__ */ React.createElement(y$1, { color: calcIconProps.color }))), arrowLeft && renderContent(!arrowLeft));
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, !arrowLeft && renderContent(!arrowLeft), Number(value) !== 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, rateTrend.current ? /* @__PURE__ */ React.createElement(React.Fragment, null, riseIcon || /* @__PURE__ */ React.createElement(y, { color: calcIconProps.color })) : /* @__PURE__ */ React.createElement(React.Fragment, null, downIcon || /* @__PURE__ */ React.createElement(y$1, { color: calcIconProps.color }))), arrowLeft && renderContent(!arrowLeft));
   };
   TrendArrow.defaultProps = defaultProps$1;
   TrendArrow.displayName = "NutTrendArrow";
   const defaultProps = {
+    ...ComponentDefaults,
     content: "",
     fullPage: true,
     zIndex: 2e3,
@@ -24258,9 +24404,8 @@ Please add \`${key}Action\` when creating your handler.`);
     imageWidth: 120,
     imageHeight: 64,
     rotate: -22,
-    fontColor: "rgba(0,0,0,.15)",
+    color: "rgba(0,0,0,.15)",
     fontStyle: "normal",
-    fontFamily: "PingFang SC",
     fontWeight: "normal",
     fontSize: 14
   };
@@ -24279,22 +24424,20 @@ Please add \`${key}Action\` when creating your handler.`);
       imageWidth,
       imageHeight,
       rotate,
-      fontColor,
+      color,
       fontStyle,
       fontFamily,
       fontWeight,
       fontSize,
-      style,
-      children
+      style
     } = {
       ...defaultProps,
       ...props
     };
     const [base64Url, setBase64Url] = React.useState("");
-    const b = cn("watermark");
-    const classes = classNames({
-      [`${b("")}`]: true,
-      [`${b("")}-full-page`]: fullPage
+    const classPrefix2 = "nut-watermark";
+    const classes = classNames(classPrefix2, {
+      [`${classPrefix2}-full-page`]: fullPage
     });
     const cls = classNames(classes, className);
     React.useEffect(() => {
@@ -24336,7 +24479,7 @@ Please add \`${key}Action\` when creating your handler.`);
           ctx2.rotate(Math.PI / 180 * Number(rotate));
           const markSize = Number(fontSize) * ratio;
           ctx2.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
-          ctx2.fillStyle = fontColor;
+          ctx2.fillStyle = color;
           ctx2.fillText(content, 0, 0);
           ctx2.restore();
           setBase64Url(canvas.toDataURL());