@nutui/nutui-react 3.0.0-beta.8 → 3.0.0

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

@@ -90,7 +90,7 @@
   font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-s, 12px));
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   padding: var(--nutui-elevator-bars-padding, 15px 0);
-  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f5f6fa));
+  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f2f3f5));
   border-radius: var(--nutui-elevator-bars-border-radius, 6px);
   text-align: center;
   z-index: var(--nutui-elevator-bars-z-index, 1);
@@ -122,12 +122,7 @@
 }
 
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
@@ -138,12 +133,6 @@
   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;
 }
@@ -181,18 +170,17 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-popup {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
-  min-height: 26%;
+  min-height: 46%;
   max-height: 100%;
-  overflow-y: auto;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
-  color: var(--nutui-color-title, #1a1a1a);
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -205,35 +193,40 @@
   padding: var(--nutui-popup-title-padding, 16px);
   position: relative;
 }
-.nut-popup-title-left {
-  position: absolute;
-  left: var(--nutui-popup-title-padding, 16px);
-}
-.nut-popup-title-title {
+.nut-popup-title-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+.nut-popup-title-title {
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-color-text-help, #888b94);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-xs, 11px));
+  color: var(--nutui-color-text, #505259);
+  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
+.nut-popup-title-description-gap {
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
+}
+.nut-popup-title-left {
+  position: absolute;
+  top: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 16px);
+}
 .nut-popup-title-right {
   position: absolute;
-  z-index: 1;
-  cursor: pointer;
-  width: var(--nutui-popup-icon-size, var(--nutui-font-size-xl, 18px));
-  height: var(--nutui-popup-icon-size, var(--nutui-font-size-xl, 18px));
-  display: flex;
-  justify-content: center;
-  align-items: center;
   top: var(--nutui-popup-title-padding, 16px);
   right: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-color-text-help, #888b94);
+  z-index: 1;
+  width: var(--nutui-popup-icon-size, 20px);
+  height: var(--nutui-popup-icon-size, 20px);
+  color: var(--nutui-color-title, #1a1a1a);
+  cursor: pointer;
 }
 .nut-popup-title-right:active {
   opacity: 0.7;
@@ -254,15 +247,14 @@
   top: 50%;
   left: 50%;
   min-height: 10%;
-  /* #ifndef rn */
+  max-width: 295px;
   transform: translate(-50%, -50%);
-  /* #endif */
 }
 .nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-bottom, .nut-popup-top {
-  max-height: 83%;
+  max-height: 87%;
 }
 .nut-popup-bottom {
   bottom: 0;
@@ -270,40 +262,33 @@
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
 .nut-popup-right {
   top: 0;
   right: 0;
-  /* #ifdef rn */
   width: 100px;
   height: 100%;
-  /* #endif */
 }
 .nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px);
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-left {
   top: 0;
   left: 0;
-  /* #ifdef rn */
   width: 100px;
   height: 100%;
-  /* #endif */
 }
 .nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0;
+  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
 }
 .nut-popup-top {
   top: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 100px;
-  /* #endif */
 }
 .nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px);
+  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
 .nut-popup-slide {
   /* 从顶部滑出 */
@@ -369,22 +354,16 @@
 }
 @keyframes popup-slide-top-enter {
   from {
-    /* #ifndef rn */
     transform: translate3d(0, -100%, 0);
-    /* #endif */
   }
 }
 @keyframes popup-slide-top-exit {
   to {
-    /* #ifndef rn */
     transform: translate3d(0, -100%, 0);
-    /* #endif */
   }
 }
 .nut-popup-slide-top-enter-active, .nut-popup-slide-top-appear-active {
-  /* #ifndef rn */
   transform: translate3d(0, 0%, 0);
-  /* #endif*/
   animation-fill-mode: both;
   animation-name: popup-slide-top-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -396,22 +375,16 @@
 }
 @keyframes popup-slide-right-enter {
   from {
-    /* #ifndef rn */
     transform: translate3d(100%, 0, 0);
-    /* #endif*/
   }
 }
 @keyframes popup-slide-right-exit {
   to {
-    /* #ifndef rn */
     transform: translate3d(100%, 0, 0);
-    /* #endif*/
   }
 }
 .nut-popup-slide-right-enter-active, .nut-popup-slide-right-appear-active {
-  /* #ifndef rn */
   transform: translate3d(0, 0, 0);
-  /* #endif*/
   animation-fill-mode: both;
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -423,22 +396,16 @@
 }
 @keyframes popup-slide-bottom-enter {
   from {
-    /* #ifndef rn */
     transform: translate3d(0, 100%, 0);
-    /* #endif */
   }
 }
 @keyframes slide-bottom-exit {
   to {
-    /* #ifndef rn */
     transform: translate3d(0, 100%, 0);
-    /* #endif */
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  /* #ifndef rn */
   transform: translate(0, 0);
-  /* #endif */
   animation-fill-mode: both;
   animation-name: popup-slide-bottom-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -450,16 +417,12 @@
 }
 @keyframes popup-slide-left-enter {
   from {
-    /* #ifndef rn */
     transform: translate3d(-100%, 0, 0);
-    /* #endif */
   }
 }
 @keyframes popup-slide-left-exit {
   to {
-    /* #ifndef rn */
     transform: translate3d(-100%, 0, 0);
-    /* #endif */
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
@@ -513,9 +476,7 @@
 .nut-rtl .nut-popup-center {
   left: auto;
   right: 50%;
-  /* #ifndef rn */
   transform: translate(50%, -50%);
-  /* #endif*/
 }
 [dir=rtl] .nut-popup-bottom,
 .nut-rtl .nut-popup-bottom {
@@ -558,7 +519,7 @@
   user-select: none;
   overflow-x: auto;
   overflow-y: hidden;
-  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f5f6fa));
+  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5));
   scrollbar-width: none;
 }
 .nut-tabs-titles::-webkit-scrollbar {
@@ -665,13 +626,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
-.nut-tabs-titles-card {
-  padding: 0;
-  background-color: var(--nutui-color-default-light);
-}
-.nut-tabs-titles-card .nut-tabs-titles-item {
-  padding: 0;
-}
 .nut-tabs-titles-card .nut-tabs-titles-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
   background-color: #ffffff;
@@ -697,11 +651,9 @@
   border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
-  padding: 0;
   border-bottom: 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06));
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item {
-  padding: 0;
   position: relative;
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item::after {
@@ -719,9 +671,15 @@
 }
 
 .nut-tabs-vertical .nut-tabs-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  white-space: break-spaces;
+  /* #ifdef harmony */
+  padding-left: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  padding-left: 6px;
+  /* #endif */
+  width: 90px;
+  line-height: var(--nutui-font-size-base, 14px);
 }
 .nut-tabs-vertical .nut-tabs-titles {
   flex-direction: column;
@@ -955,7 +913,7 @@
   background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   border-radius: 21px;
   font-size: 15px;
-  color: var(--nutui-color-primary-text, #ffffff);
+  color: #ffffff;
 }
 
 [dir=rtl] .nut-address-exist-item-info,

package/dist/es/packages/animate/animate.js

@@ -12,7 +12,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     loop: false,
     onClick: function(event) {}
 });
