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

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

@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -16,14 +15,14 @@
   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-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
-  -webkit-appearance: none;
   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);
@@ -72,9 +71,9 @@
   /* #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));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -87,6 +86,18 @@
   width: var(--nutui-button-default-height, 32px);
   padding: 0;
 }
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, 8px);
+}
+.nut-button-round-xlarge, .nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, 12px);
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, 8px);
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, 6px);
+}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -111,37 +122,52 @@
 .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-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  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-xxl, 24px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  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-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .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));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.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));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .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-s, 6px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
 .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-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  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-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-solid {
-  background: var(--nutui-color-primary, #ff0f23);
+  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, var(--nutui-color-primary-text, #ffffff));
   border-color: transparent;
 }
@@ -333,18 +360,6 @@
   cursor: default;
   opacity: 0.9;
 }
-.nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
-}
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
-}
 .nut-button-square {
   border-radius: var(--nutui-button-square-border-radius, 0);
 }
@@ -430,7 +445,6 @@
   flex-direction: column;
   align-items: center;
   width: var(--nutui-dialog-width, 295px);
-  max-height: 67%;
   min-height: var(--nutui-dialog-min-height, 124px);
   padding: var(--nutui-dialog-padding, 24px);
   box-sizing: border-box;
@@ -461,25 +475,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  top: var(--nutui-dialog-close-top, 16px);
   color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close .nut-icon {
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
+  font-size: var(--nutui-dialog-close-width, 18px);
+  width: var(--nutui-dialog-close-width, 18px);
+  height: var(--nutui-dialog-close-height, 18px);
 }
 .nut-dialog-close-top-right {
+  top: var(--nutui-dialog-close-top, 16px);
   right: var(--nutui-dialog-close-right, 16px);
 }
 .nut-dialog-close-top-left {
+  top: var(--nutui-dialog-close-top, 16px);
   left: var(--nutui-dialog-close-left, 16px);
 }
 .nut-dialog-close-bottom {
-  top: initial;
   bottom: -56px;
   left: 50%;
-  transform: translate(-50%);
+  transform: translateY(-50%);
+}
+.nut-dialog-close-bottom .nut-icon {
+  color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close:active {
   opacity: 0.7;

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

@@ -38,7 +38,7 @@ export interface EllipsisProps extends BasicComponent {
     */
     lineHeight: number | string
     /**
-    * 文本点击是触发
+    * 文本点击时触发
     * @default -
     */
     onClick: () => void

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

@@ -3,20 +3,8 @@ import { BasicComponent } from "../../utils/typings";
 export type LoadingType = 'spinner' | 'circular';
 export type LoadingDirection = 'horizontal' | 'vertical';
 export interface LoadingProps extends BasicComponent {
-    /**
-    * loading图标的样式
-    * @default circular
-    */
-    type: LoadingType
-    /**
-    * loading图标和文字的排列方式
-    * @default horizontal
-    */
-    direction: LoadingDirection
-    /**
-    * 自定义loading的图标
-    * @default -
-    */
-    icon?: ReactNode
+    type: LoadingType;
+    direction: LoadingDirection;
+    icon?: ReactNode;
 }
 export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/navbar/navbar.js

@@ -4,6 +4,7 @@ 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, useRef, useState } from "react";
 import classNames from "classnames";
+import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { getRect } from "../../utils/use-client-rect";
 import { SafeArea } from "../safearea/safearea";
@@ -20,6 +21,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var NavBar = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -63,11 +65,12 @@ export var NavBar = function(props) {
         back
     ]);
     var renderLeft = function() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-left"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-left-back"),
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
@@ -82,14 +85,16 @@ export var NavBar = function(props) {
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-title"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function() {
+        var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-right"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -101,7 +106,7 @@ export var NavBar = function(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = classNames(classPrefix, classes, className);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"

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

@@ -2,6 +2,8 @@
   width: $navbar-width;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
@@ -16,6 +18,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
   }
 
@@ -24,27 +27,32 @@
     width: 100%;
   }
 
+  &-safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
+  &-align-left {
+    padding-left: 14px;
+  }
+
   &-title {
-    min-width: 53%;
-    margin: 0 auto;
+    width: 50%;
+    height: 100%;
     text-align: center;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
-
-    .nut-tabs-titles {
-      background: transparent;
-
-      &-item-text {
-        color: $color-title;
-      }
-    }
-
-    .nut-tabpane {
-      display: none;
+    &-align-left {
+      min-width: 0;
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 8px;
+      text-align: left;
     }
   }
 
@@ -59,125 +67,62 @@
     bottom: 0;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    height: 100%;
     cursor: pointer;
     padding: 0 14px;
-
+    /* #ifndef rn harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;
       height: 20px;
       font-size: 20px;
     }
+    /* #endif */
   }
 
   &-left {
     left: 0;
+    &-rtl {
+      left: auto;
+      right: 0;
+    }
+    &-align-left {
+      position: static;
+      padding: 0;
+    }
 
     &-back {
       display: flex;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
-      margin-right: 10px;
+      &-children {
+        margin-right: 10px;
+        &-rtl {
+          margin-right: 0;
+          margin-left: 10px;
+        }
+      }
     }
   }
 
   &-right {
     right: 0;
-
-    .nut-icon {
-      margin-left: 12px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    padding-left: 14px;
-
-    .nut-navbar-left {
-      position: static;
-      padding: 0;
-
-      .nut-icon {
-        margin-left: 12px;
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+    &-rtl {
+      right: auto;
+      left: 0;
     }
-    .nut-navbar-right {
+    &-align-left {
       position: static;
       display: inline-flex;
       white-space: nowrap;
       padding-left: 0;
     }
-    .nut-navbar-left-back {
-      margin-right: 0;
-    }
-
-    .nut-navbar-title {
-      min-width: 0;
-      margin: 0;
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 8px;
-      text-align: left;
-    }
   }
-}
-
-[dir='rtl'] .nut-navbar,
-.nut-rtl .nut-navbar {
-  &-fixed {
-    left: auto;
-    right: 0;
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
+  &-rtl {
     .nut-icon-ArrowLeft {
       transform: rotateY(180deg);
     }
-    &-back {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-
-  &-right {
-    right: auto;
-    left: 0;
-    .nut-icon {
-      margin-left: 0;
-      margin-right: 12px;
-
-      &:first-child {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    .nut-navbar-left {
-      .nut-icon-ArrowLeft {
-        margin-left: 0;
-        margin-right: 12px;
-
-        &:first-child {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .nut-navbar-left-back {
-      margin-right: 0;
-      margin-left: 0;
-    }
   }
 }