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

package/dist/input/NumberField.js

@@ -0,0 +1,288 @@
+import { addNumeric, compareNumeric, multiplyNumeric, numericKind, shiftDecimal, snapNumeric, toNumber, toNumericKind } from "../utils/data/numeric.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { IconButton } from "../base/IconButton.js";
+import { useFormat } from "../config/lang/format.js";
+import { useFieldControl } from "../form/Field.js";
+import { controlAffix, controlClear, controlIcon, controlParts, useControlAppearance } from "./control.js";
+import { FormValue } from "../form/FormValue.js";
+import { normalizeNumber } from "../utils/data/number-parse.js";
+import { Fragment, createVNode, mergeProps, onBeforeUnmount, ref, shallowRef, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Minus, Plus } from "@lucide/icons";
+//#region src/input/NumberField.tsx
+/**
+* 数字输入框（role="spinbutton"）：外壳同 TextField，右侧带减少 / 增加按钮。参考 React Aria NumberField、WAI-ARIA Spinbutton。
+*
+*   <Field label="数量"><NumberField _value={count} min={1} max={99} /></Field>
+*   <NumberField _value={price} step={0.01} format={{ style: 'currency', currency: 'CNY' }} aria-label="单价" />
+*   <NumberField _value={amount} valueType={Decimal} step={new Decimal('0.01')} />   // 金额：Decimal 精确运算
+*   <NumberField _value={yuan} format={{ scale: 10_000, maximumFractionDigits: 2 }} suffix="万元" />  // 值是元，按万元输入
+*
+* - 值可以是 number、bigint 或 decimal.js 的 Decimal，写回时保持传入的类型（一开始为空时按 valueType）；
+*   bigint 与 Decimal 的加减、对齐步长都精确运算，不经过浮点数。表单提交的是十进制文本（FormValue），不是显示的格式。
+* - 输入时是普通文本；失焦或回车时解析、夹到 min–max、对齐到 step 后写回（snapToStep，没有浮点误差），解析不了时恢复原值；
+*   清空后写回 null。没在编辑时按 format（NumericFormat）与当前语言显示，编辑时去掉千分位。
+*   format 写了 scale（10 的整数次幂）时，显示与编辑都按缩放后的单位（值是元、输入的是万元），写回时精确移位回去；
+*   min、max、step 仍按值本身的单位。单位文字用 prefix、suffix，放在输入框里、文字的前后。
+* - 认当前语言的小数点与千分位，也认中文输入法打出的全角数字和全角句点。
+* - ↑ / ↓ 加减 step，Page Up / Page Down 加减 bigStep，Home / End 到 min / max；按钮不在 Tab 顺序里（键盘用方向键），
+*   按住按钮连续加减（先停 400ms，之后每 60ms 一步，同 React Aria）。
+*
+* 未声明的属性落到 input（主元素）上，外壳用 propsRoot。部件：Root、Prefix、Input、Suffix、Decrement、Increment（IconButton）。
+*/
+/** 值、角色与状态由组件管理 */
+/** 未声明的属性落到 input（主元素）上；外壳用 propsRoot */
+/** 数字输入框：输入、方向键与按钮加减，提交时夹到范围并对齐步长 */
+var NumberField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const valueType = readonlyProp(_props, "valueType", "number");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const step = readonlyProp(_props, "step");
+	const bigStep = readonlyProp(_props, "bigStep");
+	const format = readonlyProp(_props, "format");
+	const prefix = readonlyProp(_props, "prefix");
+	const suffix = readonlyProp(_props, "suffix");
+	const name = readonlyProp(_props, "name");
+	const stepper = readonlyProp(_props, "stepper", true);
+	const clearable = readonlyProp(_props, "clearable", false);
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsPrefix = readonlyProp(_props, "propsPrefix");
+	const propsSuffix = readonlyProp(_props, "propsSuffix");
+	const icon = readonlyProp(_props, "icon");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsDecrement = readonlyProp(_props, "propsDecrement");
+	const propsIncrement = readonlyProp(_props, "propsIncrement");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const formatter = useFormat();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const ownId = useId();
+	const low = () => min.value ?? control().constraints.min;
+	const high = () => max.value ?? control().constraints.max;
+	const increment = () => step.value ?? control().constraints.step ?? 1;
+	let input = shallowRef(null);
+	let draft = ref(null);
+	let lastKind;
+	const kind = () => {
+		if (value.value != null) lastKind = numericKind(value.value);
+		return lastKind ?? valueType.value;
+	};
+	const snap = (next) => snapNumeric(next, increment(), low(), high(), kind());
+	/** 缩放的位数：scale 为 10_000 时是 4（输入的数小数点右移 4 位才是值） */
+	const places = () => format.value?.scale ? Math.round(Math.log10(format.value.scale)) : 0;
+	/** 输入框里的十进制文本 → 值的十进制文本 */
+	const unscaled = (text) => places() ? shiftDecimal(text, -places()) : text;
+	const plain = (next) => next == null ? "" : formatter.number(next, {
+		useGrouping: false,
+		maximumFractionDigits: 20,
+		scale: format.value?.scale
+	});
+	/**
+	* 解析并写回（解析不了时恢复原值）。文字没改过、或只读与不可用时不写：只是聚焦再离开，
+	* 不该把值按步长取整、夹到范围里，把表单弄脏
+	*/
+	function commit() {
+		if (draft.value == null) return;
+		const state = control();
+		if (draft.value === plain(value.value) || state.disabled || state.readonly) {
+			draft.value = null;
+			return;
+		}
+		const parsed = normalizeNumber(draft.value, lang.code);
+		if (parsed === null) value.value = null;
+		else if (parsed !== void 0) value.value = snap(toNumericKind(unscaled(parsed), kind()));
+		draft.value = null;
+	}
+	/** 从当前值（编辑中则先解析）加减 delta 的 times 倍；没有值时从 min（或 0）开始 */
+	function stepBy(delta, times) {
+		const typed = draft.value != null ? normalizeNumber(draft.value, lang.code) : null;
+		const current = draft.value != null ? typed == null ? null : toNumericKind(unscaled(typed), kind()) : value.value;
+		const offset = multiplyNumeric(delta, times, kind());
+		setValue(snap(current == null ? low() ?? 0 : addNumeric(current, offset, kind())));
+	}
+	/** 键盘改值：编辑中的文字跟着换，失焦时才不会被旧文字写回去 */
+	function setValue(next) {
+		value.value = next;
+		if (draft.value != null) draft.value = plain(value.value);
+	}
+	function onKeydown(event) {
+		const state = control();
+		if (state.disabled || state.readonly) return;
+		const lowest = low();
+		const highest = high();
+		const action = {
+			ArrowUp: () => stepBy(increment(), 1),
+			ArrowDown: () => stepBy(increment(), -1),
+			PageUp: () => bigStep.value == null ? stepBy(increment(), 10) : stepBy(bigStep.value, 1),
+			PageDown: () => bigStep.value == null ? stepBy(increment(), -10) : stepBy(bigStep.value, -1),
+			Home: lowest == null ? void 0 : () => setValue(toNumericKind(lowest, kind())),
+			End: highest == null ? void 0 : () => setValue(toNumericKind(highest, kind())),
+			Enter: commit
+		}[event.key];
+		if (!action) return;
+		if (event.key !== "Enter") event.preventDefault();
+		action();
+	}
+	const keepFocus = (event) => {
+		if (document.activeElement === input.value) event.preventDefault();
+	};
+	let repeat;
+	let stepped = false;
+	const stopRepeat = () => clearTimeout(repeat);
+	/** direction 为 1 或 -1：按住时连续加减 step */
+	function hold(event, direction) {
+		keepFocus(event);
+		if (event.button !== 0) return;
+		stepped = true;
+		stepBy(increment(), direction);
+		const tick = (wait) => {
+			repeat = setTimeout(() => {
+				stepBy(increment(), direction);
+				tick(60);
+			}, wait);
+		};
+		tick(400);
+		window.addEventListener("pointerup", stopRepeat, { once: true });
+		window.addEventListener("pointercancel", stopRepeat, { once: true });
+	}
+	function clickStep(direction) {
+		if (stepped) stepped = false;
+		else stepBy(increment(), direction);
+	}
+	onBeforeUnmount(stopRepeat);
+	/** 读屏与原生属性只认 number：bigint、Decimal 转成近似的浮点数 */
+	const approximate = (item) => item == null ? void 0 : toNumber(item);
+	const isInteger = (item) => typeof item === "bigint" || (typeof item === "number" ? Number.isInteger(item) : item.isInteger());
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const inputId = state.id ?? ownId;
+		const editable = !state.disabled && !state.readonly;
+		const shown = draft.value ?? (value.value == null ? "" : formatter.number(value.value, format.value));
+		const lowest = low();
+		const highest = high();
+		const integer = isInteger(increment()) && (lowest == null || isInteger(lowest));
+		const atLowest = value.value != null && lowest != null && compareNumeric(value.value, lowest) <= 0;
+		const atHighest = value.value != null && highest != null && compareNumeric(value.value, highest) >= 0;
+		return createVNode("div", mergeProps(mergeAttrs(s.root, propsRoot.value), {
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			controlAffix(s, prefix.value, inputId, propsPrefix.value),
+			createVNode("input", mergeAttrs(s.input, rest, {
+				ref: input,
+				id: inputId,
+				type: "text",
+				role: "spinbutton",
+				inputmode: integer && lowest != null && compareNumeric(lowest, 0) >= 0 ? "numeric" : "decimal",
+				autocomplete: rest.autocomplete ?? "off",
+				value: shown,
+				disabled: state.disabled,
+				readonly: state.readonly,
+				required: state.required,
+				"aria-valuenow": approximate(value.value),
+				"aria-valuemin": approximate(lowest),
+				"aria-valuemax": approximate(highest),
+				"aria-valuetext": value.value == null ? void 0 : formatter.number(value.value, format.value),
+				"aria-invalid": state.invalid || void 0,
+				"aria-describedby": state.describedBy,
+				onFocus: () => draft.value = plain(value.value),
+				onInput: (event) => draft.value = event.target.value,
+				onBlur: commit,
+				onKeydown
+			}), null),
+			controlAffix(s, suffix.value, inputId, propsSuffix.value),
+			clearable.value && editable && (value.value != null || !!draft.value) && controlClear(s, propsClear.value, () => {
+				draft.value = null;
+				value.value = null;
+				input.value?.focus();
+			}),
+			stepper.value && !state.readonly && createVNode(Fragment, null, [createVNode(IconButton, mergePartProps({
+				...s.button,
+				radius: "full",
+				icon: Minus,
+				"aria-label": lang.numberDecrement
+			}, propsDecrement.value, {
+				tabindex: -1,
+				disabled: !editable || atLowest,
+				onPointerdown: (event) => hold(event, -1),
+				onClick: () => clickStep(-1)
+			}), null), createVNode(IconButton, mergePartProps({
+				...s.button,
+				radius: "full",
+				icon: Plus,
+				"aria-label": lang.numberIncrement
+			}, propsIncrement.value, {
+				tabindex: -1,
+				disabled: !editable || atHighest,
+				onPointerdown: (event) => hold(event, 1),
+				onClick: () => clickStep(1)
+			}), null)]),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": value.value,
+				"disabled": state.disabled
+			}, null)
+		]);
+	};
+}, {
+	name: "NumberField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"valueType",
+		"min",
+		"max",
+		"step",
+		"bigStep",
+		"format",
+		"prefix",
+		"suffix",
+		"name",
+		"stepper",
+		"clearable",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsRoot",
+		"propsPrefix",
+		"propsSuffix",
+		"icon",
+		"propsIcon",
+		"propsDecrement",
+		"propsIncrement",
+		"propsClear"
+	]
+});
+//#endregion
+export { NumberField };
+
+//# sourceMappingURL=NumberField.js.map

