@nutui/nutui-react 3.0.0-beta.1 → 3.0.0-beta.10

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;
@@ -21,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -34,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -73,6 +77,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 +105,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 +118,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/avatarcropper/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-cropper {
   position: relative;
   display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-group {
   display: flex;
   flex-direction: row;

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     target: string;
     threshold: number;
     zIndex: number;

package/dist/es/packages/backtop/backtop.js

@@ -3,12 +3,12 @@ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
-import { Top } from "@nutui/icons-react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import classNames from "classnames";
+import { Top } from "@nutui/icons-react";
 import { ComponentDefaults } from "../../utils/typings";
 import requestAniFrame, { cancelRaf } from "../../utils/raf";
-import { useRtl } from "../configprovider";
+import HoverButton from "../hoverbutton/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     target: '',
     threshold: 200,
@@ -16,8 +16,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     duration: 1000
 });
 export var BackTop = function(props) {
-    var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, target = _$_object_spread.target, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, target = _$_object_spread.target, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
@@ -96,26 +95,20 @@ export var BackTop = function(props) {
         scroll,
         scrollAnimation
     ]);
-    var styles = useMemo(function() {
-        var _obj;
-        return Object.keys(style || {}).length !== 0 ? _object_spread({
-            zIndex: zIndex
-        }, style) : (_obj = {}, _define_property(_obj, rtl ? 'left' : 'right', '10px'), _define_property(_obj, "bottom", '20px'), _define_property(_obj, "zIndex", zIndex), _obj);
-    }, [
-        rtl,
-        style,
-        zIndex
-    ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(HoverButton, {
         className: cls,
-        style: styles,
+        style: _object_spread({
+            zIndex: zIndex
+        }, style),
+        icon: !children && (icon || /*#__PURE__*/ React.createElement(Top, null)),
+        onClick: function(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ React.createElement("div", {
+        className: "nut-hoverbutton-item-container",
         onClick: function(e) {
             goTop(e);
         }
-    }, children || /*#__PURE__*/ React.createElement(Top, {
-        width: 19,
-        height: 19,
-        className: "nut-backtop-main"
-    }));
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

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

@@ -1,31 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
   &-rn {
     position: absolute;
   }
 
   &-show {
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 21px;
-    z-index: 100;
-
-    &:active,
-    &-active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

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

@@ -1,26 +1,24 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-backtop {
   display: none;
-  position: fixed;
 }
 .nut-backtop-rn {
   position: absolute;
 }
 .nut-backtop-show {
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background-overlay, #ffffff);
-  color: var(--nutui-color-title, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-radius: 21px;
-  z-index: 100;
-}
-.nut-backtop-show:active, .nut-backtop-show-active {
-  background: var(--nutui-color-background, #f5f6fa);
-}
-.nut-backtop-main {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
   transition: all 0.2s ease-in-out;
-  color: var(--nutui-color-title, #1a1a1a);
+}
+.nut-backtop-show .nut-hoverbutton-item-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,41 +1,3 @@
-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
-}
+import { FunctionComponent } from 'react';
+import { BadgeProps } from './types';
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

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

@@ -10,10 +10,10 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     value: '',
     dot: false,
     max: 99,
-    top: '4',
-    right: '8',
-    color: '',
-    fill: 'solid'
+    top: 0,
+    right: 0,
+    fill: 'solid',
+    size: 'large'
 });
 export var Badge = function(props) {
     var content = function content() {
@@ -34,37 +34,28 @@ export var Badge = function(props) {
     };
     var _this;
     var rtl = useRtl();
-    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 _$_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, fill = _$_object_spread.fill, size = _$_object_spread.size;
     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 getStyle = function() {
+    var classes = classNames(classPrefix, className);
+    var _obj;
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-number"), isNumber()), _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, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _define_property(_obj, "".concat(classPrefix, "-content"), children), _obj));
+    var getPositionStyle = function() {
         var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
+        style.top = "".concat(Number(top) || 0, "px");
         var dir = rtl ? 'left' : 'right';
         style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-        if (color) {
-            if (fill === 'outline') {
-                style.color = color;
-                style.background = '#fff';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.border = "1px solid ".concat(color);
-                }
-            } else {
-                style.color = '#fff';
-                style.background = color;
-            }
-        }
         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)),
+        style: getPositionStyle()
     }, value), children, !isIcon() && /*#__PURE__*/ React.createElement("div", {
         className: contentClasses,
-        style: getStyle()
+        style: getPositionStyle()
     }, content()));
 };
 Badge.displayName = 'NutBadge';

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

@@ -1,3 +1,3 @@
 import { Badge } from './badge';
-export type { BadgeFill, BadgeProps } from './badge';
+export type { BadgeFill, BadgeDotSize, BadgeProps } from './types';
 export default Badge;

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

@@ -1,19 +1,15 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 
   &-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;
-    border-radius: $badge-border-radius;
     z-index: $badge-z-index;
 
     .nut-icon {
@@ -23,63 +19,88 @@
     }
   }
 
+  &-sup,
+  &-icon {
+    border-radius: $badge-border-radius;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      bottom: -50%;
+      left: -50%;
+      right: -50%;
+      transform: scale(0.5);
+      border: $badge-border;
+      border-radius: $badge-border-radius;
+    }
+  }
+
   &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    background: $badge-background-color;
-    color: $badge-color;
+    height: $badge-height;
+    min-width: $badge-min-width;
     padding: $badge-padding;
+    box-sizing: border-box;
+    color: $badge-color;
     font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
+    line-height: 12px;
     white-space: nowrap;
+    font-weight: normal;
+    vertical-align: middle;
+    background: $badge-background-color;
     z-index: 1;
   }
 
+  &-number {
+    font-family: 'JD';
+    /* #ifdef harmony */
+    line-height: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    line-height: 13px;
+    /* #endif */
+  }
+
   &-one {
     height: $badge-height;
     width: $badge-height;
-    padding: 0;
   }
 
   &-content {
+    position: absolute;
     transform: $badge-content-transform;
   }
 
   &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
     padding: 0;
+    border-radius: 50%;
+    &::after {
+      border: $badge-dot-border;
+      border-radius: 50%;
+    }
+    &-normal {
+      min-width: $badge-dot-width;
+      width: $badge-dot-width;
+      height: $badge-dot-width;
+    }
+    &-small {
+      min-width: $badge-dot-small-width;
+      width: $badge-dot-small-width;
+      height: $badge-dot-small-width;
+    }
+    &-large {
+      min-width: $badge-dot-large-width;
+      width: $badge-dot-large-width;
+      height: $badge-dot-large-width;
+    }
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
+    background: $color-primary-text;
+    color: $badge-outline-color;
+    &::after {
+      border: $badge-outline-border;
     }
   }
 }
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
-  }
-}