@nutui/nutui-react 1.2.1 → 1.2.2-beta.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.1 Wed Aug 03 2022 16:26:41 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.2.1 Wed Aug 10 2022 14:06:15 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -45,7 +45,7 @@ classname_production_min.cn = e$1, classname_production_min.withNaming = r$1;
   classname.exports = classname_production_min;
 }
 const cn = classname.exports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
-const defaultProps$14 = {
+const defaultProps$17 = {
   name: "",
   size: "",
   classPrefix: "nutui-icon",
@@ -73,7 +73,7 @@ const Icon = (props) => {
     click,
     ...rest
   } = {
-    ...defaultProps$14,
+    ...defaultProps$17,
     ...props
   };
   const isImage = name ? name.indexOf("/") !== -1 : false;
@@ -105,9 +105,9 @@ const Icon = (props) => {
     ...hasSrc()
   }, children);
 };
-Icon.defaultProps = defaultProps$14;
+Icon.defaultProps = defaultProps$17;
 Icon.displayName = "NutIcon";
-const defaultProps$13 = {
+const defaultProps$16 = {
   className: "",
   color: "",
   shape: "round",
@@ -140,7 +140,7 @@ const Button = (props) => {
     style,
     ...rest
   } = {
-    ...defaultProps$13,
+    ...defaultProps$16,
     ...props
   };
   const getStyle = useCallback(() => {
@@ -213,7 +213,7 @@ const Button = (props) => {
     name: icon
   }) : "", children));
 };
-Button.defaultProps = defaultProps$13;
+Button.defaultProps = defaultProps$16;
 Button.displayName = "NutButton";
 function _setPrototypeOf(o, p2) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p3) {
@@ -1429,7 +1429,7 @@ var useContext = React__default.useContext;
 function useHistory() {
   return useContext(historyContext);
 }
-const defaultProps$12 = {
+const defaultProps$15 = {
   title: null,
   subTitle: null,
   desc: "",
@@ -1469,7 +1469,7 @@ const Cell = (props) => {
     linkSlot,
     ...rest
   } = {
-    ...defaultProps$12,
+    ...defaultProps$15,
     ...props
   };
   const b2 = cn("cell");
@@ -1515,9 +1515,9 @@ const Cell = (props) => {
     className: b2("link")
   }) : linkSlot));
 };
-Cell.defaultProps = defaultProps$12;
+Cell.defaultProps = defaultProps$15;
 Cell.displayName = "NutCell";
-const defaultProps$11 = {
+const defaultProps$14 = {
   title: "",
   desc: "",
   titleSlot: null,
@@ -1526,7 +1526,7 @@ const defaultProps$11 = {
 };
 const CellGroup = (props) => {
   const { children, classPrefix, title, desc, titleSlot, descSlot } = {
-    ...defaultProps$11,
+    ...defaultProps$14,
     ...props
   };
   const b2 = cn("cell-group");
@@ -1540,7 +1540,7 @@ const CellGroup = (props) => {
     className: b2("wrap")
   }, children));
 };
-CellGroup.defaultProps = defaultProps$11;
+CellGroup.defaultProps = defaultProps$14;
 CellGroup.displayName = "NutCellGroup";
 var classnames = { exports: {} };
 /*!
@@ -2080,7 +2080,7 @@ CSSTransition.defaultProps = {
 };
 CSSTransition.propTypes = {};
 var CSSTransition$1 = CSSTransition;
-const defaultProps$10 = {
+const defaultProps$13 = {
   position: "center",
   transition: "",
   style: {},
@@ -2236,7 +2236,7 @@ const Popup = (props) => {
     size: "12px"
   })) : "")));
 };
-Popup.defaultProps = defaultProps$10;
+Popup.defaultProps = defaultProps$13;
 Popup.displayName = "NutPopup";
 const zhCN = {
   save: "\u4FDD\u5B58",
@@ -2328,9 +2328,20 @@ const zhCN = {
     complaintsText: "\u6211\u8981\u6295\u8BC9",
     additionalReview: (day) => `\u8D2D\u4E70${day}\u5929\u540E\u8FFD\u8BC4`,
     additionalImages: (length) => `${length}\u5F20\u8FFD\u8BC4\u56FE\u7247`
+  },
+  searchbar: {
+    basePlaceholder: "\u4E0A\u4EAC\u4E1C\uFF0C\u8D2D\u597D\u7269",
+    text: "\u6587\u672C",
+    test: "\u6D4B\u8BD5",
+    title1: "\u57FA\u7840\u7528\u6CD5",
+    title2: "\u641C\u7D22\u6846\u5F62\u72B6\u53CA\u6700\u5927\u957F\u5EA6",
+    title3: "\u641C\u7D22\u6846\u5185\u5916\u80CC\u666F\u8BBE\u7F6E",
+    title4: "\u641C\u7D22\u6846\u6587\u672C\u8BBE\u7F6E",
+    title5: "\u81EA\u5B9A\u4E49\u56FE\u6807\u8BBE\u7F6E",
+    title6: "\u6570\u636E\u6539\u53D8\u76D1\u542C"
   }
 };
-const defaultProps$$ = {
+const defaultProps$12 = {
   locale: zhCN
 };
 const defaultConfigRef = {
@@ -2347,7 +2358,7 @@ const useConfig = () => {
 };
 const ConfigContext = createContext(null);
 const ConfigProvider = (props) => {
-  const { children, ...config2 } = { ...defaultProps$$, ...props };
+  const { children, ...config2 } = { ...defaultProps$12, ...props };
   const parentConfig = useConfig();
   return /* @__PURE__ */ React__default.createElement(ConfigContext.Provider, {
     value: {
@@ -2356,25 +2367,25 @@ const ConfigProvider = (props) => {
     }
   }, children);
 };
-ConfigProvider.defaultProps = defaultProps$$;
+ConfigProvider.defaultProps = defaultProps$12;
 ConfigProvider.displayName = "NutConfigProvider";
-const defaultProps$_ = {};
+const defaultProps$11 = {};
 const Layout = (props) => {
-  ({ ...defaultProps$_, ...props });
+  ({ ...defaultProps$11, ...props });
   return /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-layout"
   }, "Layout");
 };
-Layout.defaultProps = defaultProps$_;
+Layout.defaultProps = defaultProps$11;
 Layout.displayName = "NutLayout";
 const DataContext$2 = createContext({});
-const defaultProps$Z = {
+const defaultProps$10 = {
   span: "24",
   offset: "0",
   gutter: "0"
 };
 const Col = (props) => {
-  const { span, offset, children } = { ...defaultProps$Z, ...props };
+  const { span, offset, children } = { ...defaultProps$10, ...props };
   const [colName, setColName] = useState("");
   const [colStyle, setColStyle] = useState({});
   const { gutter } = useContext$1(DataContext$2);
@@ -2397,9 +2408,9 @@ const Col = (props) => {
     style: { ...colStyle }
   }, children);
 };
-Col.defaultProps = defaultProps$Z;
+Col.defaultProps = defaultProps$10;
 Col.displayName = "NutCol";
-const defaultProps$Y = {
+const defaultProps$$ = {
   type: "",
   justify: "start",
   align: "flex-start",
@@ -2408,7 +2419,7 @@ const defaultProps$Y = {
 };
 const Row = (props) => {
   const { children, type, justify, align, wrap, gutter } = {
-    ...defaultProps$Y,
+    ...defaultProps$$,
     ...props
   };
   const prefixCls = "nut-row";
@@ -2433,9 +2444,9 @@ const Row = (props) => {
     className: getClasses()
   }, children));
 };
-Row.defaultProps = defaultProps$Y;
+Row.defaultProps = defaultProps$$;
 Row.displayName = "NutRow";
-const defaultProps$X = {
+const defaultProps$_ = {
   contentPosition: "center",
   dashed: false,
   hairline: true,
@@ -2451,7 +2462,7 @@ const Divider = (props) => {
     className,
     direction
   } = {
-    ...defaultProps$X,
+    ...defaultProps$_,
     ...props
   };
   const dividerBem = cn("divider");
@@ -2471,9 +2482,9 @@ const Divider = (props) => {
     style: styles
   }, children);
 };
-Divider.defaultProps = defaultProps$X;
+Divider.defaultProps = defaultProps$_;
 Divider.displayName = "NutDivider";
-const defaultProps$W = {
+const defaultProps$Z = {
   title: "",
   desc: "",
   leftShow: true,
@@ -2506,7 +2517,7 @@ const NavBar = (props) => {
     onClickBack,
     onClickRight
   } = {
-    ...defaultProps$W,
+    ...defaultProps$Z,
     ...props
   };
   const b2 = cn("navbar");
@@ -2571,9 +2582,9 @@ const NavBar = (props) => {
     className: `${b2("")}--placeholder`
   }, renderWrapper()) : renderWrapper());
 };
-NavBar.defaultProps = defaultProps$W;
+NavBar.defaultProps = defaultProps$Z;
 NavBar.displayName = "NutNavBar";
-const defaultProps$V = {
+const defaultProps$Y = {
   fixednavClass: "nut-fixednav",
   activeText: "\u6536\u8D77\u5BFC\u822A",
   unActiveText: "\u5FEB\u901F\u5BFC\u822A",
@@ -2599,7 +2610,7 @@ const FixedNav = (props) => {
     slotList,
     slotBtn,
     ...rest
-  } = { ...defaultProps$V, ...props };
+  } = { ...defaultProps$Y, ...props };
   const b2 = cn("fixednav");
   const classes = classNames({
     active: visible
@@ -2645,15 +2656,15 @@ const FixedNav = (props) => {
     className: "text"
   }, visible ? locale.fixednav.activeText || activeText : locale.fixednav.unActiveText || unActiveText))));
 };
-FixedNav.defaultProps = defaultProps$V;
+FixedNav.defaultProps = defaultProps$Y;
 FixedNav.displayName = "NutFixedNav";
