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

package/dist/es/packages/infiniteloading/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 */
@@ -12,7 +22,7 @@
   justify-content: center;
   width: 100%;
   overflow: hidden;
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-infiniteloading .nut-infinite-top-tips {
@@ -26,14 +36,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-infiniteloading .nut-infinite-bottom {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding-top: 6px;
+  padding-top: calc(6px * var(--nut-scale-f, 1));
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
   text-align: center;
 }
@@ -41,10 +51,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--nutui-font-size-xxs, 10px);
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-infiniteloading .nut-infinite-bottom-tips-icons {
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-infiniteloading-primary {
   background-color: var(--nutui-color-primary, #ff0f23);
@@ -57,5 +67,5 @@
 [dir=rtl] .nut-infiniteloading .nut-infinite-bottom-tips-icons,
 .nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/infiniteloading/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 */
@@ -12,7 +22,7 @@
   justify-content: center;
   width: 100%;
   overflow: hidden;
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-infiniteloading .nut-infinite-top-tips {
@@ -26,14 +36,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-infiniteloading .nut-infinite-bottom {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding-top: 6px;
+  padding-top: calc(6px * var(--nut-scale-f, 1));
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
   text-align: center;
 }
@@ -41,10 +51,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--nutui-font-size-xxs, 10px);
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-infiniteloading .nut-infinite-bottom-tips-icons {
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-infiniteloading-primary {
   background-color: var(--nutui-color-primary, #ff0f23);
@@ -57,5 +67,5 @@
 [dir=rtl] .nut-infiniteloading .nut-infinite-bottom-tips-icons,
 .nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }

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

@@ -22,7 +22,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }
@@ -32,7 +32,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding-top: 6px;
+    padding-top: scale-px(6px);
     color: $infiniteloading-color;
     text-align: center;
 
@@ -43,7 +43,7 @@
       font-size: $font-size-xxs;
 
       &-icons {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
@@ -62,7 +62,7 @@
     &-tips {
       &-icons {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
     }
   }

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

@@ -26,14 +26,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
 }
 .nut-infiniteloading .nut-infinite-bottom {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding-top: 6px;
+  padding-top: scale-px(6px);
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help));
   text-align: center;
 }
@@ -44,7 +44,7 @@
   font-size: var(--nutui-font-text-mini);
 }
 .nut-infiniteloading .nut-infinite-bottom-tips-icons {
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 .nut-infiniteloading-primary {
   background-color: var(--nutui-color-primary);
@@ -57,5 +57,5 @@
 [dir=rtl] .nut-infiniteloading .nut-infinite-bottom-tips-icons,
 .nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }

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

@@ -22,7 +22,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }
@@ -32,7 +32,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding-top: 6px;
+    padding-top: scale-px(6px);
     color: $infiniteloading-color;
     text-align: center;
 
@@ -43,7 +43,7 @@
       font-size: $font-size-xxs;
 
       &-icons {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
@@ -62,7 +62,7 @@
     &-tips {
       &-icons {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
     }
   }

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

@@ -26,14 +26,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
 }
 .nut-infiniteloading .nut-infinite-bottom {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding-top: 6px;
+  padding-top: scale-px(6px);
   color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help));
   text-align: center;
 }
@@ -44,7 +44,7 @@
   font-size: var(--nutui-font-text-mini);
 }
 .nut-infiniteloading .nut-infinite-bottom-tips-icons {
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 .nut-infiniteloading-primary {
   background-color: var(--nutui-color-primary, #ff6666);
@@ -57,5 +57,5 @@
 [dir=rtl] .nut-infiniteloading .nut-infinite-bottom-tips-icons,
 .nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }

package/dist/es/packages/input/input.js

@@ -191,9 +191,7 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         confirmType: confirmType,
         onBlur: handleBlur,
         onFocus: handleFocus,
-        onInput: handleInput,
-        ariaLabel: props.ariaLabel || // eslint-disable-next-line no-nested-ternary
-        (value ? undefined : placeholder === undefined ? locale.placeholder : placeholder)
+        onInput: handleInput
     })), /*#__PURE__*/ React.createElement(View, {
         style: {
             display: clearable && !readOnly && active && value.length > 0 ? 'flex' : 'none',
@@ -206,13 +204,8 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
                 setValue('');
                 onClear === null || onClear === void 0 ? void 0 : onClear('');
             }
-        },
-        ariaRole: "button",
-        ariaLabel: locale.clear || '清除'
-    }, clearIcon ? /*#__PURE__*/ React.cloneElement(clearIcon, {
-        ariaHidden: true
-    }) : /*#__PURE__*/ React.createElement(MaskClose, {
-        ariaHidden: true,
+        }
+    }, clearIcon || /*#__PURE__*/ React.createElement(MaskClose, {
         className: "nut-input-clear"
     })));
 });

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

