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

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;
@@ -16,7 +20,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-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -29,7 +33,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -39,7 +43,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -48,10 +52,10 @@
   display: flex;
   width: var(--nutui-range-button-width, 24px);
   height: var(--nutui-range-button-height, 24px);
-  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
   outline: none;
   align-items: center;
   top: 50%;
@@ -89,7 +93,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -133,10 +137,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 .nut-range-vertical-container {
@@ -199,10 +203,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,

package/dist/es/packages/rate/index.d.ts

@@ -1,3 +1,3 @@
 import { Rate } from "./rate";
-export type { RateProps } from "./rate";
+export type { RateSize, RateProps } from './types';
 export default Rate;

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

@@ -1,17 +1,3 @@
-import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface RateProps extends BasicComponent {
-    count: number;
-    value: number;
-    defaultValue: number;
-    min: number;
-    checkedIcon: React.ReactNode;
-    uncheckedIcon: React.ReactNode;
-    disabled: boolean;
-    readOnly: boolean;
-    allowHalf: boolean;
-    touchable: boolean;
-    onChange: (value: number) => void;
-    onTouchEnd: (e: TouchEvent, value: number) => void;
-}
+import { FunctionComponent } from 'react';
+import { RateProps } from './types';
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/es/packages/rate/rate.js

@@ -6,12 +6,14 @@ import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { StarFill } from "@nutui/icons-react-taro";
 import { useReady } from "@tarojs/taro";
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import useRefs from "../../utils/use-refs";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    size: 'normal',
+    showScore: false,
     count: 5,
     min: 0,
     checkedIcon: null,
@@ -22,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     touchable: false
 });
 export var Rate = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
     var classPrefix = 'nut-rate';
     var _useState = _sliced_to_array(useState([
         1,
@@ -146,7 +148,7 @@ export var Rate = function(props) {
         onTouchCancel: handleTouchEnd
     }, countArray.map(function(n, index) {
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-item"),
+            className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
             ref: setRefs(index),
             onClick: function(event) {
@@ -160,6 +162,8 @@ export var Rate = function(props) {
                 return onHalfClick(event, n);
             }
         }, renderIcon(n)));
-    }));
+    }), showScore ? /*#__PURE__*/ React.createElement(Text, {
+        className: classNames("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), _define_property({}, "".concat(classPrefix, "-score-disabled"), disabled))
+    }, score.toFixed(1)) : null);
 };
 Rate.displayName = 'NutRate';

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

@@ -16,13 +16,9 @@
 
   &-item {
     display: flex;
+    align-items: center;
     flex-shrink: 0;
     position: relative;
-    margin-right: $rate-item-margin;
-
-    &:last-child {
-      margin-right: 0;
-    }
 
     &-half {
       position: absolute;
@@ -37,13 +33,51 @@
       }
     }
 
+    &-normal {
+      margin-left: $rate-item-margin;
+      .nut-icon {
+        height: $rate-icon-size;
+        width: $rate-icon-size;
+      }
+    }
+
+    &-large {
+      margin-left: calc($rate-item-margin * 2);
+      .nut-icon {
+        height: calc($rate-icon-size + 8px);
+        width: calc($rate-icon-size + 8px);
+      }
+    }
+
+    &-small {
+      margin-left: calc($rate-item-margin / 2);
+      .nut-icon {
+        height: calc($rate-icon-size - 4px);
+        width: calc($rate-icon-size - 4px);
+      }
+    }
+
+    &-normal,
+    &-large,
+    &-small {
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     &-icon {
       display: flex;
-      color: $rate-icon-color;
+      align-items: center;
       cursor: pointer;
 
+      .nut-icon {
+        color: $rate-icon-color;
+      }
+
       &-disabled {
-        color: $rate-icon-inactive-color;
+        .nut-icon {
+          color: $rate-icon-inactive-color;
+        }
       }
 
       &.nut-rate-item-icon.nut-rate-item-icon-half {
@@ -61,18 +95,59 @@
       }
     }
   }
