@nutui/nutui-react-taro 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/cjs/packages/resultpage/resultpage.js

@@ -9,13 +9,12 @@ Object.defineProperty(exports, "ResultPage", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _button = require("../button/button");
@@ -31,20 +30,28 @@ var ResultPage = function ResultPage(props) {
     var classPrefix = "nut-resultpage";
     var cls = (0, _classnames.default)(classPrefix, className);
     var defaultStatus = {
-        success: 'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png',
-        error: 'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png',
-        warning: 'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png',
-        info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png',
-        waiting: 'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png'
+        success: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Success, {
+            color: "#00D900"
+        }),
+        error: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Failure, {
+            color: "#FF0F23"
+        }),
+        warning: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Warning, {
+            color: "#FFBF00"
+        }),
+        info: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Tips, {
+            color: "#0073FF"
+        }),
+        waiting: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Ask, {
+            color: "#0073FF"
+        })
     };
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)("".concat(typeof icon === 'string' && icon ? icon : defaultStatus[status])), 1), iconSrc = _useState[0];
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
         style: style
-    }, typeof icon === 'string' ? /*#__PURE__*/ _react.default.createElement(_components.Image, {
-        src: iconSrc,
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-icon")
-    }) : null, typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, icon || defaultStatus[status]), typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-title")
     }, title) : title, typeof description === 'string' && description ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
         numberOfLines: 2,
@@ -59,7 +66,7 @@ var ResultPage = function ResultPage(props) {
             className: "".concat(classPrefix, "-action"),
             key: index
         }, /*#__PURE__*/ _react.default.createElement(_button.Button, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
-            size: "small"
+            size: "large"
         }), action === null || action === void 0 ? void 0 : action.text));
     })) : null, children);
 };

package/dist/cjs/packages/resultpage/style/resultpage.scss

@@ -5,10 +5,12 @@
   align-items: center;
   margin: 0 auto;
   &-icon {
-    height: $resultpage-icon-size;
-    width: $resultpage-icon-size;
+    display: inline-flex;
     margin-bottom: $resultpage-icon-margin-bottom;
-    background-size: 100%;
+    .nut-icon {
+      height: $resultpage-icon-size;
+      width: $resultpage-icon-size;
+    }
   }
   &-title {
     width: $resultpage-width;

package/dist/cjs/packages/resultpage/style/style.css

@@ -6,21 +6,23 @@
   margin: 0 auto;
 }
 .nut-resultpage-icon {
-  height: var(--nutui-resultpage-icon-size, 48px);
-  width: var(--nutui-resultpage-icon-size, 48px);
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 16px);
-  background-size: 100%;
+  display: inline-flex;
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+}
+.nut-resultpage-icon .nut-icon {
+  height: var(--nutui-resultpage-icon-size, 36px);
+  width: var(--nutui-resultpage-icon-size, 36px);
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 247px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 9px);
+  width: var(--nutui-resultpage-width, 240px);
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 247px);
+  width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
@@ -33,7 +35,7 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 21px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
 }
 .nut-resultpage-action {
   margin-left: 6px;

package/dist/cjs/packages/resultpage/types.d.ts

@@ -1,4 +1,4 @@
 export type ResultPageStatusOptions = {
-    [key: string]: string;
+    [key: string]: React.ReactNode;
 };
 export type ResultPageStatus = 'success' | 'error' | 'warning' | 'info' | 'waiting';

package/dist/cjs/packages/tabbar/style/style.css

@@ -110,10 +110,20 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 
 .nut-tabbar {

package/dist/cjs/packages/tabbaritem/style/style.css

@@ -110,8 +110,18 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }

package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss

@@ -40,10 +40,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #ifdef harmony*/
+      color: $tabbar-active-color;
+      /* #endif*/
+      /* #ifndef harmony*/
       color: inherit;
+      /* #endif*/
 
       .nut-icon {
+        /* #ifdef harmony*/
+        color: $tabbar-active-color;
+        /* #endif*/
+        /* #ifndef harmony*/
         color: inherit;
+        /* #endif*/
       }
     }
   }

