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

package/dist/form/FormErrorSummary.d.ts

@@ -0,0 +1,23 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到外层 div 上 */
+export interface FormErrorSummaryProps extends PartProps<'div', 'title'> {
+    /** 标题；不写时取语言包（有 N 项需要修改） */
+    title?: (count: number) => VNodeChild;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 列表的部件属性 */
+    propsList?: PartProps<'ul'>;
+    /** 每一项链接的部件属性 */
+    propsLink?: PartProps<'a'>;
+}
+/** FormErrorSummary 的样式：root、title、list、link */
+export declare const formErrorSummaryStyles: Readonly<{
+    link: css.CompiledStyles;
+    list: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 错误汇总：提交没通过时列出各项错误，点了跳到字段 */
+export declare const FormErrorSummary: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormErrorSummaryProps>;

package/dist/form/FormErrorSummary.js

@@ -0,0 +1,102 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { focusControl } from "../utils/dom/focus.js";
+import { statusIcons } from "../utils/style/tone-styles.js";
+import { FormContext } from "./Form.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/form/FormErrorSummary.tsx
+/** 未声明的属性落到外层 div 上 */
+/** FormErrorSummary 的样式：root、title、list、link */
+var formErrorSummaryStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		padding: "_md",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_dangerBorder",
+		borderRadius: "_md",
+		backgroundColor: "_dangerSoft",
+		color: "_text"
+	},
+	title: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		fontWeight: "_semibold",
+		color: "_dangerText"
+	},
+	list: {
+		margin: 0,
+		paddingInlineStart: "1.5em",
+		display: "grid",
+		gap: "_xs"
+	},
+	link: {
+		color: "_dangerText",
+		textDecoration: {
+			default: "underline",
+			":hover": "none"
+		},
+		textUnderlineOffset: "0.2em"
+	}
+});
+/** 错误汇总：提交没通过时列出各项错误，点了跳到字段 */
+var FormErrorSummary = /*#__PURE__*/ _component((_props, _ctx) => {
+	const title = readonlyProp(_props, "title");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsLink = readonlyProp(_props, "propsLink");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const form = FormContext.inject(null);
+	/** 显示着的错误：整份表单的在前，其余按字段在表单里出现的顺序 */
+	const items = () => {
+		if (!form || form.submitCount === 0) return [];
+		const fields = [...form.fields].flatMap(([path, field]) => {
+			const message = form.visibleError(path);
+			return message ? [{
+				path,
+				label: field.label,
+				controlId: field.controlId,
+				message
+			}] : [];
+		});
+		return form.formError ? [{
+			path: "",
+			label: "",
+			controlId: "",
+			message: form.formError
+		}, ...fields] : fields;
+	};
+	function jump(event, controlId) {
+		event.preventDefault();
+		const control = document.getElementById(controlId);
+		if (control) focusControl(control);
+	}
+	return () => {
+		const list = items();
+		if (list.length === 0) return null;
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [formErrorSummaryStyles.root, focusRingStyles.visible] }, rest, { tabindex: -1 }), { "data-form-error-summary": "" }), [createVNode("div", mergeAttrs({ sx: formErrorSummaryStyles.title }, propsTitle.value), [createVNode(Icon, { "icon": statusIcons.danger }, null), title.value ? title.value(list.length) : lang.formErrorSummary(list.length)]), createVNode("ul", mergeAttrs({ sx: formErrorSummaryStyles.list }, propsList.value), [list.map((item) => createVNode("li", { "key": item.path }, [item.controlId ? createVNode("a", mergeAttrs({ sx: formErrorSummaryStyles.link }, propsLink.value, {
+			href: `#${item.controlId}`,
+			onClick: (event) => jump(event, item.controlId)
+		}), [item.label ? lang.formErrorItem(item.label, item.message) : item.message]) : item.message]))])]);
+	};
+}, {
+	name: "FormErrorSummary",
+	props: [
+		"title",
+		"propsTitle",
+		"propsList",
+		"propsLink"
+	]
+});
+//#endregion
+export { FormErrorSummary, formErrorSummaryStyles };
+
+//# sourceMappingURL=FormErrorSummary.js.map

