@pixpilot/formily-shadcn 0.9.1 → 0.10.0

package/dist/components/json-schema-form-renderer.d.ts

@@ -6,9 +6,14 @@ import React from "react";
 interface JsonSchemaFormRendererProps extends Omit<React.ComponentProps<typeof Form>, 'form'> {
   schema: ISchema;
   children?: React.ReactNode;
-  schemaField?: React.FC<{
-    schema: ISchema;
-  }>;
+  values?: Record<string, any>;
+  components?: {
+    fields?: Record<string, {
+      component: React.ComponentType<any>;
+      decorator?: string;
+    }>;
+    decorators?: Record<string, React.ComponentType<any>>;
+  };
 }
 declare const JsonSchemaFormRenderer: React.FC<JsonSchemaFormRendererProps>;
 //#endregion

package/dist/components/json-schema-form-renderer.js

@@ -1,24 +1,49 @@
+import { extractFieldsDecorators } from "../utils/extract-fields-decorators.js";
 import { transformSchema } from "../utils/transform-schema.js";
+import { validateSchemaComponents } from "../utils/validate-schema-components.js";
 import "../utils/index.js";
 import { Form as Form$1 } from "./form.js";
-import { SchemaField } from "./schema-field/schema-field.js";
+import { schemaFieldBasicComponents } from "./schema-field/schema-field-basics.js";
 import "./schema-field/index.js";
+import { createSchemaField } from "@formily/react";
 import React, { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createForm } from "@formily/core";
+import { isDevelopment } from "@pixpilot/env";
 
 //#region src/components/json-schema-form-renderer.tsx
 const JsonSchemaFormRenderer = (props) => {
-	const { schema, children, schemaField,...rest } = props;
-	const form = useMemo(() => createForm(), []);
+	const { schema, children, settings: configProp, components: componentsProp, values,...rest } = props;
+	const form = useMemo(() => createForm({ values: values || {} }), [values]);
 	const formSchema = useMemo(() => {
-		return transformSchema(schema);
-	}, [schema]);
-	const SchemaFieldComponent = schemaField || SchemaField;
+		return transformSchema(schema, extractFieldsDecorators(componentsProp?.fields));
+	}, [schema, componentsProp]);
+	const SchemaField = React.useMemo(() => {
+		const mergedComponents = { ...schemaFieldBasicComponents };
+		if (componentsProp?.fields) Object.entries(componentsProp.fields).forEach(([key, field]) => {
+			mergedComponents[key] = field.component;
+		});
+		if (componentsProp?.decorators) Object.assign(mergedComponents, componentsProp.decorators);
+		if (isDevelopment()) validateSchemaComponents(formSchema, mergedComponents);
+		return createSchemaField({
+			components: mergedComponents,
+			scope: {}
+		});
+	}, [formSchema, componentsProp]);
+	const config = useMemo(() => {
+		return {
+			...configProp,
+			label: {
+				useFieldNameAsLabel: true,
+				...configProp?.label || {}
+			}
+		};
+	}, [configProp]);
 	return /* @__PURE__ */ jsxs(Form$1, {
 		...rest,
 		form,
-		children: [/* @__PURE__ */ jsx(SchemaFieldComponent, { schema: formSchema }), children]
+		settings: config,
+		children: [/* @__PURE__ */ jsx(SchemaField, { schema: formSchema }), children]
 	});
 };
 JsonSchemaFormRenderer.displayName = "JsonSchemaFormRenderer";

package/dist/components/number-input.d.cts

@@ -1,9 +1,9 @@
-import * as react10 from "react";
+import * as react6 from "react";
 
 //#region src/components/number-input.d.ts
 /**
  * Formily-connected Number Input component
  */
-declare const NumberInput: react10.ForwardRefExoticComponent<Omit<Partial<react10.ClassAttributes<HTMLInputElement> & react10.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react10.RefAttributes<unknown>>;
+declare const NumberInput: react6.ForwardRefExoticComponent<Omit<Partial<react6.ClassAttributes<HTMLInputElement> & react6.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react6.RefAttributes<unknown>>;
 //#endregion
 export { NumberInput };

package/dist/components/number-input.d.ts

@@ -1,9 +1,9 @@
-import * as react14 from "react";
+import * as react6 from "react";
 
 //#region src/components/number-input.d.ts
 /**
  * Formily-connected Number Input component
  */
