@nutui/nutui-react 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/es/packages/ellipsis/ellipsis.d.ts

@@ -38,7 +38,7 @@ export interface EllipsisProps extends BasicComponent {
     */
     lineHeight: number | string
     /**
-    * 文本点击是触发
+    * 文本点击时触发
     * @default -
     */
     onClick: () => void

package/dist/es/packages/progress/progress.js

@@ -39,7 +39,7 @@ export var Progress = function(props) {
     var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     useEffect(function() {
         setDispalyPercent(percent);

package/dist/es/packages/progress/style/progress.scss

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

package/dist/es/packages/progress/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/es/packages/rate/rate.d.ts

@@ -1,65 +1,17 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface RateProps extends BasicComponent {
-    /**
-    * star 总数
-    * @default 5
-    */
-    count: number
-    /**
-    * 受控的 star 数值
-    * @default 0
-    */
-    value: number
-    /**
-    * 非受控的 star 默认值
-    * @default 0
-    */
-    defaultValue: number
-    /**
-    * 最少选中star数量
-    * @default 0
-    */
-    min: number
-    /**
-    * 使用图标(选中)
-    * @default star-n
-    */
-    checkedIcon: React.ReactNode
-    /**
-    * 使用图标(未选中)
-    * @default star-n
-    */
-    uncheckedIcon: React.ReactNode
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 是否只读
-    * @default false
-    */
-    readOnly: boolean
-    /**
-    * 是否半星
-    * @default false
-    */
-    allowHalf: boolean
-    /**
-    * 是否允许滑动选择
-    * @default false
-    */
-    touchable: boolean
-    /**
-    * 当前 star 数修改时触发
-    * @default -
-    */
-    onChange: (value: number) => void
-    /**
-    * touch 滑动结束时触发
-    * @default -
-    */
-    onTouchEnd: (e: TouchEvent, value: number) => void
+    count: number;
+    value: number;
+    defaultValue: number;
+    min: number;
+    checkedIcon: React.ReactNode;
+    uncheckedIcon: React.ReactNode;
+    disabled: boolean;
+    readOnly: boolean;
+    allowHalf: boolean;
+    touchable: boolean;
+    onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
 }
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/es/packages/rate/style/rate.scss

@@ -18,10 +18,10 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
-    margin-right: $rate-item-margin;
+    margin-left: $rate-item-margin;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      margin-left: 0;
     }
 
     &-half {
@@ -39,11 +39,16 @@
 
     &-icon {
       display: flex;
-      color: $rate-icon-color;
       cursor: pointer;
 
+      .nut-icon {
+        color: $rate-icon-color;
+      }
+
       &-disabled {
-        color: $rate-icon-inactive-color;
+        .nut-icon {
+          color: $rate-icon-inactive-color;
+        }
       }
 
       &.nut-rate-item-icon.nut-rate-item-icon-half {

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

@@ -12,10 +12,10 @@
   display: flex;
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--nutui-rate-item-margin, 14px);
+  margin-left: var(--nutui-rate-item-margin, 14px);
 }
-.nut-rate-item:last-child {
-  margin-right: 0;
+.nut-rate-item:first-child {
+  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -30,10 +30,12 @@
 }
 .nut-rate-item-icon {
   display: flex;
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
   cursor: pointer;
 }
-.nut-rate-item-icon-disabled {
+.nut-rate-item-icon .nut-icon {
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-rate-item-icon-disabled .nut-icon {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {

package/dist/es/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/es/packages/tabbar/tabbar.d.ts

@@ -2,41 +2,13 @@ import { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import TabbarItem from '../tabbaritem';
 export interface TabbarProps extends BasicComponent {
-    /**
-    * 默认选中的标签的索引值
-    * @default 0
-    */
-    defaultValue: number
-    /**
-    * 选中的标签的索引值
-    * @default -
-    */
-    value?: number
-    /**
-    * 是否固定在页面底部，为 true 时默认开启 safeArea
-    * @default false
-    */
-    fixed: boolean
-    /**
-    * icon未激活的颜色
-    * @default #7d7e80
-    */
-    inactiveColor: string
-    /**
-    * icon激活的颜色
-    * @default #0073ff
-    */
-    activeColor: string
-    /**
-    * 是否开启iphone系列全面屏底部安全区适配
-    * @default false
-    */
-    safeArea: boolean
-    /**
-    * 切换页签时触发事件
-    * @default -
-    */
-    onSwitch: (value: number) => void
+    defaultValue: number;
+    value?: number;
+    fixed: boolean;
+    inactiveColor: string;
+    activeColor: string;
+    safeArea: boolean;
+    onSwitch: (value: number) => void;
 }
 export declare const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
     Item: typeof TabbarItem;

package/dist/es/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/es/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/es/packages/tabbaritem/tabbaritem.d.ts

@@ -1,40 +1,12 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface TabbarItemProps extends BasicComponent {
-    /**
-    * 标签页的标题
-    * @default -
-    */
-    title: ReactNode
-    /**
-    * 自定义图标
-    * @default -
-    */
-    icon: ReactNode
-    /**
-    * 徽标中显示的内容，支持数字、字符和自定义内容
-    * @default -
-    */
-    value: ReactNode
-    /**
-    * 徽标是否为小点
-    * @default false
-    */
-    dot: boolean
-    /**
-    * value 为数值时，最大值
-    * @default 99
-    */
-    max: number
-    /**
-    * 徽标的上下偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    top: string
-    /**
-    * 徽标的左右偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    right: string
+    title: ReactNode;
+    icon: ReactNode;
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string;
+    right: string;
 }
 export declare const TabbarItem: FunctionComponent<Partial<TabbarItemProps>>;

package/dist/es/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/es/packages/tag/style/tag.scss

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

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

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

package/dist/es/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/es/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/es/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/es/utils/add-color-for-harmony.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { harmony } from "./platform-taro";
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */ function addColorForHarmony(maybeElement, color) {
+    if (React.isValidElement(maybeElement) && harmony()) {
+        return React.cloneElement(maybeElement, {
+            color: color
+        });
+    }
+    return maybeElement;
+}
+export default addColorForHarmony;