-const defaultProps$U = {
+const defaultProps$X = {
   visible: 0,
   bottom: false,
-  type: "",
-  size: "",
+  size: 20,
   unactiveColor: "",
   activeColor: "",
+  safeAreaInsetBottom: false,
   className: "",
   style: {},
   tabSwitch: () => {
@@ -2664,13 +2675,15 @@ const Tabbar = (props) => {
     children,
     visible,
     bottom,
+    size,
     activeColor,
     unactiveColor,
+    safeAreaInsetBottom,
     className,
     style,
     tabSwitch
   } = {
-    ...defaultProps$U,
+    ...defaultProps$X,
     ...props
   };
   const b2 = cn("tabbar");
@@ -2679,7 +2692,12 @@ const Tabbar = (props) => {
     setSelectIndex(idx);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: [`${b2()}`, bottom ? `${b2("bottom")}` : "", className].join(" "),
+    className: [
+      `${b2()}`,
+      bottom ? `${b2("bottom")}` : "",
+      safeAreaInsetBottom ? `${b2("safebottom")}` : "",
+      className
+    ].join(" "),
     style
   }, React__default.Children.map(children, (child, idx) => {
     if (!React__default.isValidElement(child)) {
@@ -2691,6 +2709,7 @@ const Tabbar = (props) => {
       index: idx,
       unactiveColor,
       activeColor,
+      size,
       handleClick: () => {
         handleClick(idx);
         tabSwitch(child, idx);
@@ -2699,9 +2718,12 @@ const Tabbar = (props) => {
     return React__default.cloneElement(child, childProps);
   }));
 };
-Tabbar.defaultProps = defaultProps$U;
+Tabbar.defaultProps = defaultProps$X;
 Tabbar.displayName = "NutTabbar";
-const defaultProps$T = {
+const defaultProps$W = {
+  dot: false,
+  size: "",
+  classPrefix: "nutui-iconfont",
   tabTitle: "",
   icon: "",
   href: "",
@@ -2716,6 +2738,9 @@ const defaultProps$T = {
 };
 const TabbarItem = (props) => {
   const {
+    dot,
+    size,
+    classPrefix,
     tabTitle,
     icon,
     href,
@@ -2727,7 +2752,7 @@ const TabbarItem = (props) => {
     index: index2,
     handleClick
   } = {
-    ...defaultProps$T,
+    ...defaultProps$W,
     ...props
   };
   const b2 = cn("tabbar-item");
@@ -2741,7 +2766,7 @@ const TabbarItem = (props) => {
     if (active && to2) {
       history.push(to2);
     }
-  }, [active]);
+  }, [active, history, href, to2]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2({ active })}`,
     style: {
@@ -2752,13 +2777,16 @@ const TabbarItem = (props) => {
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: `${bIcon()}`
-  }, num && num <= 99 && /* @__PURE__ */ React__default.createElement("div", {
+  }, !dot ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, num && num <= 99 && /* @__PURE__ */ React__default.createElement("div", {
     className: `${bIcon("tips", [bIcon("num")])}`
   }, num), num && num >= 100 && /* @__PURE__ */ React__default.createElement("div", {
     className: `${bIcon("tips", [bIcon("nums")])}`
-  }, "99+"), icon && /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Icon, {
-    size: 20,
-    name: icon
+  }, "99+")) : /* @__PURE__ */ React__default.createElement("div", {
+    className: `${bIcon("dot")}`
+  }), icon && /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Icon, {
+    size,
+    name: icon,
+    classPrefix
   })), /* @__PURE__ */ React__default.createElement("div", {
     className: bIcon({ "nav-word": true }, [
       bIcon({ "big-word": !icon })
@@ -2766,7 +2794,7 @@ const TabbarItem = (props) => {
   }, tabTitle)));
 };
 const elevatorContext = createContext({});
-const defaultProps$S = {
+const defaultProps$V = {
   height: "200px",
   acceptKey: "title",
   indexList: [],
@@ -2789,7 +2817,7 @@ const Elevator = (props) => {
     children,
     ...rest
   } = {
-    ...defaultProps$S,
+    ...defaultProps$V,
     ...props
   };
   const b2 = cn("elevator");
@@ -2979,9 +3007,9 @@ const Elevator = (props) => {
     }, item[acceptKey]);
   }))));
 };
-Elevator.defaultProps = defaultProps$S;
+Elevator.defaultProps = defaultProps$V;
 Elevator.displayName = "NutElevator";
-const defaultProps$R = {
+const defaultProps$U = {
   defaultValue: 1,
   mode: "multi",
   prevText: "",
@@ -2998,7 +3026,7 @@ const defaultProps$R = {
 };
 const Pagination = (props) => {
   const { locale } = useConfig();
-  ({ ...defaultProps$R, ...props });
+  ({ ...defaultProps$U, ...props });
   const {
     modelValue,
     mode,
@@ -3115,7 +3143,7 @@ const Pagination = (props) => {
     onClick: (e2) => selectPage(Number(currentPage) + 1, true)
   }, nextText || locale.pagination.next));
 };
-Pagination.defaultProps = defaultProps$R;
+Pagination.defaultProps = defaultProps$U;
 Pagination.displayName = "NutPagination";
 class Title {
   constructor() {
@@ -3125,7 +3153,7 @@ class Title {
     this.index = 0;
   }
 }
-const defaultProps$Q = {
+const defaultProps$T = {
   value: 0,
   color: "",
   background: "",
@@ -3160,7 +3188,7 @@ const Tabs = (props) => {
     className,
     autoHeight,
     ...rest
-  } = { ...defaultProps$Q, ...props };
+  } = { ...defaultProps$T, ...props };
   const [currentItem, setCurrentItem] = useState({ index: 0 });
   const titles = useRef([]);
   useEffect(() => {
@@ -3263,9 +3291,9 @@ const Tabs = (props) => {
     return React__default.cloneElement(child, childProps);
   })));
 };
-Tabs.defaultProps = defaultProps$Q;
+Tabs.defaultProps = defaultProps$T;
 Tabs.displayName = "NutTabs";
-const defaultProps$P = {
+const defaultProps$S = {
   title: "",
   paneKey: "",
   activeKey: "",
@@ -3273,7 +3301,7 @@ const defaultProps$P = {
 };
 const TabPane = (props) => {
   const { children, paneKey, activeKey, autoHeightClassName } = {
-    ...defaultProps$P,
+    ...defaultProps$S,
     ...props
   };
   const b2 = cn("tabpane");
@@ -3284,7 +3312,7 @@ const TabPane = (props) => {
     className: classes
   }, children);
 };
-const defaultProps$O = {
+const defaultProps$R = {
   size: 3,
   current: 1,
   block: false,
@@ -3304,7 +3332,7 @@ const Indicator = (props) => {
     vertical,
     ...rest
   } = {
-    ...defaultProps$O,
+    ...defaultProps$R,
     ...props
   };
   const b2 = cn("indicator");
@@ -3333,7 +3361,7 @@ const Indicator = (props) => {
     ...rest
   }, renderEles());
 };
-Indicator.defaultProps = defaultProps$O;
+Indicator.defaultProps = defaultProps$R;
 Indicator.displayName = "NutIndicator";
 const MIN_DISTANCE = 10;
 function getDirection(x2, y2) {
@@ -3348,6 +3376,8 @@ function getDirection(x2, y2) {
 function useTouch() {
   const [startX, SetStartX] = useState(0);
   const [startY, SetStartY] = useState(0);
+  const [moveX, SetMoveX] = useState(0);
+  const [moveY, SetMoveY] = useState(0);
   const [deltaX, SetDeltaX] = useState(0);
   const [deltaY, SetDeltaY] = useState(0);
   const [offsetX, SetOffsetX] = useState(0);
@@ -3373,10 +3403,12 @@ function useTouch() {
     const dY = touch.clientY - startY;
     SetDeltaX(dX);
     SetDeltaY(dY);
+    SetMoveX(touch.clientX);
+    SetMoveY(touch.clientY);
     SetOffsetX(Math.abs(dX));
     SetOffsetY(Math.abs(dY));
     if (!direction) {
-      SetDirection(getDirection(Math.abs(dX), Math.abs(dY)));
+      SetDirection(getDirection(offsetX, offsetY));
     }
   };
   return {
@@ -3385,6 +3417,8 @@ function useTouch() {
     reset,
     startX,
     startY,
+    moveX,
+    moveY,
     deltaX,
     deltaY,
     offsetX,
@@ -3397,7 +3431,7 @@ function useTouch() {
 function isWindow(val) {
   return val === window;
 }
-const useRect = (elementRef) => {
+const getRect = (elementRef) => {
   const element = elementRef;
   if (isWindow(element)) {
     const width = element.innerWidth;
@@ -3614,14 +3648,16 @@ var Toast = {
     }
   }
 };
-const defaultProps$N = {
+const defaultProps$Q = {
   range: false,
   hiddenRange: false,
   hiddenTag: false,
   min: 0,
   max: 100,
   step: 1,
-  modelValue: 0
+  modelValue: 0,
+  vertical: false,
+  marks: {}
 };
 let startValue;
 let currentValue;
@@ -3641,16 +3677,18 @@ const Range = (props) => {
     step,
     modelValue,
     button,
+    vertical,
+    marks,
     change,
     dragStart,
     dragEnd
-  } = { ...defaultProps$N, ...props };
+  } = { ...defaultProps$Q, ...props };
   const [buttonIndex, SetButtonIndex] = useState(0);
   const [initValue, SetInitValue] = useState();
   const [dragStatus, SetDragStatus] = useState("start");
   const touch = useTouch();
   const root = useRef(null);
-  const rangeBem = cn("range");
+  const [marksList, SetMarksList] = useState([]);
   useEffect(() => {
     if (modelValue) {
       if (!range && (modelValue < min || modelValue > max)) {
@@ -3661,9 +3699,52 @@ const Range = (props) => {
       SetInitValue(modelValue);
     }
   }, [modelValue]);
+  useEffect(() => {
+    if (marks) {
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a, b2) => a - b2).filter((point) => point >= min && point <= max);
+      SetMarksList(list);
+    }
+  }, [marks]);
   const scope = () => {
     return Number(max) - Number(min);
   };
+  const classes = useCallback(() => {
+    const prefixCls = "nut-range";
+    return [
+      prefixCls,
+      `${disabled ? `${prefixCls}-disabled` : ""}`,
+      `${vertical ? `${prefixCls}-vertical` : ""}`,
+      `${!hiddenRange ? `${prefixCls}-show-number` : ""}`
+    ].filter(Boolean).join(" ");
+  }, [disabled, vertical, hiddenRange]);
+  const containerClasses = useCallback(() => {
+    const prefixCls = "nut-range-container";
+    return [prefixCls, `${vertical ? `${prefixCls}-vertical` : ""}`, className].filter(Boolean).join(" ");
+  }, [vertical, className]);
+  const markClassName = useCallback((mark) => {
+    const classPrefix = "nut-range-mark";
+    let lowerBound = Number(min);
+    let upperBound = Number(max);
+    if (range) {
+      const [left, right] = modelValue;
+      lowerBound = left;
+      upperBound = right;
+    } else {
+      upperBound = modelValue;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix}-text`,
+      `${isActive ? `${classPrefix}-text-active` : ""}`
+    ].filter(Boolean).join(" ");
+  }, [range, modelValue, min, max]);
+  const [rangeName, setRangeName] = useState(classes());
+  const [containerName, setContainerName] = useState(containerClasses());
+  useEffect(() => {
+    setRangeName(classes());
+    setContainerName(containerClasses());
+  }, [classes, containerClasses]);
   const wrapperStyle = () => {
     return {
       background: inactiveColor
@@ -3692,6 +3773,14 @@ const Range = (props) => {
     return `0%`;
   };
   const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        background: activeColor,
+        transition: dragStatus ? "none" : void 0
+      };
+    }
     return {
       width: calcMainAxis(),
       left: calcOffset(),
@@ -3699,6 +3788,31 @@ const Range = (props) => {
       transition: dragStatus ? "none" : void 0
     };
   };
+  const marksStyle = (mark) => {
+    let style = {
+      left: `${(mark - Number(min)) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - Number(min)) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickStyle = (mark) => {
+    let lowerBound = Number(min);
+    let upperBound = Number(max);
+    if (range) {
+      const [left, right] = modelValue;
+      lowerBound = left;
+      upperBound = right;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    const style = {
+      background: !isActive ? inactiveColor : activeColor
+    };
+    return style;
+  };
   const format = (value) => {
     value = Math.max(+min, Math.min(value, +max));
     return Math.round(value / +step) * +step;
@@ -3722,10 +3836,36 @@ const Range = (props) => {
     if (!isSameValue(value, modelVal)) {
       SetInitValue(value);
     }
-    if (end && !isSameValue(value, startValue)) {
+    if ((marks || end) && !isSameValue(value, startValue)) {
       change && change(value);
     }
   };
+  const click = (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    SetDragStatus("");
+    const rect = getRect(root.current);
+    let delta = event.clientX - rect.left;
+    let total = rect.width;
+    if (vertical) {
+      delta = event.clientY - rect.top;
+      total = rect.height;
+    }
+    const value = Number(min) + delta / total * scope();
+    currentValue = initValue || initValue === 0 ? initValue : modelValue;
+    if (isRange(currentValue)) {
+      const [left, right] = currentValue;
+      const middle = (left + right) / 2;
+      if (value <= middle) {
+        updateValue([value, right], true);
+      } else {
+        updateValue([left, value], true);
+      }
+    } else {
+      updateValue(value, true);
+    }
+  };
   const onTouchStart = (event) => {
     if (disabled) {
       return;
@@ -3748,10 +3888,15 @@ const Range = (props) => {
     }
     touch.move(event);
     SetDragStatus("draging");
-    const rect = useRect(root.current);
-    const delta = touch.deltaX;
-    const total = rect.width;
-    const diff = delta / total * scope();
+    const rect = getRect(root.current);
+    let delta = touch.deltaX;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    if (vertical) {
+      delta = touch.deltaY;
+      total = rect.height;
+      diff = delta / total * scope();
+    }
     if (isRange(startValue)) {
       currentValue[buttonIndex] = startValue[buttonIndex] + diff;
     } else {
@@ -3775,29 +3920,42 @@ const Range = (props) => {
     return value;
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `nut-range-container ${className || ""}`
+    className: `${containerName}`
   }, !hiddenRange ? /* @__PURE__ */ React__default.createElement("div", {
     className: "min"
   }, +min) : null, /* @__PURE__ */ React__default.createElement("div", {
     ref: root,
     style: wrapperStyle(),
-    className: `${rangeBem()} ${disabled ? rangeBem("disabled") : ""} ${!hiddenRange ? rangeBem("show-number") : ""}`
-  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: `${rangeName}`,
+    onClick: (e2) => {
+      click(e2);
+    }
+  }, marksList.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-range-mark"
+  }, marksList.map((marks2) => {
+    return /* @__PURE__ */ React__default.createElement("span", {
+      key: marks2,
+      className: markClassName(marks2),
+      style: marksStyle(marks2)
+    }, marks2, /* @__PURE__ */ React__default.createElement("span", {
+      className: "nut-range-tick",
+      style: tickStyle(marks2)
+    }));
+  })) : null, /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-range-bar",
     style: barStyle()
   }, range ? [0, 1].map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       role: "slider",
       key: index2,
-      className: `${index2 == 0 ? "nut-range-button-wrapper-left" : ""}
-              ${index2 == 1 ? "nut-range-button-wrapper-right" : ""}`,
+      className: `${index2 === 0 ? "nut-range-button-wrapper-left" : ""}
+              ${index2 === 1 ? "nut-range-button-wrapper-right" : ""}`,
       tabIndex: disabled ? -1 : 0,
       "aria-valuemin": +min,
       "aria-valuenow": curValue(index2),
       "aria-valuemax": +max,
       "aria-orientation": "horizontal",
       onTouchStart: (e2) => {
-        e2.preventDefault;
         if (typeof index2 === "number") {
           SetButtonIndex(index2);
         }
@@ -3853,7 +4011,7 @@ const Range = (props) => {
     className: "max"
   }, +max) : null);
 };
-Range.defaultProps = defaultProps$N;
+Range.defaultProps = defaultProps$Q;
 Range.displayName = "NutRange";
 const Utils = {
   isLeapYear(y2) {
@@ -3947,7 +4105,7 @@ function requestAniFrame() {
   };
 }
 var requestAniFrame$1 = requestAniFrame();
-const defaultProps$M = {
+const defaultProps$P = {
   type: "one",
   isAutoBackFill: false,
   poppable: true,
@@ -3976,7 +4134,7 @@ const CalendarItem = (props) => {
     onChoose,
     onUpdate,
     onClose
-  } = { ...defaultProps$M, ...props };
+  } = { ...defaultProps$P, ...props };
   const weeks = locale.calendaritem.weekdays;
   const [yearMonthTitle, setYearMonthTitle] = useState("");
   const [unLoadPrev, setUnLoadPrev] = useState(false);
@@ -4372,9 +4530,9 @@ const CalendarItem = (props) => {
     onClick: confirm2
   }, locale.confirm)) : ""));
 };
-CalendarItem.defaultProps = defaultProps$M;
+CalendarItem.defaultProps = defaultProps$P;
 CalendarItem.displayName = "NutCalendarItem";
-const defaultProps$L = {
+const defaultProps$O = {
   type: "one",
   isAutoBackFill: false,
   poppable: true,
@@ -4402,7 +4560,7 @@ const Calendar = (props) => {
     endDate,
     onClose,
     onChoose
-  } = { ...defaultProps$L, ...props };
+  } = { ...defaultProps$O, ...props };
   const close = () => {
     onClose && onClose();
   };
@@ -4445,9 +4603,9 @@ const Calendar = (props) => {
     onChoose: choose
   }));
 };
-Calendar.defaultProps = defaultProps$L;
+Calendar.defaultProps = defaultProps$O;
 Calendar.displayName = "NutCalendar";
-const defaultProps$K = {
+const defaultProps$N = {
   disabled: false,
   checkedValue: [],
   max: void 0,
@@ -4455,7 +4613,7 @@ const defaultProps$K = {
   }
 };
 const CheckboxGroup = React__default.forwardRef((props, ref) => {
-  const { children } = { ...defaultProps$K, ...props };
+  const { children } = { ...defaultProps$N, ...props };
   const b2 = cn("checkboxgroup");
   const { className, disabled, onChange, checkedValue, max, ...rest } = props;
   const [innerDisabled, setInnerDisabled] = useState(disabled);
@@ -4531,9 +4689,9 @@ const CheckboxGroup = React__default.forwardRef((props, ref) => {
     ...rest
   }, cloneChildren());
 });
-CheckboxGroup.defaultProps = defaultProps$K;
+CheckboxGroup.defaultProps = defaultProps$N;
 CheckboxGroup.displayName = "NutCheckboxGroup";
-const defaultProps$J = {
+const defaultProps$M = {
   checked: false,
   disabled: false,
   textPosition: "right",
@@ -4547,7 +4705,7 @@ const defaultProps$J = {
   }
 };
 const Checkbox = (props) => {
-  const { children } = { ...defaultProps$J, ...props };
+  const { children } = { ...defaultProps$M, ...props };
   const b2 = cn("checkbox");
   const {
     iconName,
@@ -4627,49 +4785,31 @@ const Checkbox = (props) => {
     onClick: handleClick
   }, renderIcon(), renderLabel());
 };
-Checkbox.defaultProps = defaultProps$J;
+Checkbox.defaultProps = defaultProps$M;
 Checkbox.displayName = "NutCheckBox";
 Checkbox.Group = CheckboxGroup;
 const InternalPickerSlot = (props, ref) => {
   const {
-    isUpdate,
     keyIndex = 0,
     defaultValue,
     listData = [],
+    threeDimensional = true,
     chooseItem
   } = props;
+  const touch = useTouch();
+  const INERTIA_TIME = 300;
+  const INERTIA_DISTANCE = 15;
   const [currIndex, setCurrIndex] = useState(1);
   const lineSpacing = 36;
   const rotation = 20;
   let timer;
-  const listRef = useRef(null);
+  useRef(null);
   const rollerRef = useRef(null);
   const pickerSlotRef = useRef(null);
-  useState();
-  const touchParams = {
-    startY: 0,
-    startTime: 0,
-    transformY: 0,
-    scrollDistance: 0
-  };
-  useImperativeHandle(ref, () => ({
-    updateTransform: (value) => {
-      if (value) {
-        touchParams.transformY = 0;
-        timer = setTimeout(() => {
-          modifyStatus(false, value);
-        }, 10);
-      }
-    }
-  }));
-  useEffect(() => {
-    touchParams.transformY = 0;
-    modifyStatus();
-  }, [isUpdate]);
-  useEffect(() => {
-    touchParams.transformY = 0;
-    modifyStatus();
-  }, [defaultValue]);
+  const [startTime, setStartTime] = useState(0);
+  const [startY, setStartY] = useState(0);
+  const transformY = useRef(0);
+  const [scrollDistance, setScrollDistance] = useState(0);
   const isHidden = (index2) => {
     if (index2 >= currIndex + 8 || index2 <= currIndex - 8) {
       return true;
@@ -4677,20 +4817,21 @@ const InternalPickerSlot = (props, ref) => {
     return false;
   };
   const setTransform = (translateY = 0, type, time = 1e3, deg) => {
-    if (type === "end") {
-      listRef.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
-      rollerRef.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
+    let nTime = time;
+    if (type !== "end") {
+      nTime = 0;
+    }
+    if (threeDimensional) {
+      rollerRef.current.style.webkitTransform = `rotate3d(1, 0, 0, ${deg})`;
     } else {
-      listRef.current.style.webkitTransition = "";
-      rollerRef.current.style.webkitTransition = "";
+      rollerRef.current.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`;
     }
-    listRef.current.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`;
-    rollerRef.current.style.webkitTransform = `rotate3d(1, 0, 0, ${deg})`;
-    touchParams.scrollDistance = translateY;
+    rollerRef.current.style.webkitTransition = `transform ${nTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`;
+    setScrollDistance(translateY);
   };
   const setMove = (move, type, time) => {
-    let updateMove = move + touchParams.transformY;
-    if (type === "end" && time) {
+    let updateMove = move + transformY.current;
+    if (type === "end") {
       if (updateMove > 0) {
         updateMove = 0;
       }
@@ -4700,118 +4841,121 @@ const InternalPickerSlot = (props, ref) => {
       const endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
       const deg = `${(Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation}deg`;
       setTransform(endMove, type, time, deg);
-      timer = setTimeout(() => {
-        setChooseValue(endMove);
-      }, time / 2);
       setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
     } else {
-      let deg = "0deg";
-      if (updateMove < 0) {
-        deg = `${(Math.abs(updateMove / lineSpacing) + 1) * rotation}deg`;
-      } else {
-        deg = `${(-updateMove / lineSpacing + 1) * rotation}deg`;
+      let deg = 0;
+      const currentDeg = (-updateMove / lineSpacing + 1) * rotation;
+      const maxDeg = (listData.length + 1) * rotation;
+      const minDeg = 0;
+      deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+      if (minDeg < deg && deg < maxDeg) {
+        setTransform(updateMove, "", void 0, `${deg}deg`);
+        setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
       }
-      setTransform(updateMove, "", 0, deg);
-      setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
     }
   };
   const setChooseValue = (move) => {
     chooseItem && chooseItem(listData == null ? void 0 : listData[Math.round(-move / lineSpacing)], keyIndex);
   };
   const touchStart = (event) => {
-    event.preventDefault();
-    const changedTouches = event.changedTouches[0];
-    touchParams.startY = changedTouches.pageY;
-    touchParams.startTime = event.timeStamp || Date.now();
-    touchParams.transformY = touchParams.scrollDistance;
+    touch.start(event);
+    setStartY(touch.deltaY);
+    setStartTime(Date.now());
+    transformY.current = scrollDistance;
   };
-  const touchMove = (event, listData2) => {
-    event.preventDefault();
-    const changedTouches = event.changedTouches[0];
-    const lastY = changedTouches.pageY;
-    const move = lastY - touchParams.startY;
+  const touchMove = (event) => {
+    touch.move(event);
+    if (touch.isVertical) {
+      preventDefault(event, true);
+    }
+    const move = touch.deltaY - startY;
     setMove(move);
   };
   const touchEnd = (event) => {
-    event.preventDefault();
-    const changedTouches = event.changedTouches[0];
-    const lastTime = event.timeStamp || Date.now();
-    let move = changedTouches.pageY - touchParams.startY;
-    let moveTime = lastTime - touchParams.startTime;
-    if (moveTime <= 300) {
-      move *= 2;
-      moveTime += 1e3;
-      setMove(move, "end", moveTime);
+    const move = touch.deltaY - startY;
+    const moveTime = Date.now() - startTime;
+    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+      const distance = momentum(move, moveTime);
+      setMove(distance, "end", moveTime + 1e3);
     } else {
-      setMove(move, "end", moveTime);
+      setMove(move, "end");
     }
+    setTimeout(() => {
+      touch.reset();
+    }, 0);
+  };
+  const momentum = (distance, duration) => {
+    let nDistance = distance;
+    const speed = Math.abs(nDistance / duration);
+    nDistance = speed / 3e-3 * (nDistance < 0 ? -1 : 1);
+    return nDistance;
   };
   const modifyStatus = (type, val) => {
     const value = val || defaultValue;
     let index2 = -1;
-    if (value && value.value) {
+    if (value) {
       listData.some((item, idx) => {
-        if (item.value == value.value) {
+        if (item.value === value) {
           index2 = idx;
           return true;
         }
+        return false;
       });
-    } else if (value && !value.value) {
-      listData.some((item, idx) => {
-        if (item == value) {
-          index2 = idx;
-          return true;
+    } else {
+      listData.forEach((item, i) => {
+        if (item.value === defaultValue) {
+          index2 = i;
         }
       });
-    } else {
-      index2 = listData.indexOf(defaultValue);
     }
     setCurrIndex(index2 === -1 ? 1 : index2 + 1);
     const move = index2 === -1 ? 0 : index2 * lineSpacing;
     type && setChooseValue(-move);
     setMove(-move);
   };
+  const stopMomentum = () => {
+    setChooseValue(scrollDistance);
+  };
+  const preventDefault = (event, isStopPropagation) => {
+    if (typeof event.cancelable !== "boolean" || event.cancelable) {
+      event.preventDefault();
+    }
+    if (isStopPropagation) {
+      event.stopPropagation();
+    }
+  };
   useEffect(() => {
-    var _a, _b, _c;
-    modifyStatus(true);
-    (_a = pickerSlotRef.current) == null ? void 0 : _a.addEventListener("touchstart", touchStart);
-    (_b = pickerSlotRef.current) == null ? void 0 : _b.addEventListener("touchmove", touchMove);
-    (_c = pickerSlotRef.current) == null ? void 0 : _c.addEventListener("touchend", touchEnd);
+    setScrollDistance(0);
+    transformY.current = 0;
+    modifyStatus(false);
     return () => {
-      var _a2, _b2, _c2;
-      (_a2 = pickerSlotRef.current) == null ? void 0 : _a2.removeEventListener("touchstart", touchStart);
-      (_b2 = pickerSlotRef.current) == null ? void 0 : _b2.removeEventListener("touchmove", touchMove);
-      (_c2 = pickerSlotRef.current) == null ? void 0 : _c2.removeEventListener("touchend", touchEnd);
       clearTimeout(timer);
     };
   }, [listData]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-picker-list",
-    ref: pickerSlotRef
+    ref: pickerSlotRef,
+    onTouchStart: touchStart,
+    onTouchMove: touchMove,
+    onTouchEnd: touchEnd
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-picker-roller",
-    ref: rollerRef
-  }, listData.map((item, index2) => {
+    ref: rollerRef,
+    onTransitionEnd: stopMomentum
+  }, threeDimensional && listData.map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       className: `nut-picker-roller-item ${isHidden(index2 + 1) && "nut-picker-roller-item-hidden"}`,
       style: {
         transform: `rotate3d(1, 0, 0, ${-rotation * (index2 + 1)}deg) translate3d(0px, 0px, 104px)`
       },
-      key: item.label ? item.label : index2
-    }, item.value ? item.value : item);
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-picker-content"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-picker-list-panel",
-    ref: listRef
-  }, listData.map((item, index2) => {
+      key: item.value ? item.value : index2
+    }, item.text ? item.text : item);
+  }), !threeDimensional && listData.map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-picker-item",
-      key: item.label ? item.label : index2
-    }, item.value ? item.value : item);
-  }), (listData == null ? void 0 : listData.length) === 1 && /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-picker-placeholder"
-  }))), /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-picker-roller-item-tile",
+      key: item.value ? item.value : index2
+    }, item.text ? item.text : item);
+  })), /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-picker-mask"
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-picker-indicator"
@@ -4824,90 +4968,147 @@ const InternalPicker = (props, ref) => {
     isVisible,
     title,
     listData = [],
-    defaultValueData = [],
+    defaultValueData,
     onConfirm,
     onClose,
     onCloseUpdate,
-    onChoose,
+    onChange,
     className,
     style,
+    threeDimensional,
     ...rest
   } = props;
   const [chooseValueData, setchooseValueData] = useState([]);
-  const [cacheValueData, setcacheValueData] = useState([]);
-  const [isUpdate, setisUpdate] = useState(false);
+  const [columnIndex, setcolumnIndex] = useState(0);
   const pickerRef = useRef(null);
-  const pickerSlotRef1 = useRef(null);
-  const pickerSlotRef2 = useRef(null);
-  const pickerSlotRef3 = useRef(null);
-  const refList = [pickerSlotRef1, pickerSlotRef2, pickerSlotRef3];
-  const [isReady, setIsReady] = useState(true);
+  const [columnsList, setColumnsList] = useState([]);
   const b2 = cn("picker");
   useEffect(() => {
-    const data = [...defaultValueData];
-    setchooseValueData(data);
-    setcacheValueData(data);
-    onConfirm && onConfirm(data);
+    if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString()) {
+      const data = [...defaultValueData];
+      setchooseValueData(data);
+      setColumnsList(normalListData());
+    }
   }, [defaultValueData]);
+  useEffect(() => {
+    onChange && onChange(columnIndex, chooseValueData, selectedOptions());
+  }, [chooseValueData]);
   useEffect(() => {
     init();
   }, [listData]);
-  const updateChooseValue = (index2, value, cacheValueData2) => {
-    var _a;
-    if (!value)
-      return;
-    setcacheValueData((data) => {
-      const cache = [...cacheValueData2];
-      cache.splice(index2, 1, value);
-      return cache;
-    });
-    (_a = refList[index2].current) == null ? void 0 : _a.updateTransform(value);
-  };
-  useImperativeHandle(ref, () => {
-    return { updateChooseValue };
-  });
   const closeActionSheet = () => {
-    setisUpdate(!isUpdate);
-    setcacheValueData([...chooseValueData]);
-    onClose && onClose();
-    onCloseUpdate && onCloseUpdate(chooseValueData, pickerRef);
-  };
-  const confirm2 = (defaultValueData2) => {
-    const data = defaultValueData2 || cacheValueData;
-    onConfirm && onConfirm(data);
-    setchooseValueData([...data]);
-    onClose && onClose();
+    onClose && onClose(chooseValueData, selectedOptions());
+    onCloseUpdate && onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
   };
-  const chooseItem = (value, index2) => {
-    setcacheValueData((data) => {
-      const cacheData = [...data];
-      if (cacheData[index2] != value) {
-        cacheData[index2] = value;
-        onChoose && onChoose(index2, value, cacheData, pickerRef);
+  const confirm2 = () => {
+    onConfirm && onConfirm(chooseValueData, selectedOptions());
+    onClose && onClose(chooseValueData, selectedOptions());
+  };
+  const selectedOptions = () => {
+    const optins = [];
+    columnsList.map((column, index2) => {
+      let currOptions = [];
+      currOptions = column.filter((item) => item.value === chooseValueData[index2]);
+      if (currOptions[0]) {
+        optins.push(currOptions[0]);
+      } else {
+        column[0] && optins.push(column[0]);
       }
-      return cacheData;
+      return column;
     });
+    return optins;
+  };
+  const chooseItem = (option, columnIndex2) => {
+    if (option && Object.keys(option).length) {
+      if (chooseValueData[columnIndex2] !== option.value) {
+        if (columnsType() === "cascade") {
+          chooseValueData[columnIndex2] = option.value ? option.value : "";
+          setchooseValueData([...chooseValueData]);
+          let index2 = columnIndex2;
+          let cursor = option;
+          while (cursor && cursor.children && cursor.children[0]) {
+            chooseValueData[index2 + 1] = cursor.children[0].value;
+            setchooseValueData([...chooseValueData]);
+            index2++;
+            const cc = cursor.children[0];
+            cursor = cc;
+          }
+          if (cursor && cursor.children) {
+            chooseValueData[index2 + 1] = "";
+            setchooseValueData([...chooseValueData]);
+          }
+          setColumnsList(normalListData());
+        } else {
+          setchooseValueData((data) => {
+            const cdata = [...data];
+            cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(option, "value") ? option.value : "";
+            return cdata;
+          });
+        }
+        setcolumnIndex(columnIndex2);
+      }
+    }
+  };
+  const normalListData = () => {
+    const type = columnsType();
+    switch (type) {
+      case "multiple":
+        return listData;
+      case "cascade":
+        return formatCascade(listData, chooseValueData);
+      default:
+        return [listData];
+    }
+  };
+  const columnsType = () => {
+    const firstColumn = listData[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
+        return "multiple";
+      }
+      if ("children" in firstColumn) {
+        return "cascade";
+      }
+    }
+    return "single";
+  };
+  const formatCascade = (columns, defaultValues) => {
+    const formatted = [];
+    let cursor = {
+      text: "",
+      value: "",
+      children: columns
+    };
+    let columnIndex2 = 0;
+    while (cursor && cursor.children) {
+      const options2 = cursor.children;
+      const value = defaultValues[columnIndex2];
+      let index2 = options2.findIndex((columnItem) => columnItem.value === value);
+      if (index2 === -1)
+        index2 = 0;
+      cursor = cursor.children[index2];
+      columnIndex2++;
+      formatted.push(options2);
+    }
+    return formatted;
   };
   const init = () => {
-    if (defaultValueData && defaultValueData.length) {
-      setchooseValueData([...defaultValueData]);
-    } else {
-      const data = [];
-      listData.map((item, index2) => {
-        data.push(item[0]);
-      });
-      setcacheValueData((cache) => {
-        return [...data];
-      });
+    const data = [];
+    const normalData = normalListData();
+    setColumnsList(normalData);
+    normalData.map((item) => {
+      data.push(item[0].value);
+      return item;
+    });
+    if (!defaultValueData && chooseValueData.length === 0) {
       setchooseValueData([...data]);
     }
-    setIsReady(true);
   };
   return /* @__PURE__ */ React__default.createElement(Popup, {
     visible: isVisible,
     position: "bottom",
     onClose: () => {
-      onClose && onClose();
+      closeActionSheet();
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2()} ${className || ""}`,
@@ -4926,30 +5127,29 @@ const InternalPicker = (props, ref) => {
   }, locale.confirm)), /* @__PURE__ */ React__default.createElement("div", {
     className: b2("panel"),
     ref: pickerRef
-  }, listData == null ? void 0 : listData.map((item, index2) => {
+  }, columnsList == null ? void 0 : columnsList.map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement(PickerSlot, {
       defaultValue: chooseValueData == null ? void 0 : chooseValueData[index2],
-      isUpdate,
       listData: item,
+      threeDimensional,
       chooseItem: (value, index22) => chooseItem(value, index22),
       key: index2,
-      keyIndex: index2,
-      ref: refList[index2]
+      keyIndex: index2
     });
   }))));
 };
 const Picker = React__default.forwardRef(InternalPicker);
 const currentYear = new Date().getFullYear();
