@xihan-ui/vue 1.0.0 → 2.0.0

package/dist/components/form/form.d.ts

@@ -1,13 +1,13 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { FormApi, FormErrorPatch, FormSchema, FormValidateOn, FormValues } from "@xihan-ui/headless";
+import { FormApi, FormColumns, FormErrorPatch, FormFieldSpan, FormPath, FormSchema, FormValidateOn, FormValues } from "@xihan-ui/headless";
 //#region src/components/form/form.d.ts
 type FormProps = FormSchema['props'];
 /** 默认插槽的载荷：整表的值与错误、校验态，以及逐字段读写、清错、提交、重置的命令。 */
-type FormRootSlotProps = Pick<FormApi, 'values' | 'errors' | 'errorNames' | 'invalid' | 'submitFailed' | 'validating' | 'getFieldId' | 'getFieldError' | 'setFieldValue' | 'setFieldError' | 'clearErrors' | 'submit' | 'reset'>;
-/** 字段容器默认插槽的载荷：这一个字段的名字、值、错误与控件 id，以及写值的命令。 */
+type FormRootSlotProps = Pick<FormApi, 'values' | 'errors' | 'errorNames' | 'invalid' | 'submitFailed' | 'validating' | 'validationError' | 'getFieldId' | 'getFieldError' | 'setFieldValue' | 'setFieldError' | 'clearErrors' | 'submit' | 'reset'>;
+/** 字段容器默认插槽的载荷：该字段的名字、值、错误与控件 id，以及写值的命令。 */
 interface FormFieldGroupSlotProps {
-  name: string;
+  name: FormPath;
   value: unknown;
   error: string | undefined;
   invalid: boolean;
@@ -16,55 +16,48 @@ interface FormFieldGroupSlotProps {
 }
 /** 错误摘要默认插槽的载荷：整表的错误、出错字段名与条数。 */
 type FormErrorSummarySlotProps = Pick<FormApi, 'errors' | 'errorNames' | 'errorCount'>;
-/** 错误摘要单条默认插槽的载荷：这一条指向的字段名与它的错误文案。 */
+/** 错误摘要单条默认插槽的载荷：该条指向的字段名与它的错误文案。 */
 interface FormErrorSummaryItemSlotProps {
-  name: string;
+  name: FormPath;
   error: string | undefined;
 }
 declare const XhFormRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   values: {
     type: PropType<FormValues>;
-    default: undefined;
   };
   defaultValues: {
     type: PropType<FormValues>;
-    default: undefined;
   };
   errors: {
     type: PropType<FormErrorPatch>;
-    default: undefined;
   };
   defaultErrors: {
     type: PropType<FormErrorPatch>;
-    default: undefined;
   };
   validate: {
     type: PropType<FormProps["validate"]>;
-    default: undefined;
   };
   rules: {
     type: PropType<FormProps["rules"]>;
-    default: undefined;
   };
   validateMessages: {
     type: PropType<FormProps["validateMessages"]>;
-    default: undefined;
   };
   validateOn: {
     type: PropType<FormValidateOn>;
-    default: undefined;
   };
   layout: {
     type: PropType<FormProps["layout"]>;
-    default: undefined;
+  };
+  /** grid 排布下分几列：整数即各档同一个列数，断点对象 `{ base, sm, md, lg, xl }` 则逐档取值。 */
+  columns: {
+    type: PropType<FormColumns>;
   };
   labelWidth: {
     type: (StringConstructor | NumberConstructor)[];
-    default: undefined;
   };
   labelAlign: {
     type: PropType<FormProps["labelAlign"]>;
-    default: undefined;
   };
   disabled: BooleanConstructor;
   readOnly: BooleanConstructor;
@@ -75,52 +68,46 @@ declare const XhFormRoot: import("vue").DefineComponent<import("vue").ExtractPro
   'errors-change': (_details: PayloadOf<FormProps, "onErrorsChange">) => true;
   submit: (_details: PayloadOf<FormProps, "onSubmit">) => true;
   invalid: (_details: PayloadOf<FormProps, "onInvalid">) => true;
+  'validation-error': (_details: PayloadOf<FormProps, "onValidationError">) => true;
   'update:values': (_values: PayloadOf<FormProps, "onValuesChange">["values"]) => true;
   'update:errors': (_errors: PayloadOf<FormProps, "onErrorsChange">["errors"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   values: {
     type: PropType<FormValues>;
-    default: undefined;
   };
   defaultValues: {
     type: PropType<FormValues>;
-    default: undefined;
   };
   errors: {
     type: PropType<FormErrorPatch>;
-    default: undefined;
   };
   defaultErrors: {
     type: PropType<FormErrorPatch>;
-    default: undefined;
   };
   validate: {
     type: PropType<FormProps["validate"]>;
-    default: undefined;
   };
   rules: {
     type: PropType<FormProps["rules"]>;
-    default: undefined;
   };
   validateMessages: {
     type: PropType<FormProps["validateMessages"]>;
-    default: undefined;
   };
   validateOn: {
     type: PropType<FormValidateOn>;
-    default: undefined;
   };
   layout: {
     type: PropType<FormProps["layout"]>;
-    default: undefined;
+  };
+  /** grid 排布下分几列：整数即各档同一个列数，断点对象 `{ base, sm, md, lg, xl }` 则逐档取值。 */
+  columns: {
+    type: PropType<FormColumns>;
   };
   labelWidth: {
     type: (StringConstructor | NumberConstructor)[];
-    default: undefined;
   };
   labelAlign: {
     type: PropType<FormProps["labelAlign"]>;
-    default: undefined;
   };
   disabled: BooleanConstructor;
   readOnly: BooleanConstructor;
@@ -129,39 +116,37 @@ declare const XhFormRoot: import("vue").DefineComponent<import("vue").ExtractPro
   onSubmit?: ((_details: import("@xihan-ui/headless").FormSubmitDetails) => any) | undefined;
   "onValues-change"?: ((_details: import("@xihan-ui/headless").FormValuesChangeDetails) => any) | undefined;
   "onErrors-change"?: ((_details: import("@xihan-ui/headless").FormErrorsChangeDetails) => any) | undefined;
+  "onValidation-error"?: ((_details: import("@xihan-ui/headless").FormValidationErrorDetails) => any) | undefined;
   "onUpdate:values"?: ((_values: FormValues) => any) | undefined;
   "onUpdate:errors"?: ((_errors: import("@xihan-ui/headless").FormErrors) => any) | undefined;
 }>, {
-  values: FormValues;
   disabled: boolean;
-  layout: import("@xihan-ui/headless").FormLayout | undefined;
   readOnly: boolean;
-  validate: ((values: FormValues) => FormErrorPatch | Promise<FormErrorPatch>) | undefined;
-  rules: import("@xihan-ui/headless").FormRules | undefined;
-  validateMessages: import("@xihan-ui/headless").FormValidateMessages | undefined;
-  labelAlign: "start" | "end" | undefined;
-  errors: FormErrorPatch;
-  defaultValues: FormValues;
-  defaultErrors: FormErrorPatch;
-  validateOn: FormValidateOn;
-  labelWidth: string | number;
 }, SlotsType<{
   default?: (props: FormRootSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFormFieldGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 字段名，与 values / errors 表里的键一致。 */
-  value: {
-    type: StringConstructor;
+  /** 字段路径；字符串含点仍是单键，数组才表示层级。 */
+  name: {
+    type: PropType<FormPath>;
     required: true;
   };
+  /** grid 排布下该格占多宽：1 至 4 跨相应列数，'full' 占满整行；未写时占一列。 */
+  span: {
+    type: PropType<FormFieldSpan>;
+  };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 字段名，与 values / errors 表里的键一致。 */
-  value: {
-    type: StringConstructor;
+  /** 字段路径；字符串含点仍是单键，数组才表示层级。 */
+  name: {
+    type: PropType<FormPath>;
     required: true;
   };
+  /** grid 排布下该格占多宽：1 至 4 跨相应列数，'full' 占满整行；未写时占一列。 */
+  span: {
+    type: PropType<FormFieldSpan>;
+  };
 }>> & Readonly<{}>, {}, SlotsType<{
   default?: (props: FormFieldGroupSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -171,17 +156,17 @@ declare const XhFormErrorSummary: import("vue").DefineComponent<{}, () => VNode<
   default?: (props: FormErrorSummarySlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFormErrorSummaryItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 这一条指向哪个字段。 */
-  value: {
-    type: StringConstructor;
+  /** 该条指向哪个字段路径。 */
+  name: {
+    type: PropType<FormPath>;
     required: true;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 这一条指向哪个字段。 */
-  value: {
-    type: StringConstructor;
+  /** 该条指向哪个字段路径。 */
+  name: {
+    type: PropType<FormPath>;
     required: true;
   };
 }>> & Readonly<{}>, {}, SlotsType<{

package/dist/components/form/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","names":[],"sources":["../../../src/components/form/form.ts"],"mappings":";;;;KAOK,YAAY;;KAGL,oBAAoB,KAC9B;;UAiBe;EACf;EACA;EACA;EACA;EACA;EACA,WAAW;;;KAID,4BAA4B,KAAK;;UAG5B;EACf;EACA;;cAGW,0BAAU,8BAAA;;IAIO,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IAChB,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACE,MAAA,SAAS;;;;IACf,MAAA,SAAS;;;;IACb,MAAA,SAAS;;;;;;;;IAEL,MAAA,SAAS;;;;;;;;EAMX,kBAAA,UAAA,UAAU;EACV,kBAAA,UAAA,UAAU;EACjB,SAAA,UAAA,UAAU;EACT,UAAA,UAAA,UAAU;EACL,kBAAA,SAAA,UAAU;EACV,kBAAA,SAAA,UAAU;;;IArBX,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IAChB,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACd,MAAA,SAAS;;;;IACE,MAAA,SAAS;;;;IACf,MAAA,SAAS;;;;IACb,MAAA,SAAS;;;;;;;;IAEL,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc7B,WAAC,OAAO,sBAAsB;kCAqC1C;cAEW,gCAAgB,8BAAA;;;;;;;;;;;;;;;EAOf,WAAC,OAAO,4BAA4B;kCAoBhD;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;;EAGjB,WAAC,OAAO,8BAA8B;kCAUlD;cAEW,sCAAsB,8BAAA;;;;;;;;;;;;;;;EAOrB,WAAC,OAAO,kCAAkC;kCAWtD;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"form.d.ts","names":[],"sources":["../../../src/components/form/form.ts"],"mappings":";;;;KAcK,YAAY;;KAGL,oBAAoB,KAC9B;;UAkBe;EACf,MAAM;EACN;EACA;EACA;EACA;EACA,WAAW;;;KAID,4BAA4B,KAAK;;UAG5B;EACf,MAAM;EACN;;cAGW,0BAAU,8BAAA;;IAIO,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IAChB,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACE,MAAA,SAAS;;;IACf,MAAA,SAAS;;;IACb,MAAA,SAAS;;;;IAEE,MAAA,SAAS;;;;;;IAEhB,MAAA,SAAS;;;;;;;EAMX,kBAAA,UAAA,UAAU;EACV,kBAAA,UAAA,UAAU;EACjB,SAAA,UAAA,UAAU;EACT,UAAA,UAAA,UAAU;EACD,qBAAA,UAAA,UAAU;EACd,kBAAA,SAAA,UAAU;EACV,kBAAA,SAAA,UAAU;;;IAxBX,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IAChB,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACE,MAAA,SAAS;;;IACf,MAAA,SAAS;;;IACb,MAAA,SAAS;;;;IAEE,MAAA,SAAS;;;;;;IAEhB,MAAA,SAAS;;;;;;;;;;;;;;;;EAe7B,WAAC,OAAO,sBAAsB;kCAuC1C;cAEW,gCAAgB,8BAAA;;;IAIQ,MAAA,SAAS;;;;;IAER,MAAA,SAAS;;;;;;;IAFV,MAAA,SAAS;;;;;IAER,MAAA,SAAS;;;EAGjC,WAAC,OAAO,4BAA4B;kCAoBhD;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;;EAGjB,WAAC,OAAO,8BAA8B;kCAUlD;cAEW,sCAAsB,8BAAA;;;IAIE,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;EAGhC,WAAC,OAAO,kCAAkC;kCAWtD;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/form/form.js

@@ -5,50 +5,19 @@ import { defineComponent, h } from "vue";
 const XhFormRoot = defineComponent({
 	name: "XhFormRoot",
 	props: {
-		values: {
-			type: Object,
-			default: void 0
-		},
-		defaultValues: {
-			type: Object,
-			default: void 0
-		},
-		errors: {
-			type: Object,
-			default: void 0
-		},
-		defaultErrors: {
-			type: Object,
-			default: void 0
-		},
-		validate: {
-			type: Function,
-			default: void 0
-		},
-		rules: {
-			type: Object,
-			default: void 0
-		},
-		validateMessages: {
-			type: Object,
-			default: void 0
-		},
-		validateOn: {
-			type: String,
-			default: void 0
-		},
-		layout: {
-			type: String,
-			default: void 0
-		},
-		labelWidth: {
-			type: [Number, String],
-			default: void 0
-		},
-		labelAlign: {
-			type: String,
-			default: void 0
-		},
+		values: { type: Object },
+		defaultValues: { type: Object },
+		errors: { type: Object },
+		defaultErrors: { type: Object },
+		validate: { type: Function },
+		rules: { type: Object },
+		validateMessages: { type: Object },
+		validateOn: { type: String },
+		layout: { type: String },
+		/** grid 排布下分几列：整数即各档同一个列数，断点对象 `{ base, sm, md, lg, xl }` 则逐档取值。 */
+		columns: { type: [Number, Object] },
+		labelWidth: { type: [Number, String] },
+		labelAlign: { type: String },
 		disabled: Boolean,
 		readOnly: Boolean
 	},
@@ -57,6 +26,7 @@ const XhFormRoot = defineComponent({
 		"errors-change": (_details) => true,
 		"submit": (_details) => true,
 		"invalid": (_details) => true,
+		"validation-error": (_details) => true,
 		"update:values": (_values) => true,
 		"update:errors": (_errors) => true
 	},
@@ -72,7 +42,8 @@ const XhFormRoot = defineComponent({
 				emit("update:errors", details.errors);
 			},
 			onSubmit: (details) => emit("submit", details),
-			onInvalid: (details) => emit("invalid", details)
+			onInvalid: (details) => emit("invalid", details),
+			onValidationError: (details) => emit("validation-error", details)
 		});
 		provideForm(ctx);
 		return () => h("form", {
@@ -87,6 +58,7 @@ const XhFormRoot = defineComponent({
 			invalid: ctx.api.value.invalid,
 			submitFailed: ctx.api.value.submitFailed,
 			validating: ctx.api.value.validating,
+			validationError: ctx.api.value.validationError,
 			getFieldId: ctx.api.value.getFieldId,
 			getFieldError: ctx.api.value.getFieldError,
 			setFieldValue: ctx.setFieldValue,
@@ -99,23 +71,29 @@ const XhFormRoot = defineComponent({
 });
 const XhFormFieldGroup = defineComponent({
 	name: "XhFormFieldGroup",
-	props: { 
-	/** 字段名，与 values / errors 表里的键一致。 */
-value: {
-		type: String,
-		required: true
-	} },
+	props: {
+		/** 字段路径；字符串含点仍是单键，数组才表示层级。 */
+		name: {
+			type: [String, Array],
+			required: true
+		},
+		/** grid 排布下该格占多宽：1 至 4 跨相应列数，'full' 占满整行；未写时占一列。 */
+		span: { type: [Number, String] }
+	},
 	slots: Object,
 	setup(props, { slots }) {
 		const ctx = useFormContext();
-		provideFormField({ name: () => props.value });
-		return () => h("div", ctx.api.value.getFieldGroupProps({ name: props.value }), slots.default?.({
-			name: props.value,
-			value: ctx.api.value.getFieldValue(props.value),
-			error: ctx.api.value.getFieldError(props.value),
-			invalid: ctx.api.value.isFieldInvalid(props.value),
-			controlId: ctx.api.value.getFieldId(props.value),
-			setValue: (next) => ctx.setFieldValue(props.value, next)
+		provideFormField({ name: () => props.name });
+		return () => h("div", ctx.api.value.getFieldGroupProps({
+			name: props.name,
+			span: props.span
+		}), slots.default?.({
+			name: props.name,
+			value: ctx.api.value.getFieldValue(props.name),
+			error: ctx.api.value.getFieldError(props.name),
+			invalid: ctx.api.value.isFieldInvalid(props.name),
+			controlId: ctx.api.value.getFieldId(props.name),
+			setValue: (next) => ctx.setFieldValue(props.name, next)
 		}));
 	}
 });
@@ -134,17 +112,17 @@ const XhFormErrorSummary = defineComponent({
 const XhFormErrorSummaryItem = defineComponent({
 	name: "XhFormErrorSummaryItem",
 	props: { 
-	/** 这一条指向哪个字段。 */
-value: {
-		type: String,
+	/** 该条指向哪个字段路径。 */
+name: {
+		type: [String, Array],
 		required: true
 	} },
 	slots: Object,
 	setup(props, { slots }) {
 		const ctx = useFormContext();
-		return () => h("a", ctx.api.value.getErrorSummaryItemProps({ name: props.value }), slots.default?.({
-			name: props.value,
-			error: ctx.api.value.getFieldError(props.value)
+		return () => h("a", ctx.api.value.getErrorSummaryItemProps({ name: props.name }), slots.default?.({
+			name: props.name,
+			error: ctx.api.value.getFieldError(props.name)
 		}));
 	}
 });

package/dist/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.ts"],"sourcesContent":["import type { FormApi, FormErrorPatch, FormSchema, FormValidateOn, FormValues } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { provideForm, provideFormField, useFormContext } from './context'\nimport { useForm } from './use-form'\n\ntype FormProps = FormSchema['props']\n\n/** 默认插槽的载荷：整表的值与错误、校验态，以及逐字段读写、清错、提交、重置的命令。 */\nexport type FormRootSlotProps = Pick<\n  FormApi,\n  | 'values'\n  | 'errors'\n  | 'errorNames'\n  | 'invalid'\n  | 'submitFailed'\n  | 'validating'\n  | 'getFieldId'\n  | 'getFieldError'\n  | 'setFieldValue'\n  | 'setFieldError'\n  | 'clearErrors'\n  | 'submit'\n  | 'reset'\n>\n\n/** 字段容器默认插槽的载荷：这一个字段的名字、值、错误与控件 id，以及写值的命令。 */\nexport interface FormFieldGroupSlotProps {\n  name: string\n  value: unknown\n  error: string | undefined\n  invalid: boolean\n  controlId: string\n  setValue: (next: unknown) => void\n}\n\n/** 错误摘要默认插槽的载荷：整表的错误、出错字段名与条数。 */\nexport type FormErrorSummarySlotProps = Pick<FormApi, 'errors' | 'errorNames' | 'errorCount'>\n\n/** 错误摘要单条默认插槽的载荷：这一条指向的字段名与它的错误文案。 */\nexport interface FormErrorSummaryItemSlotProps {\n  name: string\n  error: string | undefined\n}\n\nexport const XhFormRoot = defineComponent({\n  name: 'XhFormRoot',\n  // 缺省值由 connect 与机器给出，这里一律 default: undefined\n  props: {\n    values: { type: Object as PropType<FormValues>, default: undefined },\n    defaultValues: { type: Object as PropType<FormValues>, default: undefined },\n    errors: { type: Object as PropType<FormErrorPatch>, default: undefined },\n    defaultErrors: { type: Object as PropType<FormErrorPatch>, default: undefined },\n    validate: { type: Function as PropType<FormProps['validate']>, default: undefined },\n    rules: { type: Object as PropType<FormProps['rules']>, default: undefined },\n    validateMessages: { type: Object as PropType<FormProps['validateMessages']>, default: undefined },\n    validateOn: { type: String as PropType<FormValidateOn>, default: undefined },\n    layout: { type: String as PropType<FormProps['layout']>, default: undefined },\n    labelWidth: { type: [Number, String], default: undefined },\n    labelAlign: { type: String as PropType<FormProps['labelAlign']>, default: undefined },\n    disabled: Boolean,\n    readOnly: Boolean,\n  },\n  // *-change 携带 details 对象，update:* 携带裸表；submit 与 invalid 按校验结果二选一\n  emits: {\n    'values-change': (_details: PayloadOf<FormProps, 'onValuesChange'>) => true,\n    'errors-change': (_details: PayloadOf<FormProps, 'onErrorsChange'>) => true,\n    'submit': (_details: PayloadOf<FormProps, 'onSubmit'>) => true,\n    'invalid': (_details: PayloadOf<FormProps, 'onInvalid'>) => true,\n    'update:values': (_values: PayloadOf<FormProps, 'onValuesChange'>['values']) => true,\n    'update:errors': (_errors: PayloadOf<FormProps, 'onErrorsChange'>['errors']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useForm(props as FormProps, {\n      onValuesChange: (details) => {\n        emit('values-change', details)\n        emit('update:values', details.values)\n      },\n      onErrorsChange: (details) => {\n        emit('errors-change', details)\n        emit('update:errors', details.errors)\n      },\n      onSubmit: details => emit('submit', details),\n      onInvalid: details => emit('invalid', details),\n    })\n    provideForm(ctx)\n\n    // 根节点渲染为原生 form，隐式提交与 submit 事件都依赖它\n    return () => h('form', {\n      ...ctx.api.value.getRootProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n    }, slots.default?.({\n      values: ctx.api.value.values,\n      errors: ctx.api.value.errors,\n      errorNames: ctx.api.value.errorNames,\n      invalid: ctx.api.value.invalid,\n      submitFailed: ctx.api.value.submitFailed,\n      validating: ctx.api.value.validating,\n      getFieldId: ctx.api.value.getFieldId,\n      getFieldError: ctx.api.value.getFieldError,\n      setFieldValue: ctx.setFieldValue,\n      setFieldError: ctx.setFieldError,\n      clearErrors: ctx.clearErrors,\n      submit: ctx.submit,\n      reset: ctx.reset,\n    }))\n  },\n})\n\nexport const XhFormFieldGroup = defineComponent({\n  name: 'XhFormFieldGroup',\n  props: {\n    /** 字段名，与 values / errors 表里的键一致。 */\n    value: { type: String, required: true },\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormFieldGroupSlotProps) => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useFormContext()\n    // 后代 Field 据此从表单上下文自取校验态，省掉逐字段搬运\n    provideFormField({ name: () => props.value })\n    // 作用域插槽暴露本字段的值、错误与写入方法\n    return () => h(\n      'div',\n      ctx.api.value.getFieldGroupProps({ name: props.value }) as Record<string, unknown>,\n      slots.default?.({\n        name: props.value,\n        value: ctx.api.value.getFieldValue(props.value),\n        error: ctx.api.value.getFieldError(props.value),\n        invalid: ctx.api.value.isFieldInvalid(props.value),\n        controlId: ctx.api.value.getFieldId(props.value),\n        setValue: (next: unknown) => ctx.setFieldValue(props.value, next),\n      }),\n    )\n  },\n})\n\nexport const XhFormErrorSummary = defineComponent({\n  name: 'XhFormErrorSummary',\n  slots: Object as SlotsType<{\n    default?: (props: FormErrorSummarySlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('div', ctx.api.value.getErrorSummaryProps() as Record<string, unknown>, slots.default?.({\n      errors: ctx.api.value.errors,\n      errorNames: ctx.api.value.errorNames,\n      errorCount: ctx.api.value.errorCount,\n    }))\n  },\n})\n\nexport const XhFormErrorSummaryItem = defineComponent({\n  name: 'XhFormErrorSummaryItem',\n  props: {\n    /** 这一条指向哪个字段。 */\n    value: { type: String, required: true },\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormErrorSummaryItemSlotProps) => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useFormContext()\n    // 渲染为原生 a，href 指向字段容器的 id\n    return () => h(\n      'a',\n      ctx.api.value.getErrorSummaryItemProps({ name: props.value }) as Record<string, unknown>,\n      slots.default?.({ name: props.value, error: ctx.api.value.getFieldError(props.value) }),\n    )\n  },\n})\n\nexport const XhFormSubmitTrigger = defineComponent({\n  name: 'XhFormSubmitTrigger',\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('button', ctx.api.value.getSubmitTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormResetTrigger = defineComponent({\n  name: 'XhFormResetTrigger',\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('button', ctx.api.value.getResetTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 form 相关实现。\n\nimport type { FormApi, FormColumns, FormErrorPatch, FormFieldSpan, FormPath, FormSchema, FormValidateOn, FormValues } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { provideForm, provideFormField, useFormContext } from './context'\nimport { useForm } from './use-form'\n\ntype FormProps = FormSchema['props']\n\n/** 默认插槽的载荷：整表的值与错误、校验态，以及逐字段读写、清错、提交、重置的命令。 */\nexport type FormRootSlotProps = Pick<\n  FormApi,\n  | 'values'\n  | 'errors'\n  | 'errorNames'\n  | 'invalid'\n  | 'submitFailed'\n  | 'validating'\n  | 'validationError'\n  | 'getFieldId'\n  | 'getFieldError'\n  | 'setFieldValue'\n  | 'setFieldError'\n  | 'clearErrors'\n  | 'submit'\n  | 'reset'\n>\n\n/** 字段容器默认插槽的载荷：该字段的名字、值、错误与控件 id，以及写值的命令。 */\nexport interface FormFieldGroupSlotProps {\n  name: FormPath\n  value: unknown\n  error: string | undefined\n  invalid: boolean\n  controlId: string\n  setValue: (next: unknown) => void\n}\n\n/** 错误摘要默认插槽的载荷：整表的错误、出错字段名与条数。 */\nexport type FormErrorSummarySlotProps = Pick<FormApi, 'errors' | 'errorNames' | 'errorCount'>\n\n/** 错误摘要单条默认插槽的载荷：该条指向的字段名与它的错误文案。 */\nexport interface FormErrorSummaryItemSlotProps {\n  name: FormPath\n  error: string | undefined\n}\n\nexport const XhFormRoot = defineComponent({\n  name: 'XhFormRoot',\n  // 缺省值由 connect 与机器给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    values: { type: Object as PropType<FormValues> },\n    defaultValues: { type: Object as PropType<FormValues> },\n    errors: { type: Object as PropType<FormErrorPatch> },\n    defaultErrors: { type: Object as PropType<FormErrorPatch> },\n    validate: { type: Function as PropType<FormProps['validate']> },\n    rules: { type: Object as PropType<FormProps['rules']> },\n    validateMessages: { type: Object as PropType<FormProps['validateMessages']> },\n    validateOn: { type: String as PropType<FormValidateOn> },\n    layout: { type: String as PropType<FormProps['layout']> },\n    /** grid 排布下分几列：整数即各档同一个列数，断点对象 `{ base, sm, md, lg, xl }` 则逐档取值。 */\n    columns: { type: [Number, Object] as PropType<FormColumns> },\n    labelWidth: { type: [Number, String] },\n    labelAlign: { type: String as PropType<FormProps['labelAlign']> },\n    disabled: Boolean,\n    readOnly: Boolean,\n  },\n  // *-change 携带 details 对象，update:* 携带裸表；submit 与 invalid 按校验结果二选一\n  emits: {\n    'values-change': (_details: PayloadOf<FormProps, 'onValuesChange'>) => true,\n    'errors-change': (_details: PayloadOf<FormProps, 'onErrorsChange'>) => true,\n    'submit': (_details: PayloadOf<FormProps, 'onSubmit'>) => true,\n    'invalid': (_details: PayloadOf<FormProps, 'onInvalid'>) => true,\n    'validation-error': (_details: PayloadOf<FormProps, 'onValidationError'>) => true,\n    'update:values': (_values: PayloadOf<FormProps, 'onValuesChange'>['values']) => true,\n    'update:errors': (_errors: PayloadOf<FormProps, 'onErrorsChange'>['errors']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useForm(props as FormProps, {\n      onValuesChange: (details) => {\n        emit('values-change', details)\n        emit('update:values', details.values)\n      },\n      onErrorsChange: (details) => {\n        emit('errors-change', details)\n        emit('update:errors', details.errors)\n      },\n      onSubmit: details => emit('submit', details),\n      onInvalid: details => emit('invalid', details),\n      onValidationError: details => emit('validation-error', details),\n    })\n    provideForm(ctx)\n\n    // 根节点渲染为原生 form，隐式提交与 submit 事件都依赖它\n    return () => h('form', {\n      ...ctx.api.value.getRootProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n    }, slots.default?.({\n      values: ctx.api.value.values,\n      errors: ctx.api.value.errors,\n      errorNames: ctx.api.value.errorNames,\n      invalid: ctx.api.value.invalid,\n      submitFailed: ctx.api.value.submitFailed,\n      validating: ctx.api.value.validating,\n      validationError: ctx.api.value.validationError,\n      getFieldId: ctx.api.value.getFieldId,\n      getFieldError: ctx.api.value.getFieldError,\n      setFieldValue: ctx.setFieldValue,\n      setFieldError: ctx.setFieldError,\n      clearErrors: ctx.clearErrors,\n      submit: ctx.submit,\n      reset: ctx.reset,\n    }))\n  },\n})\n\nexport const XhFormFieldGroup = defineComponent({\n  name: 'XhFormFieldGroup',\n  props: {\n    /** 字段路径；字符串含点仍是单键，数组才表示层级。 */\n    name: { type: [String, Array] as PropType<FormPath>, required: true },\n    /** grid 排布下该格占多宽：1 至 4 跨相应列数，'full' 占满整行；未写时占一列。 */\n    span: { type: [Number, String] as PropType<FormFieldSpan> },\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormFieldGroupSlotProps) => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useFormContext()\n    // 后代 Field 据此从表单上下文自取校验态，省掉逐字段搬运\n    provideFormField({ name: () => props.name })\n    // 作用域插槽暴露本字段的值、错误与写入方法\n    return () => h(\n      'div',\n      ctx.api.value.getFieldGroupProps({ name: props.name, span: props.span }) as Record<string, unknown>,\n      slots.default?.({\n        name: props.name,\n        value: ctx.api.value.getFieldValue(props.name),\n        error: ctx.api.value.getFieldError(props.name),\n        invalid: ctx.api.value.isFieldInvalid(props.name),\n        controlId: ctx.api.value.getFieldId(props.name),\n        setValue: (next: unknown) => ctx.setFieldValue(props.name, next),\n      }),\n    )\n  },\n})\n\nexport const XhFormErrorSummary = defineComponent({\n  name: 'XhFormErrorSummary',\n  slots: Object as SlotsType<{\n    default?: (props: FormErrorSummarySlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('div', ctx.api.value.getErrorSummaryProps() as Record<string, unknown>, slots.default?.({\n      errors: ctx.api.value.errors,\n      errorNames: ctx.api.value.errorNames,\n      errorCount: ctx.api.value.errorCount,\n    }))\n  },\n})\n\nexport const XhFormErrorSummaryItem = defineComponent({\n  name: 'XhFormErrorSummaryItem',\n  props: {\n    /** 该条指向哪个字段路径。 */\n    name: { type: [String, Array] as PropType<FormPath>, required: true },\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FormErrorSummaryItemSlotProps) => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useFormContext()\n    // 渲染为原生 a，href 指向字段容器的 id\n    return () => h(\n      'a',\n      ctx.api.value.getErrorSummaryItemProps({ name: props.name }) as Record<string, unknown>,\n      slots.default?.({ name: props.name, error: ctx.api.value.getFieldError(props.name) }),\n    )\n  },\n})\n\nexport const XhFormSubmitTrigger = defineComponent({\n  name: 'XhFormSubmitTrigger',\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('button', ctx.api.value.getSubmitTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFormResetTrigger = defineComponent({\n  name: 'XhFormResetTrigger',\n  setup(_, { slots }) {\n    const ctx = useFormContext()\n    return () => h('button', ctx.api.value.getResetTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}

package/dist/components/form/use-form-control.js

@@ -0,0 +1,49 @@
+import { useOptionalFieldContext } from "../field/context.js";
+import { useOptionalFormContext, useOptionalFormField } from "./context.js";
+import { resolveFormControlState } from "@xihan-ui/headless";
+//#region src/components/form/use-form-control.ts
+const CONTROL_KEYS = /* @__PURE__ */ new Set([
+	"disabled",
+	"readOnly",
+	"required",
+	"invalid"
+]);
+/**
+* 只负责 Vue Context 接线；四轴优先级由 headless 的 resolveFormControlState 统一定义。
+* Field 是最近一层继承源；没有 Field 时，FormFieldGroup 才直接把 Form 状态下传给控件。
+*/
+function useFormControlProps(props) {
+	const form = useOptionalFormContext();
+	const handle = useOptionalFormField();
+	const field = useOptionalFieldContext();
+	const fieldState = () => {
+		if (field) {
+			const api = field.api.value;
+			return {
+				disabled: api.disabled,
+				readOnly: api.readOnly,
+				required: api.required,
+				invalid: api.invalid
+			};
+		}
+	};
+	const formState = () => {
+		if (!form || !handle) return void 0;
+		const api = form.api.value;
+		const name = handle.name();
+		return {
+			disabled: api.disabled,
+			readOnly: api.readOnly,
+			required: api.isFieldRequired(name),
+			invalid: api.isFieldInvalid(name)
+		};
+	};
+	return new Proxy(props, { get(target, key, receiver) {
+		if (typeof key === "string" && CONTROL_KEYS.has(key)) return resolveFormControlState(target, fieldState(), formState())[key];
+		return Reflect.get(target, key, receiver);
+	} });
+}
+//#endregion
+export { useFormControlProps };
+
+//# sourceMappingURL=use-form-control.js.map

package/dist/components/form/use-form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-control.js","names":[],"sources":["../../../src/components/form/use-form-control.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use form control 相关实现。\n\nimport type { FormControlState } from '@xihan-ui/headless'\nimport { resolveFormControlState } from '@xihan-ui/headless'\nimport { useOptionalFieldContext } from '../field/context'\nimport { useOptionalFormContext, useOptionalFormField } from './context'\n\nconst CONTROL_KEYS = new Set<keyof FormControlState>(['disabled', 'readOnly', 'required', 'invalid'])\n\n/**\n * 只负责 Vue Context 接线；四轴优先级由 headless 的 resolveFormControlState 统一定义。\n * Field 是最近一层继承源；没有 Field 时，FormFieldGroup 才直接把 Form 状态下传给控件。\n */\nexport function useFormControlProps<T extends FormControlState>(props: T): T {\n  const form = useOptionalFormContext()\n  const handle = useOptionalFormField()\n  const field = useOptionalFieldContext()\n\n  const fieldState = (): FormControlState | undefined => {\n    if (field) {\n      const api = field.api.value\n      return {\n        disabled: api.disabled,\n        readOnly: api.readOnly,\n        required: api.required,\n        invalid: api.invalid,\n      }\n    }\n    return undefined\n  }\n  const formState = (): FormControlState | undefined => {\n    if (!form || !handle)\n      return undefined\n    const api = form.api.value\n    const name = handle.name()\n    return {\n      disabled: api.disabled,\n      readOnly: api.readOnly,\n      required: api.isFieldRequired(name),\n      invalid: api.isFieldInvalid(name),\n    }\n  }\n\n  return new Proxy(props, {\n    get(target, key, receiver) {\n      if (typeof key === 'string' && CONTROL_KEYS.has(key as keyof FormControlState))\n        return resolveFormControlState(target, fieldState(), formState())[key as keyof FormControlState]\n      return Reflect.get(target, key, receiver)\n    },\n  })\n}\n"],"mappings":";;;;AAYA,MAAM,+BAAe,IAAI,IAA4B;CAAC;CAAY;CAAY;CAAY;AAAS,CAAC;;;;;AAMpG,SAAgB,oBAAgD,OAAa;CAC3E,MAAM,OAAO,uBAAuB;CACpC,MAAM,SAAS,qBAAqB;CACpC,MAAM,QAAQ,wBAAwB;CAEtC,MAAM,mBAAiD;EACrD,IAAI,OAAO;GACT,MAAM,MAAM,MAAM,IAAI;GACtB,OAAO;IACL,UAAU,IAAI;IACd,UAAU,IAAI;IACd,UAAU,IAAI;IACd,SAAS,IAAI;GACf;EACF;CAEF;CACA,MAAM,kBAAgD;EACpD,IAAI,CAAC,QAAQ,CAAC,QACZ,OAAO,KAAA;EACT,MAAM,MAAM,KAAK,IAAI;EACrB,MAAM,OAAO,OAAO,KAAK;EACzB,OAAO;GACL,UAAU,IAAI;GACd,UAAU,IAAI;GACd,UAAU,IAAI,gBAAgB,IAAI;GAClC,SAAS,IAAI,eAAe,IAAI;EAClC;CACF;CAEA,OAAO,IAAI,MAAM,OAAO,EACtB,IAAI,QAAQ,KAAK,UAAU;EACzB,IAAI,OAAO,QAAQ,YAAY,aAAa,IAAI,GAA6B,GAC3E,OAAO,wBAAwB,QAAQ,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC;EACpE,OAAO,QAAQ,IAAI,QAAQ,KAAK,QAAQ;CAC1C,EACF,CAAC;AACH"}

package/dist/components/form/use-form.d.ts

@@ -1,6 +1,6 @@
 import { ComputedRef, Ref } from "vue";
-import { FormApi, FormSchema } from "@xihan-ui/headless";
-import { Service } from "@xihan-ui/machine";
+import { Service } from "@xihan-ui/core";
+import { FormApi, FormPath, FormSchema } from "@xihan-ui/headless";
 //#region src/components/form/use-form.d.ts
 type Props = FormSchema['props'];
 interface FormCallbacks {
@@ -8,15 +8,16 @@ interface FormCallbacks {
   onErrorsChange?: Props['onErrorsChange'];
   onSubmit?: Props['onSubmit'];
   onInvalid?: Props['onInvalid'];
+  onValidationError?: Props['onValidationError'];
 }
 interface FormContext {
   api: ComputedRef<FormApi>;
-  /** 机器实例，供部件上报 DOM 侧的事实。 */
+  /** 状态机实例，供部件上报 DOM 侧的事实。 */
   service: Service<FormSchema>;
   /** `<form>` 节点，字段容器的查询范围与落焦起点。 */
   rootRef: Ref<HTMLElement | null>;
-  setFieldValue: (name: string, value: unknown) => void;
-  setFieldError: (name: string, message?: string) => void;
+  setFieldValue: (name: FormPath, value: unknown) => void;
+  setFieldError: (name: FormPath, message?: string) => void;
   clearErrors: () => void;
   submit: () => void;
   reset: () => void;

package/dist/components/form/use-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-form.d.ts","names":[],"sources":["../../../src/components/form/use-form.ts"],"mappings":";;;;KAUK,QAAQ;UAEI;EACf,iBAAiB;EACjB,iBAAiB;EACjB,WAAW;EACX,YAAY;;UAGG;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;EACb,gBAAgB,cAAc;EAC9B,gBAAgB,cAAc;EAC9B;EACA;EACA;;iBAGc,QAAQ,OAAO,OAAO,YAAW,gBAAqB"}
+{"version":3,"file":"use-form.d.ts","names":[],"sources":["../../../src/components/form/use-form.ts"],"mappings":";;;;KAiBK,QAAQ;UAEI;EACf,iBAAiB;EACjB,iBAAiB;EACjB,WAAW;EACX,YAAY;EACZ,oBAAoB;;UAGL;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;EACb,gBAAgB,MAAM,UAAU;EAChC,gBAAgB,MAAM,UAAU;EAChC;EACA;EACA;;iBAGc,QAAQ,OAAO,OAAO,YAAW,gBAAqB"}

package/dist/components/form/use-form.js

@@ -2,8 +2,8 @@ import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
 import { computed, ref } from "vue";
+import { createScope } from "@xihan-ui/core";
 import { connectForm, formMachine } from "@xihan-ui/headless";
-import { createScope } from "@xihan-ui/kernel";
 //#region src/components/form/use-form.ts
 function useForm(props, callbacks = {}) {
 	const rootRef = ref(null);

package/dist/components/form/use-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form.js","names":[],"sources":["../../../src/components/form/use-form.ts"],"sourcesContent":["import type { FormApi, FormSchema } from '@xihan-ui/headless'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectForm, formMachine } from '@xihan-ui/headless'\nimport { createScope } from '@xihan-ui/kernel'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\ntype Props = FormSchema['props']\n\nexport interface FormCallbacks {\n  onValuesChange?: Props['onValuesChange']\n  onErrorsChange?: Props['onErrorsChange']\n  onSubmit?: Props['onSubmit']\n  onInvalid?: Props['onInvalid']\n}\n\nexport interface FormContext {\n  api: ComputedRef<FormApi>\n  /** 机器实例，供部件上报 DOM 侧的事实。 */\n  service: Service<FormSchema>\n  /** `<form>` 节点，字段容器的查询范围与落焦起点。 */\n  rootRef: Ref<HTMLElement | null>\n  setFieldValue: (name: string, value: unknown) => void\n  setFieldError: (name: string, message?: string) => void\n  clearErrors: () => void\n  submit: () => void\n  reset: () => void\n}\n\nexport function useForm(props: Props, callbacks: FormCallbacks = {}): FormContext {\n  const rootRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(formMachine, () => ({ ...props, ...callbacks }), scope)\n\n  // 传 getter 而非节点，提交落焦与跳字段时由机器现取\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectForm(service, vueNormalize))\n  // 五个命令在顶层摊平，函数身份稳定，可解构后随时调用且不读取值表\n  return {\n    api,\n    service,\n    rootRef,\n    setFieldValue: (name, value) => api.value.setFieldValue(name, value),\n    setFieldError: (name, message) => api.value.setFieldError(name, message),\n    clearErrors: () => api.value.clearErrors(),\n    submit: () => api.value.submit(),\n    reset: () => api.value.reset(),\n  }\n}\n"],"mappings":";;;;;;;AAgCA,SAAgB,QAAQ,OAAc,YAA2B,CAAC,GAAgB;CAChF,MAAM,UAAU,IAAwB,IAAI;CAI5C,MAAM,UAAU,WAAW,oBAAoB;EAAE,GAAG;EAAO,GAAG;CAAU,IAD1D,YAAY,MADZ,qBACsB,CAC4C,CAAC;CAGjF,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAEjD,MAAM,MAAM,eAAe,YAAY,SAAS,YAAY,CAAC;CAE7D,OAAO;EACL;EACA;EACA;EACA,gBAAgB,MAAM,UAAU,IAAI,MAAM,cAAc,MAAM,KAAK;EACnE,gBAAgB,MAAM,YAAY,IAAI,MAAM,cAAc,MAAM,OAAO;EACvE,mBAAmB,IAAI,MAAM,YAAY;EACzC,cAAc,IAAI,MAAM,OAAO;EAC/B,aAAa,IAAI,MAAM,MAAM;CAC/B;AACF"}
+{"version":3,"file":"use-form.js","names":[],"sources":["../../../src/components/form/use-form.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use form 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { FormApi, FormPath, FormSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectForm, formMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\ntype Props = FormSchema['props']\n\nexport interface FormCallbacks {\n  onValuesChange?: Props['onValuesChange']\n  onErrorsChange?: Props['onErrorsChange']\n  onSubmit?: Props['onSubmit']\n  onInvalid?: Props['onInvalid']\n  onValidationError?: Props['onValidationError']\n}\n\nexport interface FormContext {\n  api: ComputedRef<FormApi>\n  /** 状态机实例，供部件上报 DOM 侧的事实。 */\n  service: Service<FormSchema>\n  /** `<form>` 节点，字段容器的查询范围与落焦起点。 */\n  rootRef: Ref<HTMLElement | null>\n  setFieldValue: (name: FormPath, value: unknown) => void\n  setFieldError: (name: FormPath, message?: string) => void\n  clearErrors: () => void\n  submit: () => void\n  reset: () => void\n}\n\nexport function useForm(props: Props, callbacks: FormCallbacks = {}): FormContext {\n  const rootRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(formMachine, () => ({ ...props, ...callbacks }), scope)\n\n  // 传 getter 而非节点，提交落焦与跳字段时由机器现取\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectForm(service, vueNormalize))\n  // 五个命令在顶层摊平，函数身份稳定，可解构后随时调用且不读取值表\n  return {\n    api,\n    service,\n    rootRef,\n    setFieldValue: (name, value) => api.value.setFieldValue(name, value),\n    setFieldError: (name, message) => api.value.setFieldError(name, message),\n    clearErrors: () => api.value.clearErrors(),\n    submit: () => api.value.submit(),\n    reset: () => api.value.reset(),\n  }\n}\n"],"mappings":";;;;;;;AAwCA,SAAgB,QAAQ,OAAc,YAA2B,CAAC,GAAgB;CAChF,MAAM,UAAU,IAAwB,IAAI;CAI5C,MAAM,UAAU,WAAW,oBAAoB;EAAE,GAAG;EAAO,GAAG;CAAU,IAD1D,YAAY,MADZ,qBACsB,CAC4C,CAAC;CAGjF,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAEjD,MAAM,MAAM,eAAe,YAAY,SAAS,YAAY,CAAC;CAE7D,OAAO;EACL;EACA;EACA;EACA,gBAAgB,MAAM,UAAU,IAAI,MAAM,cAAc,MAAM,KAAK;EACnE,gBAAgB,MAAM,YAAY,IAAI,MAAM,cAAc,MAAM,OAAO;EACvE,mBAAmB,IAAI,MAAM,YAAY;EACzC,cAAc,IAAI,MAAM,OAAO;EAC/B,aAAa,IAAI,MAAM,MAAM;CAC/B;AACF"}

package/dist/components/gradient-text/gradient-text.d.ts

@@ -1,39 +1,36 @@
 import { PropType } from "vue";
+import { Tone } from "@xihan-ui/core";
 import { GradientTextDirection } from "@xihan-ui/headless";
 //#region src/components/gradient-text/gradient-text.d.ts
 declare const XhGradientText: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   from: {
     type: StringConstructor;
-    default: undefined;
   };
   to: {
     type: StringConstructor;
-    default: undefined;
   };
   direction: {
     type: PropType<GradientTextDirection>;
-    default: undefined;
+  };
+  tone: {
+    type: PropType<Tone>;
   };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   from: {
     type: StringConstructor;
-    default: undefined;
   };
   to: {
     type: StringConstructor;
-    default: undefined;
   };
   direction: {
     type: PropType<GradientTextDirection>;
-    default: undefined;
   };
-}>> & Readonly<{}>, {
-  to: string;
-  direction: GradientTextDirection;
-  from: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  tone: {
+    type: PropType<Tone>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { XhGradientText };
 //# sourceMappingURL=gradient-text.d.ts.map

package/dist/components/gradient-text/gradient-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient-text.d.ts","names":[],"sources":["../../../src/components/gradient-text/gradient-text.ts"],"mappings":";;;cAMa,8BAAc,8BAAA;;;;;;;;;;IAMM,MAAA,SAAS;;;;;;;;;;;;;;;IAAT,MAAA,SAAS;;;;;;;qCASxC"}
+{"version":3,"file":"gradient-text.d.ts","names":[],"sources":["../../../src/components/gradient-text/gradient-text.ts"],"mappings":";;;;cAca,8BAAc,8BAAA;;;;;;;;IAMM,MAAA,SAAS;;;IACd,MAAA,SAAS;;;;;;;;;;;;IADJ,MAAA,SAAS;;;IACd,MAAA,SAAS;;MASnC,oDAAA"}

package/dist/components/gradient-text/gradient-text.js

@@ -5,18 +5,10 @@ import { connectGradientText } from "@xihan-ui/headless";
 const XhGradientText = defineComponent({
 	name: "XhGradientText",
 	props: {
-		from: {
-			type: String,
-			default: void 0
-		},
-		to: {
-			type: String,
-			default: void 0
-		},
-		direction: {
-			type: String,
-			default: void 0
-		}
+		from: { type: String },
+		to: { type: String },
+		direction: { type: String },
+		tone: { type: String }
 	},
 	setup(props, { slots }) {
 		return () => h("span", connectGradientText(props, vueNormalize).getRootProps(), slots.default?.());