@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/form/Form.d.ts

@@ -0,0 +1,50 @@
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type FormLabelPositions, type FormValidateTriggers } from './context';
+/** 一个出错的项 */
+export interface FormError {
+    /** 字段名 */
+    name: string | undefined;
+    /** 消息 */
+    message: string;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface FormProps extends Omit<PartProps<'div'>, 'onSubmit'> {
+    /** 全部项禁用 */
+    disabled?: boolean;
+    /** 全部项只读 */
+    readonly?: boolean;
+    /** 标题的宽度（CSS 长度） */
+    labelWidth?: string;
+    /**
+     * 标题的位置
+     * @default 'left'
+     */
+    labelPosition?: keyof FormLabelPositions;
+    /**
+     * 输入框里文字的对齐
+     * @default 'left'
+     */
+    inputAlign?: 'left' | 'right';
+    /**
+     * 规则没写 trigger 时什么时候校验
+     * @default 'blur'
+     */
+    validateTrigger?: keyof FormValidateTriggers;
+    /**
+     * 校验不通过时滚到第一个出错的项
+     * @default true
+     */
+    scrollToError?: boolean;
+    /** 校验通过：各项的值，以字段名为键 */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /** 校验不通过 */
+    onFailed?: (details: {
+        values: Record<string, unknown>;
+        errors: FormError[];
+    }) => void;
+    /** 表单项与提交按钮 */
+    children?: VNodeChild;
+}
+/** 表单（div） */
+export declare const Form: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormProps>;

package/dist/form/Form.js

@@ -0,0 +1,96 @@
+import { mergeAttrs } from "../utils/props.js";
+import { FormContext } from "./context.js";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/form/Form.tsx
+/** 一个出错的项 */
+/** 未声明的属性落到根元素（div）上 */
+/** 节点是不是提交按钮（H5 的元素与小程序的节点都有 getAttribute） */
+var isSubmit = (node) => {
+	const element = node;
+	return element?.getAttribute?.("type") === "submit" && element.getAttribute("aria-busy") !== "true";
+};
+/** 表单（div） */
+var Form = /*#__PURE__*/ _component((_props, _ctx) => {
+	const disabled = readonlyProp(_props, "disabled", false);
+	const readonly = readonlyProp(_props, "readonly", false);
+	const labelWidth = readonlyProp(_props, "labelWidth");
+	const labelPosition = readonlyProp(_props, "labelPosition", "left");
+	const inputAlign = readonlyProp(_props, "inputAlign", "left");
+	const validateTrigger = readonlyProp(_props, "validateTrigger", "blur");
+	const scrollToError = readonlyProp(_props, "scrollToError", true);
+	const onSubmit = readonlyProp(_props, "onSubmit");
+	const onFailed = readonlyProp(_props, "onFailed");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const items = [];
+	const values = () => {
+		const result = {};
+		for (const item of items) if (item.name !== void 0) result[item.name] = item.value;
+		return result;
+	};
+	const submit = async () => {
+		const errors = [];
+		let first;
+		(await Promise.all(items.map((item) => item.validate("submit")))).forEach((message, index) => {
+			if (message === void 0) return;
+			first ??= items[index];
+			errors.push({
+				name: items[index].name,
+				message
+			});
+		});
+		if (!errors.length) return onSubmit.value?.(values());
+		if (scrollToError.value) first?.scrollIntoView();
+		onFailed.value?.({
+			values: values(),
+			errors
+		});
+	};
+	FormContext.provide({
+		get disabled() {
+			return disabled.value;
+		},
+		get readonly() {
+			return readonly.value;
+		},
+		get labelWidth() {
+			return labelWidth.value;
+		},
+		get labelPosition() {
+			return labelPosition.value;
+		},
+		get inputAlign() {
+			return inputAlign.value;
+		},
+		get validateTrigger() {
+			return validateTrigger.value;
+		},
+		register(item) {
+			items.push(item);
+			return () => items.splice(items.indexOf(item), 1);
+		},
+		submit: () => void submit()
+	});
+	const onClick = (event) => {
+		for (let node = event.target; node && node !== event.currentTarget; node = node.parentNode ?? node.parent) if (isSubmit(node)) return void submit();
+	};
+	return () => createVNode("div", mergeAttrs({}, rest, { onClick }), [children.value]);
+}, {
+	name: "Form",
+	props: [
+		"disabled",
+		"readonly",
+		"labelWidth",
+		"labelPosition",
+		"inputAlign",
+		"validateTrigger",
+		"scrollToError",
+		"onSubmit",
+		"onFailed"
+	]
+});
+//#endregion
+export { Form };
+
+//# 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","_createVNode"],"sources":["../../src/form/Form.tsx"],"sourcesContent":["/**\n * 表单：收集里面各项（Field、FormItem）的值，点 `type=\"submit\"` 的按钮（或在输入框里按键盘的确认键）时\n * 按顺序校验，都通过时 onSubmit 收到 { 字段名: 值 }，否则滚到第一个出错的项、onFailed 收到错误列表。\n *\n *   <Form onSubmit={(values) => save(values)}>\n *     <CellGroup inset>\n *       <Field name=\"phone\" label=\"手机号\" _value={phone} type=\"tel\" rules={[{ required: true }, { pattern: /^1\\d{10}$/, message: '手机号格式不对' }]} />\n *       <Field name=\"code\" label=\"验证码\" _value={code} rules={[{ required: true }]} />\n *     </CellGroup>\n *     <Button type=\"submit\" fullWidth>登录</Button>\n *   </Form>\n *\n * 不渲染原生 form（小程序里没有）：提交按钮由这里认出来，H5 与小程序一样。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  FormContext,\n  type FormItemHandle,\n  type FormLabelPositions,\n  type FormValidateTriggers,\n} from './context';\n\n/** 一个出错的项 */\nexport interface FormError {\n  /** 字段名 */\n  name: string | undefined;\n  /** 消息 */\n  message: string;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface FormProps extends Omit<PartProps<'div'>, 'onSubmit'> {\n  /** 全部项禁用 */\n  disabled?: boolean;\n  /** 全部项只读 */\n  readonly?: boolean;\n  /** 标题的宽度（CSS 长度） */\n  labelWidth?: string;\n  /**\n   * 标题的位置\n   * @default 'left'\n   */\n  labelPosition?: keyof FormLabelPositions;\n  /**\n   * 输入框里文字的对齐\n   * @default 'left'\n   */\n  inputAlign?: 'left' | 'right';\n  /**\n   * 规则没写 trigger 时什么时候校验\n   * @default 'blur'\n   */\n  validateTrigger?: keyof FormValidateTriggers;\n  /**\n   * 校验不通过时滚到第一个出错的项\n   * @default true\n   */\n  scrollToError?: boolean;\n  /** 校验通过：各项的值，以字段名为键 */\n  onSubmit?: (values: Record<string, unknown>) => void;\n  /** 校验不通过 */\n  onFailed?: (details: { values: Record<string, unknown>; errors: FormError[] }) => void;\n  /** 表单项与提交按钮 */\n  children?: VNodeChild;\n}\n\n/** 节点是不是提交按钮（H5 的元素与小程序的节点都有 getAttribute） */\nconst isSubmit = (node: unknown) => {\n  const element = node as { getAttribute?: (name: string) => string | null } | null;\n  return (\n    element?.getAttribute?.('type') === 'submit' && element.getAttribute('aria-busy') !== 'true'\n  );\n};\n\n/** 表单（div） */\nexport const Form = _component(\n  ({\n    disabled = false,\n    readonly = false,\n    labelWidth,\n    labelPosition = 'left',\n    inputAlign = 'left',\n    validateTrigger = 'blur',\n    scrollToError = true,\n    onSubmit,\n    onFailed,\n    children,\n    ...rest\n  }: FormProps) => {\n    const items: FormItemHandle[] = [];\n    const values = () => {\n      const result: Record<string, unknown> = {};\n      for (const item of items) if (item.name !== undefined) result[item.name] = item.value;\n      return result;\n    };\n    const submit = async () => {\n      const errors: FormError[] = [];\n      let first: FormItemHandle | undefined;\n      // 按登记的顺序（即页面上的顺序）一起校验\n      const messages = await Promise.all(items.map((item) => item.validate('submit')));\n      messages.forEach((message, index) => {\n        if (message === undefined) return;\n        first ??= items[index];\n        errors.push({ name: items[index]!.name, message });\n      });\n      if (!errors.length) return onSubmit?.(values());\n      if (scrollToError) void first?.scrollIntoView();\n      onFailed?.({ values: values(), errors });\n    };\n    FormContext.provide({\n      get disabled() {\n        return disabled;\n      },\n      get readonly() {\n        return readonly;\n      },\n      get labelWidth() {\n        return labelWidth;\n      },\n      get labelPosition() {\n        return labelPosition;\n      },\n      get inputAlign() {\n        return inputAlign;\n      },\n      get validateTrigger() {\n        return validateTrigger;\n      },\n      register(item) {\n        items.push(item);\n        return () => items.splice(items.indexOf(item), 1);\n      },\n      submit: () => void submit(),\n    });\n    // 点了提交按钮：从点到的元素往上找，到表单为止\n    const onClick = (event: Event) => {\n      for (\n        let node = event.target as { parentNode?: unknown; parent?: unknown } | null;\n        node && node !== event.currentTarget;\n        node = (node.parentNode ?? node.parent) as typeof node\n      )\n        if (isSubmit(node)) return void submit();\n    };\n    return () => <div {...mergeAttrs<'div'>({}, rest, { onClick })}>{children}</div>;\n  },\n);\n"],"mappings":";;;;;;;;AAqEA,IAAM,YAAY,SAAkB;CAClC,MAAM,UAAU;CAChB,OACE,SAAS,eAAe,MAAM,MAAM,YAAY,QAAQ,aAAa,WAAW,MAAM;AAE1F;;AAGA,IAAa,OAAO,0BAClB,QAAA,SAYiB;CAAA,MAAA,WAAAA,aAAA,QAAA,YAXJ,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAEA,MAAM;CAAA,MAAA,aAAAA,aAAA,QAAA,cACT,MAAM;CAAA,MAAA,kBAAAA,aAAA,QAAA,mBACD,MAAM;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBACR,IAAI;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIjB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,QAA0B,CAAA;CAChC,MAAM,eAAe;EACnB,MAAM,SAAkC,CAAC;EACzC,KAAK,MAAM,QAAQ,OAAO,IAAI,KAAK,SAAS,KAAA,GAAW,OAAO,KAAK,QAAQ,KAAK;EAChF,OAAO;CACT;CACA,MAAM,SAAS,YAAY;EACzB,MAAM,SAAsB,CAAA;EAC5B,IAAI;EAGJ,CAAA,MADuB,QAAQ,IAAI,MAAM,KAAK,SAAS,KAAK,SAAS,QAAQ,CAAC,CAAC,EAAA,CACtE,SAAS,SAAS,UAAU;GACnC,IAAI,YAAY,KAAA,GAAW;GAC3B,UAAU,MAAM;GAChB,OAAO,KAAK;IAAE,MAAM,MAAM,MAAM,CAAE;IAAM;GAAQ,CAAC;EACnD,CAAC;EACD,IAAI,CAAC,OAAO,QAAQ,OAAO,SAAA,QAAW,OAAO,CAAC;EAC9C,IAAA,cAAA,OAAmB,OAAY,eAAe;EAC9C,SAAA,QAAW;GAAE,QAAQ,OAAO;GAAG;EAAO,CAAC;CACzC;CACA,YAAY,QAAQ;EAClB,IAAI,WAAW;GACb,OAAA,SAAA;EACF;EACA,IAAI,WAAW;GACb,OAAA,SAAA;EACF;EACA,IAAI,aAAa;GACf,OAAA,WAAA;EACF;EACA,IAAI,gBAAgB;GAClB,OAAA,cAAA;EACF;EACA,IAAI,aAAa;GACf,OAAA,WAAA;EACF;EACA,IAAI,kBAAkB;GACpB,OAAA,gBAAA;EACF;EACA,SAAS,MAAM;GACb,MAAM,KAAK,IAAI;GACf,aAAa,MAAM,OAAO,MAAM,QAAQ,IAAI,GAAG,CAAC;EAClD;EACA,cAAc,KAAK,OAAO;CAC5B,CAAC;CAED,MAAM,WAAW,UAAiB;EAChC,KACE,IAAI,OAAO,MAAM,QACjB,QAAQ,SAAS,MAAM,eACvB,OAAQ,KAAK,cAAc,KAAK,QAEhC,IAAI,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO;CAC3C;CACA,aAAOC,YAAA,OAAe,WAAkB,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;AAChE,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/FormItem.d.ts

@@ -0,0 +1,57 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type FormLabelPositions, type FormRule } from './context';
+/** 表单项的布局（Field 共用） */
+export interface FormItemLayout {
+    /** 标题 */
+    label?: VNodeChild;
+    /** 标题前加红色星号；有必填规则时自动加 */
+    required?: boolean;
+    /** 控件下面的说明（没有错误时显示） */
+    help?: VNodeChild;
+    /** 错误消息：给了就显示（优先于校验的结果） */
+    error?: string;
+    /** 标题的位置；不给时随 Form */
+    labelPosition?: keyof FormLabelPositions;
+    /** 标题的宽度（CSS 长度）；不给时随 Form，默认 6.2em */
+    labelWidth?: string;
+    /** 标题与控件垂直居中（默认顶端对齐，说明多行时标题仍在第一行） */
+    center?: boolean;
+    /** 标题的部件属性 */
+    propsLabel?: PartProps<'div'>;
+    /** 控件与消息那一栏的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 错误消息（或说明）的部件属性 */
+    propsMessage?: PartProps<'div'>;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface FormItemProps extends FormItemLayout, PartProps<'div', 'title'> {
+    /** 字段名：在 Form 里时提交的值以它为键 */
+    name?: string;
+    /** 校验规则 */
+    rules?: FormRule[];
+    /** 当前的值：校验与提交时读它（控件自己的绑定照常写在控件上） */
+    value?: unknown;
+    /** 控件 */
+    children?: VNodeChild;
+}
+/** FormItem 的样式：root、top、center、label、required、body、control、help、error */
+export declare const formItemStyles: Readonly<{
+    body: css.CompiledStyles;
+    center: css.CompiledStyles;
+    control: css.CompiledStyles;
+    error: css.CompiledStyles;
+    help: css.CompiledStyles;
+    label: css.CompiledStyles;
+    required: css.CompiledStyles;
+    root: css.CompiledStyles;
+    top: css.CompiledStyles;
+}>;
+/** 表单项的外层：标题 + 控件 + 消息；Field 也用它画 */
+export declare function renderFormItem(layout: FormItemLayout & {
+    disabled?: boolean;
+    required: boolean;
+}, attrs: Record<string, unknown> | undefined, control: VNodeChild, ref?: (element: unknown) => void): import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").JSX.Element;
+/** 表单项（div > 标题 + 控件 + 消息） */
+export declare const FormItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FormItemProps>;

package/dist/form/FormItem.js

@@ -0,0 +1,142 @@
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { dividerImage, dividerLayout } from "../theme/divider.js";
+import { useForm, useFormItem } from "./context.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createTextVNode, createVNode } from "vue";
+//#region src/form/FormItem.tsx
+/** 表单项的布局（Field 共用） */
+/** 未声明的属性落到根元素（div）上 */
+/** FormItem 的样式：root、top、center、label、required、body、control、help、error */
+var formItemStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_md",
+		width: "100%",
+		minHeight: "_control",
+		paddingBlock: "0.7em",
+		paddingInline: "_lg",
+		fontSize: "_md",
+		lineHeight: "1.5",
+		color: "_text",
+		backgroundColor: "_surface",
+		backgroundImage: {
+			default: dividerImage,
+			":last-child": "none"
+		},
+		...dividerLayout
+	},
+	top: {
+		flexDirection: "column",
+		alignItems: "stretch",
+		gap: "0.4em"
+	},
+	center: { alignItems: "center" },
+	label: {
+		flex: "none",
+		overflowWrap: "anywhere",
+		color: {
+			default: "_text",
+			"[data-disabled]": "_textDisabled"
+		}
+	},
+	required: {
+		color: "_dangerText",
+		marginInlineEnd: "0.15em"
+	},
+	body: {
+		flex: "1 1 auto",
+		minWidth: 0
+	},
+	control: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minHeight: "1.5em"
+	},
+	help: {
+		marginBlockStart: "0.25em",
+		fontSize: "_xs",
+		color: "_textMuted"
+	},
+	error: { color: "_dangerText" }
+});
+/** 表单项的外层：标题 + 控件 + 消息；Field 也用它画 */
+function renderFormItem(layout, attrs, control, ref) {
+	const top = layout.labelPosition === "top";
+	const message = layout.error ?? layout.help;
+	return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
+		formItemStyles.root,
+		top && formItemStyles.top,
+		layout.center && !top && formItemStyles.center
+	] }, attrs, dataAttrs({
+		"data-error": layout.error !== void 0,
+		"data-disabled": layout.disabled
+	})), { "ref": ref }), [hasContent(layout.label) && createVNode("div", mergeAttrs({
+		sx: formItemStyles.label,
+		style: top ? void 0 : { width: layout.labelWidth ?? "6.2em" }
+	}, layout.propsLabel, dataAttrs({ "data-disabled": layout.disabled })), [layout.required && createVNode("span", mergeJsxProps(mergeAttrs({ sx: formItemStyles.required }), { "aria-hidden": "true" }), [createTextVNode("*")]), layout.label]), createVNode("div", mergeAttrs({ sx: formItemStyles.body }, layout.propsBody), [createVNode("div", mergeAttrs({ sx: formItemStyles.control }), [control]), hasContent(message) && createVNode("div", mergeAttrs({ sx: [formItemStyles.help, layout.error !== void 0 && formItemStyles.error] }, layout.propsMessage, { role: layout.error !== void 0 ? "alert" : void 0 }), [message])])]);
+}
+/** 表单项（div > 标题 + 控件 + 消息） */
+var FormItem = /*#__PURE__*/ _component((_props, _ctx) => {
+	const name = readonlyProp(_props, "name");
+	const rules = readonlyProp(_props, "rules");
+	const value = readonlyProp(_props, "value");
+	const label = readonlyProp(_props, "label");
+	const required = readonlyProp(_props, "required");
+	const help = readonlyProp(_props, "help");
+	const error = readonlyProp(_props, "error");
+	const labelPosition = readonlyProp(_props, "labelPosition");
+	const labelWidth = readonlyProp(_props, "labelWidth");
+	const center = readonlyProp(_props, "center", false);
+	const children = childrenProp(_props);
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsMessage = readonlyProp(_props, "propsMessage");
+	const rest = restProps(_props, _ctx, false);
+	const form = useForm();
+	let element = null;
+	const item = useFormItem({
+		name: () => name.value,
+		rules: () => rules.value,
+		value: () => value.value,
+		label: () => label.value,
+		element: () => element
+	});
+	return () => renderFormItem({
+		label: label.value,
+		required: required.value ?? item.required,
+		help: help.value,
+		error: error.value ?? item.error,
+		labelPosition: labelPosition.value ?? form?.labelPosition,
+		labelWidth: labelWidth.value ?? form?.labelWidth,
+		center: center.value,
+		disabled: form?.disabled,
+		propsLabel: propsLabel.value,
+		propsBody: propsBody.value,
+		propsMessage: propsMessage.value
+	}, rest, children.value, (node) => element = node);
+}, {
+	name: "FormItem",
+	props: [
+		"name",
+		"rules",
+		"value",
+		"label",
+		"required",
+		"help",
+		"error",
+		"labelPosition",
+		"labelWidth",
+		"center",
+		"propsLabel",
+		"propsBody",
+		"propsMessage"
+	]
+});
+//#endregion
+export { FormItem, formItemStyles, renderFormItem };
+
+//# sourceMappingURL=FormItem.js.map

