@pixpilot/formily-shadcn 0.25.2 → 0.26.0
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/dist/components/checkbox.cjs +2 -6
- package/dist/components/checkbox.js +2 -6
- package/dist/components/context/form-context.d.cts +3 -3
- package/dist/components/context/form-context.d.ts +3 -3
- package/dist/components/form-grid.d.cts +2 -2
- package/dist/components/form-grid.d.ts +2 -2
- package/dist/components/form-item/base-form-item.cjs +25 -10
- package/dist/components/form-item/base-form-item.js +25 -10
- package/dist/components/form-item/form-item-label.cjs +4 -2
- package/dist/components/form-item/form-item-label.js +4 -2
- package/dist/components/form-item/form-item-types.d.cts +12 -2
- package/dist/components/form-item/form-item-types.d.ts +12 -2
- package/dist/components/form-item/form-item.d.cts +1 -1
- package/dist/components/form-item/form-item.d.ts +1 -1
- package/dist/components/form-item/index.d.cts +1 -1
- package/dist/components/form-item/index.d.ts +1 -1
- package/dist/components/form.d.cts +2 -2
- package/dist/components/form.d.ts +2 -2
- package/dist/components/schema-field/schema-field-basics.d.cts +233 -233
- package/dist/components/schema-field/schema-field.d.cts +310 -310
- package/dist/components/separator.d.cts +2 -2
- package/dist/components/slider/slider-input.d.cts +3 -3
- package/dist/components/slider/slider-select.d.cts +3 -3
- package/dist/components/slider/slider.d.cts +3 -3
- package/dist/components/switch.cjs +2 -1
- package/dist/components/switch.d.cts +2 -2
- package/dist/components/switch.js +2 -1
- package/dist/components/tags-input-inline.d.cts +2 -2
- package/dist/components/textarea.d.cts +2 -2
- package/dist/utils/formily-decorator.cjs +17 -0
- package/dist/utils/formily-decorator.js +16 -0
- package/package.json +4 -4
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_formily_decorator = require('../utils/formily-decorator.cjs');
|
|
2
3
|
let __formily_react = require("@formily/react");
|
|
3
4
|
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
4
5
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
@@ -13,14 +14,9 @@ const Checkbox = (0, __formily_react.connect)(__pixpilot_shadcn.Checkbox, (0, __
|
|
|
13
14
|
value: "checked",
|
|
14
15
|
onInput: "onCheckedChange"
|
|
15
16
|
}, (props, field) => {
|
|
16
|
-
field
|
|
17
|
+
require_formily_decorator.setCheckboxDefaultDecoratorProps(field);
|
|
17
18
|
return { ...props };
|
|
18
19
|
}));
|
|
19
|
-
/**
|
|
20
|
-
* Default label placement for checkbox
|
|
21
|
-
* Used by FormItem to determine label positioning
|
|
22
|
-
*/
|
|
23
|
-
Checkbox.labelPlacement = "right";
|
|
24
20
|
|
|
25
21
|
//#endregion
|
|
26
22
|
exports.Checkbox = Checkbox;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { setCheckboxDefaultDecoratorProps } from "../utils/formily-decorator.js";
|
|
1
2
|
import { connect, mapProps } from "@formily/react";
|
|
2
3
|
import { Checkbox } from "@pixpilot/shadcn";
|
|
3
4
|
|
|
@@ -10,14 +11,9 @@ const Checkbox$1 = connect(Checkbox, mapProps({
|
|
|
10
11
|
value: "checked",
|
|
11
12
|
onInput: "onCheckedChange"
|
|
12
13
|
}, (props, field) => {
|
|
13
|
-
field
|
|
14
|
+
setCheckboxDefaultDecoratorProps(field);
|
|
14
15
|
return { ...props };
|
|
15
16
|
}));
|
|
16
|
-
/**
|
|
17
|
-
* Default label placement for checkbox
|
|
18
|
-
* Used by FormItem to determine label positioning
|
|
19
|
-
*/
|
|
20
|
-
Checkbox$1.labelPlacement = "right";
|
|
21
17
|
|
|
22
18
|
//#endregion
|
|
23
19
|
export { Checkbox$1 as Checkbox };
|
|
@@ -39,10 +39,10 @@ interface FormLayoutOptions {
|
|
|
39
39
|
labelPlacement?: LabelPlacement;
|
|
40
40
|
/** Custom class names for FormItem elements */
|
|
41
41
|
itemProps?: {
|
|
42
|
-
label?: React.
|
|
43
|
-
description?: React.HTMLAttributes<
|
|
42
|
+
label?: React.LabelHTMLAttributes<HTMLLabelElement>;
|
|
43
|
+
description?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
44
44
|
inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
|
|
45
|
-
error?: React.HTMLAttributes<
|
|
45
|
+
error?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
46
46
|
container?: React.HTMLAttributes<HTMLDivElement>;
|
|
47
47
|
};
|
|
48
48
|
/** Custom class names for ObjectContainer elements */
|
|
@@ -39,10 +39,10 @@ interface FormLayoutOptions {
|
|
|
39
39
|
labelPlacement?: LabelPlacement;
|
|
40
40
|
/** Custom class names for FormItem elements */
|
|
41
41
|
itemProps?: {
|
|
42
|
-
label?: React.
|
|
43
|
-
description?: React.HTMLAttributes<
|
|
42
|
+
label?: React.LabelHTMLAttributes<HTMLLabelElement>;
|
|
43
|
+
description?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
44
44
|
inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
|
|
45
|
-
error?: React.HTMLAttributes<
|
|
45
|
+
error?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
46
46
|
container?: React.HTMLAttributes<HTMLDivElement>;
|
|
47
47
|
};
|
|
48
48
|
/** Custom class names for ObjectContainer elements */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/form-grid.d.ts
|
|
5
5
|
interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
@@ -7,6 +7,6 @@ declare function FormGrid({
|
|
|
7
7
|
className,
|
|
8
8
|
children,
|
|
9
9
|
...rest
|
|
10
|
-
}: IFormGridProps):
|
|
10
|
+
}: IFormGridProps): react_jsx_runtime1.JSX.Element;
|
|
11
11
|
//#endregion
|
|
12
12
|
export { FormGrid };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/form-grid.d.ts
|
|
5
5
|
interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
@@ -7,6 +7,6 @@ declare function FormGrid({
|
|
|
7
7
|
className,
|
|
8
8
|
children,
|
|
9
9
|
...rest
|
|
10
|
-
}: IFormGridProps):
|
|
10
|
+
}: IFormGridProps): react_jsx_runtime0.JSX.Element;
|
|
11
11
|
//#endregion
|
|
12
12
|
export { FormGrid };
|
|
@@ -17,15 +17,22 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
|
17
17
|
function resolveLegacyDescriptionPlacement(labelPlacement) {
|
|
18
18
|
return labelPlacement === "top" ? "top" : "bottom";
|
|
19
19
|
}
|
|
20
|
-
const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText,
|
|
20
|
+
const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
|
|
21
21
|
const field = (0, __formily_react.useField)();
|
|
22
|
-
const
|
|
22
|
+
const fieldDecoratorProps = field?.decoratorProps;
|
|
23
|
+
const fieldComponentProps = field?.componentProps;
|
|
24
|
+
const fieldDecoratorSlots = fieldDecoratorProps?.slots;
|
|
25
|
+
const fieldComponentSlots = fieldComponentProps?.slots;
|
|
26
|
+
const fieldLabelProps = fieldDecoratorSlots?.label ?? fieldDecoratorProps?.labelProps ?? fieldComponentSlots?.label ?? fieldComponentProps?.labelProps;
|
|
23
27
|
const effectiveLabel = require_use_label.useLabel(label);
|
|
24
28
|
const { layout } = require_use_form_context.useFormContext();
|
|
25
29
|
const itemComponentsProps = layout?.itemProps || {};
|
|
26
30
|
const contextDescriptionPlacement = layout?.descriptionPlacement;
|
|
27
|
-
const
|
|
28
|
-
const
|
|
31
|
+
const contextLabelPlacement = layout?.labelPlacement;
|
|
32
|
+
const fieldLabelPlacement = fieldLabelProps?.placement ?? fieldDecoratorProps?.labelPlacement ?? fieldComponentProps?.labelPlacement;
|
|
33
|
+
const propLabelPlacement = slots?.label?.placement;
|
|
34
|
+
const effectiveLabelPlacement = fieldLabelPlacement ?? propLabelPlacement ?? contextLabelPlacement ?? "top";
|
|
35
|
+
const resolvedDescriptionPlacement = fieldComponentProps?.descriptionPlacement ?? fieldDecoratorProps?.descriptionPlacement ?? descriptionPlacement ?? contextDescriptionPlacement ?? resolveLegacyDescriptionPlacement(effectiveLabelPlacement);
|
|
29
36
|
const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
|
|
30
37
|
const descriptionId = react.default.useId();
|
|
31
38
|
const feedbackId = react.default.useId();
|
|
@@ -33,19 +40,24 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
33
40
|
const spacingConfig = require_spacing_config.getSpacingConfig(resolvedDescriptionPlacement, descriptionRenderedInline);
|
|
34
41
|
const ariaDescribedBy = [descriptionRenderedInline ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
|
|
35
42
|
const labelElement = effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_item_label.FormItemLabel, {
|
|
36
|
-
...itemComponentsProps.label,
|
|
37
43
|
id,
|
|
38
44
|
label: effectiveLabel,
|
|
39
45
|
asterisk,
|
|
40
46
|
error: feedbackStatus === "error",
|
|
41
47
|
shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
|
|
42
|
-
|
|
48
|
+
labelProps: {
|
|
49
|
+
...fieldLabelProps,
|
|
50
|
+
...itemComponentsProps.label,
|
|
51
|
+
...slots?.label,
|
|
52
|
+
className: (0, __pixpilot_shadcn.cn)(effectiveLabelPlacement === "top" ? spacingConfig.label : "mb-0", fieldLabelProps?.className, itemComponentsProps.label?.className, slots?.label?.className)
|
|
53
|
+
},
|
|
43
54
|
description,
|
|
44
55
|
descriptionInPopover: resolvedDescriptionPlacement === "popover" && description != null
|
|
45
56
|
});
|
|
46
57
|
const inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
47
58
|
...itemComponentsProps.inputWrapper,
|
|
48
|
-
|
|
59
|
+
...slots?.inputWrapper,
|
|
60
|
+
className: (0, __pixpilot_shadcn.cn)("relative", itemComponentsProps.inputWrapper?.className, slots?.inputWrapper?.className),
|
|
49
61
|
children: react.default.isValidElement(children) ? react.default.cloneElement(children, {
|
|
50
62
|
id,
|
|
51
63
|
"aria-describedby": ariaDescribedBy || void 0,
|
|
@@ -54,8 +66,9 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
54
66
|
});
|
|
55
67
|
const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
56
68
|
...itemComponentsProps.description,
|
|
69
|
+
...slots?.description,
|
|
57
70
|
id: descriptionId,
|
|
58
|
-
className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className),
|
|
71
|
+
className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className, slots?.description?.className),
|
|
59
72
|
children: description
|
|
60
73
|
}) : null;
|
|
61
74
|
const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
@@ -75,12 +88,14 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
75
88
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
76
89
|
"data-slot": "form-item",
|
|
77
90
|
...itemComponentsProps.container,
|
|
91
|
+
...slots?.container,
|
|
78
92
|
...props,
|
|
79
|
-
className: (0, __pixpilot_shadcn.cn)("flex flex-col ", className, itemComponentsProps.container?.className),
|
|
93
|
+
className: (0, __pixpilot_shadcn.cn)("flex flex-col ", className, itemComponentsProps.container?.className, slots?.container?.className),
|
|
80
94
|
children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
81
95
|
...itemComponentsProps.error,
|
|
96
|
+
...slots?.error,
|
|
82
97
|
id: feedbackId,
|
|
83
|
-
className: (0, __pixpilot_shadcn.cn)("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", itemComponentsProps.error?.className),
|
|
98
|
+
className: (0, __pixpilot_shadcn.cn)("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", itemComponentsProps.error?.className, slots?.error?.className),
|
|
84
99
|
children: typeof feedbackText === "string" ? feedbackText.split("\n").map((line, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [line, index < feedbackText.split("\n").length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {})] }, index)) : feedbackText
|
|
85
100
|
})]
|
|
86
101
|
});
|
|
@@ -12,15 +12,22 @@ import { cn } from "@pixpilot/shadcn";
|
|
|
12
12
|
function resolveLegacyDescriptionPlacement(labelPlacement) {
|
|
13
13
|
return labelPlacement === "top" ? "top" : "bottom";
|
|
14
14
|
}
|
|
15
|
-
const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText,
|
|
15
|
+
const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
|
|
16
16
|
const field = useField();
|
|
17
|
-
const
|
|
17
|
+
const fieldDecoratorProps = field?.decoratorProps;
|
|
18
|
+
const fieldComponentProps = field?.componentProps;
|
|
19
|
+
const fieldDecoratorSlots = fieldDecoratorProps?.slots;
|
|
20
|
+
const fieldComponentSlots = fieldComponentProps?.slots;
|
|
21
|
+
const fieldLabelProps = fieldDecoratorSlots?.label ?? fieldDecoratorProps?.labelProps ?? fieldComponentSlots?.label ?? fieldComponentProps?.labelProps;
|
|
18
22
|
const effectiveLabel = useLabel(label);
|
|
19
23
|
const { layout } = useFormContext();
|
|
20
24
|
const itemComponentsProps = layout?.itemProps || {};
|
|
21
25
|
const contextDescriptionPlacement = layout?.descriptionPlacement;
|
|
22
|
-
const
|
|
23
|
-
const
|
|
26
|
+
const contextLabelPlacement = layout?.labelPlacement;
|
|
27
|
+
const fieldLabelPlacement = fieldLabelProps?.placement ?? fieldDecoratorProps?.labelPlacement ?? fieldComponentProps?.labelPlacement;
|
|
28
|
+
const propLabelPlacement = slots?.label?.placement;
|
|
29
|
+
const effectiveLabelPlacement = fieldLabelPlacement ?? propLabelPlacement ?? contextLabelPlacement ?? "top";
|
|
30
|
+
const resolvedDescriptionPlacement = fieldComponentProps?.descriptionPlacement ?? fieldDecoratorProps?.descriptionPlacement ?? descriptionPlacement ?? contextDescriptionPlacement ?? resolveLegacyDescriptionPlacement(effectiveLabelPlacement);
|
|
24
31
|
const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
|
|
25
32
|
const descriptionId = React.useId();
|
|
26
33
|
const feedbackId = React.useId();
|
|
@@ -28,19 +35,24 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
28
35
|
const spacingConfig = getSpacingConfig(resolvedDescriptionPlacement, descriptionRenderedInline);
|
|
29
36
|
const ariaDescribedBy = [descriptionRenderedInline ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
|
|
30
37
|
const labelElement = effectiveLabel != null && /* @__PURE__ */ jsx(FormItemLabel, {
|
|
31
|
-
...itemComponentsProps.label,
|
|
32
38
|
id,
|
|
33
39
|
label: effectiveLabel,
|
|
34
40
|
asterisk,
|
|
35
41
|
error: feedbackStatus === "error",
|
|
36
42
|
shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
|
|
37
|
-
|
|
43
|
+
labelProps: {
|
|
44
|
+
...fieldLabelProps,
|
|
45
|
+
...itemComponentsProps.label,
|
|
46
|
+
...slots?.label,
|
|
47
|
+
className: cn(effectiveLabelPlacement === "top" ? spacingConfig.label : "mb-0", fieldLabelProps?.className, itemComponentsProps.label?.className, slots?.label?.className)
|
|
48
|
+
},
|
|
38
49
|
description,
|
|
39
50
|
descriptionInPopover: resolvedDescriptionPlacement === "popover" && description != null
|
|
40
51
|
});
|
|
41
52
|
const inputElement = /* @__PURE__ */ jsx("div", {
|
|
42
53
|
...itemComponentsProps.inputWrapper,
|
|
43
|
-
|
|
54
|
+
...slots?.inputWrapper,
|
|
55
|
+
className: cn("relative", itemComponentsProps.inputWrapper?.className, slots?.inputWrapper?.className),
|
|
44
56
|
children: React.isValidElement(children) ? React.cloneElement(children, {
|
|
45
57
|
id,
|
|
46
58
|
"aria-describedby": ariaDescribedBy || void 0,
|
|
@@ -49,8 +61,9 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
49
61
|
});
|
|
50
62
|
const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ jsx("p", {
|
|
51
63
|
...itemComponentsProps.description,
|
|
64
|
+
...slots?.description,
|
|
52
65
|
id: descriptionId,
|
|
53
|
-
className: cn("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className),
|
|
66
|
+
className: cn("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className, slots?.description?.className),
|
|
54
67
|
children: description
|
|
55
68
|
}) : null;
|
|
56
69
|
const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -70,12 +83,14 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
|
|
|
70
83
|
return /* @__PURE__ */ jsxs("div", {
|
|
71
84
|
"data-slot": "form-item",
|
|
72
85
|
...itemComponentsProps.container,
|
|
86
|
+
...slots?.container,
|
|
73
87
|
...props,
|
|
74
|
-
className: cn("flex flex-col ", className, itemComponentsProps.container?.className),
|
|
88
|
+
className: cn("flex flex-col ", className, itemComponentsProps.container?.className, slots?.container?.className),
|
|
75
89
|
children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ jsx("p", {
|
|
76
90
|
...itemComponentsProps.error,
|
|
91
|
+
...slots?.error,
|
|
77
92
|
id: feedbackId,
|
|
78
|
-
className: cn("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", itemComponentsProps.error?.className),
|
|
93
|
+
className: cn("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", itemComponentsProps.error?.className, slots?.error?.className),
|
|
79
94
|
children: typeof feedbackText === "string" ? feedbackText.split("\n").map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [line, index < feedbackText.split("\n").length - 1 && /* @__PURE__ */ jsx("br", {})] }, index)) : feedbackText
|
|
80
95
|
})]
|
|
81
96
|
});
|
|
@@ -8,12 +8,14 @@ let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
|
8
8
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
9
9
|
|
|
10
10
|
//#region src/components/form-item/form-item-label.tsx
|
|
11
|
-
function FormItemLabel({ id, label, asterisk, error, shrink,
|
|
11
|
+
function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
|
|
12
|
+
const { className, placement: _placement,...restLabelProps } = labelProps ?? {};
|
|
12
13
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
13
14
|
htmlFor: id,
|
|
14
15
|
"data-slot": "form-label",
|
|
15
16
|
"data-error": Boolean(error),
|
|
16
|
-
|
|
17
|
+
...restLabelProps,
|
|
18
|
+
className: (0, __pixpilot_shadcn.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", className),
|
|
17
19
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
18
20
|
className: "inline-flex items-center gap-1",
|
|
19
21
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_item_description_popover.FormItemDescriptionPopover, { description })]
|
|
@@ -4,12 +4,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { cn } from "@pixpilot/shadcn";
|
|
5
5
|
|
|
6
6
|
//#region src/components/form-item/form-item-label.tsx
|
|
7
|
-
function FormItemLabel({ id, label, asterisk, error, shrink,
|
|
7
|
+
function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
|
|
8
|
+
const { className, placement: _placement,...restLabelProps } = labelProps ?? {};
|
|
8
9
|
return /* @__PURE__ */ jsxs("label", {
|
|
9
10
|
htmlFor: id,
|
|
10
11
|
"data-slot": "form-label",
|
|
11
12
|
"data-error": Boolean(error),
|
|
12
|
-
|
|
13
|
+
...restLabelProps,
|
|
14
|
+
className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", className),
|
|
13
15
|
children: [/* @__PURE__ */ jsxs("span", {
|
|
14
16
|
className: "inline-flex items-center gap-1",
|
|
15
17
|
children: [/* @__PURE__ */ jsx("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ jsx(FormItemDescriptionPopover, { description })]
|
|
@@ -4,9 +4,20 @@ import React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/form-item/form-item-types.d.ts
|
|
6
6
|
type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
|
|
7
|
+
type FormItemLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, 'children' | 'htmlFor'> & {
|
|
8
|
+
placement?: LabelPlacement;
|
|
9
|
+
};
|
|
10
|
+
interface FormItemSlots {
|
|
11
|
+
label?: FormItemLabelProps;
|
|
12
|
+
description?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
13
|
+
inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
container?: React.HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
error?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
16
|
+
}
|
|
7
17
|
interface FormItemProps extends React.ComponentProps<'div'> {
|
|
8
18
|
label?: SyncReactNode;
|
|
9
19
|
description?: SyncReactNode;
|
|
20
|
+
slots?: FormItemSlots;
|
|
10
21
|
/**
|
|
11
22
|
* Controls where `description` is rendered relative to the input.
|
|
12
23
|
* - `top`: above the input
|
|
@@ -17,7 +28,6 @@ interface FormItemProps extends React.ComponentProps<'div'> {
|
|
|
17
28
|
asterisk?: boolean;
|
|
18
29
|
feedbackStatus?: 'error' | 'warning' | 'success';
|
|
19
30
|
feedbackText?: SyncReactNode;
|
|
20
|
-
labelPlacement?: LabelPlacement;
|
|
21
31
|
}
|
|
22
32
|
//#endregion
|
|
23
|
-
export { FormItemProps, LabelPlacement };
|
|
33
|
+
export { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };
|
|
@@ -4,9 +4,20 @@ import React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/form-item/form-item-types.d.ts
|
|
6
6
|
type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
|
|
7
|
+
type FormItemLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, 'children' | 'htmlFor'> & {
|
|
8
|
+
placement?: LabelPlacement;
|
|
9
|
+
};
|
|
10
|
+
interface FormItemSlots {
|
|
11
|
+
label?: FormItemLabelProps;
|
|
12
|
+
description?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
13
|
+
inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
container?: React.HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
error?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
16
|
+
}
|
|
7
17
|
interface FormItemProps extends React.ComponentProps<'div'> {
|
|
8
18
|
label?: SyncReactNode;
|
|
9
19
|
description?: SyncReactNode;
|
|
20
|
+
slots?: FormItemSlots;
|
|
10
21
|
/**
|
|
11
22
|
* Controls where `description` is rendered relative to the input.
|
|
12
23
|
* - `top`: above the input
|
|
@@ -17,7 +28,6 @@ interface FormItemProps extends React.ComponentProps<'div'> {
|
|
|
17
28
|
asterisk?: boolean;
|
|
18
29
|
feedbackStatus?: 'error' | 'warning' | 'success';
|
|
19
30
|
feedbackText?: SyncReactNode;
|
|
20
|
-
labelPlacement?: LabelPlacement;
|
|
21
31
|
}
|
|
22
32
|
//#endregion
|
|
23
|
-
export { FormItemProps, LabelPlacement };
|
|
33
|
+
export { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DescriptionPlacement } from "../../types/form-item.cjs";
|
|
2
|
-
import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
|
|
2
|
+
import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
|
|
3
3
|
import "./base-form-item.cjs";
|
|
4
4
|
import { FormItem } from "./connected-form-item.cjs";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DescriptionPlacement } from "../../types/form-item.js";
|
|
2
|
-
import { FormItemProps, LabelPlacement } from "./form-item-types.js";
|
|
2
|
+
import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
|
|
3
3
|
import "./base-form-item.js";
|
|
4
4
|
import { FormItem } from "./connected-form-item.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DescriptionPlacement } from "../../types/form-item.cjs";
|
|
2
|
-
import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
|
|
2
|
+
import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
|
|
3
3
|
import { FormItem } from "./connected-form-item.cjs";
|
|
4
4
|
import "./form-item.cjs";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DescriptionPlacement } from "../../types/form-item.js";
|
|
2
|
-
import { FormItemProps, LabelPlacement } from "./form-item-types.js";
|
|
2
|
+
import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
|
|
3
3
|
import { FormItem } from "./connected-form-item.js";
|
|
4
4
|
import "./form-item.js";
|
|
@@ -2,7 +2,7 @@ import { FormContextStates } from "./context/form-context.cjs";
|
|
|
2
2
|
import "./context/index.cjs";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Form } from "@formily/core";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/components/form.d.ts
|
|
8
8
|
interface IFormProps extends FormContextStates {
|
|
@@ -25,6 +25,6 @@ declare function Form$1({
|
|
|
25
25
|
onAutoSubmit,
|
|
26
26
|
layout,
|
|
27
27
|
settings
|
|
28
|
-
}: IFormProps):
|
|
28
|
+
}: IFormProps): react_jsx_runtime0.JSX.Element;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { Form$1 as Form };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FormContextStates } from "./context/form-context.js";
|
|
2
2
|
import "./context/index.js";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
5
5
|
import { Form } from "@formily/core";
|
|
6
6
|
|
|
7
7
|
//#region src/components/form.d.ts
|
|
@@ -25,6 +25,6 @@ declare function Form$1({
|
|
|
25
25
|
onAutoSubmit,
|
|
26
26
|
layout,
|
|
27
27
|
settings
|
|
28
|
-
}: IFormProps):
|
|
28
|
+
}: IFormProps): react_jsx_runtime1.JSX.Element;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { Form$1 as Form };
|