@hi-ui/form 5.0.0-experimental.0 → 5.0.0-experimental.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 (12) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/cjs/Form.js +38 -6
  3. package/lib/cjs/FormItem.js +41 -3
  4. package/lib/cjs/FormLabel.js +12 -10
  5. package/lib/esm/Form.js +38 -6
  6. package/lib/esm/FormItem.js +41 -3
  7. package/lib/esm/FormLabel.js +12 -10
  8. package/lib/types/Form.d.ts +6 -1
  9. package/lib/types/FormItem.d.ts +6 -1
  10. package/lib/types/FormLabel.d.ts +20 -0
  11. package/lib/types/context.d.ts +13 -0
  12. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @hi-ui/form
2
2
 
3
+ ## 5.0.0-experimental.1
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [eb17c4697]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [c407744fe]
15
+ - @hi-ui/core@5.0.0-experimental.1
16
+ - @hi-ui/button@5.0.0-experimental.1
17
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
18
+
3
19
  ## 5.0.0-experimental.0
4
20
 
5
21
  ### Major Changes
package/lib/cjs/Form.js CHANGED
@@ -20,6 +20,7 @@ var env = require('@hi-ui/env');
20
20
  var context = require('./context.js');
21
21
  var useForm = require('./use-form.js');
22
22
  var core = require('@hi-ui/core');
23
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
23
24
  function _interopDefaultCompat(e) {
24
25
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
25
26
  'default': e
@@ -39,6 +40,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
39
40
  _a$role = _a.role,
40
41
  role = _a$role === void 0 ? _role : _a$role,
41
42
  className = _a.className,
43
+ style = _a.style,
44
+ classNamesProp = _a.classNames,
45
+ stylesProp = _a.styles,
42
46
  children = _a.children,
43
47
  innerRef = _a.innerRef,
44
48
  labelWidth = _a.labelWidth,
@@ -54,10 +58,29 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
54
58
  _a$showValidateMessag = _a.showValidateMessage,
55
59
  showValidateMessage = _a$showValidateMessag === void 0 ? true : _a$showValidateMessag,
56
60
  sizeProp = _a.size,
57
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
61
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
58
62
  var _useGlobalContext = core.useGlobalContext(),
59
- globalSize = _useGlobalContext.size;
63
+ globalSize = _useGlobalContext.size,
64
+ formConfig = _useGlobalContext.form;
60
65
  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize;
66
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
67
+ classNamesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.classNames, classNamesProp],
68
+ stylesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.styles, stylesProp],
69
+ info: {
70
+ props: Object.assign(Object.assign({}, rest), {
71
+ labelWidth: labelWidth,
72
+ labelPlacement: labelPlacement,
73
+ placement: placement,
74
+ contentPosition: contentPosition,
75
+ showRequiredOnValidateRequired: showRequiredOnValidateRequired,
76
+ showColon: showColon,
77
+ showValidateMessage: showValidateMessage,
78
+ size: size
79
+ })
80
+ }
81
+ }),
82
+ classNames = _useMergeSemantic.classNames,
83
+ styles = _useMergeSemantic.styles;
61
84
  var formContext = useForm.useForm(Object.assign(Object.assign({}, rest), {
62
85
  size: size
63
86
  }));
@@ -87,10 +110,18 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
87
110
  showRequiredOnValidateRequired: showRequiredOnValidateRequired,
88
111
  showValidateMessage: showValidateMessage
89
112
  }, formContext), {
90
- prefixCls: prefixCls
113
+ prefixCls: prefixCls,
114
+ formSemanticClassNames: (classNames === null || classNames === void 0 ? void 0 : classNames.label) != null || (classNames === null || classNames === void 0 ? void 0 : classNames.content) != null ? {
115
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
116
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
117
+ } : undefined,
118
+ formSemanticStyles: (styles === null || styles === void 0 ? void 0 : styles.label) != null || (styles === null || styles === void 0 ? void 0 : styles.content) != null ? {
119
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
120
+ content: styles === null || styles === void 0 ? void 0 : styles.content
121
+ } : undefined
91
122
  });