package/dist/input/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/input/NumberField.tsx"],"sourcesContent":["/**\n * 数字输入框（role=\"spinbutton\"）：外壳同 TextField，右侧带减少 / 增加按钮。参考 React Aria NumberField、WAI-ARIA Spinbutton。\n *\n *   <Field label=\"数量\"><NumberField _value={count} min={1} max={99} /></Field>\n *   <NumberField _value={price} step={0.01} format={{ style: 'currency', currency: 'CNY' }} aria-label=\"单价\" />\n *   <NumberField _value={amount} valueType={Decimal} step={new Decimal('0.01')} />   // 金额：Decimal 精确运算\n *   <NumberField _value={yuan} format={{ scale: 10_000, maximumFractionDigits: 2 }} suffix=\"万元\" />  // 值是元，按万元输入\n *\n * - 值可以是 number、bigint 或 decimal.js 的 Decimal，写回时保持传入的类型（一开始为空时按 valueType）；\n *   bigint 与 Decimal 的加减、对齐步长都精确运算，不经过浮点数。表单提交的是十进制文本（FormValue），不是显示的格式。\n * - 输入时是普通文本；失焦或回车时解析、夹到 min–max、对齐到 step 后写回（snapToStep，没有浮点误差），解析不了时恢复原值；\n *   清空后写回 null。没在编辑时按 format（NumericFormat）与当前语言显示，编辑时去掉千分位。\n *   format 写了 scale（10 的整数次幂）时，显示与编辑都按缩放后的单位（值是元、输入的是万元），写回时精确移位回去；\n *   min、max、step 仍按值本身的单位。单位文字用 prefix、suffix，放在输入框里、文字的前后。\n * - 认当前语言的小数点与千分位，也认中文输入法打出的全角数字和全角句点。\n * - ↑ / ↓ 加减 step，Page Up / Page Down 加减 bigStep，Home / End 到 min / max；按钮不在 Tab 顺序里（键盘用方向键），\n *   按住按钮连续加减（先停 400ms，之后每 60ms 一步，同 React Aria）。\n *\n * 未声明的属性落到 input（主元素）上，外壳用 propsRoot。部件：Root、Prefix、Input、Suffix、Decrement、Increment（IconButton）。\n */\nimport { Minus, Plus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { normalizeNumber } from '../utils/data/number-parse';\nimport {\n  addNumeric,\n  compareNumeric,\n  multiplyNumeric,\n  numericKind,\n  shiftDecimal,\n  snapNumeric,\n  toNumber,\n  toNumericKind,\n  type NumericKind,\n  type NumericValue,\n} from '../utils/data/numeric';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  controlAffix,\n  controlClear,\n  controlIcon,\n  controlParts,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\n\n/** 值、角色与状态由组件管理 */\nexport type NumberFieldManaged =\n  | 'value'\n  | 'name'\n  | 'type'\n  | 'role'\n  | 'inputmode'\n  | 'min'\n  | 'max'\n  | 'step'\n  | 'size'\n  | 'prefix'\n  | 'disabled'\n  | 'readonly'\n  | 'required'\n  | 'aria-valuenow'\n  | 'aria-valuemin'\n  | 'aria-valuemax'\n  | 'aria-valuetext'\n  | 'aria-invalid'\n  | 'aria-describedby';\n\n/** 未声明的属性落到 input（主元素）上；外壳用 propsRoot */\nexport interface NumberFieldProps\n  extends PartProps<'input', NumberFieldManaged>, ControlOptions, ControlIconOptions {\n  /** 当前值：number、bigint 或 Decimal，父级写 _value={x}；空着时为 null。写回时保持传入的类型 */\n  _value?: NumericValue | null;\n  /**\n   * 值一开始为空时写回的类型：'number'（默认）、'bigint'，或 Decimal 构造函数（`valueType={Decimal}`，\n   * Decimal.clone 配过精度的也行）。有值以后按值本身的类型\n   */\n  valueType?: NumericKind;\n  /** 最小值；在表单里默认按 schema（z.number().min(0)、decimalSchema 的 min） */\n  min?: NumericValue;\n  /** 最大值；在表单里默认按 schema */\n  max?: NumericValue;\n  /** 步长，默认 1（schema 是 z.number().multipleOf(0.5) 时按它）；提交时对齐到 min + n × step。bigint 至少为 1 */\n  step?: NumericValue;\n  /** Page Up / Page Down 的步长，默认 step × 10 */\n  bigStep?: NumericValue;\n  /** 表单字段名：提交的是十进制文本（不带千分位与货币符号），不是输入框里显示的格式 */\n  name?: string;\n  /**\n   * 显示格式，如 `{ style: 'currency', currency: 'CNY' }`；写了 scale 时按缩放后的单位显示与输入：\n   * 值是元、按万元输入写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `suffix=\"万元\"`\n   */\n  format?: NumericFormat;\n  /** 输入框里文字前的内容（币种符号、图标） */\n  prefix?: VNodeChild;\n  /** 输入框里文字后的内容：单位，如“万元”“元/件” */\n  suffix?: VNodeChild;\n  /** 显示减少 / 增加按钮，默认 true；只读时不显示 */\n  stepper?: boolean;\n  /** 有值时显示清空按钮：清空后值是 null（选填的数量、金额） */\n  clearable?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、选中复制，不能改；不显示加减按钮 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 前缀的部件属性（指向输入框的 label） */\n  propsPrefix?: PartProps<'label'>;\n  /** 后缀（单位）的部件属性（指向输入框的 label） */\n  propsSuffix?: PartProps<'label'>;\n  /** 减少按钮的部件属性 */\n  propsDecrement?: Partial<IconButtonProps>;\n  /** 增加按钮的部件属性 */\n  propsIncrement?: Partial<IconButtonProps>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n}\n\n/** 数字输入框：输入、方向键与按钮加减，提交时夹到范围并对齐步长 */\nexport const NumberField = _component(\n  ({\n    _value: value = _bindable<NumericValue | null>(null),\n    valueType = 'number',\n    min,\n    max,\n    step,\n    bigStep,\n    format,\n    prefix,\n    suffix,\n    name,\n    stepper = true,\n    clearable = false,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsPrefix,\n    propsSuffix,\n    icon,\n    propsIcon,\n    propsDecrement,\n    propsIncrement,\n    propsClear,\n    ...rest\n  }: NumberFieldProps) => {\n    const lang = useLang();\n    const formatter = useFormat();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    // 前后缀的 label 要指向输入框：不在 Field 里、也没写 id 时用自己生成的\n    const ownId = useId();\n    // 范围与步长：显式写的 > 表单 schema 推出的（z.number().int().min(0)）> 不限、1\n    const low = (): NumericValue | undefined => min ?? control().constraints.min;\n    const high = (): NumericValue | undefined => max ?? control().constraints.max;\n    const increment = (): NumericValue => step ?? control().constraints.step ?? 1;\n    let input = _state.raw<HTMLInputElement | null>(null);\n    // 编辑中的文字；不在编辑时为 null，显示格式化后的值\n    let draft = _state<string | null>(null);\n    // 写回的类型：最近一次有值时的类型；一直为空时按 valueType\n    let lastKind: NumericKind | undefined;\n    const kind = () => {\n      if (value != null) lastKind = numericKind(value);\n      return lastKind ?? valueType;\n    };\n\n    const snap = (next: NumericValue) => snapNumeric(next, increment(), low(), high(), kind());\n    /** 缩放的位数：scale 为 10_000 时是 4（输入的数小数点右移 4 位才是值） */\n    const places = () => (format?.scale ? Math.round(Math.log10(format.scale)) : 0);\n    /** 输入框里的十进制文本 → 值的十进制文本 */\n    const unscaled = (text: string) => (places() ? shiftDecimal(text, -places()) : text);\n    const plain = (next: NumericValue | null) =>\n      next == null\n        ? ''\n        : formatter.number(next, {\n            useGrouping: false,\n            maximumFractionDigits: 20,\n            scale: format?.scale,\n          });\n\n    /**\n     * 解析并写回（解析不了时恢复原值）。文字没改过、或只读与不可用时不写：只是聚焦再离开，\n     * 不该把值按步长取整、夹到范围里，把表单弄脏\n     */\n    function commit() {\n      if (draft == null) return;\n      const state = control();\n      if (draft === plain(value) || state.disabled || state.readonly) {\n        draft = null;\n        return;\n      }\n      const parsed = normalizeNumber(draft, lang.code);\n      if (parsed === null) value = null;\n      else if (parsed !== undefined) value = snap(toNumericKind(unscaled(parsed), kind()));\n      draft = null;\n    }\n\n    /** 从当前值（编辑中则先解析）加减 delta 的 times 倍；没有值时从 min（或 0）开始 */\n    function stepBy(delta: NumericValue, times: number) {\n      const typed = draft != null ? normalizeNumber(draft, lang.code) : null;\n      const current =\n        draft != null ? (typed == null ? null : toNumericKind(unscaled(typed), kind())) : value;\n      const offset = multiplyNumeric(delta, times, kind());\n      setValue(snap(current == null ? (low() ?? 0) : addNumeric(current, offset, kind())));\n    }\n\n    /** 键盘改值：编辑中的文字跟着换，失焦时才不会被旧文字写回去 */\n    function setValue(next: NumericValue) {\n      value = next;\n      if (draft != null) draft = plain(value);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly) return;\n      const lowest = low();\n      const highest = high();\n      const actions: Record<string, (() => void) | undefined> = {\n        ArrowUp: () => stepBy(increment(), 1),\n        ArrowDown: () => stepBy(increment(), -1),\n        PageUp: () => (bigStep == null ? stepBy(increment(), 10) : stepBy(bigStep, 1)),\n        PageDown: () => (bigStep == null ? stepBy(increment(), -10) : stepBy(bigStep, -1)),\n        Home: lowest == null ? undefined : () => setValue(toNumericKind(lowest, kind())),\n        End: highest == null ? undefined : () => setValue(toNumericKind(highest, kind())),\n        Enter: commit,\n      };\n      const action = actions[event.key];\n      if (!action) return;\n      if (event.key !== 'Enter') event.preventDefault();\n      action();\n    }\n\n    // 按住按钮不让 input 失焦：焦点留在输入框里，接着可以用方向键\n    const keepFocus = (event: PointerEvent) => {\n      if (document.activeElement === input) event.preventDefault();\n    };\n\n    // 按住步进按钮：先走一步，停一下后连续走；松开（在哪里松开都算）时停\n    let repeat: ReturnType<typeof setTimeout> | undefined;\n    // 指针按下已经走过一步，随后的 click 不再走（读屏、键盘触发的 click 照常走一步）\n    let stepped = false;\n    const stopRepeat = () => clearTimeout(repeat);\n    /** direction 为 1 或 -1：按住时连续加减 step */\n    function hold(event: PointerEvent, direction: number) {\n      keepFocus(event);\n      if (event.button !== 0) return;\n      stepped = true;\n      stepBy(increment(), direction);\n      const tick = (wait: number) => {\n        repeat = setTimeout(() => {\n          stepBy(increment(), direction);\n          tick(60);\n        }, wait);\n      };\n      tick(400);\n      window.addEventListener('pointerup', stopRepeat, { once: true });\n      window.addEventListener('pointercancel', stopRepeat, { once: true });\n    }\n    function clickStep(direction: number) {\n      if (stepped) stepped = false;\n      else stepBy(increment(), direction);\n    }\n    onBeforeUnmount(stopRepeat);\n\n    /** 读屏与原生属性只认 number：bigint、Decimal 转成近似的浮点数 */\n    const approximate = (item: NumericValue | null | undefined) =>\n      item == null ? undefined : toNumber(item);\n    const isInteger = (item: NumericValue) =>\n      typeof item === 'bigint' ||\n      (typeof item === 'number' ? Number.isInteger(item) : item.isInteger());\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const inputId = state.id ?? ownId;\n      const editable = !state.disabled && !state.readonly;\n      const shown = draft ?? (value == null ? '' : formatter.number(value, format));\n      const lowest = low();\n      const highest = high();\n      const integer = isInteger(increment()) && (lowest == null || isInteger(lowest));\n      const atLowest = value != null && lowest != null && compareNumeric(value, lowest) <= 0;\n      const atHighest = value != null && highest != null && compareNumeric(value, highest) >= 0;\n      return (\n        <div\n          {...mergeAttrs<'div'>(s.root, propsRoot)}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          {controlIcon(s, icon, propsIcon)}\n          {controlAffix(s, prefix, inputId, propsPrefix)}\n          <input\n            {...mergeAttrs<'input'>(s.input, rest, {\n              ref: _toRef(input),\n              id: inputId,\n              type: 'text',\n              role: 'spinbutton',\n              inputmode:\n                integer && lowest != null && compareNumeric(lowest, 0) >= 0 ? 'numeric' : 'decimal',\n              autocomplete: rest.autocomplete ?? 'off',\n              value: shown,\n              disabled: state.disabled,\n              readonly: state.readonly,\n              required: state.required,\n              'aria-valuenow': approximate(value),\n              'aria-valuemin': approximate(lowest),\n              'aria-valuemax': approximate(highest),\n              'aria-valuetext': value == null ? undefined : formatter.number(value, format),\n              'aria-invalid': state.invalid || undefined,\n              'aria-describedby': state.describedBy,\n              onFocus: () => (draft = plain(value)),\n              onInput: (event: Event) => (draft = (event.target as HTMLInputElement).value),\n              onBlur: commit,\n              onKeydown,\n            })}\n          />\n          {controlAffix(s, suffix, inputId, propsSuffix)}\n          {clearable &&\n            editable &&\n            (value != null || !!draft) &&\n            controlClear(s, propsClear, () => {\n              draft = null;\n              value = null;\n              input?.focus();\n            })}\n          {stepper && !state.readonly && (\n            <>\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    ...s.button,\n                    radius: 'full',\n                    icon: Minus,\n                    'aria-label': lang.numberDecrement,\n                  },\n                  propsDecrement,\n                  {\n                    tabindex: -1,\n                    disabled: !editable || atLowest,\n                    onPointerdown: (event: PointerEvent) => hold(event, -1),\n                    onClick: () => clickStep(-1),\n                  },\n                )}\n              />\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    ...s.button,\n                    radius: 'full',\n                    icon: Plus,\n                    'aria-label': lang.numberIncrement,\n                  },\n                  propsIncrement,\n                  {\n                    tabindex: -1,\n                    disabled: !editable || atHighest,\n                    onPointerdown: (event: PointerEvent) => hold(event, 1),\n                    onClick: () => clickStep(1),\n                  },\n                )}\n              />\n            </>\n          )}\n          <FormValue name={name} value={value} disabled={state.disabled} />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/NumberRangeField.d.ts

@@ -0,0 +1,58 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import type { NumericFormat } from '../config/lang/format';
+import { type NumericKind, type NumericValue } from '../utils/data/numeric';
+import { type PartProps } from '../utils/props';
+import type { ControlOptions } from './control';
+import { type NumberFieldProps } from './NumberField';
+/** 区间的值：[起, 止]，空着的一端是 null */
+export type NumberRange = readonly [NumericValue | null, NumericValue | null];
+/** 角色由组件管理；原生的 placeholder、prefix 属性让给两个框的占位与前缀 */
+export type NumberRangeFieldManaged = 'role' | 'placeholder' | 'prefix';
+/** 未声明的属性落到外层 div 上 */
+export interface NumberRangeFieldProps extends PartProps<'div', NumberRangeFieldManaged>, ControlOptions {
+    /** [起, 止]：父级写 _value={range}；任一端可以为 null */
+    _value?: NumberRange;
+    /** 两端共同的最小值 */
+    min?: NumericValue;
+    /** 两端共同的最大值 */
+    max?: NumericValue;
+    /** 步长，同 NumberField */
+    step?: NumericValue;
+    /** 显示格式，同 NumberField（scale 时按缩放后的单位输入） */
+    format?: NumericFormat;
+    /** 一开始为空时写回的类型，同 NumberField */
+    valueType?: NumericKind;
+    /** 框里文字前的内容 */
+    prefix?: VNodeChild;
+    /** 框里文字后的单位 */
+    suffix?: VNodeChild;
+    /** 两个框的占位文字，默认取语言包（最小值、最大值） */
+    placeholder?: readonly [string, string];
+    /** 两端中间的内容，默认“–” */
+    separator?: VNodeChild;
+    /** 表单提交时两端的 name */
+    name?: readonly [string, string];
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 起的那个框的部件属性 */
+    propsStart?: Partial<NumberFieldProps>;
+    /** 止的那个框的部件属性 */
+    propsEnd?: Partial<NumberFieldProps>;
+    /** 中间分隔的部件属性 */
+    propsSeparator?: PartProps<'span', 'aria-hidden'>;
+}
+/** NumberRangeField 的样式：root、field、separator */
+export declare const numberRangeFieldStyles: Readonly<{
+    field: css.CompiledStyles;
+    root: css.CompiledStyles;
+    separator: css.CompiledStyles;
+}>;
+/** 数值区间：两个数字框，起比止大时自动对调 */
+export declare const NumberRangeField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NumberRangeFieldProps>;

package/dist/input/NumberRangeField.js

@@ -0,0 +1,157 @@
+import { compareNumeric } from "../utils/data/numeric.js";
+import { useLang } from "../config/context.js";
+import { defaultLabelledBy, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useFieldControl } from "../form/Field.js";
+import { NumberField } from "./NumberField.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/NumberRangeField.tsx
+/** 区间的值：[起, 止]，空着的一端是 null */
+/** 角色由组件管理；原生的 placeholder、prefix 属性让给两个框的占位与前缀 */
+/** 未声明的属性落到外层 div 上 */
+/** NumberRangeField 的样式：root、field、separator */
+var numberRangeFieldStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minWidth: 0
+	},
+	field: {
+		flexGrow: 1,
+		flexBasis: 0,
+		minWidth: 0
+	},
+	separator: {
+		flexShrink: 0,
+		color: "_textMuted"
+	}
+});
+/** 数值区间：两个数字框，起比止大时自动对调 */
+var NumberRangeField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => [null, null], _ctx.emit);
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const step = readonlyProp(_props, "step");
+	const format = readonlyProp(_props, "format");
+	const valueType = readonlyProp(_props, "valueType");
+	const prefix = readonlyProp(_props, "prefix");
+	const suffix = readonlyProp(_props, "suffix");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const separator = readonlyProp(_props, "separator", "–");
+	const name = readonlyProp(_props, "name");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const propsStart = readonlyProp(_props, "propsStart");
+	const propsEnd = readonlyProp(_props, "propsEnd");
+	const propsSeparator = readonlyProp(_props, "propsSeparator");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	/** 改一端：两端都有值且起比止大时对调 */
+	function set(index, next) {
+		const pair = [value.value[0], value.value[1]];
+		pair[index] = next;
+		const [start, end] = pair;
+		value.value = start != null && end != null && compareNumeric(start, end) > 0 ? [end, start] : pair;
+	}
+	return () => {
+		const state = control();
+		const shared = {
+			min: min.value,
+			max: max.value,
+			step: step.value,
+			format: format.value,
+			valueType: valueType.value,
+			prefix: prefix.value,
+			suffix: suffix.value,
+			variant: variant.value,
+			size: size.value,
+			radius: radius.value,
+			disabled: state.disabled,
+			readonly: state.readonly,
+			invalid: state.invalid,
+			stepper: false,
+			propsRoot: { sx: numberRangeFieldStyles.field }
+		};
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [numberRangeFieldStyles.root, size.value && fontSizeStyles[size.value]] }, rest, {
+			role: "group",
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy),
+			"aria-describedby": state.describedBy
+		}), {
+			"data-disabled": state.disabled || void 0,
+			"data-invalid": state.invalid || void 0
+		}), [
+			createVNode(NumberField, mergeProps(mergePartProps({
+				...shared,
+				placeholder: placeholder.value?.[0] ?? lang.sliderMin
+			}, propsStart.value, {
+				id: state.id,
+				required: state.required,
+				name: name.value?.[0],
+				"aria-label": lang.sliderMin
+			}), {
+				"_value": value.value[0],
+				"onUpdate:_value": _cache[0] || (_cache[0] = (next) => set(0, next))
+			}), null),
+			createVNode("span", mergeAttrs({ sx: numberRangeFieldStyles.separator }, propsSeparator.value, { "aria-hidden": true }), [separator.value]),
+			createVNode(NumberField, mergeProps(mergePartProps({
+				...shared,
+				placeholder: placeholder.value?.[1] ?? lang.sliderMax
+			}, propsEnd.value, {
+				id: state.id ? `${state.id}-end` : void 0,
+				name: name.value?.[1],
+				"aria-label": lang.sliderMax
+			}), {
+				"_value": value.value[1],
+				"onUpdate:_value": _cache[1] || (_cache[1] = (next) => set(1, next))
+			}), null)
+		]);
+	};
+}, {
+	name: "NumberRangeField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"step",
+		"format",
+		"valueType",
+		"prefix",
+		"suffix",
+		"placeholder",
+		"separator",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsStart",
+		"propsEnd",
+		"propsSeparator"
+	]
+});
+//#endregion
+export { NumberRangeField, numberRangeFieldStyles };
+
+//# sourceMappingURL=NumberRangeField.js.map