package/dist/form/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","names":["_createVNode","_mergeProps","_createTextVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps"],"sources":["../../src/form/FormItem.tsx"],"sourcesContent":["/**\n * 表单项：左边（或上面）标题，右边任意控件，下面是说明或错误消息。输入框用 Field；开关、单选、步进器这类控件放进 FormItem。\n *\n *   <FormItem label=\"消息通知\" name=\"notify\" value={notify}>\n *     <Switch _checked={notify} />\n *   </FormItem>\n *   <FormItem label=\"配送方式\" name=\"delivery\" value={delivery} rules={[{ required: true, message: '请选择配送方式' }]}>\n *     <RadioGroup _value={delivery} direction=\"horizontal\">…</RadioGroup>\n *   </FormItem>\n *\n * 有 name 时登记到 Form：提交时值以 name 为键，按 rules 校验；单独用时 error 由使用方给。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { dividerImage, dividerLayout } from '../theme/divider';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { useForm, useFormItem, type FormLabelPositions, type FormRule } from './context';\n\n/** 表单项的布局（Field 共用） */\nexport interface FormItemLayout {\n  /** 标题 */\n  label?: VNodeChild;\n  /** 标题前加红色星号；有必填规则时自动加 */\n  required?: boolean;\n  /** 控件下面的说明（没有错误时显示） */\n  help?: VNodeChild;\n  /** 错误消息：给了就显示（优先于校验的结果） */\n  error?: string;\n  /** 标题的位置；不给时随 Form */\n  labelPosition?: keyof FormLabelPositions;\n  /** 标题的宽度（CSS 长度）；不给时随 Form，默认 6.2em */\n  labelWidth?: string;\n  /** 标题与控件垂直居中（默认顶端对齐，说明多行时标题仍在第一行） */\n  center?: boolean;\n  /** 标题的部件属性 */\n  propsLabel?: PartProps<'div'>;\n  /** 控件与消息那一栏的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 错误消息（或说明）的部件属性 */\n  propsMessage?: PartProps<'div'>;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface FormItemProps extends FormItemLayout, PartProps<'div', 'title'> {\n  /** 字段名：在 Form 里时提交的值以它为键 */\n  name?: string;\n  /** 校验规则 */\n  rules?: FormRule[];\n  /** 当前的值：校验与提交时读它（控件自己的绑定照常写在控件上） */\n  value?: unknown;\n  /** 控件 */\n  children?: VNodeChild;\n}\n\n/** FormItem 的样式：root、top、center、label、required、body、control、help、error */\nexport const formItemStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '_md',\n    width: '100%',\n    minHeight: '_control',\n    paddingBlock: '0.7em',\n    paddingInline: '_lg',\n    fontSize: '_md',\n    lineHeight: '1.5',\n    color: '_text',\n    backgroundColor: '_surface',\n    // 细线同 Cell：从左边内边距处画到右边，最后一项不画\n    backgroundImage: {\n      default: dividerImage,\n      ':last-child': 'none',\n    },\n    ...dividerLayout,\n  },\n  top: { flexDirection: 'column', alignItems: 'stretch', gap: '0.4em' },\n  center: { alignItems: 'center' },\n  label: {\n    flex: 'none',\n    overflowWrap: 'anywhere',\n    color: { default: '_text', '[data-disabled]': '_textDisabled' },\n  },\n  required: { color: '_dangerText', marginInlineEnd: '0.15em' },\n  body: { flex: '1 1 auto', minWidth: 0 },\n  control: { display: 'flex', alignItems: 'center', gap: '_sm', minHeight: '1.5em' },\n  help: { marginBlockStart: '0.25em', fontSize: '_xs', color: '_textMuted' },\n  error: { color: '_dangerText' },\n});\n\n/** 表单项的外层：标题 + 控件 + 消息；Field 也用它画 */\nexport function renderFormItem(\n  layout: FormItemLayout & { disabled?: boolean; required: boolean },\n  attrs: Record<string, unknown> | undefined,\n  control: VNodeChild,\n  ref?: (element: unknown) => void,\n) {\n  const top = layout.labelPosition === 'top';\n  const message = layout.error ?? layout.help;\n  return (\n    <div\n      {...mergeAttrs<'div'>(\n        {\n          sx: [\n            formItemStyles.root,\n            top && formItemStyles.top,\n            layout.center && !top && formItemStyles.center,\n          ],\n        },\n        attrs,\n        dataAttrs({ 'data-error': layout.error !== undefined, 'data-disabled': layout.disabled }),\n      )}\n      ref={ref}\n    >\n      {hasContent(layout.label) && (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: formItemStyles.label,\n              style: top ? undefined : { width: layout.labelWidth ?? '6.2em' },\n            },\n            layout.propsLabel,\n            dataAttrs({ 'data-disabled': layout.disabled }),\n          )}\n        >\n          {layout.required && (\n            <span {...mergeAttrs<'span'>({ sx: formItemStyles.required })} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n          {layout.label}\n        </div>\n      )}\n      <div {...mergeAttrs<'div'>({ sx: formItemStyles.body }, layout.propsBody)}>\n        <div {...mergeAttrs<'div'>({ sx: formItemStyles.control })}>{control}</div>\n        {hasContent(message) && (\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [formItemStyles.help, layout.error !== undefined && formItemStyles.error] },\n              layout.propsMessage,\n              { role: layout.error !== undefined ? 'alert' : undefined },\n            )}\n          >\n            {message}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** 表单项（div > 标题 + 控件 + 消息） */\nexport const FormItem = _component(\n  ({\n    name,\n    rules,\n    value,\n    label,\n    required,\n    help,\n    error,\n    labelPosition,\n    labelWidth,\n    center = false,\n    children,\n    propsLabel,\n    propsBody,\n    propsMessage,\n    ...rest\n  }: FormItemProps) => {\n    const form = useForm();\n    let element: unknown = null;\n    const item = useFormItem({\n      name: () => name,\n      rules: () => rules,\n      value: () => value,\n      label: () => label,\n      element: () => element,\n    });\n    return () =>\n      renderFormItem(\n        {\n          label,\n          required: required ?? item.required,\n          help,\n          error: error ?? item.error,\n          labelPosition: labelPosition ?? form?.labelPosition,\n          labelWidth: labelWidth ?? form?.labelWidth,\n          center,\n          disabled: form?.disabled,\n          propsLabel,\n          propsBody,\n          propsMessage,\n        },\n        rest,\n        children,\n        (node) => (element = node),\n      );\n  },\n);\n"],"mappings":"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"}

package/dist/form/Radio.d.ts

@@ -0,0 +1,41 @@
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { ChoiceManaged, ChoiceValue } from './Checkbox';
+import { type ChoiceDirections, type ChoiceShapes } from './choice';
+/** 未声明的属性落到按钮上 */
+export interface RadioProps extends PartProps<'button', ChoiceManaged> {
+    /** 这一项的值 */
+    name: ChoiceValue;
+    /** 形状；不给时随组，默认圆 */
+    shape?: keyof ChoiceShapes;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 文字 */
+    children?: VNodeChild;
+    /** 框的部件属性 */
+    propsBox?: PartProps<'span'>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+}
+/** 单选框（button[role=radio] > 框 + 文字）；放在 RadioGroup 里 */
+export declare const Radio: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RadioProps>;
+/** 未声明的属性落到组的 div 上 */
+export interface RadioGroupProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {
+    /** 选中的值；双向绑定写 `_value={x}` */
+    _value?: ChoiceValue;
+    /**
+     * 排列
+     * @default 'vertical'
+     */
+    direction?: keyof ChoiceDirections;
+    /** 全部禁用 */
+    disabled?: boolean;
+    /** 各项的形状 */
+    shape?: keyof ChoiceShapes;
+    /** 选了另一项 */
+    onChange?: (value: ChoiceValue) => void;
+    /** 各个 Radio */
+    children?: VNodeChild;
+}
+/** 单选组（div[role=radiogroup]） */
+export declare const RadioGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RadioGroupProps>;

package/dist/form/Radio.js

@@ -0,0 +1,85 @@
+import { mergeAttrs } from "../utils/props.js";
+import { useForm } from "./context.js";
+import { choiceStyles, renderChoice } from "./choice.js";
+import { _component, bindable, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/form/Radio.tsx
+/** 单选组提供给各项的 */
+var RadioGroupContext = createContext("RadioGroup");
+/** 未声明的属性落到按钮上 */
+/** 单选框（button[role=radio] > 框 + 文字）；放在 RadioGroup 里 */
+var Radio = /*#__PURE__*/ _component((_props, _ctx) => {
+	const name = readonlyProp(_props, "name");
+	const shape = readonlyProp(_props, "shape");
+	const disabled = readonlyProp(_props, "disabled");
+	const children = childrenProp(_props);
+	const propsBox = readonlyProp(_props, "propsBox");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const rest = restProps(_props, _ctx, false);
+	const form = useForm();
+	const group = RadioGroupContext.inject();
+	return () => {
+		const off = disabled.value ?? (group.disabled || form?.disabled || false);
+		return renderChoice({
+			role: "radio",
+			checked: group.value === name.value,
+			disabled: off,
+			shape: shape.value ?? group.shape ?? "round",
+			onToggle: () => !form?.readonly && group.select(name.value)
+		}, rest, children.value, {
+			propsBox: propsBox.value,
+			propsLabel: propsLabel.value
+		});
+	};
+}, {
+	name: "Radio",
+	props: [
+		"name",
+		"shape",
+		"disabled",
+		"propsBox",
+		"propsLabel"
+	]
+});
+/** 未声明的属性落到组的 div 上 */
+/** 单选组（div[role=radiogroup]） */
+var RadioGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const value = bindable(_props2, "_value", () => void 0, _ctx2.emit);
+	const direction = readonlyProp(_props2, "direction", "vertical");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const shape = readonlyProp(_props2, "shape");
+	const onChange = readonlyProp(_props2, "onChange");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	RadioGroupContext.provide({
+		get value() {
+			return value.value;
+		},
+		get disabled() {
+			return disabled.value;
+		},
+		get shape() {
+			return shape.value;
+		},
+		select(name) {
+			if (name === value.value) return;
+			value.value = name;
+			onChange.value?.(name);
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: [choiceStyles.group, direction.value === "horizontal" && choiceStyles.horizontal] }, rest, { role: "radiogroup" }), [children.value]);
+}, {
+	name: "RadioGroup",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"direction",
+		"disabled",
+		"shape",
+		"onChange"
+	]
+});
+//#endregion
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=Radio.js.map