package/dist/form/FormErrorSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormErrorSummary.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/form/FormErrorSummary.tsx"],"sourcesContent":["/**\n * 错误汇总：提交没通过时在表单顶上列出各项错误（“有 3 项需要修改”），每项是链接，点了跳到那个字段的控件。\n * 放在 Form 里（通常是第一个）；提交失败时 Form 把焦点移到它上面，读屏念出有几项、各是什么（GOV.UK 的 Error summary）。\n *\n *   <Form controller={form}>\n *     <FormErrorSummary />\n *     <form.Field name=\"email\" label=\"邮箱\"><TextField /></form.Field>\n *   </Form>\n *\n * 只列显示着的错误（失焦过、提交过的字段），按字段在表单里出现的顺序；改对一项它就从列表里消失，全改对了汇总收起。\n * 整份表单的错误（不属于哪个字段）排在最前，不带链接。字段名取自 Field 的标签。\n * 部件：Root（div，role=\"alert\" 之外可以聚焦）、Title（div）、List（ul）、Link（a）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { focusControl } from '../utils/dom/focus';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport { FormContext } from './Form';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FormErrorSummaryProps extends PartProps<'div', 'title'> {\n  /** 标题；不写时取语言包（有 N 项需要修改） */\n  title?: (count: number) => VNodeChild;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 列表的部件属性 */\n  propsList?: PartProps<'ul'>;\n  /** 每一项链接的部件属性 */\n  propsLink?: PartProps<'a'>;\n}\n\n/** FormErrorSummary 的样式：root、title、list、link */\nexport const formErrorSummaryStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    padding: '_md',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_dangerBorder',\n    borderRadius: '_md',\n    backgroundColor: '_dangerSoft',\n    color: '_text',\n  },\n  title: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_xs',\n    fontWeight: '_semibold',\n    color: '_dangerText',\n  },\n  list: { margin: 0, paddingInlineStart: '1.5em', display: 'grid', gap: '_xs' },\n  link: {\n    color: '_dangerText',\n    textDecoration: { default: 'underline', ':hover': 'none' },\n    textUnderlineOffset: '0.2em',\n  },\n});\n\n/** 错误汇总：提交没通过时列出各项错误，点了跳到字段 */\nexport const FormErrorSummary = _component(\n  ({ title, propsTitle, propsList, propsLink, ...rest }: FormErrorSummaryProps) => {\n    const lang = useLang();\n    const form = FormContext.inject(null);\n\n    /** 显示着的错误：整份表单的在前，其余按字段在表单里出现的顺序 */\n    const items = () => {\n      if (!form || form.submitCount === 0) return [];\n      const fields = [...form.fields].flatMap(([path, field]) => {\n        const message = form.visibleError(path);\n        return message ? [{ path, label: field.label, controlId: field.controlId, message }] : [];\n      });\n      return form.formError\n        ? [{ path: '', label: '', controlId: '', message: form.formError }, ...fields]\n        : fields;\n    };\n\n    function jump(event: MouseEvent, controlId: string) {\n      event.preventDefault();\n      const control = document.getElementById(controlId);\n      if (control) focusControl(control);\n    }\n\n    return () => {\n      const list = items();\n      if (list.length === 0) return null;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [formErrorSummaryStyles.root, focusRingStyles.visible] },\n            rest,\n            {\n              // 提交失败时 Form 把焦点移到这里\n              tabindex: -1,\n            },\n          )}\n          data-form-error-summary=\"\"\n        >\n          <div {...mergeAttrs<'div'>({ sx: formErrorSummaryStyles.title }, propsTitle)}>\n            <Icon icon={statusIcons.danger} />\n            {title ? title(list.length) : lang.formErrorSummary(list.length)}\n          </div>\n          <ul {...mergeAttrs<'ul'>({ sx: formErrorSummaryStyles.list }, propsList)}>\n            {list.map((item) => (\n              <li key={item.path}>\n                {item.controlId ? (\n                  <a\n                    {...mergeAttrs<'a'>({ sx: formErrorSummaryStyles.link }, propsLink, {\n                      href: `#${item.controlId}`,\n                      onClick: (event: MouseEvent) => jump(event, item.controlId),\n                    })}\n                  >\n                    {item.label ? lang.formErrorItem(item.label, item.message) : item.message}\n                  </a>\n                ) : (\n                  item.message\n                )}\n              </li>\n            ))}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAa,yBAAyB,IAAI,OAAO;CAC/C,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,SAAS;EACT,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,OAAO;CACT;CACA,OAAO;EACL,SAAS;EACT,YAAY;EACZ,KAAK;EACL,YAAY;EACZ,OAAO;CACT;CACA,MAAM;EAAE,QAAQ;EAAG,oBAAoB;EAAS,SAAS;EAAQ,KAAK;CAAM;CAC5E,MAAM;EACJ,OAAO;EACP,gBAAgB;GAAE,SAAS;GAAa,UAAU;EAAO;EACzD,qBAAqB;CACvB;AACF,CAAC;;AAGD,IAAa,mBAAmB,0BAC9B,QAAA,SAAiF;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAlC,OAAIC,UAAA,QAAA,MAAA,IAAA;CACjD,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,YAAY,OAAO,IAAI;;CAGpC,MAAM,cAAc;EAClB,IAAI,CAAC,QAAQ,KAAK,gBAAgB,GAAG,OAAO,CAAA;EAC5C,MAAM,SAAS,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC,SAAS,CAAC,MAAM,WAAW;GACzD,MAAM,UAAU,KAAK,aAAa,IAAI;GACtC,OAAO,UAAU,CAAC;IAAE;IAAM,OAAO,MAAM;IAAO,WAAW,MAAM;IAAW;GAAQ,CAAC,IAAI,CAAA;EACzF,CAAC;EACD,OAAO,KAAK,YACR,CAAC;GAAE,MAAM;GAAI,OAAO;GAAI,WAAW;GAAI,SAAS,KAAK;EAAU,GAAG,GAAG,MAAM,IAC3E;CACN;CAEA,SAAS,KAAK,OAAmB,WAAmB;EAClD,MAAM,eAAe;EACrB,MAAM,UAAU,SAAS,eAAe,SAAS;EACjD,IAAI,SAAS,aAAa,OAAO;CACnC;CAEA,aAAa;EACX,MAAM,OAAO,MAAM;EACnB,IAAI,KAAK,WAAW,GAAG,OAAO;EAC9B,OAAAC,YAAA,OAAAC,WAEQ,WACF,EAAE,IAAI,CAAC,uBAAuB,MAAM,gBAAgB,OAAO,EAAE,GAC7D,MACA,EAEE,UAAU,GACZ,CACF,GAAC,EAAA,2BAAA,GAAA,CAAA,GAAA,CAAAD,YAAA,OAGQ,WAAkB,EAAE,IAAI,uBAAuB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAAA,YAAA,MAAA,EAAA,QAC9D,YAAY,OAAM,GAAA,IAAA,GAC7B,MAAA,QAAQ,MAAA,MAAM,KAAK,MAAM,IAAI,KAAK,iBAAiB,KAAK,MAAM,CAAC,CAAA,GAAAA,YAAA,MAE1D,WAAiB,EAAE,IAAI,uBAAuB,KAAK,GAAC,UAAA,KAAW,GAAC,CACrE,KAAK,KAAK,SAAIA,YAAA,MAAA,EAAA,OACJ,KAAK,KAAI,GAAA,CACf,KAAK,YAASA,YAAA,KAEP,WAAgB,EAAE,IAAI,uBAAuB,KAAK,GAAC,UAAA,OAAa;GAClE,MAAM,IAAI,KAAK;GACf,UAAU,UAAsB,KAAK,OAAO,KAAK,SAAS;EAC5D,CAAC,GAAC,CAED,KAAK,QAAQ,KAAK,cAAc,KAAK,OAAO,KAAK,OAAO,IAAI,KAAK,OAAO,CAAA,IAG3E,KAAK,OACN,CAAA,CAEJ,CAAC,CAAA,CAAA,CAAA;CAIV;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/FormSection.d.ts

@@ -0,0 +1,66 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type CollapseProps } from '../display/Collapse';
+import { type PartProps } from '../utils/props';
+import { type FieldLayout } from './field-layout';
+/** 角色与关联由组件管理；原生的 title 属性让给标题内容 */
+export type FormSectionManaged = 'role' | 'title' | 'aria-labelledby' | 'aria-describedby';
+/** 未声明的属性落到外层 div 上 */
+export interface FormSectionProps extends PartProps<'div', FormSectionManaged>, FieldLayout {
+    /** 标题；不写时没有标题栏，只是一层栅格与字段布局 */
+    title?: VNodeChild;
+    /** 标题下面的说明 */
+    description?: VNodeChild;
+    /** 标题栏结束边的内容：链接、按钮（“查看关联明细”“添加”） */
+    extra?: VNodeChild;
+    /** 标题的级别（h2–h6），默认 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** 最多几列，默认 1；容器窄时按 minColumnWidth 自动减少 */
+    columns?: number;
+    /** 每列的最小宽度（CSS 长度），默认 `'26em'`：标签在起始边时放得下标签、控件与横排的三四个选项 */
+    minColumnWidth?: string;
+    /** 可以展开收起：标题变成按钮 */
+    collapsible?: boolean;
+    /** 是否展开（collapsible 时）：父级写 _open={x}，默认展开 */
+    _open?: boolean;
+    /** 标题栏的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 标题（h2–h6）的部件属性 */
+    propsHeading?: PartProps<'h3'>;
+    /** 展开收起按钮的部件属性 */
+    propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;
+    /** 展开箭头的部件属性 */
+    propsChevron?: Partial<IconProps>;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    /** 标题栏结束边内容的部件属性 */
+    propsExtra?: PartProps<'div'>;
+    /** 字段栅格的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 展开收起层的部件属性（collapsible 时） */
+    propsCollapse?: Partial<CollapseProps>;
+    /** 字段 */
+    children?: VNodeChild;
+}
+/** FormSection 的样式：root、header、headerText、heading、trigger、chevron、description、extra、body、singleColumn */
+export declare const formSectionStyles: Readonly<{
+    body: css.CompiledStyles;
+    chevron: css.CompiledStyles;
+    chevronClosed: css.CompiledStyles;
+    description: css.CompiledStyles;
+    extra: css.CompiledStyles;
+    header: css.CompiledStyles;
+    headerText: css.CompiledStyles;
+    heading: css.CompiledStyles;
+    root: css.CompiledStyles;
+    trigger: css.CompiledStyles;
+}>;
+/** FormSection 的样式：columns（最多几列、每列不窄于多少） */
+export declare const formSectionColumnStyles: Readonly<{
+    readonly columns: (count: number, minWidth: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 表单里的一组字段：标题栏、字段栅格，可折叠；这一组的标签布局、只读、不可用 */
+export declare const FormSection: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormSectionProps>;

package/dist/form/FormSection.js

@@ -0,0 +1,227 @@
+import { space, t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { layoutVars } from "../utils/style/vars.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { provideGridColumns } from "../layout/Grid.js";
+import { Collapse } from "../display/Collapse.js";
+import { provideFieldLayout } from "./field-layout.js";
+import { createVNode, h, isVNode, mergeProps, unref, useId } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown } from "@lucide/icons";
+//#region src/form/FormSection.tsx
+/**
+* 表单里的一组字段：标题、说明、右侧的操作，下面一条细线，再下面是字段的栅格。长表单按主题分组（基本信息、计划与实施……）。
+*
+*   <FormSection title="项目基本信息" columns={2}>
+*     <Field label="项目名称">…</Field>
+*     <Field label="任务类别">…</Field>
+*     <GridItem span="full"><Field label="简要描述">…</Field></GridItem>
+*   </FormSection>
+*
+* columns 是最多几列：每列不窄于 minColumnWidth，容器窄时自动减少列数，不需要断点；跨列用 GridItem（多列时用 span="full"）。
+* 也是一层字段布局（field-layout）：标签位置、宽度、对齐、只读、不可用写在这里只作用于这一组，没写的沿用 Form 的。
+* collapsible 时标题是展开收起的按钮（aria-expanded），收起的字段不能被 Tab 到。
+* 给了 id 就能当锚点：长表单旁边放一个 TableOfContents（items 用各组的 id 与标题）做分节导航，跳过来时让开粘性顶栏。
+* 语义：role="group" 以标题为名称、说明为描述，标题是 h2–h6（headingLevel），读屏能按标题跳转。
+*
+* 部件：Root（div）、Header（div）、Heading（h2–h6）、Trigger（ButtonBase，collapsible 时）、Chevron（Icon）、
+* Description（Text）、Extra（div）、Body（div，字段的栅格）、Collapse（collapsible 时包住 Body）。
+*/
+/** 角色与关联由组件管理；原生的 title 属性让给标题内容 */
+/** 未声明的属性落到外层 div 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** FormSection 的样式：root、header、headerText、heading、trigger、chevron、description、extra、body、singleColumn */
+var formSectionStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_lg",
+		minWidth: 0,
+		scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`
+	},
+	header: {
+		display: "flex",
+		alignItems: "flex-end",
+		justifyContent: "space-between",
+		flexWrap: "wrap",
+		columnGap: "_lg",
+		rowGap: "_xs",
+		paddingBlockEnd: "_sm",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_borderMuted"
+	},
+	headerText: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		minWidth: 0
+	},
+	heading: {
+		margin: 0,
+		fontSize: "_md",
+		fontWeight: "_semibold",
+		lineHeight: "_tight",
+		color: "_text"
+	},
+	trigger: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		marginInline: `calc(-1 * ${t.space.xs})`,
+		paddingInline: "_xs",
+		borderRadius: "_sm",
+		fontWeight: "inherit",
+		color: "inherit",
+		textAlign: "start",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fill"
+		}
+	},
+	chevron: {
+		flexShrink: 0,
+		color: "_textMuted"
+	},
+	chevronClosed: { rotate: "-90deg" },
+	description: {
+		fontSize: "_sm",
+		lineHeight: "_normal"
+	},
+	extra: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		flexShrink: 0
+	},
+	body: {
+		"--form-section-column-gap": "_space.xl",
+		display: "grid",
+		columnGap: "var(--form-section-column-gap)",
+		rowGap: "_md",
+		gridTemplateColumns: "minmax(0, 1fr)",
+		alignItems: "start"
+	}
+});
+/** FormSection 的样式：columns（最多几列、每列不窄于多少） */
+var formSectionColumnStyles = css.create({ columns: (count, minWidth) => ({ gridTemplateColumns: `repeat(auto-fill, minmax(max(min(${minWidth}, 100%), calc((100% - ${count - 1} * var(--form-section-column-gap)) / ${count})), 1fr))` }) });
+/** 表单里的一组字段：标题栏、字段栅格，可折叠；这一组的标签布局、只读、不可用 */
+var FormSection = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const extra = readonlyProp(_props, "extra");
+	const headingLevel = readonlyProp(_props, "headingLevel", 3);
+	const columns = readonlyProp(_props, "columns", 1);
+	const minColumnWidth = readonlyProp(_props, "minColumnWidth", "26em");
+	const collapsible = readonlyProp(_props, "collapsible", false);
+	const open = bindable(_props, "_open", () => true, _ctx.emit);
+	const labelPlacement = readonlyProp(_props, "labelPlacement");
+	const labelWidth = readonlyProp(_props, "labelWidth");
+	const labelAlign = readonlyProp(_props, "labelAlign");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsHeading = readonlyProp(_props, "propsHeading");
+	const propsTrigger = readonlyProp(_props, "propsTrigger");
+	const propsChevron = readonlyProp(_props, "propsChevron");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsExtra = readonlyProp(_props, "propsExtra");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsCollapse = readonlyProp(_props, "propsCollapse");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const id = useId();
+	const ids = {
+		title: `${id}-title`,
+		description: `${id}-description`,
+		body: `${id}-body`
+	};
+	provideFieldLayout(() => ({
+		labelPlacement: labelPlacement.value,
+		labelWidth: labelWidth.value,
+		labelAlign: labelAlign.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const bodyRef = provideGridColumns(() => columns.value > 1 ? {
+		columns: columns.value,
+		minItemWidth: minColumnWidth.value
+	} : { columns: 1 });
+	return () => {
+		const state = !collapsible.value || open.value ? "open" : "closed";
+		const titleContent = collapsible.value ? createVNode(ButtonBase, mergeProps(mergePartProps({ sx: formSectionStyles.trigger }, propsTrigger.value, {
+			id: ids.title,
+			"aria-expanded": open.value,
+			"aria-controls": ids.body,
+			onClick: () => open.value = !open.value
+		}), {
+			"data-state": state,
+			"key": "__site0"
+		}), {
+			default: () => [createVNode("span", null, [title.value]), createVNode(Icon, mergePartProps({
+				icon: ChevronDown,
+				sx: [
+					formSectionStyles.chevron,
+					disclosureStyles.icon,
+					!open.value && formSectionStyles.chevronClosed
+				]
+			}, propsChevron.value), null)],
+			$stable: true
+		}) : createVNode("span", { "id": ids.title }, [title.value]);
+		const body = createVNode("div", mergeAttrs({ sx: [formSectionStyles.body, columns.value > 1 && css.bind(formSectionColumnStyles.columns, () => [columns.value, minColumnWidth.value], true)] }, propsBody.value, {
+			ref: bodyRef,
+			...collapsible.value ? {} : { id: ids.body }
+		}), [children.value]);
+		return createVNode("div", mergeProps(mergeAttrs({ sx: formSectionStyles.root }, rest, {
+			role: hasContent(title.value) ? "group" : void 0,
+			"aria-labelledby": hasContent(title.value) ? ids.title : void 0,
+			"aria-describedby": hasContent(description.value) ? ids.description : void 0
+		}), { "data-state": collapsible.value ? state : void 0 }), [(title.value != null || extra.value != null) && createVNode("div", mergeAttrs({ sx: formSectionStyles.header }, propsHeader.value), [createVNode("div", css.attrs(formSectionStyles.headerText), [hasContent(title.value) && h(`h${headingLevel.value}`, mergeAttrs({ sx: formSectionStyles.heading }, propsHeading.value), [titleContent]), hasContent(description.value) && createVNode(Text$1, mergeProps(mergePartProps({
+			tone: "muted",
+			sx: formSectionStyles.description
+		}, propsDescription.value, { id: ids.description }), { "key": "__site1" }), {
+			default: () => [unref(description)],
+			$stable: true
+		})]), hasContent(extra.value) && createVNode("div", mergeAttrs({ sx: formSectionStyles.extra }, propsExtra.value), [extra.value])]), collapsible.value ? createVNode(Collapse, mergeProps(mergePartProps({}, propsCollapse.value, { id: ids.body }), {
+			"_open": open.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+		}), _isSlot(body) ? body : { default: () => [body] }) : body]);
+	};
+}, {
+	name: "FormSection",
+	props: [
+		"title",
+		"description",
+		"extra",
+		"headingLevel",
+		"columns",
+		"minColumnWidth",
+		"collapsible",
+		"_open",
+		"onUpdate:_open",
+		"labelPlacement",
+		"labelWidth",
+		"labelAlign",
+		"disabled",
+		"readonly",
+		"propsHeader",
+		"propsHeading",
+		"propsTrigger",
+		"propsChevron",
+		"propsDescription",
+		"propsExtra",
+		"propsBody",
+		"propsCollapse"
+	]
+});
+//#endregion
+export { FormSection, formSectionColumnStyles, formSectionStyles };
+
+//# sourceMappingURL=FormSection.js.map

package/dist/form/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/form/FormSection.tsx"],"sourcesContent":["/**\n * 表单里的一组字段：标题、说明、右侧的操作，下面一条细线，再下面是字段的栅格。长表单按主题分组（基本信息、计划与实施……）。\n *\n *   <FormSection title=\"项目基本信息\" columns={2}>\n *     <Field label=\"项目名称\">…</Field>\n *     <Field label=\"任务类别\">…</Field>\n *     <GridItem span=\"full\"><Field label=\"简要描述\">…</Field></GridItem>\n *   </FormSection>\n *\n * columns 是最多几列：每列不窄于 minColumnWidth，容器窄时自动减少列数，不需要断点；跨列用 GridItem（多列时用 span=\"full\"）。\n * 也是一层字段布局（field-layout）：标签位置、宽度、对齐、只读、不可用写在这里只作用于这一组，没写的沿用 Form 的。\n * collapsible 时标题是展开收起的按钮（aria-expanded），收起的字段不能被 Tab 到。\n * 给了 id 就能当锚点：长表单旁边放一个 TableOfContents（items 用各组的 id 与标题）做分节导航，跳过来时让开粘性顶栏。\n * 语义：role=\"group\" 以标题为名称、说明为描述，标题是 h2–h6（headingLevel），读屏能按标题跳转。\n *\n * 部件：Root（div）、Header（div）、Heading（h2–h6）、Trigger（ButtonBase，collapsible 时）、Chevron（Icon）、\n * Description（Text）、Extra（div）、Body（div，字段的栅格）、Collapse（collapsible 时包住 Body）。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { h, useId, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Text, type TextProps } from '../base/Text';\nimport { space, t } from '../config/theme/tokens';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { provideGridColumns } from '../layout/Grid';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { disclosureStyles } from '../utils/style/transitions';\nimport { layoutVars } from '../utils/style/vars';\nimport { provideFieldLayout, type FieldLayout } from './field-layout';\n\n/** 角色与关联由组件管理；原生的 title 属性让给标题内容 */\nexport type FormSectionManaged = 'role' | 'title' | 'aria-labelledby' | 'aria-describedby';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FormSectionProps extends PartProps<'div', FormSectionManaged>, FieldLayout {\n  /** 标题；不写时没有标题栏，只是一层栅格与字段布局 */\n  title?: VNodeChild;\n  /** 标题下面的说明 */\n  description?: VNodeChild;\n  /** 标题栏结束边的内容：链接、按钮（“查看关联明细”“添加”） */\n  extra?: VNodeChild;\n  /** 标题的级别（h2–h6），默认 3 */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 最多几列，默认 1；容器窄时按 minColumnWidth 自动减少 */\n  columns?: number;\n  /** 每列的最小宽度（CSS 长度），默认 `'26em'`：标签在起始边时放得下标签、控件与横排的三四个选项 */\n  minColumnWidth?: string;\n  /** 可以展开收起：标题变成按钮 */\n  collapsible?: boolean;\n  /** 是否展开（collapsible 时）：父级写 _open={x}，默认展开 */\n  _open?: boolean;\n  /** 标题栏的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标题（h2–h6）的部件属性 */\n  propsHeading?: PartProps<'h3'>;\n  /** 展开收起按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开箭头的部件属性 */\n  propsChevron?: Partial<IconProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 标题栏结束边内容的部件属性 */\n  propsExtra?: PartProps<'div'>;\n  /** 字段栅格的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 展开收起层的部件属性（collapsible 时） */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 字段 */\n  children?: VNodeChild;\n}\n\n/** FormSection 的样式：root、header、headerText、heading、trigger、chevron、description、extra、body、singleColumn */\nexport const formSectionStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_lg',\n    minWidth: 0,\n    // 分节导航（TableOfContents、锚点）跳过来时让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'flex-end',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    paddingBlockEnd: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  headerText: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  heading: {\n    margin: 0,\n    fontSize: '_md',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    color: '_text',\n  },\n  trigger: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    marginInline: `calc(-1 * ${t.space.xs})`,\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    textAlign: 'start',\n    backgroundColor: { default: 'transparent', ':hover': '_fill' },\n  },\n  chevron: { flexShrink: 0, color: '_textMuted' },\n  chevronClosed: { rotate: '-90deg' },\n  description: { fontSize: '_sm', lineHeight: '_normal' },\n  extra: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0 },\n  // 多列时列间距比行间距大：一眼看出哪几项是同一列\n  body: {\n    '--form-section-column-gap': '_space.xl',\n    display: 'grid',\n    columnGap: 'var(--form-section-column-gap)',\n    rowGap: '_md',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    alignItems: 'start',\n  },\n});\n\n/** FormSection 的样式：columns（最多几列、每列不窄于多少） */\nexport const formSectionColumnStyles = css.create({\n  columns: (count: number, minWidth: string) => ({\n    gridTemplateColumns: `repeat(auto-fill, minmax(max(min(${minWidth}, 100%), calc((100% - ${count - 1} * var(--form-section-column-gap)) / ${count})), 1fr))`,\n  }),\n});\n\n/** 表单里的一组字段：标题栏、字段栅格，可折叠；这一组的标签布局、只读、不可用 */\nexport const FormSection = _component(\n  ({\n    title,\n    description,\n    extra,\n    headingLevel = 3,\n    columns = 1,\n    minColumnWidth = '26em',\n    collapsible = false,\n    _open: open = _bindable(true),\n    labelPlacement,\n    labelWidth,\n    labelAlign,\n    disabled,\n    readonly,\n    propsHeader,\n    propsHeading,\n    propsTrigger,\n    propsChevron,\n    propsDescription,\n    propsExtra,\n    propsBody,\n    propsCollapse,\n    children,\n    ...rest\n  }: FormSectionProps) => {\n    const id = useId();\n    const ids = { title: `${id}-title`, description: `${id}-description`, body: `${id}-body` };\n    provideFieldLayout(() => ({ labelPlacement, labelWidth, labelAlign, disabled, readonly }));\n    const bodyRef = provideGridColumns(() =>\n      columns > 1 ? { columns, minItemWidth: minColumnWidth } : { columns: 1 },\n    );\n\n    return () => {\n      const expanded = !collapsible || open;\n      const state = expanded ? 'open' : 'closed';\n      const titleContent = collapsible ? (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>({ sx: formSectionStyles.trigger }, propsTrigger, {\n            id: ids.title,\n            'aria-expanded': open,\n            'aria-controls': ids.body,\n            onClick: () => (open = !open),\n          })}\n          data-state={state}\n        >\n          <span>{title}</span>\n          <Icon\n            {...mergePartProps<IconProps>(\n              {\n                icon: ChevronDown,\n                sx: [\n                  formSectionStyles.chevron,\n                  disclosureStyles.icon,\n                  !open && formSectionStyles.chevronClosed,\n                ],\n              },\n              propsChevron,\n            )}\n          />\n        </ButtonBase>\n      ) : (\n        <span id={ids.title}>{title}</span>\n      );\n      const body = (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                formSectionStyles.body,\n                columns > 1 && formSectionColumnStyles.columns(columns, minColumnWidth),\n              ],\n            },\n            propsBody,\n            { ref: bodyRef, ...(collapsible ? {} : { id: ids.body }) },\n          )}\n        >\n          {children}\n        </div>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: formSectionStyles.root }, rest, {\n            role: hasContent(title) ? 'group' : undefined,\n            'aria-labelledby': hasContent(title) ? ids.title : undefined,\n            'aria-describedby': hasContent(description) ? ids.description : undefined,\n          })}\n          data-state={collapsible ? state : undefined}\n        >\n          {(title != null || extra != null) && (\n            <div {...mergeAttrs<'div'>({ sx: formSectionStyles.header }, propsHeader)}>\n              <div {...css.attrs(formSectionStyles.headerText)}>\n                {hasContent(title) &&\n                  h(\n                    `h${headingLevel}`,\n                    mergeAttrs<'h3'>({ sx: formSectionStyles.heading }, propsHeading),\n                    [titleContent],\n                  )}\n                {hasContent(description) && (\n                  <Text\n                    {...mergePartProps<TextProps>(\n                      { tone: 'muted', sx: formSectionStyles.description },\n                      propsDescription,\n                      { id: ids.description },\n                    )}\n                  >\n                    {description}\n                  </Text>\n                )}\n              </div>\n              {hasContent(extra) && (\n                <div {...mergeAttrs<'div'>({ sx: formSectionStyles.extra }, propsExtra)}>\n                  {extra}\n                </div>\n              )}\n            </div>\n          )}\n          {collapsible ? (\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: ids.body })}\n              _open={open}\n            >\n              {body}\n            </Collapse>\n          ) : (\n            body\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/form/FormValue.d.ts

@@ -0,0 +1,17 @@
+import type { DateValue } from '@internationalized/date';
+import { type NumericValue } from '../utils/data/numeric';
+/** 能交给表单的单个值 */
+export type FormValueItem = string | boolean | NumericValue | Date | DateValue;
+/** FormValue 的属性 */
+export interface FormValueProps {
+    /** 表单字段名；不写时不渲染 */
+    name?: string;
+    /** 值；数组时每个值一个 input */
+    value?: FormValueItem | readonly FormValueItem[] | null;
+    /** 控件不可用：同原生的不可用控件，不随表单提交 */
+    disabled?: boolean;
+}
+/** 值 → 提交的文本：数字是十进制，日期是 ISO */
+export declare function formValueText(value: FormValueItem): string;
+/** 隐藏的表单值（input type="hidden"） */
+export declare const FormValue: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormValueProps>;

package/dist/form/FormValue.js

@@ -0,0 +1,40 @@
+import { isNumeric, numericText } from "../utils/data/numeric.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/form/FormValue.tsx
+/** 能交给表单的单个值 */
+/** FormValue 的属性 */
+/** 值 → 提交的文本：数字是十进制，日期是 ISO */
+function formValueText(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "boolean") return String(value);
+	if (isNumeric(value)) return numericText(value);
+	if (value instanceof Date) return value.toISOString();
+	return value.toString();
+}
+/** 隐藏的表单值（input type="hidden"） */
+var FormValue = /*#__PURE__*/ _component((_props, _ctx) => {
+	const name = readonlyProp(_props, "name");
+	const value = readonlyProp(_props, "value");
+	const disabled = readonlyProp(_props, "disabled", false);
+	return () => {
+		if (name.value == null || value.value == null || disabled.value) return null;
+		return (Array.isArray(value.value) ? value.value : [value.value]).map((item) => formValueText(item)).map((text, index) => createVNode("input", {
+			"key": `${index}:${text}`,
+			"type": "hidden",
+			"name": name.value,
+			"value": text
+		}, null));
+	};
+}, {
+	name: "FormValue",
+	props: [
+		"name",
+		"value",
+		"disabled"
+	]
+});
+//#endregion
+export { FormValue, formValueText };
+
+//# sourceMappingURL=FormValue.js.map

package/dist/form/FormValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormValue.js","names":["_vtp_readonlyProp","_createVNode"],"sources":["../../src/form/FormValue.tsx"],"sourcesContent":["/**\n * 把不是原生输入元素的控件的值交给表单：渲染隐藏的 input（type=\"hidden\"），随表单提交、被 FormData 读到。\n * Slider、Select、Combobox、NumberField、日期组件用它；数组时每个值一个 input（同名，服务端按多值读取）。\n *\n *   <FormValue name=\"tags\" value={['a', 'b']} />   →   <input type=\"hidden\" name=\"tags\" value=\"a\">…\n *   <FormValue name=\"price\" value={new Decimal('19.90')} />   →   value=\"19.9\"\n *\n * 内置的值类型都按规范文本提交（formValueText）：数字（number、bigint、Decimal）是不带分组、不用科学计数法的十进制；\n * 原生 Date 是 ISO 时间（UTC），@internationalized/date 的日期值是它自己的 ISO 文本（2026-10-20、2026-10-20T14:30:00）。\n * 没有 name、值为 null / undefined、或控件不可用（disabled，同原生的不可用控件不随表单提交）时不渲染。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { DateValue } from '@internationalized/date';\nimport { isNumeric, numericText, type NumericValue } from '../utils/data/numeric';\n\n/** 能交给表单的单个值 */\nexport type FormValueItem = string | boolean | NumericValue | Date | DateValue;\n\n/** FormValue 的属性 */\nexport interface FormValueProps {\n  /** 表单字段名；不写时不渲染 */\n  name?: string;\n  /** 值；数组时每个值一个 input */\n  value?: FormValueItem | readonly FormValueItem[] | null;\n  /** 控件不可用：同原生的不可用控件，不随表单提交 */\n  disabled?: boolean;\n}\n\n/** 值 → 提交的文本：数字是十进制，日期是 ISO */\nexport function formValueText(value: FormValueItem): string {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'boolean') return String(value);\n  if (isNumeric(value)) return numericText(value);\n  if (value instanceof Date) return value.toISOString();\n  // DateValue 的 toString 就是 ISO 8601（含时区的 ZonedDateTime 带上偏移与时区名）\n  return value.toString();\n}\n\n/** 隐藏的表单值（input type=\"hidden\"） */\nexport const FormValue = _component(({ name, value, disabled = false }: FormValueProps) => () => {\n  if (name == null || value == null || disabled) return null;\n  const texts = (Array.isArray(value) ? value : [value]).map((item) => formValueText(item));\n  // 同一个值可能出现两次（数组里重复的项）：key 带上下标\n  return texts.map((text, index) => (\n    <input key={`${index}:${text}`} type=\"hidden\" name={name} value={text} />\n  ));\n});\n"],"mappings":";;;;;;;AA6BA,SAAgB,cAAc,OAA8B;CAC1D,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,IAAI,OAAO,UAAU,WAAW,OAAO,OAAO,KAAK;CACnD,IAAI,UAAU,KAAK,GAAG,OAAO,YAAY,KAAK;CAC9C,IAAI,iBAAiB,MAAM,OAAO,MAAM,YAAY;CAEpD,OAAO,MAAM,SAAS;AACxB;;AAGA,IAAa,YAAY,0BAAW,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAA2B,KAAK;CAAA,aAA6B;EAC/F,IAAI,KAAA,SAAQ,QAAQ,MAAA,SAAS,QAAI,SAAA,OAAc,OAAO;EAGtD,QAFe,MAAM,QAAO,MAAA,KAAM,IAAC,MAAA,QAAW,CAAA,MAAA,KAAA,EAAA,CAAS,KAAK,SAAS,cAAc,IAAI,CAEhF,CAAK,CAAC,KAAK,MAAM,UAAKC,YAAA,SAAA;GAAA,OACf,GAAG,MAAK,GAAI;GAAM,QAAA;GAAA,QAAA,KAAA;GAAA,SAAmC;EAAI,GAAA,IAAA,CACtE;CACH;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CAAA"}

package/dist/form/field-layout.d.ts

@@ -0,0 +1,34 @@
+/** 标签放在哪 */
+export interface FieldLabelPlacements {
+    /** 控件上方（默认）：窄容器、移动端、标签很长时 */
+    top: unknown;
+    /** 控件的起始边（从左到右排版时在左侧）：宽屏的长表单，标签一列对齐、省纵向空间 */
+    start: unknown;
+}
+/** 标签在起始边时，标签文字在标签列里的对齐 */
+export interface FieldLabelAligns {
+    /** 靠起始边 */
+    start: unknown;
+    /** 靠结束边、贴着控件（默认）：标签长短不一时，标签与控件之间的距离一致 */
+    end: unknown;
+}
+/** 一组字段共同的设置；没写的项沿用外层 */
+export interface FieldLayout {
+    /** 标签放在哪，默认 top */
+    labelPlacement?: keyof FieldLabelPlacements;
+    /** 标签在起始边时标签列的宽度：数字是 px，也可以写 CSS 长度如 `'8em'`；默认 `'8em'` */
+    labelWidth?: number | string;
+    /** 标签在起始边时文字的对齐，默认 end */
+    labelAlign?: keyof FieldLabelAligns;
+    /** 整组不可用：里面的字段与控件都不可用 */
+    disabled?: boolean;
+    /** 整组只读：里面的字段与控件都只读（查看详情、审批时） */
+    readonly?: boolean;
+}
+/** 字段布局的上下文：Form、FormSection 用 provideFieldLayout 提供，Field、useFieldControl 读取 */
+export declare const FieldLayoutContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<Readonly<FieldLayout>>;
+/**
+ * 在 setup 里调用：把 read() 给出的设置叠在外层的设置上提供下去。
+ * 标签的三项里层优先；不可用与只读只要有一层是 true 就是 true（不可用的表单里没有可用的分组）
+ */
+export declare function provideFieldLayout(read: () => FieldLayout): void;

package/dist/form/field-layout.js

@@ -0,0 +1,39 @@
+import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/form/field-layout.ts
+/**
+* 一组字段共同的布局与状态：标签放在上方还是起始边（左侧）、标签宽度与对齐、整组只读或不可用。
+* Form、FormSection 设置，Field 与控件读取；层层叠加，里层没写的项沿用外层，Field 与控件上显式写的优先。
+*
+*   <Form controller={form} labelPlacement="start" labelWidth="8em">…</Form>
+*   <Form controller={form} readonly>…</Form>   // 整张表单只读（查看详情）
+*/
+/** 字段布局的上下文：Form、FormSection 用 provideFieldLayout 提供，Field、useFieldControl 读取 */
+var FieldLayoutContext = createContext("FieldLayout");
+/**
+* 在 setup 里调用：把 read() 给出的设置叠在外层的设置上提供下去。
+* 标签的三项里层优先；不可用与只读只要有一层是 true 就是 true（不可用的表单里没有可用的分组）
+*/
+function provideFieldLayout(read) {
+	const outer = FieldLayoutContext.inject(null);
+	FieldLayoutContext.provide({
+		get labelPlacement() {
+			return read().labelPlacement ?? outer?.labelPlacement;
+		},
+		get labelWidth() {
+			return read().labelWidth ?? outer?.labelWidth;
+		},
+		get labelAlign() {
+			return read().labelAlign ?? outer?.labelAlign;
+		},
+		get disabled() {
+			return Boolean(read().disabled || outer?.disabled);
+		},
+		get readonly() {
+			return Boolean(read().readonly || outer?.readonly);
+		}
+	});
+}
+//#endregion
+export { FieldLayoutContext, provideFieldLayout };
+
+//# sourceMappingURL=field-layout.js.map

package/dist/form/field-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-layout.js","names":[],"sources":["../../src/form/field-layout.ts"],"sourcesContent":["/**\n * 一组字段共同的布局与状态：标签放在上方还是起始边（左侧）、标签宽度与对齐、整组只读或不可用。\n * Form、FormSection 设置，Field 与控件读取；层层叠加，里层没写的项沿用外层，Field 与控件上显式写的优先。\n *\n *   <Form controller={form} labelPlacement=\"start\" labelWidth=\"8em\">…</Form>\n *   <Form controller={form} readonly>…</Form>   // 整张表单只读（查看详情）\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\n\n/** 标签放在哪 */\nexport interface FieldLabelPlacements {\n  /** 控件上方（默认）：窄容器、移动端、标签很长时 */\n  top: unknown;\n  /** 控件的起始边（从左到右排版时在左侧）：宽屏的长表单，标签一列对齐、省纵向空间 */\n  start: unknown;\n}\n\n/** 标签在起始边时，标签文字在标签列里的对齐 */\nexport interface FieldLabelAligns {\n  /** 靠起始边 */\n  start: unknown;\n  /** 靠结束边、贴着控件（默认）：标签长短不一时，标签与控件之间的距离一致 */\n  end: unknown;\n}\n\n/** 一组字段共同的设置；没写的项沿用外层 */\nexport interface FieldLayout {\n  /** 标签放在哪，默认 top */\n  labelPlacement?: keyof FieldLabelPlacements;\n  /** 标签在起始边时标签列的宽度：数字是 px，也可以写 CSS 长度如 `'8em'`；默认 `'8em'` */\n  labelWidth?: number | string;\n  /** 标签在起始边时文字的对齐，默认 end */\n  labelAlign?: keyof FieldLabelAligns;\n  /** 整组不可用：里面的字段与控件都不可用 */\n  disabled?: boolean;\n  /** 整组只读：里面的字段与控件都只读（查看详情、审批时） */\n  readonly?: boolean;\n}\n\n/** 字段布局的上下文：Form、FormSection 用 provideFieldLayout 提供，Field、useFieldControl 读取 */\nexport const FieldLayoutContext = createContext<Readonly<FieldLayout>>('FieldLayout');\n\n/**\n * 在 setup 里调用：把 read() 给出的设置叠在外层的设置上提供下去。\n * 标签的三项里层优先；不可用与只读只要有一层是 true 就是 true（不可用的表单里没有可用的分组）\n */\nexport function provideFieldLayout(read: () => FieldLayout): void {\n  const outer = FieldLayoutContext.inject(null);\n  FieldLayoutContext.provide({\n    get labelPlacement() {\n      return read().labelPlacement ?? outer?.labelPlacement;\n    },\n    get labelWidth() {\n      return read().labelWidth ?? outer?.labelWidth;\n    },\n    get labelAlign() {\n      return read().labelAlign ?? outer?.labelAlign;\n    },\n    get disabled() {\n      return Boolean(read().disabled || outer?.disabled);\n    },\n    get readonly() {\n      return Boolean(read().readonly || outer?.readonly);\n    },\n  });\n}\n"],"mappings":";;;;;;;;;;AAwCA,IAAa,qBAAqB,cAAqC,aAAa;;;;;AAMpF,SAAgB,mBAAmB,MAA+B;CAChE,MAAM,QAAQ,mBAAmB,OAAO,IAAI;CAC5C,mBAAmB,QAAQ;EACzB,IAAI,iBAAiB;GACnB,OAAO,KAAK,CAAC,CAAC,kBAAkB,OAAO;EACzC;EACA,IAAI,aAAa;GACf,OAAO,KAAK,CAAC,CAAC,cAAc,OAAO;EACrC;EACA,IAAI,aAAa;GACf,OAAO,KAAK,CAAC,CAAC,cAAc,OAAO;EACrC;EACA,IAAI,WAAW;GACb,OAAO,QAAQ,KAAK,CAAC,CAAC,YAAY,OAAO,QAAQ;EACnD;EACA,IAAI,WAAW;GACb,OAAO,QAAQ,KAAK,CAAC,CAAC,YAAY,OAAO,QAAQ;EACnD;CACF,CAAC;AACH"}