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

package/dist/input/Mentions.js

@@ -0,0 +1,287 @@
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { isComposingKey } from "../utils/dom/hotkeys.js";
+import { handleListKeydown, toListboxOption, useListState, useResultAnnouncement } from "./list-state.js";
+import { Textarea } from "./Textarea.js";
+import { activeOptionId } from "./Listbox.js";
+import { ListPopover } from "./ListPopover.js";
+import { useRemoteItems } from "./remote-items.js";
+import { caretAnchor } from "../utils/dom/caret.js";
+import { Fragment, createVNode, mergeProps, nextTick, ref, shallowRef, useId, watch } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/Mentions.tsx
+/** 提及的弹出列表由组件管理 */
+/** Mentions 除 toOption 外的属性；未声明的属性落到 textarea 上（同 Textarea） */
+/** 提及输入框的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+/** 拆开的一段文字：普通文字，或提及（带它的选项） */
+/** @ 前面是这些字符时不算提及（邮箱 name@example.com） */
+var WORD_BEFORE = /[A-Za-z0-9_.]/;
+/**
+* 把文字拆成普通文字与提及：“@名字”里的名字是 options 里某一项的显示文字（有多个能匹配时取最长的）。
+* 提及的显示（MentionText）与找出提到了谁（mentionedValues）都用它
+*/
+function mentionSegments(text, options, prefix = "@") {
+	const byLength = options.filter((option) => option.label).toSorted((a, b) => b.label.length - a.label.length);
+	const segments = [];
+	let plain = "";
+	let index = 0;
+	while (index < text.length) {
+		const mention = text.startsWith(prefix, index) && !WORD_BEFORE.test(text[index - 1] ?? "") ? byLength.find((option) => text.startsWith(option.label, index + prefix.length)) : void 0;
+		if (!mention) {
+			plain += text[index];
+			index += 1;
+			continue;
+		}
+		if (plain) segments.push({ text: plain });
+		plain = "";
+		const length = prefix.length + mention.label.length;
+		segments.push({
+			text: text.slice(index, index + length),
+			mention
+		});
+		index += length;
+	}
+	if (plain) segments.push({ text: plain });
+	return segments;
+}
+/** 文字里提到了哪些选项（值，按第一次出现的顺序，不重复） */
+function mentionedValues(text, options, prefix = "@") {
+	const values = mentionSegments(text, options, prefix).flatMap((segment) => segment.mention ? [segment.mention.value] : []);
+	return [...new Set(values)];
+}
+/** MentionText 与 Mentions 的样式：mention、text、panel */
+var mentionStyles = css.create({
+	mention: {
+		color: "_accentText",
+		backgroundColor: "_accentSoft",
+		borderRadius: "_sm",
+		paddingInline: "0.125em",
+		fontWeight: "_medium"
+	},
+	text: {
+		whiteSpace: "pre-wrap",
+		overflowWrap: "anywhere"
+	},
+	panel: { width: "16em" }
+});
+/** 未声明的属性落到 span 上 */
+/** 带提及的文字：“@名字”高亮，换行照常（pre-wrap） */
+var MentionText = /*#__PURE__*/ _component((_props, _ctx) => {
+	const text = readonlyProp(_props, "text");
+	const options = readonlyProp(_props, "options");
+	const prefix = readonlyProp(_props, "prefix", "@");
+	const propsMention = readonlyProp(_props, "propsMention");
+	const renderMention = readonlyProp(_props, "renderMention");
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode("span", mergeAttrs({ sx: mentionStyles.text }, rest), [mentionSegments(text.value, options.value, prefix.value).map((segment) => {
+		if (!segment.mention) return segment.text;
+		if (renderMention.value) return renderMention.value(segment.mention, segment.text);
+		const own = typeof propsMention.value === "function" ? propsMention.value(segment.mention) : propsMention.value;
+		return createVNode("span", mergeAttrs({ sx: mentionStyles.mention }, own), [segment.text]);
+	})]);
+}, {
+	name: "MentionText",
+	props: [
+		"text",
+		"options",
+		"prefix",
+		"propsMention",
+		"renderMention"
+	]
+});
+/** 提及输入框：多行文本框 + 跟着 @ 弹出的人员列表 */
+var Mentions = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache = [];
+	const value = bindable(_props2, "_value", () => "", _ctx2.emit);
+	const mentions = bindable(_props2, "_mentions", () => [], _ctx2.emit);
+	const items = readonlyProp(_props2, "items", () => []);
+	const toOption = readonlyProp(_props2, "toOption");
+	const load = readonlyProp(_props2, "load");
+	const prefix = readonlyProp(_props2, "prefix", "@");
+	const filter = readonlyProp(_props2, "filter");
+	const open = bindable(_props2, "_open", () => false, _ctx2.emit);
+	const onOpenChange = readonlyProp(_props2, "onOpenChange");
+	const loading = readonlyProp(_props2, "loading", false);
+	const children = childrenProp(_props2);
+	const empty = readonlyProp(_props2, "empty");
+	const propsRoot = readonlyProp(_props2, "propsRoot");
+	const propsPopover = readonlyProp(_props2, "propsPopover");
+	const propsListbox = readonlyProp(_props2, "propsListbox");
+	const rest = restProps(_props2, _ctx2, false);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const listId = useId();
+	let shell = shallowRef(null);
+	let panel = shallowRef(null);
+	let trigger = ref(null);
+	let query = ref("");
+	let dismissed = null;
+	const known = /* @__PURE__ */ new Map();
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const optionOf = (item) => toListboxOption(item, toOption.value);
+	const textarea = () => shell.value?.querySelector("textarea") ?? null;
+	const remote = useRemoteItems({
+		load: () => load.value,
+		query: () => query.value,
+		open: () => open.value,
+		items: () => items.value
+	});
+	const list = useListState({
+		items: () => load.value || filter.value === false ? remote.items() : remote.items().filter((item) => !query.value ? true : filter.value ? filter.value(item, query.value) : textMatcher()(optionOf(item).label, query.value)),
+		toOption: optionOf,
+		selected: () => [],
+		mode: () => "single",
+		onChange: () => {}
+	});
+	useResultAnnouncement(() => ({
+		query: open.value ? query.value || prefix.value : "",
+		count: list.options.length
+	}));
+	watch(() => [value.value, remote.items()], ([text, current]) => {
+		for (const item of current) {
+			const option = optionOf(item);
+			known.set(option.value, option);
+		}
+		const next = mentionedValues(text, [...known.values()], prefix.value);
+		if (next.join("\n") !== mentions.value.join("\n")) mentions.value = next;
+	}, { immediate: true });
+	watch(() => list.options.length, () => {
+		if (open.value && list.active === void 0) list.move("first");
+	});
+	/** 看光标前面是不是正在写的提及：是就按 @ 后面的文字过滤并打开，不是就关闭 */
+	function detect(event) {
+		const element = textarea();
+		if (!element || rest.readonly || rest.disabled) return;
+		const caret = element.selectionStart;
+		const before = element.value.slice(0, caret);
+		const at = before.lastIndexOf(prefix.value);
+		const typed = at < 0 ? "" : before.slice(at + prefix.value.length);
+		const mentioning = at >= 0 && element.selectionEnd === caret && !WORD_BEFORE.test(before[at - 1] ?? "") && !/\s/.test(typed) && typed.length <= 30;
+		if (!mentioning || at === dismissed) {
+			if (!mentioning) dismissed = null;
+			trigger.value = null;
+			if (open.value) setOpen(false, "focus", event);
+			return;
+		}
+		const opening = trigger.value !== at || !open.value;
+		trigger.value = at;
+		query.value = typed;
+		if (opening) setOpen(true, "trigger", event);
+		list.move("first");
+	}
+	/** 选中一项：把“@过滤词”换成“@名字 ”，光标放在后面 */
+	function pick(choice, event) {
+		const element = textarea();
+		const option = list.options.find((entry) => entry.value === choice);
+		if (!element || trigger.value === null || !option) return;
+		known.set(option.value, option);
+		const inserted = `${prefix.value}${option.label} `;
+		const caret = element.selectionStart;
+		const start = trigger.value;
+		value.value = element.value.slice(0, start) + inserted + element.value.slice(caret);
+		trigger.value = null;
+		setOpen(false, "select", event);
+		nextTick(() => {
+			element.focus();
+			element.setSelectionRange(start + inserted.length, start + inserted.length);
+		});
+	}
+	function onKeydown(event) {
+		if (!open.value || isComposingKey(event)) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dismissed = trigger.value;
+			setOpen(false, "escape", event);
+			return;
+		}
+		if (event.key === "Tab" && list.active !== void 0) {
+			event.preventDefault();
+			pick(list.active, event);
+			return;
+		}
+		if (handleListKeydown(list, event, { homeEnd: false }, (choice) => pick(choice, event))) event.preventDefault();
+	}
+	function onKeyup(event) {
+		if (event.isComposing) return;
+		if (open.value && (event.key === "ArrowUp" || event.key === "ArrowDown")) return;
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(event.key) || !open.value) detect(event);
+	}
+	const { onToggle } = useAnchoredPopover(() => {
+		const element = textarea();
+		return {
+			open: open.value,
+			anchor: element && caretAnchor(element, () => trigger.value ?? element.selectionStart),
+			panel: panel.value,
+			floating: {
+				placement: "bottom-start",
+				fitHeight: true
+			},
+			restoreFocus: false
+		};
+	}, { close: (reason, event) => {
+		if (reason === "escape") dismissed = trigger.value;
+		setOpen(false, reason, event);
+	} });
+	return () => createVNode(Fragment, null, [createVNode(Textarea, mergeProps(mergePartProps({ propsRoot: mergePartProps({}, propsRoot.value, { ref: shell }) }, rest, {
+		"aria-autocomplete": "list",
+		"aria-controls": open.value ? listId : void 0,
+		"aria-activedescendant": open.value ? activeOptionId(list, listId) : void 0,
+		onInput: (event) => !event.isComposing && detect(event),
+		onCompositionend: (event) => detect(event),
+		onClick: (event) => detect(event),
+		onKeydown,
+		onKeyup,
+		onBlur: (event) => open.value && setOpen(false, "focus", event)
+	}), {
+		"_value": value.value,
+		"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => value.value = $event)
+	}), null), createVNode(ListPopover, {
+		"panelRef": panel,
+		"onToggle": onToggle,
+		"size": rest.size,
+		"label": lang.mentionsList,
+		"loading": loading.value || remote.loading(),
+		"onPick": _cache[1] || (_cache[1] = (choice) => pick(choice)),
+		"listbox": {
+			list,
+			id: listId,
+			renderOption: children.value,
+			empty: remote.error() ? lang.listLoadFailed : empty.value ?? lang.mentionsEmpty
+		},
+		"propsListbox": propsListbox.value,
+		"propsPopover": mergePartProps({ sx: mentionStyles.panel }, propsPopover.value)
+	}, null)]);
+}, {
+	name: "Mentions",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"_mentions",
+		"onUpdate:_mentions",
+		"items",
+		"toOption",
+		"load",
+		"prefix",
+		"filter",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"loading",
+		"empty",
+		"propsRoot",
+		"propsPopover",
+		"propsListbox"
+	]
+});
+//#endregion
+export { MentionText, Mentions, mentionSegments, mentionStyles, mentionedValues };
+
+//# sourceMappingURL=Mentions.js.map

