@pixpilot/formily-shadcn 1.16.0 → 1.17.1

package/dist/components/popover-item/mcp.js

@@ -0,0 +1,127 @@
+import { defineProps } from "../../mcp/src/utils.js";
+
+//#region src/components/popover-item/mcp.ts
+const meta = {
+	name: "PopoverItem",
+	category: "Formily",
+	description: "A Formily decorator used in place of FormItem (`x-decorator: 'PopoverItem'`). 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 popover anchored to the button.",
+	htmlElement: "div",
+	props: defineProps({
+		label: "Label content or accessible label for the component.",
+		description: "Description content rendered with the component.",
+		trigger: {
+			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`.",
+			defaultValue: "`Add <title>` / `Edit <title>`"
+		},
+		open: {
+			description: "Controlled open state of the popover.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Initial open state when uncontrolled.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onOpenChange: "Called when the popover open state changes.",
+		validateOnClose: {
+			description: "When true (default), closing validates the field and keeps the popover open (with a shake) while it is invalid. Set false to always close.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		modal: {
+			description: "When true, interaction outside the popover is blocked while it is open.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		popover: "The popover itself: `{ title, description, slots }`, e.g. `{ title: 'Notes', slots: { content: { className: 'w-96' } } }`. Title and description default to the field's label and description; `slots` takes props for `content`, `header`, `title`, `description`, and `body`.",
+		slots: "Slot props forwarded to the FormItem parts (label, description, error).",
+		descriptionPlacement: "Forwarded to the underlying FormItem.",
+		requiredMark: "Forwarded to the underlying FormItem.",
+		asterisk: "Forwarded to the underlying FormItem.",
+		feedbackStatus: "Forwarded to the underlying FormItem.",
+		feedbackText: "Forwarded to the underlying FormItem."
+	}),
+	examples: [
+		{
+			title: "Edit a single field in a popover",
+			code: `{
+  type: 'object',
+  properties: {
+    age: {
+      type: 'number',
+      title: 'Age',
+      description: 'Enter your age in years.',
+      default: 25,
+      'x-decorator': 'PopoverItem',
+      'x-component': 'NumberInput',
+    },
+  },
+}`
+		},
+		{
+			title: "Declarative schema field",
+			code: `<SchemaField.String name="bio" title="Bio" x-decorator="PopoverItem" x-component="Textarea" />`
+		},
+		{
+			title: "Trigger label driven by an x-reaction",
+			code: `{
+  type: 'string',
+  title: 'Bio',
+  'x-decorator': 'PopoverItem',
+  'x-component': 'Textarea',
+  // Decorator props come from decoratorProps, not componentProps.
+  'x-reactions': {
+    fulfill: {
+      state: {
+        decoratorProps: {
+          trigger: {
+            label: "{{$self.value ? 'Edit bio' : 'Write a bio'}}",
+          },
+        },
+      },
+    },
+  },
+}`
+		},
+		{
+			title: "A whole object edited in one popover",
+			code: `{
+  type: 'object',
+  title: 'Profile',
+  'x-decorator': 'PopoverItem',
+  // type: 'object' resolves to ObjectContainer. Turn off its own label and
+  // description — the popover header already shows them — and use the flat
+  // variant so the card chrome does not double up inside the popover.
+  'x-component-props': { variant: 'flat', label: false, description: false },
+  properties: {
+    firstName: { type: 'string', title: 'First Name' },
+    lastName: { type: 'string', title: 'Last Name', required: true },
+  },
+}`
+		}
+	],
+	notes: [
+		"Works on an object too: decorating a `type: object` field puts its whole form in the popover, and closing validates every field inside it, at any depth.",
+		"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.",
+		"Edits commit to the form as the user types; there is no draft/Save step.",
+		"Closing (Escape or an outside click) validates the field first. An invalid field keeps the popover open and shakes it.",
+		"While the popover is closed the input stays mounted in a hidden container, so component state and reactions behave as if it were always rendered.",
+		"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 popover.",
+		"The popover content matches the trigger width by default; override with `popover.slots.content.className`."
+	],
+	keywords: [
+		"formily",
+		"decorator",
+		"popover",
+		"field",
+		"form-item"
+	],
+	related: [
+		"FormItem",
+		"DialogItem",
+		"ObjectContainer"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/radio/Radio.d.cts

@@ -1,5 +1,5 @@
 import { ComponentProps, FC } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { RadioGroup } from "@pixpilot/shadcn";
 
 //#region src/components/radio/Radio.d.ts
@@ -15,7 +15,7 @@ type RadioProps = {
 /**
  * Radio component with options rendering
  */
-declare function Radio(props: RadioProps): react_jsx_runtime2.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime4.JSX.Element;
 declare namespace Radio {
   var displayName: string;
 }

package/dist/components/rich-text-editor/RichTextEditor.cjs

@@ -1,6 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_use_form_context = require('../../hooks/use-form-context.cjs');
-require('../../hooks/index.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 let react = require("react");

package/dist/components/rich-text-editor/RichTextEditor.js

@@ -1,5 +1,4 @@
 import { useFormContext } from "../../hooks/use-form-context.js";
-import "../../hooks/index.js";
 import { connect, mapProps } from "@formily/react";
 import { useCallback, useMemo } from "react";
 import { RichTextEditor } from "@pixpilot/shadcn-ui";

package/dist/components/row/Row.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/row/Row.d.ts
 interface IRowProps {
@@ -36,6 +36,6 @@ interface IRowProps {
 declare function Row({
   className,
   children
-}: IRowProps): react_jsx_runtime3.JSX.Element;
+}: IRowProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { IRowProps, Row };

package/dist/components/schema-field/schema-field-basics.cjs

@@ -1,57 +1,34 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_use_merged_schema_components = require('../../hooks/use-merged-schema-components.cjs');
 const require_ArrayCards = require('../array-cards/ArrayCards.cjs');
-require('../array-cards/index.cjs');
 const require_ArrayCollapse = require('../array-collapse/ArrayCollapse.cjs');
-require('../array-collapse/index.cjs');
 const require_ArrayDialog = require('../array-dialog/ArrayDialog.cjs');
-require('../array-dialog/index.cjs');
 const require_ArrayInline = require('../array-inline/ArrayInline.cjs');
-require('../array-inline/index.cjs');
 const require_ArrayPopover = require('../array-popover/ArrayPopover.cjs');
-require('../array-popover/index.cjs');
 const require_ArrayTags = require('../array-tags/ArrayTags.cjs');
-require('../array-tags/index.cjs');
 const require_ArrayToggleGroup = require('../array-toggle-group/ArrayToggleGroup.cjs');
-require('../array-toggle-group/index.cjs');
 const require_Checkbox = require('../checkbox/Checkbox.cjs');
-require('../checkbox/index.cjs');
 const require_Column = require('../column/Column.cjs');
-require('../column/index.cjs');
 const require_DatePicker = require('../date-picker/DatePicker.cjs');
-require('../date-picker/index.cjs');
-const require_FormGrid = require('../form-grid/FormGrid.cjs');
-require('../form-grid/index.cjs');
 const require_ConnectedFormItem = require('../form-item/ConnectedFormItem.cjs');
-require('../form-item/index.cjs');
+const require_ConnectedDialogItem = require('../dialog-item/ConnectedDialogItem.cjs');
+const require_FormGrid = require('../form-grid/FormGrid.cjs');
 const require_IconToggle = require('../icon-toggle/IconToggle.cjs');
-require('../icon-toggle/index.cjs');
 const require_Input = require('../input/Input.cjs');
-require('../input/index.cjs');
 const require_extract_components = require('../../utils/extract-components.cjs');
 const require_use_form_schema = require('../../hooks/use-form-schema.cjs');
 const require_Hidden = require('../hidden/Hidden.cjs');
-require('../hidden/index.cjs');
 const require_NumberInput = require('../number/NumberInput.cjs');
-require('../number/index.cjs');
 const require_ObjectContainer = require('../object-container/ObjectContainer.cjs');
-require('../object-container/index.cjs');
+const require_ConnectedPopoverItem = require('../popover-item/ConnectedPopoverItem.cjs');
 const require_Radio = require('../radio/Radio.cjs');
-require('../radio/index.cjs');
 const require_Row = require('../row/Row.cjs');
-require('../row/index.cjs');
 const require_Select = require('../select/Select.cjs');
-require('../select/index.cjs');
 const require_Separator = require('../separator/Separator.cjs');
-require('../separator/index.cjs');
 const require_Switch = require('../switch/Switch.cjs');
-require('../switch/index.cjs');
 const require_Textarea = require('../textarea/Textarea.cjs');
-require('../textarea/index.cjs');
 const require_ToggleButton = require('../toggle-button/ToggleButton.cjs');
-require('../toggle-button/index.cjs');
 const require_ToggleGroup = require('../toggle-group/ToggleGroup.cjs');
-require('../toggle-group/index.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -100,6 +77,8 @@ const basicComponentRegistry = {
 		component: require_DatePicker.DatePicker,
 		decorator: "FormItem"
 	},
+	DialogItem: { component: require_ConnectedDialogItem.DialogItem },
+	PopoverItem: { component: require_ConnectedPopoverItem.PopoverItem },
 	FormGrid: { component: require_FormGrid.FormGrid },
 	FormItem: { component: require_ConnectedFormItem.FormItem },
 	Hidden: { component: require_Hidden.Hidden },