@nutui/nutui-react-taro 1.4.6 → 1.4.7-beta.1

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.6 Wed Feb 08 2023 16:05:05 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.7-beta.1 Wed Feb 15 2023 16:25:20 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -177,6 +177,7 @@
     size: "normal",
     block: false,
     icon: "",
+    iconSize: "16",
     style: {},
     children: void 0,
     onClick: (e2) => {
@@ -193,6 +194,7 @@
       size,
       block,
       icon,
+      iconSize,
       children,
       onClick,
       className,
@@ -250,6 +252,7 @@
       size,
       block,
       icon,
+      iconSize,
       children,
       onClick,
       classes,
@@ -275,7 +278,8 @@
     }), !loading && icon ? /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
-      name: icon
+      name: icon,
+      size: iconSize
     }) : "", children && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: icon || loading ? "text" : ""
     }, children)));
@@ -1553,6 +1557,7 @@
     closeable: false,
     closeIconPosition: "top-right",
     closeIcon: "close",
+    closeIconSize: "12px",
     destroyOnClose: true,
     teleport: null,
     overlay: true,
@@ -1602,7 +1607,8 @@
       onClosed,
       onClick,
       iconClassPrefix,
-      iconFontClassName
+      iconFontClassName,
+      closeIconSize
     } = props;
     const [index, setIndex] = React.useState(zIndex || _zIndex);
     const [innerVisible, setInnerVisible] = React.useState(visible);
@@ -1704,7 +1710,7 @@
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
         name: closeIcon,
-        size: "12px"
+        size: closeIconSize
       })) : ""));
     };
     const renderNode = () => {
@@ -2465,6 +2471,7 @@
   };
   Elevator.defaultProps = defaultProps$1h;
   Elevator.displayName = "NutElevator";
+  Elevator.Context = elevatorContext;
   const defaultProps$1g = {
     ...ComponentDefaults,
     fixednavClass: "nut-fixednav",
@@ -3296,7 +3303,7 @@
       className: [
         `${b2()}`,
         bottom ? `${b2("bottom")}` : "",
-        safeAreaInsetBottom ? `${b2("safebottom")}` : "",
+        safeAreaInsetBottom ? `${b2("bottom")} ${b2("safebottom")}` : "",
         className
       ].join(" "),
       style
@@ -3326,6 +3333,7 @@
     ...ComponentDefaults,
     dot: false,
     size: "",
+    iconSize: "",
     className: "",
     tabTitle: "",
     icon: "",
@@ -3343,6 +3351,7 @@
     const {
       dot,
       size,
+      iconSize,
       className,
       style,
       tabTitle,
@@ -3390,17 +3399,17 @@
     }, num), num && num >= 100 && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${bIcon("tips", [bIcon("nums")])}`
     }, "99+")) : /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${bIcon("dot")}`
-    }), icon && /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+      className: `${bIcon("tips", [bIcon("dot")])}`
+    }), icon && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
-      size,
+      size: iconSize || size,
       name: icon
-    })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    })), tabTitle && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: bIcon({ "nav-word": true }, [
         bIcon({ "big-word": !icon })
       ])
-    }, tabTitle)));
+    }, tabTitle));
   };
   const defaultProps$16 = {
     title: "",
@@ -6522,6 +6531,7 @@
     confirmText: "",
     title: "",
     visible: false,
+    overlay: false,
     type: "default",
     customKey: [],
     className: "",
@@ -6536,6 +6546,7 @@
       title,
       confirmText,
       visible,
+      overlay,
       type,
       customKey,
       randomKeys,
@@ -6647,6 +6658,7 @@
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(Popup, {
       visible: show,
+      overlay,
       position: "bottom",
       popClass,
       onClickOverlay: onClose,
@@ -6802,6 +6814,8 @@
   RadioGroup.displayName = "NutRadioGroup";
   const defaultProps$T = {
     ...ComponentDefaults,
+    className: "",
+    style: {},
     disabled: false,
     checked: false,
     shape: "round",
@@ -6850,7 +6864,7 @@
     };
     const renderButton = () => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: `${componentName}__button ${checkedStatement && `${componentName}__button--active`} ${disabledStatement ? `${componentName}__button--disabled` : ""}`
+        className: `${componentName}__button ${!disabledStatement && checkedStatement && `${componentName}__button--active`} ${disabledStatement ? `${componentName}__button--disabled` : ""}`
       }, children);
     };
     const color = () => {
@@ -6867,11 +6881,12 @@
       return /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
-        name: checkedStatement ? iconActiveName2 : iconName2,
+        name: !disabledStatement && checkedStatement ? iconActiveName2 : iconName2,
         size: iconSize2,
         className: color()
       });
     };
