@xihan-ui/vue 2.1.0 → 3.1.0

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

@@ -3,8 +3,8 @@ import { PropType, SlotsType, VNode } from "vue";
 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' | 'validationError' | 'getFieldId' | 'getFieldError' | 'setFieldValue' | 'setFieldError' | 'clearErrors' | 'submit' | 'reset'>;
+/** 默认插槽的载荷：整表的值与错误、校验与提交在途、改动与触碰，以及逐字段读写、清错、校验、提交、重置的命令。 */
+type FormRootSlotProps = Pick<FormApi, 'values' | 'errors' | 'errorNames' | 'invalid' | 'submitFailed' | 'validating' | 'submitting' | 'dirty' | 'validationError' | 'getFieldId' | 'getFieldError' | 'isFieldDirty' | 'isFieldTouched' | 'setFieldValue' | 'setFieldError' | 'clearErrors' | 'submit' | 'validateAll' | 'validateField' | 'validateFields' | 'resetField' | 'reset'>;
 /** 字段容器默认插槽的载荷：该字段的名字、值、错误与控件 id，以及写值的命令。 */
 interface FormFieldGroupSlotProps {
   name: FormPath;
@@ -61,13 +61,20 @@ declare const XhFormRoot: import("vue").DefineComponent<import("vue").ExtractPro
   };
   disabled: BooleanConstructor;
   readOnly: BooleanConstructor;
+  /**
+   * 校验通过才调用。返回 thenable 期间 submitting 为真、再提交不发生，拒绝经 submit-error 报出。
+   * 模板中照常写 @submit，Vue 会把它落到该 prop 上。
+   */
+  onSubmit: {
+    type: PropType<FormProps["onSubmit"]>;
+  };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'values-change': (_details: PayloadOf<FormProps, "onValuesChange">) => true;
   'errors-change': (_details: PayloadOf<FormProps, "onErrorsChange">) => true;
-  submit: (_details: PayloadOf<FormProps, "onSubmit">) => true;
   invalid: (_details: PayloadOf<FormProps, "onInvalid">) => true;
+  'submit-error': (_details: PayloadOf<FormProps, "onSubmitError">) => true;
   'validation-error': (_details: PayloadOf<FormProps, "onValidationError">) => true;
   'update:values': (_values: PayloadOf<FormProps, "onValuesChange">["values"]) => true;
   'update:errors': (_errors: PayloadOf<FormProps, "onErrorsChange">["errors"]) => true;
@@ -111,11 +118,18 @@ declare const XhFormRoot: import("vue").DefineComponent<import("vue").ExtractPro
   };
   disabled: BooleanConstructor;
   readOnly: BooleanConstructor;