package/dist/cjs/packages/tabbaritem/tabbaritem.js

@@ -20,6 +20,7 @@ var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("../tabbar/context"));
+var _addcolorforharmony = /*#__PURE__*/ _interop_require_default._(require("../../utils/add-color-for-harmony"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
     icon: null,
@@ -66,9 +67,15 @@ var TabbarItem = function TabbarItem(props) {
         }
     }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass
+    }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)));
 };

package/dist/cjs/packages/tag/style/style.css

@@ -13,6 +13,7 @@
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

package/dist/cjs/packages/tag/style/tag.scss

@@ -13,6 +13,7 @@
   .nut-icon {
     vertical-align: middle;
     margin-left: 4px;
+    color: $tag-color;
   }
 
   &-text {

package/dist/cjs/packages/toast/style/index.js

@@ -1 +1,2 @@
+import '../../overlay/style';
 import './toast.scss';

package/dist/cjs/packages/toast/style/style.css

@@ -1,3 +1,63 @@
+.nut-overlay {
+  /* #ifdef rn */
+  position: absolute;
+  /* #endif */
+  /* #ifndef rn */
+  position: fixed;
+  /* #endif */
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  z-index: var(--nutui-overlay-zIndex, 1000);
+}
+
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}
+
+@keyframes nut-fade-in {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes nut-fade-out {
+  0% {
+    opacity: 1;
+  }
+  1% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.nut-overlay-slide-enter-active, .nut-overlay-slide-appear-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-in;
+  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
+}
+.nut-overlay-slide-exit-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-out;
+  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
+}
+
 @keyframes rotation {
   0% {
     -webkit-transform: rotate(0deg);

package/dist/cjs/packages/uploader/style/style.css

@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +36,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -49,7 +50,7 @@
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {

package/dist/cjs/utils/add-color-for-harmony.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */
+declare function addColorForHarmony(maybeElement: ReactNode, color?: string): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+export default addColorForHarmony;

package/dist/cjs/utils/add-color-for-harmony.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _platformtaro = require("./platform-taro");
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */ function addColorForHarmony(maybeElement, color) {
+    if (/*#__PURE__*/ _react.default.isValidElement(maybeElement) && (0, _platformtaro.harmony)()) {
+        return /*#__PURE__*/ _react.default.cloneElement(maybeElement, {
+            color: color
+        });
+    }
+    return maybeElement;
+}
+var _default = addColorForHarmony;

package/dist/es/packages/address/style/style.css

@@ -984,7 +984,7 @@
   line-height: 42px;
   margin: auto;
   text-align: center;
-  background: var(--nutui-color-primary, #ff0f23);
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   border-radius: 21px;
   font-size: 15px;
   color: var(--nutui-color-primary-text, #ffffff);

package/dist/es/packages/animatingnumbers/countup.js

@@ -4,7 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import { createSelectorQuery } from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { mergeProps } from "../../utils/merge-props";
@@ -27,7 +27,7 @@ export var CountUp = function(props) {
     ]);
     var classPrefix = 'nut-countup';
     var countupRef = useRef(null);
-    var timerRef = useRef(0);
+    var timerRef = useRef();
     var numbers = Array.from({
         length: 10
     }, function(v, i) {
@@ -43,74 +43,77 @@ export var CountUp = function(props) {
         thousands,
         value
     ]);
-    var _useState = _sliced_to_array(useState([]), 2), numerArr = _useState[0], setNumerArr = _useState[1];
+    var _useState = _sliced_to_array(useState([]), 2), numberArr = _useState[0], setNumberArr = _useState[1];
     var _useState1 = _sliced_to_array(useState([]), 2), transformArr = _useState1[0], setTransformArr = _useState1[1];
     var isLoaded = useRef(false);
     var setNumberTransform = useCallback(function() {
-        if (countupRef.current && numerArr.length) {
+        if (countupRef.current && numberArr.length) {
             createSelectorQuery().selectAll('.nut-countup-listitem').node(function(numberItems) {
                 var transformArrCache = [];
                 Object.keys(numberItems).forEach(function(key) {
                     var elem = numberItems[Number(key)];
-                    var idx = Number(numerArr[Number(key)]);
-                    if (elem) {
+                    var idx = Number(numberArr[Number(key)]);
+                    var enabled = elem && typeof idx === 'number' && !Number.isNaN(idx);
+                    if (enabled) {
                         // 计算规则：父元素和实际列表高度的百分比，分割成20等份
                         var transform = idx || idx === 0 ? "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)") : '';
-                        transformArrCache.push(transform);
+                        transformArrCache.push({
+                            transitionDuration: "".concat(duration, "s"),
+                            transform: transform
+                        });
                     }
                 });
                 setTransformArr(_to_consumable_array(transformArrCache));
             }).exec();
         }
     }, [
-        numerArr
+        numberArr
     ]);
-    var numberEaseStyle = function(idx) {
-        return {
-            transition: "transform ".concat(duration, "s ease-in-out"),
-            transform: transformArr[idx] ? transformArr[idx] : null
-        };
-    };
     useEffect(function() {
-        setNumberTransform();
+        if (numberArr.length) {
+            if (!isLoaded.current) {
+                isLoaded.current = true;
+                // @ts-ignore
+                timerRef.current = setTimeout(function() {
+                    setNumberTransform();
+                }, delay);
+            } else {
+                setNumberTransform();
+            }
+        }
+        return function() {
+            clearTimeout(timerRef.current);
+            isLoaded.current = false;
+        };
     }, [
-        numerArr,
+        numberArr,
+        delay,
         setNumberTransform
     ]);
     useEffect(function() {
-        if (!isLoaded.current) {
-            isLoaded.current = true;
-            timerRef.current = window.setTimeout(function() {
-                setNumerArr(getShowNumber());
-            }, delay);
-        } else {
-            setNumerArr(getShowNumber());
-        }
-        return function() {
-            window.clearTimeout(timerRef.current);
-        };
+        setNumberArr(getShowNumber());
     }, [
         value,
-        delay,
         getShowNumber
     ]);
-    return /*#__PURE__*/ React.createElement(View, {
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: "".concat(classPrefix, " ").concat(className),
         ref: countupRef
-    }, /*#__PURE__*/ React.createElement("ul", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-list")
-    }, numerArr.map(function(item, idx) {
-        return /*#__PURE__*/ React.createElement("li", {
+    }, numberArr.map(function(item, idx) {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix, "-listitem-number") : ''),
             key: idx
-        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ React.createElement("span", {
+        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-number"),
-            style: numberEaseStyle(idx)
+            style: transformArr === null || transformArr === void 0 ? void 0 : transformArr[idx]
         }, _to_consumable_array(numbers).concat(_to_consumable_array(numbers)).map(function(number, subidx) {
-            return /*#__PURE__*/ React.createElement("span", {
+            return /*#__PURE__*/ React.createElement(Text, {
+                className: "".concat(classPrefix, "-number-text"),
                 key: subidx
             }, number);
-        })) : /*#__PURE__*/ React.createElement("span", {
+        })) : /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-separator")
         }, item));
     })));

package/dist/es/packages/animatingnumbers/style/style.css

@@ -7,9 +7,8 @@
 .nut-countup-listitem {
   height: var(--nutui-countup-height, 32px);
   overflow: hidden;
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-countup-base-size, 18px);
-  font-weight: var(--nutui-font-weight-bold, 600);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
@@ -22,14 +21,21 @@
   height: 80%;
   align-items: flex-end;
   color: var(--nutui-countup-bg-color, inherit);
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-countup-number {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: var(--nutui-countup-width, auto);
+  transition: transform 1s ease-in-out;
+  transform: translate(0, 0);
 }
-.nut-countup-number span {
+.nut-countup-number-text {
   height: var(--nutui-countup-height, 32px);
   line-height: var(--nutui-countup-height, 32px);
+  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }