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

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

@@ -36,7 +36,7 @@ export interface NoticeBarProps extends BasicComponent {
     */
     leftIcon: ReactNode
     /**
-    * closeable 模式下，默认为 <Close />
+    * 右边的 icon，在 closeable 模式下默认为 <Close />
     * @default -
     */
     rightIcon: ReactNode

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-noticebar {
   width: 100%;
 }
@@ -7,7 +11,7 @@
   align-items: center;
   height: var(--nutui-noticebar-height, 36px);
   padding: var(--nutui-noticebar-box-padding, 0 16px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
   border-radius: var(--nutui-noticebar-border-radius, 0);
@@ -84,7 +88,7 @@
   display: flex;
   justify-content: space-between;
   height: var(--nutui-noticebar-height, 36px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
   overflow: hidden;
   padding: var(--nutui-noticebar-box-padding, 0 16px);
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));

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

@@ -2,13 +2,14 @@ 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 React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
 import { customEvents, useCustomEvent, useCustomEventsPath } from "../../utils/use-custom-event";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: '',
     duration: 3000,
@@ -20,12 +21,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = 'nut-notify';
 export var Notify = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), id = _$_object_spread.id, children = _$_object_spread.children, style = _$_object_spread.style, type = _$_object_spread.type, className = _$_object_spread.className, position = _$_object_spread.position, visible = _$_object_spread.visible, duration = _$_object_spread.duration, onClose = _$_object_spread.onClose, onClick = _$_object_spread.onClick;
+    var _mergeProps = mergeProps(defaultProps, props), id = _mergeProps.id, children = _mergeProps.children, style = _mergeProps.style, type = _mergeProps.type, className = _mergeProps.className, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
     useCustomEvent(id, function(status) {
         status ? show() : hide();
     });
     var timer;
     var _useState = _sliced_to_array(useState(false), 2), showNotify = _useState[0], setShowNotify = _useState[1];