package/dist/input/NumberRangeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/NumberRangeField.tsx"],"sourcesContent":["/**\n * 数值区间（div role=\"group\"）：两个 NumberField，最小到最大。预期收益量级、金额范围、数量区间的录入与筛选。\n *\n *   <Field label=\"预期收益量级\">\n *     <NumberRangeField _value={range} format={{ scale: 10_000 }} suffix=\"万元\" min={0} />\n *   </Field>\n *\n * value 是 [起, 止]，任一端可以为空（null，“10 万元以上”）。两端都填了、起比止大时自动对调，不用报错。\n * min、max、step、format、prefix、suffix、valueType 与外观（variant、size、radius）两端共用，同 NumberField。\n * 在 Field 里时：标签点了聚焦第一个框，组以标签为名称、关联说明与错误；两个框各自念“最小值”“最大值”。\n * 写了 name（[起的名字, 止的名字]）时两端各用一个隐藏的 input 随表单提交。\n *\n * 部件：Root（div）、Start、End（NumberField）、Separator（span）。\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 { useLang } from '../config/context';\nimport type { NumericFormat } from '../config/lang/format';\nimport { useFieldControl } from '../form/Field';\nimport { compareNumeric, type NumericKind, type NumericValue } from '../utils/data/numeric';\nimport { defaultLabelledBy, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles } from '../utils/style/typography';\nimport type { ControlOptions } from './control';\nimport { NumberField, type NumberFieldProps } from './NumberField';\n\n/** 区间的值：[起, 止]，空着的一端是 null */\nexport type NumberRange = readonly [NumericValue | null, NumericValue | null];\n\n/** 角色由组件管理；原生的 placeholder、prefix 属性让给两个框的占位与前缀 */\nexport type NumberRangeFieldManaged = 'role' | 'placeholder' | 'prefix';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface NumberRangeFieldProps\n  extends PartProps<'div', NumberRangeFieldManaged>, ControlOptions {\n  /** [起, 止]：父级写 _value={range}；任一端可以为 null */\n  _value?: NumberRange;\n  /** 两端共同的最小值 */\n  min?: NumericValue;\n  /** 两端共同的最大值 */\n  max?: NumericValue;\n  /** 步长，同 NumberField */\n  step?: NumericValue;\n  /** 显示格式，同 NumberField（scale 时按缩放后的单位输入） */\n  format?: NumericFormat;\n  /** 一开始为空时写回的类型，同 NumberField */\n  valueType?: NumericKind;\n  /** 框里文字前的内容 */\n  prefix?: VNodeChild;\n  /** 框里文字后的单位 */\n  suffix?: VNodeChild;\n  /** 两个框的占位文字，默认取语言包（最小值、最大值） */\n  placeholder?: readonly [string, string];\n  /** 两端中间的内容，默认“–” */\n  separator?: VNodeChild;\n  /** 表单提交时两端的 name */\n  name?: readonly [string, string];\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 起的那个框的部件属性 */\n  propsStart?: Partial<NumberFieldProps>;\n  /** 止的那个框的部件属性 */\n  propsEnd?: Partial<NumberFieldProps>;\n  /** 中间分隔的部件属性 */\n  propsSeparator?: PartProps<'span', 'aria-hidden'>;\n}\n\n/** NumberRangeField 的样式：root、field、separator */\nexport const numberRangeFieldStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', gap: '_sm', minWidth: 0 },\n  field: { flexGrow: 1, flexBasis: 0, minWidth: 0 },\n  separator: { flexShrink: 0, color: '_textMuted' },\n});\n\n/** 数值区间：两个数字框，起比止大时自动对调 */\nexport const NumberRangeField = _component(\n  ({\n    _value: value = _bindable<NumberRange>([null, null]),\n    min,\n    max,\n    step,\n    format,\n    valueType,\n    prefix,\n    suffix,\n    placeholder,\n    separator = '–',\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsStart,\n    propsEnd,\n    propsSeparator,\n    ...rest\n  }: NumberRangeFieldProps) => {\n    const lang = useLang();\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n\n    /** 改一端：两端都有值且起比止大时对调 */\n    function set(index: 0 | 1, next: NumericValue | null) {\n      const pair: [NumericValue | null, NumericValue | null] = [value[0], value[1]];\n      pair[index] = next;\n      const [start, end] = pair;\n      value = start != null && end != null && compareNumeric(start, end) > 0 ? [end, start] : pair;\n    }\n\n    return () => {\n      const state = control();\n      const shared = {\n        min,\n        max,\n        step,\n        format,\n        valueType,\n        prefix,\n        suffix,\n        variant,\n        size,\n        radius,\n        disabled: state.disabled,\n        readonly: state.readonly,\n        invalid: state.invalid,\n        stepper: false,\n        propsRoot: { sx: numberRangeFieldStyles.field },\n      };\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            // 分隔符跟两个框一样大\n            { sx: [numberRangeFieldStyles.root, size && fontSizeStyles[size]] },\n            rest,\n            {\n              role: 'group',\n              'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n              'aria-describedby': state.describedBy,\n            },\n          )}\n          data-disabled={state.disabled || undefined}\n          data-invalid={state.invalid || undefined}\n        >\n          <NumberField\n            {...mergePartProps<NumberFieldProps>(\n              { ...shared, placeholder: placeholder?.[0] ?? lang.sliderMin },\n              propsStart,\n              {\n                // 标签的 for 指向第一个框：点标签聚焦“起”\n                id: state.id,\n                required: state.required,\n                name: name?.[0],\n                'aria-label': lang.sliderMin,\n              },\n            )}\n            _value={value[0]}\n            onUpdate:_value={(next: NumericValue | null) => set(0, next)}\n          />\n          <span\n            {...mergeAttrs<'span'>({ sx: numberRangeFieldStyles.separator }, propsSeparator, {\n              'aria-hidden': true,\n            })}\n          >\n            {separator}\n          </span>\n          <NumberField\n            {...mergePartProps<NumberFieldProps>(\n              { ...shared, placeholder: placeholder?.[1] ?? lang.sliderMax },\n              propsEnd,\n              {\n                id: state.id ? `${state.id}-end` : undefined,\n                name: name?.[1],\n                'aria-label': lang.sliderMax,\n              },\n            )}\n            _value={value[1]}\n            onUpdate:_value={(next: NumericValue | null) => set(1, next)}\n          />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/OtpField.d.ts

@@ -0,0 +1,58 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 能输入的字符 */
+export interface OtpCharsets {
+    /** 只有数字（默认），手机弹出数字键盘 */
+    numeric: unknown;
+    /** 字母与数字，字母转成大写 */
+    alphanumeric: unknown;
+}
+/** 值、类型与状态由组件管理 */
+export type OtpFieldManaged = 'value' | 'type' | 'maxlength' | 'inputmode' | 'pattern' | 'disabled' | 'readonly' | 'required';
+/** 未声明的属性落到 input（主元素）上；格子的容器用 propsRoot */
+export interface OtpFieldProps extends PartProps<'input', OtpFieldManaged> {
+    /** 输入的字符：父级写 _value={code} */
+    _value?: string;
+    /** 几位，默认 6 */
+    length?: number;
+    /** 能输入的字符，默认 numeric */
+    type?: keyof OtpCharsets;
+    /** 分组显示（如 [3, 3] 在中间加一道短横线）；各组加起来要等于 length */
+    groups?: readonly number[];
+    /** 显示成圆点（动态口令、支付密码） */
+    mask?: boolean;
+    /** 填满时调用（输入、粘贴、自动填充都算） */
+    onComplete?: (value: string) => void;
+    /** 字号档位：格子随之缩放 */
+    size?: TextSize;
+    /** 不可用（不写时取 Field 的） */
+    disabled?: boolean;
+    /** 只读（不写时取 Field 的） */
+    readonly?: boolean;
+    /** 必填（不写时取 Field 的） */
+    required?: boolean;
+    /** 校验未通过（不写时取 Field 的） */
+    invalid?: boolean;
+    /** 格子的容器的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 每一格的部件属性 */
+    propsSlot?: PartProps<'div'>;
+    /** 分组之间的分隔的部件属性 */
+    propsSeparator?: PartProps<'span'>;
+    children?: VNodeChild;
+}
+/** OtpField 的样式：root、input、slot、active、invalid、disabled、caret、separator */
+export declare const otpFieldStyles: Readonly<{
+    active: css.CompiledStyles;
+    caret: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    input: css.CompiledStyles;
+    invalid: css.CompiledStyles;
+    root: css.CompiledStyles;
+    separator: css.CompiledStyles;
+    slot: css.CompiledStyles;
+}>;
+/** 验证码输入框：一个原生 input + 显示用的格子 */
+export declare const OtpField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<OtpFieldProps>;