@pixpilot/formily-shadcn 0.8.0 → 0.8.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.
- package/dist/_virtual/rolldown_runtime.cjs +25 -1
- package/dist/_virtual/rolldown_runtime.js +24 -1
- package/dist/components/array-base/array-base.cjs +59 -1
- package/dist/components/array-base/array-base.js +55 -1
- package/dist/components/array-base/array-context.cjs +28 -1
- package/dist/components/array-base/array-context.js +22 -1
- package/dist/components/array-base/component-context.cjs +28 -1
- package/dist/components/array-base/component-context.js +22 -1
- package/dist/components/array-base/components/addition.cjs +51 -1
- package/dist/components/array-base/components/addition.js +45 -1
- package/dist/components/array-base/components/array-copy.cjs +49 -1
- package/dist/components/array-base/components/array-copy.js +42 -1
- package/dist/components/array-base/components/array-index.cjs +15 -1
- package/dist/components/array-base/components/array-index.js +13 -1
- package/dist/components/array-base/components/array-item-label.cjs +22 -1
- package/dist/components/array-base/components/array-item-label.js +19 -1
- package/dist/components/array-base/components/components.cjs +30 -1
- package/dist/components/array-base/components/components.js +29 -1
- package/dist/components/array-base/components/edit.cjs +42 -1
- package/dist/components/array-base/components/edit.js +36 -1
- package/dist/components/array-base/components/empty.cjs +19 -1
- package/dist/components/array-base/components/empty.js +16 -1
- package/dist/components/array-base/components/get-array-components.cjs +88 -1
- package/dist/components/array-base/components/get-array-components.js +84 -1
- package/dist/components/array-base/components/move-down.cjs +47 -1
- package/dist/components/array-base/components/move-down.js +41 -1
- package/dist/components/array-base/components/move-up.cjs +47 -1
- package/dist/components/array-base/components/move-up.js +41 -1
- package/dist/components/array-base/components/remove.cjs +46 -1
- package/dist/components/array-base/components/remove.js +40 -1
- package/dist/components/array-base/components/title.cjs +17 -1
- package/dist/components/array-base/components/title.js +14 -1
- package/dist/components/array-base/components/use-array-components-registry.cjs +56 -1
- package/dist/components/array-base/components/use-array-components-registry.js +52 -1
- package/dist/components/array-base/constants/index.cjs +17 -1
- package/dist/components/array-base/constants/index.js +15 -1
- package/dist/components/array-base/index.cjs +2 -1
- package/dist/components/array-base/index.js +2 -1
- package/dist/components/array-base/utils/filter-and-sort-components.cjs +34 -1
- package/dist/components/array-base/utils/filter-and-sort-components.js +34 -1
- package/dist/components/array-base/utils/is-array-component.cjs +65 -1
- package/dist/components/array-base/utils/is-array-component.js +56 -1
- package/dist/components/array-cards/array-cards.cjs +64 -1
- package/dist/components/array-cards/array-cards.js +60 -1
- package/dist/components/array-cards/index.cjs +1 -1
- package/dist/components/array-cards/index.js +1 -1
- package/dist/components/array-cards/item.cjs +64 -1
- package/dist/components/array-cards/item.js +60 -1
- package/dist/components/array-collapse/array-collapse.cjs +96 -1
- package/dist/components/array-collapse/array-collapse.js +92 -1
- package/dist/components/array-collapse/index.cjs +1 -1
- package/dist/components/array-collapse/index.js +1 -1
- package/dist/components/array-collapse/item.cjs +84 -1
- package/dist/components/array-collapse/item.js +78 -1
- package/dist/components/array-common/array-items-list.cjs +43 -1
- package/dist/components/array-common/array-items-list.js +39 -1
- package/dist/components/array-common/create-active-item-manager.cjs +29 -1
- package/dist/components/array-common/create-active-item-manager.js +27 -1
- package/dist/components/array-common/index.cjs +5 -1
- package/dist/components/array-common/index.js +5 -1
- package/dist/components/array-common/item-wrapper.cjs +26 -1
- package/dist/components/array-common/item-wrapper.js +21 -1
- package/dist/components/array-common/list-item.cjs +53 -1
- package/dist/components/array-common/list-item.js +48 -1
- package/dist/components/array-common/use-array-editor.cjs +47 -1
- package/dist/components/array-common/use-array-editor.js +44 -1
- package/dist/components/array-dialog/array-dialog.cjs +66 -1
- package/dist/components/array-dialog/array-dialog.js +62 -1
- package/dist/components/array-dialog/edit-dialog.cjs +61 -1
- package/dist/components/array-dialog/edit-dialog.js +57 -1
- package/dist/components/array-dialog/index.cjs +1 -1
- package/dist/components/array-dialog/index.js +1 -1
- package/dist/components/array-popover/array-popover.cjs +58 -1
- package/dist/components/array-popover/array-popover.js +53 -1
- package/dist/components/array-popover/index.cjs +1 -1
- package/dist/components/array-popover/index.js +1 -1
- package/dist/components/array-popover/popover.cjs +75 -1
- package/dist/components/array-popover/popover.js +71 -1
- package/dist/components/checkbox.cjs +26 -1
- package/dist/components/checkbox.js +23 -1
- package/dist/components/column.cjs +39 -1
- package/dist/components/column.js +35 -1
- package/dist/components/combobox.cjs +14 -1
- package/dist/components/combobox.js +11 -1
- package/dist/components/context/context.cjs +7 -1
- package/dist/components/context/context.js +7 -1
- package/dist/components/context/form-context.cjs +9 -1
- package/dist/components/context/form-context.js +7 -1
- package/dist/components/context/index.cjs +2 -1
- package/dist/components/context/index.js +2 -1
- package/dist/components/date-picker.cjs +23 -1
- package/dist/components/date-picker.js +19 -1
- package/dist/components/file-upload/file-upload-inline.cjs +35 -1
- package/dist/components/file-upload/file-upload-inline.js +30 -1
- package/dist/components/file-upload/file-upload.cjs +35 -1
- package/dist/components/file-upload/file-upload.js +30 -1
- package/dist/components/file-upload/index.cjs +2 -1
- package/dist/components/file-upload/index.js +2 -1
- package/dist/components/file-upload/use-file-upload-feedback.cjs +59 -3
- package/dist/components/file-upload/use-file-upload-feedback.js +53 -3
- package/dist/components/form-grid.cjs +19 -1
- package/dist/components/form-grid.js +15 -1
- package/dist/components/form-item.cjs +118 -3
- package/dist/components/form-item.js +112 -3
- package/dist/components/form-items-container.cjs +28 -1
- package/dist/components/form-items-container.js +24 -1
- package/dist/components/form.cjs +56 -1
- package/dist/components/form.js +51 -1
- package/dist/components/hidden.cjs +26 -1
- package/dist/components/hidden.js +23 -1
- package/dist/components/icon-picker.cjs +37 -1
- package/dist/components/icon-picker.js +33 -1
- package/dist/components/input.cjs +20 -1
- package/dist/components/input.js +17 -1
- package/dist/components/json-schema-form-renderer.cjs +30 -1
- package/dist/components/json-schema-form-renderer.js +26 -1
- package/dist/components/number-input.cjs +19 -1
- package/dist/components/number-input.d.ts +2 -2
- package/dist/components/number-input.js +16 -1
- package/dist/components/object-container.cjs +35 -1
- package/dist/components/object-container.js +32 -1
- package/dist/components/radio.cjs +40 -1
- package/dist/components/radio.js +35 -1
- package/dist/components/rich-text-editor.cjs +27 -1
- package/dist/components/rich-text-editor.js +23 -1
- package/dist/components/row.cjs +39 -1
- package/dist/components/row.js +35 -1
- package/dist/components/schema-field-extended.cjs +25 -1
- package/dist/components/schema-field-extended.d.cts +9 -9
- package/dist/components/schema-field-extended.d.ts +262 -262
- package/dist/components/schema-field-extended.js +23 -1
- package/dist/components/schema-field.cjs +61 -1
- package/dist/components/schema-field.d.cts +9 -9
- package/dist/components/schema-field.d.ts +220 -220
- package/dist/components/schema-field.js +57 -1
- package/dist/components/select.cjs +11 -1
- package/dist/components/select.js +8 -1
- package/dist/components/separator.cjs +15 -1
- package/dist/components/separator.d.ts +2 -2
- package/dist/components/separator.js +12 -1
- package/dist/components/slider.cjs +33 -1
- package/dist/components/slider.d.ts +2 -2
- package/dist/components/slider.js +29 -1
- package/dist/components/switch.cjs +21 -1
- package/dist/components/switch.js +18 -1
- package/dist/components/tags-input-inline.cjs +26 -1
- package/dist/components/tags-input-inline.js +23 -1
- package/dist/components/textarea.cjs +19 -1
- package/dist/components/textarea.js +16 -1
- package/dist/hooks/index.cjs +3 -1
- package/dist/hooks/index.js +3 -1
- package/dist/hooks/use-description.cjs +14 -1
- package/dist/hooks/use-description.js +12 -1
- package/dist/hooks/use-form-context.cjs +13 -1
- package/dist/hooks/use-form-context.js +11 -1
- package/dist/hooks/use-label.cjs +19 -1
- package/dist/hooks/use-label.js +16 -1
- package/dist/index.cjs +102 -1
- package/dist/index.js +35 -1
- package/dist/utils/create-panel-state-manager.cjs +40 -1
- package/dist/utils/create-panel-state-manager.js +38 -1
- package/dist/utils/for-each-schema.cjs +27 -1
- package/dist/utils/for-each-schema.js +26 -1
- package/dist/utils/get-array-item-info.cjs +20 -1
- package/dist/utils/get-array-item-info.js +19 -1
- package/dist/utils/get-default-value.cjs +22 -1
- package/dist/utils/get-default-value.js +20 -1
- package/dist/utils/has-array-item-errors.cjs +15 -1
- package/dist/utils/has-array-item-errors.js +14 -1
- package/dist/utils/has-error.cjs +12 -1
- package/dist/utils/has-error.js +10 -1
- package/dist/utils/index.cjs +10 -1
- package/dist/utils/index.js +10 -1
- package/dist/utils/resolve-responsive-space.cjs +131 -1
- package/dist/utils/resolve-responsive-space.js +123 -1
- package/dist/utils/transform-schema.cjs +45 -1
- package/dist/utils/transform-schema.js +43 -1
- package/dist/utils/use-array-item-editor.cjs +3 -1
- package/dist/utils/use-array-item-editor.js +1 -1
- package/dist/utils/validate-array-item-fields.cjs +22 -1
- package/dist/utils/validate-array-item-fields.js +22 -1
- package/package.json +5 -5
|
@@ -1 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "@pixpilot/shadcn";
|
|
4
|
+
|
|
5
|
+
//#region src/components/form-grid.tsx
|
|
6
|
+
function FormGrid({ className, children,...rest }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("div", {
|
|
8
|
+
...rest,
|
|
9
|
+
className: cn("grid gap-4 grid-cols-3", className),
|
|
10
|
+
children
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { FormGrid };
|
|
@@ -1,3 +1,118 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_use_form_context = require('../hooks/use-form-context.cjs');
|
|
3
|
+
const require_use_label = require('../hooks/use-label.cjs');
|
|
4
|
+
require('../hooks/index.cjs');
|
|
5
|
+
let __formily_react = require("@formily/react");
|
|
6
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
7
|
+
let react = require("react");
|
|
8
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
11
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
12
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
13
|
+
let __formily_core = require("@formily/core");
|
|
14
|
+
__formily_core = require_rolldown_runtime.__toESM(__formily_core);
|
|
15
|
+
|
|
16
|
+
//#region src/components/form-item.tsx
|
|
17
|
+
const BaseFormItem = ({ className, children, label, description, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
|
|
18
|
+
const field = (0, __formily_react.useField)();
|
|
19
|
+
const fieldProps = field?.componentProps ?? {};
|
|
20
|
+
const effectiveLabel = require_use_label.useLabel(label);
|
|
21
|
+
const { itemProps } = require_use_form_context.useFormContext();
|
|
22
|
+
const { className: itemPropsClassName } = itemProps || {};
|
|
23
|
+
const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
|
|
24
|
+
const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
|
|
25
|
+
const descriptionId = react.default.useId();
|
|
26
|
+
const feedbackId = react.default.useId();
|
|
27
|
+
const ariaDescribedBy = [description != null ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
|
|
28
|
+
const labelElement = effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
29
|
+
htmlFor: id,
|
|
30
|
+
"data-slot": "form-label",
|
|
31
|
+
"data-error": Boolean(feedbackStatus === "error"),
|
|
32
|
+
className: (0, __pixpilot_shadcn.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", feedbackStatus === "error" && "text-destructive", (effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start") && "shrink-0"),
|
|
33
|
+
children: [effectiveLabel, asterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
34
|
+
className: "text-destructive ml-1",
|
|
35
|
+
"aria-label": "required",
|
|
36
|
+
children: "*"
|
|
37
|
+
})]
|
|
38
|
+
});
|
|
39
|
+
const inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
40
|
+
className: "relative",
|
|
41
|
+
children: react.default.isValidElement(children) ? react.default.cloneElement(children, {
|
|
42
|
+
id,
|
|
43
|
+
"aria-describedby": ariaDescribedBy || void 0,
|
|
44
|
+
"aria-invalid": feedbackStatus === "error" ? "true" : void 0
|
|
45
|
+
}) : children
|
|
46
|
+
});
|
|
47
|
+
const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
48
|
+
effectiveLabelPlacement === "top" && labelElement,
|
|
49
|
+
description != null && effectiveLabelPlacement === "top" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
50
|
+
id: descriptionId,
|
|
51
|
+
className: "text-muted-foreground text-[0.8rem]",
|
|
52
|
+
children: description
|
|
53
|
+
}),
|
|
54
|
+
(effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
55
|
+
className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", effectiveLabelPlacement === "start" && "flex-row"),
|
|
56
|
+
children: [
|
|
57
|
+
effectiveLabelPlacement === "start" && labelElement,
|
|
58
|
+
inputElement,
|
|
59
|
+
effectiveLabelPlacement === "end" && labelElement
|
|
60
|
+
]
|
|
61
|
+
}),
|
|
62
|
+
effectiveLabelPlacement === "top" && inputElement,
|
|
63
|
+
description != null && (effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
64
|
+
id: descriptionId,
|
|
65
|
+
className: "text-muted-foreground text-[0.8rem]",
|
|
66
|
+
children: description
|
|
67
|
+
})
|
|
68
|
+
] });
|
|
69
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
70
|
+
"data-slot": "form-item",
|
|
71
|
+
className: (0, __pixpilot_shadcn.cn)("flex flex-col gap-2", itemPropsClassName, className),
|
|
72
|
+
...props,
|
|
73
|
+
children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
74
|
+
id: feedbackId,
|
|
75
|
+
className: (0, __pixpilot_shadcn.cn)("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
|
|
76
|
+
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
|
|
77
|
+
})]
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* FormItem component connected to Formily field state
|
|
82
|
+
* Automatically maps field validation state to component props
|
|
83
|
+
*/
|
|
84
|
+
const FormItem = (0, __formily_react.connect)(BaseFormItem, (0, __formily_react.mapProps)((props, field) => {
|
|
85
|
+
if ((0, __formily_core.isVoidField)(field)) return {
|
|
86
|
+
label: field.title ?? props.label,
|
|
87
|
+
description: props.description ?? field.description,
|
|
88
|
+
asterisk: props.asterisk
|
|
89
|
+
};
|
|
90
|
+
const takeFeedbackStatus = () => {
|
|
91
|
+
if (field.validating) return void 0;
|
|
92
|
+
if (field.selfErrors?.length) return "error";
|
|
93
|
+
if (field.selfWarnings?.length) return "warning";
|
|
94
|
+
if (field.selfSuccesses?.length) return "success";
|
|
95
|
+
};
|
|
96
|
+
const takeFeedbackText = () => {
|
|
97
|
+
if (field.validating) return void 0;
|
|
98
|
+
if (props.feedbackText != null) return props.feedbackText;
|
|
99
|
+
if (field.selfErrors?.length) return field.selfErrors.join(", ");
|
|
100
|
+
if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
|
|
101
|
+
if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
|
|
102
|
+
};
|
|
103
|
+
const takeAsterisk = () => {
|
|
104
|
+
if (field.required && field.pattern !== "readPretty") return true;
|
|
105
|
+
if ("asterisk" in props) return Boolean(props.asterisk);
|
|
106
|
+
return false;
|
|
107
|
+
};
|
|
108
|
+
return {
|
|
109
|
+
label: props.label ?? field.title,
|
|
110
|
+
description: props.description ?? field.description,
|
|
111
|
+
feedbackStatus: takeFeedbackStatus(),
|
|
112
|
+
feedbackText: takeFeedbackText(),
|
|
113
|
+
asterisk: takeAsterisk()
|
|
114
|
+
};
|
|
115
|
+
}));
|
|
116
|
+
|
|
117
|
+
//#endregion
|
|
118
|
+
exports.FormItem = FormItem;
|
|
@@ -1,3 +1,112 @@
|
|
|
1
|
-
import{useFormContext
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { useFormContext } from "../hooks/use-form-context.js";
|
|
2
|
+
import { useLabel } from "../hooks/use-label.js";
|
|
3
|
+
import "../hooks/index.js";
|
|
4
|
+
import { connect, mapProps, useField } from "@formily/react";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { cn } from "@pixpilot/shadcn";
|
|
8
|
+
import { isVoidField } from "@formily/core";
|
|
9
|
+
|
|
10
|
+
//#region src/components/form-item.tsx
|
|
11
|
+
const BaseFormItem = ({ className, children, label, description, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
|
|
12
|
+
const field = useField();
|
|
13
|
+
const fieldProps = field?.componentProps ?? {};
|
|
14
|
+
const effectiveLabel = useLabel(label);
|
|
15
|
+
const { itemProps } = useFormContext();
|
|
16
|
+
const { className: itemPropsClassName } = itemProps || {};
|
|
17
|
+
const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
|
|
18
|
+
const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
|
|
19
|
+
const descriptionId = React.useId();
|
|
20
|
+
const feedbackId = React.useId();
|
|
21
|
+
const ariaDescribedBy = [description != null ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
|
|
22
|
+
const labelElement = effectiveLabel != null && /* @__PURE__ */ jsxs("label", {
|
|
23
|
+
htmlFor: id,
|
|
24
|
+
"data-slot": "form-label",
|
|
25
|
+
"data-error": Boolean(feedbackStatus === "error"),
|
|
26
|
+
className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", feedbackStatus === "error" && "text-destructive", (effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start") && "shrink-0"),
|
|
27
|
+
children: [effectiveLabel, asterisk && /* @__PURE__ */ jsx("span", {
|
|
28
|
+
className: "text-destructive ml-1",
|
|
29
|
+
"aria-label": "required",
|
|
30
|
+
children: "*"
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
const inputElement = /* @__PURE__ */ jsx("div", {
|
|
34
|
+
className: "relative",
|
|
35
|
+
children: React.isValidElement(children) ? React.cloneElement(children, {
|
|
36
|
+
id,
|
|
37
|
+
"aria-describedby": ariaDescribedBy || void 0,
|
|
38
|
+
"aria-invalid": feedbackStatus === "error" ? "true" : void 0
|
|
39
|
+
}) : children
|
|
40
|
+
});
|
|
41
|
+
const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
effectiveLabelPlacement === "top" && labelElement,
|
|
43
|
+
description != null && effectiveLabelPlacement === "top" && /* @__PURE__ */ jsx("p", {
|
|
44
|
+
id: descriptionId,
|
|
45
|
+
className: "text-muted-foreground text-[0.8rem]",
|
|
46
|
+
children: description
|
|
47
|
+
}),
|
|
48
|
+
(effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ jsxs("div", {
|
|
49
|
+
className: cn("flex items-center gap-2", effectiveLabelPlacement === "start" && "flex-row"),
|
|
50
|
+
children: [
|
|
51
|
+
effectiveLabelPlacement === "start" && labelElement,
|
|
52
|
+
inputElement,
|
|
53
|
+
effectiveLabelPlacement === "end" && labelElement
|
|
54
|
+
]
|
|
55
|
+
}),
|
|
56
|
+
effectiveLabelPlacement === "top" && inputElement,
|
|
57
|
+
description != null && (effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ jsx("p", {
|
|
58
|
+
id: descriptionId,
|
|
59
|
+
className: "text-muted-foreground text-[0.8rem]",
|
|
60
|
+
children: description
|
|
61
|
+
})
|
|
62
|
+
] });
|
|
63
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
64
|
+
"data-slot": "form-item",
|
|
65
|
+
className: cn("flex flex-col gap-2", itemPropsClassName, className),
|
|
66
|
+
...props,
|
|
67
|
+
children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ jsx("p", {
|
|
68
|
+
id: feedbackId,
|
|
69
|
+
className: cn("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
|
|
70
|
+
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
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* FormItem component connected to Formily field state
|
|
76
|
+
* Automatically maps field validation state to component props
|
|
77
|
+
*/
|
|
78
|
+
const FormItem = connect(BaseFormItem, mapProps((props, field) => {
|
|
79
|
+
if (isVoidField(field)) return {
|
|
80
|
+
label: field.title ?? props.label,
|
|
81
|
+
description: props.description ?? field.description,
|
|
82
|
+
asterisk: props.asterisk
|
|
83
|
+
};
|
|
84
|
+
const takeFeedbackStatus = () => {
|
|
85
|
+
if (field.validating) return void 0;
|
|
86
|
+
if (field.selfErrors?.length) return "error";
|
|
87
|
+
if (field.selfWarnings?.length) return "warning";
|
|
88
|
+
if (field.selfSuccesses?.length) return "success";
|
|
89
|
+
};
|
|
90
|
+
const takeFeedbackText = () => {
|
|
91
|
+
if (field.validating) return void 0;
|
|
92
|
+
if (props.feedbackText != null) return props.feedbackText;
|
|
93
|
+
if (field.selfErrors?.length) return field.selfErrors.join(", ");
|
|
94
|
+
if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
|
|
95
|
+
if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
|
|
96
|
+
};
|
|
97
|
+
const takeAsterisk = () => {
|
|
98
|
+
if (field.required && field.pattern !== "readPretty") return true;
|
|
99
|
+
if ("asterisk" in props) return Boolean(props.asterisk);
|
|
100
|
+
return false;
|
|
101
|
+
};
|
|
102
|
+
return {
|
|
103
|
+
label: props.label ?? field.title,
|
|
104
|
+
description: props.description ?? field.description,
|
|
105
|
+
feedbackStatus: takeFeedbackStatus(),
|
|
106
|
+
feedbackText: takeFeedbackText(),
|
|
107
|
+
asterisk: takeAsterisk()
|
|
108
|
+
};
|
|
109
|
+
}));
|
|
110
|
+
|
|
111
|
+
//#endregion
|
|
112
|
+
export { FormItem };
|
|
@@ -1 +1,28 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_resolve_responsive_space = require('../utils/resolve-responsive-space.cjs');
|
|
3
|
+
const require_use_form_context = require('../hooks/use-form-context.cjs');
|
|
4
|
+
require('../hooks/index.cjs');
|
|
5
|
+
let react = require("react");
|
|
6
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
7
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
9
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
10
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
11
|
+
|
|
12
|
+
//#region src/components/form-items-container.tsx
|
|
13
|
+
const FormItemContainer = (props) => {
|
|
14
|
+
const { as: Component = "div", className,...rest } = props;
|
|
15
|
+
const { density, responsive } = require_use_form_context.useFormContext();
|
|
16
|
+
const spaceClass = require_resolve_responsive_space.resolveResponsiveSpaceClass({
|
|
17
|
+
density,
|
|
18
|
+
responsive
|
|
19
|
+
});
|
|
20
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
|
|
21
|
+
...rest,
|
|
22
|
+
className: (0, __pixpilot_shadcn.cn)(spaceClass, className)
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
FormItemContainer.displayName = "FormItemContainer";
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
exports.FormItemContainer = FormItemContainer;
|
|
@@ -1 +1,24 @@
|
|
|
1
|
-
import{resolveResponsiveSpaceClass
|
|
1
|
+
import { resolveResponsiveSpaceClass } from "../utils/resolve-responsive-space.js";
|
|
2
|
+
import { useFormContext } from "../hooks/use-form-context.js";
|
|
3
|
+
import "../hooks/index.js";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { cn } from "@pixpilot/shadcn";
|
|
7
|
+
|
|
8
|
+
//#region src/components/form-items-container.tsx
|
|
9
|
+
const FormItemContainer = (props) => {
|
|
10
|
+
const { as: Component = "div", className,...rest } = props;
|
|
11
|
+
const { density, responsive } = useFormContext();
|
|
12
|
+
const spaceClass = resolveResponsiveSpaceClass({
|
|
13
|
+
density,
|
|
14
|
+
responsive
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
17
|
+
...rest,
|
|
18
|
+
className: cn(spaceClass, className)
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
FormItemContainer.displayName = "FormItemContainer";
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { FormItemContainer };
|
package/dist/components/form.cjs
CHANGED
|
@@ -1 +1,56 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_context = require('./context/context.cjs');
|
|
3
|
+
require('./context/index.cjs');
|
|
4
|
+
const require_form_items_container = require('./form-items-container.cjs');
|
|
5
|
+
let __formily_react = require("@formily/react");
|
|
6
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
7
|
+
let react = require("react");
|
|
8
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
11
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
12
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
13
|
+
|
|
14
|
+
//#region src/components/form.tsx
|
|
15
|
+
/**
|
|
16
|
+
* Form component - wraps FormProvider and provides form context
|
|
17
|
+
*/
|
|
18
|
+
function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, responsive, config }) {
|
|
19
|
+
const handleSubmit = (e) => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
form.submit((values) => {
|
|
22
|
+
onSubmit?.(values);
|
|
23
|
+
onAutoSubmit?.(values);
|
|
24
|
+
}).catch(() => {});
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.Provider, {
|
|
27
|
+
value: react.default.useMemo(() => {
|
|
28
|
+
return {
|
|
29
|
+
itemProps,
|
|
30
|
+
objectContainerProps,
|
|
31
|
+
density,
|
|
32
|
+
responsive,
|
|
33
|
+
config
|
|
34
|
+
};
|
|
35
|
+
}, [
|
|
36
|
+
itemProps,
|
|
37
|
+
objectContainerProps,
|
|
38
|
+
density,
|
|
39
|
+
responsive,
|
|
40
|
+
config
|
|
41
|
+
]),
|
|
42
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.FormProvider, {
|
|
43
|
+
form,
|
|
44
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
|
|
45
|
+
as: "form",
|
|
46
|
+
className: (0, __pixpilot_shadcn.cn)("space-y-6", className),
|
|
47
|
+
style,
|
|
48
|
+
onSubmit: handleSubmit,
|
|
49
|
+
children
|
|
50
|
+
})
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
//#endregion
|
|
56
|
+
exports.Form = Form;
|
package/dist/components/form.js
CHANGED
|
@@ -1 +1,51 @@
|
|
|
1
|
-
import{Provider
|
|
1
|
+
import { Provider } from "./context/context.js";
|
|
2
|
+
import "./context/index.js";
|
|
3
|
+
import { FormItemContainer } from "./form-items-container.js";
|
|
4
|
+
import { FormProvider } from "@formily/react";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { cn } from "@pixpilot/shadcn";
|
|
8
|
+
|
|
9
|
+
//#region src/components/form.tsx
|
|
10
|
+
/**
|
|
11
|
+
* Form component - wraps FormProvider and provides form context
|
|
12
|
+
*/
|
|
13
|
+
function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, responsive, config }) {
|
|
14
|
+
const handleSubmit = (e) => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
form.submit((values) => {
|
|
17
|
+
onSubmit?.(values);
|
|
18
|
+
onAutoSubmit?.(values);
|
|
19
|
+
}).catch(() => {});
|
|
20
|
+
};
|
|
21
|
+
return /* @__PURE__ */ jsx(Provider, {
|
|
22
|
+
value: React.useMemo(() => {
|
|
23
|
+
return {
|
|
24
|
+
itemProps,
|
|
25
|
+
objectContainerProps,
|
|
26
|
+
density,
|
|
27
|
+
responsive,
|
|
28
|
+
config
|
|
29
|
+
};
|
|
30
|
+
}, [
|
|
31
|
+
itemProps,
|
|
32
|
+
objectContainerProps,
|
|
33
|
+
density,
|
|
34
|
+
responsive,
|
|
35
|
+
config
|
|
36
|
+
]),
|
|
37
|
+
children: /* @__PURE__ */ jsx(FormProvider, {
|
|
38
|
+
form,
|
|
39
|
+
children: /* @__PURE__ */ jsx(FormItemContainer, {
|
|
40
|
+
as: "form",
|
|
41
|
+
className: cn("space-y-6", className),
|
|
42
|
+
style,
|
|
43
|
+
onSubmit: handleSubmit,
|
|
44
|
+
children
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
//#endregion
|
|
51
|
+
export { Form };
|
|
@@ -1 +1,26 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let __formily_react = require("@formily/react");
|
|
3
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
4
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
6
|
+
|
|
7
|
+
//#region src/components/hidden.tsx
|
|
8
|
+
const HiddenInput = (props) => {
|
|
9
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
10
|
+
type: "hidden",
|
|
11
|
+
value: props.value
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Formily-connected Input component
|
|
16
|
+
* Automatically connects shadcn Input to Formily field state
|
|
17
|
+
*/
|
|
18
|
+
const Hidden = (0, __formily_react.connect)(HiddenInput, (0, __formily_react.mapProps)((props, field) => {
|
|
19
|
+
return {
|
|
20
|
+
...props,
|
|
21
|
+
value: field.value ?? ""
|
|
22
|
+
};
|
|
23
|
+
}));
|
|
24
|
+
|
|
25
|
+
//#endregion
|
|
26
|
+
exports.Hidden = Hidden;
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
import{connect
|
|
1
|
+
import { connect, mapProps } from "@formily/react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/hidden.tsx
|
|
5
|
+
const HiddenInput = (props) => {
|
|
6
|
+
return /* @__PURE__ */ jsx("input", {
|
|
7
|
+
type: "hidden",
|
|
8
|
+
value: props.value
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Formily-connected Input component
|
|
13
|
+
* Automatically connects shadcn Input to Formily field state
|
|
14
|
+
*/
|
|
15
|
+
const Hidden = connect(HiddenInput, mapProps((props, field) => {
|
|
16
|
+
return {
|
|
17
|
+
...props,
|
|
18
|
+
value: field.value ?? ""
|
|
19
|
+
};
|
|
20
|
+
}));
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { Hidden };
|
|
@@ -1 +1,37 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_use_form_context = require('../hooks/use-form-context.cjs');
|
|
3
|
+
require('../hooks/index.cjs');
|
|
4
|
+
let __formily_react = require("@formily/react");
|
|
5
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
6
|
+
let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
|
|
7
|
+
__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
10
|
+
|
|
11
|
+
//#region src/components/icon-picker.tsx
|
|
12
|
+
const IconPickerBase = (props) => {
|
|
13
|
+
const { providers: propProviders,...restProps } = props;
|
|
14
|
+
const { config } = require_use_form_context.useFormContext();
|
|
15
|
+
const { iconPicker } = config || {};
|
|
16
|
+
const { providers: contextProviders = [] } = iconPicker || {};
|
|
17
|
+
const providersToLoad = propProviders !== void 0 ? propProviders : contextProviders;
|
|
18
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.IconPicker, {
|
|
19
|
+
...restProps,
|
|
20
|
+
providers: providersToLoad
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Formily-connected IconPicker component
|
|
25
|
+
* Automatically connects to Formily field state
|
|
26
|
+
* Supports both static and async icon providers
|
|
27
|
+
*/
|
|
28
|
+
const IconPicker = (0, __formily_react.connect)(IconPickerBase, (0, __formily_react.mapProps)((props, field) => {
|
|
29
|
+
const formField = field;
|
|
30
|
+
return {
|
|
31
|
+
...props,
|
|
32
|
+
value: formField.value ?? ""
|
|
33
|
+
};
|
|
34
|
+
}));
|
|
35
|
+
|
|
36
|
+
//#endregion
|
|
37
|
+
exports.IconPicker = IconPicker;
|
|
@@ -1 +1,33 @@
|
|
|
1
|
-
import{useFormContext
|
|
1
|
+
import { useFormContext } from "../hooks/use-form-context.js";
|
|
2
|
+
import "../hooks/index.js";
|
|
3
|
+
import { connect, mapProps } from "@formily/react";
|
|
4
|
+
import { IconPicker } from "@pixpilot/shadcn-ui";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/components/icon-picker.tsx
|
|
8
|
+
const IconPickerBase = (props) => {
|
|
9
|
+
const { providers: propProviders,...restProps } = props;
|
|
10
|
+
const { config } = useFormContext();
|
|
11
|
+
const { iconPicker } = config || {};
|
|
12
|
+
const { providers: contextProviders = [] } = iconPicker || {};
|
|
13
|
+
const providersToLoad = propProviders !== void 0 ? propProviders : contextProviders;
|
|
14
|
+
return /* @__PURE__ */ jsx(IconPicker, {
|
|
15
|
+
...restProps,
|
|
16
|
+
providers: providersToLoad
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Formily-connected IconPicker component
|
|
21
|
+
* Automatically connects to Formily field state
|
|
22
|
+
* Supports both static and async icon providers
|
|
23
|
+
*/
|
|
24
|
+
const IconPicker$1 = connect(IconPickerBase, mapProps((props, field) => {
|
|
25
|
+
const formField = field;
|
|
26
|
+
return {
|
|
27
|
+
...props,
|
|
28
|
+
value: formField.value ?? ""
|
|
29
|
+
};
|
|
30
|
+
}));
|
|
31
|
+
|
|
32
|
+
//#endregion
|
|
33
|
+
export { IconPicker$1 as IconPicker };
|
|
@@ -1 +1,20 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let __formily_react = require("@formily/react");
|
|
3
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
4
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
5
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
6
|
+
|
|
7
|
+
//#region src/components/input.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Formily-connected Input component
|
|
10
|
+
* Automatically connects shadcn Input to Formily field state
|
|
11
|
+
*/
|
|
12
|
+
const Input = (0, __formily_react.connect)(__pixpilot_shadcn.Input, (0, __formily_react.mapProps)((props, field) => {
|
|
13
|
+
return {
|
|
14
|
+
...props,
|
|
15
|
+
value: field.value ?? ""
|
|
16
|
+
};
|
|
17
|
+
}));
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
exports.Input = Input;
|
package/dist/components/input.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
1
|
-
import{connect
|
|
1
|
+
import { connect, mapProps } from "@formily/react";
|
|
2
|
+
import { Input } from "@pixpilot/shadcn";
|
|
3
|
+
|
|
4
|
+
//#region src/components/input.tsx
|
|
5
|
+
/**
|
|
6
|
+
* Formily-connected Input component
|
|
7
|
+
* Automatically connects shadcn Input to Formily field state
|
|
8
|
+
*/
|
|
9
|
+
const Input$1 = connect(Input, mapProps((props, field) => {
|
|
10
|
+
return {
|
|
11
|
+
...props,
|
|
12
|
+
value: field.value ?? ""
|
|
13
|
+
};
|
|
14
|
+
}));
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
export { Input$1 as Input };
|
|
@@ -1 +1,30 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_transform_schema = require('../utils/transform-schema.cjs');
|
|
3
|
+
require('../utils/index.cjs');
|
|
4
|
+
const require_form = require('./form.cjs');
|
|
5
|
+
const require_schema_field = require('./schema-field.cjs');
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
10
|
+
let __formily_core = require("@formily/core");
|
|
11
|
+
__formily_core = require_rolldown_runtime.__toESM(__formily_core);
|
|
12
|
+
|
|
13
|
+
//#region src/components/json-schema-form-renderer.tsx
|
|
14
|
+
const JsonSchemaFormRenderer = (props) => {
|
|
15
|
+
const { schema, children, schemaField,...rest } = props;
|
|
16
|
+
const form = (0, react.useMemo)(() => (0, __formily_core.createForm)(), []);
|
|
17
|
+
const formSchema = (0, react.useMemo)(() => {
|
|
18
|
+
return require_transform_schema.transformSchema(schema);
|
|
19
|
+
}, [schema]);
|
|
20
|
+
const SchemaFieldComponent = schemaField || require_schema_field.SchemaField;
|
|
21
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_form.Form, {
|
|
22
|
+
...rest,
|
|
23
|
+
form,
|
|
24
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaFieldComponent, { schema: formSchema }), children]
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
JsonSchemaFormRenderer.displayName = "JsonSchemaFormRenderer";
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
exports.JsonSchemaFormRenderer = JsonSchemaFormRenderer;
|