92
- }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls]);
93
- var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
123
+ }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.content, styles === null || styles === void 0 ? void 0 : styles.label, styles === null || styles === void 0 ? void 0 : styles.content]);
124
+ var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, classNames === null || classNames === void 0 ? void 0 : classNames.root);
94
125
  return /*#__PURE__*/(
95
126
  // @ts-ignore
96
127
  React__default["default"].createElement(context.FormProvider, {
@@ -98,7 +129,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
98
129
  }, /*#__PURE__*/React__default["default"].createElement("form", Object.assign({
99
130
  ref: ref,
100
131
  role: role,
101
- className: cls
132
+ className: cls,
133
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
102
134
  }, getRootProps()), children))
103
135
  );
104
136
  });
package/lib/cjs/FormItem.js CHANGED
@@ -23,6 +23,8 @@ var FormField = require('./FormField.js');
23
23
  var context = require('./context.js');
24
24
  var classname = require('@hi-ui/classname');
25
25
  var objectUtils = require('@hi-ui/object-utils');
26
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
27
+ var core = require('@hi-ui/core');
26
28
  function _interopDefaultCompat(e) {
27
29
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
28
30
  'default': e
@@ -31,6 +33,9 @@ function _interopDefaultCompat(e) {
31
33
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
32
34
  var FormItem = function FormItem(_a) {
33
35
  var className = _a.className,
36
+ style = _a.style,
37
+ classNamesProp = _a.classNames,
38
+ stylesProp = _a.styles,
34
39
  children = _a.children,
35
40
  field = _a.field,
36
41
  valueType = _a.valueType,
@@ -41,7 +46,7 @@ var FormItem = function FormItem(_a) {
41
46
  valueConnectTransform = _a.valueConnectTransform,
42
47
  validateTrigger = _a.validateTrigger,
43
48
  render = _a.render,
44
- rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
49
+ rest = tslib.__rest(_a, ["className", "style", "classNames", "styles", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
45
50
  var _useFormContext = context.useFormContext(),
46
51
  prefixCls = _useFormContext.prefixCls,
47
52
  showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired,
@@ -50,7 +55,31 @@ var FormItem = function FormItem(_a) {
50
55
  getFieldValue = _useFormContext.getFieldValue,
51
56
  addField = _useFormContext.addField,
52
57
  deleteField = _useFormContext.deleteField,
53
- autoRegister = _useFormContext.autoRegister;
58
+ autoRegister = _useFormContext.autoRegister,
59
+ formSemanticClassNames = _useFormContext.formSemanticClassNames,
60
+ formSemanticStyles = _useFormContext.formSemanticStyles;
61
+ var _useGlobalContext = core.useGlobalContext(),
62
+ formItemConfig = _useGlobalContext.formItem;
63
+ var formDefaultClassNames = formSemanticClassNames != null ? {
64
+ label: formSemanticClassNames.label,
65
+ content: formSemanticClassNames.content
66
+ } : undefined;
67
+ var formDefaultStyles = formSemanticStyles != null ? {
68
+ label: formSemanticStyles.label,
69
+ content: formSemanticStyles.content
70
+ } : undefined;
71
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
72
+ classNamesList: [formDefaultClassNames, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.classNames, classNamesProp],
73
+ stylesList: [formDefaultStyles, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.styles, stylesProp],
74
+ info: {
75
+ props: Object.assign(Object.assign({}, rest), {
76
+ field: field,
77
+ required: rest.required
78
+ })
79
+ }
80
+ }),
81
+ classNames = _useMergeSemantic.classNames,
82
+ styles = _useMergeSemantic.styles;
54
83
  var fieldRules = useFormField.useFiledRules({
55
84
  field: field,
56
85
  rules: rules,
@@ -88,7 +117,16 @@ var FormItem = function FormItem(_a) {
88
117
  field: field,
89
118
  className: prefixCls + "-item__message"
90
119
  }),
91
- className: classname.cx(prefixCls + "-item", className)
120
+ className: classname.cx(prefixCls + "-item", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
121
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
122
+ itemClassNames: {
123
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
124
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
125
+ },
126
+ itemStyles: {
127
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
128
+ content: styles === null || styles === void 0 ? void 0 : styles.content
129
+ }
92
130
  }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
93
131
  field: field,
94
132
  valueType: valueType,
package/lib/cjs/FormLabel.js CHANGED
@@ -57,7 +57,9 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
57
57
  formMessage = props.formMessage,
58
58
  _props$showValidateMe = props.showValidateMessage,
59
59
  showValidateMessageProp = _props$showValidateMe === void 0 ? showValidateMessageContext : _props$showValidateMe,
60
- rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage"]);
60
+ semanticClassNames = props.itemClassNames,
61
+ semanticStyles = props.itemStyles,
62
+ rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage", "itemClassNames", "itemStyles"]);
61
63
  var _useMemo = React.useMemo(function () {
62
64
  if (labelPlacement === 'top') return {
63
65
  labelWidth: '100%',
@@ -100,20 +102,20 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
100
102
  alignItems: contentPositionMemo
101
103
  }
102
104
  }, label ? ( /*#__PURE__*/React__default["default"].createElement("label", {
103
- className: prefixCls + "__content__text",
104
- style: {
105
+ className: classname.cx(prefixCls + "__content__text", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
106
+ style: Object.assign({
105
107
  width: labelWidth
106
- }
108
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
107
109
  }, label, colon)) : ( /*#__PURE__*/React__default["default"].createElement("span", {
108
- className: prefixCls + "__content__indent",
109
- style: {
110
+ className: classname.cx(prefixCls + "__content__indent", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
111
+ style: Object.assign({
110
112
  width: labelWidth
111
- }
113
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
112
114
  })), /*#__PURE__*/React__default["default"].createElement("div", {
113
- className: prefixCls + "__content__control",
114
- style: {
115
+ className: classname.cx(prefixCls + "__content__control", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.content),
116
+ style: Object.assign({
115
117
  width: controlWidth
116
- }
118
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content)
117
119
  }, children)), showValidateMessageProp && ( /*#__PURE__*/React__default["default"].createElement("div", {
118
120
  style: {
119
121
  paddingLeft: "calc(100% - " + controlWidth + ")"
package/lib/esm/Form.js CHANGED
@@ -14,6 +14,7 @@ import { __DEV__, invariant } from '@hi-ui/env';
14
14
  import { FormProvider } from './context.js';
15
15
  import { useForm } from './use-form.js';
16
16
  import { useGlobalContext } from '@hi-ui/core';
17
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
17
18
  var _role = 'form';
18
19
  var _prefix = getPrefixCls(_role);
19
20
  // form 注册表
@@ -27,6 +28,9 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
27
28
  _a$role = _a.role,
28
29
  role = _a$role === void 0 ? _role : _a$role,
29
30
  className = _a.className,
31
+ style = _a.style,
32
+ classNamesProp = _a.classNames,
33
+ stylesProp = _a.styles,
30
34
  children = _a.children,
31
35
  innerRef = _a.innerRef,
32
36
  labelWidth = _a.labelWidth,
@@ -42,10 +46,29 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
42
46
  _a$showValidateMessag = _a.showValidateMessage,
43
47
  showValidateMessage = _a$showValidateMessag === void 0 ? true : _a$showValidateMessag,
44
48
  sizeProp = _a.size,
45
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
49
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
46
50
  var _useGlobalContext = useGlobalContext(),
47
- globalSize = _useGlobalContext.size;
51
+ globalSize = _useGlobalContext.size,
52
+ formConfig = _useGlobalContext.form;
48
53
  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize;
54
+ var _useMergeSemantic = useMergeSemantic({
55
+ classNamesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.classNames, classNamesProp],
56
+ stylesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.styles, stylesProp],
57
+ info: {
58
+ props: Object.assign(Object.assign({}, rest), {
59
+ labelWidth: labelWidth,
60
+ labelPlacement: labelPlacement,
61
+ placement: placement,
62
+ contentPosition: contentPosition,
63
+ showRequiredOnValidateRequired: showRequiredOnValidateRequired,
64
+ showColon: showColon,
65
+ showValidateMessage: showValidateMessage,
66
+ size: size
67
+ })
68
+ }
69
+ }),
70
+ classNames = _useMergeSemantic.classNames,
71
+ styles = _useMergeSemantic.styles;
49
72
  var formContext = useForm(Object.assign(Object.assign({}, rest), {
50
73
  size: size
51
74
  }));
@@ -75,10 +98,18 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
75
98
  showRequiredOnValidateRequired: showRequiredOnValidateRequired,
76
99
  showValidateMessage: showValidateMessage
77
100
  }, formContext), {
78
- prefixCls: prefixCls
101
+ prefixCls: prefixCls,
102
+ formSemanticClassNames: (classNames === null || classNames === void 0 ? void 0 : classNames.label) != null || (classNames === null || classNames === void 0 ? void 0 : classNames.content) != null ? {
103
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
104
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
105
+ } : undefined,
106
+ formSemanticStyles: (styles === null || styles === void 0 ? void 0 : styles.label) != null || (styles === null || styles === void 0 ? void 0 : styles.content) != null ? {
107
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
108
+ content: styles === null || styles === void 0 ? void 0 : styles.content
109
+ } : undefined
79
110
  });
80
- }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls]);
81
- var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
111
+ }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.content, styles === null || styles === void 0 ? void 0 : styles.label, styles === null || styles === void 0 ? void 0 : styles.content]);
112
+ var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, classNames === null || classNames === void 0 ? void 0 : classNames.root);
82
113
  return /*#__PURE__*/(
83
114
  // @ts-ignore
84
115
  React.createElement(FormProvider, {
@@ -86,7 +117,8 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
86
117
  }, /*#__PURE__*/React.createElement("form", Object.assign({
87
118
  ref: ref,
88
119
  role: role,
89
- className: cls
120
+ className: cls,
121
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
90
122
  }, getRootProps()), children))
91
123
  );
92
124
  });
package/lib/esm/FormItem.js CHANGED
@@ -17,8 +17,13 @@ import { FormField } from './FormField.js';
17
17
  import { useFormContext } from './context.js';
18
18
  import { cx } from '@hi-ui/classname';
19
19
  import { hasProperty } from '@hi-ui/object-utils';
20
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
21
+ import { useGlobalContext } from '@hi-ui/core';
20
22
  var FormItem = function FormItem(_a) {
21
23
  var className = _a.className,
24
+ style = _a.style,
25
+ classNamesProp = _a.classNames,
26
+ stylesProp = _a.styles,
22
27
  children = _a.children,
23
28
  field = _a.field,
24
29
  valueType = _a.valueType,
@@ -29,7 +34,7 @@ var FormItem = function FormItem(_a) {
29
34
  valueConnectTransform = _a.valueConnectTransform,
30
35
  validateTrigger = _a.validateTrigger,
31
36
  render = _a.render,
32
- rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
37
+ rest = __rest(_a, ["className", "style", "classNames", "styles", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
33
38
  var _useFormContext = useFormContext(),
34
39
  prefixCls = _useFormContext.prefixCls,
35
40
  showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired,
@@ -38,7 +43,31 @@ var FormItem = function FormItem(_a) {
38
43
  getFieldValue = _useFormContext.getFieldValue,
39
44
  addField = _useFormContext.addField,
40
45
  deleteField = _useFormContext.deleteField,
41
- autoRegister = _useFormContext.autoRegister;
46
+ autoRegister = _useFormContext.autoRegister,
47
+ formSemanticClassNames = _useFormContext.formSemanticClassNames,
48
+ formSemanticStyles = _useFormContext.formSemanticStyles;
49
+ var _useGlobalContext = useGlobalContext(),
50
+ formItemConfig = _useGlobalContext.formItem;
51
+ var formDefaultClassNames = formSemanticClassNames != null ? {
52
+ label: formSemanticClassNames.label,
53
+ content: formSemanticClassNames.content
54
+ } : undefined;
55
+ var formDefaultStyles = formSemanticStyles != null ? {
56
+ label: formSemanticStyles.label,
57
+ content: formSemanticStyles.content
58
+ } : undefined;
59
+ var _useMergeSemantic = useMergeSemantic({
60
+ classNamesList: [formDefaultClassNames, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.classNames, classNamesProp],
61
+ stylesList: [formDefaultStyles, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.styles, stylesProp],
62
+ info: {
63
+ props: Object.assign(Object.assign({}, rest), {
64
+ field: field,
65
+ required: rest.required
66
+ })
67
+ }
68
+ }),
69
+ classNames = _useMergeSemantic.classNames,
70
+ styles = _useMergeSemantic.styles;
42
71
  var fieldRules = useFiledRules({
43
72
  field: field,
44
73
  rules: rules,
@@ -76,7 +105,16 @@ var FormItem = function FormItem(_a) {
76
105
  field: field,
77
106
  className: prefixCls + "-item__message"
78
107
  }),
79
- className: cx(prefixCls + "-item", className)
108
+ className: cx(prefixCls + "-item", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
109
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
110
+ itemClassNames: {
111
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
112
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
113
+ },
114
+ itemStyles: {
115
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
116
+ content: styles === null || styles === void 0 ? void 0 : styles.content
117
+ }
80
118
  }), /*#__PURE__*/React.createElement(FormField, {
81
119
  field: field,
82
120
  valueType: valueType,
package/lib/esm/FormLabel.js CHANGED
@@ -45,7 +45,9 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
45
45
  formMessage = props.formMessage,
46
46
  _props$showValidateMe = props.showValidateMessage,
47
47
  showValidateMessageProp = _props$showValidateMe === void 0 ? showValidateMessageContext : _props$showValidateMe,
48
- rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage"]);
48
+ semanticClassNames = props.itemClassNames,
49
+ semanticStyles = props.itemStyles,
50
+ rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage", "itemClassNames", "itemStyles"]);
49
51
  var _useMemo = useMemo(function () {
50
52
  if (labelPlacement === 'top') return {
51
53
  labelWidth: '100%',
@@ -88,20 +90,20 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
88
90
  alignItems: contentPositionMemo
89
91
  }
90
92
  }, label ? ( /*#__PURE__*/React.createElement("label", {
91
- className: prefixCls + "__content__text",
92
- style: {
93
+ className: cx(prefixCls + "__content__text", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
94
+ style: Object.assign({
93
95
  width: labelWidth
94
- }
96
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
95
97
  }, label, colon)) : ( /*#__PURE__*/React.createElement("span", {
96
- className: prefixCls + "__content__indent",
97
- style: {
98
+ className: cx(prefixCls + "__content__indent", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
99
+ style: Object.assign({
98
100
  width: labelWidth
99
- }
101
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
100
102
  })), /*#__PURE__*/React.createElement("div", {
101
- className: prefixCls + "__content__control",
102
- style: {
103
+ className: cx(prefixCls + "__content__control", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.content),
104
+ style: Object.assign({
103
105
  width: controlWidth
104
- }
106
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content)
105
107
  }, children)), showValidateMessageProp && ( /*#__PURE__*/React.createElement("div", {
106
108
  style: {
107
109
  paddingLeft: "calc(100% - " + controlWidth + ")"
package/lib/types/Form.d.ts CHANGED
@@ -2,12 +2,17 @@ import React from 'react';
2
2
  import { UseFormProps } from './use-form';
3
3
  import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
4
4
  import { FormRuleModel, FormHelpers } from './types';
5
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
5
6
  export declare const FORM_REGISTER_TABLE: Record<string, FormRuleModel>;
6
7
  /**
7
8
  * 表单
8
9
  */
9
10
  export declare const Form: React.ForwardRefExoticComponent<FormProps<Record<string, any>> & React.RefAttributes<HTMLFormElement | null>>;
10
- export interface FormProps<Values = Record<string, any>> extends Omit<HiBaseHTMLProps<'form'>, 'onSubmit' | 'onReset'>, UseFormProps<Values> {
11
+ export type FormSemanticName = 'root' | 'label' | 'content';
12
+ export type FormSemanticClassNames = SemanticClassNamesType<FormProps, FormSemanticName>;
13
+ export type FormSemanticStyles = SemanticStylesType<FormProps, FormSemanticName>;
14
+ export type FormSemantic = ComponentSemantic<FormSemanticClassNames, FormSemanticStyles>;
15
+ export interface FormProps<Values = Record<string, any>> extends Omit<HiBaseHTMLProps<'form'>, 'onSubmit' | 'onReset'>, UseFormProps<Values>, FormSemantic {
11
16
  /**
12
17
  * 提供辅助方法的内部引用
13
18
  */
package/lib/types/FormItem.d.ts CHANGED
@@ -1,8 +1,13 @@
1
1
  import React from 'react';
2
2
  import { UseFormFieldProps } from './use-form-field';
3
3
  import { FormLabelProps } from './FormLabel';
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
5
  export declare const FormItem: React.FC<FormItemProps>;
5
- export interface FormItemProps extends UseFormFieldProps, FormLabelProps {
6
+ export type FormItemSemanticName = 'root' | 'label' | 'content';
7
+ export type FormItemSemanticClassNames = SemanticClassNamesType<FormItemProps, FormItemSemanticName>;
8
+ export type FormItemSemanticStyles = SemanticStylesType<FormItemProps, FormItemSemanticName>;
9
+ export type FormItemSemantic = ComponentSemantic<FormItemSemanticClassNames, FormItemSemanticStyles>;
10
+ export interface FormItemProps extends UseFormFieldProps, FormLabelProps, FormItemSemantic {
6
11
  /**
7
12
  * 表单控件或其渲染函数
8
13
  */
package/lib/types/FormLabel.d.ts CHANGED
@@ -1,7 +1,27 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLDivElement | null>>;
4
+ /** Form.Item 传入的 label/content 语义化 classNames */
5
+ export interface FormLabelSemanticClassNames {
6
+ label?: string;
7
+ content?: string;
8
+ }
9
+ /** Form.Item 传入的 label/content 语义化 styles */
10
+ export interface FormLabelSemanticStyles {
11
+ label?: React.CSSProperties;
12
+ content?: React.CSSProperties;
13
+ }
4
14
  export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
15
+ /**
16
+ * 由 Form.Item 传入的语义化 classNames（label / content），勿直接使用
17
+ * @internal
18
+ */
19
+ itemClassNames?: FormLabelSemanticClassNames;
20
+ /**
21
+ * 由 Form.Item 传入的语义化 styles（label / content），勿直接使用
22
+ * @internal
23
+ */
24
+ itemStyles?: FormLabelSemanticStyles;
5
25
  /**
6
26
  * label 放置的位置
7
27
  */
package/lib/types/context.d.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  import React, { MutableRefObject } from 'react';
2
2
  import { UseFormReturn } from './use-form';
3
3
  import { FormFieldPath } from './types';
4
+ /** Form 下发给 FormItem 的 label/content 语义化样式，FormItem 可覆盖 */
5
+ export interface FormSemanticLabelContent {
6
+ label?: string;
7
+ content?: string;
8
+ }
9
+ export interface FormSemanticLabelContentStyles {
10
+ label?: React.CSSProperties;
11
+ content?: React.CSSProperties;
12
+ }
4
13
  export interface FormContextProps extends UseFormReturn {
5
14
  labelWidth: React.ReactText;
6
15
  labelPlacement: 'left' | 'right' | 'top';
@@ -10,6 +19,10 @@ export interface FormContextProps extends UseFormReturn {
10
19
  showValidateMessage: boolean;
11
20
  prefixCls: string;
12
21
  formItemsRef: MutableRefObject<Map<FormFieldPath, HTMLDivElement | null>>;
22
+ /** Form 传入的 label/content 语义化 classNames，供 FormItem 默认使用 */
23
+ formSemanticClassNames?: FormSemanticLabelContent;
24
+ /** Form 传入的 label/content 语义化 styles，供 FormItem 默认使用 */
25
+ formSemanticStyles?: FormSemanticLabelContentStyles;
13
26
  }
14
27
  export declare const FormProvider: React.Provider<Omit<FormContextProps, "rootProps"> | null>;
15
28
  export declare const useFormContext: () => Omit<FormContextProps, "rootProps">;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/form",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "@hi-ui/array-utils": "^5.0.0-experimental.0",
48
- "@hi-ui/button": "^5.0.0-experimental.0",
48
+ "@hi-ui/button": "^5.0.0-experimental.1",
49
49
  "@hi-ui/classname": "^5.0.0-experimental.0",
50
50
  "@hi-ui/dom-utils": "^5.0.0-experimental.0",
51
51
  "@hi-ui/env": "^5.0.0-experimental.0",
@@ -54,16 +54,17 @@
54
54
  "@hi-ui/type-assertion": "^5.0.0-experimental.0",
55
55
  "@hi-ui/use-latest": "^5.0.0-experimental.0",
56
56
  "async-validator": "^4.0.7",
57
- "scroll-into-view-if-needed": "^3.1.0"
57
+ "scroll-into-view-if-needed": "^3.1.0",
58
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
58
59
  },
59
60
  "peerDependencies": {
60
- "@hi-ui/core": ">=5.0.0-experimental.0",
61
+ "@hi-ui/core": ">=5.0.0-experimental.1",
61
62
  "react": ">=16.8.6",
62
63
  "react-dom": ">=16.8.6"
63
64
  },
64
65
  "devDependencies": {
65
- "@hi-ui/core": "^5.0.0-experimental.0",
66
- "@hi-ui/core-css": "^5.0.0-experimental.0",
66
+ "@hi-ui/core": "^5.0.0-experimental.1",
67
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
67
68
  "react": "^17.0.1",
68
69
  "react-dom": "^17.0.1"
69
70
  }