@nutui/nutui-react 3.0.3 → 3.0.5

package/dist/es/packages/notify/Notification.js

@@ -126,7 +126,7 @@ Notification.newInstance = function(properties, callback) {
         });
     };
     var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(new Date().getTime());
+    var id = properties.id ? properties.id : "".concat(Date.now());
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);

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

@@ -384,7 +384,6 @@
 }
 
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

package/dist/es/packages/pickerview/pickerroller.js

@@ -1,5 +1,7 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
 import { useTouch } from "../../hooks/use-touch";
 import { passiveSupported } from "../../utils/supports-passive";
 import { preventDefault } from "../../utils";
@@ -8,12 +10,13 @@ var InternalPickerRoller = function(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function(item) {
         return item.label;
     } : _props_renderLabel;
+    var classPrefix = 'nut-pickerview-roller';
     var DEFAULT_DURATION = 200;
     var INERTIA_TIME = 300;
     var INERTIA_DISTANCE = 15;
     var ROTATION = 20;
     var touch = useTouch();
-    var _useState = _sliced_to_array(useState(1), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
+    var _useState = _sliced_to_array(useState(0), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
     var lineSpacing = useRef(36);
     var _useState1 = _sliced_to_array(useState(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
     var _useState2 = _sliced_to_array(useState('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
@@ -48,7 +51,7 @@ var InternalPickerRoller = function(props, ref) {
             var deg1 = Math.min(Math.max(currentDeg, 0), (options.length + 1) * ROTATION);
             if (deg1 >= 0 && deg1 < (options.length + 1) * ROTATION) {
                 applyTransform('', "".concat(deg1, "deg"), undefined, updatedMove);
-                setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
+                deg1 > 0 && setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
             }
         }
     };
@@ -89,7 +92,7 @@ var InternalPickerRoller = function(props, ref) {
         var index = options.findIndex(function(item) {
             return item.value === selectedValue;
         });
-        setCurrentIndex(index === -1 ? 1 : index + 1);
+        setCurrentIndex(index === -1 ? 0 : index + 1);
         var move = index * lineSpacing.current;
         shouldSelect && selectValue(-move);
         handleMove(-move);
@@ -149,21 +152,22 @@ var InternalPickerRoller = function(props, ref) {
         className: "nut-pickerview-list",
         ref: pickerRollerRef
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "nut-pickerview-roller",
+        className: classPrefix,
         ref: rollerRef,
         style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
         onTransitionEnd: stopMomentumScroll
     }, threeDimensional && options.map(function(item, index) {
         var _item_value;
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "nut-pickerview-roller-item ".concat(isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'),
+            className: classNames("".concat(classPrefix, "-item"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-item-hidden"), isItemHidden(index + 1)), _define_property(_obj, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex), _obj)),
             style: rollerStyle(index),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
         }, renderLabel(item));
     }), !threeDimensional && options.map(function(item, index) {
         var _item_value;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "nut-pickerview-roller-item-tiled",
+            className: classNames("".concat(classPrefix, "-item-tiled"), _define_property({}, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex)),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
         }, renderLabel(item));
     })));

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

@@ -1,5 +1,4 @@
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

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

@@ -3,7 +3,6 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

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

@@ -1 +1,2 @@
+import '../../button/style';
 import './resultpage.scss';

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

@@ -2,6 +2,395 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-button {
+  position: relative;
+  display: flex;
+  display: inline-block;
+  /* #ifdef harmony*/
+  width: 80px;
+  /* #endif */
+  /* #ifndef harmony*/
+  width: auto;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: var(--nutui-button-default-height, 32px);
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-weight: var(--nutui-font-weight, 400);
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
+  background: var(--nutui-button-default-background-color, transparent);
+  border-width: var(--nutui-button-border-width, 0.5px);
+}
+.nut-button-text {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-text-right {
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-children {
+  display: flex;
+  flex-direction: row;
+  background: transparent;
+}
+.nut-button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border: inherit;
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: " ";
+}
+.nut-button::after {
+  border: none;
+}
+.nut-button:active::before {
+  opacity: 0.1;
+}
+.nut-button-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* #ifndef harmony */
+  background: initial;
+  /* #endif */
+}
+.nut-button-wrap .nut-icon {
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-button-loading::before, .nut-button-disabled::before {
+  display: none;
+}
+.nut-button-disabled {
+  cursor: not-allowed;
+  color: #ffffff;
+}
+.nut-button.nut-button-icononly {
+  width: var(--nutui-button-default-height, 32px);
+  padding: 0;
+}
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
+}
+.nut-button-default {
+  padding: var(--nutui-button-default-padding, 0px 12px);
+  border-style: solid;
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-default-disabled, .nut-button-default-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-default-none-disabled {
+  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
+}
+.nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
+  background: transparent;
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-normal {
+  padding: var(--nutui-button-normal-padding, 0px 12px);
+}
+.nut-button-xlarge {
+  height: var(--nutui-button-xlarge-height, 48px);
+  padding: var(--nutui-button-xlarge-padding, 0px 24px);
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-icon {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-xlarge-children {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-large {
+  height: var(--nutui-button-large-height, 40px);
+  padding: var(--nutui-button-large-padding, 0px 16px);
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  border-radius: var(--nutui-radius-s, 6px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-icon {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-large-children {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-small {
+  height: var(--nutui-button-small-height, 28px);
+  padding: var(--nutui-button-small-padding, 0px 8px);
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-small .nut-icon {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-small-children {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-mini {
+  height: var(--nutui-button-mini-height, 24px);
+  padding: var(--nutui-button-mini-padding, 0px 8px);
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-mini .nut-icon {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-mini-children {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-primary {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-primary-children {
+  color: var(--nutui-button-primary-color, #ffffff);
+}
+.nut-button-primary-solid {
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  color: var(--nutui-button-primary-color, #ffffff);
+  border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-button-primary-disabled, .nut-button-primary-disabled.nut-button-icononly, .nut-button-primary-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-none {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-none-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-outline {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-outline-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-dashed {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-dashed-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary.nut-button-solid.nut-button-normal {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-success {
+  color: var(--nutui-button-success-color, #ffffff);
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-success-children {
+  color: var(--nutui-button-success-color, #ffffff);
+}
+.nut-button-success-solid-disabled {
+  background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+  border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+}
+.nut-button-success-outline, .nut-button-success-dashed {
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+}
+.nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-success-none {
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+}
+.nut-button-success-none-disabled {
+  color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+}
+.nut-button-info {
+  color: var(--nutui-button-info-color, #ffffff);
+  background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-info-children {
+  color: var(--nutui-button-info-color, #ffffff);
+}
+.nut-button-info-solid-disabled {
+  background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-outline, .nut-button-info-dashed {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+  border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-outline-disabled, .nut-button-info-dashed-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-none {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-none-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-danger {
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-danger-children {
+  color: var(--nutui-button-danger-color, #ffffff);
+}
+.nut-button-danger-solid-disabled {
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-danger-outline, .nut-button-danger-dashed {
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+}
+.nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-danger-none {
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+}
+.nut-button-danger-none-disabled {
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-warning {
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-warning-children {
+  color: var(--nutui-button-warning-color, #ffffff);
+}
+.nut-button-warning-disabled, .nut-button-warning-solid-disabled {
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+  border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-warning-outline, .nut-button-warning-dashed {
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+}
+.nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
+  color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+  border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-warning-none {
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+}
+.nut-button-warning-none-disabled {
+  color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-block {
+  display: block;
+  width: 100%;
+}
+.nut-button-outline {
+  background: transparent;
+  border-style: solid;
+}
+.nut-button-dashed {
+  background: transparent;
+  border-style: dashed;
+}
+.nut-button-none {
+  background: transparent;
+  border-color: transparent;
+}
+.nut-button-loading {
+  cursor: default;
+  opacity: 0.9;
+}
+.nut-button-square {
+  border-radius: var(--nutui-button-square-border-radius, 0);
+}
+
+[dir=rtl] .nut-button-text,
+.nut-rtl .nut-button-text {
+  margin-left: 0;
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button-text.right,
+.nut-rtl .nut-button-text.right {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button::before,
+.nut-rtl .nut-button::before {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
 .nut-resultpage {
   width: 100%;
   display: flex;

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

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   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));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -53,12 +54,6 @@
 }
 .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);

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

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   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));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -53,12 +54,6 @@
 }
 .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);

package/dist/es/packages/toast/Notification.js

@@ -159,7 +159,7 @@ Notification.newInstance = function(properties, callback) {
         });
     };
     var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(new Date().getTime());
+    var id = properties.id ? properties.id : "".concat(Date.now());
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);