@hi-ui/form 4.0.0-beta.19 → 4.0.0-beta.21

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 (11) hide show
  1. package/lib/cjs/Form.js +1 -1
  2. package/lib/cjs/FormField.js +4 -0
  3. package/lib/cjs/styles/index.scss.js +1 -1
  4. package/lib/esm/Form.js +1 -1
  5. package/lib/esm/FormField.js +4 -0
  6. package/lib/esm/styles/index.scss.js +1 -1
  7. package/lib/types/FormField.d.ts +3 -2
  8. package/lib/types/FormList.d.ts +2 -1
  9. package/lib/types/types.d.ts +24 -2
  10. package/lib/types/use-form-field.d.ts +1 -1
  11. package/package.json +8 -8
package/lib/cjs/Form.js CHANGED
@@ -116,7 +116,7 @@ var formExtends = function formExtends(model) {
116
116
  // @ts-ignore
117
117
  FORM_REGISTER_TABLE[model.name] = model;
118
118
  } else {
119
- env.invariant(true, 'The name should be unique string and not empty.');
119
+ env.invariant(false, 'The name should be unique string and not empty.');
120
120
  }
121
121
  };
122
122
 
package/lib/cjs/FormField.js CHANGED
@@ -34,6 +34,10 @@ var FormField = function FormField(props) {
34
34
  return props.render(fieldProps);
35
35
  }
36
36
 
37
+ if (typeAssertion.isFunction(props.children)) {
38
+ return props.children(fieldProps);
39
+ }
40
+
37
41
  if (! /*#__PURE__*/React.isValidElement(props.children)) {
38
42
  console.warn('FormField must pass a valid element as children.');
39
43
  return (_a = props.children) !== null && _a !== void 0 ? _a : null;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: var(--hi-v4-height-normal, 32px); }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-right: 0;\n margin-bottom: var(--hi-v4-spacing-12, 24px); }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right: var(--hi-v4-spacing-6, 12px);\n min-height: var(--hi-v4-height-normal, 32px);\n line-height: var(--hi-v4-height-normal, 32px); }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n height: 22px;\n min-height: 22px;\n line-height: 22px;\n padding-right: 0;\n margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n margin-right: var(--hi-v4-spacing-2, 4px);\n content: '*';\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-form-label--placement-top {\n text-align: left;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin-bottom: var(--hi-v4-spacing-12, 24px);\n padding-right: 0; }\n.hi-v4-form-label__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n vertical-align: top;\n min-height: var(--hi-v4-height-normal, 32px);\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-form-label__control {\n min-width: 1px; }\n.hi-v4-form-message {\n display: block;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n min-height: 24px;\n padding: 2px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n line-height: 20px;\n -webkit-transform: translateY(-10%);\n transform: translateY(-10%);\n opacity: 0;\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-form-message--show {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0); }\n.hi-v4-form-item {\n position: relative; }\n.hi-v4-form-item__message {\n position: absolute; }\n";
15
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: var(--hi-v4-height-8, 32px); }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: var(--hi-v4-text-size-md, 0.875rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-right: 0;\n margin-bottom: var(--hi-v4-spacing-12, 24px); }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right: var(--hi-v4-spacing-6, 12px);\n min-height: var(--hi-v4-height-8, 32px);\n line-height: var(--hi-v4-height-8, 32px); }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n height: 22px;\n min-height: 22px;\n line-height: 22px;\n padding-right: 0;\n margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n margin-right: var(--hi-v4-spacing-2, 4px);\n content: '*';\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-form-label--placement-top {\n text-align: left;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin-bottom: var(--hi-v4-spacing-12, 24px);\n padding-right: 0; }\n.hi-v4-form-label__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n vertical-align: top;\n min-height: var(--hi-v4-height-8, 32px);\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-form-label__control {\n min-width: 1px; }\n.hi-v4-form-message {\n display: block;\n font-size: var(--hi-v4-text-size-md, 0.875rem);\n min-height: 24px;\n padding: 2px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n line-height: 20px;\n -webkit-transform: translateY(-10%);\n transform: translateY(-10%);\n opacity: 0;\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-form-message--show {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0); }\n.hi-v4-form-item {\n position: relative; }\n.hi-v4-form-item__message {\n position: absolute; }\n";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/Form.js CHANGED
@@ -94,7 +94,7 @@ var formExtends = function formExtends(model) {
94
94
  // @ts-ignore
95
95
  FORM_REGISTER_TABLE[model.name] = model;
96
96
  } else {
97
- invariant(true, 'The name should be unique string and not empty.');
97
+ invariant(false, 'The name should be unique string and not empty.');
98
98
  }
