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

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;