-const defaultProps$I = {
-  modelValue: new Date(),
+const defaultProps$L = {
+  modelValue: null,
   visible: false,
   title: "",
   type: "date",
-  isShowChinese: true,
+  isShowChinese: false,
+  threeDimensional: true,
   minuteStep: 1,
   minDate: new Date(currentYear - 10, 0, 1),
-  maxDate: new Date(currentYear + 10, 11, 31),
-  onCloseDatePicker: () => void 0
+  maxDate: new Date(currentYear + 10, 11, 31)
 };
 const DatePicker = (props) => {
   const {
@@ -4961,20 +5161,26 @@ const DatePicker = (props) => {
     modelValue,
     visible,
     title,
+    formatter,
     onCloseDatePicker,
     onConfirmDatePicker,
+    filter,
+    threeDimensional,
     className,
     style,
     ...rest
   } = {
-    ...defaultProps$I,
+    ...defaultProps$L,
     ...props
   };
   const [show, setShow] = useState(false);
-  const [currentDate, setCurrentDate] = useState(new Date());
+  const [currentDate, setCurrentDate] = useState(modelValue);
   const [defaultValue, setDefaultValue] = useState([]);
   const [listData, setListData] = useState([]);
   const pickerRef = useRef(null);
+  const isDate = (val) => {
+    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+  };
   const zhCNType = {
     day: "\u65E5",
     year: "\u5E74",
@@ -4983,6 +5189,15 @@ const DatePicker = (props) => {
     minute: "\u5206",
     seconds: "\u79D2"
   };
+  const formatValue = (value) => {
+    let cvalue = value;
+    if (!cvalue || cvalue && !isDate(cvalue)) {
+      cvalue = minDate;
+    }
+    let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
+    timestmp = Math.min(timestmp, maxDate.getTime());
+    return new Date(timestmp);
+  };
   function getMonthEndDay(year, month) {
     return new Date(year, month, 0).getDate();
   }
@@ -5023,9 +5238,12 @@ const DatePicker = (props) => {
   };
   const ranges = (date) => {
     const curDate = date || currentDate;
+    console.log(11, currentDate);
+    if (!curDate)
+      return [];
     const { maxYear, maxDate: maxDate2, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
     const { minYear, minDate: minDate2, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
-    const result = [
+    let result = [
       {
         type: "year",
         range: [minYear, maxYear]
@@ -5051,160 +5269,156 @@ const DatePicker = (props) => {
         range: [minSeconds, maxSeconds]
       }
     ];
-    let start2 = 0;
-    let end = 0;
-    switch (type) {
+    switch (type.toLocaleLowerCase()) {
       case "date":
-        start2 = 0;
-        end = 3;
+        result = result.slice(0, 3);
         break;
       case "datetime":
-        start2 = 0;
-        end = 5;
+        result = result.slice(0, 5);
         break;
       case "time":
-        start2 = 3;
-        end = 6;
+        result = result.slice(3, 6);
+        break;
+      case "year-month":
+        result = result.slice(0, 2);
         break;
       case "month-day":
-        start2 = 1;
-        end = 3;
+        result = result.slice(1, 3);
         break;
       case "datehour":
-        start2 = 0;
-        end = 4;
+        result = result.slice(0, 4);
         break;
     }
-    return result.slice(start2, end);
-  };
-  const initDefault = () => {
-    if (["date", "datetime", "time"].includes(type)) {
-      const formatDate = [
-        modelValue.getFullYear(),
-        modelValue.getMonth() + 1,
-        modelValue.getDate(),
-        modelValue.getHours(),
-        modelValue.getMinutes(),
-        modelValue.getSeconds()
-      ];
-      let [year, month, day, hour, minute, seconds] = formatDate;
-      day = Math.min(day, getMonthEndDay(year, month));
-      let val = formatDate;
-      if (isShowChinese) {
-        val = [
-          year + zhCNType.year,
-          month + zhCNType.month,
-          day + zhCNType.day,
-          hour + zhCNType.hour,
-          minute + zhCNType.minute,
-          seconds + zhCNType.seconds
-        ];
-      }
-      if (type === "date") {
-        setDefaultValue(val.splice(0, 3));
-      } else if (type === "datetime") {
-        setDefaultValue(val.splice(0, 5));
-      } else if (type === "time") {
-        setDefaultValue(val.splice(3, 3));
-      }
-    }
-  };
-  const updateChooseValueCustmer = (index2, resValue, cacheValueData) => {
-    if (index2 === 1 && (type === "date" || type === "datetime")) {
-      const modelValue2 = new Date(cacheValueData.slice(0, 3).join("-").replace(/[^0-9\-]/g, ""));
-      setTimeout(() => {
-        const data = columns(modelValue2);
-        let val = [];
-        if (isShowChinese) {
-          val = [
-            modelValue2.getFullYear() + zhCNType.year,
-            resValue,
-            modelValue2.getDate() + zhCNType.day
-          ];
-        } else {
-          val = [
-            modelValue2.getFullYear(),
-            resValue,
-            modelValue2.getDate()
-          ];
-        }
-        setDefaultValue(val);
-        setListData(data);
-        setTimeout(() => {
-          var _a;
-          (_a = pickerRef.current) == null ? void 0 : _a.updateChooseValue(index2 + 1, data[1] ? data[1][0].toString() : "0", cacheValueData);
-        }, 200);
-      }, 100);
+    return result;
+  };
+  const updateChooseValueCustmer = (index2, selectedValue, cacheValueData) => {
+    if (["date", "datetime", "datehour", "month-day", "year-month"].includes(type.toLocaleLowerCase())) {
+      const formatDate = [];
+      selectedValue.forEach((item) => {
+        formatDate.push(item);
+      });
+      if (type.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
+        formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+      }
+      if (type.toLocaleLowerCase() === "year-month" && formatDate.length < 3) {
+        formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+      }
+      const year = Number(formatDate[0]);
+      const month = Number(formatDate[1]) - 1;
+      const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+      let date = null;
+      if (type.toLocaleLowerCase() === "date" || type.toLocaleLowerCase() === "month-day" || type.toLocaleLowerCase() === "year-month") {
+        date = new Date(year, month, day);
+      } else if (type.toLocaleLowerCase() === "datetime") {
+        date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+      } else if (type.toLocaleLowerCase() === "datehour") {
+        date = new Date(year, month, day, Number(formatDate[3]));
+      }
+      const isEqual2 = (currentDate == null ? void 0 : currentDate.getTime()) === (date == null ? void 0 : date.getTime());
+      date && isDate(date) && !isEqual2 && setCurrentDate(formatValue(date));
+    }
+    props.onChangeDatePicker && props.onChangeDatePicker(index2, selectedValue, cacheValueData);
+  };
+  const padZero = (num, targetLength = 2) => {
+    let str = `${num}`;
+    while (str.length < targetLength) {
+      str = `0${str}`;
+    }
+    return str;
+  };
+  const formatterOption = (type2, value) => {
+    let fOption = null;
+    if (formatter) {
+      fOption = formatter(type2, {
+        text: padZero(value, 2),
+        value: padZero(value, 2)
+      });
+    } else {
+      const padMin = padZero(value, 2);
+      const fatter = isShowChinese ? zhCNType[type2] : "";
+      fOption = { text: padMin + fatter, value: padMin };
     }
+    return fOption;
   };
-  const generateValue = (min, max, val, type2) => {
-    if (!(max > min))
-      return;
+  const generateValue = (min, max, val, type2, columnIndex) => {
+    let cmin = min;
     const arr = [];
-    while (min <= max) {
-      if (isShowChinese) {
-        arr.push(min + zhCNType[type2]);
-      } else {
-        arr.push(min);
-      }
+    let index2 = 0;
+    while (cmin <= max) {
+      arr.push(formatterOption(type2, cmin));
       if (type2 === "minute") {
-        min += minuteStep;
+        cmin += minuteStep;
       } else {
-        min++;
+        cmin++;
       }
+      if (cmin <= val) {
+        index2++;
+      }
+    }
+    defaultValue[columnIndex] = arr[index2].value;
+    setDefaultValue([...defaultValue]);
+    if (props.filter && props.filter(type2, arr)) {
+      return props.filter(type2, arr);
     }
     return arr;
   };
-  const getDateIndex = (type2, date) => {
-    const curDate = date || currentDate;
-    switch (type2) {
-      case "year":
-        return curDate.getFullYear();
-      case "month":
-        return curDate.getMonth();
-      case "day":
-        return curDate.getDate();
-      case "hour":
-        return curDate.getHours();
-      case "minute":
-        return curDate.getMinutes();
-      case "seconds":
-        return curDate.getSeconds();
-      default:
-        return 0;
-    }
+  const getDateIndex = (type2) => {
+    if (!currentDate)
+      return 0;
+    let d2 = 0;
+    if (type2 === "year") {
+      d2 = currentDate.getFullYear();
+    } else if (type2 === "month") {
+      d2 = currentDate.getMonth() + 1;
+    } else if (type2 === "day") {
+      d2 = currentDate.getDate();
+    } else if (type2 === "hour") {
+      d2 = currentDate.getHours();
+    } else if (type2 === "minute") {
+      d2 = currentDate.getMinutes();
+    } else if (type2 === "seconds") {
+      d2 = currentDate.getSeconds();
+    }
+    return d2;
   };
   const columns = (date) => {
-    const val = ranges(date).map((res) => {
-      return generateValue(res.range[0], res.range[1], getDateIndex(res.type, date), res.type);
+    const val = ranges(date).map((res, columnIndex) => {
+      return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
     });
     return val || [];
   };
   useEffect(() => {
-    setCurrentDate(modelValue);
-    setListData(columns());
-    initDefault();
+    setCurrentDate(formatValue(modelValue));
   }, []);
+  useEffect(() => {
+    setCurrentDate(formatValue(modelValue));
+  }, [modelValue]);
   useEffect(() => {
     setShow(visible);
   }, [visible]);
+  useEffect(() => {
+    if (currentDate) {
+      setListData(columns());
+    }
+  }, [currentDate]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `nut-datepicker ${className || ""}`,
     style,
     ...rest
-  }, /* @__PURE__ */ React__default.createElement(Picker, {
+  }, listData.length > 0 && /* @__PURE__ */ React__default.createElement(Picker, {
     isVisible: show,
     listData,
     onClose: onCloseDatePicker,
     defaultValueData: defaultValue,
-    onConfirm: (list) => onConfirmDatePicker && onConfirmDatePicker(list),
-    onChoose: (index2, value, list) => updateChooseValueCustmer(index2, value, list),
+    onConfirm: (values, options2) => onConfirmDatePicker && onConfirmDatePicker(values, options2),
+    onChange: (index2, value, list) => updateChooseValueCustmer(index2, value, list),
+    threeDimensional,
     ref: pickerRef
   }));
 };
-DatePicker.defaultProps = defaultProps$I;
+DatePicker.defaultProps = defaultProps$L;
 DatePicker.displayName = "NutDatePicker";
-const defaultProps$H = {
+const defaultProps$K = {
   disabled: false,
   buttonSize: "",
   min: 1,
@@ -5242,7 +5456,7 @@ const InputNumber = (props) => {
     focus,
     ...restProps
   } = {
-    ...defaultProps$H,
+    ...defaultProps$K,
     ...props
   };
   const [inputValue, setInputValue] = useState(modelValue);
@@ -5363,7 +5577,7 @@ const InputNumber = (props) => {
     click: addNumber
   }));
 };
-InputNumber.defaultProps = defaultProps$H;
+InputNumber.defaultProps = defaultProps$K;
 InputNumber.displayName = "NutInputNumber";
 function trimExtraChar(value, char, regExp) {
   const index2 = value.indexOf(char);
@@ -5389,7 +5603,7 @@ function formatNumber(value, allowDot = true, allowMinus = true) {
   const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
   return value.replace(regExp, "");
 }
-const defaultProps$G = {
+const defaultProps$J = {
   type: "text",
   defaultValue: "",
   placeholder: "",
@@ -5472,7 +5686,7 @@ const Input = (props) => {
     clickRightIcon,
     click,
     ...rest
-  } = { ...defaultProps$G, ...props };
+  } = { ...defaultProps$J, ...props };
   locale.placeholder = placeholder || locale.placeholder;
   const [inputValue, SetInputValue] = useState("");
   const [active, SetActive] = useState(false);
@@ -5679,14 +5893,14 @@ const Input = (props) => {
     }
   }, errorMessage) : null)));
 };
-Input.defaultProps = defaultProps$G;
+Input.defaultProps = defaultProps$J;
 Input.displayName = "NutInput";
 const radioContext = {
   onChange: (val) => {
   }
 };
 var RadioContext = React__default.createContext(radioContext);
-const defaultProps$F = {
+const defaultProps$I = {
   value: null,
   textPosition: "right",
   onChange: (value) => {
@@ -5694,7 +5908,7 @@ const defaultProps$F = {
   direction: "vertical"
 };
 const RadioGroup = React__default.forwardRef((props, ref) => {
-  const { children } = { ...defaultProps$F, ...props };
+  const { children } = { ...defaultProps$I, ...props };
   cn("RadioGroup");
   const { className, value, onChange, textPosition, direction, ...rest } = props;
   const [val2State, setVal2State] = useState(value);
@@ -5730,9 +5944,9 @@ const RadioGroup = React__default.forwardRef((props, ref) => {
     ...rest
   }, cloneChildren()));
 });
-RadioGroup.defaultProps = defaultProps$F;
+RadioGroup.defaultProps = defaultProps$I;
 RadioGroup.displayName = "NutRadioGroup";
-const defaultProps$E = {
+const defaultProps$H = {
   disabled: false,
   checked: false,
   shape: "round",
@@ -5745,7 +5959,7 @@ const defaultProps$E = {
   }
 };
 const Radio = (props) => {
-  const { children } = { ...defaultProps$E, ...props };
+  const { children } = { ...defaultProps$H, ...props };
   const {
     className,
     disabled,
@@ -5804,10 +6018,10 @@ const Radio = (props) => {
     ...rest
   }, props.shape == "button" ? renderButton() : reverseState ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()]);
 };
-Radio.defaultProps = defaultProps$E;
+Radio.defaultProps = defaultProps$H;
 Radio.displayName = "NutRadio";
 Radio.RadioGroup = RadioGroup;
-const defaultProps$D = {
+const defaultProps$G = {
   count: 5,
   modelValue: 0,
   minimizeValue: 0,
@@ -5836,7 +6050,7 @@ const Rate = (props) => {
     allowHalf,
     spacing,
     change
-  } = { ...defaultProps$D, ...props };
+  } = { ...defaultProps$G, ...props };
   const b2 = cn("rate");
   const bi = cn("rate-item");
   const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
@@ -5900,9 +6114,9 @@ const Rate = (props) => {
     }));
   }));
 };
-Rate.defaultProps = defaultProps$D;
+Rate.defaultProps = defaultProps$G;
 Rate.displayName = "NutRate";
-const defaultProps$C = {
+const defaultProps$F = {
   title: "\u8BF7\u8F93\u5165\u5BC6\u7801",
   desc: "\u60A8\u4F7F\u7528\u4E86\u865A\u62DF\u8D44\u4EA7\uFF0C\u8BF7\u8FDB\u884C\u9A8C\u8BC1",
   tips: "\u5FD8\u8BB0\u5BC6\u7801",
@@ -6062,9 +6276,9 @@ const ShortPassword = (props) => {
     onClick: () => sure()
   }, locale.confirm)) : null)));
 };
-ShortPassword.defaultProps = defaultProps$C;
+ShortPassword.defaultProps = defaultProps$F;
 ShortPassword.displayName = "NutShortPassword";
-const defaultProps$B = {
+const defaultProps$E = {
   defaultValue: "",
   textAlign: "left",
   limitshow: false,
@@ -6092,7 +6306,7 @@ const TextArea = (props) => {
     onChange,
     onBlur,
     onFocus
-  } = { ...defaultProps$B, ...props };
+  } = { ...defaultProps$E, ...props };
   const textareaBem = cn("textarea");
   const [inputValue, SetInputValue] = useState("");
   useEffect(() => {
@@ -6156,7 +6370,7 @@ const TextArea = (props) => {
     className: textareaBem("limit")
   }, inputValue.length, "/", maxlength < 0 ? 0 : maxlength) : null);
 };
-TextArea.defaultProps = defaultProps$B;
+TextArea.defaultProps = defaultProps$E;
 TextArea.displayName = "NutTextArea";
 class UploadOptions {
   constructor() {
@@ -6205,7 +6419,7 @@ class Upload {
     }
   }
 }
-const defaultProps$A = {
+const defaultProps$D = {
   url: "",
   maximum: 1,
   uploadIcon: "photograph",
@@ -6280,7 +6494,7 @@ const InternalUploader = (props, ref) => {
     beforeUpload,
     beforeDelete,
     ...restProps
-  } = { ...defaultProps$A, ...props };
+  } = { ...defaultProps$D, ...props };
   const [fileList, setFileList] = useState([]);
   const [uploadQueue, setUploadQueue] = useState([]);
   useEffect(() => {
@@ -6460,118 +6674,493 @@ const InternalUploader = (props, ref) => {
       const _files = filterFiles(new Array().slice.call(files));
       readFile(_files);
     }
-    props.change && props.change({ fileList, event });
-    if (clearInput) {
-      clearInputValue($el);
+    props.change && props.change({ fileList, event });
+    if (clearInput) {
+      clearInputValue($el);
+    }
+  };
+  const handleItemClick = (file) => {
+    fileItemClick && fileItemClick(file);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classes,
+    ...restProps
+  }, children && /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-uploader__slot"
+  }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, capture ? /* @__PURE__ */ React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    capture: "user",
+    name,
+    accept,
+    disabled,
+    multiple,
+    onChange: fileChange
+  }) : /* @__PURE__ */ React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    name,
+    accept,
+    disabled,
+    multiple,
+    onChange: fileChange
+  })))), fileList.length !== 0 && fileList.map((item, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `nut-uploader__preview ${listType}`,
+      key: item.uid
+    }, listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview-img"
+    }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, /* @__PURE__ */ React__default.createElement(Icon, {
+      color: "#fff",
+      name: `${item.status == "error" ? "failure" : "loading"}`
+    }), /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)), isDeletable && /* @__PURE__ */ React__default.createElement(Icon, {
+      color: "rgba(0,0,0,0.6)",
+      className: "close",
+      name: "failure",
+      click: () => onDelete(item, index2)
+    }), item.type.includes("image") ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      src: item.url,
+      onClick: () => handleItemClick(item)
+    })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, defaultImg ? /* @__PURE__ */ React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      src: defaultImg,
+      onClick: () => handleItemClick(item)
+    }) : /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file"
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      onClick: () => handleItemClick(item),
+      className: "nut-uploader__preview-img__file__name"
+    }, /* @__PURE__ */ React__default.createElement(Icon, {
+      color: "#808080",
+      name: "link"
+    }), "\xA0", item.name))), /* @__PURE__ */ React__default.createElement("div", {
+      className: "tips"
+    }, item.name)), listType == "list" && /* @__PURE__ */ React__default.createElement("div", {
+      className: "nut-uploader__preview-list"
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: `nut-uploader__preview-img__file__name ${item.status}`,
+      onClick: () => handleItemClick(item)
+    }, /* @__PURE__ */ React__default.createElement(Icon, {
+      name: "link"
+    }), "\xA0", item.name), /* @__PURE__ */ React__default.createElement(Icon, {
+      color: "#808080",
+      className: "nut-uploader__preview-img__file__del",
+      name: "del",
+      click: () => onDelete(item, index2)
+    })));
+  }), maximum > fileList.length && listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
+    className: `nut-uploader__upload ${listType}`
+  }, /* @__PURE__ */ React__default.createElement(Icon, {
+    size: uploadIconSize,
+    color: "#808080",
+    name: uploadIcon
+  }), capture ? /* @__PURE__ */ React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    capture: "user",
+    name,
+    accept,
+    disabled,
+    multiple,
+    onChange: fileChange
+  }) : /* @__PURE__ */ React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    name,
+    accept,
+    disabled,
+    multiple,
+    onChange: fileChange
+  })));
+};
+const Uploader = React__default.forwardRef(InternalUploader);
+Uploader.defaultProps = defaultProps$D;
+Uploader.displayName = "NutUploader";
+const defaultProps$C = {
+  placeholder: "",
+  shape: "square",
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  align: "left",
+  readonly: true,
+  autoFocus: false,
+  label: "",
+  leftinIcon: /* @__PURE__ */ React__default.createElement(Icon, {
+    name: "search",
+    size: "12"
+  })
+};
+const SearchBar = (props) => {
+  const searchbarBem = cn("searchbar");
+  const { locale } = useConfig();
+  const searchRef = useRef(null);
+  const [value, setValue] = useState(() => props.value);
+  const {
+    placeholder,
+    shape,
+    className,
+    disabled,
+    maxLength,
+    clearable,
+    align,
+    readOnly,
+    autoFocus,
+    label,
+    actionText,
+    leftinIcon,
+    rightinIcon,
+    leftoutIcon,
+    rightoutIcon,
+    onChange,
+    onFocus,
+    onBlur,
+    onClear,
+    onSearch,
+    onClickInput,
+    onClickLeftinIcon,
+    onClickLeftoutIcon,
+    onClickRightinIcon,
+    onClickRightoutIcon
+  } = {
+    ...defaultProps$C,
+    ...props
+  };
+  const alignClass = `${align}`;
+  const change = (event) => {
+    const { value: value2 } = event.target;
+    onChange && (onChange == null ? void 0 : onChange(value2, event));
+    setValue(value2);
+  };
+  const focus = (event) => {
+    const { value: value2 } = event.target;
+    onFocus && (onFocus == null ? void 0 : onFocus(value2, event));
+  };
+  const blur = (event) => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.blur();
+    const { value: value2 } = event.target;
+    onBlur && (onBlur == null ? void 0 : onBlur(value2, event));
+  };
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    if (autoFocus) {
+      const searchSelf = searchRef.current;
+      searchSelf && searchSelf.focus();
+    }
+  }, [autoFocus]);
+  const renderField = () => {
+    return /* @__PURE__ */ React__default.createElement("input", {
+      className: `${searchbarBem("input")}  ${searchbarBem(alignClass)} ${shape === "round" ? searchbarBem("round") : ""} ${clearable ? searchbarBem("input-clear") : ""}`,
+      ref: searchRef,
+      style: { ...props.style, background: props.inputBackground },
+      value: value || "",
+      placeholder: placeholder || locale.placeholder,
+      disabled,
+      readOnly,
+      maxLength,
+      onChange: (e2) => change(e2),
+      onFocus: (e2) => focus(e2),
+      onBlur: (e2) => blur(e2),
+      onClick: (e2) => clickInput(e2)
+    });
+  };
+  const clickInput = (e2) => {
+    onClickInput && onClickInput(e2);
+  };
+  const renderLeftinIcon = () => {
+    if (!leftinIcon)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${searchbarBem("leftin-icon")} ${searchbarBem("icon")}`,
+      onClick: (e2) => clickLeftIcon("in-left", e2)
+    }, leftinIcon);
+  };
+  const renderLeftoutIcon = () => {
+    if (!leftoutIcon)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${searchbarBem("leftout-icon")}`,
+      onClick: (e2) => clickLeftIcon("out-left", e2)
+    }, leftoutIcon);
+  };
+  const clickLeftIcon = (flag, event) => {
+    if (flag === "in-left") {
+      onClickLeftinIcon && onClickLeftinIcon(value, event);
+    } else {
+      onClickLeftoutIcon && onClickLeftoutIcon(value, event);
+    }
+  };
+  const renderRightinIcon = () => {
+    if (!rightinIcon)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${searchbarBem("rightin-icon")} ${searchbarBem("icon")}`,
+      onClick: (e2) => clickRightIcon("in-right", e2)
+    }, rightinIcon);
+  };
+  const renderRightoutIcon = () => {
+    if (!rightoutIcon)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${searchbarBem("rightout-icon")}`,
+      onClick: (e2) => clickRightIcon("out-right", e2)
+    }, rightoutIcon);
+  };
+  const clickRightIcon = (flag, event) => {
+    if (flag === "in-left") {
+      onClickRightinIcon && onClickRightinIcon(value, event);
+    } else {
+      onClickRightoutIcon && onClickRightoutIcon(value, event);
+    }
+  };
+  const handleClear = () => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${searchbarBem("clear")} ${rightinIcon ? "pos-right" : ""}`,
+      onClick: (e2) => clearaVal(e2)
+    }, /* @__PURE__ */ React__default.createElement(Icon, {
+      name: "circle-close",
+      size: "12",
+      color: "#555"
+    }));
+  };
+  const clearaVal = (event) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setValue("");
+    onClear && onClear(event);
+  };
+  const renderRightLabel = () => {
+    if (actionText) {
+      return /* @__PURE__ */ React__default.createElement("div", {
+        className: searchbarBem("action-text"),
+        onClick: search
+      }, actionText);
+    }
+    return null;
+  };
+  const search = () => {
+    onSearch && onSearch(value);
+  };
+  const renderLabel = () => {
+    if (label) {
+      return /* @__PURE__ */ React__default.createElement("div", {
+        className: searchbarBem("label")
+      }, label);
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `${searchbarBem()} ${disabled ? searchbarBem("disabled") : ""}  ${className || ""}`,
+    style: { ...props.style, background: props.background }
+  }, renderLeftoutIcon(), renderLabel(), /* @__PURE__ */ React__default.createElement("div", {
+    className: `${searchbarBem("content")}`
+  }, renderLeftinIcon(), renderField(), renderRightinIcon(), clearable && value && handleClear()), renderRightoutIcon(), renderRightLabel());
+};
+SearchBar.defaultProps = defaultProps$C;
+SearchBar.displayName = "NutSearchBar";
+const defaultProps$B = {
+  confirmText: "",
+  title: "",
+  visible: false,
+  type: "default",
+  customKey: [],
+  className: "",
+  randomKeys: false,
+  popClass: "",
+  onClose: () => {
+  }
+};
+const NumberKeyboard = (props) => {
+  const { locale } = useConfig();
+  const {
+    title,
+    confirmText,
+    visible,
+    type,
+    customKey,
+    randomKeys,
+    popClass,
+    style,
+    className,
+    onChange,
+    onDelete,
+    onClose
+  } = props;
+  const b2 = cn("numberkeyboard");
+  const [show, setShow] = useState(visible);
+  const [clickKeyIndex, setClickKeyIndex] = useState(void 0);
+  const [keysList, setKeysList] = useState([]);
+  useEffect(() => {
+    setShow(visible);
+  }, [visible]);
+  const defaultKey = () => {
+    let leftBottomKey = {
+      id: "lock",
+      type: "lock"
+    };
+    if (customKey) {
+      const customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 0) {
+        const newCustomKey = customKeys[0];
+        leftBottomKey = {
+          id: newCustomKey,
+          type: "custom"
+        };
+      }
+    }
+    return [
+      ...getBasicKeys(),
+      leftBottomKey,
+      { id: 0, type: "number" },
+      { id: "delete", type: "delete" }
+    ];
+  };
+  const getBasicKeys = () => {
+    const keys = [];
+    for (let i = 1; i <= 9; i++) {
+      keys.push({ id: i, type: "number" });
+    }
+    if (randomKeys) {
+      return keys.sort(() => Math.random() > 0.5 ? 1 : -1);
+    }
+    return keys;
+  };
+  const genCustomKeys = () => {
+    const keys = getBasicKeys();
+    if (!customKey)
+      return [];
+    let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+    if (customKeys.length > 2) {
+      customKeys = [customKeys[0], customKeys[1]];
+    }
+    if (customKeys.length === 2 && props.title && props.type !== "rightColumn") {
+      customKeys = [customKeys[0]];
+    }
+    if (customKeys.length === 1) {
+      if (props.title && props.type !== "rightColumn") {
+        keys.push({ id: customKeys[0], type: "custom" }, { id: 0, type: "number" }, { id: "delete", type: "delete" });
+      } else {
+        keys.push({ id: 0, type: "number" }, { id: customKeys[0], type: "custom" });
+      }
+    } else if (customKeys.length === 2) {
+      keys.push({ id: customKeys[0], type: "custom" }, { id: 0, type: "number" }, { id: customKeys[1], type: "custom" });
+    }
+    return keys;
+  };
+  useEffect(() => {
+    if (props.type === "rightColumn" || props.title !== "") {
+      setKeysList(genCustomKeys());
+    } else {
+      setKeysList(defaultKey());
+    }
+  }, []);
+  const onTouchstart = (item, event) => {
+    event.stopPropagation();
+    setClickKeyIndex(item.id);
+    if (item.type === "number" || item.type === "custom") {
+      onChange && onChange(item.id);
+    }
+    if (item.type === "lock") {
+      onClose && onClose();
+    }
+    if (item.type === "delete") {
+      onDelete && onDelete();
     }
   };
-  const handleItemClick = (file) => {
-    fileItemClick && fileItemClick(file);
+  const onTouchMove = (event) => {
+    event.stopPropagation();
   };
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: classes,
-    ...restProps
-  }, children && /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-uploader__slot"
-  }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, capture ? /* @__PURE__ */ React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  }) : /* @__PURE__ */ React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  })))), fileList.length !== 0 && fileList.map((item, index2) => {
+  const onTouchEnd = (event) => {
+    event.preventDefault();
+    setClickKeyIndex(void 0);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Popup, {
+    visible: show,
+    position: "bottom",
+    popClass,
+    onClickOverlay: onClose,
+    onClickCloseIcon: onClose,
+    overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0)" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2()} ${className}`,
+    style: { ...style }
+  }, title ? /* @__PURE__ */ React__default.createElement("div", {
+    className: b2("header")
+  }, /* @__PURE__ */ React__default.createElement("h3", {
+    className: b2("header__tit")
+  }, title), type === "default" ? /* @__PURE__ */ React__default.createElement("span", {
+    className: b2("header__close"),
+    onClick: onClose
+  }, locale.done) : null) : null, /* @__PURE__ */ React__default.createElement("div", {
+    className: b2("body")
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: b2("body__keys")
+  }, keysList == null ? void 0 : keysList.map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: `nut-uploader__preview ${listType}`,
-      key: item.uid
-    }, listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview-img"
-    }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview__progress"
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview__progress__msg"
-    }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview__progress"
-    }, /* @__PURE__ */ React__default.createElement(Icon, {
-      color: "#fff",
-      name: `${item.status == "error" ? "failure" : "loading"}`
-    }), /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview__progress__msg"
-    }, item.message)), isDeletable && /* @__PURE__ */ React__default.createElement(Icon, {
-      color: "rgba(0,0,0,0.6)",
-      className: "close",
-      name: "failure",
-      click: () => onDelete(item, index2)
-    }), item.type.includes("image") ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement("img", {
-      className: "nut-uploader__preview-img__c",
-      src: item.url,
-      onClick: () => handleItemClick(item)
-    })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, defaultImg ? /* @__PURE__ */ React__default.createElement("img", {
-      className: "nut-uploader__preview-img__c",
-      src: defaultImg,
-      onClick: () => handleItemClick(item)
-    }) : /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview-img__file"
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      onClick: () => handleItemClick(item),
-      className: "nut-uploader__preview-img__file__name"
-    }, /* @__PURE__ */ React__default.createElement(Icon, {
-      color: "#808080",
-      name: "link"
-    }), "\xA0", item.name))), /* @__PURE__ */ React__default.createElement("div", {
-      className: "tips"
-    }, item.name)), listType == "list" && /* @__PURE__ */ React__default.createElement("div", {
-      className: "nut-uploader__preview-list"
+      key: index2,
+      className: classNames({
+        "key-board-wrapper": true,
+        "key-board-wrapper-large": item.id === 0 && type === "rightColumn" && Array.isArray(customKey) && customKey.length === 1
+      })
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: `nut-uploader__preview-img__file__name ${item.status}`,
-      onClick: () => handleItemClick(item)
-    }, /* @__PURE__ */ React__default.createElement(Icon, {
-      name: "link"
-    }), "\xA0", item.name), /* @__PURE__ */ React__default.createElement(Icon, {
-      color: "#808080",
-      className: "nut-uploader__preview-img__file__del",
-      name: "del",
-      click: () => onDelete(item, index2)
-    })));
-  }), maximum > fileList.length && listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
-    className: `nut-uploader__upload ${listType}`
-  }, /* @__PURE__ */ React__default.createElement(Icon, {
-    size: uploadIconSize,
-    color: "#808080",
-    name: uploadIcon
-  }), capture ? /* @__PURE__ */ React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  }) : /* @__PURE__ */ React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    name,
-    accept,
-    disabled,
-    multiple,
-    onChange: fileChange
-  })));
+      className: classNames({
+        key: true,
+        active: item.id === clickKeyIndex,
+        lock: item.type === "lock",
+        delete: item.type === "delete"
+      }),
+      onTouchStart: (event) => onTouchstart(item, event),
+      onTouchMove,
+      onTouchEnd
+    }, item.type === "number" || item.type === "custom" ? /* @__PURE__ */ React__default.createElement("div", null, item.id) : null, item.type === "lock" ? /* @__PURE__ */ React__default.createElement("img", {
+      src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png",
+      alt: ""
+    }) : null, item.type === "delete" ? /* @__PURE__ */ React__default.createElement("img", {
+      src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
+      alt: ""
+    }) : null));
+  })), type === "rightColumn" ? /* @__PURE__ */ React__default.createElement("div", {
+    className: b2("sidebar")
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "key-board-wrapper"
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames({
+      key: true,
+      active: clickKeyIndex === "delete"
+    }),
+    onTouchStart: (event) => onTouchstart({ id: "delete", type: "delete" }, event),
+    onTouchMove,
+    onTouchEnd
+  }, /* @__PURE__ */ React__default.createElement("img", {
+    src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
+    alt: ""
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    className: "key-board-wrapper key-board-finish",
+    onClick: onClose
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames({
+      key: true,
+      finish: true,
+      activeFinsh: clickKeyIndex === "finish"
+    })
+  }, confirmText || locale.done))) : null))));
 };
