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

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

@@ -63,7 +63,7 @@
   margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
   margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -84,31 +84,31 @@
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help);
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: scale-px(10px);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: scale-px(32px);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 scale-px(10px);
   background-color: var(--nutui-gray-2, #f8f8f8);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: scale-px(2px);
+  height: scale-px(24px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: scale-px(2px) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -143,7 +143,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: var(--nutui-color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -216,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

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

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
 
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
 
@@ -132,7 +132,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
 
@@ -234,7 +234,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .close {

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

@@ -63,7 +63,7 @@
   margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
   margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -84,31 +84,31 @@
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help);
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: scale-px(10px);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: scale-px(32px);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 scale-px(10px);
   background-color: var(--nutui-gray-2, #f0f0f0);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: scale-px(2px);
+  height: scale-px(24px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: scale-px(2px) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -143,7 +143,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: var(--nutui-color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -216,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

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

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
 
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
 
@@ -132,7 +132,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
 
@@ -234,7 +234,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .close {

package/dist/es/packages/uploader/uploader.js

@@ -99,22 +99,24 @@ var InternalUploader = function(props, ref) {
     ]);
     useImperativeHandle(ref, function() {
         return {
-            submit: /*#__PURE__*/ _async_to_generator(function() {
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            return [
-                                4,
-                                uploadAction(uploadQueue)
-                            ];
-                        case 1:
-                            _state.sent();
-                            return [
-                                2
-                            ];
-                    }
-                });
-            }),
+            submit: function() {
+                return _async_to_generator(function() {
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                return [
+                                    4,
+                                    uploadAction(uploadQueue)
+                                ];
+                            case 1:
+                                _state.sent();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            },
             clear: function() {
                 clearUploadQueue();
             }
@@ -171,8 +173,8 @@ var InternalUploader = function(props, ref) {
             }
         });
     };
-    var fileChange = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(event) {
+    var fileChange = function(event) {
+        return _async_to_generator(function() {
             var $el, files, _files, filesArr, tasks;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -258,13 +260,10 @@ var InternalUploader = function(props, ref) {
                         ];
                 }
             });
-        });
-        return function fileChange(event) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    var uploadAction = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(tasks) {
+        })();
+    };
+    var uploadAction = function(tasks) {
+        return _async_to_generator(function() {
             var taskIds;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -283,8 +282,8 @@ var InternalUploader = function(props, ref) {
                         }));
                         return [
                             4,
-                            Promise.all(tasks.map(/*#__PURE__*/ function() {
-                                var _ref = _async_to_generator(function(currentTask, index) {
+                            Promise.all(tasks.map(function(currentTask, index) {
+                                return _async_to_generator(function() {
                                     var result, list, e, list1;
                                     return _ts_generator(this, function(_state) {
                                         switch(_state.label){
@@ -331,11 +330,8 @@ var InternalUploader = function(props, ref) {
                                                 ];
                                         }
                                     });
-                                });
-                                return function(currentTask, index) {
-                                    return _ref.apply(this, arguments);
-                                };
-                            }())).catch(function(errs) {
+                                })();
+                            })).catch(function(errs) {
                                 return console.error(errs);
                             })
                         ];
@@ -346,11 +342,8 @@ var InternalUploader = function(props, ref) {
                         ];
                 }
             });
-        });
-        return function uploadAction(tasks) {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var handleItemClick = function(file, index) {
         onFileItemClick === null || onFileItemClick === void 0 ? void 0 : onFileItemClick(file, index);
     };

package/dist/es/packages/video/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/video/video.d.ts

@@ -4,4 +4,4 @@ export type VideoRef = {
     pause: () => void;
     play: () => void;
 };
-export declare const Video: React.ForwardRefExoticComponent<Omit<Partial<WebVideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onPause" | "onPlay">, "ref"> & React.RefAttributes<VideoRef>>;
+export declare const Video: React.ForwardRefExoticComponent<Omit<Partial<WebVideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause">, "ref"> & React.RefAttributes<VideoRef>>;

package/dist/es/packages/virtuallist/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 */
@@ -10,8 +20,8 @@
   float: left;
   color: var(--nutui-color-title, #1a1a1a);
   background: var(--nutui-color-background-overlay, #ffffff);
-  padding: 10px;
-  margin-right: 20px;
+  padding: calc(10px * var(--nut-scale-f, 1));
+  margin-right: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +34,12 @@
   display: block;
   color: var(--nutui-color-title, #1a1a1a);
   background: var(--nutui-color-background-overlay, #ffffff);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: calc(7px * var(--nut-scale-f, 1));
+  box-shadow: 0 calc(1px * var(--nut-scale-f, 1)) calc(6px * var(--nut-scale-f, 1)) 0 rgb(237, 238, 241);
+  margin-top: calc(20px * var(--nut-scale-f, 1));
+  padding: calc(14px * var(--nut-scale-f, 1)) calc(15px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(18px * var(--nut-scale-f, 1));
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -61,7 +71,7 @@
 }
 .nut-virtuallist-item {
   overflow: hidden;
-  margin: var(--nutui-list-item-margin, 0 0 10px 0);
+  margin: var(--nutui-list-item-margin, 0 0 calc(10px * var(--nut-scale-f, 1)) 0);
 }
 
 [dir=rtl] .nut-horizontal-items,
@@ -72,5 +82,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: calc(20px * var(--nut-scale-f, 1));
 }

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

@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: $font-size-m;
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }

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

@@ -10,8 +10,8 @@
   float: left;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  padding: 10px;
-  margin-right: 20px;
+  padding: scale-px(10px);
+  margin-right: scale-px(20px);
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +24,12 @@
   display: block;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: scale-px(7px);
+  box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgb(237, 238, 241);
+  margin-top: scale-px(20px);
+  padding: scale-px(14px) scale-px(15px);
+  font-size: var(--nutui-font-size-m, var(--nutui-font-text-small));
+  line-height: scale-px(18px);
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -72,5 +72,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: scale-px(20px);
 }

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

@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: $font-size-m;
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }

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

@@ -10,8 +10,8 @@
   float: left;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  padding: 10px;
-  margin-right: 20px;
+  padding: scale-px(10px);
+  margin-right: scale-px(20px);
 }
 .nut-horizontal-items:after {
   content: "";
@@ -24,12 +24,12 @@
   display: block;
   color: var(--nutui-color-title);
   background: var(--nutui-color-surface-2);
-  border-radius: 7px;
-  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
-  margin-top: 20px;
-  padding: 14px 15px;
-  font-size: 13px;
-  line-height: 18px;
+  border-radius: scale-px(7px);
+  box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgb(237, 238, 241);
+  margin-top: scale-px(20px);
+  padding: scale-px(14px) scale-px(15px);
+  font-size: var(--nutui-font-size-m, var(--nutui-font-text-small));
+  line-height: scale-px(18px);
   font-family: PingFangSC;
   font-weight: 500;
 }
@@ -72,5 +72,5 @@
 .nut-rtl .nut-horizontal-items li {
   float: right;
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: scale-px(20px);
 }