package/dist/form/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vtp_bindable","_createVNode"],"sources":["../../src/form/Radio.tsx"],"sourcesContent":["/**\n * 单选框与单选组：从几个互斥的选项里选一个（配送方式、支付方式）。\n *\n *   <RadioGroup _value={delivery} direction=\"horizontal\">\n *     <Radio name=\"express\">快递</Radio>\n *     <Radio name=\"pickup\">到店自提</Radio>\n *   </RadioGroup>\n *\n * 外观同复选框（圆框里打勾）；name 是选项的值。\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { ChoiceManaged, ChoiceValue } from './Checkbox';\nimport { choiceStyles, renderChoice, type ChoiceDirections, type ChoiceShapes } from './choice';\nimport { useForm } from './context';\n\n/** 单选组提供给各项的 */\ninterface RadioGroupState {\n  readonly value: ChoiceValue | undefined;\n  readonly disabled: boolean;\n  readonly shape: keyof ChoiceShapes | undefined;\n  select(name: ChoiceValue): void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupState>('RadioGroup');\n\n/** 未声明的属性落到按钮上 */\nexport interface RadioProps extends PartProps<'button', ChoiceManaged> {\n  /** 这一项的值 */\n  name: ChoiceValue;\n  /** 形状；不给时随组，默认圆 */\n  shape?: keyof ChoiceShapes;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 文字 */\n  children?: VNodeChild;\n  /** 框的部件属性 */\n  propsBox?: PartProps<'span'>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n}\n\n/** 单选框（button[role=radio] > 框 + 文字）；放在 RadioGroup 里 */\nexport const Radio = _component(\n  ({ name, shape, disabled, children, propsBox, propsLabel, ...rest }: RadioProps) => {\n    const form = useForm();\n    const group = RadioGroupContext.inject();\n    return () => {\n      const off = disabled ?? (group.disabled || form?.disabled || false);\n      return renderChoice(\n        {\n          role: 'radio',\n          checked: group.value === name,\n          disabled: off,\n          shape: shape ?? group.shape ?? 'round',\n          onToggle: () => !form?.readonly && group.select(name),\n        },\n        rest,\n        children,\n        { propsBox, propsLabel },\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到组的 div 上 */\nexport interface RadioGroupProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {\n  /** 选中的值；双向绑定写 `_value={x}` */\n  _value?: ChoiceValue;\n  /**\n   * 排列\n   * @default 'vertical'\n   */\n  direction?: keyof ChoiceDirections;\n  /** 全部禁用 */\n  disabled?: boolean;\n  /** 各项的形状 */\n  shape?: keyof ChoiceShapes;\n  /** 选了另一项 */\n  onChange?: (value: ChoiceValue) => void;\n  /** 各个 Radio */\n  children?: VNodeChild;\n}\n\n/** 单选组（div[role=radiogroup]） */\nexport const RadioGroup = _component(\n  ({\n    _value: value = _bindable<ChoiceValue | undefined>(undefined),\n    direction = 'vertical',\n    disabled = false,\n    shape,\n    onChange,\n    children,\n    ...rest\n  }: RadioGroupProps) => {\n    RadioGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get disabled() {\n        return disabled;\n      },\n      get shape() {\n        return shape;\n      },\n      select(name) {\n        if (name === value) return;\n        value = name;\n        onChange?.(name);\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [choiceStyles.group, direction === 'horizontal' && choiceStyles.horizontal] },\n          rest,\n          { role: 'radiogroup' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAyBA,IAAM,oBAAoB,cAA+B,YAAY;;;AAmBrE,IAAa,QAAQ,0BACnB,QAAA,SAAoF;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,WAAAD,aAAA,QAAA,UAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAvB,OAAIE,UAAA,QAAA,MAAA,KAAA;CAC/D,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,kBAAkB,OAAO;CACvC,aAAa;EACX,MAAM,MAAM,SAAA,UAAa,MAAM,YAAY,MAAM,YAAY;EAC7D,OAAO,aACL;GACE,MAAM;GACN,SAAS,MAAM,UAAK,KAAA;GACpB,UAAU;GACV,OAAO,MAAA,SAAS,MAAM,SAAS;GAC/B,gBAAgB,CAAC,MAAM,YAAY,MAAM,OAAM,KAAA,KAAK;EACtD,GACA,MAAI,SAAA,OAEJ;GAAE,UAAQ,SAAA;GAAE,YAAU,WAAA;EAAC,CACzB;CACF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAsBA,IAAa,aAAa,0BACxB,SAAA,UAQuB;CAAA,MAAA,QAAAC,SAAA,SAAA,gBAP8B,KAAA,GAAS,MAAA,IAAA;CAAA,MAAA,YAAAH,aAAA,SAAA,aAChD,UAAU;CAAA,MAAA,WAAAA,aAAA,SAAA,YACX,KAAK;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,SAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,OAAA;CAAA,MAIb,OAAIC,UAAA,SAAA,OAAA,KAAA;CAEP,kBAAkB,QAAQ;EACxB,IAAI,QAAQ;GACV,OAAA,MAAA;EACF;EACA,IAAI,WAAW;GACb,OAAA,SAAA;EACF;EACA,IAAI,QAAQ;GACV,OAAA,MAAA;EACF;EACA,OAAO,MAAM;GACX,IAAI,SAAI,MAAA,OAAY;GACpB,MAAA,QAAQ;GACR,SAAA,QAAW,IAAI;EACjB;CACF,CAAC;CACD,aAAOE,YAAA,OAEC,WACF,EAAE,IAAI,CAAC,aAAa,OAAO,UAAA,UAAc,gBAAgB,aAAa,UAAU,EAAE,GAClF,MACA,EAAE,MAAM,aAAa,CACvB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/Rate.d.ts

@@ -0,0 +1,45 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface RateProps extends Omit<PartProps<'div', 'role' | 'tabindex'>, 'onChange'> {
+    /** 分数；双向绑定写 `_value={x}` */
+    _value?: number;
+    /**
+     * 几颗星
+     * @default 5
+     */
+    count?: number;
+    /** 可以选半颗 */
+    allowHalf?: boolean;
+    /** 只读：只展示 */
+    readonly?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /**
+     * 图标
+     * @default Star
+     */
+    icon?: IconData;
+    /**
+     * 选中部分的色调
+     * @default 'warning'
+     */
+    tone?: 'warning' | 'danger' | 'accent';
+    /** 分数变了 */
+    onChange?: (value: number) => void;
+    /** 每颗星的部件属性 */
+    propsItem?: PartProps<'span'>;
+}
+/** Rate 的样式：root、item、void、各色调、half */
+export declare const rateStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    half: css.CompiledStyles;
+    item: css.CompiledStyles;
+    root: css.CompiledStyles;
+    void: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** 评分（div[role=slider] > 各颗星） */
+export declare const Rate: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RateProps>;