+  /**
+   * 校验通过才调用。返回 thenable 期间 submitting 为真、再提交不发生，拒绝经 submit-error 报出。
+   * 模板中照常写 @submit，Vue 会把它落到该 prop 上。
+   */
+  onSubmit: {
+    type: PropType<FormProps["onSubmit"]>;
+  };
 }>> & Readonly<{
   onInvalid?: ((_details: import("@xihan-ui/headless").FormInvalidDetails) => any) | undefined;
-  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;
+  "onSubmit-error"?: ((_details: import("@xihan-ui/headless").FormSubmitErrorDetails) => 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;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"form.d.ts","names":[],"sources":["../../../src/components/form/form.ts"],"mappings":";;;;KAcK,YAAY;;KAGL,oBAAoB,KAC9B;;UA0Be;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;;;;;;;;;IAOT,MAAA,SAAS;;;;;EAIX,kBAAA,UAAA,UAAU;EACV,kBAAA,UAAA,UAAU;EAChB,UAAA,UAAA,UAAU;EACL,iBAAA,UAAA,UAAU;EACN,qBAAA,UAAA,UAAU;EACd,kBAAA,SAAA,UAAU;EACV,kBAAA,SAAA,UAAU;;;IA7BX,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;;;;;;;;;IAOT,MAAA,SAAS;;;;;;;;;;;;;;EAa7B,WAAC,OAAO,sBAAsB;kCAiD1C;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;kCAWlD;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

@@ -19,13 +19,18 @@ const XhFormRoot = defineComponent({
 		labelWidth: { type: [Number, String] },
 		labelAlign: { type: String },
 		disabled: Boolean,
-		readOnly: Boolean
+		readOnly: Boolean,
+		/**
+		* 校验通过才调用。返回 thenable 期间 submitting 为真、再提交不发生，拒绝经 submit-error 报出。
+		* 模板中照常写 @submit，Vue 会把它落到该 prop 上。
+		*/
+		onSubmit: { type: Function }
 	},
 	emits: {
 		"values-change": (_details) => true,
 		"errors-change": (_details) => true,
-		"submit": (_details) => true,
 		"invalid": (_details) => true,
+		"submit-error": (_details) => true,
 		"validation-error": (_details) => true,
 		"update:values": (_values) => true,
 		"update:errors": (_errors) => true
@@ -41,7 +46,8 @@ const XhFormRoot = defineComponent({
 				emit("errors-change", details);
 				emit("update:errors", details.errors);
 			},
-			onSubmit: (details) => emit("submit", details),
+			onSubmit: (details) => props.onSubmit?.(details),
+			onSubmitError: (details) => emit("submit-error", details),
 			onInvalid: (details) => emit("invalid", details),
 			onValidationError: (details) => emit("validation-error", details)
 		});
@@ -58,13 +64,21 @@ const XhFormRoot = defineComponent({
 			invalid: ctx.api.value.invalid,
 			submitFailed: ctx.api.value.submitFailed,
 			validating: ctx.api.value.validating,
+			submitting: ctx.api.value.submitting,
+			dirty: ctx.api.value.dirty,
 			validationError: ctx.api.value.validationError,
 			getFieldId: ctx.api.value.getFieldId,
 			getFieldError: ctx.api.value.getFieldError,
+			isFieldDirty: ctx.api.value.isFieldDirty,
+			isFieldTouched: ctx.api.value.isFieldTouched,
 			setFieldValue: ctx.setFieldValue,
 			setFieldError: ctx.setFieldError,
 			clearErrors: ctx.clearErrors,
 			submit: ctx.submit,
+			validateAll: ctx.validateAll,
+			validateField: ctx.validateField,
+			validateFields: ctx.validateFields,
+			resetField: ctx.resetField,
 			reset: ctx.reset
 		}));
 	}
@@ -103,9 +117,9 @@ const XhFormErrorSummary = defineComponent({
 	setup(_, { slots }) {
 		const ctx = useFormContext();
 		return () => h("div", ctx.api.value.getErrorSummaryProps(), slots.default?.({
-			errors: ctx.api.value.errors,
-			errorNames: ctx.api.value.errorNames,
-			errorCount: ctx.api.value.errorCount
+			errors: ctx.api.value.summaryErrors,
+			errorNames: ctx.api.value.summaryErrorNames,
+			errorCount: ctx.api.value.summaryErrorCount
 		}));
 	}
 });
@@ -122,7 +136,7 @@ name: {
 		const ctx = useFormContext();
 		return () => h("a", ctx.api.value.getErrorSummaryItemProps({ name: props.name }), slots.default?.({
 			name: props.name,
-			error: ctx.api.value.getFieldError(props.name)
+			error: ctx.api.value.getSummaryError(props.name)
 		}));
 	}
 });

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

@@ -1 +1 @@
-{"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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"}
+{"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  | 'submitting'\n  | 'dirty'\n  | 'validationError'\n  | 'getFieldId'\n  | 'getFieldError'\n  | 'isFieldDirty'\n  | 'isFieldTouched'\n  | 'setFieldValue'\n  | 'setFieldError'\n  | 'clearErrors'\n  | 'submit'\n  | 'validateAll'\n  | 'validateField'\n  | 'validateFields'\n  | 'resetField'\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     * 校验通过才调用。返回 thenable 期间 submitting 为真、再提交不发生，拒绝经 submit-error 报出。\n     * 模板中照常写 @submit，Vue 会把它落到该 prop 上。\n     */\n    onSubmit: { type: Function as PropType<FormProps['onSubmit']> },\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    'invalid': (_details: PayloadOf<FormProps, 'onInvalid'>) => true,\n    'submit-error': (_details: PayloadOf<FormProps, 'onSubmitError'>) => 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      // 返回值要交给机器：thenable 即进入提交在途\n      onSubmit: details => props.onSubmit?.(details),\n      onSubmitError: details => emit('submit-error', 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      submitting: ctx.api.value.submitting,\n      dirty: ctx.api.value.dirty,\n      validationError: ctx.api.value.validationError,\n      getFieldId: ctx.api.value.getFieldId,\n      getFieldError: ctx.api.value.getFieldError,\n      isFieldDirty: ctx.api.value.isFieldDirty,\n      isFieldTouched: ctx.api.value.isFieldTouched,\n      setFieldValue: ctx.setFieldValue,\n      setFieldError: ctx.setFieldError,\n      clearErrors: ctx.clearErrors,\n      submit: ctx.submit,\n      validateAll: ctx.validateAll,\n      validateField: ctx.validateField,\n      validateFields: ctx.validateFields,\n      resetField: ctx.resetField,\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    // 摘要读它自己那版错误表：退场途中文案与条数照撤下之前的写\n    return () => h('div', ctx.api.value.getErrorSummaryProps() as Record<string, unknown>, slots.default?.({\n      errors: ctx.api.value.summaryErrors,\n      errorNames: ctx.api.value.summaryErrorNames,\n      errorCount: ctx.api.value.summaryErrorCount,\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.getSummaryError(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":";;;;AA8DA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CAEN,OAAO;EACL,QAAQ,EAAE,MAAM,OAA+B;EAC/C,eAAe,EAAE,MAAM,OAA+B;EACtD,QAAQ,EAAE,MAAM,OAAmC;EACnD,eAAe,EAAE,MAAM,OAAmC;EAC1D,UAAU,EAAE,MAAM,SAA4C;EAC9D,OAAO,EAAE,MAAM,OAAuC;EACtD,kBAAkB,EAAE,MAAM,OAAkD;EAC5E,YAAY,EAAE,MAAM,OAAmC;EACvD,QAAQ,EAAE,MAAM,OAAwC;;EAExD,SAAS,EAAE,MAAM,CAAC,QAAQ,MAAM,EAA2B;EAC3D,YAAY,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE;EACrC,YAAY,EAAE,MAAM,OAA4C;EAChE,UAAU;EACV,UAAU;;;;;EAKV,UAAU,EAAE,MAAM,SAA4C;CAChE;CAEA,OAAO;EACL,kBAAkB,aAAqD;EACvE,kBAAkB,aAAqD;EACvE,YAAY,aAAgD;EAC5D,iBAAiB,aAAoD;EACrE,qBAAqB,aAAwD;EAC7E,kBAAkB,YAA8D;EAChF,kBAAkB,YAA8D;CAClF;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,MAAM,QAAQ,OAAoB;GACtC,iBAAiB,YAAY;IAC3B,KAAK,iBAAiB,OAAO;IAC7B,KAAK,iBAAiB,QAAQ,MAAM;GACtC;GACA,iBAAiB,YAAY;IAC3B,KAAK,iBAAiB,OAAO;IAC7B,KAAK,iBAAiB,QAAQ,MAAM;GACtC;GAEA,WAAU,YAAW,MAAM,WAAW,OAAO;GAC7C,gBAAe,YAAW,KAAK,gBAAgB,OAAO;GACtD,YAAW,YAAW,KAAK,WAAW,OAAO;GAC7C,oBAAmB,YAAW,KAAK,oBAAoB,OAAO;EAChE,CAAC;EACD,YAAY,GAAG;EAGf,aAAa,EAAE,QAAQ;GACrB,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,MAAM,OAAgB;IAAE,IAAI,QAAQ,QAAQ;GAAkB;EAChE,GAAG,MAAM,UAAU;GACjB,QAAQ,IAAI,IAAI,MAAM;GACtB,QAAQ,IAAI,IAAI,MAAM;GACtB,YAAY,IAAI,IAAI,MAAM;GAC1B,SAAS,IAAI,IAAI,MAAM;GACvB,cAAc,IAAI,IAAI,MAAM;GAC5B,YAAY,IAAI,IAAI,MAAM;GAC1B,YAAY,IAAI,IAAI,MAAM;GAC1B,OAAO,IAAI,IAAI,MAAM;GACrB,iBAAiB,IAAI,IAAI,MAAM;GAC/B,YAAY,IAAI,IAAI,MAAM;GAC1B,eAAe,IAAI,IAAI,MAAM;GAC7B,cAAc,IAAI,IAAI,MAAM;GAC5B,gBAAgB,IAAI,IAAI,MAAM;GAC9B,eAAe,IAAI;GACnB,eAAe,IAAI;GACnB,aAAa,IAAI;GACjB,QAAQ,IAAI;GACZ,aAAa,IAAI;GACjB,eAAe,IAAI;GACnB,gBAAgB,IAAI;GACpB,YAAY,IAAI;GAChB,OAAO,IAAI;EACb,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;;EAEL,MAAM;GAAE,MAAM,CAAC,QAAQ,KAAK;GAAyB,UAAU;EAAK;;EAEpE,MAAM,EAAE,MAAM,CAAC,QAAQ,MAAM,EAA6B;CAC5D;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe;EAE3B,iBAAiB,EAAE,YAAY,MAAM,KAAK,CAAC;EAE3C,aAAa,EACX,OACA,IAAI,IAAI,MAAM,mBAAmB;GAAE,MAAM,MAAM;GAAM,MAAM,MAAM;EAAK,CAAC,GACvE,MAAM,UAAU;GACd,MAAM,MAAM;GACZ,OAAO,IAAI,IAAI,MAAM,cAAc,MAAM,IAAI;GAC7C,OAAO,IAAI,IAAI,MAAM,cAAc,MAAM,IAAI;GAC7C,SAAS,IAAI,IAAI,MAAM,eAAe,MAAM,IAAI;GAChD,WAAW,IAAI,IAAI,MAAM,WAAW,MAAM,IAAI;GAC9C,WAAW,SAAkB,IAAI,cAAc,MAAM,MAAM,IAAI;EACjE,CAAC,CACH;CACF;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,OAAO;CAGP,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,eAAe;EAE3B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,qBAAqB,GAA8B,MAAM,UAAU;GACrG,QAAQ,IAAI,IAAI,MAAM;GACtB,YAAY,IAAI,IAAI,MAAM;GAC1B,YAAY,IAAI,IAAI,MAAM;EAC5B,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,OAAO;;AAEL,MAAM;EAAE,MAAM,CAAC,QAAQ,KAAK;EAAyB,UAAU;CAAK,EACtE;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,eAAe;EAE3B,aAAa,EACX,KACA,IAAI,IAAI,MAAM,yBAAyB,EAAE,MAAM,MAAM,KAAK,CAAC,GAC3D,MAAM,UAAU;GAAE,MAAM,MAAM;GAAM,OAAO,IAAI,IAAI,MAAM,gBAAgB,MAAM,IAAI;EAAE,CAAC,CACxF;CACF;AACF,CAAC;AAED,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,eAAe;EAC3B,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,sBAAsB,GAA8B,MAAM,UAAU,CAAC;CAC9G;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,eAAe;EAC3B,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,qBAAqB,GAA8B,MAAM,UAAU,CAAC;CAC7G;AACF,CAAC"}

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

@@ -1,5 +1,5 @@
-import { useOptionalFieldContext } from "../field/context.js";
 import { useOptionalFormContext, useOptionalFormField } from "./context.js";
+import { useOptionalFieldContext } from "../field/context.js";
 import { resolveFormControlState } from "@xihan-ui/headless";
 //#region src/components/form/use-form-control.ts
 const CONTROL_KEYS = /* @__PURE__ */ new Set([

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

@@ -9,6 +9,7 @@ interface FormCallbacks {
   onSubmit?: Props['onSubmit'];
   onInvalid?: Props['onInvalid'];
   onValidationError?: Props['onValidationError'];
+  onSubmitError?: Props['onSubmitError'];
 }
 interface FormContext {
   api: ComputedRef<FormApi>;
@@ -20,6 +21,11 @@ interface FormContext {
   setFieldError: (name: FormPath, message?: string) => void;
   clearErrors: () => void;
   submit: () => void;
+  /** 整表校验一次但不提交。 */
+  validateAll: FormApi['validateAll'];
+  validateField: FormApi['validateField'];
+  validateFields: FormApi['validateFields'];
+  resetField: (name: FormPath) => void;
   reset: () => void;
 }
 declare function useForm(props: Props, callbacks?: FormCallbacks): FormContext;

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":";;;;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"}
+{"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;EACpB,gBAAgB;;UAGD;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;EACb,gBAAgB,MAAM,UAAU;EAChC,gBAAgB,MAAM,UAAU;EAChC;EACA;;EAEA,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,aAAa,MAAM;EACnB;;iBAGc,QAAQ,OAAO,OAAO,YAAW,gBAAqB"}

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

@@ -21,6 +21,10 @@ function useForm(props, callbacks = {}) {
 		setFieldError: (name, message) => api.value.setFieldError(name, message),
 		clearErrors: () => api.value.clearErrors(),
 		submit: () => api.value.submit(),
+		validateAll: () => api.value.validateAll(),
+		validateField: (name) => api.value.validateField(name),
+		validateFields: (names) => api.value.validateFields(names),
+		resetField: (name) => api.value.resetField(name),
 		reset: () => api.value.reset()
 	};
 }

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":["/*\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"}
+{"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  onSubmitError?: Props['onSubmitError']\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  /** 整表校验一次但不提交。 */\n  validateAll: FormApi['validateAll']\n  validateField: FormApi['validateField']\n  validateFields: FormApi['validateFields']\n  resetField: (name: FormPath) => 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    validateAll: () => api.value.validateAll(),\n    validateField: name => api.value.validateField(name),\n    validateFields: names => api.value.validateFields(names),\n    resetField: name => api.value.resetField(name),\n    reset: () => api.value.reset(),\n  }\n}\n"],"mappings":";;;;;;;AA8CA,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,mBAAmB,IAAI,MAAM,YAAY;EACzC,gBAAe,SAAQ,IAAI,MAAM,cAAc,IAAI;EACnD,iBAAgB,UAAS,IAAI,MAAM,eAAe,KAAK;EACvD,aAAY,SAAQ,IAAI,MAAM,WAAW,IAAI;EAC7C,aAAa,IAAI,MAAM,MAAM;CAC/B;AACF"}

package/dist/components/funnel-chart/context.js

@@ -0,0 +1,15 @@
+import { inject, provide } from "vue";
+//#region src/components/funnel-chart/context.ts
+const KEY = Symbol.for("xh-funnel-chart");
+function provideFunnelChart(ctx) {
+	provide(KEY, ctx);
+}
+function useFunnelChartContext() {
+	const ctx = inject(KEY, null);
+	if (!ctx) throw new Error("[xh] FunnelChart 部件必须用在 XhFunnelChartRoot 内");
+	return ctx;
+}
+//#endregion
+export { provideFunnelChart, useFunnelChartContext };
+
+//# sourceMappingURL=context.js.map

package/dist/components/funnel-chart/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/funnel-chart/context.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// 提供 context 相关实现。\n\nimport type { InjectionKey } from 'vue'\nimport type { FunnelChartContext } from './use-funnel-chart'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<FunnelChartContext> = Symbol.for('xh-funnel-chart')\n\nexport function provideFunnelChart(ctx: FunnelChartContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useFunnelChartContext(): FunnelChartContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] FunnelChart 部件必须用在 XhFunnelChartRoot 内')\n  return ctx\n}\n"],"mappings":";;AAWA,MAAM,MAAwC,OAAO,IAAI,iBAAiB;AAE1E,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,6CAA6C;CAC/D,OAAO;AACT"}

package/dist/components/funnel-chart/funnel-chart.d.ts

@@ -0,0 +1,175 @@
+import { PayloadOf } from "../../runtime/payload.js";
+import { PropType, SlotsType, VNode } from "vue";
+import { ChartDatumDetails, ChartKey, ChartPalette, ChartRow, FunnelAlign, FunnelChartApi, FunnelChartSchema, FunnelChartTranslations, FunnelConversion, FunnelDirection, FunnelLabels, FunnelShape, FunnelTooltipModel, NumberFormatSpec } from "@xihan-ui/headless";
+//#region src/components/funnel-chart/funnel-chart.d.ts
+type FunnelChartProps = FunnelChartSchema['props'];
+/** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
+type FunnelChartRootSlotProps = Pick<FunnelChartApi, 'active' | 'tooltip' | 'empty' | 'hiddenSeries' | 'activeKey' | 'toggleSeries' | 'setFocusedDatum' | 'table'>;
+/** 提示框插槽的载荷：激活的阶段与缺省的内容模型。 */
+interface FunnelChartTooltipSlotProps {
+  active: ChartDatumDetails | null;
+  tooltip: FunnelTooltipModel | null;
+}
+/** 标题：图表的可及名来源。 */
+declare const XhFunnelChartCaption: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 视口：尺寸观测的宿主，块尺寸由组件槽决定。 */
+declare const XhFunnelChartViewport: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 绘图区：阶段在下，阶段标签与转化率在上，焦点环最上。 */
+declare const XhFunnelChartPlot: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 提示框：缺省内容按激活的阶段生成，作用域插槽可替换。 */
+declare const XhFunnelChartTooltip: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  default?: (props: FunnelChartTooltipSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 空态：没有可画的数据时显示，缺省文字取文案。 */
+declare const XhFunnelChartEmpty: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 根：铺开缺省结构或交给默认插槽，并在末尾追加摘要与数据表。 */
+declare const XhFunnelChartRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  data: {
+    type: PropType<readonly ChartRow[]>;
+  };
+  nameField: {
+    type: StringConstructor;
+  };
+  valueField: {
+    type: StringConstructor;
+  };
+  shape: {
+    type: PropType<FunnelShape>;
+  };
+  align: {
+    type: PropType<FunnelAlign>;
+  };
+  direction: {
+    type: PropType<FunnelDirection>;
+  };
+  conversion: {
+    type: PropType<FunnelConversion>;
+  };
+  labels: {
+    type: PropType<FunnelLabels>;
+  };
+  palette: {
+    type: PropType<ChartPalette>;
+  };
+  format: {
+    type: PropType<NumberFormatSpec | ((value: number) => string)>;
+  };
+  hiddenSeries: {
+    type: PropType<string[]>;
+  };
+  defaultHiddenSeries: {
+    type: PropType<string[]>;
+  };
+  activeKey: {
+    type: PropType<ChartKey | null>;
+  };
+  pending: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  animated: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  locale: {
+    type: StringConstructor;
+  };
+  translations: {
+    type: PropType<Partial<FunnelChartTranslations>>;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'hidden-series-change': (_details: PayloadOf<FunnelChartProps, "onHiddenSeriesChange">) => true;
+  'update:hiddenSeries': (_hidden: PayloadOf<FunnelChartProps, "onHiddenSeriesChange">["hiddenSeries"]) => true;
+  'active-key-change': (_details: PayloadOf<FunnelChartProps, "onActiveKeyChange">) => true;
+  'update:activeKey': (_key: PayloadOf<FunnelChartProps, "onActiveKeyChange">["activeKey"]) => true;
+  'datum-active': (_details: PayloadOf<FunnelChartProps, "onDatumActive">) => true;
+  'datum-press': (_details: PayloadOf<FunnelChartProps, "onDatumPress">) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  data: {
+    type: PropType<readonly ChartRow[]>;
+  };
+  nameField: {
+    type: StringConstructor;
+  };
+  valueField: {
+    type: StringConstructor;
+  };
+  shape: {
+    type: PropType<FunnelShape>;
+  };
+  align: {
+    type: PropType<FunnelAlign>;
+  };
+  direction: {
+    type: PropType<FunnelDirection>;
+  };
+  conversion: {
+    type: PropType<FunnelConversion>;
+  };
+  labels: {
+    type: PropType<FunnelLabels>;
+  };
+  palette: {
+    type: PropType<ChartPalette>;
+  };
+  format: {
+    type: PropType<NumberFormatSpec | ((value: number) => string)>;
+  };
+  hiddenSeries: {
+    type: PropType<string[]>;
+  };
+  defaultHiddenSeries: {
+    type: PropType<string[]>;
+  };
+  activeKey: {
+    type: PropType<ChartKey | null>;
+  };
+  pending: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  animated: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  locale: {
+    type: StringConstructor;
+  };
+  translations: {
+    type: PropType<Partial<FunnelChartTranslations>>;
+  };
+}>> & Readonly<{
+  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
+  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
+  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
+  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
+  "onDatum-active"?: ((_details: ChartDatumDetails | null) => any) | undefined;
+  "onDatum-press"?: ((_details: ChartDatumDetails) => any) | undefined;
+}>, {
+  pending: boolean;
+  animated: boolean;
+}, SlotsType<{
+  /** 自行摆放部件；不写时铺开缺省结构：视口（绘图区与空态）、提示框。 */
+  default?: (props: FunnelChartRootSlotProps) => VNode[];
+  /** 缺省结构里的标题内容。 */
+  caption?: () => VNode[];
+  /** 缺省结构里的提示框内容。 */
+  tooltip?: (props: FunnelChartTooltipSlotProps) => VNode[];
+  /** 缺省结构里的空态内容。 */
+  empty?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { FunnelChartRootSlotProps, FunnelChartTooltipSlotProps, XhFunnelChartCaption, XhFunnelChartEmpty, XhFunnelChartPlot, XhFunnelChartRoot, XhFunnelChartTooltip, XhFunnelChartViewport };
+//# sourceMappingURL=funnel-chart.d.ts.map

package/dist/components/funnel-chart/funnel-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-chart.d.ts","names":[],"sources":["../../../src/components/funnel-chart/funnel-chart.ts"],"mappings":";;;;KA+BK,mBAAmB;;KAGZ,2BAA2B,KAAK;;UAG3B;EACf,QAAQ;EACR,SAAS;;;cA2CE,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAShC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAU5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;;EAGnB,WAAC,OAAO,gCAAgC;kCAWpD;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,8BAAA;;IAIH,MAAA,kBAAkB;;;;;;;;;IAGhB,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACE,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;EAId,yBAAA,UAAA,UAAU;EACZ,wBAAA,SAAA,UAAU;EACX,sBAAA,UAAA,UAAU;EACf,qBAAA,MAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;;;IAzBb,MAAA,kBAAkB;;;;;;;;;IAGhB,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACE,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAavC,WAAC,OAAO,6BAA6B;;EAErC,gBAAM;;EAEN,WAAC,OAAO,gCAAgC;;EAE1C,cAAM;kCA4ChB"}