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

package/dist/cjs/packages/form/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/cjs/packages/form/useform.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    SECRET: function() {
+    get SECRET () {
         return SECRET;
     },
-    useForm: function() {
+    get useForm () {
         return useForm;
     },
-    useWatch: function() {
+    get useWatch () {
         return useWatch;
     }
 });
@@ -40,7 +40,6 @@ var SECRET = 'NUT_FORM_INTERNAL';
         var _this = this;
         var _this1 = this;
         (0, _class_call_check._)(this, FormStore);
-        var _this2 = this;
         // 初始化数据
         (0, _define_property._)(this, "initialValues", {});
         (0, _define_property._)(this, "updateList", []);
@@ -128,8 +127,8 @@ var SECRET = 'NUT_FORM_INTERNAL';
         (0, _define_property._)(this, "setCallback", function(callback) {
             _this.callbacks = (0, _object_spread._)({}, _this.callbacks, callback);
         });
-        (0, _define_property._)(this, "validateEntities", /*#__PURE__*/ function() {
-            var _ref = (0, _async_to_generator._)(function(entity, errs) {
+        (0, _define_property._)(this, "validateEntities", function(entity, errs) {
+            return (0, _async_to_generator._)(function() {
                 var _entity_props, name, _entity_props_rules, rules, descriptor, validator, _this_store, param, errors, _errs;
                 return (0, _ts_generator._)(this, function(_state) {
                     switch(_state.label){
@@ -164,7 +163,7 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             ]);
                             return [
                                 4,
-                                validator.validate((0, _define_property._)({}, name, (_this_store = _this2.store) === null || _this_store === void 0 ? void 0 : _this_store[name]))
+                                validator.validate((0, _define_property._)({}, name, (_this_store = this.store) === null || _this_store === void 0 ? void 0 : _this_store[name]))
                             ];
                         case 2:
                             _state.sent();
@@ -178,7 +177,7 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             if (errors) {
                                 ;
                                 (_errs = errs).push.apply(_errs, (0, _to_consumable_array._)(errors));
-                                _this2.errors[name] = errors;
+                                this.errors[name] = errors;
                             }
                             return [
                                 3,
@@ -186,7 +185,7 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             ];
                         case 4:
                             if (!errs || errs.length === 0) {
-                                _this2.errors[name] = [];
+                                this.errors[name] = [];
                             }
                             return [
                                 7
@@ -198,23 +197,21 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             ];
                     }
                 });
-            });
-            return function(entity, errs) {
-                return _ref.apply(this, arguments);
-            };
-        }());
-        (0, _define_property._)(this, "validateFields", /*#__PURE__*/ function() {
-            var _ref = (0, _async_to_generator._)(function(nameList) {
-                var filterEntities, errs;
+            }).call(_this);
+        });
+        (0, _define_property._)(this, "validateFields", function(nameList) {
+            return (0, _async_to_generator._)(function() {
+                var _this, filterEntities, errs;
                 return (0, _ts_generator._)(this, function(_state) {
                     switch(_state.label){
                         case 0:
+                            _this = this;
                             filterEntities = [];
                             // this.errors.length = 0
                             if (!nameList || nameList.length === 0) {
-                                filterEntities = _this2.fieldEntities;
+                                filterEntities = this.fieldEntities;
                             } else {
-                                filterEntities = _this2.fieldEntities.filter(function(param) {
+                                filterEntities = this.fieldEntities.filter(function(param) {
                                     var name = param.props.name;
                                     return nameList.includes(name);
                                 });
@@ -222,14 +219,14 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             errs = [];
                             return [
                                 4,
-                                Promise.all(filterEntities.map(/*#__PURE__*/ function() {
-                                    var _ref = (0, _async_to_generator._)(function(entity) {
+                                Promise.all(filterEntities.map(function(entity) {
+                                    return (0, _async_to_generator._)(function() {
                                         return (0, _ts_generator._)(this, function(_state) {
                                             switch(_state.label){
                                                 case 0:
                                                     return [
                                                         4,
-                                                        _this2.validateEntities(entity, errs)
+                                                        this.validateEntities(entity, errs)
                                                     ];
                                                 case 1:
                                                     _state.sent();
@@ -238,11 +235,8 @@ var SECRET = 'NUT_FORM_INTERNAL';
                                                     ];
                                             }
                                         });
-                                    });
-                                    return function(entity) {
-                                        return _ref.apply(this, arguments);
-                                    };
-                                }()))
+                                    }).call(_this);
+                                }))
                             ];
                         case 1:
                             _state.sent();
@@ -252,35 +246,34 @@ var SECRET = 'NUT_FORM_INTERNAL';
                             ];
                     }
                 });
-            });
-            return function(nameList) {
-                return _ref.apply(this, arguments);
-            };
-        }());
-        (0, _define_property._)(this, "submit", /*#__PURE__*/ (0, _async_to_generator._)(function() {
-            var errors, _this_callbacks_onFinish, _this_callbacks, _this_callbacks_onFinishFailed, _this_callbacks1;
-            return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            _this2.validateFields()
-                        ];
-                    case 1:
-                        errors = _state.sent();
-                        if (errors.length === 0) {
-                            ;
-                            (_this_callbacks_onFinish = (_this_callbacks = _this2.callbacks).onFinish) === null || _this_callbacks_onFinish === void 0 ? void 0 : _this_callbacks_onFinish.call(_this_callbacks, _this2.store);
-                        } else if (errors.length > 0) {
-                            ;
-                            (_this_callbacks_onFinishFailed = (_this_callbacks1 = _this2.callbacks).onFinishFailed) === null || _this_callbacks_onFinishFailed === void 0 ? void 0 : _this_callbacks_onFinishFailed.call(_this_callbacks1, _this2.store, errors);
-                        }
-                        return [
-                            2
-                        ];
-                }
-            });
-        }));
+            }).call(_this);
+        });
+        (0, _define_property._)(this, "submit", function() {
+            return (0, _async_to_generator._)(function() {
+                var errors, _this_callbacks_onFinish, _this_callbacks, _this_callbacks_onFinishFailed, _this_callbacks1;
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                this.validateFields()
+                            ];
+                        case 1:
+                            errors = _state.sent();
+                            if (errors.length === 0) {
+                                ;
+                                (_this_callbacks_onFinish = (_this_callbacks = this.callbacks).onFinish) === null || _this_callbacks_onFinish === void 0 ? void 0 : _this_callbacks_onFinish.call(_this_callbacks, this.store);
+                            } else if (errors.length > 0) {
+                                ;
+                                (_this_callbacks_onFinishFailed = (_this_callbacks1 = this.callbacks).onFinishFailed) === null || _this_callbacks_onFinishFailed === void 0 ? void 0 : _this_callbacks_onFinishFailed.call(_this_callbacks1, this.store, errors);
+                            }
+                            return [
+                                2
+                            ];
+                    }
+                });
+            }).call(_this);
+        });
         (0, _define_property._)(this, "resetFields", function(namePaths) {
             if (namePaths && namePaths.length) {
                 namePaths.forEach(function(path) {

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

@@ -23,14 +23,14 @@
       color: $form-item-required-color;
       margin-right: $form-item-required-margin-right;
       position: absolute;
-      left: -10px;
+      left: scale-px(-10px);
     }
 
     &-right-required {
       color: $form-item-required-color;
       margin-left: $form-item-required-margin-right;
       position: absolute;
-      right: -10px;
+      right: scale-px(-10px);
     }
   }
 
@@ -68,7 +68,7 @@
       }
 
       .nut-range-container {
-        min-height: 24px;
+        min-height: scale-px(24px);
       }
 
       .nut-textarea {
@@ -132,13 +132,13 @@
 
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: 24px;
+  padding-right: scale-px(24px);
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: 12px;
+  padding-left: scale-px(12px);
   white-space: nowrap;
 }
 
@@ -150,8 +150,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: 4px;
-  padding-right: 24px;
+  padding-bottom: scale-px(4px);
+  padding-right: scale-px(24px);
 }
 
 .nut-form-item-body-top {
@@ -163,25 +163,25 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: 12px;
+  padding-right: scale-px(12px);
 
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
+  // .required {
+  //   left: auto;
+  //   right: 0.1em;
+  // }
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-body,

package/dist/cjs/packages/formitem/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 */
@@ -13,10 +23,10 @@
 .nut-form-item-label {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: normal;
-  width: var(--nutui-form-item-label-width, 90px);
-  margin-right: var(--nutui-form-item-label-margin-right, 10px);
+  width: var(--nutui-form-item-label-width, calc(90px * var(--nut-scale-f, 1)));
+  margin-right: var(--nutui-form-item-label-margin-right, calc(10px * var(--nut-scale-f, 1)));
   flex: 0 0 auto;
   word-wrap: break-word;
   text-align: var(--nutui-form-item-label-text-align, left);
@@ -24,19 +34,19 @@
 }
 .nut-form-item-label-left-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
-  margin-right: var(--nutui-form-item-required-margin-right, 4px);
+  margin-right: var(--nutui-form-item-required-margin-right, calc(4px * var(--nut-scale-f, 1)));
   position: absolute;
-  left: -10px;
+  left: calc(-10px * var(--nut-scale-f, 1));
 }
 .nut-form-item-label-right-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
-  margin-left: var(--nutui-form-item-required-margin-right, 4px);
+  margin-left: var(--nutui-form-item-required-margin-right, calc(4px * var(--nut-scale-f, 1)));
   position: absolute;
-  right: -10px;
+  right: calc(-10px * var(--nut-scale-f, 1));
 }
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
-  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-form-item-body {
   flex: 1;
@@ -54,7 +64,7 @@
   height: auto;
 }
 .nut-form-item-body-slots .nut-input-text {
-  font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   text-align: var(--nutui-form-item-body-input-text-align, left);
   color: var(--nutui-color-title, #1a1a1a);
   width: 100%;
@@ -64,7 +74,7 @@
   background: transparent;
 }
 .nut-form-item-body-slots .nut-range-container {
-  min-height: 24px;
+  min-height: calc(24px * var(--nut-scale-f, 1));
 }
 .nut-form-item-body-slots .nut-textarea {
   padding: 0;
@@ -75,7 +85,7 @@
 }
 .nut-form-item-body-tips {
   text-align: var(--nutui-form-item-tip-text-align, left);
-  font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23));
 }
 
