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

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

@@ -28,7 +28,7 @@
   height: var(--nutui-searchbar-input-height, 36px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   border-radius: var(--nutui-searchbar-content-border-radius, var(--nutui-radius-xs));
-  border: 1px solid var(--nutui-color-primary);
+  border: scale-px(1px) solid var(--nutui-color-primary);
 }
 .nut-searchbar-icon {
   display: flex;
@@ -40,7 +40,7 @@
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-rightin {
-  font-size: 15px;
+  font-size: var(--nutui-font-text-large);
   font-weight: 500;
   color: var(--nutui-color-primary);
 }
@@ -69,8 +69,8 @@
   position: relative;
 }
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
   color: var(--nutui-black-5);
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
@@ -87,26 +87,26 @@
   flex-direction: row;
   z-index: 2;
   background-color: #fff;
-  top: 9px;
-  left: 6px;
-  font-size: 12px;
-  line-height: 12px;
+  top: scale-px(9px);
+  left: scale-px(6px);
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(12px);
 }
 .nut-searchbar-values .nut-searchbar-value {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 4px 8px;
+  padding: scale-px(4px) scale-px(8px);
   background-color: #f7f8fc;
-  border-radius: 4px;
-  margin-right: 2px;
+  border-radius: scale-px(4px);
+  margin-right: scale-px(2px);
 }
 .nut-searchbar-values .nut-icon {
-  width: 6px;
-  height: 6px;
-  font-size: 6px;
+  width: var(--nutui-icon-size-6, 6px);
+  height: var(--nutui-icon-size-6, 6px);
+  font-size: var(--nutui-icon-size-6, 6px);
   color: #c2c4cc;
-  margin-left: 4px;
+  margin-left: scale-px(4px);
 }
 .nut-searchbar-left, .nut-searchbar-right {
   /* #ifdef dynamic*/
@@ -118,8 +118,8 @@
   align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
-  width: 20px;
-  height: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
 }
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
@@ -162,10 +162,10 @@
   cursor: not-allowed;
 }
 .nut-searchbar-focus {
-  padding: 5px var(--nutui-searchbar-gap, 16px);
+  padding: scale-px(5px) var(--nutui-searchbar-gap, 16px);
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: 0.5px solid #ff5c67;
+  border: scale-px(0.5px) solid #ff5c67;
 }
 
 [dir=rtl] .nut-searchbar-left,

package/dist/cjs/packages/searchbar/style-jrkf/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,8 +74,8 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: $icon-size-12;
+        height: $icon-size-12;
         color: var(--nutui-black-5);
         margin-right: $searchbar-inner-gap;
       }
@@ -95,27 +95,27 @@
     flex-direction: row;
     z-index: 2;
     background-color: #fff;
-    top: 9px;
-    left: 6px;
-    font-size: 12px;
-    line-height: 12px;
+    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;
+      padding: scale-px(4px) scale-px(8px);
       background-color: #f7f8fc;
-      border-radius: 4px;
-      margin-right: 2px;
+      border-radius: scale-px(4px);
+      margin-right: scale-px(2px);
     }
 
     .nut-icon {
-      width: 6px;
-      height: 6px;
-      font-size: 6px;
+      width: $icon-size-6;
+      height: $icon-size-6;
+      font-size: $icon-size-6;
       color: #c2c4cc;
-      margin-left: 4px;
+      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 #ff5c67;
     }
   }
 }

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

