@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

package/dist/es/packages/searchbar/searchbar.js

@@ -22,9 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ React.createElement(Search, {
-        ariaHidden: true
-    }),
+    leftIn: /*#__PURE__*/ React.createElement(Search, null),
     tag: false
 });
 export var SearchBar = function(props) {
@@ -179,15 +177,12 @@ export var SearchBar = function(props) {
                 onClick: function(e) {
                     return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
                 }
-            }, item, /*#__PURE__*/ React.createElement(Close, {
-                ariaLabel: locale.close
-            }));
+            }, item, /*#__PURE__*/ React.createElement(Close, null));
         }));
     }, [
         value,
         onItemClick,
-        innerTag,
-        locale.close
+        innerTag
     ]);
     var renderLeftIn = useCallback(function() {
         if (!leftIn) return null;
@@ -200,16 +195,11 @@ export var SearchBar = function(props) {
     var renderLeft = useCallback(function() {
         if (!backable && !left) return null;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left"),
-            ariaRole: backable ? 'button' : undefined,
-            ariaLabel: backable ? locale.back : undefined
-        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, {
-            ariaHidden: true
-        }) : left);
+            className: "".concat(classPrefix, "-left")
+        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, null) : left);
     }, [
         backable,
-        left,
-        locale
+        left
     ]);
     var renderRightIn = useCallback(function() {
         if (!rightIn) return null;
@@ -235,18 +225,13 @@ export var SearchBar = function(props) {
             style: {
                 visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
             },
-            onClick: clearaVal,
-            ariaRole: "button",
-            ariaLabel: locale.clear
-        }, /*#__PURE__*/ React.createElement(MaskClose, {
-            ariaHidden: true
-        }));
+            onClick: clearaVal
+        }, /*#__PURE__*/ React.createElement(MaskClose, null));
     }, [
         value,
         clearable,
         clearaVal,
-        innerTag,
-        locale
+        innerTag
     ]);
     var onConfirm = function() {
         onSearch && onSearch(value);

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

@@ -25,7 +25,7 @@
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
-    border: 1px solid $color-primary;
+    border: scale-px(1px) solid $color-primary;
   }
 
   &-icon {
@@ -40,7 +40,7 @@
   }
 
   &-rightin {
-    font-size: 15px;
+    font-size: $font-size-l;
     font-weight: 500;
     color: $color-primary;
 
@@ -74,9 +74,9 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: 12px;
-        height: 12px;
-        color: var(--nutui-black-5);
+        width: $icon-size-12;
+        height: $icon-size-12;
+        color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
         margin-right: $searchbar-inner-gap;
       }
       &::after {
@@ -94,28 +94,28 @@
     display: flex;
     flex-direction: row;
     z-index: 2;
-    background-color: #fff;
-    top: 9px;
-    left: 6px;
-    font-size: 12px;
-    line-height: 12px;
+    background-color: $searchbar-content-background;
+    top: scale-px(9px);
+    left: scale-px(6px);
+    font-size: $font-size-s;
+    line-height: scale-px(12px);
 
     .nut-searchbar-value {
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: 4px 8px;
-      background-color: #f7f8fc;
-      border-radius: 4px;
-      margin-right: 2px;
+      padding: scale-px(4px) scale-px(8px);
+      background-color: $color-background-sunken;
+      border-radius: scale-px(4px);
+      margin-right: scale-px(2px);
     }
 
     .nut-icon {
-      width: 6px;
-      height: 6px;
-      font-size: 6px;
-      color: #c2c4cc;
-      margin-left: 4px;
+      width: $icon-size-6;
+      height: $icon-size-6;
+      font-size: $icon-size-6;
+      color: $color-text-disabled;
+      margin-left: scale-px(4px);
     }
   }
 
@@ -130,8 +130,8 @@
     align-items: center;
 
     &.nut-icon {
-      width: 20px;
-      height: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
     }
   }
 
@@ -193,10 +193,10 @@
   }
 
   &-focus {
-    padding: 5px $searchbar-gap;
+    padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: 0.5px solid #ff5c67;
+      border: scale-px(0.5px) solid $color-primary;
     }
   }
 }

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -6,17 +16,17 @@
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
-  padding: var(--nutui-searchbar-padding, 1px 8px);
+  padding: var(--nutui-searchbar-padding, calc(1px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
   background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc));
   color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
   justify-content: center;
 }
 .nut-searchbar .nut-icon {
-  width: var(--nutui-searchbar-icon-size, 20px);
-  height: var(--nutui-searchbar-icon-size, 20px);
-  font-size: var(--nutui-searchbar-icon-size, 20px);
+  width: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-content {
   position: relative;
@@ -24,11 +34,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--nutui-searchbar-gap, 12px);
-  height: var(--nutui-searchbar-input-height, 38px);
+  padding: 0 var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-searchbar-input-height, calc(38px * var(--nut-scale-f, 1)));
   background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