+    var cssRef = useRef(null);
     useEffect(function() {
         if (visible) {
             show();
@@ -60,6 +62,7 @@ export var Notify = function(props) {
     var _obj;
     var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), _define_property(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
     return /*#__PURE__*/ React.createElement(React.Fragment, null, Taro.getEnv() !== Taro.ENV_TYPE.RN ? /*#__PURE__*/ React.createElement(CSSTransition, {
+        nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
         classNames: "fade",
@@ -89,7 +92,6 @@ export function close(selector) {
     var path = useCustomEventsPath(selector);
     customEvents.trigger(path, false);
 }
-Notify.defaultProps = defaultProps;
 Notify.displayName = 'NutNotify';
 Notify.open = open;
 Notify.close = close;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 /*入场动画开始*/
 .fade-enter {
   opacity: 0;
@@ -49,7 +53,7 @@
   box-sizing: border-box;
   padding: var(--nutui-notify-padding, 0px 10px);
   color: var(--nutui-notify-text-color, #ffffff);
-  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-3, 14px));
+  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
   white-space: pre-wrap;
   word-wrap: break-word;
   height: var(--nutui-notify-height, 40px);
@@ -69,17 +73,17 @@
   bottom: 0;
 }
 .nut-notify-base {
-  background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-notify-base-background-color, var(--nutui-brand-6));
 }
 .nut-notify-primary {
-  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #1988fa));
+  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #2aa32a));
+  background: var(--nutui-notify-success-background-color, var(--nutui-green-2));
 }
 .nut-notify-danger {
-  background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-notify-danger-background-color, var(--nutui-brand-6));
 }
 .nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #c47600));
+  background: var(--nutui-notify-warning-background-color, var(--nutui-yellow-2));
 }

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

@@ -1,55 +1,15 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { PopupProps } from "../popup/popup";
 export interface NumberKeyboardProps extends PopupProps {
-    /**
-    * 是否显示键盘
-    * @default false
-    */
-    visible: boolean
-    /**
-    * 标题右侧内容
-    * @default -
-    */
-    rightActions: ReactNode
-    /**
-    * 自定义完成按钮文字，如"支付"，"下一步"，"提交"等，搭配 rightColumn 使用
-    * @default 完成
-    */
-    confirmText?: string
-    /**
-    * 键盘模式, default：默认样式 rightColumn：带右侧栏
-    * @default default
-    */
-    type: 'default' | 'rightColumn'
-    /**
-    * 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项
-    * @default -
-    */
-    custom: Array<string>
-    /**
-    * 随机数
-    * @default false
-    */
-    random: boolean
-    /**
-    * 点击按键时触发
-    * @default -
-    */
-    onChange?: (value: string) => void
-    /**
-    * 点击删除键时触发
-    * @default -
-    */
-    onDelete?: () => void
-    /**
-    * 点击关闭按钮或非键盘区域时触发
-    * @default -
-    */
-    onClose: () => void
-    /**
-    * 点击确定按钮时触发
-    * @default -
-    */
-    onConfirm?: () => void
+    visible: boolean;
+    rightActions: ReactNode;
+    confirmText?: string;
+    type: 'default' | 'rightColumn';
+    custom: Array<string>;
+    random: boolean;
+    onChange?: (value: string) => void;
+    onDelete?: () => void;
+    onClose: () => void;
+    onConfirm?: () => void;
 }
 export declare const NumberKeyboard: FunctionComponent<Partial<NumberKeyboardProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick' | 'title'>>;

package/dist/es/packages/numberkeyboard/numberkeyboard.js

@@ -10,6 +10,7 @@ import { View } from "@tarojs/components";
 import Popup from "../popup/index";
 import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     visible: false,
     rightActions: '',
@@ -20,7 +21,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var NumberKeyboard = function(props) {
     var locale = useConfig().locale;
-    var title = props.title, rightActions = props.rightActions, confirmText = props.confirmText, visible = props.visible, type = props.type, custom = props.custom, random = props.random, style = props.style, className = props.className, onChange = props.onChange, onDelete = props.onDelete, onClose = props.onClose, onConfirm = props.onConfirm, rest = _object_without_properties(props, [
+    var _mergeProps = mergeProps(defaultProps, props), title = _mergeProps.title, rightActions = _mergeProps.rightActions, confirmText = _mergeProps.confirmText, visible = _mergeProps.visible, type = _mergeProps.type, custom = _mergeProps.custom, random = _mergeProps.random, style = _mergeProps.style, className = _mergeProps.className, onChange = _mergeProps.onChange, onDelete = _mergeProps.onDelete, onClose = _mergeProps.onClose, onConfirm = _mergeProps.onConfirm, rest = _object_without_properties(_mergeProps, [
         "title",
         "rightActions",
         "confirmText",
@@ -88,8 +89,8 @@ export var NumberKeyboard = function(props) {
         var style = {
             background: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozOUNBQTQ0MkY3RTMxMUVBQjIzNEJCQkYxNDZGQjg5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozOUNBQTQ0M0Y3RTMxMUVBQjIzNEJCQkYxNDZGQjg5OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM5Q0FBNDQwRjdFMzExRUFCMjM0QkJCRjE0NkZCODk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM5Q0FBNDQxRjdFMzExRUFCMjM0QkJCRjE0NkZCODk4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+T12ahwAABClJREFUeNrUWVtIFFEY3pkdrbaCiAINK81VW3d2102pjKLtoXoJrNAswoeEXoyilx7sJXvIh6CHAoMg6yEfSpdECIqE0jCMbMm9qCVYUmR5S8huXmZO39nWOI7mzsy6uzqgM/vvzNnv+y/n/84ZjhBiWMwHF+kA+fn5y0ZHRzNwuTomgDnui9/vfzMvBJxWa7bE87W4tMbY8S8MhNz0BQLVugnY7fZdGORZPNNHJmSPUSf47QD/PN75z3NcpqD1IVEU8wC+dZojDIajyMu6WAG322zBmQf/7LzGnHeAdRtjmuAIKYoleMWxQnUEHA6HVZLldsb0m3oehdQQzzQSVILPJLIcYEw/4HkK/kG86yAsAZvNtgng3059hte/Gf56/uFCaGR8mIJdj3m2hzGNGAkpRM4vCPBzErBYLMko2A//DIQMoQ0WtgcCjWFnCVGswEzxCecqLc0y9Nyww2ariYhAbm7umgRB6GNM/QTgfT7fEzWD4t7dOK0D4TKAcrtcLkENeNx/gUoSpOnx4Gc9BHJyclZNjI8PMqY+judp2jSr1iuENDPi5fDX4WG32WxeogL81NGRIEk3NBNAh10uS9IIY/oIbxR6vd4WLXmJAq9Ayl1kTAUmk8mNyJrUgDfK8hFPV9dnTQSCHiLkO/Ndb8jzrXqKawYJQg4gsu6srKyV4cC/7ujo1CqneRSPxNh74PligPdE3PYVIDHuY6PRWCxPTp7VC35KSvwjwBpwdPP4gXYc86ZdZnr6Pf7S9HqexUs9z0qBLprz8wn+PzWRFknaKGsgjwlvCdLGH42GQ0lg+dqkMP+Enj+lF/yMWYgnJD1qEhhphOWgS2E2yQZDJWa/lEgIvGIa0D2HKJZGA7yiBgaZqO9AermdFstGXQR8fn+BootW4wfPRBE8zXmXoia2SYLgpsJRVwqBBJ2N+pnueRVhPR8l8MGCnaWw8wDCDSWQoasGQCKJnpjGcwkkKqMBfo7ZyQklQCOxWVcRg4QDXmhkSJRjsGvRAD8HCTuNhNPpXKtLzHn9/n0orBqm052GvL2lcfepTMs8PwsJqyRJRbrlNFpBCUBcYWaKE2h4tampqUtV6pP60HNtapuUksTY2NidiLcWUQPnMOhlxvQoITGxxOPxDIVdR2dnb/V2dr7Umn50/Q31261JC4UhUQYSVUxdtPCCUAK10RuvZeQ0LRQ2tD7fddxdyuT3TijJehATF/yinqmJ2wB+jCGRA11TH9xiXAwEQpG4i0gcZHLPjHSqF0Vx76IgEIpEA9a7+3H5K2RK4jnuPvTToXgR0LW9Htpap71iAzPVNsUIMH0XMdXkfLrfD9BdanifksiKW/5w3Emj3mcHBgb6kpKTn6KYzfBCehzg10H6lHPzMdIWq9U8znEpsXE6N4rTO9TjSGgPanG/pfwjwABn1PZcM5XI0AAAAABJRU5ErkJggg0KLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLTkwMjA5MzIyMjIxMzkzMzc2NzAwNjg0MC0tDQo=') no-repeat center",
             backgroundSize: '100% 100%',
-            width: '28px',
-            height: '24px'
+            width: 28,
+            height: 24
         };
         return /*#__PURE__*/ React.createElement(View, {
             style: style
@@ -103,23 +104,45 @@ export var NumberKeyboard = function(props) {
         };
         var onTouchEnd = function(item) {
             setActive(false);
-            if (item.type === 'num' || item.type === 'custom') {
-                onChange && onChange(item.id);
+            switch(item.type){
+                case 'num':
+                case 'custom':
+                    onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+                    break;
+                case 'close':
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                    break;
+                case 'delete':
+                    onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+                    break;
+                case 'confirm':
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                    break;
+                default:
+                    break;
             }
-            if (item.type === 'close') {
-                onClose && onClose();
-            }
-            if (item.type === 'delete') {
-                onDelete && onDelete();
-            }
-            if (item.type === 'confirm') {
-                onConfirm && onConfirm();
+        };
+        var renderContent = function(item) {
+            switch(item.type){
+                case 'num':
+                case 'custom':
+                    return /*#__PURE__*/ React.createElement(React.Fragment, null, item.id);
+                case 'delete':
+                    return /*#__PURE__*/ React.createElement(DeleteIcon, null);
+                case 'close':
+                    return /*#__PURE__*/ React.createElement(ArrowDown, {
+                        size: 18
+                    });
+                case 'confirm':
+                    return /*#__PURE__*/ React.createElement(React.Fragment, null, confirmText || locale.done);
+                default:
+                    return null;
             }
         };
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             key: item.id,
             className: "".concat(classPrefix, "-body-wrapper")
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: classNames({
                 key: true,
                 active: active,
@@ -136,11 +159,9 @@ export var NumberKeyboard = function(props) {
             onTouchCancel: function() {
                 return onTouchEnd(item);
             }
-        }, (item.type === 'num' || item.type === 'custom') && /*#__PURE__*/ React.createElement("div", null, item.id), item.type === 'delete' && /*#__PURE__*/ React.createElement(DeleteIcon, null), item.type === 'close' && /*#__PURE__*/ React.createElement(ArrowDown, {
-            size: 18
-        }), item.type === 'confirm' && /*#__PURE__*/ React.createElement(React.Fragment, null, confirmText || locale.done)));
+        }, renderContent(item)));
     };
-    return /*#__PURE__*/ React.createElement(Popup, _object_spread({
+    return /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, rest), {
         visible: visible,
         position: "bottom",
         onOverlayClick: onClose,
@@ -149,26 +170,26 @@ export var NumberKeyboard = function(props) {
         overlayStyle: {
             backgroundColor: 'rgba(0, 0, 0, 0)'
         }
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, className),
         style: style
-    }, title && /*#__PURE__*/ React.createElement("div", {
+    }, title && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-header")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-header-title")
-    }, title), type === 'default' && /*#__PURE__*/ React.createElement("span", {
+    }, title), type === 'default' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-header-close"),
         onClick: onConfirm
-    }, rightActions || locale.done)), /*#__PURE__*/ React.createElement("div", {
+    }, rightActions || locale.done)), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-body")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-body-keys")
     }, keysList === null || keysList === void 0 ? void 0 : keysList.map(function(item) {
         return /*#__PURE__*/ React.createElement(NumberKeyboardKey, {
             key: item.id,
             item: item
         });
-    })), type === 'rightColumn' && /*#__PURE__*/ React.createElement("div", {
+    })), type === 'rightColumn' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-sidebar")
     }, /*#__PURE__*/ React.createElement(NumberKeyboardKey, {
         key: "delete",

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

@@ -17,12 +17,15 @@
     &-title {
       color: $color-title;
       display: inline-block;
+      font-size: $popup-title-font-size;
     }
 
     &-close {
       position: absolute;
       display: block;
       right: 0;
+      top: 50%;
+      transform: translateY(-50%);
       padding: $numberkeyboard-header-close-padding;
       color: $numberkeyboard-header-close-color;
       font-size: $numberkeyboard-header-close-font-size;
@@ -45,7 +48,12 @@
     &-wrapper {
       position: relative;
       flex: 1;
+      /* #ifdef harmony */
+      width: 33%;
+      /* #endif */
+      /* #ifndef harmony */
       flex-basis: 33%;
+      /* #endif */
       box-sizing: border-box;
       padding: 0 6px 6px 0;
       background-color: $numberkeyboard-wrapper-background-color;
@@ -74,9 +82,10 @@
   &-sidebar {
     display: flex;
     flex: 1;
+    flex-basis: 33%;
     flex-direction: column;
-
     .nut-numberkeyboard-body-wrapper {
+      width: 100%;
       .key {
         position: absolute;
         top: 0;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -12,22 +16,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   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;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -62,49 +57,63 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-popup {
   position: fixed;
-  min-height: 26%;
+  min-height: 46%;
   max-height: 100%;
-  overflow-y: auto;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));
-  color: var(--nutui-gray-7, #1a1a1a);
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
   -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-3, 14px);
+  font-size: var(--nutui-font-size-base, 14px);
 }
 .nut-popup-title {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
   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-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 .nut-popup-title-title {
-  font-weight: var(--nutui-font-weight-bold, 500);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-6, 20px));
+  color: var(--nutui-gray-7);
+  font-weight: var(--nutui-font-weight-bold, 600);
+  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-gray-5, #888b94);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));
+  color: var(--nutui-gray-6);
+  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 !important;
-  z-index: 1;
-  cursor: pointer;
-  width: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  height: var(--nutui-popup-icon-size, var(--nutui-font-size-6, 20px));
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
   top: var(--nutui-popup-title-padding, 16px);
   right: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-5, #888b94);
+  z-index: 1;
+  width: var(--nutui-popup-icon-size, 20px);
+  height: var(--nutui-popup-icon-size, 20px);
+  color: var(--nutui-gray-7);
+  cursor: pointer;
 }
 .nut-popup-title-right:active {
   opacity: 0.7;
@@ -125,13 +134,14 @@
   top: 50%;
   left: 50%;
   min-height: 10%;
+  max-width: 295px;
   transform: translate(-50%, -50%);
 }
 .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;
@@ -139,21 +149,25 @@
   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;
+  width: 100px;
+  height: 100%;
 }
 .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;
+  width: 100px;
+  height: 100%;
 }
 .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;
@@ -161,7 +175,7 @@
   width: 100%;
 }
 .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 {
   /* 从顶部滑出 */
@@ -313,7 +327,7 @@
   display: none;
 }
 .nut-popup .nut-overflow-hidden {
-  overflow: hidden !important;
+  overflow: hidden;
 }
 
 [dir=rtl] .nut-popup-title-left,
@@ -366,7 +380,7 @@
   width: 100%;
   padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
   user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-gray-3, #f5f6fa));
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-gray-3));
 }
 .nut-numberkeyboard-header {
   position: relative;
@@ -375,19 +389,22 @@
   justify-content: center;
   box-sizing: content-box;
   padding: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-6, 20px));