@@ -83,12 +93,12 @@
 .nut-rtl .nut-form-item-label {
   text-align: right;
   margin-right: 0;
-  margin-left: var(--nutui-form-item-label-margin-right, 10px);
+  margin-left: var(--nutui-form-item-label-margin-right, calc(10px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-form-item-label .required::before,
 .nut-rtl .nut-form-item-label .required::before {
   margin-right: 0;
-  margin-left: var(--nutui-form-item-required-margin-right, 4px);
+  margin-left: var(--nutui-form-item-required-margin-right, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-form-item-body-slots,
 .nut-rtl .nut-form-item-body-slots {
@@ -116,13 +126,13 @@
 /* position */
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: 24px;
+  padding-right: calc(24px * var(--nut-scale-f, 1));
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: 12px;
+  padding-left: calc(12px * var(--nut-scale-f, 1));
   white-space: nowrap;
 }
 
@@ -134,8 +144,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: 4px;
-  padding-right: 24px;
+  padding-bottom: calc(4px * var(--nut-scale-f, 1));
+  padding-right: calc(24px * var(--nut-scale-f, 1));
 }
 
 .nut-form-item-body-top {
@@ -147,25 +157,20 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: calc(24px * var(--nut-scale-f, 1));
 }
 
 [dir=rtl] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: 12px;
-}
-[dir=rtl] .form-layout-left .nut-form-item-label .required,
-.nut-rtl .form-layout-left .nut-form-item-label .required {
-  left: auto;
-  right: 0.1em;
+  padding-right: calc(12px * var(--nut-scale-f, 1));
 }
 
 [dir=rtl] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: calc(24px * var(--nut-scale-f, 1));
 }
 
 [dir=rtl] .form-layout-top .nut-form-item-body,

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

@@ -23,14 +23,14 @@
       color: $form-item-required-color;
       margin-right: $form-item-required-margin-right;
       position: absolute;
-      left: -10px;
+      left: scale-px(-10px);
     }
 
     &-right-required {
       color: $form-item-required-color;
       margin-left: $form-item-required-margin-right;
       position: absolute;
-      right: -10px;
+      right: scale-px(-10px);
     }
   }
 