@@ -28,7 +28,7 @@
   height: var(--nutui-searchbar-input-height, 36px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   border-radius: var(--nutui-searchbar-content-border-radius, var(--nutui-radius-xs));
-  border: 1px solid var(--nutui-color-primary, #ff6666);
+  border: scale-px(1px) solid var(--nutui-color-primary, #ff6666);
 }
 .nut-searchbar-icon {
   display: flex;
@@ -40,7 +40,7 @@
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-rightin {
-  font-size: 15px;
+  font-size: var(--nutui-font-text-large);
   font-weight: 500;
   color: var(--nutui-color-primary, #ff6666);
 }
@@ -69,8 +69,8 @@
   position: relative;
 }
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
   color: var(--nutui-black-5);
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
@@ -87,26 +87,26 @@
   flex-direction: row;
   z-index: 2;
   background-color: #fff;
-  top: 9px;
-  left: 6px;
-  font-size: 12px;
-  line-height: 12px;
+  top: scale-px(9px);
+  left: scale-px(6px);
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(12px);
 }
 .nut-searchbar-values .nut-searchbar-value {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 4px 8px;
+  padding: scale-px(4px) scale-px(8px);
   background-color: #f7f8fc;
-  border-radius: 4px;
-  margin-right: 2px;
+  border-radius: scale-px(4px);
+  margin-right: scale-px(2px);
 }
 .nut-searchbar-values .nut-icon {
-  width: 6px;
-  height: 6px;
-  font-size: 6px;
+  width: var(--nutui-icon-size-6, 6px);
+  height: var(--nutui-icon-size-6, 6px);
+  font-size: var(--nutui-icon-size-6, 6px);
   color: #c2c4cc;
-  margin-left: 4px;
+  margin-left: scale-px(4px);
 }
 .nut-searchbar-left, .nut-searchbar-right {
   /* #ifdef dynamic*/
@@ -118,8 +118,8 @@
   align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
-  width: 20px;
-  height: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
 }
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
@@ -162,10 +162,10 @@
   cursor: not-allowed;
 }
 .nut-searchbar-focus {
-  padding: 5px var(--nutui-searchbar-gap, 16px);
+  padding: scale-px(5px) var(--nutui-searchbar-gap, 16px);
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: 0.5px solid #ff5c67;
+  border: scale-px(0.5px) solid #ff5c67;
 }
 
 [dir=rtl] .nut-searchbar-left,

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

@@ -6,7 +6,7 @@
   display: inline-flex;
   /* #endif */
   height: $segmented-height;
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: $segmented-padding;
   align-items: center;
   border-radius: $segmented-border-radius;
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: 1;
+  line-height: $line-height-s;
   box-sizing: border-box;
 }
 
@@ -32,12 +32,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  display: flex;
+  align-items: center;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: $segmented-icon-margin-right;
   .nut-icon {
-    height: 10px;
-    width: 10px;
-    font-size: 10px;
+    height: scale-px(10px);
+    width: scale-px(10px);
+    font-size: $font-size-xxs;
   }
 }

package/dist/cjs/packages/segmented/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 */
@@ -9,25 +19,25 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  height: var(--nutui-segmented-height, 24px);
-  min-width: 24px;
-  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  height: var(--nutui-segmented-height, calc(24px * var(--nut-scale-f, 1)));
+  min-width: calc(24px * var(--nut-scale-f, 1));
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, calc(2px * var(--nut-scale-f, 1))));
   align-items: center;
-  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
   background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   box-sizing: border-box;
 }
 
 .nut-segmented-item {
   display: flex;
-  height: var(--nutui-segmented-height, 20px);
+  height: var(--nutui-segmented-height, calc(20px * var(--nut-scale-f, 1)));
   align-items: center;
   justify-content: center;
-  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
-  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1))));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
   color: var(--nutui-segmented-item-color, #ffffff);
-  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
-  line-height: 1;
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
 }
 
@@ -36,12 +46,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
-  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+  display: flex;
+  align-items: center;
+  height: calc(10px * var(--nut-scale-f, 1));
+  width: calc(10px * var(--nut-scale-f, 1));
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-segmented-icon .nut-icon {
-  height: 10px;
-  width: 10px;
-  font-size: 10px;
+  height: calc(10px * var(--nut-scale-f, 1));
+  width: calc(10px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }

package/dist/cjs/packages/segmented/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 */
@@ -9,25 +19,25 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  height: var(--nutui-segmented-height, 24px);
-  min-width: 24px;
-  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  height: var(--nutui-segmented-height, calc(24px * var(--nut-scale-f, 1)));
+  min-width: calc(24px * var(--nut-scale-f, 1));
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, calc(2px * var(--nut-scale-f, 1))));
   align-items: center;