@@ -16,12 +16,12 @@
 
   .nut-icon {
     color: $color-text-disabled;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
+    width: scale-px(14px);
+    height: scale-px(14px);
+    font-size: $font-size-base;
   }
   &-container {
-    height: 38px;
+    height: scale-px(38px);
     padding: $input-padding;
     background-color: $input-background-color;
     border-radius: $input-border-radius;

package/dist/es/packages/input/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,31 +19,31 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
 }
 .nut-input .nut-input-native .weui-input::placeholder, .nut-input-placeholder {
   color: rgb(117, 117, 117);
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(14px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-input-container {
-  height: 38px;
-  padding: var(--nutui-input-padding, 12px);
+  height: calc(38px * var(--nut-scale-f, 1));
+  padding: var(--nutui-input-padding, calc(12px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff));
-  border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6px));
+  border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
   border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-input-native {
   flex: 1;
   color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   padding: 0;
   border: 0;
   outline: 0 none;

package/dist/es/packages/input/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,31 +19,31 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
 }
 .nut-input .nut-input-native .weui-input::placeholder, .nut-input-placeholder {
   color: rgb(117, 117, 117);
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(14px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-input-container {
-  height: 38px;
-  padding: var(--nutui-input-padding, 12px);
+  height: calc(38px * var(--nut-scale-f, 1));
+  padding: var(--nutui-input-padding, calc(12px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff));
-  border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6px));
+  border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
   border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-input-native {
   flex: 1;
   color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   padding: 0;
   border: 0;
   outline: 0 none;

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

@@ -16,12 +16,12 @@
 
   .nut-icon {
     color: $color-text-disabled;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
+    width: scale-px(14px);
+    height: scale-px(14px);
+    font-size: $font-size-base;
   }
   &-container {
-    height: 38px;
+    height: scale-px(38px);
     padding: $input-padding;
     background-color: $input-background-color;
     border-radius: $input-border-radius;

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

@@ -18,12 +18,12 @@
 }
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled);
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-input-container {
-  height: 38px;
+  height: scale-px(38px);
   padding: var(--nutui-input-padding, 8px 12px);
   background-color: var(--nutui-input-background-color, #ffffff);
   border-radius: var(--nutui-input-border-radius, var(--nutui-radius-xs));

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

@@ -16,12 +16,12 @@
 
   .nut-icon {
     color: $color-text-disabled;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
+    width: scale-px(14px);
+    height: scale-px(14px);
+    font-size: $font-size-base;
   }
   &-container {
-    height: 38px;
+    height: scale-px(38px);
     padding: $input-padding;
     background-color: $input-background-color;
     border-radius: $input-border-radius;

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

@@ -18,12 +18,12 @@
 }
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled);
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-input-container {
-  height: 38px;
+  height: scale-px(38px);
   padding: var(--nutui-input-padding, 8px 12px);
   background-color: var(--nutui-input-background-color, #ffffff);
   border-radius: var(--nutui-input-border-radius, var(--nutui-radius-xs));

package/dist/es/packages/inputnumber/inputnumber.js

@@ -226,9 +226,10 @@ export var InputNumber = function(props) {
         className: "".concat(classPrefix, "-minus"),
         onClick: handleReduce
     }, /*#__PURE__*/ React.createElement(Minus, {
-        size: 10,
         className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
-    })), /*#__PURE__*/ React.createElement("input", {
+    })), /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-divider")
+    }), /*#__PURE__*/ React.createElement("input", {
         className: classNames("".concat(classPrefix, "-input"), _define_property({}, "".concat(classPrefix, "-input-disabled"), disabled)),
         type: formatter ? 'text' : type,
         ref: inputRef,
@@ -239,11 +240,12 @@ export var InputNumber = function(props) {
         onInput: handleInputChange,
         onBlur: handleBlur,
         onFocus: handleFocus
+    }), /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-divider")
     }), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-add"),
         onClick: handlePlus
     }, /*#__PURE__*/ React.createElement(Plus, {
-        size: 10,
         className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
     })));
 };

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

@@ -6,12 +6,12 @@
   display: inline-flex;
   /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+    2 * #{$inputnumber-divider-width} + 2 * #{$inputnumber-button-width} +
       #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
-  background-color: $color-background;
+  background-color: $inputnumber-input-background-color;
   border-radius: $inputnumber-input-border-radius;
   overflow: hidden;
   &-minus,
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      --nut-icon-width: 10px;
-      --nut-icon-height: 10px;
+      width: scale-px(10px);
+      height: scale-px(10px);
     }
   }
 
@@ -38,20 +38,26 @@
     }
   }
 
+  &-divider {
+    width: $inputnumber-divider-width;
+    align-self: stretch;
+    background-color: $color-background-overlay;
+  }
+
   &-input {
     display: flex;
     justify-content: center;
     align-items: center;
     width: $inputnumber-input-width;
-    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
+    font-size: $inputnumber-input-font-size;
+    font-family: $inputnumber-input-font-family;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    margin-left: $inputnumber-input-margin;
-    margin-right: $inputnumber-input-margin;
     color: $color-text;
     background-color: $inputnumber-input-background-color;
+    padding: 0;
     &-disabled {
       color: $color-text-disabled;
     }
@@ -66,12 +72,12 @@
   }
 
   &-icon-minus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 
   &-icon-plus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 }