-const Uploader = React__default.forwardRef(InternalUploader);
-Uploader.defaultProps = defaultProps$A;
-Uploader.displayName = "NutUploader";
-const defaultProps$z = {
+NumberKeyboard.defaultProps = defaultProps$B;
+NumberKeyboard.displayName = "NutNumberKeyboard";
+const defaultProps$A = {
   cancelTxt: "",
   optionTag: "name",
   optionSubTag: "subname",
@@ -6604,7 +7193,7 @@ const ActionSheet = (props) => {
     className,
     style,
     ...rest
-  } = { ...defaultProps$z, ...props };
+  } = { ...defaultProps$A, ...props };
   const b2 = cn("actionsheet");
   const isHighlight = (item) => {
     return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || "name"] ? props.color : "#1a1a1a";
@@ -6648,9 +7237,9 @@ const ActionSheet = (props) => {
     onClick: () => cancelActionSheet()
   }, cancelTxt)));
 };
-ActionSheet.defaultProps = defaultProps$z;
+ActionSheet.defaultProps = defaultProps$A;
 ActionSheet.displayName = "NutActionSheet";
-const defaultProps$y = {
+const defaultProps$z = {
   bottom: 20,
   right: 10,
   elId: "body",
@@ -6673,7 +7262,7 @@ const BackTop = (props) => {
     style,
     onClick
   } = {
-    ...defaultProps$y,
+    ...defaultProps$z,
     ...props
   };
   const [backTop, SetBackTop] = useState(false);
@@ -6762,7 +7351,7 @@ const BackTop = (props) => {
     name: "top"
   }));
 };