-  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
   background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   box-sizing: border-box;
 }
 
 .nut-segmented-item {
   display: flex;
-  height: var(--nutui-segmented-height, 20px);
+  height: var(--nutui-segmented-height, calc(20px * var(--nut-scale-f, 1)));
   align-items: center;
   justify-content: center;
-  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
-  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1))));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
   color: var(--nutui-segmented-item-color, #ffffff);
-  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
-  line-height: 1;
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
 }
 
@@ -36,12 +46,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
-  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+  display: flex;
+  align-items: center;
+  height: calc(10px * var(--nut-scale-f, 1));
+  width: calc(10px * var(--nut-scale-f, 1));
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-segmented-icon .nut-icon {
-  height: 10px;
-  width: 10px;
-  font-size: 10px;
+  height: calc(10px * var(--nut-scale-f, 1));
+  width: calc(10px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }

package/dist/cjs/packages/segmented/style-jmapp/segmented.scss

@@ -6,7 +6,7 @@
   display: inline-flex;
   /* #endif */
   height: $segmented-height;
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: $segmented-padding;
   align-items: center;
   border-radius: $segmented-border-radius;
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: 1;
+  line-height: $line-height-s;
   box-sizing: border-box;
 }
 
@@ -32,12 +32,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  display: flex;
+  align-items: center;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: $segmented-icon-margin-right;
   .nut-icon {
-    height: 10px;
-    width: 10px;
-    font-size: 10px;
+    height: scale-px(10px);
+    width: scale-px(10px);
+    font-size: $font-size-xxs;
   }
 }

package/dist/cjs/packages/segmented/style-jmapp/style.css

@@ -10,7 +10,7 @@
   display: inline-flex;
   /* #endif */
   height: var(--nutui-segmented-height, 24px);
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs));
   align-items: center;
   border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs));
@@ -27,7 +27,7 @@
   border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs));
   color: var(--nutui-segmented-item-color, var(--nutui-color-text-dark));
   font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-text-small));
-  line-height: 1;
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
   box-sizing: border-box;
 }
 
@@ -36,12 +36,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  display: flex;
+  align-items: center;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs));
 }
 .nut-segmented-icon .nut-icon {
-  height: 10px;
-  width: 10px;
-  font-size: 10px;
+  height: scale-px(10px);
+  width: scale-px(10px);
+  font-size: var(--nutui-font-text-mini);
 }

package/dist/cjs/packages/segmented/style-jrkf/segmented.scss

@@ -6,7 +6,7 @@
   display: inline-flex;
   /* #endif */
   height: $segmented-height;
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: $segmented-padding;
   align-items: center;
   border-radius: $segmented-border-radius;
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: 1;
+  line-height: $line-height-s;
   box-sizing: border-box;
 }
 
@@ -32,12 +32,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  display: flex;
+  align-items: center;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: $segmented-icon-margin-right;
   .nut-icon {
-    height: 10px;
-    width: 10px;
-    font-size: 10px;
+    height: scale-px(10px);
+    width: scale-px(10px);
+    font-size: $font-size-xxs;
   }
 }

package/dist/cjs/packages/segmented/style-jrkf/style.css

@@ -10,7 +10,7 @@
   display: inline-flex;
   /* #endif */
   height: var(--nutui-segmented-height, 24px);
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
   align-items: center;
   border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs));
@@ -27,7 +27,7 @@
   border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs));
   color: var(--nutui-segmented-item-color, var(--nutui-color-text-dark));
   font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-text-small));
-  line-height: 1;
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
   box-sizing: border-box;
 }
 
@@ -36,12 +36,14 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  display: flex;
+  align-items: center;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
 }
 .nut-segmented-icon .nut-icon {
-  height: 10px;
-  width: 10px;
-  font-size: 10px;
+  height: scale-px(10px);
+  width: scale-px(10px);
+  font-size: var(--nutui-font-text-mini);
 }

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

@@ -154,7 +154,7 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         className: "".concat(classPrefix, "-message-forget"),
         onClick: onTips
     }, tips || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Tips, {
-        size: 11
+        className: "".concat(classPrefix, "-message-tips-icon")
     }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-footer")
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {