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

package/dist/feedback/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/feedback/Toast.tsx"],"sourcesContent":["/**\n * 轻提示：屏幕中间（或上、下）的一小块黑底文字，过一会儿自己消失。有文字、加载中、成功、失败四种。\n *\n *   showToast('已复制');\n *   const toast = showLoadingToast('提交中…');   …   toast.close();\n *   showSuccessToast('保存成功');\n *   <Toast _open={show} type=\"fail\">网络不太好</Toast>\n *\n * 命令式的写法渲染在 ConfigProvider 里（页面要包一层）；同一时间只有一个，后一个替换前一个。\n */\nimport { CircleCheck, CircleX } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Teleport, onBeforeUnmount, shallowReactive, watch, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\nimport { usePresence } from '../utils/presence';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { Loading } from './Loading';\n\n/** 轻提示的类型 */\nexport interface ToastTypes {\n  /** 只有文字 */\n  text: unknown;\n  /** 加载中：旋转指示，不自动关闭 */\n  loading: unknown;\n  /** 成功：对勾 */\n  success: unknown;\n  /** 失败：叉 */\n  fail: unknown;\n}\n\n/** 显示的位置 */\nexport interface ToastPositions {\n  /** 屏幕中间 */\n  middle: unknown;\n  /** 靠上 */\n  top: unknown;\n  /** 靠下 */\n  bottom: unknown;\n}\n\n/** 轻提示的选项（组件的 props 与 showToast 的参数共用） */\nexport interface ToastOptions {\n  /** 文字 */\n  message?: VNodeChild;\n  /**\n   * 类型\n   * @default 'text'\n   */\n  type?: keyof ToastTypes;\n  /** 自定义图标（代替类型自带的） */\n  icon?: IconData;\n  /**\n   * 显示多久（ms）；0 表示不自动关闭。加载中默认不自动关闭\n   * @default 2000\n   */\n  duration?: number;\n  /**\n   * 位置\n   * @default 'middle'\n   */\n  position?: keyof ToastPositions;\n  /** 显示期间挡住页面的点击（加载中常用） */\n  forbidClick?: boolean;\n  /** 关闭之后 */\n  onClose?: () => void;\n}\n\n/** 未声明的属性落到提示框（div）上 */\nexport interface ToastProps extends ToastOptions, PartProps<'div', 'role'> {\n  /** 是否显示；双向绑定写 `_open={x}`，到时间自动关闭时写回 false */\n  _open?: boolean;\n  /** 文字（与 message 二选一） */\n  children?: VNodeChild;\n}\n\n/** Toast 的样式：root、withIcon、各位置、icon、blocker */\nexport const toastStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    position: 'fixed',\n    insetInlineStart: '50%',\n    zIndex: 3000,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: '_sm',\n    maxWidth: '70%',\n    paddingBlock: '0.6em',\n    paddingInline: '1em',\n    borderRadius: '_lg',\n    backgroundColor: '_inverseSurface',\n    color: '_inverseText',\n    fontSize: '_md',\n    lineHeight: '1.4',\n    textAlign: 'center',\n    overflowWrap: 'anywhere',\n    pointerEvents: 'none',\n    opacity: { default: 0, '[data-state=\"open\"]': 1 },\n    transitionProperty: 'opacity, transform',\n    transitionDuration: '_md',\n  },\n  withIcon: { minWidth: '7.5em', minHeight: '7.5em', justifyContent: 'center', padding: '_lg' },\n  middle: {\n    insetBlockStart: '50%',\n    transform: {\n      default: 'translate(-50%, -50%) scale(0.92)',\n      '[data-state=\"open\"]': 'translate(-50%, -50%)',\n    },\n  },\n  top: { insetBlockStart: '20%', transform: 'translateX(-50%)' },\n  bottom: { insetBlockEnd: '20%', transform: 'translateX(-50%)' },\n  icon: { fontSize: '2.5em' },\n  blocker: { position: 'fixed', inset: 0, zIndex: 3000 },\n});\n\nconst ICONS = { success: CircleCheck, fail: CircleX } as const;\n\n/** 轻提示（div[role=status]，渲染到浮层根） */\nexport const Toast = _component(\n  ({\n    _open: open = _bindable(false),\n    message,\n    type = 'text',\n    icon,\n    duration,\n    position = 'middle',\n    forbidClick = false,\n    onClose,\n    children,\n    ...rest\n  }: ToastProps) => {\n    const host = useHost();\n    const config = useConfig();\n    const presence = usePresence(() => open, 240);\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const schedule = () => {\n      clearTimeout(timer);\n      const wait = duration ?? (type === 'loading' ? 0 : 2000);\n      if (open && wait > 0)\n        timer = setTimeout(() => {\n          open = false;\n          onClose?.();\n        }, wait);\n    };\n    // 打开、换了文字或类型时重新计时（命令式的后一个替换前一个）\n    watch(() => [open, message, type, duration], schedule, { immediate: true });\n    onBeforeUnmount(() => clearTimeout(timer));\n    return () => {\n      if (!presence.mounted) return null;\n      const glyph =\n        type === 'loading' ? (\n          <Loading size={36} />\n        ) : icon || type !== 'text' ? (\n          <Icon icon={icon ?? ICONS[type as 'success' | 'fail']} sx={toastStyles.icon} />\n        ) : null;\n      return (\n        <Teleport to={host.overlayRoot() as never}>\n          {forbidClick && <div {...mergeAttrs<'div'>({ sx: toastStyles.blocker })} />}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  config.rootSx,\n                  toastStyles.root,\n                  toastStyles[position],\n                  glyph && toastStyles.withIcon,\n                ],\n              },\n              rest,\n              {\n                role: 'status',\n                ...dataAttrs({ 'data-state': presence.visible ? 'open' : 'closed' }),\n              },\n            )}\n          >\n            {glyph}\n            {message ?? children}\n          </div>\n        </Teleport>\n      );\n    };\n  },\n);\n\n/** 命令式轻提示的状态：ConfigProvider 里的出口按它渲染 */\nexport const toastState = shallowReactive<{ open: boolean; options: ToastOptions }>({\n  open: false,\n  options: {},\n});\n\n/** 命令式轻提示的控制器 */\nexport interface ToastHandle {\n  /** 关闭这个提示（已经被后一个替换时什么也不做） */\n  close(): void;\n}\n\n/** 显示一个轻提示；同一时间只有一个，后一个替换前一个 */\nexport function showToast(options: ToastOptions | string): ToastHandle {\n  const next = typeof options === 'string' ? { message: options } : options;\n  toastState.options = next;\n  toastState.open = true;\n  return {\n    close() {\n      if (toastState.options === next) toastState.open = false;\n    },\n  };\n}\n\n/** 加载中的轻提示：不自动关闭，默认挡住点击；用返回的 close() 关 */\nexport const showLoadingToast = (options: ToastOptions | string = {}) =>\n  showToast({\n    forbidClick: true,\n    ...(typeof options === 'string' ? { message: options } : options),\n    type: 'loading',\n  });\n\n/** 成功的轻提示 */\nexport const showSuccessToast = (options: ToastOptions | string) =>\n  showToast({ ...(typeof options === 'string' ? { message: options } : options), type: 'success' });\n\n/** 失败的轻提示 */\nexport const showFailToast = (options: ToastOptions | string) =>\n  showToast({ ...(typeof options === 'string' ? { message: options } : options), type: 'fail' });\n\n/** 关闭当前的轻提示 */\nexport function closeToast() {\n  toastState.open = false;\n}\n"],"mappings":"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"}

package/dist/form/Checkbox.d.ts

@@ -0,0 +1,52 @@
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type ChoiceDirections, type ChoiceShapes } from './choice';
+/** 选项的值 */
+export type ChoiceValue = string | number;
+/** 角色与状态由组件管理 */
+export type ChoiceManaged = 'role' | 'aria-checked' | 'type' | 'disabled' | 'name';
+/** 未声明的属性落到按钮上 */
+export interface CheckboxProps extends Omit<PartProps<'button', ChoiceManaged>, 'onChange'> {
+    /** 是否选中（单独用时）；双向绑定写 `_checked={x}` */
+    _checked?: boolean;
+    /** 在组里时：这一项的值 */
+    name?: ChoiceValue;
+    /** 半选：全选框在部分选中时 */
+    indeterminate?: boolean;
+    /** 形状；不给时随组，默认圆 */
+    shape?: keyof ChoiceShapes;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 单独用时切换了 */
+    onChange?: (checked: boolean) => void;
+    /** 文字 */
+    children?: VNodeChild;
+    /** 框的部件属性 */
+    propsBox?: PartProps<'span'>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+}
+/** 复选框（button[role=checkbox] > 框 + 文字） */
+export declare const Checkbox: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CheckboxProps>;
+/** 未声明的属性落到组的 div 上 */
+export interface CheckboxGroupProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {
+    /** 选中的值；双向绑定写 `_value={x}` */
+    _value?: ChoiceValue[];
+    /**
+     * 排列
+     * @default 'vertical'
+     */
+    direction?: keyof ChoiceDirections;
+    /** 最多选几个 */
+    max?: number;
+    /** 全部禁用 */
+    disabled?: boolean;
+    /** 各项的形状 */
+    shape?: keyof ChoiceShapes;
+    /** 选中的变了 */
+    onChange?: (value: ChoiceValue[]) => void;
+    /** 各个 Checkbox */
+    children?: VNodeChild;
+}
+/** 复选框组（div[role=group]） */
+export declare const CheckboxGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CheckboxGroupProps>;

package/dist/form/Checkbox.js

@@ -0,0 +1,107 @@
+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/Checkbox.tsx
+/** 选项的值 */
+/** 复选框组提供给各项的 */
+var CheckboxGroupContext = createContext("CheckboxGroup");
+/** 角色与状态由组件管理 */
+/** 未声明的属性落到按钮上 */
+/** 复选框（button[role=checkbox] > 框 + 文字） */
+var Checkbox = /*#__PURE__*/ _component((_props, _ctx) => {
+	const checked = bindable(_props, "_checked", () => false, _ctx.emit);
+	const name = readonlyProp(_props, "name");
+	const indeterminate = readonlyProp(_props, "indeterminate", false);
+	const shape = readonlyProp(_props, "shape");
+	const disabled = readonlyProp(_props, "disabled");
+	const onChange = readonlyProp(_props, "onChange");
+	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 = CheckboxGroupContext.inject(null);
+	return () => {
+		const inGroup = group !== null && name.value !== void 0;
+		const selected = inGroup ? group.value.includes(name.value) : checked.value;
+		const full = inGroup && !selected && group.max !== void 0 && group.value.length >= group.max;
+		const off = disabled.value ?? (group?.disabled || form?.disabled || full || false);
+		return renderChoice({
+			role: "checkbox",
+			checked: selected,
+			indeterminate: indeterminate.value,
+			disabled: off,
+			shape: shape.value ?? group?.shape ?? "round",
+			onToggle: () => {
+				if (form?.readonly) return;
+				if (inGroup) return group.toggle(name.value);
+				checked.value = !checked.value;
+				onChange.value?.(checked.value);
+			}
+		}, rest, children.value, {
+			propsBox: propsBox.value,
+			propsLabel: propsLabel.value
+		});
+	};
+}, {
+	name: "Checkbox",
+	props: [
+		"_checked",
+		"onUpdate:_checked",
+		"name",
+		"indeterminate",
+		"shape",
+		"disabled",
+		"onChange",
+		"propsBox",
+		"propsLabel"
+	]
+});
+/** 未声明的属性落到组的 div 上 */
+/** 复选框组（div[role=group]） */
+var CheckboxGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const value = bindable(_props2, "_value", () => [], _ctx2.emit);
+	const direction = readonlyProp(_props2, "direction", "vertical");
+	const max = readonlyProp(_props2, "max");
+	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);
+	CheckboxGroupContext.provide({
+		get value() {
+			return value.value;
+		},
+		get max() {
+			return max.value;
+		},
+		get disabled() {
+			return disabled.value;
+		},
+		get shape() {
+			return shape.value;
+		},
+		toggle(name) {
+			value.value = value.value.includes(name) ? value.value.filter((item) => item !== name) : [...value.value, name];
+			onChange.value?.(value.value);
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: [choiceStyles.group, direction.value === "horizontal" && choiceStyles.horizontal] }, rest, { role: "group" }), [children.value]);
+}, {
+	name: "CheckboxGroup",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"direction",
+		"max",
+		"disabled",
+		"shape",
+		"onChange"
+	]
+});
+//#endregion
+export { Checkbox, CheckboxGroup };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/form/Checkbox.tsx"],"sourcesContent":["/**\n * 复选框与复选框组：从几个选项里选任意多个；单独一个用于“同意协议”这类确认。\n *\n *   <Checkbox _checked={agree}>我已阅读并同意《用户协议》</Checkbox>\n *   <CheckboxGroup _value={tags} direction=\"horizontal\" max={3}>\n *     <Checkbox name=\"spicy\">辣</Checkbox>\n *     <Checkbox name=\"sweet\">甜</Checkbox>\n *   </CheckboxGroup>\n *\n * 在组里时 name 是选项的值，选中与否由组的 _value 决定；全选框用 indeterminate 表示部分选中。\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { choiceStyles, renderChoice, type ChoiceDirections, type ChoiceShapes } from './choice';\nimport { useForm } from './context';\n\n/** 选项的值 */\nexport type ChoiceValue = string | number;\n\n/** 复选框组提供给各项的 */\ninterface CheckboxGroupState {\n  readonly value: readonly ChoiceValue[];\n  readonly max: number | undefined;\n  readonly disabled: boolean;\n  readonly shape: keyof ChoiceShapes | undefined;\n  toggle(name: ChoiceValue): void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState>('CheckboxGroup');\n\n/** 角色与状态由组件管理 */\nexport type ChoiceManaged = 'role' | 'aria-checked' | 'type' | 'disabled' | 'name';\n\n/** 未声明的属性落到按钮上 */\nexport interface CheckboxProps extends Omit<PartProps<'button', ChoiceManaged>, 'onChange'> {\n  /** 是否选中（单独用时）；双向绑定写 `_checked={x}` */\n  _checked?: boolean;\n  /** 在组里时：这一项的值 */\n  name?: ChoiceValue;\n  /** 半选：全选框在部分选中时 */\n  indeterminate?: boolean;\n  /** 形状；不给时随组，默认圆 */\n  shape?: keyof ChoiceShapes;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 单独用时切换了 */\n  onChange?: (checked: boolean) => void;\n  /** 文字 */\n  children?: VNodeChild;\n  /** 框的部件属性 */\n  propsBox?: PartProps<'span'>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n}\n\n/** 复选框（button[role=checkbox] > 框 + 文字） */\nexport const Checkbox = _component(\n  ({\n    _checked: checked = _bindable(false),\n    name,\n    indeterminate = false,\n    shape,\n    disabled,\n    onChange,\n    children,\n    propsBox,\n    propsLabel,\n    ...rest\n  }: CheckboxProps) => {\n    const form = useForm();\n    const group = CheckboxGroupContext.inject(null);\n    return () => {\n      const inGroup = group !== null && name !== undefined;\n      const selected = inGroup ? group.value.includes(name) : checked;\n      // 选满了：没选中的项不能再选\n      const full =\n        inGroup && !selected && group.max !== undefined && group.value.length >= group.max;\n      const off = disabled ?? (group?.disabled || form?.disabled || full || false);\n      return renderChoice(\n        {\n          role: 'checkbox',\n          checked: selected,\n          indeterminate,\n          disabled: off,\n          shape: shape ?? group?.shape ?? 'round',\n          onToggle: () => {\n            if (form?.readonly) return;\n            if (inGroup) return group.toggle(name);\n            checked = !checked;\n            onChange?.(checked);\n          },\n        },\n        rest,\n        children,\n        { propsBox, propsLabel },\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到组的 div 上 */\nexport interface CheckboxGroupProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {\n  /** 选中的值；双向绑定写 `_value={x}` */\n  _value?: ChoiceValue[];\n  /**\n   * 排列\n   * @default 'vertical'\n   */\n  direction?: keyof ChoiceDirections;\n  /** 最多选几个 */\n  max?: number;\n  /** 全部禁用 */\n  disabled?: boolean;\n  /** 各项的形状 */\n  shape?: keyof ChoiceShapes;\n  /** 选中的变了 */\n  onChange?: (value: ChoiceValue[]) => void;\n  /** 各个 Checkbox */\n  children?: VNodeChild;\n}\n\n/** 复选框组（div[role=group]） */\nexport const CheckboxGroup = _component(\n  ({\n    _value: value = _bindable<ChoiceValue[]>([]),\n    direction = 'vertical',\n    max,\n    disabled = false,\n    shape,\n    onChange,\n    children,\n    ...rest\n  }: CheckboxGroupProps) => {\n    CheckboxGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get max() {\n        return max;\n      },\n      get disabled() {\n        return disabled;\n      },\n      get shape() {\n        return shape;\n      },\n      toggle(name) {\n        value = value.includes(name) ? value.filter((item) => item !== name) : [...value, name];\n        onChange?.(value);\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [choiceStyles.group, direction === 'horizontal' && choiceStyles.horizontal] },\n          rest,\n          { role: 'group' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA6BA,IAAM,uBAAuB,cAAkC,eAAe;;;;AA4B9E,IAAa,WAAW,0BACtB,QAAA,SAWqB;CAAA,MAAA,UAAAA,SAAA,QAAA,kBAVW,OAAK,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAEnB,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,WAAAD,aAAA,QAAA,UAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAOlB,OAAIE,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,qBAAqB,OAAO,IAAI;CAC9C,aAAa;EACX,MAAM,UAAU,UAAU,QAAQ,KAAA,UAAS,KAAA;EAC3C,MAAM,WAAW,UAAU,MAAM,MAAM,SAAQ,KAAA,KAAK,IAAC,QAAA;EAErD,MAAM,OACJ,WAAW,CAAC,YAAY,MAAM,QAAQ,KAAA,KAAa,MAAM,MAAM,UAAU,MAAM;EACjF,MAAM,MAAM,SAAA,UAAa,OAAO,YAAY,MAAM,YAAY,QAAQ;EACtE,OAAO,aACL;GACE,MAAM;GACN,SAAS;GACT,eAAa,cAAA;GACb,UAAU;GACV,OAAO,MAAA,SAAS,OAAO,SAAS;GAChC,gBAAgB;IACd,IAAI,MAAM,UAAU;IACpB,IAAI,SAAS,OAAO,MAAM,OAAM,KAAA,KAAK;IACrC,QAAA,QAAU,CAAA,QAAA;IACV,SAAA,QAAA,QAAA,KAAkB;GACpB;EACF,GACA,MAAI,SAAA,OAEJ;GAAE,UAAQ,SAAA;GAAE,YAAU,WAAA;EAAC,CACzB;CACF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAwBA,IAAa,gBAAgB,0BAC3B,SAAA,UAS0B;CAAA,MAAA,QAAAH,SAAA,SAAA,gBARiB,CAAA,GAAE,MAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,SAAA,aAC/B,UAAU;CAAA,MAAA,MAAAA,aAAA,SAAA,KAAA;CAAA,MAAA,WAAAA,aAAA,SAAA,YAEX,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,qBAAqB,QAAQ;EAC3B,IAAI,QAAQ;GACV,OAAA,MAAA;EACF;EACA,IAAI,MAAM;GACR,OAAA,IAAA;EACF;EACA,IAAI,WAAW;GACb,OAAA,SAAA;EACF;EACA,IAAI,QAAQ;GACV,OAAA,MAAA;EACF;EACA,OAAO,MAAM;GACX,MAAA,QAAQ,MAAA,MAAM,SAAS,IAAI,IAAI,MAAA,MAAM,QAAQ,SAAS,SAAS,IAAI,IAAI,CAAC,GAAA,MAAA,OAAU,IAAI;GACtF,SAAA,QAAA,MAAA,KAAgB;EAClB;CACF,CAAC;CACD,aAAOC,YAAA,OAEC,WACF,EAAE,IAAI,CAAC,aAAa,OAAO,UAAA,UAAc,gBAAgB,aAAa,UAAU,EAAE,GAClF,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/Field.d.ts

@@ -0,0 +1,91 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import { type FormRule } from './context';
+import { type FormItemLayout } from './FormItem';
+/** 输入的类型 */
+export interface FieldTypes {
+    /** 文字（默认） */
+    text: unknown;
+    /** 密码：输入的字遮住 */
+    password: unknown;
+    /** 数字，可带小数：数字键盘 */
+    number: unknown;
+    /** 整数：纯数字键盘 */
+    digit: unknown;
+    /** 电话号码：拨号键盘 */
+    tel: unknown;
+    /** 昵称：微信小程序里键盘上方给出微信昵称（type="nickname"），其余同文字 */
+    nickname: unknown;
+}
+/** 输入框的属性与事件由组件管理 */
+export type FieldInputManaged = 'value' | 'type' | 'disabled' | 'readonly' | 'maxlength' | 'placeholder';
+/** 未声明的属性落到根元素（div）上 */
+export interface FieldProps extends FormItemLayout, PartProps<'div', 'title' | 'prefix'> {
+    /** 输入的内容；双向绑定写 `_value={x}` */
+    _value?: string;
+    /** 占位文字 */
+    placeholder?: string;
+    /**
+     * 类型
+     * @default 'text'
+     */
+    type?: keyof FieldTypes;
+    /** 多行输入 */
+    multiline?: boolean;
+    /**
+     * 多行输入的行数（autosize 时是最少的行数）
+     * @default 2
+     */
+    rows?: number;
+    /** 多行输入的高度随内容变 */
+    autosize?: boolean;
+    /** 最多输入多少个字 */
+    maxlength?: number;
+    /** 在下面显示字数（要有 maxlength） */
+    showWordLimit?: boolean;
+    /** 有内容时显示清除按钮 */
+    clearable?: boolean;
+    /** 禁用；在 Form 里时随 Form */
+    disabled?: boolean;
+    /** 只读；在 Form 里时随 Form */
+    readonly?: boolean;
+    /** 输入框里文字的对齐；不给时随 Form */
+    inputAlign?: 'left' | 'right';
+    /** 输入框前的图标 */
+    icon?: IconData;
+    /** 输入框前的内容（区号、单位） */
+    prefix?: VNodeChild;
+    /** 输入框后的内容（按钮、单位） */
+    suffix?: VNodeChild;
+    /** 字段名：在 Form 里时提交的值以它为键 */
+    name?: string;
+    /** 校验规则 */
+    rules?: FormRule[];
+    /** 获得焦点 */
+    onFocus?: (event: Event) => void;
+    /** 失去焦点 */
+    onBlur?: (event: Event) => void;
+    /** 点了清除按钮 */
+    onClear?: () => void;
+    /** 输入框（input / textarea）的部件属性 */
+    propsInput?: PartProps<'input', FieldInputManaged>;
+    /** 清除按钮的部件属性 */
+    propsClear?: PartProps<'button'>;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** Field 的样式：input、right、textarea、multiline、icon、affix、clear、count */
+export declare const fieldStyles: Readonly<{
+    affix: css.CompiledStyles;
+    clear: css.CompiledStyles;
+    count: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    input: css.CompiledStyles;
+    multiline: css.CompiledStyles;
+    right: css.CompiledStyles;
+    textarea: css.CompiledStyles;
+}>;
+/** 输入框（div > 标题 + 输入框 + 消息） */
+export declare const Field: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FieldProps>;

package/dist/form/Field.js

@@ -0,0 +1,296 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { isMiniProgram, useHost } from "../utils/host.js";
+import { useFormItem } from "./context.js";
+import { renderFormItem } from "./FormItem.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, nextTick, ref, watch } from "vue";
+import { CircleX } from "@lucide/icons";
+//#region src/form/Field.tsx
+/**
+* 输入框：表单里的一行，左边标题，右边输入框（或多行输入），可清除、显示字数、带前后缀；在 Form 里时参与校验与提交。
+*
+*   <Field label="收货人" _value={name} placeholder="请输入姓名" clearable />
+*   <Field label="手机号" _value={phone} type="tel" maxlength={11} rules={[{ required: true }]} name="phone" />
+*   <Field label="备注" _value={note} multiline autosize maxlength={200} showWordLimit />
+*   <Field label="短信验证码" _value={code} suffix={<Button size="sm">发送</Button>} />
+*
+* 数字用 type="number"（可带小数）或 "digit"（整数）：H5 是文本框加 inputmode（不出现上下箭头），小程序是对应的键盘。
+* 拼音输入法组字的过程中不更新值，组完一次写回。
+*/
+/** 输入的类型 */
+/** 输入框的属性与事件由组件管理 */
+/** 未声明的属性落到根元素（div）上 */
+/** Field 的样式：input、right、textarea、multiline、icon、affix、clear、count */
+var fieldStyles = css.create({
+	input: {
+		boxSizing: "border-box",
+		flex: "1 1 auto",
+		minWidth: 0,
+		width: "100%",
+		height: "1.5em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_text",
+			"[disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "inherit",
+		outlineStyle: "none"
+	},
+	right: { textAlign: "end" },
+	textarea: {
+		height: "auto",
+		resize: "none",
+		overflowY: "auto"
+	},
+	multiline: {
+		display: "flex",
+		flexDirection: "column",
+		flex: "1 1 auto",
+		minWidth: 0
+	},
+	icon: {
+		flex: "none",
+		fontSize: "1.15em",
+		color: "_textMuted"
+	},
+	affix: {
+		flex: "none",
+		display: "inline-flex",
+		alignItems: "center",
+		color: "_textMuted"
+	},
+	clear: {
+		flex: "none",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "1.5em",
+		height: "1.5em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_textPlaceholder",
+			":active": "_textMuted"
+		},
+		fontSize: "1.05em",
+		cursor: "pointer"
+	},
+	count: {
+		alignSelf: "flex-end",
+		marginBlockStart: "0.25em",
+		fontSize: "_xs",
+		color: "_textMuted"
+	}
+});
+/** H5 的输入框属性：数字用文本框加 inputmode（type=number 有上下箭头、会吞掉非数字） */
+var INPUT_ATTRS = {
+	text: { type: "text" },
+	password: { type: "password" },
+	number: {
+		type: "text",
+		inputmode: "decimal"
+	},
+	digit: {
+		type: "text",
+		inputmode: "numeric"
+	},
+	tel: { type: "tel" },
+	nickname: {
+		type: "text",
+		autocomplete: "nickname"
+	}
+};
+/** 输入框（div > 标题 + 输入框 + 消息） */
+var Field = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => "", _ctx.emit);
+	const placeholder = readonlyProp(_props, "placeholder");
+	const type = readonlyProp(_props, "type", "text");
+	const multiline = readonlyProp(_props, "multiline", false);
+	const rows = readonlyProp(_props, "rows", 2);
+	const autosize = readonlyProp(_props, "autosize", false);
+	const maxlength = readonlyProp(_props, "maxlength");
+	const showWordLimit = readonlyProp(_props, "showWordLimit", false);
+	const clearable = readonlyProp(_props, "clearable", false);
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const inputAlign = readonlyProp(_props, "inputAlign");
+	const icon = readonlyProp(_props, "icon");
+	const prefix = readonlyProp(_props, "prefix");
+	const suffix = readonlyProp(_props, "suffix");
+	const name = readonlyProp(_props, "name");
+	const rules = readonlyProp(_props, "rules");
+	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 onFocus = readonlyProp(_props, "onFocus");
+	const onBlur = readonlyProp(_props, "onBlur");
+	const onClear = readonlyProp(_props, "onClear");
+	const propsInput = readonlyProp(_props, "propsInput");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsMessage = readonlyProp(_props, "propsMessage");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const host = useHost();
+	let element = null;
+	let input = null;
+	let focused = ref(false);
+	let composing = false;
+	const item = useFormItem({
+		name: () => name.value,
+		rules: () => rules.value,
+		value: () => value.value,
+		label: () => label.value,
+		element: () => element
+	});
+	const isDisabled = () => disabled.value ?? item.form?.disabled ?? false;
+	const isReadonly = () => readonly.value ?? item.form?.readonly ?? false;
+	const resize = () => {
+		if (!autosize.value || isMiniProgram(host) || !input) return;
+		input.style.height = "auto";
+		input.style.height = `${input.scrollHeight}px`;
+	};
+	watch(() => value.value, () => void nextTick(resize));
+	const update = (next) => {
+		value.value = maxlength.value !== void 0 ? next.slice(0, maxlength.value) : next;
+		if (input && input.value !== value.value) input.value = value.value;
+	};
+	const clear = () => {
+		value.value = "";
+		onClear.value?.();
+		input?.focus();
+	};
+	return () => {
+		const off = isDisabled();
+		const showClear = clearable.value && !off && !isReadonly() && value.value !== "" && focused.value;
+		const align = inputAlign.value ?? item.form?.inputAlign;
+		const attrs = mergeAttrs({
+			sx: [
+				fieldStyles.input,
+				multiline.value && fieldStyles.textarea,
+				align === "right" && fieldStyles.right
+			],
+			style: multiline.value ? { [autosize.value ? "minHeight" : "height"]: `${rows.value * 1.5}em` } : void 0
+		}, propsInput.value, {
+			value: value.value,
+			placeholder: placeholder.value,
+			disabled: off,
+			readonly: isReadonly(),
+			maxlength: maxlength.value,
+			...multiline.value ? {} : INPUT_ATTRS[type.value],
+			onInput: (event) => {
+				if (!composing) update(event.target.value);
+			},
+			onCompositionstart: () => composing = true,
+			onCompositionend: (event) => {
+				composing = false;
+				update(event.target.value);
+			},
+			onFocus: (event) => {
+				focused.value = true;
+				onFocus.value?.(event);
+			},
+			onBlur: (event) => {
+				setTimeout(() => focused.value = false, 150);
+				onBlur.value?.(event);
+				item.validate("blur");
+			},
+			onKeydown: (event) => {
+				if (event.key === "Enter" && !multiline.value && item.form) item.form.submit();
+			},
+			...dataAttrs({ "data-autosize": multiline.value && autosize.value })
+		});
+		const ref = (node) => input = node;
+		const box = multiline.value ? createVNode("textarea", mergeJsxProps(attrs, {
+			"rows": rows.value,
+			"ref": ref
+		}), null) : createVNode("input", mergeJsxProps(attrs, { "ref": ref }), null);
+		const control = [
+			icon.value && createVNode(Icon, mergePartProps({
+				icon: icon.value,
+				sx: fieldStyles.icon
+			}, propsIcon.value), null),
+			hasContent(prefix.value) && createVNode("span", mergeAttrs({ sx: fieldStyles.affix }), [prefix.value]),
+			multiline.value ? createVNode("div", mergeAttrs({ sx: fieldStyles.multiline }), [box, showWordLimit.value && maxlength.value !== void 0 && createVNode("span", mergeAttrs({ sx: fieldStyles.count }), [config.lang.wordLimit(value.value.length, maxlength.value)])]) : box,
+			showClear && createVNode("button", mergeAttrs({ sx: fieldStyles.clear }, propsClear.value, {
+				type: "button",
+				"aria-label": config.lang.clear,
+				onMousedown: (event) => event.preventDefault(),
+				onClick: clear
+			}), [createVNode(Icon, { "icon": CircleX }, null)]),
+			hasContent(suffix.value) && createVNode("span", mergeAttrs({ sx: fieldStyles.affix }), [suffix.value]),
+			!multiline.value && showWordLimit.value && maxlength.value !== void 0 && createVNode("span", mergeAttrs({ sx: fieldStyles.affix }), [config.lang.wordLimit(value.value.length, maxlength.value)])
+		];
+		return renderFormItem({
+			label: label.value,
+			required: required.value ?? item.required,
+			help: help.value,
+			error: error.value ?? item.error,
+			labelPosition: labelPosition.value ?? item.form?.labelPosition,
+			labelWidth: labelWidth.value ?? item.form?.labelWidth,
+			center: center.value,
+			disabled: off,
+			propsLabel: propsLabel.value,
+			propsBody: propsBody.value,
+			propsMessage: propsMessage.value
+		}, rest, control, (node) => element = node);
+	};
+}, {
+	name: "Field",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"placeholder",
+		"type",
+		"multiline",
+		"rows",
+		"autosize",
+		"maxlength",
+		"showWordLimit",
+		"clearable",
+		"disabled",
+		"readonly",
+		"inputAlign",
+		"icon",
+		"prefix",
+		"suffix",
+		"name",
+		"rules",
+		"label",
+		"required",
+		"help",
+		"error",
+		"labelPosition",
+		"labelWidth",
+		"center",
+		"onFocus",
+		"onBlur",
+		"onClear",
+		"propsInput",
+		"propsClear",
+		"propsIcon",
+		"propsLabel",
+		"propsBody",
+		"propsMessage"
+	]
+});
+//#endregion
+export { Field, fieldStyles };
+
+//# sourceMappingURL=Field.js.map

