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

package/dist/cjs/packages/range/range.js

@@ -50,19 +50,22 @@ var handleOverlap = function handleOverlap(value) {
 };
 var Range = function Range(props) {
     var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, range = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
     var rtlClassPrefix = (0, _react.useMemo)(function() {
         return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
     }, [
         vertical
     ]);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), buttonIndex = _useState[0], setButtonIndex = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)('start' || 'draging' || ''), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)('start'), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
     var touch = (0, _usetouch.useTouch)();
     var root = (0, _react.useRef)(null);
     var _useState2 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), marksList = _useState2[0], setMarksList = _useState2[1];
     var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startValue = _useState3[0], setStartValue = _useState3[1];
     var scope = (0, _react.useMemo)(function() {
+        if (max < min || max === min) {
+            console.log('max 的值需要大于 min的值');
+        }
         return max - min;
     }, [
         max,
@@ -84,7 +87,6 @@ var Range = function Range(props) {
     (0, _react.useEffect)(function() {
         if (marks) {
             if (Array.isArray(marks)) {
-                // 增加变量
                 var list = marks.sort(function(a, b) {
                     return a.value - b.value;
                 }).filter(function(point) {
@@ -111,6 +113,10 @@ var Range = function Range(props) {
         max,
         min
     ]);
+    var _obj;
+    var classes = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, verticalClassPrefix, vertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-native"), isNative), _obj));
+    var _obj1;
+    var containerClasses = (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-container-native"), isNative), (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
     var markClassName = (0, _react.useCallback)(function(mark) {
         var classPrefix = 'nut-range-mark';
         var verticalClassPrefix = 'nut-range-vertical-mark';
@@ -151,10 +157,7 @@ var Range = function Range(props) {
     ]);
     var calcMainAxis = (0, _react.useCallback)(function() {
         var modelVal = current;
-        if (isRange(modelVal)) {
-            return "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%");
-        }
-        return "".concat((modelVal - min) * 100 / scope, "%");
+        return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
     }, [
         current,
         isRange,
@@ -163,10 +166,7 @@ var Range = function Range(props) {
     ]);
     var calcOffset = (0, _react.useCallback)(function() {
         var modelVal = current;
-        if (isRange(modelVal)) {
-            return "".concat((modelVal[0] - min) * 100 / scope, "%");
-        }
-        return "0%";
+        return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : "0%";
     }, [
         current,
         isRange,
@@ -242,7 +242,7 @@ var Range = function Range(props) {
         onEnd,
         setCurrent
     ]);
-    var click = (0, _react.useCallback)(function() {
+    var click = (0, _react.useCallback)(/*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(event) {
             var _event_detail, rect, x, delta, total, _event_detail1, y, value, _current, left, right, middle;
             return (0, _ts_generator._)(this, function(_state) {
@@ -265,6 +265,7 @@ var Range = function Range(props) {
                         delta = x - rect.left;
                         total = rect.width;
                         if (vertical) {
+                            ;
                             y = typeof ((_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== 'undefined' ? event.detail.y : event.clientY;
                             if (isHm) y = parseFloat((0, _pxtransform.default)(event.windowY));
                             delta = y - rect.top;
@@ -326,7 +327,7 @@ var Range = function Range(props) {
         isRange,
         touch
     ]);
-    var onTouchMove = (0, _react.useCallback)(function() {
+    var onTouchMove = (0, _react.useCallback)(/*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(event) {
             var rect, delta, total, diff, newValue;
             return (0, _ts_generator._)(this, function(_state) {
@@ -342,7 +343,6 @@ var Range = function Range(props) {
                             onStart && onStart();
                         }
                         touch.move(isRn ? event.nativeEvent : event);
-                        // console.log(JSON.stringify(event.touches[0]))
                         setDragStatus('draging');
                         return [
                             4,
@@ -355,7 +355,6 @@ var Range = function Range(props) {
                         ];
                         delta = isHm ? parseFloat((0, _pxtransform.default)(touch.deltaX.current)) : touch.deltaX.current;
                         total = rect.width;
-                        // console.log(pxTransform(delta), total)
                         diff = delta / total * scope;
                         diff = rtl ? -diff : diff;
                         if (vertical) {
@@ -479,8 +478,10 @@ var Range = function Range(props) {
     var renderMarks = (0, _react.useCallback)(function() {
         if (marksList.length <= 0) return null;
         var _obj;
+        var markcls = (0, _classnames.default)("".concat(classPrefix, "-mark"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj));
+        var textcls = (0, _classnames.default)("".concat(classPrefix, "-mark-text"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-mark-text"), vertical));
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: (0, _classnames.default)("".concat(classPrefix, "-mark"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj))
+            className: markcls
         }, marksList.map(function(mark) {
             var _obj;
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
@@ -488,7 +489,7 @@ var Range = function Range(props) {
                 className: markClassName(mark),
                 style: marksStyle(mark)
             }, /*#__PURE__*/ _react.default.createElement(_components.Text, {
-                className: (0, _classnames.default)("".concat(classPrefix, "-mark-text"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-mark-text"), vertical))
+                className: textcls
             }, Array.isArray(marks) ? marksRef.current[mark] : marks[mark]), /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: (0, _classnames.default)("".concat(vertical ? verticalClassPrefix : classPrefix, "-tick"), (_obj = {}, (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-tick-active"), tickClass(mark)), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-tick"), rtl), _obj))
             }));
@@ -532,31 +533,27 @@ var Range = function Range(props) {
         }
         return 'translate(-50%, -50%)';
     }, []);
-    var renderButtonWrapper = (0, _react.useCallback)(function() {
-        if (range) return [
+    var renderRangeButton = (0, _react.useCallback)(function() {
+        return [
             0,
             1
         ].map(function(item, index) {
             var isLeft = index === 0;
             var suffix = isLeft ? 'left' : 'right';
             var _obj;
+            var cls = (0, _classnames.default)("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: index,
-                className: (0, _classnames.default)("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj)),
+                className: cls,
                 style: {
                     // @ts-ignore
                     transform: rangeWrapperTransform
                 },
                 onTouchStart: function onTouchStart1(e) {
-                    if (typeof index === 'number') {
-                        // 实时更新当前拖动的按钮索引
-                        setButtonIndex(index);
-                    }
+                    setButtonIndex(index);
                     onTouchStart(e);
                 },
-                onTouchMove: function onTouchMove1(e) {
-                    return onTouchMove(e);
-                },
+                onTouchMove: onTouchMove,
                 onTouchEnd: onTouchEnd,
                 onTouchCancel: onTouchEnd,
                 onClick: function onClick(e) {
@@ -564,6 +561,17 @@ var Range = function Range(props) {
                 }
             }, renderButton(index));
         });
+    }, [
+        onTouchEnd,
+        onTouchMove,
+        onTouchStart,
+        renderButton,
+        rangeWrapperTransform,
+        vertical,
+        rtl,
+        rtlClassPrefix
+    ]);
+    var renderSingleButton = (0, _react.useCallback)(function() {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             catchMove: true,
             className: (0, _classnames.default)("".concat(classPrefix, "-button-wrapper"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
@@ -571,12 +579,8 @@ var Range = function Range(props) {
                 // @ts-ignore
                 transform: wrapperTransform
             },
-            onTouchStart: function onTouchStart1(e) {
-                return onTouchStart(e);
-            },
-            onTouchMove: function onTouchMove1(e) {
-                return onTouchMove(e);
-            },
+            onTouchStart: onTouchStart,
+            onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd,
             onTouchCancel: onTouchEnd,
             onClick: function onClick(e) {
@@ -587,23 +591,28 @@ var Range = function Range(props) {
         onTouchEnd,
         onTouchMove,
         onTouchStart,
-        range,
-        rangeWrapperTransform,
         renderButton,
-        rtl,
-        rtlClassPrefix,
-        vertical,
-        wrapperTransform
+        wrapperTransform,
+        vertical
+    ]);
+    var renderButtonWrapper = (0, _react.useCallback)(function() {
+        if (range) {
+            return renderRangeButton();
+        }
+        return renderSingleButton();
+    }, [
+        renderRangeButton,
+        renderSingleButton,
+        range
     ]);
-    var _obj, _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-container-native"), isNative), (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-container"), vertical), _obj), className),
+        className: containerClasses,
         style: style
     }, minDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, "-min")
     }, minDescription || min), /*#__PURE__*/ _react.default.createElement(_components.View, {
         ref: root,
-        className: (0, _classnames.default)(classPrefix, (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj1, verticalClassPrefix, vertical), (0, _define_property._)(_obj1, "".concat(classPrefix, "-native"), isNative), _obj1)),
+        className: classes,
         onClick: function onClick(e) {
             return click(e);
         }

package/dist/cjs/packages/range/style/range.scss

@@ -32,7 +32,7 @@
 
   &-min,
   &-max {
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $range-color;
     user-select: none;
   }
@@ -42,6 +42,8 @@
     position: relative;
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
     transition: all 0.2s;
@@ -101,7 +103,7 @@
       align-items: center;
       justify-content: center;
       user-select: none;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $range-color;
       text-align: center;
       vertical-align: center;

package/dist/cjs/packages/range/style/style.css

@@ -16,7 +16,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -28,8 +28,8 @@
   content: "";
 }
 .nut-range-min, .nut-range-max {
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -37,6 +37,8 @@
   position: relative;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
   transition: all 0.2s;
@@ -86,8 +88,8 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -131,7 +133,7 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
@@ -197,7 +199,7 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));

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

@@ -14,16 +14,16 @@
 .nut-resultpage-title {
   width: var(--nutui-resultpage-width, 247px);
   margin-bottom: var(--nutui-resultpage-title-margin-bottom, 9px);
-  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-6, 20px));
-  color: var(--nutui-resultpage-title-color, var(--nutui-gray-7, #1a1a1a));
-  font-weight: var(--nutui-font-weight-bold, 500);
+  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
+  color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
+  font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
   width: var(--nutui-resultpage-width, 247px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
-  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-resultpage-description-color, var(--nutui-gray-6, #505259));
+  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

package/dist/cjs/packages/searchbar/searchbar.d.ts

@@ -3,38 +3,24 @@ import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
 import { ITouchEvent } from '@tarojs/components';
 import { BasicComponent } from "../../utils/typings";
 export interface SearchBarProps extends BasicComponent {
-    /** 文本值	 */
     value?: number | string;
-    /** 输入框占位提示文字	 */
     placeholder?: string;
-    /** 搜索框形状，可选值为 round	 */
     shape?: 'square' | 'round';
-    /** 是否禁用输入框	 */
     disabled?: boolean;
-    /** 最大输入长度	 */
     maxLength?: number;
-    /** 是否启用清除图标，点击清除图标后会清空输入框	 */
     clearable?: boolean;
-    /** 是否将输入框设为只读状态，只读状态下无法输入内容   */
     readOnly?: boolean;
-    /**  是否自动聚焦，iOS 系统不支持该属性	 */
     autoFocus?: boolean;
     backable: boolean;
     left: React.ReactNode;
     right: React.ReactNode;
     leftIn: React.ReactNode;
     rightIn: React.ReactNode;
-    /**  确定搜索时触发	 */
     onSearch?: (val: string) => void;
-    /** 输入框内容变化时触发	 */
     onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    /** 输入框获得焦点时触发	 */
     onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    /** 输入框失去焦点时触发	 */
     onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    /** 点击清除按钮后触发	 */
     onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
-    /** 点击输入区域时触发	 */
     onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
 }
 export declare const SearchBar: FunctionComponent<Partial<SearchBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>>;

package/dist/cjs/packages/searchbar/style/style.css

@@ -3,9 +3,9 @@
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-gray-3, #f5f6fa));
-  color: var(--nutui-searchbar-color, var(--nutui-gray-7, #1a1a1a));
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));
+  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f5f6fa));
+  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
 }
@@ -16,7 +16,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1, #ffffff));
+  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -79,9 +79,9 @@
   height: var(--nutui-searchbar-input-height, 32px);
   line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -26,6 +26,7 @@ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
 var _index1 = require("../configprovider/index");
 var _typings = require("../../utils/typings");
@@ -126,42 +127,42 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         closeable: true,
         onOverlayClick: onClose,
         onCloseIconClick: onClose
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
+    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, className),
         style: style
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-title")
-    }, title || locale.shortpassword.title), /*#__PURE__*/ _react.default.createElement("div", {
+    }, title || locale.shortpassword.title), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-description")
-    }, description || locale.shortpassword.description), /*#__PURE__*/ _react.default.createElement("div", {
+    }, description || locale.shortpassword.description), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-input"),
         onClick: onFocus
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-input-site")
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-input-fake")
     }, (0, _to_consumable_array._)(new Array(comLen).keys()).map(function(item, index) {
-        return /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-input-fake-li"),
             key: index
-        }, inputValue.length > index && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, plain ? inputValue[index] : /*#__PURE__*/ _react.default.createElement("div", {
+        }, inputValue.length > index && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, plain ? inputValue[index] : /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-input-fake-li-icon")
         })));
-    }))), /*#__PURE__*/ _react.default.createElement("div", {
+    }))), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-message")
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-message-error")
-    }, error), /*#__PURE__*/ _react.default.createElement("div", {
+    }, error), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-message-forget"),
         onClick: onTips
     }, tips || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Tips, {
         size: 11
-    }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ _react.default.createElement("div", {
+    }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-footer")
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-footer-cancel"),
         onClick: onCancel
-    }, locale.cancel), /*#__PURE__*/ _react.default.createElement("div", {
+    }, locale.cancel), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-footer-sure"),
         onClick: sure
     }, locale.confirm))));

package/dist/cjs/packages/shortpassword/style/shortpassword.scss

@@ -1,7 +1,7 @@
 .nut-shortpassword {
   &-title {
     line-height: 1;
-    font-size: $font-size-large;
+    font-size: $font-size-l;
     color: $color-title;
   }
 
@@ -9,7 +9,7 @@
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $color-text;
   }
 
@@ -80,7 +80,7 @@
 
     &-forget {
       line-height: 1;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $shortpassword-forget;
       display: flex;
       align-items: center;