-BackTop.defaultProps = defaultProps$y;
+BackTop.defaultProps = defaultProps$z;
 BackTop.displayName = "NutBackTop";
 function clamp(v2, min, max) {
   return Math.max(min, Math.min(v2, max));
@@ -11165,7 +11754,7 @@ const host = createHost(primitives, {
   }
 });
 const animated = host.animated;
-const defaultProps$x = {
+const defaultProps$y = {
   attract: false,
   direction: void 0,
   boundary: {
@@ -11178,7 +11767,7 @@ const defaultProps$x = {
 };
 const Drag = (props) => {
   const { attract, direction, boundary, children, className, style, ...reset } = {
-    ...defaultProps$x,
+    ...defaultProps$y,
     ...props
   };
   const b2 = cn("drag");
@@ -11237,7 +11826,7 @@ const Drag = (props) => {
     ...bind()
   }, children));
 };
-Drag.defaultProps = defaultProps$x;
+Drag.defaultProps = defaultProps$y;
 Drag.displayName = "NutDrag";
 const Content = (props) => {
   const {
@@ -11429,7 +12018,7 @@ function confirm(config2, renderFunc) {
     update: update2
   };
 }
-const defaultProps$w = {
+const defaultProps$x = {
   okText: "",
   cancelText: "",
   mask: true,
@@ -11520,9 +12109,9 @@ Dialog.confirm = (props) => {
     });
   };
 });
