@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

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

@@ -1,22 +1,24 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-backtop {
   display: none;
-  position: fixed;
 }
-.nut-backtop.show {
-  width: 40px;
-  height: 40px;
+.nut-backtop-rn {
+  position: absolute;
+}
+.nut-backtop-show {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-1, #ffffff);
-  color: var(--nutui-gray-7, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  border-radius: 50%;
-}
-.nut-backtop.show:active {
-  background: var(--nutui-gray-3, #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-gray-7, #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

@@ -1,20 +1,25 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 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 { _ as _type_of } from "@swc/helpers/_/_type_of";
-import React from "react";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
+import pxTransform from "../../utils/px-transform";
+import { harmony } from "../../utils/platform-taro";
 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() {
@@ -35,37 +40,48 @@ 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 style = {};
-        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) {
-            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;
-            }
+    var isHarmony = harmony();
+    var classes = classNames(classPrefix, className);
+    var badgeRef = useRef(null);
+    var _useState = _sliced_to_array(useState({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
+    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));
+    useEffect(function() {
+        if (badgeRef.current) {
+            getPositionStyle();
         }
-        return style;
-    };
+    }, []);
+    var getPositionStyle = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var style, dir;
+            return _ts_generator(this, function(_state) {
+                style = {};
+                style.top = pxTransform(Number(top) || 0);
+                dir = rtl ? 'left' : 'right';
+                style[dir] = isHarmony ? pxTransform(Number(right)) : "".concat(Number(right) || 0, "px");
+                setContentStyle(style);
+                return [
+                    2
+                ];
+            });
+        });
+        return function getPositionStyle() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var _obj1;
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,
-        style: style
+        style: style,
+        ref: badgeRef
     }, isIcon() && /*#__PURE__*/ React.createElement(View, {
-        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: contentStyle
     }, value), children, !isIcon() && /*#__PURE__*/ React.createElement(View, {
         className: contentClasses,
-        style: getStyle()
+        style: contentStyle
     }, 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%)
-    );
-  }
-}

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

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

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

@@ -0,0 +1,12 @@
+import { BasicComponent } from "../../utils/typings";
+export type BadgeFill = 'solid' | 'outline';
+export type BadgeDotSize = 'small' | 'normal' | 'large';
+export interface BadgeProps extends BasicComponent {
+    value: React.ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    fill: BadgeFill;
+    size: BadgeDotSize;
+}

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

@@ -0,0 +1 @@
+export { };