-declare const NumberInput: react14.ForwardRefExoticComponent<Omit<Partial<react14.ClassAttributes<HTMLInputElement> & react14.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react14.RefAttributes<unknown>>;
+declare const NumberInput: react6.ForwardRefExoticComponent<Omit<Partial<react6.ClassAttributes<HTMLInputElement> & react6.InputHTMLAttributes<HTMLInputElement>>, "ref"> & react6.RefAttributes<unknown>>;
 //#endregion
 export { NumberInput };

package/dist/components/object-container.cjs

@@ -11,19 +11,45 @@ let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 
 //#region src/components/object-container.tsx
+/**
+* Header gap spacing configuration
+* Uses smaller gaps since headers have less content
+*/
+const headerConfig = {
+	fixed: {
+		sm: "gap-1.5 text-lg",
+		md: "gap-2 text-xl",
+		lg: "gap-2.5 text-2xl"
+	},
+	responsive: "gap-1.5 text-lg md:gap-2 md:text-xl lg:gap-2.5 lg:text-2xl"
+};
+/**
+* Card padding spacing configuration
+* Controls vertical padding of the Card component
+*/
+const cardPaddingConfig = {
+	fixed: {
+		sm: "py-5",
+		md: "py-6",
+		lg: "py-7"
+	},
+	responsive: "py-5 md:py-6 lg:py-7"
+};
 const ObjectContainer = ({ className, children, label, description,...rest }) => {
 	const effectiveLabel = require_use_label.useLabel(label);
 	const desc = require_use_description.useDescription(description);
-	const { objectContainerProps, density, responsive } = require_use_form_context.useFormContext();
-	const gapClass = require_resolve_responsive_space.resolveResponsiveGapClass({
-		density,
-		responsive
-	});
+	const { objectContainerProps, density } = require_use_form_context.useFormContext();
+	const gapClass = require_resolve_responsive_space.resolveResponsiveGapClass({ density });
+	const headerGapClass = require_resolve_responsive_space.resolveSpacingClass(density, headerConfig);
+	const cardPaddingClass = require_resolve_responsive_space.resolveSpacingClass(density, cardPaddingConfig);
 	const { className: itemsContainerClassName } = objectContainerProps || {};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Card, {
 		...rest,
-		className: (0, __pixpilot_shadcn.cn)("bg-transparent", gapClass, className),
-		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardHeader, { children: [effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardDescription, { children: desc })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
+		className: (0, __pixpilot_shadcn.cn)("bg-transparent", gapClass, cardPaddingClass, className),
+		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CardHeader, {
+			className: headerGapClass,
+			children: [effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CardDescription, { children: desc })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
 			as: __pixpilot_shadcn.CardContent,
 			className: itemsContainerClassName,
 			children

package/dist/components/object-container.js

@@ -1,4 +1,4 @@
-import { resolveResponsiveGapClass } from "../utils/resolve-responsive-space.js";
+import { resolveResponsiveGapClass, resolveSpacingClass } from "../utils/resolve-responsive-space.js";
 import { useDescription } from "../hooks/use-description.js";
 import { useFormContext } from "../hooks/use-form-context.js";
 import { useLabel } from "../hooks/use-label.js";
@@ -8,19 +8,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, cn } from "@pixpilot/shadcn";
 
 //#region src/components/object-container.tsx
+/**
+* Header gap spacing configuration
+* Uses smaller gaps since headers have less content
+*/
+const headerConfig = {
+	fixed: {
+		sm: "gap-1.5 text-lg",
+		md: "gap-2 text-xl",
+		lg: "gap-2.5 text-2xl"
+	},
+	responsive: "gap-1.5 text-lg md:gap-2 md:text-xl lg:gap-2.5 lg:text-2xl"
+};
+/**
+* Card padding spacing configuration
+* Controls vertical padding of the Card component
+*/
+const cardPaddingConfig = {
+	fixed: {
+		sm: "py-5",
+		md: "py-6",
+		lg: "py-7"
+	},
+	responsive: "py-5 md:py-6 lg:py-7"
+};
 const ObjectContainer = ({ className, children, label, description,...rest }) => {
 	const effectiveLabel = useLabel(label);
 	const desc = useDescription(description);
-	const { objectContainerProps, density, responsive } = useFormContext();
-	const gapClass = resolveResponsiveGapClass({
-		density,
-		responsive
-	});
+	const { objectContainerProps, density } = useFormContext();
+	const gapClass = resolveResponsiveGapClass({ density });
+	const headerGapClass = resolveSpacingClass(density, headerConfig);
+	const cardPaddingClass = resolveSpacingClass(density, cardPaddingConfig);
 	const { className: itemsContainerClassName } = objectContainerProps || {};
 	return /* @__PURE__ */ jsxs(Card, {
 		...rest,
-		className: cn("bg-transparent", gapClass, className),
-		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ jsxs(CardHeader, { children: [effectiveLabel != null && /* @__PURE__ */ jsx(CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ jsx(CardDescription, { children: desc })] }), /* @__PURE__ */ jsx(FormItemContainer, {
+		className: cn("bg-transparent", gapClass, cardPaddingClass, className),
+		children: [(effectiveLabel != null || desc != null) && /* @__PURE__ */ jsxs(CardHeader, {
+			className: headerGapClass,
+			children: [effectiveLabel != null && /* @__PURE__ */ jsx(CardTitle, { children: effectiveLabel }), desc != null && /* @__PURE__ */ jsx(CardDescription, { children: desc })]
+		}), /* @__PURE__ */ jsx(FormItemContainer, {
 			as: CardContent,
 			className: itemsContainerClassName,
 			children

package/dist/components/radio.d.ts

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

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

@@ -11,7 +11,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/components/rich-text-editor.tsx
 const RichTextEditorBase = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.RichTextEditor, {
-		...require_use_form_context.useFormContext()?.config?.richTextEditor,
+		...require_use_form_context.useFormContext()?.settings?.richTextEditor,
 		...props,
 		children: "RichTextEditor"
 	});

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

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/rich-text-editor.tsx
 const RichTextEditorBase = (props) => {
 	return /* @__PURE__ */ jsx(RichTextEditor, {
-		...useFormContext()?.config?.richTextEditor,
+		...useFormContext()?.settings?.richTextEditor,
 		...props,
 		children: "RichTextEditor"
 	});

package/dist/components/row.d.ts

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

package/dist/components/schema-field/index.d.cts

@@ -1,3 +1,3 @@
 import { SchemaField, schemaFieldComponents } from "./schema-field.cjs";
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.cjs";
+import { SchemaFieldBasics, schemaFieldBasicComponents } from "./schema-field-basics.cjs";
 import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.cjs";

package/dist/components/schema-field/index.d.ts

@@ -1,3 +1,3 @@
 import { SchemaField, schemaFieldComponents } from "./schema-field.js";
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.js";
+import { SchemaFieldBasics, schemaFieldBasicComponents } from "./schema-field-basics.js";
 import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.js";

package/dist/components/schema-field/index.js

@@ -1,3 +1,3 @@
-import { SchemaFieldBasicComponents, SchemaFieldBasics } from "./schema-field-basics.js";
+import { SchemaFieldBasics, schemaFieldBasicComponents } from "./schema-field-basics.js";
 import { SchemaField, schemaFieldComponents } from "./schema-field.js";
 import { SchemaFieldExtended, schemaFieldExtendedComponents } from "./schema-field-extended.js";

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

@@ -26,7 +26,7 @@ let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 
 //#region src/components/schema-field/schema-field-basics.tsx
-const SchemaFieldBasicComponents = {
+const schemaFieldBasicComponents = {
 	FormItem: require_form_item.FormItem,
 	Hidden: require_hidden.Hidden,
 	Input: require_input.Input,
@@ -47,8 +47,8 @@ const SchemaFieldBasicComponents = {
 	ArrayPopover: require_array_popover.ArrayPopover,
 	ObjectContainer: require_object_container.ObjectContainer
 };
-const SchemaFieldBasics = (0, __formily_react.createSchemaField)({ components: SchemaFieldBasicComponents });
+const SchemaFieldBasics = (0, __formily_react.createSchemaField)({ components: schemaFieldBasicComponents });
 
 //#endregion
-exports.SchemaFieldBasicComponents = SchemaFieldBasicComponents;
-exports.SchemaFieldBasics = SchemaFieldBasics;
+exports.SchemaFieldBasics = SchemaFieldBasics;
+exports.schemaFieldBasicComponents = schemaFieldBasicComponents;