-var classPrefix = "nut-animate";
+var classPrefix = 'nut-animate';
 export var Animate = function(props) {
     var _ref = _object_spread({}, defaultProps, props), className = _ref.className, type = _ref.type, action = _ref.action, loop = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = _object_without_properties(_ref, [
         "className",
@@ -26,22 +26,21 @@ export var Animate = function(props) {
     var _obj;
     var classes = classNames((_obj = {
         'nut-ani-container': true
-    }, _define_property(_obj, "".concat(classPrefix, "-").concat(type), action === 'initial' || clicked ? type : false), _define_property(_obj, "loop", loop), _obj));
-    var cls = classNames(classes, className);
+    }, _define_property(_obj, "".concat(classPrefix, "-").concat(type), action === 'initial' || clicked), _define_property(_obj, "loop", loop), _obj), className);
     var handleClick = function(event) {
         setClicked(true);
         // 如果不是无限循环，清除类名
         if (!loop) {
             setTimeout(function() {
-                setClicked(false);
+                return setClicked(false);
             }, 1000);
         }
-        onClick && onClick(event);
+        onClick(event);
     };
     return /*#__PURE__*/ React.createElement("div", {
         className: "nut-animate"
     }, /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: cls,
+        className: classes,
         onClick: handleClick
     }, rest), children));
 };