+    const reverseState = textPosition === "left";
     const renderRadioItem = () => {
       if (shape === "button") {
         return renderButton();
@@ -6888,9 +6903,8 @@
       onChange && onChange(e2);
       context && context.onChange(valueStatement);
     };
-    const reverseState = textPosition === "left";
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `nut-radio ${className}`,
+      className: `nut-radio ${className} ${reverseState ? `${componentName}--reverse` : ""}`,
       onClick: handleClick,
       ...rest
     }, renderRadioItem());
@@ -7608,6 +7622,7 @@
     disabled: false,
     maxLength: 9999,
     clearable: true,
+    clearIconSize: "12px",
     align: "left",
     readonly: true,
     autoFocus: false,
@@ -7629,6 +7644,7 @@
       disabled,
       maxLength,
       clearable,
+      clearIconSize,
       align,
       readOnly,
       autoFocus,
@@ -7754,7 +7770,7 @@
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
         name: "circle-close",
-        size: "12",
+        size: clearIconSize,
         color: "#555"
       }));
     };
@@ -8092,7 +8108,6 @@
     iconName: "checked",
     iconColor: "#439422",
     iconSize: "16px",
-    rounded: true,
     children: void 0
   };
   const Progress = (props) => {
@@ -8115,7 +8130,6 @@
       iconName,
       iconColor,
       iconSize,
-      rounded,
       children,
       iconClassPrefix,
       iconFontClassName,
@@ -8146,12 +8160,10 @@
     });
     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 = {
@@ -8184,14 +8196,14 @@
       style: stylesInsideText
     }, /* @__PURE__ */ React__default["default"].createElement("span", {
       className: classesTextInner,
-      style: { color: textColor || "#fff" }
+      style: { color: textColor }
     }, percentage, isShowPercentage ? "%" : ""))))), showText && !textInside && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classesText,
       style: stylesText
     }, textType === "text" && /* @__PURE__ */ React__default["default"].createElement("span", {
       className: classesTextInner,
-      style: { color: textColor || "#333" }
-    }, percentage, isShowPercentage ? "%" : ""), textType === "icon" && /* @__PURE__ */ React__default["default"].createElement(Icon, {
+      style: { color: textColor }
+    }, percentage, isShowPercentage ? "%" : ""), textType === "icon" && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
       size: iconSize,
@@ -9338,7 +9350,6 @@
       unmountOnExit: true,
       appear: true,
       position,
