npm - @nutui/nutui-react - Versions diffs - 3.0.20 → 3.1.0-beta.1 - Mend

@nutui/nutui-react 3.0.20 → 3.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1106) hide show

package/dist/cjs/packages/indicator/style-jmapp/style.css CHANGED Viewed

@@ -10,7 +10,7 @@
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: scale-px(21px);
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
@@ -23,7 +23,7 @@
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -32,27 +32,27 @@
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
+  width: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: scale-px(21px);
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
+  width: scale-px(3px);
+  height: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-line {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -100,7 +100,7 @@
 }
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.4);
 }
@@ -111,11 +111,11 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: 0px;
+  margin: 0;
   margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
-  margin-top: 0px;
+  margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
   width: var(--nutui-indicator-dot-size, 6px);
@@ -129,5 +129,5 @@
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
-  margin-left: 0px;
+  margin-left: 0;
 }

package/dist/cjs/packages/indicator/style-jrkf/indicator.scss CHANGED Viewed

@@ -6,7 +6,7 @@
   align-items: center;
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
     &-0 {
-      margin-left: 0px;
+      margin-left: 0;
     }
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: 0;
       margin-top: $indicator-dot-margin;
       &-0 {
-        margin-top: 0px;
+        margin-top: 0;
       }
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 }

package/dist/cjs/packages/indicator/style-jrkf/style.css CHANGED Viewed

@@ -10,7 +10,7 @@
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: scale-px(21px);
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
@@ -23,7 +23,7 @@
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -32,27 +32,27 @@
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
+  width: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: scale-px(21px);
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
+  width: scale-px(3px);
+  height: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-line {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -100,7 +100,7 @@
 }
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.4);
 }
@@ -111,11 +111,11 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: 0px;
+  margin: 0;
   margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
-  margin-top: 0px;
+  margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
   width: var(--nutui-indicator-dot-size, 6px);
@@ -129,5 +129,5 @@
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
-  margin-left: 0px;
+  margin-left: 0;
 }

package/dist/cjs/packages/infiniteloading/style/infiniteloading.scss CHANGED Viewed

@@ -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/cjs/packages/infiniteloading/style/style.css CHANGED Viewed

@@ -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/cjs/packages/infiniteloading/style-jmapp/infiniteloading.scss CHANGED Viewed

@@ -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/cjs/packages/infiniteloading/style-jmapp/style.css CHANGED Viewed

@@ -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/cjs/packages/infiniteloading/style-jrkf/infiniteloading.scss CHANGED Viewed

@@ -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/cjs/packages/infiniteloading/style-jrkf/style.css CHANGED Viewed

@@ -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/cjs/packages/input/input.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { WebInputProps } from "../../types";
-export declare const Input: React.ForwardRefExoticComponent<Partial<WebInputProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "onFocus" | "onBlur" | "onChange"> & React.RefAttributes<unknown>>;
+export declare const Input: React.ForwardRefExoticComponent<Partial<WebInputProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "onChange" | "onBlur" | "onFocus"> & React.RefAttributes<unknown>>;

package/dist/cjs/packages/input/style/input.scss CHANGED Viewed

@@ -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/cjs/packages/input/style/style.css CHANGED Viewed

@@ -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/cjs/packages/input/style-jmapp/input.scss CHANGED Viewed

@@ -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/cjs/packages/input/style-jmapp/style.css CHANGED Viewed

@@ -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/cjs/packages/input/style-jrkf/input.scss CHANGED Viewed

@@ -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/cjs/packages/input/style-jrkf/style.css CHANGED Viewed

@@ -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/cjs/packages/inputnumber/style/inputnumber.scss CHANGED Viewed

@@ -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);
     }
   }
@@ -66,12 +66,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);
   }
 }