+  color: var(--nutui-gray-7);
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-numberkeyboard-header-title {
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
   display: inline-block;
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-numberkeyboard-header-close {
   position: absolute;
   display: block;
   right: 0;
+  top: 50%;
+  transform: translateY(-50%);
   padding: var(--nutui-numberkeyboard-header-close-padding, 0 16px);
-  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-6, #505259));
+  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-6));
   font-size: var(--nutui-numberkeyboard-header-close-font-size, 14px);
   background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent);
   border: none;
@@ -405,23 +422,28 @@
 .nut-numberkeyboard-body-wrapper {
   position: relative;
   flex: 1;
+  /* #ifdef harmony */
+  width: 33%;
+  /* #endif */
+  /* #ifndef harmony */
   flex-basis: 33%;
+  /* #endif */
   box-sizing: border-box;
   padding: 0 6px 6px 0;
-  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-gray-2, #f7f8fc));
+  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, var(--nutui-gray-2)));
 }
 .nut-numberkeyboard-body-wrapper .key {
   display: flex;
   align-items: center;
   justify-content: center;
   height: var(--nutui-numberkeyboard-key-height, 48px);
-  font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-6, 20px));
+  font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18px));
   line-height: var(--nutui-numberkeyboard-key-line-height, 1.5);
-  background-color: var(--nutui-numberkeyboard-key-background-color, #fff);
-  color: var(--nutui-numberkeyboard-key-color, var(--nutui-gray-6, #505259));
+  background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-gray-1));
+  color: var(--nutui-numberkeyboard-key-color, var(--nutui-gray-6));
   border-radius: var(--nutui-numberkeyboard-key-border-radius, 8px);
   border: var(--nutui-numberkeyboard-key-border, none);
-  font-weight: var(--nutui-font-weight-bold, 500);
+  font-weight: var(--nutui-font-weight-bold, 600);
   cursor: pointer;
 }
 .nut-numberkeyboard-body-wrapper .key.active {
@@ -430,8 +452,12 @@
 .nut-numberkeyboard-sidebar {
   display: flex;
   flex: 1;
+  flex-basis: 33%;
   flex-direction: column;
 }
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper {
+  width: 100%;
+}
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
   position: absolute;
   top: 0;
@@ -441,9 +467,9 @@
   height: auto;
 }
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm {
-  font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 16px));
   color: var(--nutui-numberkeyboard-key-confirm-color, #fff);
-  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-brand-6));
 }
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active {
   background-color: rgba(255, 0, 0, 0.7);