package/dist/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/form/Field.tsx"],"sourcesContent":["/**\n * 输入框：表单里的一行，左边标题，右边输入框（或多行输入），可清除、显示字数、带前后缀；在 Form 里时参与校验与提交。\n *\n *   <Field label=\"收货人\" _value={name} placeholder=\"请输入姓名\" clearable />\n *   <Field label=\"手机号\" _value={phone} type=\"tel\" maxlength={11} rules={[{ required: true }]} name=\"phone\" />\n *   <Field label=\"备注\" _value={note} multiline autosize maxlength={200} showWordLimit />\n *   <Field label=\"短信验证码\" _value={code} suffix={<Button size=\"sm\">发送</Button>} />\n *\n * 数字用 type=\"number\"（可带小数）或 \"digit\"（整数）：H5 是文本框加 inputmode（不出现上下箭头），小程序是对应的键盘。\n * 拼音输入法组字的过程中不更新值，组完一次写回。\n */\nimport { CircleX } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { isMiniProgram, useHost } from '../utils/host';\nimport { dataAttrs, hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { useFormItem, type FormRule } from './context';\nimport { renderFormItem, type FormItemLayout } from './FormItem';\n\n/** 输入的类型 */\nexport interface FieldTypes {\n  /** 文字（默认） */\n  text: unknown;\n  /** 密码：输入的字遮住 */\n  password: unknown;\n  /** 数字，可带小数：数字键盘 */\n  number: unknown;\n  /** 整数：纯数字键盘 */\n  digit: unknown;\n  /** 电话号码：拨号键盘 */\n  tel: unknown;\n  /** 昵称：微信小程序里键盘上方给出微信昵称（type=\"nickname\"），其余同文字 */\n  nickname: unknown;\n}\n\n/** 输入框的属性与事件由组件管理 */\nexport type FieldInputManaged =\n  'value' | 'type' | 'disabled' | 'readonly' | 'maxlength' | 'placeholder';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface FieldProps extends FormItemLayout, PartProps<'div', 'title' | 'prefix'> {\n  /** 输入的内容；双向绑定写 `_value={x}` */\n  _value?: string;\n  /** 占位文字 */\n  placeholder?: string;\n  /**\n   * 类型\n   * @default 'text'\n   */\n  type?: keyof FieldTypes;\n  /** 多行输入 */\n  multiline?: boolean;\n  /**\n   * 多行输入的行数（autosize 时是最少的行数）\n   * @default 2\n   */\n  rows?: number;\n  /** 多行输入的高度随内容变 */\n  autosize?: boolean;\n  /** 最多输入多少个字 */\n  maxlength?: number;\n  /** 在下面显示字数（要有 maxlength） */\n  showWordLimit?: boolean;\n  /** 有内容时显示清除按钮 */\n  clearable?: boolean;\n  /** 禁用；在 Form 里时随 Form */\n  disabled?: boolean;\n  /** 只读；在 Form 里时随 Form */\n  readonly?: boolean;\n  /** 输入框里文字的对齐；不给时随 Form */\n  inputAlign?: 'left' | 'right';\n  /** 输入框前的图标 */\n  icon?: IconData;\n  /** 输入框前的内容（区号、单位） */\n  prefix?: VNodeChild;\n  /** 输入框后的内容（按钮、单位） */\n  suffix?: VNodeChild;\n  /** 字段名：在 Form 里时提交的值以它为键 */\n  name?: string;\n  /** 校验规则 */\n  rules?: FormRule[];\n  /** 获得焦点 */\n  onFocus?: (event: Event) => void;\n  /** 失去焦点 */\n  onBlur?: (event: Event) => void;\n  /** 点了清除按钮 */\n  onClear?: () => void;\n  /** 输入框（input / textarea）的部件属性 */\n  propsInput?: PartProps<'input', FieldInputManaged>;\n  /** 清除按钮的部件属性 */\n  propsClear?: PartProps<'button'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** Field 的样式：input、right、textarea、multiline、icon、affix、clear、count */\nexport const fieldStyles = css.create({\n  input: {\n    boxSizing: 'border-box',\n    flex: '1 1 auto',\n    minWidth: 0,\n    width: '100%',\n    height: '1.5em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_text', '[disabled]': '_textDisabled' },\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'inherit',\n    outlineStyle: 'none',\n  },\n  right: { textAlign: 'end' },\n  textarea: { height: 'auto', resize: 'none', overflowY: 'auto' },\n  multiline: { display: 'flex', flexDirection: 'column', flex: '1 1 auto', minWidth: 0 },\n  icon: { flex: 'none', fontSize: '1.15em', color: '_textMuted' },\n  affix: { flex: 'none', display: 'inline-flex', alignItems: 'center', color: '_textMuted' },\n  clear: {\n    flex: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '1.5em',\n    height: '1.5em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_textPlaceholder', ':active': '_textMuted' },\n    fontSize: '1.05em',\n    cursor: 'pointer',\n  },\n  count: {\n    alignSelf: 'flex-end',\n    marginBlockStart: '0.25em',\n    fontSize: '_xs',\n    color: '_textMuted',\n  },\n});\n\n/** H5 的输入框属性：数字用文本框加 inputmode（type=number 有上下箭头、会吞掉非数字） */\nconst INPUT_ATTRS = {\n  text: { type: 'text' },\n  password: { type: 'password' },\n  number: { type: 'text', inputmode: 'decimal' },\n  digit: { type: 'text', inputmode: 'numeric' },\n  tel: { type: 'tel' },\n  // autocomplete 的 nickname 是标准的自动填充值；小程序运行时按它换成昵称输入框\n  nickname: { type: 'text', autocomplete: 'nickname' },\n} as const;\n\n/** 输入框（div > 标题 + 输入框 + 消息） */\nexport const Field = _component(\n  ({\n    _value: value = _bindable(''),\n    placeholder,\n    type = 'text',\n    multiline = false,\n    rows = 2,\n    autosize = false,\n    maxlength,\n    showWordLimit = false,\n    clearable = false,\n    disabled,\n    readonly,\n    inputAlign,\n    icon,\n    prefix,\n    suffix,\n    name,\n    rules,\n    label,\n    required,\n    help,\n    error,\n    labelPosition,\n    labelWidth,\n    center = false,\n    onFocus,\n    onBlur,\n    onClear,\n    propsInput,\n    propsClear,\n    propsIcon,\n    propsLabel,\n    propsBody,\n    propsMessage,\n    ...rest\n  }: FieldProps) => {\n    const config = useConfig();\n    const host = useHost();\n    let element: unknown = null;\n    let input: (HTMLInputElement & HTMLTextAreaElement) | null = null;\n    let focused = _state(false);\n    // 拼音输入法组字中：不写回值\n    let composing = false;\n    const item = useFormItem({\n      name: () => name,\n      rules: () => rules,\n      value: () => value,\n      label: () => label,\n      element: () => element,\n    });\n    const isDisabled = () => disabled ?? item.form?.disabled ?? false;\n    const isReadonly = () => readonly ?? item.form?.readonly ?? false;\n\n    // H5 的多行自动高度：按内容的 scrollHeight 撑开（小程序的 textarea 有 auto-height）\n    const resize = () => {\n      if (!autosize || isMiniProgram(host) || !input) return;\n      input.style.height = 'auto';\n      input.style.height = `${input.scrollHeight}px`;\n    };\n    watch(\n      () => value,\n      () => void nextTick(resize),\n    );\n\n    const update = (next: string) => {\n      // 按 UTF-16 的长度截，同浏览器的 maxlength\n      value = maxlength !== undefined ? next.slice(0, maxlength) : next;\n      // 截掉超出的部分后输入框里还是用户敲的：同步回去\n      if (input && input.value !== value) input.value = value;\n    };\n    const clear = () => {\n      value = '';\n      onClear?.();\n      input?.focus();\n    };\n\n    return () => {\n      const off = isDisabled();\n      const showClear = clearable && !off && !isReadonly() && value !== '' && focused;\n      const align = inputAlign ?? item.form?.inputAlign;\n      const attrs = mergeAttrs<'input'>(\n        {\n          sx: [\n            fieldStyles.input,\n            multiline && fieldStyles.textarea,\n            align === 'right' && fieldStyles.right,\n          ],\n          // 多行的高度：autosize 时是最小高度（小程序 auto-height 时 height 不起作用）\n          style: multiline ? { [autosize ? 'minHeight' : 'height']: `${rows * 1.5}em` } : undefined,\n        },\n        propsInput,\n        {\n          value,\n          placeholder,\n          disabled: off,\n          readonly: isReadonly(),\n          maxlength,\n          ...(multiline ? {} : INPUT_ATTRS[type]),\n          onInput: (event: Event) => {\n            if (!composing) update((event.target as HTMLInputElement).value);\n          },\n          onCompositionstart: () => (composing = true),\n          onCompositionend: (event: Event) => {\n            composing = false;\n            update((event.target as HTMLInputElement).value);\n          },\n          onFocus: (event: Event) => {\n            focused = true;\n            onFocus?.(event);\n          },\n          onBlur: (event: Event) => {\n            // 晚一点藏清除按钮：小程序里点它时输入框先失焦，立刻藏掉就点不到了\n            setTimeout(() => (focused = false), 150);\n            onBlur?.(event);\n            void item.validate('blur');\n          },\n          onKeydown: (event: KeyboardEvent) => {\n            // 单行输入框里按确认键（回车）：在表单里就提交\n            if (event.key === 'Enter' && !multiline && item.form) item.form.submit();\n          },\n          ...dataAttrs({ 'data-autosize': multiline && autosize }),\n        },\n      );\n      const ref = (node: unknown) => (input = node as typeof input);\n      const box = multiline ? (\n        // 输入框与多行输入的属性相同，类型上按 textarea 收\n        <textarea {...(attrs as PartProps<'textarea'>)} rows={rows} ref={ref} />\n      ) : (\n        <input {...attrs} ref={ref} />\n      );\n      const control = [\n        icon && <Icon {...mergePartProps<IconProps>({ icon, sx: fieldStyles.icon }, propsIcon)} />,\n        hasContent(prefix) && (\n          <span {...mergeAttrs<'span'>({ sx: fieldStyles.affix })}>{prefix}</span>\n        ),\n        multiline ? (\n          <div {...mergeAttrs<'div'>({ sx: fieldStyles.multiline })}>\n            {box}\n            {showWordLimit && maxlength !== undefined && (\n              <span {...mergeAttrs<'span'>({ sx: fieldStyles.count })}>\n                {config.lang.wordLimit(value.length, maxlength)}\n              </span>\n            )}\n          </div>\n        ) : (\n          box\n        ),\n        showClear && (\n          <button\n            {...mergeAttrs<'button'>({ sx: fieldStyles.clear }, propsClear, {\n              type: 'button',\n              'aria-label': config.lang.clear,\n              // H5：按下时不让输入框失焦，键盘不收起\n              onMousedown: (event: Event) => event.preventDefault(),\n              onClick: clear,\n            })}\n          >\n            <Icon icon={CircleX} />\n          </button>\n        ),\n        hasContent(suffix) && (\n          <span {...mergeAttrs<'span'>({ sx: fieldStyles.affix })}>{suffix}</span>\n        ),\n        !multiline && showWordLimit && maxlength !== undefined && (\n          <span {...mergeAttrs<'span'>({ sx: fieldStyles.affix })}>\n            {config.lang.wordLimit(value.length, maxlength)}\n          </span>\n        ),\n      ];\n      return renderFormItem(\n        {\n          label,\n          required: required ?? item.required,\n          help,\n          error: error ?? item.error,\n          labelPosition: labelPosition ?? item.form?.labelPosition,\n          labelWidth: labelWidth ?? item.form?.labelWidth,\n          center,\n          disabled: off,\n          propsLabel,\n          propsBody,\n          propsMessage,\n        },\n        rest,\n        control,\n        (node) => (element = node),\n      );\n    };\n  },\n);\n"],"mappings":"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"}