-Dialog.defaultProps = defaultProps$w;
+Dialog.defaultProps = defaultProps$x;
 Dialog.displayName = "NutDialog";
-const defaultProps$v = {
+const defaultProps$w = {
   hasMore: true,
   threshold: 200,
   containerId: "",
@@ -11556,7 +12145,7 @@ const Infiniteloading = (props) => {
     scrollChange,
     ...restProps
   } = {
-    ...defaultProps$v,
+    ...defaultProps$w,
     ...props
   };
   const [isInfiniting, setIsInfiniting] = useState(false);
@@ -11713,7 +12302,7 @@ const Infiniteloading = (props) => {
     className: "tips"
   }, locale.infiniteloading.loadMoreText || loadMoreTxt)));
 };
-Infiniteloading.defaultProps = defaultProps$v;
+Infiniteloading.defaultProps = defaultProps$w;
 Infiniteloading.displayName = "NutInfiniteloading";
 class Notification extends React.PureComponent {
   constructor(props) {
@@ -11872,7 +12461,7 @@ var Notify = {
     }
   }
 };
-const defaultProps$u = {
+const defaultProps$v = {
   isAsync: false,
   checked: false,
   disable: false,
@@ -11895,7 +12484,7 @@ const Switch = (props) => {
     className,
     style
   } = {
-    ...defaultProps$u,
+    ...defaultProps$v,
     ...props
   };
   const [value, setValue] = useState(false);
@@ -11935,10 +12524,10 @@ const Switch = (props) => {
     className: `${b2("label")} close`
   }, inactiveText))));
 };
