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

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

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,30 +114,15 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
@@ -149,25 +130,6 @@
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
 
 .nut-skeleton {
   display: inline-block;

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

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

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +114,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

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

@@ -2,40 +2,12 @@ import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export type BadgeFill = 'solid' | 'outline';
 export interface BadgeProps extends BasicComponent {
-    /**
-    * 显示的内容，支持数字、字符和自定义内容
-    * @default -
-    */
-    value: ReactNode
-    /**
-    * 是否为小点，当value值为自定义内容时，dot不生效
-    * @default false
-    */
-    dot: boolean
-    /**
-    * value 为数值时，最大值
-    * @default 99
-    */
-    max: number
-    /**
-    * 上下偏移量，支持单位设置，可设置为："0"或0 等
-    * @default "0"
-    */
-    top: string | number
-    /**
-    * 左右偏移量，支持单位设置，可设置为："5"或5 等
-    * @default "5"
-    */
-    right: string | number
-    /**
-    * 徽标背景颜色,默认值为当前主题色
-    * @default -
-    */
-    color: string
-    /**
-    * 填充模式
-    * @default solid
-    */
-    fill: BadgeFill
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    color: string;
+    fill: BadgeFill;
 }
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

package/dist/es/packages/badge/badge.js

@@ -37,10 +37,11 @@ export var Badge = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
     var classPrefix = 'nut-badge';
     var classes = classNames(classPrefix, className, _define_property({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
-    var contentClasses = classNames(_define_property({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
+    var _obj;
+    var contentClasses = classNames("".concat(classPrefix, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix, "-dot"), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _obj));
     var getStyle = function() {
         var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
+        style.top = "".concat(Number(-top) || parseFloat(String(-top)) || 0, "px");
         var dir = rtl ? 'left' : 'right';
         style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
         if (color) {
@@ -57,11 +58,12 @@ export var Badge = function(props) {
         }
         return style;
     };
+    var _obj1;
     return /*#__PURE__*/ React.createElement("div", {
         className: classes,
         style: style
     }, isIcon() && /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-icon")
+        className: classNames("".concat(classPrefix, "-content"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-icon"), true), _define_property(_obj1, "".concat(classPrefix, "-icon-rtl"), rtl), _obj1))
     }, value), children, !isIcon() && /*#__PURE__*/ React.createElement("div", {
         className: contentClasses,
         style: getStyle()

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

@@ -1,15 +1,19 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
-
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
   &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
@@ -29,7 +33,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    /* #ifdef harmony */
+    background: $color-primary;
+    /* #endif */
+    /* #ifndef harmony */
     background: $badge-background-color;
+    /* #endif */
     color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
@@ -49,7 +58,9 @@
   }
 
   &-content {
+    /* #ifndef rn */
     transform: $badge-content-transform;
+    /* #endif */
   }
 
   &-dot {
@@ -61,25 +72,8 @@
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
+    background: $color-primary-text;
+    border: 1px solid $color-primary;
+    color: $color-primary;
   }
 }

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,18 +66,8 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
-}
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
 }