-  border-radius: var(--nutui-searchbar-content-border-radius, 8px);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
+  border-radius: var(--nutui-searchbar-content-border-radius, calc(8px * var(--nut-scale-f, 1)));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-icon {
   display: flex;
@@ -37,10 +47,10 @@
   color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-leftin {
-  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+  margin-right: var(--nutui-searchbar-inner-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-rightin {
-  font-size: 15px;
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   font-weight: 500;
   color: var(--nutui-color-primary, #ff0f23);
 }
@@ -59,7 +69,7 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
   caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23));
   background: transparent;
@@ -69,10 +79,10 @@
   position: relative;
 }
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
-  width: 12px;
-  height: 12px;
-  color: var(--nutui-black-5);
-  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
+  margin-right: var(--nutui-searchbar-inner-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
   content: "";
@@ -86,27 +96,27 @@
   display: flex;
   flex-direction: row;
   z-index: 2;
-  background-color: #fff;
-  top: 9px;
-  left: 6px;
-  font-size: 12px;
-  line-height: 12px;
+  background-color: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
+  top: calc(9px * var(--nut-scale-f, 1));
+  left: calc(6px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-values .nut-searchbar-value {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 4px 8px;
-  background-color: #f7f8fc;
-  border-radius: 4px;
-  margin-right: 2px;
+  padding: calc(4px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1));
+  background-color: var(--nutui-color-background-sunken, #f7f8fc);
+  border-radius: calc(4px * var(--nut-scale-f, 1));
+  margin-right: calc(2px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-values .nut-icon {
-  width: 6px;
-  height: 6px;
-  font-size: 6px;
-  color: #c2c4cc;
-  margin-left: 4px;
+  width: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  font-size: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+  margin-left: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left, .nut-searchbar-right {
   /* #ifdef dynamic*/
@@ -118,67 +128,67 @@
   align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
-  width: 20px;
-  height: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
 .nut-searchbar-left .nut-icon {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
 .nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
 .nut-searchbar-right .nut-icon {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
 .nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right > text, .nut-searchbar-right > view {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
 .nut-searchbar-round {
-  border-radius: var(--nutui-searchbar-content-round-border-radius, 19px);
+  border-radius: var(--nutui-searchbar-content-round-border-radius, calc(19px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
 .nut-searchbar-focus {
-  padding: 5px var(--nutui-searchbar-gap, 12px);
+  padding: calc(5px * var(--nut-scale-f, 1)) var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: 0.5px solid #ff5c67;
+  border: calc(0.5px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > div, [dir=rtl] .nut-searchbar-left > span, [dir=rtl] .nut-searchbar-left > svg,
 .nut-rtl .nut-searchbar-left > div,
 .nut-rtl .nut-searchbar-left > span,
 .nut-rtl .nut-searchbar-left > svg {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > div.nut-icon, [dir=rtl] .nut-searchbar-left > span.nut-icon, [dir=rtl] .nut-searchbar-left > svg.nut-icon,
 .nut-rtl .nut-searchbar-left > div.nut-icon,
@@ -196,14 +206,14 @@
 [dir=rtl] .nut-searchbar-right,
 .nut-rtl .nut-searchbar-right {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > div, [dir=rtl] .nut-searchbar-right > span, [dir=rtl] .nut-searchbar-right > svg,
 .nut-rtl .nut-searchbar-right > div,
 .nut-rtl .nut-searchbar-right > span,
 .nut-rtl .nut-searchbar-right > svg {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > div:first-child, [dir=rtl] .nut-searchbar-right > span:first-child, [dir=rtl] .nut-searchbar-right > svg:first-child,
 .nut-rtl .nut-searchbar-right > div:first-child,
@@ -216,7 +226,7 @@
 .nut-rtl .nut-searchbar-left > text,
 .nut-rtl .nut-searchbar-left > view {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > text:last-child, [dir=rtl] .nut-searchbar-left > view:last-child,
 .nut-rtl .nut-searchbar-left > text:last-child,
@@ -228,7 +238,7 @@
 .nut-rtl .nut-searchbar-right > text,
 .nut-rtl .nut-searchbar-right > view {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > text:first-child, [dir=rtl] .nut-searchbar-right > view:first-child,
 .nut-rtl .nut-searchbar-right > text:first-child,