-      isWrapTeleport,
       id
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${classes} ${className}`,
@@ -9393,7 +9404,24 @@
     const [[X0, X1], [Y0, Y1]] = bounds;
     return [rubberbandIfOutOfBounds$1(Vx, X0, X1, Rx), rubberbandIfOutOfBounds$1(Vy, Y0, Y1, Ry)];
   }
+  function _toPrimitive(input, hint) {
+    if (typeof input !== "object" || input === null)
+      return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== void 0) {
+      var res = prim.call(input, hint || "default");
+      if (typeof res !== "object")
+        return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return typeof key === "symbol" ? key : String(key);
+  }
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9890,12 +9918,11 @@
       return [[left, right], [top, bottom]];
     }
   });
-  const DISPLACEMENT = 10;
   const KEYS_DELTA_MAP = {
-    ArrowRight: (factor = 1) => [DISPLACEMENT * factor, 0],
-    ArrowLeft: (factor = 1) => [-DISPLACEMENT * factor, 0],
-    ArrowUp: (factor = 1) => [0, -DISPLACEMENT * factor],
-    ArrowDown: (factor = 1) => [0, DISPLACEMENT * factor]
+    ArrowRight: (displacement, factor = 1) => [displacement * factor, 0],
+    ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0],
+    ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor],
+    ArrowDown: (displacement, factor = 1) => [0, displacement * factor]
   };
   class DragEngine extends CoordinatesEngine {
     constructor(...args) {
@@ -10119,7 +10146,7 @@
         const state = this.state;
         const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
         this.start(event);
-        state._delta = deltaFn(factor);
+        state._delta = deltaFn(this.config.keyboardDisplacement, factor);
         state._keyboardActive = true;
         V.addTo(state._movement, state._delta);
         this.compute(event);
@@ -10191,6 +10218,7 @@
   const DEFAULT_SWIPE_VELOCITY = 0.5;
   const DEFAULT_SWIPE_DISTANCE = 50;
   const DEFAULT_SWIPE_DURATION = 250;
+  const DEFAULT_KEYBOARD_DISPLACEMENT = 10;
   const DEFAULT_DRAG_AXIS_THRESHOLD = {
     mouse: 0,
     touch: 0,
@@ -10269,6 +10297,9 @@
       if (!value)
         return DEFAULT_DRAG_AXIS_THRESHOLD;
       return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
+    },
+    keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) {
+      return value;
     }
   });
   _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
@@ -10567,16 +10598,10 @@
         }
         const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
         for (const eventKey in this.nativeHandlers) {
-          nativeBindFunction(
-            eventKey,
-            "",
-            (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
-              event,
-              args
-            })),
-            void 0,
-            true
-          );
+          nativeBindFunction(eventKey, "", (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
+            event,
+            args
+          })), void 0, true);
         }
       }
       for (const handlerProp in props) {
@@ -14074,6 +14099,7 @@
       if (!props.disabled) {
         startOffset.current = state.offset;
         touch.start(event);
+        props.onTouchStart && props.onTouchStart(event);
       }
     };
     const onTouchMove = (event) => {
@@ -14081,6 +14107,7 @@
         return;
       }
       touch.move(event);
+      props.onTouchMove && props.onTouchMove(event);
       if (touch.isHorizontal()) {
         lockClick.current = true;
         const newState = { ...state, dragging: true };
@@ -14096,13 +14123,14 @@
         setState(newState);
       }
     };
-    const onTouchEnd = () => {
+    const onTouchEnd = (event) => {
       if (state.dragging) {
         setState((v) => ({ ...v, dragging: false }));
         toggle(state.offset > 0 ? "left" : "right");
         setTimeout(() => {
           lockClick.current = false;
         }, 0);
+        props.onTouchEnd && props.onTouchEnd(event);
       }
     };
     const toggle = (side) => {
@@ -14183,7 +14211,7 @@
       className: `${swipeBem()} ${className}`,
       onTouchStart: (e2) => onTouchStart(e2),
       onTouchMove: (e2) => onTouchMove(e2),
-      onTouchEnd,
+      onTouchEnd: (e2) => onTouchEnd(e2),
       style
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${swipeBem("wrapper")}`,
@@ -15863,6 +15891,9 @@
         });
       });
     };
