@zerodep-dev/vue-tsx-pro-ui 0.3.0 → 0.3.2

package/dist/input/Mentions.js.map

@@ -1 +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.failure() ?? 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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"}
+{"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 { 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.failure() ?? 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/NumberRangeField.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/input/NumberRangeField.js

@@ -6,7 +6,7 @@ import { useFieldControl } from "../form/Field.js";
 import { NumberField } from "./NumberField.js";
 import { createVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/input/NumberRangeField.tsx
 /** 区间的值：[起, 止]，空着的一端是 null */
 /** 角色由组件管理；原生的 placeholder、prefix 属性让给两个框的占位与前缀 */

package/dist/input/NumberRangeField.js.map

@@ -1 +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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"}
+{"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 { 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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/input/OtpField.js

@@ -4,7 +4,7 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { useFieldControl } from "../form/Field.js";
 import { createVNode, ref } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/input/OtpField.tsx
 /** 能输入的字符 */
 /** 值、类型与状态由组件管理 */

package/dist/input/OtpField.js.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/OtpField.tsx"],"sourcesContent":["/**\n * 验证码输入框：一格一个字符的短信验证码、动态口令、取件码。\n *\n *   <Field label=\"短信验证码\"><OtpField _value={code} onComplete={verify} /></Field>\n *   <OtpField length={8} type=\"alphanumeric\" groups={[4, 4]} aria-label=\"恢复码\" />\n *\n * 参考 input-otp（shadcn 的 InputOTP）的做法：只有一个真正的 input（透明、盖在格子上面），格子只是显示。\n * 所以短信验证码的自动填充（autocomplete=\"one-time-code\"）、整段粘贴、退格、选中都是原生的，读屏看到的是一个输入框；\n * 输入时只留数字（或字母数字），填满时调用 onComplete。焦点在框里时当前格画焦点环，空格里有闪烁的光标。\n * 部件：Root（div：格子的容器）、Input（主元素）、Slot（div，每格一个）、Separator（groups 之间）。\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 { useFieldControl } from '../form/Field';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 能输入的字符 */\nexport interface OtpCharsets {\n  /** 只有数字（默认），手机弹出数字键盘 */\n  numeric: unknown;\n  /** 字母与数字，字母转成大写 */\n  alphanumeric: unknown;\n}\n\n/** 值、类型与状态由组件管理 */\nexport type OtpFieldManaged =\n  'value' | 'type' | 'maxlength' | 'inputmode' | 'pattern' | 'disabled' | 'readonly' | 'required';\n\n/** 未声明的属性落到 input（主元素）上；格子的容器用 propsRoot */\nexport interface OtpFieldProps extends PartProps<'input', OtpFieldManaged> {\n  /** 输入的字符：父级写 _value={code} */\n  _value?: string;\n  /** 几位，默认 6 */\n  length?: number;\n  /** 能输入的字符，默认 numeric */\n  type?: keyof OtpCharsets;\n  /** 分组显示（如 [3, 3] 在中间加一道短横线）；各组加起来要等于 length */\n  groups?: readonly number[];\n  /** 显示成圆点（动态口令、支付密码） */\n  mask?: boolean;\n  /** 填满时调用（输入、粘贴、自动填充都算） */\n  onComplete?: (value: string) => void;\n  /** 字号档位：格子随之缩放 */\n  size?: TextSize;\n  /** 不可用（不写时取 Field 的） */\n  disabled?: boolean;\n  /** 只读（不写时取 Field 的） */\n  readonly?: boolean;\n  /** 必填（不写时取 Field 的） */\n  required?: boolean;\n  /** 校验未通过（不写时取 Field 的） */\n  invalid?: boolean;\n  /** 格子的容器的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 每一格的部件属性 */\n  propsSlot?: PartProps<'div'>;\n  /** 分组之间的分隔的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\nconst blink = css.keyframes({ '50%': { opacity: 0 } });\n\n/** OtpField 的样式：root、input、slot、active、invalid、disabled、caret、separator */\nexport const otpFieldStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n  },\n  // 真正的输入框盖在格子上面：透明、光标与选中都不显示，点哪一格都是点它\n  input: {\n    position: 'absolute',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    outlineStyle: 'none',\n    backgroundColor: 'transparent',\n    appearance: 'none',\n    color: 'transparent',\n    caretColor: 'transparent',\n    fontSize: '1em',\n    letterSpacing: '-0.5em',\n    cursor: 'text',\n    '::selection': { backgroundColor: 'transparent' },\n  },\n  slot: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center',\n    width: '2.5em',\n    height: `max(2.75em, ${t.sizes.minTarget})`,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontSize: '1.15em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  // 当前格：同输入框聚焦时的强调描边与焦点环\n  active: {\n    borderColor: '_accent',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: '_accentBorder',\n    outlineOffset: 0,\n  },\n  invalid: { borderColor: '_danger' },\n  disabled: { opacity: '_disabled' },\n  // 空的当前格里闪烁的光标；减少动态效果时常亮\n  caret: {\n    width: '1px',\n    height: '1.1em',\n    backgroundColor: '_text',\n    animationName: { default: blink, '@media (prefers-reduced-motion: reduce)': 'none' },\n    animationDuration: '1s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'steps(1)',\n  },\n  separator: { width: '0.6em', height: '2px', backgroundColor: '_borderStrong' },\n});\n\nconst SANITIZE = {\n  numeric: (text: string) => text.replace(/\\D/g, ''),\n  alphanumeric: (text: string) => text.replace(/[^0-9a-z]/gi, '').toUpperCase(),\n};\n\n/** 验证码输入框：一个原生 input + 显示用的格子 */\nexport const OtpField = _component(\n  ({\n    _value: value = _bindable(''),\n    length = 6,\n    type = 'numeric',\n    groups,\n    mask = false,\n    onComplete,\n    size,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsSlot,\n    propsSeparator,\n    ...rest\n  }: OtpFieldProps) => {\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let focused = _state(false);\n\n    function onInput(event: Event) {\n      const input = event.target as HTMLInputElement;\n      const next = SANITIZE[type](input.value).slice(0, length);\n      // 过滤掉的字符不留在输入框里\n      if (input.value !== next) input.value = next;\n      if (next === value) return;\n      value = next;\n      if (next.length === length) onComplete?.(next);\n    }\n\n    /** 第 index 格后面是不是一组的结尾（要加分隔） */\n    const groupEnds = () => {\n      const ends = new Set<number>();\n      let sum = 0;\n      for (const size of groups ?? []) {\n        sum += size;\n        if (sum < length) ends.add(sum - 1);\n      }\n      return ends;\n    };\n\n    return () => {\n      const state = control();\n      // 值只有数字与字母（输入时已过滤），按字符拆开就是按格\n      const chars = value.split('');\n      const current = Math.min(chars.length, length - 1);\n      const ends = groupEnds();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [otpFieldStyles.root, size && fontSizeStyles[size]] },\n            propsRoot,\n          )}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          {Array.from({ length }, (_, index) => {\n            const char = chars[index];\n            const active = focused && !state.readonly && index === current;\n            return [\n              <div\n                key={`slot-${index}`}\n                aria-hidden=\"true\"\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      otpFieldStyles.slot,\n                      state.invalid && otpFieldStyles.invalid,\n                      active && otpFieldStyles.active,\n                      state.disabled && otpFieldStyles.disabled,\n                    ],\n                  },\n                  propsSlot,\n                )}\n                data-state={char ? 'filled' : 'empty'}\n              >\n                {char\n                  ? mask\n                    ? '•'\n                    : char\n                  : active && <span {...css.attrs(otpFieldStyles.caret)} />}\n              </div>,\n              ends.has(index) && (\n                <span\n                  key={`separator-${index}`}\n                  aria-hidden=\"true\"\n                  {...mergeAttrs<'span'>({ sx: otpFieldStyles.separator }, propsSeparator)}\n                />\n              ),\n            ];\n          })}\n          <input\n            {...mergeAttrs<'input'>(\n              { sx: otpFieldStyles.input, autocomplete: 'one-time-code', spellcheck: false },\n              rest,\n              {\n                id: state.id,\n                value,\n                type: mask ? 'password' : 'text',\n                inputmode: type === 'numeric' ? 'numeric' : 'text',\n                pattern: type === 'numeric' ? `\\\\d{${length}}` : `[0-9A-Za-z]{${length}}`,\n                maxlength: length,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': state.describedBy,\n                onInput,\n                onFocus: () => (focused = true),\n                onBlur: () => (focused = false),\n              },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"OtpField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/OtpField.tsx"],"sourcesContent":["/**\n * 验证码输入框：一格一个字符的短信验证码、动态口令、取件码。\n *\n *   <Field label=\"短信验证码\"><OtpField _value={code} onComplete={verify} /></Field>\n *   <OtpField length={8} type=\"alphanumeric\" groups={[4, 4]} aria-label=\"恢复码\" />\n *\n * 参考 input-otp（shadcn 的 InputOTP）的做法：只有一个真正的 input（透明、盖在格子上面），格子只是显示。\n * 所以短信验证码的自动填充（autocomplete=\"one-time-code\"）、整段粘贴、退格、选中都是原生的，读屏看到的是一个输入框；\n * 输入时只留数字（或字母数字），填满时调用 onComplete。焦点在框里时当前格画焦点环，空格里有闪烁的光标。\n * 部件：Root（div：格子的容器）、Input（主元素）、Slot（div，每格一个）、Separator（groups 之间）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useFieldControl } from '../form/Field';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 能输入的字符 */\nexport interface OtpCharsets {\n  /** 只有数字（默认），手机弹出数字键盘 */\n  numeric: unknown;\n  /** 字母与数字，字母转成大写 */\n  alphanumeric: unknown;\n}\n\n/** 值、类型与状态由组件管理 */\nexport type OtpFieldManaged =\n  'value' | 'type' | 'maxlength' | 'inputmode' | 'pattern' | 'disabled' | 'readonly' | 'required';\n\n/** 未声明的属性落到 input（主元素）上；格子的容器用 propsRoot */\nexport interface OtpFieldProps extends PartProps<'input', OtpFieldManaged> {\n  /** 输入的字符：父级写 _value={code} */\n  _value?: string;\n  /** 几位，默认 6 */\n  length?: number;\n  /** 能输入的字符，默认 numeric */\n  type?: keyof OtpCharsets;\n  /** 分组显示（如 [3, 3] 在中间加一道短横线）；各组加起来要等于 length */\n  groups?: readonly number[];\n  /** 显示成圆点（动态口令、支付密码） */\n  mask?: boolean;\n  /** 填满时调用（输入、粘贴、自动填充都算） */\n  onComplete?: (value: string) => void;\n  /** 字号档位：格子随之缩放 */\n  size?: TextSize;\n  /** 不可用（不写时取 Field 的） */\n  disabled?: boolean;\n  /** 只读（不写时取 Field 的） */\n  readonly?: boolean;\n  /** 必填（不写时取 Field 的） */\n  required?: boolean;\n  /** 校验未通过（不写时取 Field 的） */\n  invalid?: boolean;\n  /** 格子的容器的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 每一格的部件属性 */\n  propsSlot?: PartProps<'div'>;\n  /** 分组之间的分隔的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\nconst blink = css.keyframes({ '50%': { opacity: 0 } });\n\n/** OtpField 的样式：root、input、slot、active、invalid、disabled、caret、separator */\nexport const otpFieldStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n  },\n  // 真正的输入框盖在格子上面：透明、光标与选中都不显示，点哪一格都是点它\n  input: {\n    position: 'absolute',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    outlineStyle: 'none',\n    backgroundColor: 'transparent',\n    appearance: 'none',\n    color: 'transparent',\n    caretColor: 'transparent',\n    fontSize: '1em',\n    letterSpacing: '-0.5em',\n    cursor: 'text',\n    '::selection': { backgroundColor: 'transparent' },\n  },\n  slot: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center',\n    width: '2.5em',\n    height: `max(2.75em, ${t.sizes.minTarget})`,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontSize: '1.15em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  // 当前格：同输入框聚焦时的强调描边与焦点环\n  active: {\n    borderColor: '_accent',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: '_accentBorder',\n    outlineOffset: 0,\n  },\n  invalid: { borderColor: '_danger' },\n  disabled: { opacity: '_disabled' },\n  // 空的当前格里闪烁的光标；减少动态效果时常亮\n  caret: {\n    width: '1px',\n    height: '1.1em',\n    backgroundColor: '_text',\n    animationName: { default: blink, '@media (prefers-reduced-motion: reduce)': 'none' },\n    animationDuration: '1s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'steps(1)',\n  },\n  separator: { width: '0.6em', height: '2px', backgroundColor: '_borderStrong' },\n});\n\nconst SANITIZE = {\n  numeric: (text: string) => text.replace(/\\D/g, ''),\n  alphanumeric: (text: string) => text.replace(/[^0-9a-z]/gi, '').toUpperCase(),\n};\n\n/** 验证码输入框：一个原生 input + 显示用的格子 */\nexport const OtpField = _component(\n  ({\n    _value: value = _bindable(''),\n    length = 6,\n    type = 'numeric',\n    groups,\n    mask = false,\n    onComplete,\n    size,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsSlot,\n    propsSeparator,\n    ...rest\n  }: OtpFieldProps) => {\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let focused = _state(false);\n\n    function onInput(event: Event) {\n      const input = event.target as HTMLInputElement;\n      const next = SANITIZE[type](input.value).slice(0, length);\n      // 过滤掉的字符不留在输入框里\n      if (input.value !== next) input.value = next;\n      if (next === value) return;\n      value = next;\n      if (next.length === length) onComplete?.(next);\n    }\n\n    /** 第 index 格后面是不是一组的结尾（要加分隔） */\n    const groupEnds = () => {\n      const ends = new Set<number>();\n      let sum = 0;\n      for (const size of groups ?? []) {\n        sum += size;\n        if (sum < length) ends.add(sum - 1);\n      }\n      return ends;\n    };\n\n    return () => {\n      const state = control();\n      // 值只有数字与字母（输入时已过滤），按字符拆开就是按格\n      const chars = value.split('');\n      const current = Math.min(chars.length, length - 1);\n      const ends = groupEnds();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [otpFieldStyles.root, size && fontSizeStyles[size]] },\n            propsRoot,\n          )}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          {Array.from({ length }, (_, index) => {\n            const char = chars[index];\n            const active = focused && !state.readonly && index === current;\n            return [\n              <div\n                key={`slot-${index}`}\n                aria-hidden=\"true\"\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      otpFieldStyles.slot,\n                      state.invalid && otpFieldStyles.invalid,\n                      active && otpFieldStyles.active,\n                      state.disabled && otpFieldStyles.disabled,\n                    ],\n                  },\n                  propsSlot,\n                )}\n                data-state={char ? 'filled' : 'empty'}\n              >\n                {char\n                  ? mask\n                    ? '•'\n                    : char\n                  : active && <span {...css.attrs(otpFieldStyles.caret)} />}\n              </div>,\n              ends.has(index) && (\n                <span\n                  key={`separator-${index}`}\n                  aria-hidden=\"true\"\n                  {...mergeAttrs<'span'>({ sx: otpFieldStyles.separator }, propsSeparator)}\n                />\n              ),\n            ];\n          })}\n          <input\n            {...mergeAttrs<'input'>(\n              { sx: otpFieldStyles.input, autocomplete: 'one-time-code', spellcheck: false },\n              rest,\n              {\n                id: state.id,\n                value,\n                type: mask ? 'password' : 'text',\n                inputmode: type === 'numeric' ? 'numeric' : 'text',\n                pattern: type === 'numeric' ? `\\\\d{${length}}` : `[0-9A-Za-z]{${length}}`,\n                maxlength: length,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': state.describedBy,\n                onInput,\n                onFocus: () => (focused = true),\n                onBlur: () => (focused = false),\n              },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/PeoplePicker.js

@@ -12,7 +12,7 @@ import { peopleKey } from "./people.js";
 import { PeoplePickerPanel } from "./PeoplePickerPanel.js";
 import { Fragment, createVNode, ref, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { UsersRound } from "@lucide/icons";
 //#region src/input/PeoplePicker.tsx
 /**

package/dist/input/PeoplePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeoplePicker.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/PeoplePicker.tsx"],"sourcesContent":["/**\n * 人员与组织选择器（表单字段）：触发框里是已选的标签，点开对话框里的 PeoplePickerPanel 挑选，按“确定”才写回，“取消”放弃这次的改动。\n *\n *   <Field label=\"抄送\"><PeoplePicker source={source} _value={cc} types={['user', 'department']} recentKey=\"cc\" /></Field>\n *   <PeoplePicker source={source} _value={owner} max={1} placeholder=\"选择经办人\" />      只选一个：值仍是数组，最多一项\n *\n * 触发框同 Select 的外壳：多选时已选的标签排在触发按钮前面（可移除），按钮里只留给读屏的文字；一个时直接显示名字。\n * 键盘：触发按钮上 Enter / 空格 / ↓ 打开，Backspace 移除最后一个；对话框里的键盘见 PeoplePickerPanel。\n * 部件：Root（外壳）、Tags、Trigger（button，主元素）、Value、Dialog、Panel。\n */\nimport { UsersRound } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { Icon } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { Dialog, type DialogProps } from '../overlay/Dialog';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  clickOnShell,\n  controlParts,\n  focusOnShell,\n  useControlAppearance,\n  type ControlOptions,\n} from './control';\nimport { peopleKey, type PeopleEntry, type PeopleSource, type PeopleType } from './people';\nimport { PeoplePickerPanel, type PeoplePickerPanelProps } from './PeoplePickerPanel';\nimport { selectStyles, type SelectManaged } from './Select';\nimport { SelectedTags, type SelectedTagsProps } from './SelectedTags';\n\n/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface PeoplePickerProps extends PartProps<'button', SelectManaged>, ControlOptions {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时只选一个 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里） */\n  recentKey?: string;\n  /** 没有选时的占位，也是对话框的标题；默认“选择人员” */\n  placeholder?: string;\n  /** 多选时最多显示几个标签，其余收进“+N”；'responsive' 时排成一行按宽度放 */\n  maxTagCount?: number | 'responsive';\n  /** 不可用；也可由 Field 提供 */\n  disabled?: boolean;\n  /** 只读：不能打开、不能移除；也可由 Field 提供 */\n  readonly?: boolean;\n  /** 必填；也可由 Field 提供 */\n  required?: boolean;\n  /** 校验未通过；也可由 Field 提供 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签那一排的部件属性 */\n  propsTags?: Partial<SelectedTagsProps>;\n  /** 对话框的部件属性 */\n  propsDialog?: Partial<DialogProps>;\n  /** 面板的部件属性 */\n  propsPanel?: Partial<PeoplePickerPanelProps>;\n}\n\n/** 人员与组织选择器 */\nexport const PeoplePicker = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types,\n    max,\n    recentKey,\n    placeholder,\n    maxTagCount,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsTags,\n    propsDialog,\n    propsPanel,\n    ...rest\n  }: PeoplePickerProps) => {\n    const lang = useLang();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let open = _state(false);\n    // 对话框里改的是草稿：确定才写回\n    let draft = _state<readonly PeopleEntry[]>([]);\n    let trigger = _state.raw<HTMLElement | null>(null);\n\n    const locked = () => control().disabled || control().readonly;\n\n    function show() {\n      if (locked()) return;\n      draft = [...value];\n      open = true;\n    }\n\n    function remove(key: string) {\n      value = value.filter((entry) => peopleKey(entry) !== key);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (locked()) return;\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        show();\n      } else if (event.key === 'Backspace' && value.length > 0) {\n        event.preventDefault();\n        value = value.slice(0, -1);\n      }\n    }\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const title = placeholder ?? lang.peoplePlaceholder;\n      const tagged = max !== 1 && value.length > 0;\n      const shown =\n        value.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>{title}</span>\n        ) : tagged ? (\n          <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n            {lang.selectSummary(value.map((entry) => entry.name))}\n          </span>\n        ) : (\n          value[0]!.name\n        );\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              onPointerdown: state.disabled ? undefined : focusOnShell(() => trigger),\n              onClick: locked() ? undefined : clickOnShell(() => trigger, show),\n            })}\n            data-invalid={state.invalid || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {tagged && (\n              <SelectedTags\n                {...mergePartProps<SelectedTagsProps>(\n                  {\n                    tags: value.map((entry) => ({ value: peopleKey(entry), label: entry.name })),\n                    maxTagCount,\n                    onRemove: locked() ? undefined : remove,\n                  },\n                  propsTags,\n                )}\n              />\n            )}\n            <button\n              {...mergeAttrs<'button'>(\n                {\n                  sx: [\n                    buttonBaseStyles.root,\n                    selectStyles.trigger,\n                    tagged && selectStyles.triggerBehindTags,\n                  ],\n                },\n                rest,\n                {\n                  ref: (element: unknown) => (trigger = element as HTMLElement | null),\n                  id: state.id,\n                  type: 'button',\n                  disabled: state.disabled,\n                  'aria-haspopup': 'dialog',\n                  'aria-expanded': open,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  onClick: () => {\n                    trigger?.focus();\n                    show();\n                  },\n                  onKeydown,\n                },\n              )}\n            >\n              <span {...css.attrs(selectStyles.value)}>{shown}</span>\n            </button>\n            <Icon {...s.icon} icon={UsersRound} />\n          </div>\n          <Dialog\n            {...mergePartProps<DialogProps>(\n              {\n                size: 'lg',\n                title,\n                onConfirm: () => {\n                  value = draft;\n                },\n              },\n              propsDialog,\n            )}\n            _open={open}\n          >\n            <PeoplePickerPanel\n              {...mergePartProps<PeoplePickerPanelProps>(\n                // 打开对话框时焦点在搜索框里，直接就能输入\n                { source, types, max, recentKey, propsSearch: { autofocus: true } },\n                propsPanel,\n              )}\n              _value={draft}\n            />\n          </Dialog>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"PeoplePicker.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/PeoplePicker.tsx"],"sourcesContent":["/**\n * 人员与组织选择器（表单字段）：触发框里是已选的标签，点开对话框里的 PeoplePickerPanel 挑选，按“确定”才写回，“取消”放弃这次的改动。\n *\n *   <Field label=\"抄送\"><PeoplePicker source={source} _value={cc} types={['user', 'department']} recentKey=\"cc\" /></Field>\n *   <PeoplePicker source={source} _value={owner} max={1} placeholder=\"选择经办人\" />      只选一个：值仍是数组，最多一项\n *\n * 触发框同 Select 的外壳：多选时已选的标签排在触发按钮前面（可移除），按钮里只留给读屏的文字；一个时直接显示名字。\n * 键盘：触发按钮上 Enter / 空格 / ↓ 打开，Backspace 移除最后一个；对话框里的键盘见 PeoplePickerPanel。\n * 部件：Root（外壳）、Tags、Trigger（button，主元素）、Value、Dialog、Panel。\n */\nimport { UsersRound } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { Icon } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { Dialog, type DialogProps } from '../overlay/Dialog';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  clickOnShell,\n  controlParts,\n  focusOnShell,\n  useControlAppearance,\n  type ControlOptions,\n} from './control';\nimport { peopleKey, type PeopleEntry, type PeopleSource, type PeopleType } from './people';\nimport { PeoplePickerPanel, type PeoplePickerPanelProps } from './PeoplePickerPanel';\nimport { selectStyles, type SelectManaged } from './Select';\nimport { SelectedTags, type SelectedTagsProps } from './SelectedTags';\n\n/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface PeoplePickerProps extends PartProps<'button', SelectManaged>, ControlOptions {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时只选一个 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里） */\n  recentKey?: string;\n  /** 没有选时的占位，也是对话框的标题；默认“选择人员” */\n  placeholder?: string;\n  /** 多选时最多显示几个标签，其余收进“+N”；'responsive' 时排成一行按宽度放 */\n  maxTagCount?: number | 'responsive';\n  /** 不可用；也可由 Field 提供 */\n  disabled?: boolean;\n  /** 只读：不能打开、不能移除；也可由 Field 提供 */\n  readonly?: boolean;\n  /** 必填；也可由 Field 提供 */\n  required?: boolean;\n  /** 校验未通过；也可由 Field 提供 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签那一排的部件属性 */\n  propsTags?: Partial<SelectedTagsProps>;\n  /** 对话框的部件属性 */\n  propsDialog?: Partial<DialogProps>;\n  /** 面板的部件属性 */\n  propsPanel?: Partial<PeoplePickerPanelProps>;\n}\n\n/** 人员与组织选择器 */\nexport const PeoplePicker = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types,\n    max,\n    recentKey,\n    placeholder,\n    maxTagCount,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsTags,\n    propsDialog,\n    propsPanel,\n    ...rest\n  }: PeoplePickerProps) => {\n    const lang = useLang();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let open = _state(false);\n    // 对话框里改的是草稿：确定才写回\n    let draft = _state<readonly PeopleEntry[]>([]);\n    let trigger = _state.raw<HTMLElement | null>(null);\n\n    const locked = () => control().disabled || control().readonly;\n\n    function show() {\n      if (locked()) return;\n      draft = [...value];\n      open = true;\n    }\n\n    function remove(key: string) {\n      value = value.filter((entry) => peopleKey(entry) !== key);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (locked()) return;\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        show();\n      } else if (event.key === 'Backspace' && value.length > 0) {\n        event.preventDefault();\n        value = value.slice(0, -1);\n      }\n    }\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const title = placeholder ?? lang.peoplePlaceholder;\n      const tagged = max !== 1 && value.length > 0;\n      const shown =\n        value.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>{title}</span>\n        ) : tagged ? (\n          <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n            {lang.selectSummary(value.map((entry) => entry.name))}\n          </span>\n        ) : (\n          value[0]!.name\n        );\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              onPointerdown: state.disabled ? undefined : focusOnShell(() => trigger),\n              onClick: locked() ? undefined : clickOnShell(() => trigger, show),\n            })}\n            data-invalid={state.invalid || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {tagged && (\n              <SelectedTags\n                {...mergePartProps<SelectedTagsProps>(\n                  {\n                    tags: value.map((entry) => ({ value: peopleKey(entry), label: entry.name })),\n                    maxTagCount,\n                    onRemove: locked() ? undefined : remove,\n                  },\n                  propsTags,\n                )}\n              />\n            )}\n            <button\n              {...mergeAttrs<'button'>(\n                {\n                  sx: [\n                    buttonBaseStyles.root,\n                    selectStyles.trigger,\n                    tagged && selectStyles.triggerBehindTags,\n                  ],\n                },\n                rest,\n                {\n                  ref: (element: unknown) => (trigger = element as HTMLElement | null),\n                  id: state.id,\n                  type: 'button',\n                  disabled: state.disabled,\n                  'aria-haspopup': 'dialog',\n                  'aria-expanded': open,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  onClick: () => {\n                    trigger?.focus();\n                    show();\n                  },\n                  onKeydown,\n                },\n              )}\n            >\n              <span {...css.attrs(selectStyles.value)}>{shown}</span>\n            </button>\n            <Icon {...s.icon} icon={UsersRound} />\n          </div>\n          <Dialog\n            {...mergePartProps<DialogProps>(\n              {\n                size: 'lg',\n                title,\n                onConfirm: () => {\n                  value = draft;\n                },\n              },\n              propsDialog,\n            )}\n            _open={open}\n          >\n            <PeoplePickerPanel\n              {...mergePartProps<PeoplePickerPanelProps>(\n                // 打开对话框时焦点在搜索框里，直接就能输入\n                { source, types, max, recentKey, propsSearch: { autofocus: true } },\n                propsPanel,\n              )}\n              _value={draft}\n            />\n          </Dialog>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/PeoplePickerPanel.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type PartProps } from '../utils/props';
 import { type PeopleEntry, type PeopleSource, type PeopleType } from './people';
 import { type TextFieldProps } from './TextField';

package/dist/input/PeoplePickerPanel.js

@@ -16,7 +16,7 @@ import { usePersistentState } from "../utils/dom/storage.js";
 import { ToggleGroup, ToggleItem } from "./ToggleGroup.js";
 import { computed, createVNode, isVNode, nextTick, ref, shallowRef, watch } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { BriefcaseBusiness, Building, ChevronRight, Search, X } from "@lucide/icons";
 //#region src/input/PeoplePickerPanel.tsx
 /**

package/dist/input/PeoplePickerPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeoplePickerPanel.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_ref","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/PeoplePickerPanel.tsx"],"sourcesContent":["/**\n * 人员与组织选择面板：左边按组织架构一层层找（面包屑回到上层），或搜索、看角色与最近选过的，勾选；右边是已选的，可以移除、清空。\n * PeoplePicker 把它放进对话框；也可以直接放在页面、抽屉里。数据见 people.ts（source）。\n *\n *   <PeoplePickerPanel source={source} _value={members} types={['user', 'department']} recentKey=\"project-members\" />\n *\n * - 部门的“下级”进到下一层（不能选部门时点整行也是进去），面包屑点哪一级回到哪一级。\n * - 搜索框有字时列表换成搜索结果（输入停下 300 ms 再搜，只采用最后一次），清空回到原来的页。\n * - types 决定能勾哪几种；max 限制个数，1 时勾一个就换掉原来的。勾过的记进“最近”（recentKey，存在浏览器里，最多 20 个）。\n * - 多选时列表上方有“全选”，只管这一页能勾的。\n *\n * 读屏：左右两个列表各有名称；每行的勾选框以名字为名；“下级”按钮的名称是“下级：某部门”，进去后焦点落到列表上。\n * 部件：Root（div）、Browse（左边）、Selected（右边）。\n */\nimport { Building, BriefcaseBusiness, ChevronRight, Search, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, ref, watch, type Ref, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton } from '../base/IconButton';\nimport { Spinner } from '../base/Spinner';\nimport { Small, Strong } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Avatar } from '../display/Avatar';\nimport { ItemList, ItemListItem } from '../display/ItemList';\nimport { Breadcrumbs } from '../navigation/Breadcrumbs';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { useRequest } from '../utils/request/use-request';\nimport { Checkbox } from './Checkbox';\nimport {\n  peopleKey,\n  toPeopleValue,\n  type PeopleEntry,\n  type PeopleSource,\n  type PeopleType,\n} from './people';\nimport { TextField, type TextFieldProps } from './TextField';\nimport { ToggleGroup, ToggleItem } from './ToggleGroup';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PeoplePickerPanelProps extends PartProps<'div'> {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时勾一个就换掉原来的 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里）；不写时没有“最近”页 */\n  recentKey?: string;\n  /** 两边列表的高度（CSS 长度），默认 '20rem' */\n  listHeight?: string;\n  /** 左边的部件属性 */\n  propsBrowse?: PartProps<'div'>;\n  /** 右边的部件属性 */\n  propsSelected?: PartProps<'div'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n}\n\ntype Page = 'org' | 'roles' | 'recent';\n\n/** “最近”最多记几个 */\nconst RECENT_LIMIT = 20;\n\n/** PeoplePickerPanel 的样式：root、grid、browse、selected、header、list、start */\nexport const peoplePickerPanelStyles = css.create({\n  // 按自己的宽度决定左右排还是上下排\n  root: { containerType: 'inline-size', minWidth: 0 },\n  grid: {\n    display: 'grid',\n    gap: '_md',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr)',\n      '@container (min-width: 36rem)': 'minmax(0, 3fr) minmax(0, 2fr)',\n    },\n  },\n  browse: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  selected: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    minWidth: 0,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    minHeight: '2em',\n  },\n  list: { overflowY: 'auto', outlineStyle: 'none', minWidth: 0 },\n  start: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  status: { display: 'flex', justifyContent: 'center', paddingBlock: '_lg', color: '_textMuted' },\n});\n\n/** 随属性变的样式：列表的高度 */\nexport const peoplePickerPanelDynamicStyles = css.create({\n  height: (height: string) => ({ height }),\n});\n\n/** 人员与组织选择面板 */\nexport const PeoplePickerPanel = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types = ['user'],\n    max,\n    recentKey,\n    listHeight = '20rem',\n    propsBrowse,\n    propsSelected,\n    propsSearch,\n    ...rest\n  }: PeoplePickerPanelProps) => {\n    const lang = useLang();\n    // 存的键只在创建时取：换键要换一个面板\n    const key = _untrack(recentKey);\n    let recent = _fromRef(\n      key\n        ? usePersistentState<PeopleEntry[]>(`vtp.people.recent.${key}`, [])\n        : (ref<PeopleEntry[]>([]) as Ref<PeopleEntry[]>),\n    );\n    let page = _state<Page>('org');\n    let query = _state('');\n    let path = _state<PeopleEntry[]>([]);\n    let list = _state.raw<HTMLElement | null>(null);\n\n    const searching = () => !!source.search && query.trim() !== '';\n    const level = useRequest(\n      (parent: PeopleEntry | null, signal) => source.children(parent, signal),\n      { params: () => path.at(-1) ?? null, keepPrevious: false },\n    );\n    const found = useRequest((text: string, signal) => source.search!(text, signal), {\n      params: () => query.trim(),\n      debounce: 300,\n      immediate: false,\n      keepPrevious: false,\n      enabled: searching,\n    });\n    const roles = useRequest((_: undefined, signal) => source.roles!(signal), {\n      immediate: false,\n    });\n    watch(\n      () => page,\n      (next) => {\n        if (next === 'roles' && roles.data == null && !roles.loading) {\n          void roles.refresh();\n        }\n      },\n    );\n\n    const pages = (): Page[] => [\n      'org',\n      ...(source.roles ? (['roles'] as const) : []),\n      ...(key ? (['recent'] as const) : []),\n    ];\n    const pageLabel: Record<Page, () => string> = {\n      org: () => lang.peopleOrg,\n      roles: () => lang.peopleRoles,\n      recent: () => lang.peopleRecent,\n    };\n\n    /** 现在列出的：搜索结果，或当前页 */\n    const shown = (): { items: readonly PeopleEntry[]; loading: boolean } => {\n      // 防抖等待时请求还没发出：没有结果也没出错就算加载中，不先显示\"没有找到\"\n      if (searching()) {\n        return {\n          items: found.data ?? [],\n          loading: found.loading || (found.data === undefined && !found.error),\n        };\n      }\n      if (page === 'roles') return { items: roles.data ?? [], loading: roles.loading };\n      if (page === 'recent') return { items: recent, loading: false };\n      return { items: level.data ?? [], loading: level.loading };\n    };\n\n    const selectedKeys = _derived(new Set(value.map(peopleKey)));\n    const pickable = (entry: PeopleEntry) => types.includes(entry.type);\n    const drillable = (entry: PeopleEntry) =>\n      entry.type === 'department' && entry.hasChildren !== false;\n    const full = () => max != null && max > 1 && value.length >= max;\n\n    function remember(entry: PeopleEntry) {\n      if (!key) return;\n      recent = [\n        toPeopleValue(entry),\n        ...recent.filter((item) => peopleKey(item) !== peopleKey(entry)),\n      ].slice(0, RECENT_LIMIT);\n    }\n\n    function toggle(entry: PeopleEntry) {\n      const id = peopleKey(entry);\n      if (selectedKeys.has(id)) {\n        value = value.filter((item) => peopleKey(item) !== id);\n        return;\n      }\n      if (max === 1) value = [toPeopleValue(entry)];\n      else if (full()) return;\n      else value = [...value, toPeopleValue(entry)];\n      remember(entry);\n    }\n\n    /** 全选这一页能勾的；都勾上了时全部取消。有上限时加到满为止 */\n    function toggleAll(items: readonly PeopleEntry[]) {\n      const candidates = items.filter(pickable);\n      if (candidates.every((entry) => selectedKeys.has(peopleKey(entry)))) {\n        const drop = new Set(candidates.map(peopleKey));\n        value = value.filter((item) => !drop.has(peopleKey(item)));\n        return;\n      }\n      const adding = candidates.filter((entry) => !selectedKeys.has(peopleKey(entry)));\n      const room = max != null ? Math.max(0, max - value.length) : adding.length;\n      value = [...value, ...adding.slice(0, room).map(toPeopleValue)];\n    }\n\n    /** 进到一个部门：从搜索结果进去时面包屑只有它（不知道它的上级） */\n    function open(department: PeopleEntry) {\n      path = searching() ? [department] : [...path, department];\n      query = '';\n      page = 'org';\n      void nextTick(() => list?.focus());\n    }\n\n    function onRowClick(entry: PeopleEntry, event: MouseEvent) {\n      // 勾选框、按钮自己处理\n      if ((event.target as Element).closest('button,input,label,a')) return;\n      if (pickable(entry)) toggle(entry);\n      else if (drillable(entry)) open(entry);\n    }\n\n    /** 行首的圆形标记：人员是头像，部门、角色是图标 */\n    const badge = (entry: PeopleEntry): VNodeChild =>\n      entry.type === 'user' ? (\n        <Avatar name={entry.name} src={entry.avatar} size=\"sm\" />\n      ) : (\n        <Avatar\n          size=\"sm\"\n          fallback={<Icon icon={entry.type === 'department' ? Building : BriefcaseBusiness} />}\n        />\n      );\n\n    function renderRow(entry: PeopleEntry): VNodeChild {\n      const id = peopleKey(entry);\n      const checked = selectedKeys.has(id);\n      return (\n        <ItemListItem\n          key={id}\n          start={\n            <span {...css.attrs(peoplePickerPanelStyles.start)}>\n              {pickable(entry) && (\n                <Checkbox\n                  _checked={checked}\n                  onUpdate:_checked={() => toggle(entry)}\n                  disabled={!checked && full()}\n                  aria-label={entry.name}\n                />\n              )}\n              {badge(entry)}\n            </span>\n          }\n          title={entry.name}\n          description={entry.description}\n          end={\n            drillable(entry) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconEnd={ChevronRight}\n                aria-label={lang.peopleOpen(entry.name)}\n                onClick={() => open(entry)}\n              >\n                {lang.peopleChildren}\n              </Button>\n            )\n          }\n          onClick={(event: MouseEvent) => onRowClick(entry, event)}\n        />\n      );\n    }\n\n    function renderBrowse(): VNodeChild {\n      const { items, loading } = shown();\n      const candidates = items.filter(pickable);\n      const checkedCount = candidates.filter((entry) => selectedKeys.has(peopleKey(entry))).length;\n      const height = peoplePickerPanelDynamicStyles.height(listHeight);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.browse }, propsBrowse)}>\n          {source.search && (\n            <TextField\n              {...mergePartProps<TextFieldProps>(\n                {\n                  icon: Search,\n                  placeholder: lang.peopleSearch,\n                  'aria-label': lang.peopleSearch,\n                  clearable: true,\n                },\n                propsSearch,\n              )}\n              _value={query}\n            />\n          )}\n          {!searching() && pages().length > 1 && (\n            <ToggleGroup\n              _value={page}\n              onUpdate:_value={(next) => next && (page = next as Page)}\n              required\n              size=\"sm\"\n              aria-label={lang.peoplePages}\n            >\n              {pages().map((item) => (\n                <ToggleItem key={item} value={item}>\n                  {pageLabel[item]()}\n                </ToggleItem>\n              ))}\n            </ToggleGroup>\n          )}\n          {!searching() && page === 'org' && (\n            <Breadcrumbs\n              items={[\n                { key: '', label: lang.peopleRoot },\n                ...path.map((department) => ({\n                  key: peopleKey(department),\n                  label: department.name,\n                })),\n              ]}\n              onNavigate={(_, index) => (path = path.slice(0, index))}\n            />\n          )}\n          {max !== 1 && candidates.length > 1 && (\n            <Checkbox\n              _checked={checkedCount === candidates.length}\n              indeterminate={checkedCount > 0 && checkedCount < candidates.length}\n              onUpdate:_checked={() => toggleAll(items)}\n              size=\"sm\"\n            >\n              {lang.peopleSelectAll}\n            </Checkbox>\n          )}\n          <div\n            {...css.attrs(peoplePickerPanelStyles.list, height)}\n            ref={(element: unknown) => (list = element as HTMLElement | null)}\n            tabindex={-1}\n          >\n            {loading ? (\n              <div {...css.attrs(peoplePickerPanelStyles.status)}>\n                <Spinner label={lang.loading} />\n              </div>\n            ) : items.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>\n                {searching() ? lang.peopleNoResult : lang.peopleEmpty}\n              </Small>\n            ) : (\n              <ItemList\n                hoverable\n                density=\"compact\"\n                aria-label={pageLabel[searching() ? 'org' : page]()}\n              >\n                {items.map(renderRow)}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    function renderSelected(): VNodeChild {\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.selected }, propsSelected)}>\n          <div {...css.attrs(peoplePickerPanelStyles.header)}>\n            <Strong size=\"sm\">{lang.peopleCount(value.length, max)}</Strong>\n            {value.length > 0 && (\n              <Button variant=\"link\" size=\"sm\" onClick={() => (value = [])}>\n                {lang.clear}\n              </Button>\n            )}\n          </div>\n          <div\n            {...css.attrs(\n              peoplePickerPanelStyles.list,\n              peoplePickerPanelDynamicStyles.height(listHeight),\n            )}\n          >\n            {value.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>{lang.peopleNothingSelected}</Small>\n            ) : (\n              <ItemList density=\"compact\" aria-label={lang.peopleSelected}>\n                {value.map((entry) => (\n                  <ItemListItem\n                    key={peopleKey(entry)}\n                    start={badge(entry)}\n                    title={entry.name}\n                    description={entry.description ?? lang.peopleTypes[entry.type]}\n                    end={\n                      <IconButton\n                        icon={X}\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        aria-label={lang.peopleRemove(entry.name)}\n                        onClick={() => toggle(entry)}\n                      />\n                    }\n                  />\n                ))}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.root }, rest)}>\n        <div {...css.attrs(peoplePickerPanelStyles.grid)}>\n          {renderBrowse()}\n          {renderSelected()}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"PeoplePickerPanel.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_ref","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/PeoplePickerPanel.tsx"],"sourcesContent":["/**\n * 人员与组织选择面板：左边按组织架构一层层找（面包屑回到上层），或搜索、看角色与最近选过的，勾选；右边是已选的，可以移除、清空。\n * PeoplePicker 把它放进对话框；也可以直接放在页面、抽屉里。数据见 people.ts（source）。\n *\n *   <PeoplePickerPanel source={source} _value={members} types={['user', 'department']} recentKey=\"project-members\" />\n *\n * - 部门的“下级”进到下一层（不能选部门时点整行也是进去），面包屑点哪一级回到哪一级。\n * - 搜索框有字时列表换成搜索结果（输入停下 300 ms 再搜，只采用最后一次），清空回到原来的页。\n * - types 决定能勾哪几种；max 限制个数，1 时勾一个就换掉原来的。勾过的记进“最近”（recentKey，存在浏览器里，最多 20 个）。\n * - 多选时列表上方有“全选”，只管这一页能勾的。\n *\n * 读屏：左右两个列表各有名称；每行的勾选框以名字为名；“下级”按钮的名称是“下级：某部门”，进去后焦点落到列表上。\n * 部件：Root（div）、Browse（左边）、Selected（右边）。\n */\nimport { Building, BriefcaseBusiness, ChevronRight, Search, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, ref, watch, type Ref, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton } from '../base/IconButton';\nimport { Spinner } from '../base/Spinner';\nimport { Small, Strong } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Avatar } from '../display/Avatar';\nimport { ItemList, ItemListItem } from '../display/ItemList';\nimport { Breadcrumbs } from '../navigation/Breadcrumbs';\nimport { usePersistentState } from '../utils/dom/storage';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { useRequest } from '../utils/request/use-request';\nimport { Checkbox } from './Checkbox';\nimport {\n  peopleKey,\n  toPeopleValue,\n  type PeopleEntry,\n  type PeopleSource,\n  type PeopleType,\n} from './people';\nimport { TextField, type TextFieldProps } from './TextField';\nimport { ToggleGroup, ToggleItem } from './ToggleGroup';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PeoplePickerPanelProps extends PartProps<'div'> {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时勾一个就换掉原来的 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里）；不写时没有“最近”页 */\n  recentKey?: string;\n  /** 两边列表的高度（CSS 长度），默认 '20rem' */\n  listHeight?: string;\n  /** 左边的部件属性 */\n  propsBrowse?: PartProps<'div'>;\n  /** 右边的部件属性 */\n  propsSelected?: PartProps<'div'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n}\n\ntype Page = 'org' | 'roles' | 'recent';\n\n/** “最近”最多记几个 */\nconst RECENT_LIMIT = 20;\n\n/** PeoplePickerPanel 的样式：root、grid、browse、selected、header、list、start */\nexport const peoplePickerPanelStyles = css.create({\n  // 按自己的宽度决定左右排还是上下排\n  root: { containerType: 'inline-size', minWidth: 0 },\n  grid: {\n    display: 'grid',\n    gap: '_md',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr)',\n      '@container (min-width: 36rem)': 'minmax(0, 3fr) minmax(0, 2fr)',\n    },\n  },\n  browse: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  selected: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    minWidth: 0,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    minHeight: '2em',\n  },\n  list: { overflowY: 'auto', outlineStyle: 'none', minWidth: 0 },\n  start: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  status: { display: 'flex', justifyContent: 'center', paddingBlock: '_lg', color: '_textMuted' },\n});\n\n/** 随属性变的样式：列表的高度 */\nexport const peoplePickerPanelDynamicStyles = css.create({\n  height: (height: string) => ({ height }),\n});\n\n/** 人员与组织选择面板 */\nexport const PeoplePickerPanel = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types = ['user'],\n    max,\n    recentKey,\n    listHeight = '20rem',\n    propsBrowse,\n    propsSelected,\n    propsSearch,\n    ...rest\n  }: PeoplePickerPanelProps) => {\n    const lang = useLang();\n    // 存的键只在创建时取：换键要换一个面板\n    const key = _untrack(recentKey);\n    let recent = _fromRef(\n      key\n        ? usePersistentState<PeopleEntry[]>(`vtp.people.recent.${key}`, [])\n        : (ref<PeopleEntry[]>([]) as Ref<PeopleEntry[]>),\n    );\n    let page = _state<Page>('org');\n    let query = _state('');\n    let path = _state<PeopleEntry[]>([]);\n    let list = _state.raw<HTMLElement | null>(null);\n\n    const searching = () => !!source.search && query.trim() !== '';\n    const level = useRequest(\n      (parent: PeopleEntry | null, signal) => source.children(parent, signal),\n      { params: () => path.at(-1) ?? null, keepPrevious: false },\n    );\n    const found = useRequest((text: string, signal) => source.search!(text, signal), {\n      params: () => query.trim(),\n      debounce: 300,\n      immediate: false,\n      keepPrevious: false,\n      enabled: searching,\n    });\n    const roles = useRequest((_: undefined, signal) => source.roles!(signal), {\n      immediate: false,\n    });\n    watch(\n      () => page,\n      (next) => {\n        if (next === 'roles' && roles.data == null && !roles.loading) {\n          void roles.refresh();\n        }\n      },\n    );\n\n    const pages = (): Page[] => [\n      'org',\n      ...(source.roles ? (['roles'] as const) : []),\n      ...(key ? (['recent'] as const) : []),\n    ];\n    const pageLabel: Record<Page, () => string> = {\n      org: () => lang.peopleOrg,\n      roles: () => lang.peopleRoles,\n      recent: () => lang.peopleRecent,\n    };\n\n    /** 现在列出的：搜索结果，或当前页 */\n    const shown = (): { items: readonly PeopleEntry[]; loading: boolean } => {\n      // 防抖等待时请求还没发出：没有结果也没出错就算加载中，不先显示\"没有找到\"\n      if (searching()) {\n        return {\n          items: found.data ?? [],\n          loading: found.loading || (found.data === undefined && !found.error),\n        };\n      }\n      if (page === 'roles') return { items: roles.data ?? [], loading: roles.loading };\n      if (page === 'recent') return { items: recent, loading: false };\n      return { items: level.data ?? [], loading: level.loading };\n    };\n\n    const selectedKeys = _derived(new Set(value.map(peopleKey)));\n    const pickable = (entry: PeopleEntry) => types.includes(entry.type);\n    const drillable = (entry: PeopleEntry) =>\n      entry.type === 'department' && entry.hasChildren !== false;\n    const full = () => max != null && max > 1 && value.length >= max;\n\n    function remember(entry: PeopleEntry) {\n      if (!key) return;\n      recent = [\n        toPeopleValue(entry),\n        ...recent.filter((item) => peopleKey(item) !== peopleKey(entry)),\n      ].slice(0, RECENT_LIMIT);\n    }\n\n    function toggle(entry: PeopleEntry) {\n      const id = peopleKey(entry);\n      if (selectedKeys.has(id)) {\n        value = value.filter((item) => peopleKey(item) !== id);\n        return;\n      }\n      if (max === 1) value = [toPeopleValue(entry)];\n      else if (full()) return;\n      else value = [...value, toPeopleValue(entry)];\n      remember(entry);\n    }\n\n    /** 全选这一页能勾的；都勾上了时全部取消。有上限时加到满为止 */\n    function toggleAll(items: readonly PeopleEntry[]) {\n      const candidates = items.filter(pickable);\n      if (candidates.every((entry) => selectedKeys.has(peopleKey(entry)))) {\n        const drop = new Set(candidates.map(peopleKey));\n        value = value.filter((item) => !drop.has(peopleKey(item)));\n        return;\n      }\n      const adding = candidates.filter((entry) => !selectedKeys.has(peopleKey(entry)));\n      const room = max != null ? Math.max(0, max - value.length) : adding.length;\n      value = [...value, ...adding.slice(0, room).map(toPeopleValue)];\n    }\n\n    /** 进到一个部门：从搜索结果进去时面包屑只有它（不知道它的上级） */\n    function open(department: PeopleEntry) {\n      path = searching() ? [department] : [...path, department];\n      query = '';\n      page = 'org';\n      void nextTick(() => list?.focus());\n    }\n\n    function onRowClick(entry: PeopleEntry, event: MouseEvent) {\n      // 勾选框、按钮自己处理\n      if ((event.target as Element).closest('button,input,label,a')) return;\n      if (pickable(entry)) toggle(entry);\n      else if (drillable(entry)) open(entry);\n    }\n\n    /** 行首的圆形标记：人员是头像，部门、角色是图标 */\n    const badge = (entry: PeopleEntry): VNodeChild =>\n      entry.type === 'user' ? (\n        <Avatar name={entry.name} src={entry.avatar} size=\"sm\" />\n      ) : (\n        <Avatar\n          size=\"sm\"\n          fallback={<Icon icon={entry.type === 'department' ? Building : BriefcaseBusiness} />}\n        />\n      );\n\n    function renderRow(entry: PeopleEntry): VNodeChild {\n      const id = peopleKey(entry);\n      const checked = selectedKeys.has(id);\n      return (\n        <ItemListItem\n          key={id}\n          start={\n            <span {...css.attrs(peoplePickerPanelStyles.start)}>\n              {pickable(entry) && (\n                <Checkbox\n                  _checked={checked}\n                  onUpdate:_checked={() => toggle(entry)}\n                  disabled={!checked && full()}\n                  aria-label={entry.name}\n                />\n              )}\n              {badge(entry)}\n            </span>\n          }\n          title={entry.name}\n          description={entry.description}\n          end={\n            drillable(entry) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                iconEnd={ChevronRight}\n                aria-label={lang.peopleOpen(entry.name)}\n                onClick={() => open(entry)}\n              >\n                {lang.peopleChildren}\n              </Button>\n            )\n          }\n          onClick={(event: MouseEvent) => onRowClick(entry, event)}\n        />\n      );\n    }\n\n    function renderBrowse(): VNodeChild {\n      const { items, loading } = shown();\n      const candidates = items.filter(pickable);\n      const checkedCount = candidates.filter((entry) => selectedKeys.has(peopleKey(entry))).length;\n      const height = peoplePickerPanelDynamicStyles.height(listHeight);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.browse }, propsBrowse)}>\n          {source.search && (\n            <TextField\n              {...mergePartProps<TextFieldProps>(\n                {\n                  icon: Search,\n                  placeholder: lang.peopleSearch,\n                  'aria-label': lang.peopleSearch,\n                  clearable: true,\n                },\n                propsSearch,\n              )}\n              _value={query}\n            />\n          )}\n          {!searching() && pages().length > 1 && (\n            <ToggleGroup\n              _value={page}\n              onUpdate:_value={(next) => next && (page = next as Page)}\n              required\n              size=\"sm\"\n              aria-label={lang.peoplePages}\n            >\n              {pages().map((item) => (\n                <ToggleItem key={item} value={item}>\n                  {pageLabel[item]()}\n                </ToggleItem>\n              ))}\n            </ToggleGroup>\n          )}\n          {!searching() && page === 'org' && (\n            <Breadcrumbs\n              items={[\n                { key: '', label: lang.peopleRoot },\n                ...path.map((department) => ({\n                  key: peopleKey(department),\n                  label: department.name,\n                })),\n              ]}\n              onNavigate={(_, index) => (path = path.slice(0, index))}\n            />\n          )}\n          {max !== 1 && candidates.length > 1 && (\n            <Checkbox\n              _checked={checkedCount === candidates.length}\n              indeterminate={checkedCount > 0 && checkedCount < candidates.length}\n              onUpdate:_checked={() => toggleAll(items)}\n              size=\"sm\"\n            >\n              {lang.peopleSelectAll}\n            </Checkbox>\n          )}\n          <div\n            {...css.attrs(peoplePickerPanelStyles.list, height)}\n            ref={(element: unknown) => (list = element as HTMLElement | null)}\n            tabindex={-1}\n          >\n            {loading ? (\n              <div {...css.attrs(peoplePickerPanelStyles.status)}>\n                <Spinner label={lang.loading} />\n              </div>\n            ) : items.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>\n                {searching() ? lang.peopleNoResult : lang.peopleEmpty}\n              </Small>\n            ) : (\n              <ItemList\n                hoverable\n                density=\"compact\"\n                aria-label={pageLabel[searching() ? 'org' : page]()}\n              >\n                {items.map(renderRow)}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    function renderSelected(): VNodeChild {\n      return (\n        <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.selected }, propsSelected)}>\n          <div {...css.attrs(peoplePickerPanelStyles.header)}>\n            <Strong size=\"sm\">{lang.peopleCount(value.length, max)}</Strong>\n            {value.length > 0 && (\n              <Button variant=\"link\" size=\"sm\" onClick={() => (value = [])}>\n                {lang.clear}\n              </Button>\n            )}\n          </div>\n          <div\n            {...css.attrs(\n              peoplePickerPanelStyles.list,\n              peoplePickerPanelDynamicStyles.height(listHeight),\n            )}\n          >\n            {value.length === 0 ? (\n              <Small sx={peoplePickerPanelStyles.status}>{lang.peopleNothingSelected}</Small>\n            ) : (\n              <ItemList density=\"compact\" aria-label={lang.peopleSelected}>\n                {value.map((entry) => (\n                  <ItemListItem\n                    key={peopleKey(entry)}\n                    start={badge(entry)}\n                    title={entry.name}\n                    description={entry.description ?? lang.peopleTypes[entry.type]}\n                    end={\n                      <IconButton\n                        icon={X}\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        aria-label={lang.peopleRemove(entry.name)}\n                        onClick={() => toggle(entry)}\n                      />\n                    }\n                  />\n                ))}\n              </ItemList>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: peoplePickerPanelStyles.root }, rest)}>\n        <div {...css.attrs(peoplePickerPanelStyles.grid)}>\n          {renderBrowse()}\n          {renderSelected()}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAyBA,IAAM,eAAe;;AAGrB,IAAa,0BAA0B,IAAI,OAAO;CAEhD,MAAM;EAAE,eAAe;EAAe,UAAU;CAAE;CAClD,MAAM;EACJ,SAAS;EACT,KAAK;EACL,qBAAqB;GACnB,SAAS;GACT,iCAAiC;EACnC;CACF;CACA,QAAQ;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAC5E,UAAU;EACR,SAAS;EACT,eAAe;EACf,KAAK;EACL,UAAU;EACV,SAAS;EACT,iBAAiB;EACjB,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;CAChB;CACA,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,WAAW;CACb;CACA,MAAM;EAAE,WAAW;EAAQ,cAAc;EAAQ,UAAU;CAAE;CAC7D,OAAO;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;CAAM;CAC3D,QAAQ;EAAE,SAAS;EAAQ,gBAAgB;EAAU,cAAc;EAAO,OAAO;CAAa;AAChG,CAAC;;AAGD,IAAa,iCAAiC,IAAI,OAAO,EACvD,SAAS,YAAoB,EAAE,OAAO,GACxC,CAAC;;AAGD,IAAa,oBAAoB,0BAC/B,QAAA,SAW8B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAC,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAC,SAAA,QAAA,gBATsB,CAAA,GAAE,KAAA,IAAA;CAAA,MAAA,QAAAD,aAAA,QAAA,eAC5C,CAAC,MAAM,CAAC;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,cAGH,OAAO;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAIjB,OAAIE,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,MAAM,MAAGC,cAAA,UAAA,KAAA;CACT,IAAI,SACF,MACI,mBAAkC,qBAAqB,OAAO,CAAA,CAAE,IAC/D,IAAmB,CAAA,CAAE;CAE5B,IAAI,OAAIC,IAAgB,KAAK;CAC7B,IAAI,QAAKA,IAAU,EAAE;CACrB,IAAI,OAAIA,IAAyB,CAAA,CAAE;CACnC,IAAI,OAAIC,WAAkC,IAAI;CAE9C,MAAM,kBAAkB,CAAC,CAAC,OAAA,MAAO,UAAU,MAAA,MAAM,KAAK,MAAM;CAC5D,MAAM,QAAQ,YACX,QAA4B,WAAW,OAAA,MAAO,SAAS,QAAQ,MAAM,GACtE;EAAE,cAAc,KAAA,MAAK,GAAG,EAAE,KAAK;EAAM,cAAc;CAAM,CAC3D;CACA,MAAM,QAAQ,YAAY,MAAc,WAAW,OAAA,MAAO,OAAQ,MAAM,MAAM,GAAG;EAC/E,cAAc,MAAA,MAAM,KAAK;EACzB,UAAU;EACV,WAAW;EACX,cAAc;EACd,SAAS;CACX,CAAC;CACD,MAAM,QAAQ,YAAY,GAAc,WAAW,OAAA,MAAO,MAAO,MAAM,GAAG,EACxE,WAAW,MACb,CAAC;CACD,YACE,KAAA,QACC,SAAS;EACR,IAAI,SAAS,WAAW,MAAM,QAAQ,QAAQ,CAAC,MAAM,SACnD,MAAW,QAAQ;CAEvB,CACF;CAEA,MAAM,cAAsB;EAC1B;EACA,GAAI,OAAA,MAAO,QAAS,CAAC,OAAO,IAAc,CAAA;EAC1C,GAAI,MAAO,CAAC,QAAQ,IAAc,CAAA;CAAG;CAEvC,MAAM,YAAwC;EAC5C,WAAW,KAAK;EAChB,aAAa,KAAK;EAClB,cAAc,KAAK;CACrB;;CAGA,MAAM,cAAmE;EAEvE,IAAI,UAAU,GACZ,OAAO;GACL,OAAO,MAAM,QAAQ,CAAA;GACrB,SAAS,MAAM,WAAY,MAAM,SAAS,KAAA,KAAa,CAAC,MAAM;EAChE;EAEF,IAAI,KAAA,UAAS,SAAS,OAAO;GAAE,OAAO,MAAM,QAAQ,CAAA;GAAI,SAAS,MAAM;EAAQ;EAC/E,IAAI,KAAA,UAAS,UAAU,OAAO;GAAE,OAAK,OAAA;GAAU,SAAS;EAAM;EAC9D,OAAO;GAAE,OAAO,MAAM,QAAQ,CAAA;GAAI,SAAS,MAAM;EAAQ;CAC3D;CAEA,MAAM,eAAYC,eAAY,IAAI,IAAI,MAAA,MAAM,IAAI,SAAS,CAAC,CAAC;CAC3D,MAAM,YAAY,UAAuB,MAAA,MAAM,SAAS,MAAM,IAAI;CAClE,MAAM,aAAa,UACjB,MAAM,SAAS,gBAAgB,MAAM,gBAAgB;CACvD,MAAM,aAAa,IAAA,SAAO,QAAQ,IAAA,QAAM,KAAK,MAAA,MAAM,UAAM,IAAA;CAEzD,SAAS,SAAS,OAAoB;EACpC,IAAI,CAAC,KAAK;EACV,OAAA,QAAS,CACP,cAAc,KAAK,GACnB,GAAG,OAAA,MAAO,QAAQ,SAAS,UAAU,IAAI,MAAM,UAAU,KAAK,CAAC,CAAC,CACjE,CAAC,MAAM,GAAG,YAAY;CACzB;CAEA,SAAS,OAAO,OAAoB;EAClC,MAAM,KAAK,UAAU,KAAK;EAC1B,IAAI,aAAA,MAAa,IAAI,EAAE,GAAG;GACxB,MAAA,QAAQ,MAAA,MAAM,QAAQ,SAAS,UAAU,IAAI,MAAM,EAAE;GACrD;EACF;EACA,IAAI,IAAA,UAAQ,GAAG,MAAA,QAAQ,CAAC,cAAc,KAAK,CAAC;OACvC,IAAI,KAAK,GAAG;OACZ,MAAA,QAAQ,CAAC,GAAA,MAAA,OAAU,cAAc,KAAK,CAAC;EAC5C,SAAS,KAAK;CAChB;;CAGA,SAAS,UAAU,OAA+B;EAChD,MAAM,aAAa,MAAM,OAAO,QAAQ;EACxC,IAAI,WAAW,OAAO,UAAU,aAAA,MAAa,IAAI,UAAU,KAAK,CAAC,CAAC,GAAG;GACnE,MAAM,OAAO,IAAI,IAAI,WAAW,IAAI,SAAS,CAAC;GAC9C,MAAA,QAAQ,MAAA,MAAM,QAAQ,SAAS,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,CAAC;GACzD;EACF;EACA,MAAM,SAAS,WAAW,QAAQ,UAAU,CAAC,aAAA,MAAa,IAAI,UAAU,KAAK,CAAC,CAAC;EAC/E,MAAM,OAAO,IAAA,SAAO,OAAO,KAAK,IAAI,GAAG,IAAA,QAAM,MAAA,MAAM,MAAM,IAAI,OAAO;EACpE,MAAA,QAAQ,CAAC,GAAA,MAAA,OAAU,GAAG,OAAO,MAAM,GAAG,IAAI,CAAC,CAAC,IAAI,aAAa,CAAC;CAChE;;CAGA,SAAS,KAAK,YAAyB;EACrC,KAAA,QAAO,UAAU,IAAI,CAAC,UAAU,IAAI,CAAC,GAAA,KAAA,OAAS,UAAU;EACxD,MAAA,QAAQ;EACR,KAAA,QAAO;EACP,eAAoB,KAAA,OAAM,MAAM,CAAC;CACnC;CAEA,SAAS,WAAW,OAAoB,OAAmB;EAEzD,IAAK,MAAM,OAAmB,QAAQ,sBAAsB,GAAG;EAC/D,IAAI,SAAS,KAAK,GAAG,OAAO,KAAK;OAC5B,IAAI,UAAU,KAAK,GAAG,KAAK,KAAK;CACvC;;CAGA,MAAM,SAAS,UACb,MAAM,SAAS,SAAMC,YAAA,QAAA;EAAA,QACL,MAAM;EAAI,OAAO,MAAM;EAAM,QAAA;CAAA,GAAA,IAAA,IAAAA,YAAA,QAAA;EAAA,QAAA;EAAA,YAAAA,YAAA,MAAA,EAAA,QAInB,MAAM,SAAS,eAAe,WAAW,kBAAiB,GAAA,IAAA;CAAA,GAAA,IAAA;CAItF,SAAS,UAAU,OAAgC;EACjD,MAAM,KAAK,UAAU,KAAK;EAC1B,MAAM,UAAU,aAAA,MAAa,IAAI,EAAE;EACnC,OAAAA,YAAA,cAAA;GAAA,OAES;GAAE,SAAAA,YAAA,QAEK,IAAI,MAAM,wBAAwB,KAAK,GAAC,CAC/C,SAAS,KAAK,KAACA,YAAA,UAAA;IAAA,YAEF;IAAO,2BACQ,OAAO,KAAK;IAAC,YAC5B,CAAC,WAAW,KAAK;IAAC,cAChB,MAAM;GAAI,GAAA,IAAA,GAGzB,MAAM,KAAK,CAAC,CAAA;GAAA,SAGV,MAAM;GAAI,eACJ,MAAM;GAAW,OAE5B,UAAU,KAAK,KAACA,YAAA,QAAA;IAAA,WAAA;IAAA,QAAA;IAAA,WAIH;IAAY,cACT,KAAK,WAAW,MAAM,IAAI;IAAC,iBACxB,KAAK,KAAK;GAAC,GAAA;IAAA,eAAA,CAEzB,KAAK,cAAc;IAAA,SAAA;GAAA,CAAA;GAEvB,YAEO,UAAsB,WAAW,OAAO,KAAK;EAAC,GAAA,IAAA;CAG9D;CAEA,SAAS,eAA2B;EAAA,IAAA,QAAA;EAClC,MAAM,EAAE,OAAO,YAAY,MAAM;EACjC,MAAM,aAAa,MAAM,OAAO,QAAQ;EACxC,MAAM,eAAe,WAAW,QAAQ,UAAU,aAAA,MAAa,IAAI,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC;EACtF,MAAM,SAAS,+BAA+B,OAAM,WAAA,KAAW;EAC/D,OAAAA,YAAA,OACW,WAAkB,EAAE,IAAI,wBAAwB,OAAO,GAAC,YAAA,KAAa,GAAC;GAC5E,OAAA,MAAO,UAAMA,YAAA,WAAAC,cAEN,eACF;IACE,MAAM;IACN,aAAa,KAAK;IAClB,cAAc,KAAK;IACnB,WAAW;GACb,GAAC,YAAA,KAEH,GAAC;IAAA,UAAA,MAAA;IAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;GAAA,CAAA,GAAA,IAAA;GAIJ,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,SAAS,KAACD,YAAA,aAAA;IAAA,UAAA,KAAA;IAAA,mBAAA,OAAA,OAAA,OAAA,MAGb,SAAS,SAAS,KAAA,QAAO;IAAa,YAAA;IAAA,QAAA;IAAA,cAG5C,KAAK;GAAW,GAAA,QAAA,SAE3B,MAAM,CAAC,CAAC,KAAK,SAAI;IAAA,IAAA;IAAA,OAAAA,YAAA,YAAA;KAAA,OACC;KAAI,SAAS;IAAI,GAAA,QAAA,QAC/B,UAAU,KAAK,CAAC,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;GAAA,CAErB,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA;GAGL,CAAC,UAAU,KAAK,KAAA,UAAS,SAAKA,YAAA,aAAA;IAAA,SAEpB,CACL;KAAE,KAAK;KAAI,OAAO,KAAK;IAAW,GAClC,GAAG,KAAA,MAAK,KAAK,gBAAgB;KAC3B,KAAK,UAAU,UAAU;KACzB,OAAO,WAAW;IACpB,EAAE,CAAC;IACJ,cAAA,OAAA,OAAA,OAAA,MACY,GAAG,UAAW,KAAA,QAAO,KAAA,MAAK,MAAM,GAAG,KAAK;GAAE,GAAA,IAAA;GAG1D,IAAA,UAAQ,KAAK,WAAW,SAAS,KAACA,YAAA,UAAA;IAAA,YAErB,iBAAiB,WAAW;IAAM,iBAC7B,eAAe,KAAK,eAAe,WAAW;IAAM,2BAC1C,UAAU,KAAK;IAAC,QAAA;GAAA,GAAA;IAAA,eAAA,CAGxC,KAAK,eAAe;IAAA,SAAA;GAAA,CAAA;GAExBA,YAAA,OAAAC,cAEK,IAAI,MAAM,wBAAwB,MAAM,MAAM,GAAC;IAAA,OAAA,OAAA,OAAA,OAAA,MAC7C,YAAsB,KAAA,QAAO;IAA8B,YACvD;GAAE,CAAA,GAAA,CAEX,UAAOD,YAAA,OACG,IAAI,MAAM,wBAAwB,MAAM,GAAC,CAAAA,YAAA,SAAA,EAAA,SAChC,KAAK,QAAO,GAAA,IAAA,CAAA,CAAA,IAE5B,MAAM,WAAW,IAACA,YAAA,OAAA,EAAA,MACT,wBAAwB,OAAM,GAAA;IAAA,eAAA,CACtC,UAAU,IAAI,KAAK,iBAAiB,KAAK,WAAW;IAAA,SAAA;GAAA,CAAA,IAAAA,YAAA,UAAA;IAAA,aAAA;IAAA,WAAA;IAAA,cAMzC,UAAU,UAAU,IAAI,QAAK,KAAA,MAAQ,CAAC;GAAC,GAAA,QAAA,SAElD,MAAM,IAAI,SAAS,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA,CAExB,CAAA;EAAA,CAAA;CAIT;CAEA,SAAS,iBAA6B;EACpC,OAAAA,YAAA,OACW,WAAkB,EAAE,IAAI,wBAAwB,SAAS,GAAC,cAAA,KAAe,GAAC,CAAAA,YAAA,OACxE,IAAI,MAAM,wBAAwB,MAAM,GAAC,CAAAA,YAAA,QAAA,EAAA,QAAA,KAAA,GAAA;GAAA,eAAA,CAC7B,KAAK,YAAY,MAAA,MAAM,QAAM,IAAA,KAAK,CAAC;GAAA,SAAA;EAAA,CAAA,GACrD,MAAA,MAAM,SAAS,KAACA,YAAA,QAAA;GAAA,WAAA;GAAA,QAAA;GAAA,WAAA,OAAA,OAAA,OAAA,WACkC,MAAA,QAAQ,CAAA;EAAG,GAAA;GAAA,eAAA,CACzD,KAAK,KAAK;GAAA,SAAA;EAAA,CAAA,CAEd,CAAA,GAAAA,YAAA,OAGG,IAAI,MACN,wBAAwB,MACxB,+BAA+B,OAAM,WAAA,KAAW,CAClD,GAAC,CAEA,MAAA,MAAM,WAAW,IAACA,YAAA,OAAA,EAAA,MACN,wBAAwB,OAAM,GAAA;GAAA,eAAA,CAAG,KAAK,qBAAqB;GAAA,SAAA;EAAA,CAAA,IAAAA,YAAA,UAAA;GAAA,WAAA;GAAA,cAE9B,KAAK;EAAc,GAAA;GAAA,eAAA,CACxD,MAAA,MAAM,KAAK,UAAKA,YAAA,cAAA;IAAA,OAER,UAAU,KAAK;IAAC,SACd,MAAM,KAAK;IAAC,SACZ,MAAM;IAAI,eACJ,MAAM,eAAe,KAAK,YAAY,MAAM;IAAK,OAAAA,YAAA,YAAA;KAAA,QAGpD;KAAC,WAAA;KAAA,QAAA;KAAA,cAGK,KAAK,aAAa,MAAM,IAAI;KAAC,iBAC1B,OAAO,KAAK;IAAC,GAAA,IAAA;GAAA,GAAA,IAAA,CAInC,CAAC;GAAA,SAAA;EAAA,CAAA,CAEL,CAAA,CAAA,CAAA;CAIT;CAEA,aAAOA,YAAA,OACI,WAAkB,EAAE,IAAI,wBAAwB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,OAC3D,IAAI,MAAM,wBAAwB,IAAI,GAAC,CAC7C,aAAa,GACb,eAAe,CAAC,CAAA,CAAA,CAAA;AAIzB,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/input/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type ListboxOption, type OptionMapping } from './list-state';
 import { type PartProps } from '../utils/props';

package/dist/input/Radio.js

@@ -7,7 +7,7 @@ import { toListboxOption } from "./list-state.js";
 import { choiceInputStyles, choiceParts, choiceRecipe, readonlyChoiceHandlers, syncChecked, useChoiceAppearance } from "./choice-styles.js";
 import { createVNode, useId } from "vue";
 import { _component, bindable, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/input/Radio.tsx
 /** RadioGroup 交给组内 Radio 的状态 */
 /** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */

package/dist/input/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/Radio.tsx"],"sourcesContent":["/**\n * 单选组（role=\"radiogroup\"）与单选项（原生 input type=\"radio\"）。结构与样式见 choice-styles.ts。\n *\n *   <Field label=\"配送方式\">\n *     <RadioGroup _value={shipping}>\n *       <Radio value=\"express\">快递</Radio>\n *       <Radio value=\"pickup\">自提</Radio>\n *     </RadioGroup>\n *   </Field>\n *\n * 同一组的原生 radio 共用一个 name：Tab 只停在选中项（没有选中时停在第一项），方向键在组内移动并选中，\n * 这些都是浏览器的原生行为，不需要漫游焦点。组以 Field 的标签为名称（aria-labelledby），关联说明与错误。\n *\n * 部件（Radio）：Root（label）、Control（叠放层）、Indicator（圆点）、Label（文字）；未声明的属性落到 input 上。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { useFieldControl } from '../form/Field';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { hasContent, defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport type { TextSize } from '../utils/style/typography';\nimport { useRecipe } from '../config/styles';\nimport {\n  choiceInputStyles,\n  choiceParts,\n  choiceRecipe,\n  useChoiceAppearance,\n  type ChoiceOrientations,\n  readonlyChoiceHandlers,\n  syncChecked,\n} from './choice-styles';\nimport { t } from '../config/theme/tokens';\n\n/** RadioGroup 交给组内 Radio 的状态 */\nexport interface RadioGroupState {\n  /** 选中的值 */\n  readonly value: string | null;\n  /** 原生单选框的 name：同组共用，方向键在组内移动 */\n  readonly name: string;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读 */\n  readonly readonly: boolean;\n  /** 必填 */\n  readonly required: boolean;\n  /** 整组校验未通过 */\n  readonly invalid: boolean;\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 选中时的色调 */\n  readonly tone: StatusTone;\n  /** 选中一个值 */\n  select(value: string): void;\n}\n\n/** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */\nexport const RadioGroupContext = createContext<RadioGroupState>('RadioGroup');\n\n/** 未声明的属性落到 div（role=\"radiogroup\"）上 */\nexport interface RadioGroupBaseProps<T> extends PartProps<'div', 'role'> {\n  /** 选中项的值：父级写 _value={x}；没有选中时是 null */\n  _value?: string | null;\n  /** 表单提交时的 name；不写时自动生成（同组的 radio 要共用一个 name 才互斥） */\n  name?: string;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：能聚焦、读屏念“只读”，选中项不能改（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */\n  tone?: StatusTone;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof ChoiceOrientations;\n  /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */\n  items?: readonly T[];\n  /** Radio；不写时按 items 生成 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */\nexport type RadioGroupProps<T = ListboxOption> = RadioGroupBaseProps<T> & OptionMapping<T>;\n\n/** 单选组：value 是选中项的值 */\nexport const RadioGroup = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string | null>(null),\n    name,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    size,\n    tone,\n    orientation = 'vertical',\n    id,\n    items,\n    toOption,\n    children,\n    ...rest\n  }: RadioGroupProps<T>) => {\n    const generatedName = useId();\n    const control = useFieldControl(() => ({ id, disabled, readonly, required, invalid }));\n    const appearance = useChoiceAppearance(() => ({ size, tone }));\n    RadioGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get name() {\n        return name ?? generatedName;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get required() {\n        return control().required;\n      },\n      get invalid() {\n        return control().invalid;\n      },\n      get size() {\n        return appearance().size;\n      },\n      get tone() {\n        return appearance().tone;\n      },\n      select: (next) => (value = next),\n    });\n\n    return () => {\n      const state = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(appearance().recipe({ orientation }).group, rest, {\n            id: state.id,\n            role: 'radiogroup',\n            'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n            'aria-describedby': state.describedBy,\n            'aria-invalid': state.invalid || undefined,\n            'aria-required': state.required || undefined,\n            'aria-readonly': state.readonly || undefined,\n          })}\n          data-orientation={orientation}\n          data-disabled={state.disabled || undefined}\n          data-readonly={state.readonly || undefined}\n        >\n          {children ??\n            items?.map((item) => {\n              const option = toListboxOption(item, toOption);\n              return (\n                <Radio\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled || undefined}\n                  description={option.description}\n                >\n                  {option.label}\n                </Radio>\n              );\n            })}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、名称与可用性由组管理 */\nexport type RadioManaged = 'type' | 'name' | 'checked' | 'required' | 'size' | 'value';\n\n/** 未声明的属性落到 input 上；外层 label 用 propsRoot */\nexport interface RadioProps extends PartProps<'input', RadioManaged> {\n  /** 这一项的值 */\n  value: string;\n  /** 这一项不可用 */\n  disabled?: boolean;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 叠放层的部件属性 */\n  propsControl?: PartProps<'span'>;\n  /** 圆点的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 文字下方的说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup、Radio 的样式：circle、dot、dotChecked */\nexport const radioStyles = css.create({\n  circle: { width: '1.125em', height: '1.125em', borderRadius: '_full' },\n  dot: {\n    width: '0.45em',\n    height: '0.45em',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-on-fill)',\n    transform: 'scale(0)',\n    transition: `transform ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dotChecked: { transform: 'none' },\n});\n\n/** 单选项：放在 RadioGroup 里 */\nexport const Radio = _component(\n  ({\n    value,\n    disabled,\n    propsRoot,\n    propsControl,\n    propsIndicator,\n    propsLabel,\n    description,\n    propsDescription,\n    children,\n    ...rest\n  }: RadioProps) => {\n    const group = RadioGroupContext.inject();\n    const descriptionId = `${useId()}-description`;\n    const recipe = useRecipe(choiceRecipe);\n    return () => {\n      const checked = group.value === value;\n      const off = disabled ?? group.disabled;\n      const s = choiceParts(\n        { size: group.size, tone: group.tone, recipe },\n        { disabled: off, readonly: group.readonly },\n      );\n      return (\n        <label\n          {...mergeAttrs<'label'>(s.root, propsRoot)}\n          data-state={checked ? 'checked' : 'unchecked'}\n          data-disabled={off || undefined}\n          data-readonly={group.readonly || undefined}\n        >\n          <span {...mergeAttrs<'span'>(s.control, propsControl)}>\n            <input\n              {...mergeAttrs<'input'>(\n                {\n                  ...s.input,\n                  sx: [\n                    s.input.sx,\n                    focusRingStyles.tight,\n                    radioStyles.circle,\n                    checked && choiceInputStyles.checked,\n                    group.invalid && choiceInputStyles.invalid,\n                  ],\n                },\n                rest,\n                {\n                  type: 'radio',\n                  name: group.name,\n                  value,\n                  checked,\n                  disabled: off,\n                  required: group.required,\n                  'aria-describedby': hasContent(description) ? descriptionId : undefined,\n                  onChange: (event: Event) => {\n                    group.select(value);\n                    // 浏览器已经取消了同组原来选中的那个：整组一起对回父级的值\n                    const radios = (event.target as HTMLElement)\n                      .closest('[role=\"radiogroup\"]')\n                      ?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]');\n                    syncChecked([...(radios ?? [])], (input) => input.value === group.value);\n                  },\n                  ...(group.readonly && readonlyChoiceHandlers),\n                },\n              )}\n            />\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  ...s.indicator,\n                  sx: [s.indicator.sx, radioStyles.dot, checked && radioStyles.dotChecked],\n                },\n                propsIndicator,\n              )}\n            />\n          </span>\n          {(hasContent(children) || hasContent(description)) && (\n            <span {...mergeAttrs<'span'>(s.label, propsLabel)}>\n              {children}\n              {hasContent(description) && (\n                <span\n                  {...mergeAttrs<'span'>(s.description, propsDescription, {\n                    id: descriptionId,\n                  })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/Radio.tsx"],"sourcesContent":["/**\n * 单选组（role=\"radiogroup\"）与单选项（原生 input type=\"radio\"）。结构与样式见 choice-styles.ts。\n *\n *   <Field label=\"配送方式\">\n *     <RadioGroup _value={shipping}>\n *       <Radio value=\"express\">快递</Radio>\n *       <Radio value=\"pickup\">自提</Radio>\n *     </RadioGroup>\n *   </Field>\n *\n * 同一组的原生 radio 共用一个 name：Tab 只停在选中项（没有选中时停在第一项），方向键在组内移动并选中，\n * 这些都是浏览器的原生行为，不需要漫游焦点。组以 Field 的标签为名称（aria-labelledby），关联说明与错误。\n *\n * 部件（Radio）：Root（label）、Control（叠放层）、Indicator（圆点）、Label（文字）；未声明的属性落到 input 上。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { useFieldControl } from '../form/Field';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { hasContent, defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport type { TextSize } from '../utils/style/typography';\nimport { useRecipe } from '../config/styles';\nimport {\n  choiceInputStyles,\n  choiceParts,\n  choiceRecipe,\n  useChoiceAppearance,\n  type ChoiceOrientations,\n  readonlyChoiceHandlers,\n  syncChecked,\n} from './choice-styles';\nimport { t } from '../config/theme/tokens';\n\n/** RadioGroup 交给组内 Radio 的状态 */\nexport interface RadioGroupState {\n  /** 选中的值 */\n  readonly value: string | null;\n  /** 原生单选框的 name：同组共用，方向键在组内移动 */\n  readonly name: string;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读 */\n  readonly readonly: boolean;\n  /** 必填 */\n  readonly required: boolean;\n  /** 整组校验未通过 */\n  readonly invalid: boolean;\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 选中时的色调 */\n  readonly tone: StatusTone;\n  /** 选中一个值 */\n  select(value: string): void;\n}\n\n/** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */\nexport const RadioGroupContext = createContext<RadioGroupState>('RadioGroup');\n\n/** 未声明的属性落到 div（role=\"radiogroup\"）上 */\nexport interface RadioGroupBaseProps<T> extends PartProps<'div', 'role'> {\n  /** 选中项的值：父级写 _value={x}；没有选中时是 null */\n  _value?: string | null;\n  /** 表单提交时的 name；不写时自动生成（同组的 radio 要共用一个 name 才互斥） */\n  name?: string;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：能聚焦、读屏念“只读”，选中项不能改（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */\n  tone?: StatusTone;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof ChoiceOrientations;\n  /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */\n  items?: readonly T[];\n  /** Radio；不写时按 items 生成 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */\nexport type RadioGroupProps<T = ListboxOption> = RadioGroupBaseProps<T> & OptionMapping<T>;\n\n/** 单选组：value 是选中项的值 */\nexport const RadioGroup = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string | null>(null),\n    name,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    size,\n    tone,\n    orientation = 'vertical',\n    id,\n    items,\n    toOption,\n    children,\n    ...rest\n  }: RadioGroupProps<T>) => {\n    const generatedName = useId();\n    const control = useFieldControl(() => ({ id, disabled, readonly, required, invalid }));\n    const appearance = useChoiceAppearance(() => ({ size, tone }));\n    RadioGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get name() {\n        return name ?? generatedName;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get required() {\n        return control().required;\n      },\n      get invalid() {\n        return control().invalid;\n      },\n      get size() {\n        return appearance().size;\n      },\n      get tone() {\n        return appearance().tone;\n      },\n      select: (next) => (value = next),\n    });\n\n    return () => {\n      const state = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(appearance().recipe({ orientation }).group, rest, {\n            id: state.id,\n            role: 'radiogroup',\n            'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n            'aria-describedby': state.describedBy,\n            'aria-invalid': state.invalid || undefined,\n            'aria-required': state.required || undefined,\n            'aria-readonly': state.readonly || undefined,\n          })}\n          data-orientation={orientation}\n          data-disabled={state.disabled || undefined}\n          data-readonly={state.readonly || undefined}\n        >\n          {children ??\n            items?.map((item) => {\n              const option = toListboxOption(item, toOption);\n              return (\n                <Radio\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled || undefined}\n                  description={option.description}\n                >\n                  {option.label}\n                </Radio>\n              );\n            })}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、名称与可用性由组管理 */\nexport type RadioManaged = 'type' | 'name' | 'checked' | 'required' | 'size' | 'value';\n\n/** 未声明的属性落到 input 上；外层 label 用 propsRoot */\nexport interface RadioProps extends PartProps<'input', RadioManaged> {\n  /** 这一项的值 */\n  value: string;\n  /** 这一项不可用 */\n  disabled?: boolean;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 叠放层的部件属性 */\n  propsControl?: PartProps<'span'>;\n  /** 圆点的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 文字下方的说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup、Radio 的样式：circle、dot、dotChecked */\nexport const radioStyles = css.create({\n  circle: { width: '1.125em', height: '1.125em', borderRadius: '_full' },\n  dot: {\n    width: '0.45em',\n    height: '0.45em',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-on-fill)',\n    transform: 'scale(0)',\n    transition: `transform ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dotChecked: { transform: 'none' },\n});\n\n/** 单选项：放在 RadioGroup 里 */\nexport const Radio = _component(\n  ({\n    value,\n    disabled,\n    propsRoot,\n    propsControl,\n    propsIndicator,\n    propsLabel,\n    description,\n    propsDescription,\n    children,\n    ...rest\n  }: RadioProps) => {\n    const group = RadioGroupContext.inject();\n    const descriptionId = `${useId()}-description`;\n    const recipe = useRecipe(choiceRecipe);\n    return () => {\n      const checked = group.value === value;\n      const off = disabled ?? group.disabled;\n      const s = choiceParts(\n        { size: group.size, tone: group.tone, recipe },\n        { disabled: off, readonly: group.readonly },\n      );\n      return (\n        <label\n          {...mergeAttrs<'label'>(s.root, propsRoot)}\n          data-state={checked ? 'checked' : 'unchecked'}\n          data-disabled={off || undefined}\n          data-readonly={group.readonly || undefined}\n        >\n          <span {...mergeAttrs<'span'>(s.control, propsControl)}>\n            <input\n              {...mergeAttrs<'input'>(\n                {\n                  ...s.input,\n                  sx: [\n                    s.input.sx,\n                    focusRingStyles.tight,\n                    radioStyles.circle,\n                    checked && choiceInputStyles.checked,\n                    group.invalid && choiceInputStyles.invalid,\n                  ],\n                },\n                rest,\n                {\n                  type: 'radio',\n                  name: group.name,\n                  value,\n                  checked,\n                  disabled: off,\n                  required: group.required,\n                  'aria-describedby': hasContent(description) ? descriptionId : undefined,\n                  onChange: (event: Event) => {\n                    group.select(value);\n                    // 浏览器已经取消了同组原来选中的那个：整组一起对回父级的值\n                    const radios = (event.target as HTMLElement)\n                      .closest('[role=\"radiogroup\"]')\n                      ?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]');\n                    syncChecked([...(radios ?? [])], (input) => input.value === group.value);\n                  },\n                  ...(group.readonly && readonlyChoiceHandlers),\n                },\n              )}\n            />\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  ...s.indicator,\n                  sx: [s.indicator.sx, radioStyles.dot, checked && radioStyles.dotChecked],\n                },\n                propsIndicator,\n              )}\n            />\n          </span>\n          {(hasContent(children) || hasContent(description)) && (\n            <span {...mergeAttrs<'span'>(s.label, propsLabel)}>\n              {children}\n              {hasContent(description) && (\n                <span\n                  {...mergeAttrs<'span'>(s.description, propsDescription, {\n                    id: descriptionId,\n                  })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}