@lobehub/ui 1.138.12 → 1.138.13
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.
- package/es/Form/components/FormDivider.js +1 -1
- package/es/Form/components/FormFooter.d.ts +1 -1
- package/es/Form/components/FormGroup.d.ts +7 -2
- package/es/Form/components/FormGroup.js +25 -21
- package/es/Form/components/FormInput.d.ts +0 -0
- package/es/Form/components/FormInput.js +0 -0
- package/es/Form/components/FormItem.d.ts +1 -0
- package/es/Form/components/FormItem.js +5 -4
- package/es/Form/components/FormTitle.d.ts +1 -1
- package/es/Form/index.d.ts +2 -1
- package/es/Form/index.js +2 -1
- package/package.json +1 -1
|
@@ -3,13 +3,18 @@ import { type ReactNode } from 'react';
|
|
|
3
3
|
import { type IconProps } from "../../Icon";
|
|
4
4
|
export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
|
|
5
5
|
export type ItemsType = 'group' | 'flat';
|
|
6
|
-
export declare const useStyles: (props?:
|
|
7
|
-
|
|
6
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
7
|
+
blockStyle: import("antd-style").SerializedStyles;
|
|
8
|
+
defaultStyle: import("antd-style").SerializedStyles;
|
|
9
|
+
flatGroup: import("antd-style").SerializedStyles;
|
|
10
|
+
ghostStyle: import("antd-style").SerializedStyles;
|
|
8
11
|
group: string;
|
|
9
12
|
icon: import("antd-style").SerializedStyles;
|
|
10
13
|
mobileFlatGroup: import("antd-style").SerializedStyles;
|
|
11
14
|
mobileGroupBody: import("antd-style").SerializedStyles;
|
|
12
15
|
mobileGroupHeader: import("antd-style").SerializedStyles;
|
|
16
|
+
pureStyle: import("antd-style").SerializedStyles;
|
|
17
|
+
pureTitle: import("antd-style").SerializedStyles;
|
|
13
18
|
title: import("antd-style").SerializedStyles;
|
|
14
19
|
}>;
|
|
15
20
|
export interface FormGroupProps extends CollapseProps {
|
|
@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
var _excluded = ["className", "icon", "title", "children", "extra", "itemsType", "variant", "defaultActive"];
|
|
5
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
6
6
|
import { Collapse } from 'antd';
|
|
7
7
|
import { createStyles, useResponsive } from 'antd-style';
|
|
8
8
|
import { ChevronDown } from 'lucide-react';
|
|
@@ -11,26 +11,30 @@ import { Flexbox } from 'react-layout-kit';
|
|
|
11
11
|
import Icon from "../../Icon";
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
export var useStyles = createStyles(function (_ref
|
|
14
|
+
export var useStyles = createStyles(function (_ref) {
|
|
15
15
|
var css = _ref.css,
|
|
16
16
|
cx = _ref.cx,
|
|
17
17
|
token = _ref.token,
|
|
18
18
|
isDarkMode = _ref.isDarkMode,
|
|
19
19
|
responsive = _ref.responsive,
|
|
20
20
|
prefixCls = _ref.prefixCls;
|
|
21
|
-
var pureStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
22
|
-
var blockStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
23
|
-
var ghostStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
24
|
-
var defaultStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
25
|
-
var variantStyle = cx(variant === 'default' && defaultStyle, variant === 'block' && blockStyle, variant === 'ghost' && ghostStyle, variant === 'pure' && pureStyle);
|
|
21
|
+
var pureStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: transparent;\n border: none;\n border-radius: 0;\n\n .", "-collapse-header {\n padding-block: 0 20px !important;\n padding-inline: 2px !important;\n background: transparent !important;\n border-radius: 0 !important;\n }\n\n .", "-collapse-content {\n border-color: ", ";\n }\n\n .", "-collapse-content-box {\n padding-inline: 2px !important;\n background: transparent;\n border-radius: 0;\n }\n "])), prefixCls, prefixCls, token.colorFillSecondary, prefixCls);
|
|
22
|
+
var blockStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n border: none;\n border-radius: ", "px;\n\n .", "-collapse-content {\n border: none !important;\n }\n "])), token.colorFillQuaternary, token.borderRadiusLG, prefixCls);
|
|
23
|
+
var ghostStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: transparent;\n border: 1px solid ", ";\n .", "-collapse-header {\n background: transparent !important;\n }\n\n .", "-collapse-content-box {\n background: transparent;\n }\n "])), token.colorBorderSecondary, prefixCls, prefixCls);
|
|
24
|
+
var defaultStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.colorBorderSecondary, token.borderRadiusLG);
|
|
26
25
|
return {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
blockStyle: blockStyle,
|
|
27
|
+
defaultStyle: defaultStyle,
|
|
28
|
+
flatGroup: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n padding-inline: 16px;\n "]))),
|
|
29
|
+
ghostStyle: ghostStyle,
|
|
30
|
+
group: cx(isDarkMode && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .", "-collapse-content {\n background: transparent;\n border-color: ", ";\n }\n\n .", "-collapse-header {\n background: ", ";\n }\n "])), prefixCls, token.colorBorderSecondary, prefixCls, token.colorFillTertiary), css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n\n .", "-collapse-item {\n border: none;\n }\n\n .", "-collapse-header {\n align-items: center !important;\n border-radius: 0 !important;\n }\n\n .", "-collapse-content-box {\n padding-block: 0 !important;\n }\n\n .", "-form-item-label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n "])), prefixCls, prefixCls, prefixCls, prefixCls)),
|
|
31
|
+
icon: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n transition: all 100ms ", ";\n "])), token.motionEaseOut),
|
|
32
|
+
mobileFlatGroup: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), token.borderRadiusLG),
|
|
33
|
+
mobileGroupBody: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding-block: 0;\n padding-inline: 16px;\n background: ", ";\n "])), token.colorBgContainer),
|
|
34
|
+
mobileGroupHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n padding: 16px;\n background: ", ";\n "])), token.colorBgLayout),
|
|
35
|
+
pureStyle: pureStyle,
|
|
36
|
+
pureTitle: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n font-size: 18px;\n font-weight: 700;\n line-height: 24px;\n "]))),
|
|
37
|
+
title: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n align-items: center;\n font-size: 16px;\n font-weight: 600;\n\n .anticon {\n color: ", ";\n }\n\n ", " {\n font-size: 14px;\n font-weight: 400;\n opacity: 0.5;\n }\n "])), token.colorPrimary, responsive.mobile)
|
|
34
38
|
};
|
|
35
39
|
});
|
|
36
40
|
var FormGroup = /*#__PURE__*/memo(function (_ref2) {
|
|
@@ -50,8 +54,9 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
|
|
|
50
54
|
var _useStyles = useStyles(variant),
|
|
51
55
|
cx = _useStyles.cx,
|
|
52
56
|
styles = _useStyles.styles;
|
|
57
|
+
var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
|
|
53
58
|
var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
|
|
54
|
-
className: styles.title,
|
|
59
|
+
className: cx(styles.title, variant === 'pure' && styles.pureTitle),
|
|
55
60
|
gap: 8,
|
|
56
61
|
horizontal: true,
|
|
57
62
|
children: [icon && /*#__PURE__*/_jsx(Icon, {
|
|
@@ -59,12 +64,11 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
|
|
|
59
64
|
}), title]
|
|
60
65
|
});
|
|
61
66
|
if (itemsType === 'flat') {
|
|
62
|
-
|
|
67
|
+
return mobile ? /*#__PURE__*/_jsx(Flexbox, {
|
|
63
68
|
className: cx(styles.mobileFlatGroup, styles.mobileGroupBody, className),
|
|
64
69
|
children: children
|
|
65
|
-
})
|
|
66
|
-
|
|
67
|
-
className: cx(styles.flatGroup, className),
|
|
70
|
+
}) : /*#__PURE__*/_jsx(Flexbox, {
|
|
71
|
+
className: cx(styles.flatGroup, variantStyle, className),
|
|
68
72
|
children: children
|
|
69
73
|
});
|
|
70
74
|
}
|
|
@@ -81,11 +85,11 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
|
|
|
81
85
|
})]
|
|
82
86
|
});
|
|
83
87
|
return /*#__PURE__*/_jsx(Collapse, _objectSpread({
|
|
84
|
-
className: cx(styles.group, className),
|
|
88
|
+
className: cx(styles.group, variantStyle, className),
|
|
85
89
|
defaultActiveKey: defaultActive ? [1] : undefined,
|
|
86
90
|
expandIcon: function expandIcon(_ref3) {
|
|
87
91
|
var isActive = _ref3.isActive;
|
|
88
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
92
|
+
return variant === 'pure' ? null : /*#__PURE__*/_jsx(Icon, {
|
|
89
93
|
className: styles.icon,
|
|
90
94
|
icon: ChevronDown,
|
|
91
95
|
size: {
|
|
File without changes
|
|
File without changes
|
|
@@ -3,6 +3,7 @@ import { FormItemProps as AntdFormItemProps } from 'antd';
|
|
|
3
3
|
import { type FormTitleProps } from './FormTitle';
|
|
4
4
|
export declare const useStyles: (props?: string | number | undefined) => import("antd-style").ReturnStyles<{
|
|
5
5
|
item: import("antd-style").SerializedStyles;
|
|
6
|
+
itemMinWidth: import("antd-style").SerializedStyles;
|
|
6
7
|
itemNoDivider: import("antd-style").SerializedStyles;
|
|
7
8
|
}>;
|
|
8
9
|
export interface FormItemProps extends AntdFormItemProps {
|
|
@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
var _excluded = ["desc", "tag", "minWidth", "avatar", "className", "label", "children", "divider"];
|
|
5
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
5
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
6
6
|
import { Form } from 'antd';
|
|
7
7
|
import { createStyles } from 'antd-style';
|
|
8
8
|
import { isNumber } from 'lodash-es';
|
|
@@ -18,8 +18,9 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
|
|
|
18
18
|
responsive = _ref.responsive,
|
|
19
19
|
prefixCls = _ref.prefixCls;
|
|
20
20
|
return {
|
|
21
|
-
item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-block: 16px;\n
|
|
22
|
-
|
|
21
|
+
item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.", "-form-item {\n padding-block: 16px;\n padding-inline: 0;\n\n .", "-row {\n gap: 12px;\n justify-content: space-between;\n\n > div {\n flex: unset;\n flex-grow: unset;\n }\n }\n\n .", "-form-item-required::before {\n align-self: flex-start;\n }\n\n ", " {\n .", "-row {\n flex-direction: column;\n align-items: stretch;\n\n > div {\n width: 100%;\n }\n }\n }\n\n ", " {\n padding-block: 16px;\n padding-inline: 0;\n\n .", "-row {\n flex-wrap: wrap;\n gap: 4px;\n }\n }\n }\n "])), prefixCls, prefixCls, prefixCls, responsive.md, prefixCls, responsive.mobile, prefixCls),
|
|
22
|
+
itemMinWidth: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", "-form-item-control {\n width: ", ";\n }\n ", " {\n .", "-row {\n flex-direction: column;\n gap: 4px;\n }\n\n .", "-form-item-control {\n flex: 1;\n width: 100%;\n }\n }\n "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth, responsive.mobile, prefixCls, prefixCls),
|
|
23
|
+
itemNoDivider: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:not(:first-child) {\n padding-block-start: 0;\n }\n "])))
|
|
23
24
|
};
|
|
24
25
|
});
|
|
25
26
|
var FormItem = /*#__PURE__*/memo(function (_ref2) {
|
|
@@ -37,7 +38,7 @@ var FormItem = /*#__PURE__*/memo(function (_ref2) {
|
|
|
37
38
|
styles = _useStyles.styles;
|
|
38
39
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
39
40
|
children: [divider && /*#__PURE__*/_jsx(FormDivider, {}), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
|
|
40
|
-
className: cx(styles.item, !divider && styles.itemNoDivider, className),
|
|
41
|
+
className: cx(styles.item, Boolean(minWidth) && styles.itemMinWidth, !divider && styles.itemNoDivider, className),
|
|
41
42
|
label: /*#__PURE__*/_jsx(FormTitle, {
|
|
42
43
|
avatar: avatar,
|
|
43
44
|
desc: desc,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { DivProps } from "../../types";
|
|
2
|
+
import { type DivProps } from "../../types";
|
|
3
3
|
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
4
4
|
formTitle: import("antd-style").SerializedStyles;
|
|
5
5
|
}>;
|
package/es/Form/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FormProps as AntFormProps, type FormInstance } from 'antd';
|
|
1
|
+
import { Form as AntForm, FormProps as AntFormProps, type FormInstance } from 'antd';
|
|
2
2
|
import { type ReactNode, RefAttributes } from 'react';
|
|
3
3
|
import FormGroup, { type FormGroupProps, FormVariant, ItemsType } from './components/FormGroup';
|
|
4
4
|
import FormItem, { type FormItemProps } from './components/FormItem';
|
|
@@ -21,6 +21,7 @@ export interface IForm {
|
|
|
21
21
|
(props: FormProps & RefAttributes<FormInstance>): ReactNode;
|
|
22
22
|
Group: typeof FormGroup;
|
|
23
23
|
Item: typeof FormItem;
|
|
24
|
+
useForm: typeof AntForm.useForm;
|
|
24
25
|
}
|
|
25
26
|
declare const Form: IForm;
|
|
26
27
|
export default Form;
|
package/es/Form/index.js
CHANGED
|
@@ -51,7 +51,7 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
51
51
|
className: cx(styles.form, className),
|
|
52
52
|
colon: false,
|
|
53
53
|
form: form,
|
|
54
|
-
layout:
|
|
54
|
+
layout: 'horizontal',
|
|
55
55
|
ref: ref
|
|
56
56
|
}, rest), {}, {
|
|
57
57
|
children: [(items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
|
|
@@ -72,4 +72,5 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
72
72
|
var Form = FormParent;
|
|
73
73
|
Form.Item = FormItem;
|
|
74
74
|
Form.Group = FormGroup;
|
|
75
|
+
Form.useForm = AntForm.useForm;
|
|
75
76
|
export default Form;
|