+    const resize = () => {
+      init(active);
+    };
     const move = ({
       pace = 0,
       offset: offset2 = 0,
@@ -16104,7 +16135,8 @@
     React__default["default"].useImperativeHandle(ref, () => ({
       to: to2,
       next,
-      prev
+      prev,
+      resize
     }));
     return /* @__PURE__ */ React__default["default"].createElement(DataContext$1.Provider, {
       value: parent
@@ -17450,6 +17482,7 @@
     round: false,
     mark: false,
     closeable: false,
+    iconSize: "12px",
     prefixCls: "nut-tag",
     onClose: (e2) => {
     },
@@ -17468,6 +17501,7 @@
       children,
       mark,
       closeable,
+      iconSize,
       textColor,
       onClick,
       onClose,
@@ -17489,6 +17523,7 @@
       round,
       mark,
       closeable,
+      iconSize,
       prefixCls,
       onClick,
       onClose
@@ -17536,7 +17571,7 @@
       fontClassName: iconFontClassName,
       className: "_icon",
       name: "close",
-      size: "12",
+      size: iconSize,
       onClick: (e2) => {
         setIsTagShow(false);
         if (props.onClose) {

package/dist/packages/address/address.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-address {
     .nut-elevator {
@@ -7,6 +8,7 @@
         }
       }
     }
+
     &__header {
       color: $dark1;
 
@@ -17,11 +19,13 @@
 
     &__custom {
     }
+
     .nut-address__region-tab {
       .nut-address__tab-item {
         color: $dark1;
       }
     }
+
     .nut-address__region-con {
       .nut-address__region-group {
         .nut-address__region-item {
@@ -31,9 +35,11 @@
         }
       }
     }
+
     .nut-address__exist-item-info {
       color: $dark1;
     }
+
     &__exist {
       &-group {
         .nut-address__exist-ul {
@@ -47,6 +53,7 @@
         }
       }
     }
+
     .exist-address {
       .exist-address-group {
         .exist-ul {
@@ -60,6 +67,7 @@
         border-top: 1px solid $dark4;
       }
     }
+
     &-custom-buttom {
       border-top: 1px solid $dark4;
     }
@@ -68,6 +76,7 @@
 
 .nut-address {
   display: block;
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -79,6 +88,7 @@
     font-weight: bold;
     color: $title-color;
     line-height: 20px;
+
     &__title {
       display: block;
       color: $title-color;
@@ -89,6 +99,7 @@
   // 请选择
   .nut-address__custom {
     display: block;
+
     .nut-address__region-tab {
       position: relative;
       margin-top: 32px;
@@ -101,6 +112,7 @@
         min-width: 2px;
         margin-right: 30px;
         display: block;
+
         &.active {
           clear: $title-color;
           font-weight: bold;
@@ -131,18 +143,21 @@
     .nut-address__region-con {
       display: block;
       margin: 20px 20px 0;
+
       .nut-address__region-group {
         padding-top: 15px;
         height: 270px;
         overflow-y: auto;
         box-sizing: border-box;
         padding: 0;
+
         .nut-address__region-item {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
           font-size: $font-size-1;
           color: $title-color;
+
           &.active {
             font-weight: bold;
             color: $title-color;
@@ -158,6 +173,7 @@
         }
       }
     }
+
     .nut-address__elevator-group {
       display: flex;
       margin-top: 20px;
@@ -172,16 +188,18 @@
     .nut-address__exist-group {
       padding: 15px 20px 0;
       height: 279px;
-      overflow-y: scroll;
+      overflow-y: auto;
 
       .nut-address__exist-ul {
         box-sizing: border-box;
         padding: 0;
+
         .nut-address__exist-item {
           margin-bottom: 20px;
           font-size: $font-size-1;
           line-height: 14px;
           color: $title-color;
+
           &.active {
             font-weight: bold;
           }
@@ -190,9 +208,11 @@
             display: flex;
             align-items: center;
           }
+
           .nut-address__exist-item-icon {
             margin-right: 9px;
           }
+
           span {
             display: inline-block;
             flex: 1;
@@ -206,6 +226,7 @@
       height: 54px;
       padding: 6px 0px 0;
       border-top: 1px solid #f2f2f2;
+
       &-btn {
         width: 90%;
         height: 42px;
@@ -215,7 +236,7 @@
         background: $button-primary-background-color;
         border-radius: 21px;
         font-size: 15px;
-        color: $white;
+        color: $primary-text-color;
       }
     }
   }

package/dist/packages/button/button.scss

@@ -25,6 +25,7 @@
     &--warning {
       color: $dark6;
     }
+
     &--plain {
       background: $dark6;
 
@@ -55,6 +56,7 @@
     }
   }
 }
+
 .nut-button {
   position: relative;
   display: inline-block;
@@ -73,7 +75,7 @@
   touch-action: manipulation;
 
   .text {
-    margin-left: 5px;
+    margin-left: $button-text-icon-width;
   }
 
   &::before {
@@ -90,6 +92,7 @@
     opacity: 0;
     content: ' ';
   }
+
   &::after {
     border: none;
   }
@@ -182,6 +185,10 @@
     width: 100%;
     height: $button-large-height;
     line-height: $button-large-line-height;
+
+    .text {
+      margin-left: $button-text-icon-large-width;
+    }
   }
 
   &--normal {
@@ -194,6 +201,21 @@
     line-height: $button-small-line-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .text {
+      margin-left: $button-text-icon-small-width;
+    }
+  }
+
+  &--mini {
+    height: $button-mini-height;
+    line-height: $button-mini-line-height;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
+
+    .text {
+      margin-left: $button-text-icon-mini-width;
+    }
   }
 
   &--block {

package/dist/packages/calendar/calendar.scss

@@ -206,7 +206,7 @@
 
           &-active {
             background-color: $calendar-primary-color;
-            color: $white !important;
+            color: $primary-text-color !important;
             border-radius: $calendar-day-active-border-radius;
 
             .calendar-curr-tips {
@@ -218,7 +218,7 @@
             }
 
             .calendar-day-tip {
-              color: $white;
+              color: $primary-text-color;
             }
           }
 
@@ -253,7 +253,7 @@
       margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
-      color: $white;
+      color: $primary-text-color;
       text-align: center;
       line-height: 44px;
     }

package/dist/packages/elevator/elevator.scss

@@ -32,7 +32,7 @@
       width: 100%;
       display: block;
       background-color: $elevator-list-inner-bg-color;
-      //   overflow: auto;
+      overflow: auto;
     }
     &__item {
       display: block;