-Switch.defaultProps = defaultProps$u;
+Switch.defaultProps = defaultProps$v;
 Switch.displayName = "NutSwitch";
 const isObject = (val) => val !== null && typeof val === "object";
-const defaultProps$t = {
+const defaultProps$u = {
   strokeWidth: 5,
   radius: 50,
   strokeLinecap: "round",
@@ -11961,7 +12550,7 @@ const CircleProgress = (props) => {
     strokeLinecap,
     ...restProps
   } = {
-    ...defaultProps$t,
+    ...defaultProps$u,
     ...props
   };
   const b2 = cn("circleprogress");
@@ -12045,9 +12634,9 @@ const CircleProgress = (props) => {
     className: "nut-circleprogress-text"
   }, children || /* @__PURE__ */ React__default.createElement("div", null, progress, "%")));
 };
-CircleProgress.defaultProps = defaultProps$t;
+CircleProgress.defaultProps = defaultProps$u;
 CircleProgress.displayName = "NutCircleProgress";
-const defaultProps$s = {
+const defaultProps$t = {
   direction: "across",
   list: [],
   standTime: 1e3,
@@ -12085,7 +12674,7 @@ const NoticeBar = (props) => {
     rightIcon,
     close,
     click
-  } = { ...defaultProps$s, ...props };
+  } = { ...defaultProps$t, ...props };
   const wrap = useRef(null);
   const content = useRef(null);
   const [showNoticeBar, SetShowNoticeBar] = useState(true);
@@ -12298,16 +12887,16 @@ const NoticeBar = (props) => {
     size: "11px"
   }) : null))) : null);
 };
-NoticeBar.defaultProps = defaultProps$s;
+NoticeBar.defaultProps = defaultProps$t;
 NoticeBar.displayName = "NutNoticeBar";
 const DataContext$1 = createContext({});
-const defaultProps$r = {
+const defaultProps$s = {
   current: 0,
   direction: "horizontal",
   progressDot: false
 };
 const Steps = (props) => {
-  const propSteps = { ...defaultProps$r, ...props };
+  const propSteps = { ...defaultProps$s, ...props };
   const {
     children,
     current,
@@ -12332,9 +12921,9 @@ const Steps = (props) => {
     ...restProps
   }, children));
 };
-Steps.defaultProps = defaultProps$r;
+Steps.defaultProps = defaultProps$s;
 Steps.displayName = "NutSteps";
-const defaultProps$q = {
+const defaultProps$r = {
   title: "",
   content: "",
   activeIndex: 0,
@@ -12355,7 +12944,7 @@ const Step = (props) => {
     renderContent,
     ...restProps
   } = {
-    ...defaultProps$q,
+    ...defaultProps$r,
     ...props
   };
   const parent = useContext$1(DataContext$1);
@@ -12412,10 +13001,10 @@ const Step = (props) => {
     className: "nut-step-content"
   }, renderContent())));
 };
-Step.defaultProps = defaultProps$q;
+Step.defaultProps = defaultProps$r;
 Step.displayName = "NutStep";
 const DataContext = createContext({});
-const defaultProps$p = {
+const defaultProps$q = {
   width: typeof window === "object" ? window.innerWidth : 375,
   height: 0,
   duration: 500,
@@ -12432,7 +13021,7 @@ const defaultProps$p = {
 };
 const DISTANCE = 5;
 const Swiper = React__default.forwardRef((props, ref) => {
-  const propSwiper = { ...defaultProps$p, ...props };
+  const propSwiper = { ...defaultProps$q, ...props };
   const {
     children,
     direction,
@@ -12821,13 +13410,13 @@ const Swiper = React__default.forwardRef((props, ref) => {
     });
   })) : /* @__PURE__ */ React__default.createElement("div", null, pageContent)));
 });
-Swiper.defaultProps = defaultProps$p;
+Swiper.defaultProps = defaultProps$q;
 Swiper.displayName = "NutSwiper";