99
99
  };
100
100
 
package/lib/esm/FormField.js CHANGED
@@ -24,6 +24,10 @@ var FormField = function FormField(props) {
24
24
  return props.render(fieldProps);
25
25
  }
26
26
 
27
+ if (isFunction(props.children)) {
28
+ return props.children(fieldProps);
29
+ }
30
+
27
31
  if (! /*#__PURE__*/isValidElement(props.children)) {
28
32
  console.warn('FormField must pass a valid element as children.');
29
33
  return (_a = props.children) !== null && _a !== void 0 ? _a : null;
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: var(--hi-v4-height-normal, 32px); }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-right: 0;\n margin-bottom: var(--hi-v4-spacing-12, 24px); }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right: var(--hi-v4-spacing-6, 12px);\n min-height: var(--hi-v4-height-normal, 32px);\n line-height: var(--hi-v4-height-normal, 32px); }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n height: 22px;\n min-height: 22px;\n line-height: 22px;\n padding-right: 0;\n margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n margin-right: var(--hi-v4-spacing-2, 4px);\n content: '*';\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-form-label--placement-top {\n text-align: left;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin-bottom: var(--hi-v4-spacing-12, 24px);\n padding-right: 0; }\n.hi-v4-form-label__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n vertical-align: top;\n min-height: var(--hi-v4-height-normal, 32px);\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-form-label__control {\n min-width: 1px; }\n.hi-v4-form-message {\n display: block;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n min-height: 24px;\n padding: 2px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n line-height: 20px;\n -webkit-transform: translateY(-10%);\n transform: translateY(-10%);\n opacity: 0;\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-form-message--show {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0); }\n.hi-v4-form-item {\n position: relative; }\n.hi-v4-form-item__message {\n position: absolute; }\n";
10
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n max-width: 100%;\n position: relative; }\n.hi-v4-form fieldset {\n margin: 0;\n padding: 0;\n border: 0; }\n.hi-v4-form fieldset + fieldset {\n margin-top: 16px; }\n.hi-v4-form legend {\n margin: 0 0 16px;\n color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n min-height: var(--hi-v4-height-8, 32px); }\n.hi-v4-form-label {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: var(--hi-v4-text-size-md, 0.875rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-right: 0;\n margin-bottom: var(--hi-v4-spacing-12, 24px); }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n vertical-align: top;\n color: var(--hi-v4-color-gray-800, #1f2937);\n overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n padding-right: var(--hi-v4-spacing-6, 12px);\n min-height: var(--hi-v4-height-8, 32px);\n line-height: var(--hi-v4-height-8, 32px); }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n height: 22px;\n min-height: 22px;\n line-height: 22px;\n padding-right: 0;\n margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n margin-right: var(--hi-v4-spacing-2, 4px);\n content: '*';\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-form-label--placement-top {\n text-align: left;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin-bottom: var(--hi-v4-spacing-12, 24px);\n padding-right: 0; }\n.hi-v4-form-label__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n vertical-align: top;\n min-height: var(--hi-v4-height-8, 32px);\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-form-label__control {\n min-width: 1px; }\n.hi-v4-form-message {\n display: block;\n font-size: var(--hi-v4-text-size-md, 0.875rem);\n min-height: 24px;\n padding: 2px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n line-height: 20px;\n -webkit-transform: translateY(-10%);\n transform: translateY(-10%);\n opacity: 0;\n color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-form-message--show {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0); }\n.hi-v4-form-item {\n position: relative; }\n.hi-v4-form-item__message {\n position: absolute; }\n";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
package/lib/types/FormField.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { UseFormFieldProps } from './use-form-field';
3
+ import { FormFieldRenderFunc } from './types';
3
4
  /**
4
5
  * TODO: What is FormField
5
6
  */
@@ -8,9 +9,9 @@ export interface FormFieldProps extends UseFormFieldProps {
8
9
  /**
9
10
  * 表单控件
10
11
  */
11
- children?: React.ReactElement;
12
+ children?: React.ReactElement | FormFieldRenderFunc;
12
13
  /**
13
14
  * 支持表单控件 render 渲染
14
15
  */
15
- render?: (props: Record<string, any>) => React.ReactElement;
16
+ render?: FormFieldRenderFunc;
16
17
  }
package/lib/types/FormList.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { FormListChildrenAction } from './types';
2
3
  /**
3
4
  * TODO: What is FormList
4
5
  */
@@ -7,7 +8,7 @@ export interface FormListProps {
7
8
  /**
8
9
  * 表单控件
9
10
  */
10
- children?: (fields: any[], action: any) => React.ReactElement | null;
11
+ children?: (fields: any[], action: FormListChildrenAction) => React.ReactElement | null;
11
12
  /**
12
13
  * 列表名称
13
14
  */
package/lib/types/types.d.ts CHANGED
@@ -76,8 +76,7 @@ export declare type FormValidateFunction<T = any> = (value: T) => string | Promi
76
76
  export interface FormFieldCollection<T> {
77
77
  validate: (value: any) => Promise<T>;
78
78
  }
79
- export interface FormRuleModel extends RuleItem {
80
- trigger?: string | string[];
79
+ export interface FormRuleModel extends RuleItem, Record<string, any> {
81
80
  }
82
81
  export declare type FormRuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email' | 'any';
83
82
  export interface FormHelpers<T = any> {
@@ -133,3 +132,26 @@ export interface FormHelpers<T = any> {
133
132
  export declare type FormFieldPath = (string | number)[] | string | number;
134
133
  export declare type FormErrorMessage = string;
135
134
  export declare type FormRules = Record<string, FormRuleModel[]>;
135
+ export declare type FormFieldRenderFunc = (props: Record<string, any>) => React.ReactElement;
136
+ export interface FormListChildrenAction {
137
+ /**
138
+ * 在尾部追加一个 FormItems
139
+ */
140
+ add: (value: any) => void;
141
+ /**
142
+ * 移除指定下标的 FormItems
143
+ */
144
+ remove: (index: number) => void;
145
+ /**
146
+ * 交换指定下标的 FormItems
147
+ */
148
+ swap: (aIndex: number, bIndex: number) => void;
149
+ /**
150
+ * 在指定下标前插入 FormItems
151
+ */
152
+ insertBefore: (index: number, value: any) => void;
153
+ /**
154
+ * 移动指定下标的 FormItems 到另一个下标位置
155
+ */
156
+ move: (fromIndex: number, toIndex: number) => void;
157
+ }
package/lib/types/use-form-field.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormFieldPath, FormRuleModel, FormRuleType } from './types';
2
2
  export declare const useFormField: <Values = any>(props: UseFormFieldProps<Values>) => any;
3
- export interface UseFormFieldProps<T = Record<string, any>> {
3
+ export interface UseFormFieldProps<T = any> {
4
4
  /**
5
5
  * 字段名，支持数组
6
6
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/form",
3
- "version": "4.0.0-beta.19",
3
+ "version": "4.0.0-beta.21",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,14 +44,14 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hi-ui/array-utils": "^4.0.0-beta.6",
47
- "@hi-ui/button": "^4.0.0-beta.8",
47
+ "@hi-ui/button": "^4.0.0-beta.9",
48
48
  "@hi-ui/classname": "^4.0.0-beta.0",
49
- "@hi-ui/core-css": "^4.0.0-beta.3",
50
- "@hi-ui/dom-utils": "^4.0.0-beta.3",
49
+ "@hi-ui/core-css": "^4.0.0-beta.4",
50
+ "@hi-ui/dom-utils": "^4.0.0-beta.4",
51
51
  "@hi-ui/env": "^4.0.0-beta.0",
52
- "@hi-ui/func-utils": "^4.0.0-beta.7",
53
- "@hi-ui/locale-context": "^4.0.0-beta.11",
54
- "@hi-ui/object-utils": "^4.0.0-beta.6",
52
+ "@hi-ui/func-utils": "^4.0.0-beta.8",
53
+ "@hi-ui/locale-context": "^4.0.0-beta.13",
54
+ "@hi-ui/object-utils": "^4.0.0-beta.7",
55
55
  "@hi-ui/type-assertion": "^4.0.0-beta.3",
56
56
  "@hi-ui/use-latest": "^4.0.0-beta.3",
57
57
  "async-validator": "^4.0.7"
@@ -65,5 +65,5 @@
65
65
  "react": "^17.0.1",
66
66
  "react-dom": "^17.0.1"
67
67
  },
68
- "gitHead": "74866713c01181f692085f4935fc36d9e719506b"
68
+ "gitHead": "b97da7b6da8a53833e194290558af1c460f5de16"
69
69
  }