@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/form/Field.d.ts

@@ -0,0 +1,158 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type PartProps } from '../utils/props';
+import { type FieldLabelAligns, type FieldLabelPlacements } from './field-layout';
+import type { FieldConstraints } from './form-constraints';
+/** Field 交给控件的信息 */
+export interface FieldState {
+    /** 控件（主元素）的 id，标签的 for 指向它 */
+    readonly controlId: string;
+    /** 标签的 id：控件不是原生输入元素（滑块、单选组）时用 aria-labelledby 指向它 */
+    readonly labelId: string | undefined;
+    /** 说明与错误信息的 id，空格分隔，给 aria-describedby */
+    readonly describedBy: string | undefined;
+    /** 校验未通过 */
+    readonly invalid: boolean;
+    /** 必填 */
+    readonly required: boolean;
+    /** 不可用 */
+    readonly disabled: boolean;
+    /** 只读 */
+    readonly readonly: boolean;
+    /** 从表单 schema 推出的约束（在 Form 里写了 name 时）；控件据此加 maxlength、min / max 等 */
+    readonly constraints: FieldConstraints;
+}
+/** Field 的上下文：自定义控件用 useFieldControl 接入，一般不直接读它；null 表示子树不属于任何 Field */
+export declare const FieldContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<FieldState | null>;
+/** 控件自己的状态（不写时取 Field 的） */
+export interface FieldControlOptions {
+    /** 控件上显式写的 id */
+    id?: string;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 必填；在 Form 里写了 name 时默认按表单的 schema（如 z.string().min(1)） */
+    required?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+}
+/** useFieldControl 的选项 */
+export interface FieldControlUse {
+    /** 输入交给里面的另一个控件（DatePicker 里的 DateField）：子树仍属于 Field，由那个控件接 */
+    delegate?: boolean;
+}
+/** 控件合并 Field 之后的状态与关联属性 */
+export interface FieldControl {
+    /** 控件的 id：显式写的优先，其次是 Field 给的 */
+    id: string | undefined;
+    /** 不是原生输入元素的控件用它作 aria-labelledby */
+    labelledBy: string | undefined;
+    /** aria-describedby */
+    describedBy: string | undefined;
+    /** 校验未通过 */
+    invalid: boolean;
+    /** 必填 */
+    required: boolean;
+    /** 不可用 */
+    disabled: boolean;
+    /** 只读 */
+    readonly: boolean;
+    /** 从表单 schema 推出的约束；不在 Field 里、或推不出时为空对象。控件上显式写的属性优先 */
+    constraints: FieldConstraints;
+}
+/**
+ * 所在的表单重置时（form.reset()、type="reset" 的按钮）调用：控件丢掉自己还没写回的输入（日期分段打了一半）。
+ * 值本身由表单改回去；只是半截输入时值一直是 null，重置前后没有变化，控件不知道要清。在 setup 里调用
+ */
+export declare function useFormReset(onReset: () => void): void;
+/**
+ * 控件读取所在 Field 的信息（在 setup 里调用，返回的函数在渲染时调用）：
+ * 控件上显式写的状态优先；不在 Field 里时用控件自己的，不可用与只读再看所在的 Form、FormSection。
+ * 控件里再嵌的控件（Select 的搜索框、区间的两个框、时间面板的列表）不是 Field 的控件，
+ * 拿到 Field 的 id、说明与必填会重复 id、让表单提交被空的搜索框拦住：调用后子树与 Field 隔开，
+ * 除非写了 delegate
+ */
+export declare function useFieldControl(read: () => FieldControlOptions, { delegate }?: FieldControlUse): () => FieldControl;
+/** 未声明的属性落到 label 上 */
+export interface LabelProps extends PartProps<'label'> {
+    /** 必填：文字后加一个星号图标（对读屏隐藏，必填由控件的 required 告诉读屏） */
+    required?: boolean;
+    /** 不可用：变淡 */
+    disabled?: boolean;
+    /** 必填标记的部件属性 */
+    propsRequired?: Partial<IconProps>;
+    children?: VNodeChild;
+}
+/** Field 的样式：root、disabled、required */
+export declare const labelStyles: Readonly<{
+    disabled: css.CompiledStyles;
+    required: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 表单标签（label）：for 指向控件；Field 里自动关联，单独使用时自己写 for */
+export declare const Label: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LabelProps>;
+/** 未声明的属性落到外层 div 上 */
+export interface FieldProps extends PartProps<'div'> {
+    /** 在 Form 里对应的字段路径（如 `email`、`address.city`）：错误取自表单控制器，只有一个控件时自动绑定它的值 */
+    name?: string;
+    /**
+     * 自动绑定值时写到控件的哪个属性：默认 _value；控件声明了 _checked 而没有 _value（Switch、单个 Checkbox）时是 _checked
+     */
+    valueProp?: '_value' | '_checked';
+    /** 标签 */
+    label?: VNodeChild;
+    /** 控件下方的说明 */
+    description?: VNodeChild;
+    /** 错误信息：给了（且 invalid 不是 false）就显示，并把控件标为出错；在 Form 里写了 name 时默认取表单的错误 */
+    error?: VNodeChild;
+    /** 校验未通过；不写时有 error 就算出错 */
+    invalid?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 不可用；不写时取所在 Form、FormSection 的 */
+    disabled?: boolean;
+    /** 只读；不写时取所在 Form、FormSection 的 */
+    readonly?: boolean;
+    /** 标签放在哪；不写时取所在 Form、FormSection 的，都没写时在上方 */
+    labelPlacement?: keyof FieldLabelPlacements;
+    /** 标签在起始边时标签列的宽度：数字是 px，也可以写 CSS 长度；默认 `'8em'` */
+    labelWidth?: number | string;
+    /** 标签在起始边时文字的对齐，默认 end（贴着控件） */
+    labelAlign?: keyof FieldLabelAligns;
+    /**
+     * 标签只给读屏：视觉上隐藏，仍是控件的名称（表格式的重复行只在第一行显示列名、紧凑的筛选条）；
+     * 这时不占标签列，控件单独一列
+     */
+    labelHidden?: boolean;
+    /** 标签的部件属性 */
+    propsLabel?: Partial<LabelProps>;
+    /** 控件列（标签在起始边时包住控件、说明与错误的 div）的部件属性 */
+    propsControl?: PartProps<'div'>;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    /** 错误信息的部件属性 */
+    propsError?: Partial<TextProps>;
+    /** 控件 */
+    children?: VNodeChild;
+}
+/** Field 的样式：root、start、label…、control、hint、error、errorIcon */
+export declare const fieldStyles: Readonly<{
+    control: css.CompiledStyles;
+    controlWithoutLabel: css.CompiledStyles;
+    error: css.CompiledStyles;
+    errorIcon: css.CompiledStyles;
+    hint: css.CompiledStyles;
+    labelEnd: css.CompiledStyles;
+    labelStart: css.CompiledStyles;
+    root: css.CompiledStyles;
+    start: css.CompiledStyles;
+}>;
+/** Field 的动态样式：标签列的宽度 */
+export declare const fieldColumnStyles: Readonly<{
+    readonly columns: (labelWidth: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 表单字段：标签、控件、说明、错误信息，自动关联 id 与状态 */
+export declare const Field: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FieldProps>;

package/dist/form/Field.js

@@ -0,0 +1,327 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { focusControl } from "../utils/dom/focus.js";
+import { statusIcons } from "../utils/style/tone-styles.js";
+import { plainText } from "../utils/data/text.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { FieldLayoutContext } from "./field-layout.js";
+import { FormContext } from "./Form.js";
+import { Fragment, cloneVNode, createVNode, isVNode, mergeProps, unref, useId, watch } from "vue";
+import { _component, childrenProp, createContext, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Asterisk } from "@lucide/icons";
+//#region src/form/Field.tsx
+/**
+* 表单字段：标签 + 控件 + 说明 + 错误信息，并把它们关联起来（参考 Ark UI Field、React Aria 的 Label / Description / FieldError）。
+*
+*   <Field label="邮箱" description="用于找回密码" error={errors.email} required>
+*     <TextField _value={form.email} type="email" />
+*   </Field>
+*
+* Field 经上下文告诉里面的控件：控件的 id（标签的 for 指向它）、标签的 id（不是原生输入的控件用 aria-labelledby）、
+* 说明与错误的 id（aria-describedby），以及 invalid / required / disabled / readonly。
+* 控件上显式写的状态优先于 Field 的。控件用 useFieldControl 读取这些信息，单独使用（不在 Field 里）时照常工作。
+* 在 Form 里写了 name 时，错误信息取自表单控制器（useForm），焦点离开字段时报告失焦（何时显示错误见 useForm）；
+* 里面只有一个控件、控件上没写值时自动绑定表单的这个字段（valueProp 决定写 _value 还是 _checked），
+* 标签与控件登记给表单，错误汇总（FormErrorSummary）据此列出字段名、跳到控件。
+*
+* 标签可以放在起始边（`labelPlacement="start"`）：标签一列、控件一列，标签与控件的第一行文字按基线对齐，
+* 多行文本框、勾选组也对得齐。通常在 Form、FormSection 上统一设置（见 field-layout），整组的只读、不可用同样从那里来。
+*
+* 部件：Root（div）、Label（Label）、Control（div，标签在起始边时包住控件、说明与错误）、
+* Description（Text）、Error（Text，带警示图标）。
+*/
+var NO_CONSTRAINTS = Object.freeze({});
+/** Field 交给控件的信息 */
+/** Field 的上下文：自定义控件用 useFieldControl 接入，一般不直接读它；null 表示子树不属于任何 Field */
+var FieldContext = createContext("Field");
+/** 控件自己的状态（不写时取 Field 的） */
+/** useFieldControl 的选项 */
+/** 控件合并 Field 之后的状态与关联属性 */
+/**
+* 所在的表单重置时（form.reset()、type="reset" 的按钮）调用：控件丢掉自己还没写回的输入（日期分段打了一半）。
+* 值本身由表单改回去；只是半截输入时值一直是 null，重置前后没有变化，控件不知道要清。在 setup 里调用
+*/
+function useFormReset(onReset) {
+	const form = FormContext.inject(null);
+	if (form) watch(() => form.resetCount, onReset);
+}
+/**
+* 控件读取所在 Field 的信息（在 setup 里调用，返回的函数在渲染时调用）：
+* 控件上显式写的状态优先；不在 Field 里时用控件自己的，不可用与只读再看所在的 Form、FormSection。
+* 控件里再嵌的控件（Select 的搜索框、区间的两个框、时间面板的列表）不是 Field 的控件，
+* 拿到 Field 的 id、说明与必填会重复 id、让表单提交被空的搜索框拦住：调用后子树与 Field 隔开，
+* 除非写了 delegate
+*/
+function useFieldControl(read, { delegate = false } = {}) {
+	const field = FieldContext.inject(null);
+	if (!delegate) FieldContext.provide(null);
+	const layout = field ? null : FieldLayoutContext.inject(null);
+	return () => {
+		const own = read();
+		return {
+			id: own.id ?? field?.controlId,
+			labelledBy: field?.labelId,
+			describedBy: field?.describedBy,
+			invalid: own.invalid ?? field?.invalid ?? false,
+			required: own.required ?? field?.required ?? false,
+			disabled: own.disabled ?? field?.disabled ?? layout?.disabled ?? false,
+			readonly: own.readonly ?? field?.readonly ?? layout?.readonly ?? false,
+			constraints: field?.constraints ?? NO_CONSTRAINTS
+		};
+	};
+}
+/** 未声明的属性落到 label 上 */
+/** Field 的样式：root、disabled、required */
+var labelStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "baseline",
+		gap: "_xs",
+		fontSize: "_sm",
+		fontWeight: "_medium",
+		lineHeight: "_tight",
+		color: "_text"
+	},
+	disabled: { opacity: "_disabled" },
+	required: {
+		alignSelf: "flex-start",
+		width: "0.7em",
+		height: "0.7em",
+		color: "_dangerText"
+	}
+});
+/**
+* for 指向的不是原生能被标签关联的元素（单选组、滑块组、日期分段这类 role="group"）时，点标签浏览器什么也不做：
+* 改为聚焦它里面第一个能聚焦的控件（同点原生输入框的标签）
+*/
+function focusGroupControl(event) {
+	const label = event.currentTarget;
+	if (event.defaultPrevented || label.control || !label.htmlFor) return;
+	const target = label.ownerDocument.getElementById(label.htmlFor);
+	if (target) focusControl(target);
+}
+/** 表单标签（label）：for 指向控件；Field 里自动关联，单独使用时自己写 for */
+var Label = /*#__PURE__*/ _component((_props, _ctx) => {
+	const required = readonlyProp(_props, "required", false);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const propsRequired = readonlyProp(_props, "propsRequired");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("label", mergeProps(mergeAttrs({ sx: [labelStyles.root, disabled.value && labelStyles.disabled] }, rest, { onClick: focusGroupControl }), { "data-disabled": disabled.value || void 0 }), [children.value, required.value && createVNode(Icon, mergePartProps({
+		icon: Asterisk,
+		sx: labelStyles.required
+	}, propsRequired.value), null)]);
+}, {
+	name: "Label",
+	props: [
+		"required",
+		"disabled",
+		"propsRequired"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** 控件的组件声明了这个属性（运行时的 props 定义） */
+function declares(node, key) {
+	const declared = node.type.props;
+	if (Array.isArray(declared)) return declared.includes(key);
+	return typeof declared === "object" && declared !== null && key in declared;
+}
+/** Field 里唯一的控件：一个组件的 VNode（数组里只有一项也算）；不是时 undefined */
+function soleControl(children) {
+	const node = Array.isArray(children) && children.length === 1 ? children[0] : children;
+	if (!isVNode(node) || typeof node.type === "string" || node.type === Fragment) return void 0;
+	return node;
+}
+/** 标签在起始边时默认的标签列宽度：放得下七八个汉字 */
+var DEFAULT_LABEL_WIDTH = "8em";
+/** Field 的样式：root、start、label…、control、hint、error、errorIcon */
+var fieldStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		minWidth: 0
+	},
+	start: {
+		display: "grid",
+		columnGap: "_md",
+		rowGap: "_xs",
+		alignItems: "baseline"
+	},
+	labelStart: {
+		justifySelf: "start",
+		textAlign: "start"
+	},
+	labelEnd: {
+		justifySelf: "end",
+		textAlign: "end"
+	},
+	controlWithoutLabel: { gridColumnStart: "2" },
+	control: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		minWidth: 0
+	},
+	hint: {
+		fontSize: "_sm",
+		lineHeight: "_normal"
+	},
+	error: {
+		display: "inline-flex",
+		alignItems: "flex-start",
+		gap: "_xs"
+	},
+	errorIcon: {
+		flexShrink: 0,
+		marginBlock: "0.25em"
+	}
+});
+/** Field 的动态样式：标签列的宽度 */
+var fieldColumnStyles = css.create({ columns: (labelWidth) => ({ gridTemplateColumns: `${labelWidth} minmax(0, 1fr)` }) });
+/** 表单字段：标签、控件、说明、错误信息，自动关联 id 与状态 */
+var Field = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const name = readonlyProp(_props2, "name");
+	const valueProp = readonlyProp(_props2, "valueProp");
+	const label = readonlyProp(_props2, "label");
+	const description = readonlyProp(_props2, "description");
+	const error = readonlyProp(_props2, "error");
+	const invalid = readonlyProp(_props2, "invalid");
+	const required = readonlyProp(_props2, "required");
+	const disabled = readonlyProp(_props2, "disabled");
+	const readonly = readonlyProp(_props2, "readonly");
+	const labelPlacement = readonlyProp(_props2, "labelPlacement");
+	const labelWidth = readonlyProp(_props2, "labelWidth");
+	const labelAlign = readonlyProp(_props2, "labelAlign");
+	const labelHidden = readonlyProp(_props2, "labelHidden", false);
+	const propsLabel = readonlyProp(_props2, "propsLabel");
+	const propsControl = readonlyProp(_props2, "propsControl");
+	const propsDescription = readonlyProp(_props2, "propsDescription");
+	const propsError = readonlyProp(_props2, "propsError");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const id = useId();
+	const ids = {
+		control: `${id}-control`,
+		label: `${id}-label`,
+		description: `${id}-description`,
+		error: `${id}-error`
+	};
+	const form = FormContext.inject(null);
+	const layout = FieldLayoutContext.inject(null);
+	const message = () => hasContent(error.value) ? error.value : name.value != null ? form?.visibleError(name.value) : void 0;
+	const showError = () => hasContent(message()) && invalid.value !== false;
+	const constraints = () => name.value != null && form ? form.constraints(name.value) : NO_CONSTRAINTS;
+	const isRequired = () => required.value ?? constraints().required ?? false;
+	const isDisabled = () => disabled.value ?? layout?.disabled ?? false;
+	const isReadonly = () => readonly.value ?? layout?.readonly ?? false;
+	FieldContext.provide({
+		controlId: ids.control,
+		get labelId() {
+			return hasContent(label.value) ? ids.label : void 0;
+		},
+		get describedBy() {
+			return [hasContent(description.value) && ids.description, showError() && ids.error].filter(Boolean).join(" ") || void 0;
+		},
+		get invalid() {
+			return invalid.value ?? hasContent(message());
+		},
+		get required() {
+			return isRequired();
+		},
+		get constraints() {
+			return constraints();
+		},
+		get disabled() {
+			return isDisabled();
+		},
+		get readonly() {
+			return isReadonly();
+		}
+	});
+	effect(() => name.value != null && form ? form.register(name.value, {
+		label: plainText(label.value) ?? name.value,
+		controlId: ids.control
+	}) : void 0);
+	/** 只有一个控件、控件上没写值时，自动绑定表单的这个字段（同 Ant Design Form.Item 的 name） */
+	function bindValue(content) {
+		const control = name.value != null && form ? soleControl(content) : void 0;
+		if (!control || !form) return content;
+		const key = valueProp.value ?? (declares(control, "_checked") && !declares(control, "_value") ? "_checked" : "_value");
+		if (control.props && key in control.props) return content;
+		const path = name.value;
+		return cloneVNode(control, {
+			[key]: form.getValue(path),
+			[`onUpdate:${key}`]: (value) => form.setValue(path, value)
+		});
+	}
+	function onFocusout(event) {
+		const next = event.relatedTarget;
+		const field = event.currentTarget;
+		if (name.value != null && !(next instanceof Node && field.contains(next))) form?.blur(name.value);
+	}
+	return () => {
+		const placement = labelPlacement.value ?? layout?.labelPlacement ?? "top";
+		const start = placement === "start" && !labelHidden.value;
+		const width = labelWidth.value ?? layout?.labelWidth ?? DEFAULT_LABEL_WIDTH;
+		const align = labelAlign.value ?? layout?.labelAlign ?? "end";
+		const hints = [hasContent(description.value) && createVNode(Text$1, mergeProps(mergePartProps({
+			tone: "muted",
+			sx: fieldStyles.hint
+		}, propsDescription.value, { id: ids.description }), { "key": "__site0" }), {
+			default: () => [unref(description)],
+			$stable: true
+		}), showError() && createVNode(Text$1, mergeProps(mergePartProps({
+			tone: "danger",
+			sx: [fieldStyles.hint, fieldStyles.error]
+		}, propsError.value, { id: ids.error }), { "key": "__site1" }), {
+			default: () => [createVNode(Icon, {
+				"icon": statusIcons.danger,
+				"sx": fieldStyles.errorIcon
+			}, null), message()],
+			$stable: true
+		})];
+		return createVNode("div", mergeProps(mergeAttrs({ sx: start ? [fieldStyles.start, css.bind(fieldColumnStyles.columns, () => [typeof width === "number" ? `${width}px` : width])] : fieldStyles.root }, rest, { onFocusout }), {
+			"data-invalid": (invalid.value ?? message() != null) || void 0,
+			"data-disabled": isDisabled() || void 0,
+			"data-label-placement": placement
+		}), [hasContent(label.value) && createVNode(Label, mergeProps(mergePartProps({
+			required: isRequired(),
+			disabled: isDisabled(),
+			sx: labelHidden.value ? visuallyHiddenStyles.hidden : start && (align === "end" ? fieldStyles.labelEnd : fieldStyles.labelStart)
+		}, propsLabel.value, {
+			id: ids.label,
+			for: ids.control
+		}), { "key": "__site2" }), {
+			default: () => [unref(label)],
+			$stable: true
+		}), start ? createVNode("div", mergeAttrs({ sx: [fieldStyles.control, !hasContent(label.value) && fieldStyles.controlWithoutLabel] }, propsControl.value), [bindValue(children.value), hints]) : [bindValue(children.value), hints]]);
+	};
+}, {
+	name: "Field",
+	props: [
+		"name",
+		"valueProp",
+		"label",
+		"description",
+		"error",
+		"invalid",
+		"required",
+		"disabled",
+		"readonly",
+		"labelPlacement",
+		"labelWidth",
+		"labelAlign",
+		"labelHidden",
+		"propsLabel",
+		"propsControl",
+		"propsDescription",
+		"propsError"
+	]
+});
+//#endregion
+export { Field, FieldContext, Label, fieldColumnStyles, fieldStyles, labelStyles, useFieldControl, useFormReset };
+
+//# sourceMappingURL=Field.js.map

package/dist/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/form/Field.tsx"],"sourcesContent":["/**\n * 表单字段：标签 + 控件 + 说明 + 错误信息，并把它们关联起来（参考 Ark UI Field、React Aria 的 Label / Description / FieldError）。\n *\n *   <Field label=\"邮箱\" description=\"用于找回密码\" error={errors.email} required>\n *     <TextField _value={form.email} type=\"email\" />\n *   </Field>\n *\n * Field 经上下文告诉里面的控件：控件的 id（标签的 for 指向它）、标签的 id（不是原生输入的控件用 aria-labelledby）、\n * 说明与错误的 id（aria-describedby），以及 invalid / required / disabled / readonly。\n * 控件上显式写的状态优先于 Field 的。控件用 useFieldControl 读取这些信息，单独使用（不在 Field 里）时照常工作。\n * 在 Form 里写了 name 时，错误信息取自表单控制器（useForm），焦点离开字段时报告失焦（何时显示错误见 useForm）；\n * 里面只有一个控件、控件上没写值时自动绑定表单的这个字段（valueProp 决定写 _value 还是 _checked），\n * 标签与控件登记给表单，错误汇总（FormErrorSummary）据此列出字段名、跳到控件。\n *\n * 标签可以放在起始边（`labelPlacement=\"start\"`）：标签一列、控件一列，标签与控件的第一行文字按基线对齐，\n * 多行文本框、勾选组也对得齐。通常在 Form、FormSection 上统一设置（见 field-layout），整组的只读、不可用同样从那里来。\n *\n * 部件：Root（div）、Label（Label）、Control（div，标签在起始边时包住控件、说明与错误）、\n * Description（Text）、Error（Text，带警示图标）。\n */\nimport { Asterisk } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { cloneVNode, Fragment, isVNode, useId, watch, type VNode, type VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { plainText } from '../utils/data/text';\nimport { focusControl } from '../utils/dom/focus';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport {\n  FieldLayoutContext,\n  type FieldLabelAligns,\n  type FieldLabelPlacements,\n} from './field-layout';\nimport { FormContext } from './Form';\nimport type { FieldConstraints } from './form-constraints';\n\nconst NO_CONSTRAINTS: FieldConstraints = Object.freeze({});\n\n/** Field 交给控件的信息 */\nexport interface FieldState {\n  /** 控件（主元素）的 id，标签的 for 指向它 */\n  readonly controlId: string;\n  /** 标签的 id：控件不是原生输入元素（滑块、单选组）时用 aria-labelledby 指向它 */\n  readonly labelId: string | undefined;\n  /** 说明与错误信息的 id，空格分隔，给 aria-describedby */\n  readonly describedBy: string | undefined;\n  /** 校验未通过 */\n  readonly invalid: boolean;\n  /** 必填 */\n  readonly required: boolean;\n  /** 不可用 */\n  readonly disabled: boolean;\n  /** 只读 */\n  readonly readonly: boolean;\n  /** 从表单 schema 推出的约束（在 Form 里写了 name 时）；控件据此加 maxlength、min / max 等 */\n  readonly constraints: FieldConstraints;\n}\n\n/** Field 的上下文：自定义控件用 useFieldControl 接入，一般不直接读它；null 表示子树不属于任何 Field */\nexport const FieldContext = createContext<FieldState | null>('Field');\n\n/** 控件自己的状态（不写时取 Field 的） */\nexport interface FieldControlOptions {\n  /** 控件上显式写的 id */\n  id?: string;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 必填；在 Form 里写了 name 时默认按表单的 schema（如 z.string().min(1)） */\n  required?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n}\n\n/** useFieldControl 的选项 */\nexport interface FieldControlUse {\n  /** 输入交给里面的另一个控件（DatePicker 里的 DateField）：子树仍属于 Field，由那个控件接 */\n  delegate?: boolean;\n}\n\n/** 控件合并 Field 之后的状态与关联属性 */\nexport interface FieldControl {\n  /** 控件的 id：显式写的优先，其次是 Field 给的 */\n  id: string | undefined;\n  /** 不是原生输入元素的控件用它作 aria-labelledby */\n  labelledBy: string | undefined;\n  /** aria-describedby */\n  describedBy: string | undefined;\n  /** 校验未通过 */\n  invalid: boolean;\n  /** 必填 */\n  required: boolean;\n  /** 不可用 */\n  disabled: boolean;\n  /** 只读 */\n  readonly: boolean;\n  /** 从表单 schema 推出的约束；不在 Field 里、或推不出时为空对象。控件上显式写的属性优先 */\n  constraints: FieldConstraints;\n}\n\n/**\n * 所在的表单重置时（form.reset()、type=\"reset\" 的按钮）调用：控件丢掉自己还没写回的输入（日期分段打了一半）。\n * 值本身由表单改回去；只是半截输入时值一直是 null，重置前后没有变化，控件不知道要清。在 setup 里调用\n */\nexport function useFormReset(onReset: () => void): void {\n  const form = FormContext.inject(null);\n  if (form) watch(() => form.resetCount, onReset);\n}\n\n/**\n * 控件读取所在 Field 的信息（在 setup 里调用，返回的函数在渲染时调用）：\n * 控件上显式写的状态优先；不在 Field 里时用控件自己的，不可用与只读再看所在的 Form、FormSection。\n * 控件里再嵌的控件（Select 的搜索框、区间的两个框、时间面板的列表）不是 Field 的控件，\n * 拿到 Field 的 id、说明与必填会重复 id、让表单提交被空的搜索框拦住：调用后子树与 Field 隔开，\n * 除非写了 delegate\n */\nexport function useFieldControl(\n  read: () => FieldControlOptions,\n  { delegate = false }: FieldControlUse = {},\n): () => FieldControl {\n  const field = FieldContext.inject(null);\n  if (!delegate) FieldContext.provide(null);\n  const layout = field ? null : FieldLayoutContext.inject(null);\n  return () => {\n    const own = read();\n    return {\n      id: own.id ?? field?.controlId,\n      labelledBy: field?.labelId,\n      describedBy: field?.describedBy,\n      invalid: own.invalid ?? field?.invalid ?? false,\n      required: own.required ?? field?.required ?? false,\n      disabled: own.disabled ?? field?.disabled ?? layout?.disabled ?? false,\n      readonly: own.readonly ?? field?.readonly ?? layout?.readonly ?? false,\n      constraints: field?.constraints ?? NO_CONSTRAINTS,\n    };\n  };\n}\n\n/** 未声明的属性落到 label 上 */\nexport interface LabelProps extends PartProps<'label'> {\n  /** 必填：文字后加一个星号图标（对读屏隐藏，必填由控件的 required 告诉读屏） */\n  required?: boolean;\n  /** 不可用：变淡 */\n  disabled?: boolean;\n  /** 必填标记的部件属性 */\n  propsRequired?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/** Field 的样式：root、disabled、required */\nexport const labelStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: '_xs',\n    fontSize: '_sm',\n    fontWeight: '_medium',\n    lineHeight: '_tight',\n    color: '_text',\n  },\n  disabled: { opacity: '_disabled' },\n  required: { alignSelf: 'flex-start', width: '0.7em', height: '0.7em', color: '_dangerText' },\n});\n\n/**\n * for 指向的不是原生能被标签关联的元素（单选组、滑块组、日期分段这类 role=\"group\"）时，点标签浏览器什么也不做：\n * 改为聚焦它里面第一个能聚焦的控件（同点原生输入框的标签）\n */\nfunction focusGroupControl(event: MouseEvent) {\n  const label = event.currentTarget as HTMLLabelElement;\n  if (event.defaultPrevented || label.control || !label.htmlFor) return;\n  const target = label.ownerDocument.getElementById(label.htmlFor);\n  if (target) focusControl(target);\n}\n\n/** 表单标签（label）：for 指向控件；Field 里自动关联，单独使用时自己写 for */\nexport const Label = _component(\n  ({ required = false, disabled = false, propsRequired, children, ...rest }: LabelProps) =>\n    () => (\n      <label\n        {...mergeAttrs<'label'>(\n          { sx: [labelStyles.root, disabled && labelStyles.disabled] },\n          rest,\n          { onClick: focusGroupControl },\n        )}\n        data-disabled={disabled || undefined}\n      >\n        {children}\n        {required && (\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: Asterisk, sx: labelStyles.required },\n              propsRequired,\n            )}\n          />\n        )}\n      </label>\n    ),\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FieldProps extends PartProps<'div'> {\n  /** 在 Form 里对应的字段路径（如 `email`、`address.city`）：错误取自表单控制器，只有一个控件时自动绑定它的值 */\n  name?: string;\n  /**\n   * 自动绑定值时写到控件的哪个属性：默认 _value；控件声明了 _checked 而没有 _value（Switch、单个 Checkbox）时是 _checked\n   */\n  valueProp?: '_value' | '_checked';\n  /** 标签 */\n  label?: VNodeChild;\n  /** 控件下方的说明 */\n  description?: VNodeChild;\n  /** 错误信息：给了（且 invalid 不是 false）就显示，并把控件标为出错；在 Form 里写了 name 时默认取表单的错误 */\n  error?: VNodeChild;\n  /** 校验未通过；不写时有 error 就算出错 */\n  invalid?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 不可用；不写时取所在 Form、FormSection 的 */\n  disabled?: boolean;\n  /** 只读；不写时取所在 Form、FormSection 的 */\n  readonly?: boolean;\n  /** 标签放在哪；不写时取所在 Form、FormSection 的，都没写时在上方 */\n  labelPlacement?: keyof FieldLabelPlacements;\n  /** 标签在起始边时标签列的宽度：数字是 px，也可以写 CSS 长度；默认 `'8em'` */\n  labelWidth?: number | string;\n  /** 标签在起始边时文字的对齐，默认 end（贴着控件） */\n  labelAlign?: keyof FieldLabelAligns;\n  /**\n   * 标签只给读屏：视觉上隐藏，仍是控件的名称（表格式的重复行只在第一行显示列名、紧凑的筛选条）；\n   * 这时不占标签列，控件单独一列\n   */\n  labelHidden?: boolean;\n  /** 标签的部件属性 */\n  propsLabel?: Partial<LabelProps>;\n  /** 控件列（标签在起始边时包住控件、说明与错误的 div）的部件属性 */\n  propsControl?: PartProps<'div'>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 错误信息的部件属性 */\n  propsError?: Partial<TextProps>;\n  /** 控件 */\n  children?: VNodeChild;\n}\n\n/** 控件的组件声明了这个属性（运行时的 props 定义） */\nfunction declares(node: VNode, key: string): boolean {\n  const declared = (node.type as { props?: unknown }).props;\n  if (Array.isArray(declared)) return declared.includes(key);\n  return typeof declared === 'object' && declared !== null && key in declared;\n}\n\n/** Field 里唯一的控件：一个组件的 VNode（数组里只有一项也算）；不是时 undefined */\nfunction soleControl(children: VNodeChild): VNode | undefined {\n  const node = Array.isArray(children) && children.length === 1 ? children[0] : children;\n  if (!isVNode(node) || typeof node.type === 'string' || node.type === Fragment) return undefined;\n  return node;\n}\n\n/** 标签在起始边时默认的标签列宽度：放得下七八个汉字 */\nconst DEFAULT_LABEL_WIDTH = '8em';\n\n/** Field 的样式：root、start、label…、control、hint、error、errorIcon */\nexport const fieldStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  // 标签一列、控件一列；第一行按基线对齐：标签与输入框里的文字、勾选项的文字在同一条线上\n  start: {\n    display: 'grid',\n    columnGap: '_md',\n    rowGap: '_xs',\n    alignItems: 'baseline',\n  },\n  labelStart: { justifySelf: 'start', textAlign: 'start' },\n  labelEnd: { justifySelf: 'end', textAlign: 'end' },\n  // 没有标签时控件仍放在第二列，与上下的字段对齐\n  controlWithoutLabel: { gridColumnStart: '2' },\n  control: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  hint: { fontSize: '_sm', lineHeight: '_normal' },\n  error: { display: 'inline-flex', alignItems: 'flex-start', gap: '_xs' },\n  errorIcon: { flexShrink: 0, marginBlock: '0.25em' },\n});\n\n/** Field 的动态样式：标签列的宽度 */\nexport const fieldColumnStyles = css.create({\n  columns: (labelWidth: string) => ({ gridTemplateColumns: `${labelWidth} minmax(0, 1fr)` }),\n});\n\n/** 表单字段：标签、控件、说明、错误信息，自动关联 id 与状态 */\nexport const Field = _component(\n  ({\n    name,\n    valueProp,\n    label,\n    description,\n    error,\n    invalid,\n    required,\n    disabled,\n    readonly,\n    labelPlacement,\n    labelWidth,\n    labelAlign,\n    labelHidden = false,\n    propsLabel,\n    propsControl,\n    propsDescription,\n    propsError,\n    children,\n    ...rest\n  }: FieldProps) => {\n    const id = useId();\n    const ids = {\n      control: `${id}-control`,\n      label: `${id}-label`,\n      description: `${id}-description`,\n      error: `${id}-error`,\n    };\n    const form = FormContext.inject(null);\n    const layout = FieldLayoutContext.inject(null);\n    // error={cond && '…'} 条件不成立时是 false：当作没写，用表单的错误\n    const message = () =>\n      hasContent(error) ? error : name != null ? form?.visibleError(name) : undefined;\n    const showError = () => hasContent(message()) && invalid !== false;\n    const constraints = () => (name != null && form ? form.constraints(name) : NO_CONSTRAINTS);\n    const isRequired = () => required ?? constraints().required ?? false;\n    const isDisabled = () => disabled ?? layout?.disabled ?? false;\n    const isReadonly = () => readonly ?? layout?.readonly ?? false;\n\n    FieldContext.provide({\n      controlId: ids.control,\n      get labelId() {\n        return hasContent(label) ? ids.label : undefined;\n      },\n      get describedBy() {\n        const parts = [hasContent(description) && ids.description, showError() && ids.error];\n        return parts.filter(Boolean).join(' ') || undefined;\n      },\n      get invalid() {\n        return invalid ?? hasContent(message());\n      },\n      get required() {\n        return isRequired();\n      },\n      get constraints() {\n        return constraints();\n      },\n      get disabled() {\n        return isDisabled();\n      },\n      get readonly() {\n        return isReadonly();\n      },\n    });\n\n    // 登记给表单：错误汇总据此显示字段名、跳到控件\n    _effect(() =>\n      name != null && form\n        ? form.register(name, { label: plainText(label) ?? name, controlId: ids.control })\n        : undefined,\n    );\n\n    /** 只有一个控件、控件上没写值时，自动绑定表单的这个字段（同 Ant Design Form.Item 的 name） */\n    function bindValue(content: VNodeChild): VNodeChild {\n      const control = name != null && form ? soleControl(content) : undefined;\n      if (!control || !form) return content;\n      const key =\n        valueProp ??\n        (declares(control, '_checked') && !declares(control, '_value') ? '_checked' : '_value');\n      if (control.props && key in control.props) return content;\n      const path = name!;\n      return cloneVNode(control, {\n        [key]: form.getValue(path),\n        [`onUpdate:${key}`]: (value: unknown) => form.setValue(path, value),\n      });\n    }\n\n    // 焦点离开整个字段（不是在字段内部移动）时报告失焦\n    function onFocusout(event: FocusEvent) {\n      const next = event.relatedTarget;\n      const field = event.currentTarget as HTMLElement;\n      if (name != null && !(next instanceof Node && field.contains(next))) form?.blur(name);\n    }\n\n    return () => {\n      const placement = labelPlacement ?? layout?.labelPlacement ?? 'top';\n      const start = placement === 'start' && !labelHidden;\n      const width = labelWidth ?? layout?.labelWidth ?? DEFAULT_LABEL_WIDTH;\n      const align = labelAlign ?? layout?.labelAlign ?? 'end';\n      const hints = [\n        hasContent(description) && (\n          <Text\n            {...mergePartProps<TextProps>(\n              { tone: 'muted', sx: fieldStyles.hint },\n              propsDescription,\n              {\n                id: ids.description,\n              },\n            )}\n          >\n            {description}\n          </Text>\n        ),\n        showError() && (\n          <Text\n            {...mergePartProps<TextProps>(\n              { tone: 'danger', sx: [fieldStyles.hint, fieldStyles.error] },\n              propsError,\n              { id: ids.error },\n            )}\n          >\n            <Icon icon={statusIcons.danger} sx={fieldStyles.errorIcon} />\n            {message()}\n          </Text>\n        ),\n      ];\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: start\n                ? [\n                    fieldStyles.start,\n                    fieldColumnStyles.columns(typeof width === 'number' ? `${width}px` : width),\n                  ]\n                : fieldStyles.root,\n            },\n            rest,\n            { onFocusout },\n          )}\n          data-invalid={(invalid ?? message() != null) || undefined}\n          data-disabled={isDisabled() || undefined}\n          data-label-placement={placement}\n        >\n          {hasContent(label) && (\n            <Label\n              {...mergePartProps<LabelProps>(\n                {\n                  required: isRequired(),\n                  disabled: isDisabled(),\n                  sx: labelHidden\n                    ? visuallyHiddenStyles.hidden\n                    : start && (align === 'end' ? fieldStyles.labelEnd : fieldStyles.labelStart),\n                },\n                propsLabel,\n                { id: ids.label, for: ids.control },\n              )}\n            >\n              {label}\n            </Label>\n          )}\n          {start ? (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [fieldStyles.control, !hasContent(label) && fieldStyles.controlWithoutLabel],\n                },\n                propsControl,\n              )}\n            >\n              {bindValue(children)}\n              {hints}\n            </div>\n          ) : (\n            [bindValue(children), hints]\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/form/Form.d.ts

@@ -0,0 +1,14 @@
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type FieldLayout } from './field-layout';
+import type { FormControllerBase } from './useForm';
+/** 表单控制器（Field 按 name 读取错误、报告失焦） */
+export declare const FormContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<FormControllerBase>;
+/** 提交与重置由组件管理；未声明的属性落到 form 上 */
+export interface FormProps extends PartProps<'form', 'novalidate'>, FieldLayout {
+    /** useForm() 创建的控制器 */
+    controller: FormControllerBase;
+    children?: VNodeChild;
+}
+/** 表单：提交时校验并聚焦第一个出错的控件，重置回到初始值 */
+export declare const Form: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormProps>;

package/dist/form/Form.js

@@ -0,0 +1,66 @@
+import { mergeAttrs } from "../utils/props.js";
+import { focusControl } from "../utils/dom/focus.js";
+import { provideFieldLayout } from "./field-layout.js";
+import { createVNode, mergeProps, nextTick, shallowRef } from "vue";
+import { _component, childrenProp, createContext, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/form/Form.tsx
+/** 表单控制器（Field 按 name 读取错误、报告失焦） */
+var FormContext = createContext("Form");
+/** 提交与重置由组件管理；未声明的属性落到 form 上 */
+/** 表单：提交时校验并聚焦第一个出错的控件，重置回到初始值 */
+var Form = /*#__PURE__*/ _component((_props, _ctx) => {
+	const controller = readonlyProp(_props, "controller");
+	const labelPlacement = readonlyProp(_props, "labelPlacement");
+	const labelWidth = readonlyProp(_props, "labelWidth");
+	const labelAlign = readonlyProp(_props, "labelAlign");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const readonly = readonlyProp(_props, "readonly", false);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let form = shallowRef(null);
+	FormContext.provide(untrack(() => controller.value));
+	provideFieldLayout(() => ({
+		labelPlacement: labelPlacement.value,
+		labelWidth: labelWidth.value,
+		labelAlign: labelAlign.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	async function onSubmit(event) {
+		event.preventDefault();
+		if (await controller.value.submit()) return;
+		await nextTick();
+		const summary = form.value?.querySelector("[data-form-error-summary]");
+		if (summary) return summary.focus();
+		const invalid = form.value?.querySelector("[aria-invalid=\"true\"]");
+		if (invalid) focusControl(invalid);
+	}
+	function onReset(event) {
+		event.preventDefault();
+		controller.value.reset();
+	}
+	return () => createVNode("form", mergeProps(mergeAttrs({}, rest, {
+		ref: form,
+		novalidate: true,
+		onSubmit: (event) => void onSubmit(event),
+		onReset
+	}), {
+		"data-submitting": controller.value.submitting || void 0,
+		"data-disabled": disabled.value || void 0,
+		"data-readonly": readonly.value || void 0
+	}), [children.value]);
+}, {
+	name: "Form",
+	props: [
+		"controller",
+		"labelPlacement",
+		"labelWidth",
+		"labelAlign",
+		"disabled",
+		"readonly"
+	]
+});
+//#endregion
+export { Form, FormContext };
+
+//# sourceMappingURL=Form.js.map

package/dist/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/form/Form.tsx"],"sourcesContent":["/**\n * 表单（form）：把 useForm 的控制器交给里面的 Field。提交时先校验，没通过就把焦点移到错误汇总（有 FormErrorSummary 时）\n * 或第一个出错的控件上；\n * 原生的 reset（type=\"reset\" 的按钮）回到初始值。\n *\n *   <Form controller={form}>\n *     <form.Field name=\"email\" label=\"邮箱\"><TextField _value={form.values.email} /></form.Field>\n *     <Button type=\"submit\" loading={form.submitting}>保存</Button>\n *   </Form>\n *\n * 加了 novalidate：校验与错误信息由 useForm 与 Field 负责，不弹浏览器自带的气泡；控件上的 required 仍告诉读屏“必填”。\n *\n * 整张表单的标签布局（labelPlacement、labelWidth、labelAlign）与只读、不可用在这里统一设置，见 field-layout。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { nextTick, type VNodeChild } from 'vue';\nimport { focusControl } from '../utils/dom/focus';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { provideFieldLayout, type FieldLayout } from './field-layout';\nimport type { FormControllerBase } from './useForm';\n\n/** 表单控制器（Field 按 name 读取错误、报告失焦） */\nexport const FormContext = createContext<FormControllerBase>('Form');\n\n/** 提交与重置由组件管理；未声明的属性落到 form 上 */\nexport interface FormProps extends PartProps<'form', 'novalidate'>, FieldLayout {\n  /** useForm() 创建的控制器 */\n  controller: FormControllerBase;\n  children?: VNodeChild;\n}\n\n/** 表单：提交时校验并聚焦第一个出错的控件，重置回到初始值 */\nexport const Form = _component(\n  ({\n    controller,\n    labelPlacement,\n    labelWidth,\n    labelAlign,\n    disabled = false,\n    readonly = false,\n    children,\n    ...rest\n  }: FormProps) => {\n    let form = _state.raw<HTMLFormElement | null>(null);\n    // 控制器在表单存在期间不换：只取当前值提供下去\n    FormContext.provide(_untrack(controller));\n    provideFieldLayout(() => ({ labelPlacement, labelWidth, labelAlign, disabled, readonly }));\n\n    async function onSubmit(event: Event) {\n      event.preventDefault();\n      if (await controller.submit()) return;\n      // 等错误渲染出来（aria-invalid 写到控件上）再移焦点\n      await nextTick();\n      // 有错误汇总时先到它那里（读屏念出有几项、各是什么），从它的链接跳到字段\n      const summary = form?.querySelector<HTMLElement>('[data-form-error-summary]');\n      if (summary) return summary.focus();\n      const invalid = form?.querySelector<HTMLElement>('[aria-invalid=\"true\"]');\n      // 出错的可能是一组控件（RadioGroup 的 radiogroup 本身不能聚焦）：聚焦它里面第一个能聚焦的\n      if (invalid) focusControl(invalid);\n    }\n\n    function onReset(event: Event) {\n      event.preventDefault();\n      controller.reset();\n    }\n\n    return () => (\n      <form\n        {...mergeAttrs<'form'>({}, rest, {\n          ref: _toRef(form),\n          novalidate: true,\n          onSubmit: (event: Event) => void onSubmit(event),\n          onReset,\n        })}\n        data-submitting={controller.submitting || undefined}\n        data-disabled={disabled || undefined}\n        data-readonly={readonly || undefined}\n      >\n        {children}\n      </form>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAsBA,IAAa,cAAc,cAAkC,MAAM;;;AAUnE,IAAa,OAAO,0BAClB,QAAA,SASiB;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAJJ,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAEb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,OAAIC,WAAsC,IAAI;CAElD,YAAY,QAAOC,cAAA,WAAA,KAAA,CAAqB;CACxC,0BAA0B;EAAE,gBAAc,eAAA;EAAE,YAAU,WAAA;EAAE,YAAU,WAAA;EAAE,UAAQ,SAAA;EAAE,UAAQ,SAAA;CAAC,EAAE;CAEzF,eAAe,SAAS,OAAc;EACpC,MAAM,eAAe;EACrB,IAAI,MAAM,WAAA,MAAW,OAAO,GAAG;EAE/B,MAAM,SAAS;EAEf,MAAM,UAAU,KAAA,OAAM,cAA2B,2BAA2B;EAC5E,IAAI,SAAS,OAAO,QAAQ,MAAM;EAClC,MAAM,UAAU,KAAA,OAAM,cAA2B,yBAAuB;EAExE,IAAI,SAAS,aAAa,OAAO;CACnC;CAEA,SAAS,QAAQ,OAAc;EAC7B,MAAM,eAAe;EACrB,WAAA,MAAW,MAAM;CACnB;CAEA,aAAOC,YAAA,QAAAC,WAEC,WAAmB,CAAC,GAAG,MAAM;EAC/B,KAAG;EACH,YAAY;EACZ,WAAW,UAAiB,KAAK,SAAS,KAAK;EAC/C;CACF,CAAC,GAAC;EAAA,mBACe,WAAA,MAAW,cAAc,KAAA;EAAS,iBACpC,SAAA,SAAY,KAAA;EAAS,iBACrB,SAAA,SAAY,KAAA;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAK1C,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}