@pixpilot/formily-shadcn 1.18.0 → 2.0.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/array-drawer/ArrayDrawer.cjs +70 -0
- package/dist/components/array-drawer/ArrayDrawer.d.cts +16 -0
- package/dist/components/array-drawer/ArrayDrawer.d.ts +16 -0
- package/dist/components/array-drawer/ArrayDrawer.js +66 -0
- package/dist/components/array-drawer/EditDrawer.cjs +129 -0
- package/dist/components/array-drawer/EditDrawer.js +124 -0
- package/dist/components/array-drawer/index.d.cts +1 -0
- package/dist/components/array-drawer/index.d.ts +1 -0
- package/dist/components/array-drawer/mcp.js +59 -0
- package/dist/components/date-picker/DatePicker.d.cts +3 -3
- package/dist/components/date-picker/DatePicker.d.ts +1 -1
- package/dist/components/dialog-item/ConnectedDialogItem.d.cts +4 -4
- package/dist/components/drawer-item/BaseDrawerItem.cjs +112 -0
- package/dist/components/drawer-item/BaseDrawerItem.d.cts +59 -0
- package/dist/components/drawer-item/BaseDrawerItem.d.ts +59 -0
- package/dist/components/drawer-item/BaseDrawerItem.js +107 -0
- package/dist/components/drawer-item/ConnectedDrawerItem.cjs +16 -0
- package/dist/components/drawer-item/ConnectedDrawerItem.d.cts +15 -0
- package/dist/components/drawer-item/ConnectedDrawerItem.d.ts +15 -0
- package/dist/components/drawer-item/ConnectedDrawerItem.js +14 -0
- package/dist/components/drawer-item/index.d.cts +2 -0
- package/dist/components/drawer-item/index.d.ts +2 -0
- package/dist/components/drawer-item/mcp.js +119 -0
- package/dist/components/form/Form.d.cts +2 -2
- package/dist/components/form-grid/FormGrid.d.cts +2 -2
- package/dist/components/form-item/ConnectedFormItem.d.cts +4 -4
- package/dist/components/form-item/ConnectedFormItem.d.ts +4 -4
- package/dist/components/popover-item/ConnectedPopoverItem.d.cts +4 -4
- package/dist/components/popover-item/ConnectedPopoverItem.d.ts +4 -4
- package/dist/components/radio/Radio.d.ts +2 -2
- package/dist/components/row/Row.d.ts +2 -2
- package/dist/components/schema-field/schema-field-basics.cjs +7 -0
- package/dist/components/schema-field/schema-field-basics.d.cts +435 -329
- package/dist/components/schema-field/schema-field-basics.d.ts +435 -329
- package/dist/components/schema-field/schema-field-basics.js +7 -0
- package/dist/components/schema-field/schema-field-extended.d.cts +578 -472
- package/dist/components/schema-field/schema-field-extended.d.ts +595 -489
- package/dist/components/schema-field/schema-field.d.cts +523 -417
- package/dist/components/schema-field/schema-field.d.ts +529 -423
- package/dist/generated/mcp-registry.js +80 -76
- package/dist/index.cjs +6 -0
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +4 -1
- package/package.json +6 -6
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { SyncReactNode } from "../../types/react.cjs";
|
|
2
|
+
import { FormItemProps } from "../form-item/form-item-types.cjs";
|
|
3
|
+
import "../form-item/index.cjs";
|
|
4
|
+
import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.cjs";
|
|
5
|
+
import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.cjs";
|
|
6
|
+
import "../overlay-common/index.cjs";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { DrawerContentProps } from "@pixpilot/shadcn-ui";
|
|
9
|
+
|
|
10
|
+
//#region src/components/drawer-item/BaseDrawerItem.d.ts
|
|
11
|
+
interface DrawerItemProps extends FormItemProps {
|
|
12
|
+
/**
|
|
13
|
+
* Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
|
|
14
|
+
* label it reads `Add <title>` when the field is empty and `Edit <title>`
|
|
15
|
+
* once it holds a value. Settable from an x-reaction via
|
|
16
|
+
* `decoratorProps.trigger`.
|
|
17
|
+
*/
|
|
18
|
+
trigger?: OverlayTriggerProps;
|
|
19
|
+
/** Controlled open state of the drawer. */
|
|
20
|
+
open?: boolean;
|
|
21
|
+
/** Initial open state when uncontrolled. */
|
|
22
|
+
defaultOpen?: boolean;
|
|
23
|
+
onOpenChange?: (open: boolean) => void;
|
|
24
|
+
/**
|
|
25
|
+
* When false, the drawer closes without validating the field first.
|
|
26
|
+
* Default is true.
|
|
27
|
+
*/
|
|
28
|
+
validateOnClose?: boolean;
|
|
29
|
+
/** Label of the button that closes the drawer. Set to `null` to hide the footer. */
|
|
30
|
+
doneLabel?: SyncReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* The drawer itself — its `title`, `description`, and `slots`, e.g.
|
|
33
|
+
* `{ title: 'Notes', slots: { content: { side: 'right' } } }`. Title and
|
|
34
|
+
* description default to the field's label and description.
|
|
35
|
+
*/
|
|
36
|
+
drawer?: DrawerItemDrawerProps;
|
|
37
|
+
}
|
|
38
|
+
interface DrawerItemDrawerSlots extends OverlayBaseSlots {
|
|
39
|
+
content?: DrawerContentProps;
|
|
40
|
+
title?: React.ComponentProps<'div'>;
|
|
41
|
+
description?: React.ComponentProps<'div'>;
|
|
42
|
+
footer?: React.ComponentProps<'div'>;
|
|
43
|
+
}
|
|
44
|
+
type DrawerItemDrawerProps = OverlayProps<DrawerItemDrawerSlots> & {
|
|
45
|
+
/** Edge the drawer anchors to. Passed to the drawer root. Default `bottom`. */
|
|
46
|
+
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Formily decorator that edits a single field inside a drawer.
|
|
50
|
+
*
|
|
51
|
+
* Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
|
|
52
|
+
* field's label, description, and validation feedback exactly as FormItem
|
|
53
|
+
* does, but puts a trigger button where the input would sit and moves the
|
|
54
|
+
* input itself into a drawer. The field keeps its own component, so validation
|
|
55
|
+
* and x-reactions behave as they do under FormItem.
|
|
56
|
+
*/
|
|
57
|
+
declare const BaseDrawerItem: React.FC<React.PropsWithChildren<DrawerItemProps>>;
|
|
58
|
+
//#endregion
|
|
59
|
+
export { BaseDrawerItem, DrawerItemProps };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { SyncReactNode } from "../../types/react.js";
|
|
2
|
+
import { FormItemProps } from "../form-item/form-item-types.js";
|
|
3
|
+
import "../form-item/index.js";
|
|
4
|
+
import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.js";
|
|
5
|
+
import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.js";
|
|
6
|
+
import "../overlay-common/index.js";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { DrawerContentProps } from "@pixpilot/shadcn-ui";
|
|
9
|
+
|
|
10
|
+
//#region src/components/drawer-item/BaseDrawerItem.d.ts
|
|
11
|
+
interface DrawerItemProps extends FormItemProps {
|
|
12
|
+
/**
|
|
13
|
+
* Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
|
|
14
|
+
* label it reads `Add <title>` when the field is empty and `Edit <title>`
|
|
15
|
+
* once it holds a value. Settable from an x-reaction via
|
|
16
|
+
* `decoratorProps.trigger`.
|
|
17
|
+
*/
|
|
18
|
+
trigger?: OverlayTriggerProps;
|
|
19
|
+
/** Controlled open state of the drawer. */
|
|
20
|
+
open?: boolean;
|
|
21
|
+
/** Initial open state when uncontrolled. */
|
|
22
|
+
defaultOpen?: boolean;
|
|
23
|
+
onOpenChange?: (open: boolean) => void;
|
|
24
|
+
/**
|
|
25
|
+
* When false, the drawer closes without validating the field first.
|
|
26
|
+
* Default is true.
|
|
27
|
+
*/
|
|
28
|
+
validateOnClose?: boolean;
|
|
29
|
+
/** Label of the button that closes the drawer. Set to `null` to hide the footer. */
|
|
30
|
+
doneLabel?: SyncReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* The drawer itself — its `title`, `description`, and `slots`, e.g.
|
|
33
|
+
* `{ title: 'Notes', slots: { content: { side: 'right' } } }`. Title and
|
|
34
|
+
* description default to the field's label and description.
|
|
35
|
+
*/
|
|
36
|
+
drawer?: DrawerItemDrawerProps;
|
|
37
|
+
}
|
|
38
|
+
interface DrawerItemDrawerSlots extends OverlayBaseSlots {
|
|
39
|
+
content?: DrawerContentProps;
|
|
40
|
+
title?: React.ComponentProps<'div'>;
|
|
41
|
+
description?: React.ComponentProps<'div'>;
|
|
42
|
+
footer?: React.ComponentProps<'div'>;
|
|
43
|
+
}
|
|
44
|
+
type DrawerItemDrawerProps = OverlayProps<DrawerItemDrawerSlots> & {
|
|
45
|
+
/** Edge the drawer anchors to. Passed to the drawer root. Default `bottom`. */
|
|
46
|
+
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Formily decorator that edits a single field inside a drawer.
|
|
50
|
+
*
|
|
51
|
+
* Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
|
|
52
|
+
* field's label, description, and validation feedback exactly as FormItem
|
|
53
|
+
* does, but puts a trigger button where the input would sit and moves the
|
|
54
|
+
* input itself into a drawer. The field keeps its own component, so validation
|
|
55
|
+
* and x-reactions behave as they do under FormItem.
|
|
56
|
+
*/
|
|
57
|
+
declare const BaseDrawerItem: React.FC<React.PropsWithChildren<DrawerItemProps>>;
|
|
58
|
+
//#endregion
|
|
59
|
+
export { BaseDrawerItem, DrawerItemProps };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { ShakeStyles } from "../array-common/ShakeStyles.js";
|
|
2
|
+
import { BaseFormItem } from "../form-item/BaseFormItem.js";
|
|
3
|
+
import { OverlayFields } from "../overlay-common/OverlayFields.js";
|
|
4
|
+
import { OverlayTrigger } from "../overlay-common/OverlayTrigger.js";
|
|
5
|
+
import { useOverlay } from "../overlay-common/use-overlay.js";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { Button, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@pixpilot/shadcn-ui";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { cn as cn$1 } from "@pixpilot/shadcn";
|
|
10
|
+
|
|
11
|
+
//#region src/components/drawer-item/BaseDrawerItem.tsx
|
|
12
|
+
/**
|
|
13
|
+
* Formily decorator that edits a single field inside a drawer.
|
|
14
|
+
*
|
|
15
|
+
* Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
|
|
16
|
+
* field's label, description, and validation feedback exactly as FormItem
|
|
17
|
+
* does, but puts a trigger button where the input would sit and moves the
|
|
18
|
+
* input itself into a drawer. The field keeps its own component, so validation
|
|
19
|
+
* and x-reactions behave as they do under FormItem.
|
|
20
|
+
*/
|
|
21
|
+
const BaseDrawerItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, doneLabel = "Done", drawer, feedbackStatus, feedbackText,...formItemProps }) => {
|
|
22
|
+
const { label: effectiveLabel, description: desc, trigger, open, gapClass, hasError, shouldShake, handleOpenChange, requestClose } = useOverlay({
|
|
23
|
+
label,
|
|
24
|
+
description,
|
|
25
|
+
trigger: triggerProp,
|
|
26
|
+
open: openProp,
|
|
27
|
+
defaultOpen,
|
|
28
|
+
onOpenChange,
|
|
29
|
+
validateOnClose
|
|
30
|
+
});
|
|
31
|
+
const title = drawer?.title ?? effectiveLabel ?? "Details";
|
|
32
|
+
const overlayDescription = drawer?.description ?? desc;
|
|
33
|
+
const slots = drawer?.slots;
|
|
34
|
+
return /* @__PURE__ */ jsxs(Drawer, {
|
|
35
|
+
open,
|
|
36
|
+
onOpenChange: handleOpenChange,
|
|
37
|
+
direction: drawer?.direction,
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsx(BaseFormItem, {
|
|
40
|
+
...formItemProps,
|
|
41
|
+
label,
|
|
42
|
+
description,
|
|
43
|
+
feedbackStatus,
|
|
44
|
+
feedbackText,
|
|
45
|
+
children: /* @__PURE__ */ jsx(DrawerTrigger, {
|
|
46
|
+
asChild: true,
|
|
47
|
+
children: /* @__PURE__ */ jsx(OverlayTrigger, {
|
|
48
|
+
invalid: hasError,
|
|
49
|
+
...trigger
|
|
50
|
+
})
|
|
51
|
+
})
|
|
52
|
+
}),
|
|
53
|
+
!open && /* @__PURE__ */ jsx(OverlayFields, { children }),
|
|
54
|
+
/* @__PURE__ */ jsxs(DrawerContent, {
|
|
55
|
+
...overlayDescription == null ? { "aria-describedby": void 0 } : {},
|
|
56
|
+
...slots?.content,
|
|
57
|
+
className: cn$1("sm:mx-auto sm:max-w-md", shouldShake && "pp-shake", slots?.content?.className),
|
|
58
|
+
onInteractOutside: (event) => {
|
|
59
|
+
slots?.content?.onInteractOutside?.(event);
|
|
60
|
+
if (event.defaultPrevented) return;
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
requestClose();
|
|
63
|
+
},
|
|
64
|
+
onEscapeKeyDown: (event) => {
|
|
65
|
+
slots?.content?.onEscapeKeyDown?.(event);
|
|
66
|
+
if (event.defaultPrevented) return;
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
requestClose();
|
|
69
|
+
},
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(ShakeStyles, {}),
|
|
72
|
+
/* @__PURE__ */ jsxs(DrawerHeader, {
|
|
73
|
+
...slots?.header,
|
|
74
|
+
children: [/* @__PURE__ */ jsx(DrawerTitle, {
|
|
75
|
+
...slots?.title,
|
|
76
|
+
children: title
|
|
77
|
+
}), overlayDescription != null && /* @__PURE__ */ jsx(DrawerDescription, {
|
|
78
|
+
...slots?.description,
|
|
79
|
+
children: overlayDescription
|
|
80
|
+
})]
|
|
81
|
+
}),
|
|
82
|
+
open && /* @__PURE__ */ jsxs(DrawerBody, {
|
|
83
|
+
...slots?.body,
|
|
84
|
+
className: cn$1("grid py-1", gapClass, slots?.body?.className),
|
|
85
|
+
children: [children, feedbackText != null && feedbackText !== "" && /* @__PURE__ */ jsx("p", {
|
|
86
|
+
className: cn$1("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
|
|
87
|
+
children: feedbackText
|
|
88
|
+
})]
|
|
89
|
+
}),
|
|
90
|
+
doneLabel != null && /* @__PURE__ */ jsx(DrawerFooter, {
|
|
91
|
+
...slots?.footer,
|
|
92
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
93
|
+
type: "button",
|
|
94
|
+
"data-slot": "footer-button",
|
|
95
|
+
onClick: requestClose,
|
|
96
|
+
children: doneLabel
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
]
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
BaseDrawerItem.displayName = "BaseDrawerItem";
|
|
105
|
+
|
|
106
|
+
//#endregion
|
|
107
|
+
export { BaseDrawerItem };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_map_form_item_props = require('../form-item/map-form-item-props.cjs');
|
|
3
|
+
const require_BaseDrawerItem = require('./BaseDrawerItem.cjs');
|
|
4
|
+
let __formily_react = require("@formily/react");
|
|
5
|
+
__formily_react = require_rolldown_runtime.__toESM(__formily_react);
|
|
6
|
+
|
|
7
|
+
//#region src/components/drawer-item/ConnectedDrawerItem.tsx
|
|
8
|
+
/**
|
|
9
|
+
* DrawerItem decorator connected to Formily field state.
|
|
10
|
+
* Maps field label, description, and validation state onto the decorator the
|
|
11
|
+
* same way FormItem does.
|
|
12
|
+
*/
|
|
13
|
+
const DrawerItem = (0, __formily_react.connect)(require_BaseDrawerItem.BaseDrawerItem, (0, __formily_react.mapProps)(require_map_form_item_props.mapFormItemProps));
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
exports.DrawerItem = DrawerItem;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DrawerItemProps } from "./BaseDrawerItem.cjs";
|
|
2
|
+
import * as react0 from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/drawer-item/ConnectedDrawerItem.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* DrawerItem decorator connected to Formily field state.
|
|
8
|
+
* Maps field label, description, and validation state onto the decorator the
|
|
9
|
+
* same way FormItem does.
|
|
10
|
+
*/
|
|
11
|
+
declare const DrawerItem: react0.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
|
|
12
|
+
children?: react0.ReactNode | undefined;
|
|
13
|
+
}>, "ref"> & react0.RefAttributes<unknown>>;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { DrawerItem };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DrawerItemProps } from "./BaseDrawerItem.js";
|
|
2
|
+
import * as react4 from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/drawer-item/ConnectedDrawerItem.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* DrawerItem decorator connected to Formily field state.
|
|
8
|
+
* Maps field label, description, and validation state onto the decorator the
|
|
9
|
+
* same way FormItem does.
|
|
10
|
+
*/
|
|
11
|
+
declare const DrawerItem: react4.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
|
|
12
|
+
children?: react4.ReactNode | undefined;
|
|
13
|
+
}>, "ref"> & react4.RefAttributes<unknown>>;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { DrawerItem };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { mapFormItemProps } from "../form-item/map-form-item-props.js";
|
|
2
|
+
import { BaseDrawerItem } from "./BaseDrawerItem.js";
|
|
3
|
+
import { connect, mapProps } from "@formily/react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/drawer-item/ConnectedDrawerItem.tsx
|
|
6
|
+
/**
|
|
7
|
+
* DrawerItem decorator connected to Formily field state.
|
|
8
|
+
* Maps field label, description, and validation state onto the decorator the
|
|
9
|
+
* same way FormItem does.
|
|
10
|
+
*/
|
|
11
|
+
const DrawerItem = connect(BaseDrawerItem, mapProps(mapFormItemProps));
|
|
12
|
+
|
|
13
|
+
//#endregion
|
|
14
|
+
export { DrawerItem };
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { defineProps } from "../../mcp/src/utils.js";
|
|
2
|
+
|
|
3
|
+
//#region src/components/drawer-item/mcp.ts
|
|
4
|
+
const meta = {
|
|
5
|
+
name: "DrawerItem",
|
|
6
|
+
category: "Formily",
|
|
7
|
+
description: "A Formily decorator used in place of FormItem (`x-decorator: 'DrawerItem'`). It renders the field's label, description, and validation feedback like FormItem, but puts a trigger button where the input would sit and moves the field's own component into a drawer.",
|
|
8
|
+
htmlElement: "div",
|
|
9
|
+
props: defineProps({
|
|
10
|
+
label: "Label content or accessible label for the component.",
|
|
11
|
+
description: "Description content rendered with the component.",
|
|
12
|
+
trigger: {
|
|
13
|
+
description: "Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a label it reads `Add <title>` while the field is empty and `Edit <title>` once it holds a value (`item` when the field has no title). Accepts the button's other props too (`icon`, `className`, …). An x-reaction can set this via `decoratorProps.trigger`.",
|
|
14
|
+
defaultValue: "`Add <title>` / `Edit <title>`"
|
|
15
|
+
},
|
|
16
|
+
open: {
|
|
17
|
+
description: "Controlled open state of the drawer.",
|
|
18
|
+
type: "boolean"
|
|
19
|
+
},
|
|
20
|
+
defaultOpen: {
|
|
21
|
+
description: "Initial open state when uncontrolled.",
|
|
22
|
+
type: "boolean",
|
|
23
|
+
defaultValue: "false"
|
|
24
|
+
},
|
|
25
|
+
onOpenChange: "Called when the drawer open state changes.",
|
|
26
|
+
validateOnClose: {
|
|
27
|
+
description: "When true (default), closing validates the field and keeps the drawer open (with a shake) while it is invalid. Set false to always close.",
|
|
28
|
+
type: "boolean",
|
|
29
|
+
defaultValue: "true"
|
|
30
|
+
},
|
|
31
|
+
doneLabel: {
|
|
32
|
+
description: "Label of the button that closes the drawer. Set to `null` to hide the footer.",
|
|
33
|
+
defaultValue: `'Done'`
|
|
34
|
+
},
|
|
35
|
+
drawer: "The drawer itself: `{ title, description, direction, slots }`, e.g. `{ title: 'Notes', direction: 'right' }`. `direction` (`top | bottom | left | right`, default `bottom`) sets the anchored edge. Title and description default to the field's label and description; `slots` takes props for `content`, `header`, `title`, `description`, `body`, and `footer`.",
|
|
36
|
+
slots: "Slot props forwarded to the FormItem parts (label, description, error).",
|
|
37
|
+
descriptionPlacement: "Forwarded to the underlying FormItem.",
|
|
38
|
+
requiredMark: "Forwarded to the underlying FormItem.",
|
|
39
|
+
asterisk: "Forwarded to the underlying FormItem.",
|
|
40
|
+
feedbackStatus: "Forwarded to the underlying FormItem.",
|
|
41
|
+
feedbackText: "Forwarded to the underlying FormItem."
|
|
42
|
+
}),
|
|
43
|
+
examples: [
|
|
44
|
+
{
|
|
45
|
+
title: "Edit a single field in a drawer",
|
|
46
|
+
code: `{
|
|
47
|
+
type: 'object',
|
|
48
|
+
properties: {
|
|
49
|
+
age: {
|
|
50
|
+
type: 'number',
|
|
51
|
+
title: 'Age',
|
|
52
|
+
description: 'Enter your age in years.',
|
|
53
|
+
default: 25,
|
|
54
|
+
'x-decorator': 'DrawerItem',
|
|
55
|
+
'x-component': 'NumberInput',
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
}`
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
title: "Declarative schema field",
|
|
62
|
+
code: `<SchemaField.String name="bio" title="Bio" x-decorator="DrawerItem" x-component="Textarea" />`
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
title: "A side drawer",
|
|
66
|
+
code: `{
|
|
67
|
+
type: 'string',
|
|
68
|
+
title: 'Bio',
|
|
69
|
+
'x-decorator': 'DrawerItem',
|
|
70
|
+
'x-decorator-props': {
|
|
71
|
+
drawer: { direction: 'right' },
|
|
72
|
+
},
|
|
73
|
+
'x-component': 'Textarea',
|
|
74
|
+
}`
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
title: "A whole object edited in one drawer",
|
|
78
|
+
code: `{
|
|
79
|
+
type: 'object',
|
|
80
|
+
title: 'Profile',
|
|
81
|
+
'x-decorator': 'DrawerItem',
|
|
82
|
+
// type: 'object' resolves to ObjectContainer. Turn off its own label and
|
|
83
|
+
// description — the drawer header already shows them — and use the flat
|
|
84
|
+
// variant so the card chrome does not double up inside the drawer.
|
|
85
|
+
'x-component-props': { variant: 'flat', label: false, description: false },
|
|
86
|
+
properties: {
|
|
87
|
+
firstName: { type: 'string', title: 'First Name' },
|
|
88
|
+
lastName: { type: 'string', title: 'Last Name', required: true },
|
|
89
|
+
},
|
|
90
|
+
}`
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
notes: [
|
|
94
|
+
"Works on an object too: decorating a `type: object` field puts its whole form in the drawer, and closing validates every field inside it, at any depth.",
|
|
95
|
+
"Swap in for FormItem on any field — the field keeps its own `x-component`, so validation, x-reactions, and component props behave exactly as under FormItem.",
|
|
96
|
+
"Edits commit to the form as the user types; there is no draft/Save step. The footer button closes the drawer rather than saving.",
|
|
97
|
+
"Closing (Done, Escape, or outside click) validates the field first. An invalid field keeps the drawer open and shakes it.",
|
|
98
|
+
"While the drawer is closed the input stays mounted in a hidden container, so component state and reactions behave as if it were always rendered.",
|
|
99
|
+
"The trigger renders in an error state, and the label turns red, while the field has a validation error — the message appears under the trigger and inside the drawer.",
|
|
100
|
+
"The drawer heading defaults to the field label; override with `drawer.title` / `drawer.description`."
|
|
101
|
+
],
|
|
102
|
+
keywords: [
|
|
103
|
+
"formily",
|
|
104
|
+
"decorator",
|
|
105
|
+
"drawer",
|
|
106
|
+
"sheet",
|
|
107
|
+
"field",
|
|
108
|
+
"form-item"
|
|
109
|
+
],
|
|
110
|
+
related: [
|
|
111
|
+
"FormItem",
|
|
112
|
+
"DialogItem",
|
|
113
|
+
"PopoverItem",
|
|
114
|
+
"ObjectContainer"
|
|
115
|
+
]
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
//#endregion
|
|
119
|
+
export { meta };
|
|
@@ -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_runtime1 from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/components/form/Form.d.ts
|
|
8
8
|
interface IFormProps extends FormContextStates {
|
|
@@ -27,6 +27,6 @@ declare function Form$1({
|
|
|
27
27
|
onAutoSubmit,
|
|
28
28
|
layout,
|
|
29
29
|
settings
|
|
30
|
-
}: IFormProps):
|
|
30
|
+
}: IFormProps): react_jsx_runtime1.JSX.Element;
|
|
31
31
|
//#endregion
|
|
32
32
|
export { Form$1 as Form, IFormProps };
|
|
@@ -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/FormGrid.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, IFormGridProps };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FormItemProps } from "./form-item-types.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react1585 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/form-item/ConnectedFormItem.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FormItem component connected to Formily field state.
|
|
7
7
|
* Automatically maps field validation state to component props.
|
|
8
8
|
*/
|
|
9
|
-
declare const FormItem:
|
|
10
|
-
children?:
|
|
11
|
-
}>, "ref"> &
|
|
9
|
+
declare const FormItem: react1585.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
|
|
10
|
+
children?: react1585.ReactNode | undefined;
|
|
11
|
+
}>, "ref"> & react1585.RefAttributes<unknown>>;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { FormItem };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FormItemProps } from "./form-item-types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react1585 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/form-item/ConnectedFormItem.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FormItem component connected to Formily field state.
|
|
7
7
|
* Automatically maps field validation state to component props.
|
|
8
8
|
*/
|
|
9
|
-
declare const FormItem:
|
|
10
|
-
children?:
|
|
11
|
-
}>, "ref"> &
|
|
9
|
+
declare const FormItem: react1585.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
|
|
10
|
+
children?: react1585.ReactNode | undefined;
|
|
11
|
+
}>, "ref"> & react1585.RefAttributes<unknown>>;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { FormItem };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PopoverItemProps } from "./BasePopoverItem.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react7 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/popover-item/ConnectedPopoverItem.d.ts
|
|
5
5
|
|
|
@@ -8,8 +8,8 @@ import * as react4 from "react";
|
|
|
8
8
|
* Maps field label, description, and validation state onto the decorator the
|
|
9
9
|
* same way FormItem does.
|
|
10
10
|
*/
|
|
11
|
-
declare const PopoverItem:
|
|
12
|
-
children?:
|
|
13
|
-
}>, "ref"> &
|
|
11
|
+
declare const PopoverItem: react7.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
|
|
12
|
+
children?: react7.ReactNode | undefined;
|
|
13
|
+
}>, "ref"> & react7.RefAttributes<unknown>>;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { PopoverItem };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PopoverItemProps } from "./BasePopoverItem.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react1580 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/popover-item/ConnectedPopoverItem.d.ts
|
|
5
5
|
|
|
@@ -8,8 +8,8 @@ import * as react4 from "react";
|
|
|
8
8
|
* Maps field label, description, and validation state onto the decorator the
|
|
9
9
|
* same way FormItem does.
|
|
10
10
|
*/
|
|
11
|
-
declare const PopoverItem:
|
|
12
|
-
children?:
|
|
13
|
-
}>, "ref"> &
|
|
11
|
+
declare const PopoverItem: react1580.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
|
|
12
|
+
children?: react1580.ReactNode | undefined;
|
|
13
|
+
}>, "ref"> & react1580.RefAttributes<unknown>>;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { PopoverItem };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentProps, FC } from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
3
3
|
import { RadioGroup } from "@pixpilot/shadcn";
|
|
4
4
|
|
|
5
5
|
//#region src/components/radio/Radio.d.ts
|
|
@@ -15,7 +15,7 @@ type RadioProps = {
|
|
|
15
15
|
/**
|
|
16
16
|
* Radio component with options rendering
|
|
17
17
|
*/
|
|
18
|
-
declare function Radio(props: RadioProps):
|
|
18
|
+
declare function Radio(props: RadioProps): react_jsx_runtime3.JSX.Element;
|
|
19
19
|
declare namespace Radio {
|
|
20
20
|
var displayName: string;
|
|
21
21
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/row/Row.d.ts
|
|
5
5
|
interface IRowProps {
|
|
@@ -36,6 +36,6 @@ interface IRowProps {
|
|
|
36
36
|
declare function Row({
|
|
37
37
|
className,
|
|
38
38
|
children
|
|
39
|
-
}: IRowProps):
|
|
39
|
+
}: IRowProps): react_jsx_runtime2.JSX.Element;
|
|
40
40
|
//#endregion
|
|
41
41
|
export { IRowProps, Row };
|
|
@@ -3,6 +3,7 @@ const require_use_merged_schema_components = require('../../hooks/use-merged-sch
|
|
|
3
3
|
const require_ArrayCards = require('../array-cards/ArrayCards.cjs');
|
|
4
4
|
const require_ArrayCollapse = require('../array-collapse/ArrayCollapse.cjs');
|
|
5
5
|
const require_ArrayDialog = require('../array-dialog/ArrayDialog.cjs');
|
|
6
|
+
const require_ArrayDrawer = require('../array-drawer/ArrayDrawer.cjs');
|
|
6
7
|
const require_ArrayInline = require('../array-inline/ArrayInline.cjs');
|
|
7
8
|
const require_ArrayPopover = require('../array-popover/ArrayPopover.cjs');
|
|
8
9
|
const require_ArrayTags = require('../array-tags/ArrayTags.cjs');
|
|
@@ -12,6 +13,7 @@ const require_Column = require('../column/Column.cjs');
|
|
|
12
13
|
const require_DatePicker = require('../date-picker/DatePicker.cjs');
|
|
13
14
|
const require_ConnectedFormItem = require('../form-item/ConnectedFormItem.cjs');
|
|
14
15
|
const require_ConnectedDialogItem = require('../dialog-item/ConnectedDialogItem.cjs');
|
|
16
|
+
const require_ConnectedDrawerItem = require('../drawer-item/ConnectedDrawerItem.cjs');
|
|
15
17
|
const require_FormGrid = require('../form-grid/FormGrid.cjs');
|
|
16
18
|
const require_IconToggle = require('../icon-toggle/IconToggle.cjs');
|
|
17
19
|
const require_Input = require('../input/Input.cjs');
|
|
@@ -48,6 +50,10 @@ const basicComponentRegistry = {
|
|
|
48
50
|
component: require_ArrayDialog.ArrayDialog,
|
|
49
51
|
decorator: "FormItem"
|
|
50
52
|
},
|
|
53
|
+
ArrayDrawer: {
|
|
54
|
+
component: require_ArrayDrawer.ArrayDrawer,
|
|
55
|
+
decorator: "FormItem"
|
|
56
|
+
},
|
|
51
57
|
ArrayInline: {
|
|
52
58
|
component: require_ArrayInline.ArrayInline,
|
|
53
59
|
decorator: "FormItem"
|
|
@@ -78,6 +84,7 @@ const basicComponentRegistry = {
|
|
|
78
84
|
decorator: "FormItem"
|
|
79
85
|
},
|
|
80
86
|
DialogItem: { component: require_ConnectedDialogItem.DialogItem },
|
|
87
|
+
DrawerItem: { component: require_ConnectedDrawerItem.DrawerItem },
|
|
81
88
|
PopoverItem: { component: require_ConnectedPopoverItem.PopoverItem },
|
|
82
89
|
FormGrid: { component: require_FormGrid.FormGrid },
|
|
83
90
|
FormItem: { component: require_ConnectedFormItem.FormItem },
|