-const defaultProps$o = {
+const defaultProps$p = {
   direction: "horizontal"
 };
 const SwiperItem = React__default.forwardRef((props, ref) => {
-  const _props = { ...defaultProps$o, ...props };
+  const _props = { ...defaultProps$p, ...props };
   const { children, direction, size } = _props;
   const parent = useContext$1(DataContext);
   const [offset, setOffset] = useState(0);
@@ -12852,10 +13441,10 @@ const SwiperItem = React__default.forwardRef((props, ref) => {
     style: style()
   }, children);
 });
-SwiperItem.defaultProps = defaultProps$o;
+SwiperItem.defaultProps = defaultProps$p;
 SwiperItem.displayName = "NutSwiperItem";
 const AvatarContext = createContext({});
-const defaultProps$n = {
+const defaultProps$o = {
   size: "",
   icon: "",
   bgColor: "#eee",
@@ -12882,7 +13471,7 @@ const Avatar = (props) => {
     onError,
     ...rest
   } = {
-    ...defaultProps$n,
+    ...defaultProps$o,
     ...props
   };
   const [maxSum, setMaxSum] = useState(0);
@@ -12962,9 +13551,9 @@ const Avatar = (props) => {
     className: "text"
   }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - ((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.maxCount)}`)));
 };
-Avatar.defaultProps = defaultProps$n;
+Avatar.defaultProps = defaultProps$o;
 Avatar.displayName = "NutAvatar";
-const defaultProps$m = {
+const defaultProps$n = {
   maxContent: "",
   maxCount: "",
   maxBgColor: "#eee",
@@ -12976,7 +13565,7 @@ const defaultProps$m = {
 };
 const AvatarGroup = (props) => {
   useConfig();
-  const propAvatarGroup = { ...defaultProps$m, ...props };
+  const propAvatarGroup = { ...defaultProps$n, ...props };
   const { className, style, children } = propAvatarGroup;
   const avatarGroupRef = useRef(null);
   const b2 = cn("avatar-group");
@@ -12993,9 +13582,9 @@ const AvatarGroup = (props) => {
     ref: avatarGroupRef
   }, children));
 };
-AvatarGroup.defaultProps = defaultProps$m;
+AvatarGroup.defaultProps = defaultProps$n;
 AvatarGroup.displayName = "NutAvatarGroup";
-const defaultProps$l = {
+const defaultProps$m = {
   price: 0,
   needSymbol: true,
   symbol: "&yen;",
@@ -13013,7 +13602,7 @@ const Price = (props) => {
     className,
     ...rest
   } = {
-    ...defaultProps$l,
+    ...defaultProps$m,
     ...props
   };
   const b2 = cn("price");
@@ -13066,9 +13655,9 @@ const Price = (props) => {
     className: `${b2("small")}`
   }, formatDecimal(price)));
 };
-Price.defaultProps = defaultProps$l;
+Price.defaultProps = defaultProps$m;
 Price.displayName = "NutPrice";
-const defaultProps$k = {
+const defaultProps$l = {
   value: "",
   dot: false,
   max: 1e4,
@@ -13080,7 +13669,7 @@ const defaultProps$k = {
 };
 const Badge = (props) => {
   const { children, dot, top, right, zIndex, color, icons } = {
-    ...defaultProps$k,
+    ...defaultProps$l,
     ...props
   };
   const content = () => {
@@ -13115,9 +13704,9 @@ const Badge = (props) => {
     style: getStyle()
   }, content()));
 };
-Badge.defaultProps = defaultProps$k;
+Badge.defaultProps = defaultProps$l;
 Badge.displayName = "NutBadge";
-const defaultProps$j = {
+const defaultProps$k = {
   type: "default",
   color: "",
   textColor: "",
@@ -13125,8 +13714,9 @@ const defaultProps$j = {
   round: false,
   mark: false,
   closeable: false,
-  isShow: true,
   prefixCls: "nut-tag",
+  onClose: (e2) => {
+  },
   onClick: (e2) => {
   }
 };
@@ -13141,13 +13731,14 @@ const Tag = (props) => {
     mark,
     closeable,
     textColor,
-    isShow,
-    onClick
+    onClick,
+    onClose
   } = {
-    ...defaultProps$j,
+    ...defaultProps$k,
     ...props
   };
   const [btnName, setBtnName] = useState("");
+  const [isTagShow, setIsTagShow] = useState(true);
   useEffect(() => {
     setBtnName(classes());
   }, [
@@ -13159,8 +13750,8 @@ const Tag = (props) => {
     mark,
     closeable,
     prefixCls,
-    isShow,
-    onClick
+    onClick,
+    onClose
   ]);
   const classes = () => {
     const prefixCls2 = "nut-tag";
@@ -13191,18 +13782,23 @@ const Tag = (props) => {
     }
     return style;
   };
-  return /* @__PURE__ */ React__default.createElement("div", null, closeable ? isShow ? /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("div", null, closeable ? isTagShow && /* @__PURE__ */ React__default.createElement("div", {
     className: `${btnName}`,
     style: getStyle(),
     onClick: (e2) => handleClick(e2)
   }, children && /* @__PURE__ */ React__default.createElement("span", {
     className: "text"
-  }, children), closeable && /* @__PURE__ */ React__default.createElement(Icon, {
+  }, children), /* @__PURE__ */ React__default.createElement(Icon, {
     className: "_icon",
     name: "close",
     size: "12",
-    onClick: (e2) => handleClick(e2)
-  })) : "" : /* @__PURE__ */ React__default.createElement("div", {
+    click: (e2) => {
+      setIsTagShow(false);
+      if (props.onClose) {
+        props.onClose(e2);
+      }
+    }
+  })) : /* @__PURE__ */ React__default.createElement("div", {
     className: `${btnName}`,
     style: getStyle(),
     onClick: (e2) => handleClick(e2)
@@ -13210,7 +13806,7 @@ const Tag = (props) => {
     className: "text"
   }, children)));
 };
-Tag.defaultProps = defaultProps$j;
+Tag.defaultProps = defaultProps$k;
 Tag.displayName = "NutTag";
 function fillRef(ref, node) {
   if (typeof ref === "function") {
@@ -13269,7 +13865,7 @@ const getEleAttr = (ele) => {
   }
   return null;
 };
-const defaultProps$i = {
+const defaultProps$j = {
   list: [],
   theme: "light",
   location: "bottom",
@@ -13290,7 +13886,7 @@ const Popover = (props) => {
     onClick,
     ...reset
   } = {
-    ...defaultProps$i,
+    ...defaultProps$j,
     ...props
   };
   const goodItem = useRef(null);
@@ -13399,9 +13995,9 @@ const Popover = (props) => {
     }, item.name));
   })) : null)));
 };
-Popover.defaultProps = defaultProps$i;
+Popover.defaultProps = defaultProps$j;
 Popover.displayName = "NutPopover";
-const defaultProps$h = {
+const defaultProps$i = {
   width: "100px",
   height: "100px",
   row: 1,
@@ -13429,7 +14025,7 @@ const Skeleton = (props) => {
     avatarShape,
     ...restProps
   } = {
-    ...defaultProps$h,
+    ...defaultProps$i,
     ...props
   };
   const b2 = cn("skeleton");
@@ -13484,9 +14080,9 @@ const Skeleton = (props) => {
     });
   })))));
 };
-Skeleton.defaultProps = defaultProps$h;
+Skeleton.defaultProps = defaultProps$i;
 Skeleton.displayName = "NutSkeleton";
-const defaultProps$g = {
+const defaultProps$h = {
   showPlainText: false,
   showDays: false,
   paused: false,
@@ -13509,7 +14105,7 @@ const CountDown = (props) => {
     onUpdate,
     children,
     ...rest
-  } = { ...defaultProps$g, ...props };
+  } = { ...defaultProps$h, ...props };
   const b2 = cn("countdown");
   const [restTimeStamp, setRestTime] = useState(0);
   const stateRef = useRef({
@@ -13656,9 +14252,9 @@ const CountDown = (props) => {
     className: b2("block")
   }, resttime.s))));
 };
-CountDown.defaultProps = defaultProps$g;
+CountDown.defaultProps = defaultProps$h;
 CountDown.displayName = "NutCountDown";
-const defaultProps$f = {
+const defaultProps$g = {
   activeName: ["0"],
   accordion: false,
   icon: "",
@@ -13680,7 +14276,7 @@ const Collapse = memo((props) => {
     iconColor,
     change
   } = {
-    ...defaultProps$f,
+    ...defaultProps$g,
     ...props
   };
   const childrenDom = React__default.Children.toArray(children);
@@ -13735,9 +14331,9 @@ const Collapse = memo((props) => {
     });
   }));
 }, areEqual);
-Collapse.defaultProps = defaultProps$f;
+Collapse.defaultProps = defaultProps$g;
 Collapse.displayName = "NutCollapse";
-const defaultProps$e = {
+const defaultProps$f = {
   title: "",
   name: "",
   isOpen: false,
@@ -13771,7 +14367,7 @@ const CollapseItem = (props) => {
     iconColor,
     ...rest
   } = {
-    ...defaultProps$e,
+    ...defaultProps$f,
     ...props
   };
   const [domHeight, setDomHeight] = useState(-1);
@@ -13840,9 +14436,9 @@ const CollapseItem = (props) => {
     className: colBem("content-text")
   }, children)));
 };
-CollapseItem.defaultProps = defaultProps$e;
+CollapseItem.defaultProps = defaultProps$f;
 CollapseItem.displayName = "NutCollapseItem";
-const defaultProps$d = {
+const defaultProps$e = {
   maxLen: 0,
   endNumber: "",
   delaySpeed: 300,
@@ -13860,7 +14456,7 @@ const CountUp = (props) => {
     thousands,
     ...reset
   } = {
-    ...defaultProps$d,
+    ...defaultProps$e,
     ...props
   };
   const b2 = cn("countup");
@@ -13926,9 +14522,9 @@ const CountUp = (props) => {
     }, item));
   })));
 };
-CountUp.defaultProps = defaultProps$d;
+CountUp.defaultProps = defaultProps$e;
 CountUp.displayName = "NutCountUp";
-const defaultProps$c = {};
+const defaultProps$d = {};
 class AnimatingNumbers extends Component {
   constructor(props) {
     super(props);
@@ -13940,7 +14536,7 @@ class AnimatingNumbers extends Component {
     });
   }
 }
-AnimatingNumbers.defaultProps = defaultProps$c;
+AnimatingNumbers.defaultProps = defaultProps$d;
 AnimatingNumbers.displayName = "NutAnimatingNumbers";
 AnimatingNumbers.CountUp = CountUp;
 AnimatingNumbers.CountUp = CountUp;
@@ -13949,7 +14545,7 @@ const defaultStatus = {
   error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
   network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
 };
-const defaultProps$b = {
+const defaultProps$c = {
   description: "\u65E0\u5185\u5BB9",
   image: "empty",
   imageSize: "",
@@ -13957,9 +14553,9 @@ const defaultProps$b = {
 };
 const Empty = (props) => {
   const { locale } = useConfig();
-  defaultProps$b.description = locale.noData || defaultProps$b.description;
+  defaultProps$c.description = locale.noData || defaultProps$c.description;
   const { image, imageSize, description, children, className, ...rest } = {
-    ...defaultProps$b,
+    ...defaultProps$c,
     ...props
   };
   const [imgStyle, setImgStyle] = useState({});
@@ -14001,7 +14597,7 @@ const Empty = (props) => {
     className: b2("description")
   }, description) : { description }, children);
 };
-Empty.defaultProps = defaultProps$b;
+Empty.defaultProps = defaultProps$c;
 Empty.displayName = "NutEmpty";
 const initPositinoCache = (reaItemSize, length = 0) => {
   let index2 = 0;
@@ -14114,7 +14710,7 @@ const updateItemSize = (positions, items, sizeKey) => {
     }
   });
 };
-const defaultProps$a = {};
+const defaultProps$b = {};
 const VirtualList = (props) => {
   const {
     sourceData = [],
@@ -14273,9 +14869,9 @@ const VirtualList = (props) => {
     }) : data);
   }))));
 };
-VirtualList.defaultProps = defaultProps$a;
+VirtualList.defaultProps = defaultProps$b;
 VirtualList.displayName = "NutVirtualList";
-const defaultProps$9 = {
+const defaultProps$a = {
   source: {
     type: {},
     src: ""
@@ -14300,7 +14896,7 @@ const Video = (props) => {
     playend,
     ...restProps
   } = {
-    ...defaultProps$9,
+    ...defaultProps$a,
     ...props
   };
   const rootRef = useRef(null);
@@ -14354,8 +14950,128 @@ const Video = (props) => {
     kind: "captions"
   })));
 };
-Video.defaultProps = defaultProps$9;
+Video.defaultProps = defaultProps$a;
 Video.displayName = "NutVideo";
+const defaultProps$9 = {
+  className: "",
+  style: {},
+  isShowPercentage: true,
+  percentage: 0,
+  fillColor: "#f3f3f3",
+  strokeColor: "linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)",
+  strokeWidth: "",
+  textColor: "",
+  textWidth: "",
+  showText: true,
+  textInside: false,
+  textBackground: "linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)",
+  textType: "text",
+  status: false,
+  iconName: "checked",
+  iconColor: "#439422",
+  iconSize: "16px",
+  rounded: true,
+  children: void 0
+};
+const Progress = (props) => {
+  const {
+    className,
+    style,
+    isShowPercentage,
+    percentage,
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    size,
+    textColor,
+    textWidth,
+    showText,
+    textInside,
+    textBackground,
+    textType,
+    status,
+    iconName,
+    iconColor,
+    iconSize,
+    rounded,
+    children,
+    ...rest
+  } = { ...defaultProps$9, ...props };
+  const b2 = cn("progress");
+  const classes = classNames(b2(""));
+  const classesOuter = classNames({
+    [`${b2("")}-outer`]: true,
+    [`${b2("")}-${size || "base"}`]: true
+  });
+  const classesInner = classNames({
+    [`${b2("")}-inner`]: true,
+    [`${b2("")}-active`]: status
+  });
+  const classesText = classNames({
+    [`${b2("")}-text`]: true
+  });
+  const classesInsideText = classNames({
+    [`${b2("")}-text`]: true,
+    [`${b2("")}-insidetext`]: true
+  });
+  const classesTextInner = classNames({
+    [`${b2("")}-text__inner`]: true
+  });
+  const stylesOuter = {
+    height: `${strokeWidth}px`,
+    borderRadius: `${rounded ? rounded === true ? "12px" : rounded : 0}`,
+    background: `${fillColor}`
+  };
+  const stylesInner = {
+    width: `${percentage}%`,
+    borderRadius: `${rounded ? rounded === true ? "12px" : rounded : 0}`,
+    background: `${strokeColor}`
+  };
+  const stylesInsideText = {
+    width: `${textWidth}px`,
+    left: `${percentage}%`,
+    background: textBackground || strokeColor
+  };
+  const stylesInsideIcon = {
+    width: `${textWidth}px`,
+    left: `${percentage}%`
+  };
+  const stylesText = {
+    width: `${textWidth}px`
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `${classes} ${className}`,
+    style,
+    ...rest
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classesOuter,
+    style: stylesOuter
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classesInner,
+    style: stylesInner
+  }, showText && textInside && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children ? /* @__PURE__ */ React__default.createElement("div", {
+    className: classesInsideText,
+    style: stylesInsideIcon
+  }, children) : /* @__PURE__ */ React__default.createElement("div", {
+    className: classesInsideText,
+    style: stylesInsideText
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    className: classesTextInner,
+    style: { color: textColor || "#fff" }
+  }, percentage, isShowPercentage ? "%" : ""))))), showText && !textInside && /* @__PURE__ */ React__default.createElement("div", {
+    className: classesText,
+    style: stylesText
+  }, textType === "text" && /* @__PURE__ */ React__default.createElement("span", {
+    className: classesTextInner,
+    style: { color: textColor || "#333" }
+  }, percentage, isShowPercentage ? "%" : ""), textType === "icon" && /* @__PURE__ */ React__default.createElement(Icon, {
+    size: iconSize,
+    name: iconName,
+    color: iconColor
+  })));
+};
+Progress.defaultProps = defaultProps$9;
+Progress.displayName = "NutProgress";
 const defaultProps$8 = {
   type: "custom",
   existAddress: [],
@@ -15031,6 +15747,8 @@ const Signature = (props) => {
       case "jpg":
         dataurl = canvas.toDataURL("image/jpeg", 0.8);
         break;
+      default:
+        dataurl = canvas.toDataURL("image/png");
     }
     clear();
     props.confirm && props.confirm(canvas, dataurl);
@@ -15308,4 +16026,4 @@ const TimeSelect = (props) => {
 };
 TimeSelect.defaultProps = defaultProps;
 TimeSelect.displayName = "NutTimeSelect";
-export { ActionSheet, Address, AnimatingNumbers, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Empty, FixedNav, Icon, Indicator, Infiniteloading, Input, InputNumber, Layout, NavBar, NoticeBar, Notify, Overlay, Pagination, Picker, Popover, Popup, Price, Radio, RadioGroup, Range, Rate, Row, ShortPassword, Signature, Skeleton, Step, Steps, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, Uploader, Video, VirtualList };
+export { ActionSheet, Address, AnimatingNumbers, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cell, CellGroup, Checkbox, CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, ConfigProvider, CountDown, DatePicker, Dialog, Divider, Drag, Elevator, Empty, FixedNav, Icon, Indicator, Infiniteloading, Input, InputNumber, Layout, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, Picker, Popover, Popup, Price, Progress, Radio, RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, Signature, Skeleton, Step, Steps, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, Toast, Uploader, Video, VirtualList };