package/dist/input/Mentions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mentions.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_bindable","_vtp_childrenProp","_vue_shallowRef","_vue_ref","_Fragment","_mergeProps"],"sources":["../../src/input/Mentions.tsx"],"sourcesContent":["/**\n * 提及：多行文本框里输入 @ 弹出人员（或岗位、群组）列表，选中后写成“@名字 ”。留言、审批意见、协商回复里通知相关的人。\n *\n *   <Field label=\"留言\"><Mentions _value={text} items={people} _mentions={notified} /></Field>\n *   <Mentions _value={text} load={(query, signal) => api.searchUsers(query, { signal })} toOption={…} />\n *\n * 值仍是文字；mentions 是文字里提到的选项的值（工号、岗位编号），随文字增删——删掉“@名字”就不再算提及。\n * 显示提及过的文字用 MentionText（提及高亮），拆分用 mentionSegments。\n *\n * - 弹出：@ 在开头或前面不是字母数字（邮箱里的 @ 不算），@ 与光标之间没有空白；列表贴在 @ 的位置（caretAnchor）。\n * - 过滤：本地按显示文字包含 @ 后面的文字；给 load 时按它远程搜索（同 Combobox）。\n * - 键盘：↑↓ 移动、Enter 或 Tab 选中、Esc 关闭（这个 @ 不再弹出，直到重新输入）；焦点一直在文本框里，\n *   高亮项经 aria-activedescendant 告诉读屏，结果数量播报。中文输入法组合期间不弹出、不过滤。\n *\n * 外壳与自动增高同 Textarea。部件：Root（外壳）、Textarea、Popover、Listbox。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, watch, type VNodeChild } from 'vue';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { caretAnchor } from '../utils/dom/caret';\nimport { useAnchoredPopover } from '../utils/dom/floating';\nimport { isComposingKey } from '../utils/dom/hotkeys';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport { ListPopover } from './ListPopover';\nimport {\n  handleListKeydown,\n  toListboxOption,\n  useListState,\n  useResultAnnouncement,\n  type ListboxOption,\n  type OptionMapping,\n} from './list-state';\nimport { useRemoteItems, type OptionsLoader } from './remote-items';\nimport { Textarea, type TextareaProps } from './Textarea';\n\n/** 提及的弹出列表由组件管理 */\nexport type MentionsManaged = 'aria-autocomplete' | 'aria-controls' | 'aria-activedescendant';\n\n/** Mentions 除 toOption 外的属性；未声明的属性落到 textarea 上（同 Textarea） */\nexport interface MentionsBaseProps<T>\n  extends Omit<TextareaProps, MentionsManaged>, OpenChangeProps {\n  /** 可以提及的人（ListboxOption、字符串，或任意数据加 toOption）；有 load 时是第一次结果之前的选项 */\n  items?: readonly T[];\n  /** 远程搜索：按 @ 后面的文字调用，停下 300 ms 后请求，只采用最后一次 */\n  load?: OptionsLoader<T>;\n  /** 文字里提到的选项的值：父级写 _mentions={x}，随文字更新 */\n  _mentions?: string[];\n  /** 触发的字符，默认 '@' */\n  prefix?: string;\n  /** 过滤：默认按显示文字包含 @ 后面的文字；false 不过滤（由调用方换 items） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 列表是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 正在取选项 */\n  loading?: boolean;\n  /** 自定义选项内容：`{(item, { active }) => …}`（头像、部门） */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 没有匹配的人时列表里显示的内容 */\n  empty?: VNodeChild;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 提及输入框的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type MentionsProps<T = ListboxOption> = MentionsBaseProps<T> & OptionMapping<T>;\n\n/** 拆开的一段文字：普通文字，或提及（带它的选项） */\nexport interface MentionSegment {\n  /** 这一段的文字（提及时含 @） */\n  text: string;\n  /** 提及的选项；普通文字没有 */\n  mention?: ListboxOption;\n}\n\n/** @ 前面是这些字符时不算提及（邮箱 name@example.com） */\nconst WORD_BEFORE = /[A-Za-z0-9_.]/;\n\n/**\n * 把文字拆成普通文字与提及：“@名字”里的名字是 options 里某一项的显示文字（有多个能匹配时取最长的）。\n * 提及的显示（MentionText）与找出提到了谁（mentionedValues）都用它\n */\nexport function mentionSegments(\n  text: string,\n  options: readonly ListboxOption[],\n  prefix = '@',\n): MentionSegment[] {\n  const byLength = options\n    .filter((option) => option.label)\n    .toSorted((a, b) => b.label.length - a.label.length);\n  const segments: MentionSegment[] = [];\n  let plain = '';\n  let index = 0;\n  while (index < text.length) {\n    const mention =\n      text.startsWith(prefix, index) && !WORD_BEFORE.test(text[index - 1] ?? '')\n        ? byLength.find((option) => text.startsWith(option.label, index + prefix.length))\n        : undefined;\n    if (!mention) {\n      plain += text[index];\n      index += 1;\n      continue;\n    }\n    if (plain) segments.push({ text: plain });\n    plain = '';\n    const length = prefix.length + mention.label.length;\n    segments.push({ text: text.slice(index, index + length), mention });\n    index += length;\n  }\n  if (plain) segments.push({ text: plain });\n  return segments;\n}\n\n/** 文字里提到了哪些选项（值，按第一次出现的顺序，不重复） */\nexport function mentionedValues(\n  text: string,\n  options: readonly ListboxOption[],\n  prefix = '@',\n): string[] {\n  const values = mentionSegments(text, options, prefix).flatMap((segment) =>\n    segment.mention ? [segment.mention.value] : [],\n  );\n  return [...new Set(values)];\n}\n\n/** MentionText 与 Mentions 的样式：mention、text、panel */\nexport const mentionStyles = css.create({\n  // 提及：强调色的文字，浅底\n  mention: {\n    color: '_accentText',\n    backgroundColor: '_accentSoft',\n    borderRadius: '_sm',\n    paddingInline: '0.125em',\n    fontWeight: '_medium',\n  },\n  text: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },\n  // 弹层贴着光标、不跟文本框同宽：给个合适的宽度\n  panel: { width: '16em' },\n});\n\n/** 未声明的属性落到 span 上 */\nexport interface MentionTextProps extends PartProps<'span'> {\n  /** 文字 */\n  text: string;\n  /** 能被提及的选项：“@显示文字”高亮 */\n  options: readonly ListboxOption[];\n  /** 触发的字符，默认 '@' */\n  prefix?: string;\n  /** 提及的部件属性，可以按选项计算（做成链接、悬停卡片时用 renderMention） */\n  propsMention?: PartProps<'span'> | ((mention: ListboxOption) => PartProps<'span'>);\n  /** 自己渲染一个提及（链接到个人页、HoverCard）；不写时是高亮的文字 */\n  renderMention?: (mention: ListboxOption, text: string) => VNodeChild;\n}\n\n/** 带提及的文字：“@名字”高亮，换行照常（pre-wrap） */\nexport const MentionText = _component(\n  ({ text, options, prefix = '@', propsMention, renderMention, ...rest }: MentionTextProps) =>\n    () => (\n      <span {...mergeAttrs<'span'>({ sx: mentionStyles.text }, rest)}>\n        {mentionSegments(text, options, prefix).map((segment) => {\n          if (!segment.mention) return segment.text;\n          if (renderMention) return renderMention(segment.mention, segment.text);\n          const own =\n            typeof propsMention === 'function' ? propsMention(segment.mention) : propsMention;\n          return (\n            <span {...mergeAttrs<'span'>({ sx: mentionStyles.mention }, own)}>{segment.text}</span>\n          );\n        })}\n      </span>\n    ),\n);\n\n/** 提及输入框：多行文本框 + 跟着 @ 弹出的人员列表 */\nexport const Mentions = _component(\n  <T,>({\n    _value: value = _bindable(''),\n    _mentions: mentions = _bindable<string[]>([]),\n    items = [],\n    toOption,\n    load,\n    prefix = '@',\n    filter,\n    _open: open = _bindable(false),\n    onOpenChange,\n    loading = false,\n    children,\n    empty,\n    propsRoot,\n    propsPopover,\n    propsListbox,\n    ...rest\n  }: MentionsProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const listId = useId();\n    let shell = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 正在提及：@ 在文字里的位置，与 @ 到光标之间的文字（过滤词）\n    let trigger = _state<number | null>(null);\n    let query = _state('');\n    // 按 Esc 关掉的那个 @：光标还在它后面时不再弹出\n    let dismissed: number | null = null;\n    // 见过的选项（远程搜索换掉 items 之后，已提及的人仍能认出来）\n    const known = new Map<string, ListboxOption>();\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n    const textarea = () => shell?.querySelector('textarea') ?? null;\n\n    const remote = useRemoteItems({\n      load: () => load,\n      query: () => query,\n      open: () => open,\n      items: () => items,\n    });\n    const list = useListState({\n      items: () =>\n        load || filter === false\n          ? remote.items()\n          : remote\n              .items()\n              .filter((item) =>\n                !query\n                  ? true\n                  : filter\n                    ? filter(item, query)\n                    : textMatcher()(optionOf(item).label, query),\n              ),\n      toOption: optionOf,\n      selected: () => [],\n      mode: () => 'single',\n      onChange: () => {},\n    });\n    useResultAnnouncement(() => ({\n      query: open ? query || prefix : '',\n      count: list.options.length,\n    }));\n\n    // 文字里提到的人：随文字与见过的选项更新\n    watch(\n      () => [value, remote.items()] as const,\n      ([text, current]) => {\n        for (const item of current) {\n          const option = optionOf(item);\n          known.set(option.value, option);\n        }\n        const next = mentionedValues(text, [...known.values()], prefix);\n        if (next.join('\\n') !== mentions.join('\\n')) mentions = next;\n      },\n      { immediate: true },\n    );\n\n    // 远程结果后到：打开着又没有高亮项时高亮第一项（Enter 才能直接选中）\n    watch(\n      () => list.options.length,\n      () => {\n        if (open && list.active === undefined) list.move('first');\n      },\n    );\n\n    /** 看光标前面是不是正在写的提及：是就按 @ 后面的文字过滤并打开，不是就关闭 */\n    function detect(event?: Event) {\n      const element = textarea();\n      if (!element || rest.readonly || rest.disabled) return;\n      const caret = element.selectionStart;\n      const before = element.value.slice(0, caret);\n      const at = before.lastIndexOf(prefix);\n      const typed = at < 0 ? '' : before.slice(at + prefix.length);\n      const mentioning =\n        at >= 0 &&\n        element.selectionEnd === caret &&\n        !WORD_BEFORE.test(before[at - 1] ?? '') &&\n        !/\\s/.test(typed) &&\n        typed.length <= 30;\n      if (!mentioning || at === dismissed) {\n        if (!mentioning) dismissed = null;\n        trigger = null;\n        if (open) setOpen(false, 'focus', event);\n        return;\n      }\n      const opening = trigger !== at || !open;\n      trigger = at;\n      query = typed;\n      if (opening) setOpen(true, 'trigger', event);\n      list.move('first');\n    }\n\n    /** 选中一项：把“@过滤词”换成“@名字 ”，光标放在后面 */\n    function pick(choice: string, event?: Event) {\n      const element = textarea();\n      const option = list.options.find((entry) => entry.value === choice);\n      if (!element || trigger === null || !option) return;\n      known.set(option.value, option);\n      const inserted = `${prefix}${option.label} `;\n      const caret = element.selectionStart;\n      const start = trigger;\n      value = element.value.slice(0, start) + inserted + element.value.slice(caret);\n      trigger = null;\n      setOpen(false, 'select', event);\n      void nextTick(() => {\n        element.focus();\n        element.setSelectionRange(start + inserted.length, start + inserted.length);\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (!open || isComposingKey(event)) return;\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        dismissed = trigger;\n        setOpen(false, 'escape', event);\n        return;\n      }\n      if (event.key === 'Tab' && list.active !== undefined) {\n        event.preventDefault();\n        pick(list.active, event);\n        return;\n      }\n      if (handleListKeydown(list, event, { homeEnd: false }, (choice) => pick(choice, event)))\n        event.preventDefault();\n    }\n\n    // 移动光标（方向键、Home / End）后重新判断；↑↓ 在列表打开时是移动高亮，不算\n    function onKeyup(event: KeyboardEvent) {\n      if (event.isComposing) return;\n      if (open && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) return;\n      if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key) || !open) detect(event);\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => {\n        const element = textarea();\n        return {\n          open,\n          anchor: element && caretAnchor(element, () => trigger ?? element.selectionStart),\n          panel,\n          floating: { placement: 'bottom-start', fitHeight: true },\n          restoreFocus: false,\n        };\n      },\n      {\n        close: (reason, event) => {\n          if (reason === 'escape') dismissed = trigger;\n          setOpen(false, reason, event);\n        },\n      },\n    );\n\n    return () => (\n      <>\n        <Textarea\n          {...mergePartProps<TextareaProps>(\n            { propsRoot: mergePartProps<PartProps<'div'>>({}, propsRoot, { ref: _toRef(shell) }) },\n            rest,\n            {\n              'aria-autocomplete': 'list',\n              'aria-controls': open ? listId : undefined,\n              'aria-activedescendant': open ? activeOptionId(list, listId) : undefined,\n              onInput: (event: Event) => !(event as InputEvent).isComposing && detect(event),\n              onCompositionend: (event: CompositionEvent) => detect(event),\n              onClick: (event: MouseEvent) => detect(event),\n              onKeydown,\n              onKeyup,\n              onBlur: (event: FocusEvent) => open && setOpen(false, 'focus', event),\n            },\n          )}\n          _value={value}\n        />\n        <ListPopover\n          panelRef={_toRef(panel)}\n          onToggle={onToggle}\n          size={rest.size}\n          label={lang.mentionsList}\n          loading={loading || remote.loading()}\n          onPick={(choice) => pick(choice)}\n          listbox={{\n            list,\n            id: listId,\n            renderOption: children,\n            empty: remote.error() ? lang.listLoadFailed : (empty ?? lang.mentionsEmpty),\n          }}\n          propsListbox={propsListbox}\n          propsPopover={mergePartProps<PartProps<'div', 'id' | 'popover'>>(\n            { sx: mentionStyles.panel },\n            propsPopover,\n          )}\n        />\n      </>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/input/NumberField.d.ts

@@ -0,0 +1,64 @@
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type NumericFormat } from '../config/lang/format';
+import { type NumericKind, type NumericValue } from '../utils/data/numeric';
+import { type PartProps } from '../utils/props';
+import { type ControlIconOptions, type ControlOptions } from './control';
+/** 值、角色与状态由组件管理 */
+export type NumberFieldManaged = 'value' | 'name' | 'type' | 'role' | 'inputmode' | 'min' | 'max' | 'step' | 'size' | 'prefix' | 'disabled' | 'readonly' | 'required' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuetext' | 'aria-invalid' | 'aria-describedby';
+/** 未声明的属性落到 input（主元素）上；外壳用 propsRoot */
+export interface NumberFieldProps extends PartProps<'input', NumberFieldManaged>, ControlOptions, ControlIconOptions {
+    /** 当前值：number、bigint 或 Decimal，父级写 _value={x}；空着时为 null。写回时保持传入的类型 */
+    _value?: NumericValue | null;
+    /**
+     * 值一开始为空时写回的类型：'number'（默认）、'bigint'，或 Decimal 构造函数（`valueType={Decimal}`，
+     * Decimal.clone 配过精度的也行）。有值以后按值本身的类型
+     */
+    valueType?: NumericKind;
+    /** 最小值；在表单里默认按 schema（z.number().min(0)、decimalSchema 的 min） */
+    min?: NumericValue;
+    /** 最大值；在表单里默认按 schema */
+    max?: NumericValue;
+    /** 步长，默认 1（schema 是 z.number().multipleOf(0.5) 时按它）；提交时对齐到 min + n × step。bigint 至少为 1 */
+    step?: NumericValue;
+    /** Page Up / Page Down 的步长，默认 step × 10 */
+    bigStep?: NumericValue;
+    /** 表单字段名：提交的是十进制文本（不带千分位与货币符号），不是输入框里显示的格式 */
+    name?: string;
+    /**
+     * 显示格式，如 `{ style: 'currency', currency: 'CNY' }`；写了 scale 时按缩放后的单位显示与输入：
+     * 值是元、按万元输入写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `suffix="万元"`
+     */
+    format?: NumericFormat;
+    /** 输入框里文字前的内容（币种符号、图标） */
+    prefix?: VNodeChild;
+    /** 输入框里文字后的内容：单位，如“万元”“元/件” */
+    suffix?: VNodeChild;
+    /** 显示减少 / 增加按钮，默认 true；只读时不显示 */
+    stepper?: boolean;
+    /** 有值时显示清空按钮：清空后值是 null（选填的数量、金额） */
+    clearable?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能聚焦、选中复制，不能改；不显示加减按钮 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 前缀的部件属性（指向输入框的 label） */
+    propsPrefix?: PartProps<'label'>;
+    /** 后缀（单位）的部件属性（指向输入框的 label） */
+    propsSuffix?: PartProps<'label'>;
+    /** 减少按钮的部件属性 */
+    propsDecrement?: Partial<IconButtonProps>;
+    /** 增加按钮的部件属性 */
+    propsIncrement?: Partial<IconButtonProps>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Partial<PresetIconButtonProps>;
+}
+/** 数字输入框：输入、方向键与按钮加减，提交时夹到范围并对齐步长 */
+export declare const NumberField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NumberFieldProps>;