+
+  &-score {
+    display: inline-flex;
+    align-items: center;
+    color: $rate-font-color;
+    font-family: 'JD';
+    line-height: 1;
+
+    &-normal {
+      padding-left: $rate-item-margin;
+      font-size: $rate-font-size;
+    }
+
+    &-large {
+      font-size: calc($rate-font-size + 6px);
+      padding-left: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      font-size: calc($rate-font-size - 2px);
+      padding-left: calc($rate-item-margin / 2);
+    }
+
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
 }
 
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
   &-item {
-    margin-right: 0;
-    margin-left: $rate-item-margin;
+    margin-left: 0;
+    &:first-child {
+      margin-right: 0;
+    }
+
+    &-normal {
+      margin-right: $rate-item-margin;
+    }
+
+    &-large {
+      margin-right: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      margin-right: calc($rate-item-margin - 2px);
+    }
 
     &:last-child {
-      margin-right: 0;
       margin-left: 0;
     }
+
     &-half {
       left: auto;
       right: 0;
@@ -90,4 +165,20 @@
       }
     }
   }
+
+  &-score {
+    padding-left: 0;
+
+    &-large {
+      padding-right: calc($rate-item-margin * 2);
+    }
+
+    &-normal {
+      padding-right: $rate-item-margin;
+    }
+
+    &-small {
+      padding-right: calc($rate-item-margin - 2px);
+    }
+  }
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-rate {
   display: flex;
   touch-action: pan-x;
@@ -10,12 +14,9 @@
 }
 .nut-rate-item {
   display: flex;
+  align-items: center;
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--nutui-rate-item-margin, 14px);
-}
-.nut-rate-item:last-child {
-  margin-right: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -28,13 +29,40 @@
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
+.nut-rate-item-normal {
+  margin-left: var(--nutui-rate-item-margin, 4px);
+}
+.nut-rate-item-normal .nut-icon {
+  height: var(--nutui-rate-icon-size, 12px);
+  width: var(--nutui-rate-icon-size, 12px);
+}
+.nut-rate-item-large {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-item-large .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+}
+.nut-rate-item-small {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-item-small .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+}
+.nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
 .nut-rate-item-icon {
   display: flex;
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+  align-items: center;
   cursor: pointer;
 }
-.nut-rate-item-icon-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
+.nut-rate-item-icon .nut-icon {
+  color: var(--nutui-rate-icon-color, var(--nutui-red-6));
+}
+.nut-rate-item-icon-disabled .nut-icon {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -48,15 +76,51 @@
   left: auto;
   transform: none;
 }
+.nut-rate-score {
+  display: inline-flex;
+  align-items: center;
+  color: var(--nutui-rate-font-color, var(--nutui-red-6));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-rate-score-normal {
+  padding-left: var(--nutui-rate-item-margin, 4px);
+  font-size: var(--nutui-rate-font-size, 12px);
+}
+.nut-rate-score-large {
+  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-score-small {
+  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
+}
 
 [dir=rtl] .nut-rate-item,
 .nut-rtl .nut-rate-item {
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item:first-child,
+.nut-rtl .nut-rate-item:first-child {
   margin-right: 0;
-  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-item-normal,
+.nut-rtl .nut-rate-item-normal {
+  margin-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-item-large,
+.nut-rtl .nut-rate-item-large {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-item-small,
+.nut-rtl .nut-rate-item-small {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
-  margin-right: 0;
   margin-left: 0;
 }
 [dir=rtl] .nut-rate-item-half,
@@ -73,4 +137,20 @@
 .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
   left: auto;
   right: auto;
+}
+[dir=rtl] .nut-rate-score,
+.nut-rtl .nut-rate-score {
+  padding-left: 0;
+}
+[dir=rtl] .nut-rate-score-large,
+.nut-rtl .nut-rate-score-large {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-score-normal,
+.nut-rtl .nut-rate-score-normal {
+  padding-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-score-small,
+.nut-rtl .nut-rate-score-small {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }

package/dist/es/packages/rate/types.d.ts

@@ -0,0 +1,18 @@
+import { BasicComponent } from "../../utils/typings";
+export type RateSize = 'large' | 'normal' | 'small';
+export interface RateProps extends BasicComponent {
+    size: RateSize;
+    showScore: boolean;
+    count: number;
+    value: number;
+    defaultValue: number;
+    min: number;
+    checkedIcon: React.ReactNode;
+    uncheckedIcon: React.ReactNode;
+    disabled: boolean;
+    readOnly: boolean;
+    allowHalf: boolean;
+    touchable: boolean;
+    onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
+}

package/dist/es/packages/rate/types.js

@@ -0,0 +1 @@
+export { };

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

@@ -1,10 +1,10 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useState } from "react";
+import React from "react";
 import classNames from "classnames";
-import { View, Text, Image } from "@tarojs/components";
+import { Tips, Warning, Failure, Ask, Success } from "@nutui/icons-react-taro";
+import { View, Text } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { Button } from "../button/button";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -19,20 +19,28 @@ export var ResultPage = function(props) {
     var classPrefix = "nut-resultpage";
     var cls = classNames(classPrefix, className);
     var defaultStatus = {
-        success: 'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png',
-        error: 'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png',
-        warning: 'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png',
-        info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png',
-        waiting: 'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png'
+        success: /*#__PURE__*/ React.createElement(Success, {
+            color: "#00D900"
+        }),
+        error: /*#__PURE__*/ React.createElement(Failure, {
+            color: "#FF0F23"
+        }),
+        warning: /*#__PURE__*/ React.createElement(Warning, {
+            color: "#FFBF00"
+        }),
+        info: /*#__PURE__*/ React.createElement(Tips, {
+            color: "#0073FF"
+        }),
+        waiting: /*#__PURE__*/ React.createElement(Ask, {
+            color: "#0073FF"
+        })
     };
-    var _useState = _sliced_to_array(useState("".concat(typeof icon === 'string' && icon ? icon : defaultStatus[status])), 1), iconSrc = _useState[0];
     return /*#__PURE__*/ React.createElement(View, {
         className: cls,
         style: style
-    }, typeof icon === 'string' ? /*#__PURE__*/ React.createElement(Image, {
-        src: iconSrc,
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-icon")
-    }) : null, typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
+    }, icon || defaultStatus[status]), typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-title")
     }, title) : title, typeof description === 'string' && description ? /*#__PURE__*/ React.createElement(Text, {
         numberOfLines: 2,
@@ -47,7 +55,7 @@ export var ResultPage = function(props) {
             className: "".concat(classPrefix, "-action"),
             key: index
         }, /*#__PURE__*/ React.createElement(Button, _object_spread_props(_object_spread({}, rest), {
-            size: "small"
+            size: "large"
         }), action === null || action === void 0 ? void 0 : action.text));
     })) : null, children);
 };

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

@@ -5,10 +5,12 @@
   align-items: center;
   margin: 0 auto;
   &-icon {
-    height: $resultpage-icon-size;
-    width: $resultpage-icon-size;
+    display: inline-flex;
     margin-bottom: $resultpage-icon-margin-bottom;
-    background-size: 100%;
+    .nut-icon {
+      height: $resultpage-icon-size;
+      width: $resultpage-icon-size;
+    }
   }
   &-title {
     width: $resultpage-width;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-resultpage {
   width: 100%;
   display: flex;
@@ -6,24 +10,26 @@
   margin: 0 auto;
 }
 .nut-resultpage-icon {
-  height: var(--nutui-resultpage-icon-size, 48px);
-  width: var(--nutui-resultpage-icon-size, 48px);
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 16px);
-  background-size: 100%;
+  display: inline-flex;
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+}
+.nut-resultpage-icon .nut-icon {
+  height: var(--nutui-resultpage-icon-size, 36px);
+  width: var(--nutui-resultpage-icon-size, 36px);
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 247px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 9px);
+  width: var(--nutui-resultpage-width, 240px);
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   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));
+  color: var(--nutui-resultpage-title-color, var(--nutui-gray-7));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 247px);
+  width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   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));
+  color: var(--nutui-resultpage-description-color, var(--nutui-gray-6));
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -33,7 +39,7 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 21px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
 }
 .nut-resultpage-action {
   margin-left: 6px;

package/dist/es/packages/resultpage/types.d.ts

@@ -1,4 +1,4 @@
 export type ResultPageStatusOptions = {
-    [key: string]: string;
+    [key: string]: React.ReactNode;
 };
 export type ResultPageStatus = 'success' | 'error' | 'warning' | 'info' | 'waiting';

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-row {
   display: flex;
   flex-direction: row;

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

@@ -1,10 +1,6 @@
 import { FC } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface SafeAreaProps extends BasicComponent {
-    /**
-    * 安全区的位置
-    * @default -
-    */
-    position: 'top' | 'bottom'
+    position: 'top' | 'bottom';
 }
 export declare const SafeArea: FC<SafeAreaProps>;

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

@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 
   &-position-top {

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

@@ -1,5 +1,9 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-safe-area {
-  display: block;
+  display: flex;
   width: 100%;
 }
 .nut-safe-area-position-top {