@@ -68,7 +68,7 @@
       }
 
       .nut-range-container {
-        min-height: 24px;
+        min-height: scale-px(24px);
       }
 
       .nut-textarea {
@@ -132,13 +132,13 @@
 
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: 24px;
+  padding-right: scale-px(24px);
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: 12px;
+  padding-left: scale-px(12px);
   white-space: nowrap;
 }
 
@@ -150,8 +150,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: 4px;
-  padding-right: 24px;
+  padding-bottom: scale-px(4px);
+  padding-right: scale-px(24px);
 }
 
 .nut-form-item-body-top {
@@ -163,25 +163,25 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: 12px;
+  padding-right: scale-px(12px);
 
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
+  // .required {
+  //   left: auto;
+  //   right: 0.1em;
+  // }
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-body,

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

@@ -26,13 +26,13 @@
   color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
   position: absolute;
-  left: -10px;
+  left: scale-px(-10px);
 }
 .nut-form-item-label-right-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
   margin-left: var(--nutui-form-item-required-margin-right, 4px);
   position: absolute;
-  right: -10px;
+  right: scale-px(-10px);
 }
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
@@ -64,7 +64,7 @@
   background: transparent;
 }
 .nut-form-item-body-slots .nut-range-container {
-  min-height: 24px;
+  min-height: scale-px(24px);
 }
 .nut-form-item-body-slots .nut-textarea {
   padding: 0;
@@ -116,13 +116,13 @@
 /* position */
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: 24px;
+  padding-right: scale-px(24px);
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: 12px;
+  padding-left: scale-px(12px);
   white-space: nowrap;
 }
 
@@ -134,8 +134,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: 4px;
-  padding-right: 24px;
+  padding-bottom: scale-px(4px);
+  padding-right: scale-px(24px);
 }
 
 .nut-form-item-body-top {
@@ -147,25 +147,20 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir=rtl] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: 12px;
-}
-[dir=rtl] .form-layout-left .nut-form-item-label .required,
-.nut-rtl .form-layout-left .nut-form-item-label .required {
-  left: auto;
-  right: 0.1em;
+  padding-right: scale-px(12px);
 }
 
 [dir=rtl] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir=rtl] .form-layout-top .nut-form-item-body,