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

package/dist/input/TagsInput.js

@@ -13,7 +13,7 @@ import { FormValue } from "../form/FormValue.js";
 import { ListPopover } from "./ListPopover.js";
 import { Fragment, createVNode, isVNode, shallowRef, useId, vModelText, watch, withDirectives } from "vue";
 import { _component, bindable, childrenProp, 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/TagsInput.tsx
 /** 角色、展开状态与可用性由组件管理 */
 /** TagsInput 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */

package/dist/input/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/TagsInput.tsx"],"sourcesContent":["/**\n * 标签输入（多选的组合框）：输入框里排着已选的 Tag，输入文字后回车（或输入逗号）加一个，可以从建议列表里选。\n * 关键词、收件人、标签、多个城市。参考 Mantine TagsInput、React Aria TagGroup + ComboBox。\n *\n *   <TagsInput _value={keywords} aria-label=\"关键词\" />                          自由输入\n *   <TagsInput _value={cities} items={cityOptions} allowCustomValue={false} />   只能从建议里选\n *\n * - 回车、输入分隔符（默认 , ， ; ；）把文字加成标签；粘贴时按分隔符与换行拆成多个；重复的不加；\n * - 输入框为空时按退格删掉最后一个标签；每个标签有移除按钮（离场后其余的平移补位）；\n * - 有 items 时边输入边过滤建议（同 Combobox），↑↓ 移动、回车加入或移除高亮项（已选的打勾）；\n *   异步取建议时绑定 inputValue 去请求、写 filter={false} 与 loading，结果没回来时列表显示加载中；\n * - 写了 name 时每个值一个隐藏的 input 随表单提交。\n *\n * 未声明的属性落到 input（主元素）上。部件：Root（外壳）、Tag、Input、Clear、Popover、Listbox。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { Tag, type TagProps } from '../base/Tag';\nimport { useTextMatcher } from '../config/context';\nimport { isComposingKey } from '../utils/dom/hotkeys';\nimport { useAnchoredPopover, type FloatingPlacement } from '../utils/dom/floating';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { ListPopover } from './ListPopover';\nimport { useLayoutAnimation } from '../utils/motion/layout';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  controlClear,\n  controlParts,\n  focusOnShell,\n  controlIcon,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  useSelectedOptions,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\n\n/** 角色、展开状态与可用性由组件管理 */\nexport type TagsInputManaged =\n  | 'value'\n  | 'role'\n  | 'size'\n  | 'disabled'\n  | 'readonly'\n  | 'autocomplete'\n  | 'aria-autocomplete'\n  | 'aria-expanded'\n  | 'aria-controls'\n  | 'aria-activedescendant'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-describedby';\n\n/** TagsInput 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */\nexport interface TagsInputBaseProps<T>\n  extends\n    PartProps<'input', TagsInputManaged>,\n    ControlOptions,\n    ControlIconOptions,\n    OpenChangeProps {\n  /** 已选的值：父级写 _value={list} */\n  _value?: string[];\n  /** 建议：ListboxOption、字符串，或任意数据加 toOption；不给时是纯自由输入 */\n  items?: readonly T[];\n  /** 允许加入不在建议里的文字，默认 true */\n  allowCustomValue?: boolean;\n  /** 失焦时把输入框里还没确认的文字加成标签，默认 true（同 Mantine）；false 时文字留在框里 */\n  acceptOnBlur?: boolean;\n  /** 把输入拆成标签的分隔符，默认 [',', '，', ';', '；']；回车与粘贴里的换行总是分隔 */\n  delimiters?: readonly string[];\n  /** 最多几个标签；到了上限不再加入 */\n  max?: number;\n  /** 输入框里的文字：父级可以写 _inputValue={x}（异步取建议时据此搜索） */\n  _inputValue?: string;\n  /** 建议列表是否打开 */\n  _open?: boolean;\n  /** 过滤建议：默认按显示文字包含输入；false 不过滤（异步搜索） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 正在取建议 */\n  loading?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有标签时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时的 name（每个值一个隐藏的 input） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：标签不能移除，不能输入 */\n  readonly?: boolean;\n  /** 必填：至少要有一个标签（读屏念“必填”；校验交给表单） */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 自定义建议的内容 */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 每个标签的部件属性，可以按值计算 */\n  propsTag?: Partial<TagProps> | ((value: string) => Partial<TagProps>);\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 建议列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 标签输入的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type TagsInputProps<T = ListboxOption> = TagsInputBaseProps<T> & OptionMapping<T>;\n\n/** TagsInput 的样式：root、input、popover */\nexport const tagsInputStyles = css.create({\n  // 标签多了换行；行与行之间留出间距\n  root: { flexWrap: 'wrap', rowGap: '_xs', paddingBlock: '_xs' },\n  // 输入框至少留出几个字的位置，放不下时换到下一行\n  input: { flexBasis: '6em' },\n});\n\n/** 默认的分隔符：英文、中文的逗号与分号 */\nconst DELIMITERS = [',', '，', ';', '；'];\n\n/** 标签输入：输入框里排着 Tag，回车或分隔符加入，退格删最后一个 */\nexport const TagsInput = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string[]>([]),\n    items = [],\n    toOption,\n    allowCustomValue = true,\n    acceptOnBlur = true,\n    delimiters = DELIMITERS,\n    max,\n    _inputValue: inputValue = _bindable(''),\n    _open: open = _bindable(false),\n    onOpenChange,\n    filter,\n    loading = false,\n    placement = 'bottom-start',\n    clearable = false,\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    children,\n    propsRoot,\n    icon,\n    propsIcon,\n    propsTag,\n    propsClear,\n    propsPopover,\n    propsListbox,\n    ...rest\n  }: TagsInputProps<T>) => {\n    const textMatcher = useTextMatcher();\n    const listId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let shell = _state.raw<HTMLElement | null>(null);\n    let input = _state.raw<HTMLInputElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 标签增删时其余的平移补位\n    const layout = useLayoutAnimation(() => shell, { children: '[data-tag]' });\n\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n    // 异步搜索（filter={false}）时结果可能还没回来：建议列表与 combobox 角色一直在，等待时显示加载中\n    const suggestions = () => items.length > 0 || filter === false;\n    // 标签的文字：异步建议换了 items 之后，已选的仍按之前见过的文字显示；自定义的值就是文字\n    const selectedOf = useSelectedOptions({ items: () => items, toOption: optionOf });\n    const labelOf = (tag: string) => selectedOf([tag])[0]!.label;\n\n    const list = useListState({\n      items: () => {\n        const query = inputValue.trim();\n        if (filter === false || !query) return items;\n        const matcher = textMatcher();\n        return items.filter((item) =>\n          filter ? filter(item, query) : matcher(optionOf(item).label, query),\n        );\n      },\n      toOption: optionOf,\n      selected: () => value,\n      mode: () => 'multiple',\n      onChange: (next) => void layout.change(() => (value = [...next])),\n    });\n\n    /** 把一段文字变成值：是建议的文字或值时取建议的值，否则（允许时）原样 */\n    function resolve(text: string): string | undefined {\n      const trimmed = text.trim();\n      if (!trimmed) return undefined;\n      const item = items.find((candidate) => {\n        const option = optionOf(candidate);\n        return option.value === trimmed || option.label === trimmed;\n      });\n      if (item !== undefined) return optionOf(item).value;\n      return allowCustomValue ? trimmed : undefined;\n    }\n\n    /** 加入几段文字；重复的、超出上限的不加；返回是否加入了 */\n    function add(texts: readonly string[]) {\n      const next = [...value];\n      for (const text of texts) {\n        const tag = resolve(text);\n        if (tag === undefined || next.includes(tag) || (max != null && next.length >= max))\n          continue;\n        next.push(tag);\n      }\n      if (next.length === value.length) return false;\n      void layout.change(() => (value = next));\n      return true;\n    }\n\n    const remove = (tag: string) =>\n      void layout.change(() => (value = value.filter((item) => item !== tag)));\n\n    const splitter = () =>\n      new RegExp(\n        `[${[...delimiters, '\\n', '\\r', '\\t'].map((d) => d.replace(/[\\\\\\]^-]/g, '\\\\$&')).join('')}]`,\n      );\n\n    // 输入了分隔符：分隔符前的部分加成标签，剩下的留在输入框里\n    watch(\n      () => inputValue,\n      (text) => {\n        const parts = text.split(splitter());\n        if (parts.length > 1) {\n          add(parts.slice(0, -1));\n          inputValue = parts.at(-1)!;\n          return;\n        }\n        if (suggestions() && text && !control().readonly) {\n          setOpen(true, 'trigger');\n          list.move('first');\n        }\n      },\n    );\n\n    function onKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly || isComposingKey(event)) return;\n      if (event.key === 'Backspace' && !inputValue && value.length) {\n        event.preventDefault();\n        remove(value.at(-1)!);\n        return;\n      }\n      if (open && suggestions()) {\n        if (handleListKeydown(list, event, { homeEnd: false })) {\n          event.preventDefault();\n          if (event.key === 'Enter') inputValue = '';\n          return;\n        }\n      } else if (event.key === 'ArrowDown' && suggestions()) {\n        event.preventDefault();\n        list.activateDefault();\n        setOpen(true, 'trigger', event);\n        return;\n      }\n      if (event.key === 'Enter' && inputValue.trim()) {\n        event.preventDefault();\n        if (add([inputValue])) inputValue = '';\n      }\n    }\n\n    // 粘贴多段（有分隔符、换行）时拆开加入；只有一段时照常粘贴\n    function onPaste(event: ClipboardEvent) {\n      const text = event.clipboardData?.getData('text') ?? '';\n      const parts = text.split(splitter());\n      if (parts.length < 2) return;\n      event.preventDefault();\n      add(parts);\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open: open && suggestions(),\n        anchor: shell,\n        panel,\n        floating: { placement, matchWidth: true, fitHeight: true },\n        restoreFocus: false,\n      }),\n      { close: (reason, event) => setOpen(false, reason, event) },\n    );\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const editable = !state.disabled && !state.readonly;\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, tagsInputStyles.root] }, propsRoot, {\n              ref: _toRef(shell),\n              // 外壳里的标签不是原生控件的一部分：不可用要写在外壳上，辅助技术才把它们一起当作不可用\n              'aria-disabled': state.disabled || undefined,\n              onPointerdown: focusOnShell(() => input),\n            })}\n            data-state={open ? 'open' : 'closed'}\n            data-invalid={state.invalid || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {controlIcon(s, icon, propsIcon)}\n            {value.map((tag) => {\n              const own = typeof propsTag === 'function' ? propsTag(tag) : propsTag;\n              return (\n                <Tag\n                  key={tag}\n                  {...mergePartProps<TagProps>({ variant: 'surface' }, own, {\n                    onRemove: editable ? () => remove(tag) : undefined,\n                  })}\n                  data-tag=\"\"\n                >\n                  {labelOf(tag)}\n                </Tag>\n              );\n            })}\n            <input\n              {...mergeAttrs<'input'>(\n                { ...s.input, sx: [s.input.sx, tagsInputStyles.input] },\n                rest,\n                {\n                  ref: _toRef(input),\n                  id: state.id,\n                  role: suggestions() ? 'combobox' : undefined,\n                  autocomplete: 'off',\n                  disabled: state.disabled,\n                  readonly: state.readonly,\n                  'aria-autocomplete': suggestions() ? 'list' : undefined,\n                  'aria-expanded': suggestions() ? open : undefined,\n                  'aria-controls': suggestions() ? listId : undefined,\n                  'aria-activedescendant':\n                    open && suggestions() ? activeOptionId(list, listId) : undefined,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-describedby': state.describedBy,\n                  onKeydown,\n                  onPaste,\n                  onBlur: (event: FocusEvent) => {\n                    setOpen(false, 'focus', event);\n                    if (\n                      acceptOnBlur &&\n                      inputValue.trim() &&\n                      !control().readonly &&\n                      add([inputValue])\n                    )\n                      inputValue = '';\n                  },\n                },\n              )}\n              _value={inputValue}\n            />\n            {clearable &&\n              value.length > 0 &&\n              editable &&\n              controlClear(s, propsClear, () => {\n                void layout.change(() => (value = []));\n                input?.focus();\n              })}\n            <FormValue name={name} value={value} disabled={state.disabled} />\n          </div>\n          {suggestions() && (\n            <ListPopover\n              panelRef={_toRef(panel)}\n              onToggle={onToggle}\n              size={appearance().size}\n              labelledBy={state.labelledBy}\n              label={rest['aria-label']}\n              loading={loading}\n              onPick={() => {\n                inputValue = '';\n                input?.focus();\n              }}\n              listbox={{ list, id: listId, multiple: true, renderOption: children }}\n              propsListbox={propsListbox}\n              propsPopover={propsPopover}\n            />\n          )}\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/TagsInput.tsx"],"sourcesContent":["/**\n * 标签输入（多选的组合框）：输入框里排着已选的 Tag，输入文字后回车（或输入逗号）加一个，可以从建议列表里选。\n * 关键词、收件人、标签、多个城市。参考 Mantine TagsInput、React Aria TagGroup + ComboBox。\n *\n *   <TagsInput _value={keywords} aria-label=\"关键词\" />                          自由输入\n *   <TagsInput _value={cities} items={cityOptions} allowCustomValue={false} />   只能从建议里选\n *\n * - 回车、输入分隔符（默认 , ， ; ；）把文字加成标签；粘贴时按分隔符与换行拆成多个；重复的不加；\n * - 输入框为空时按退格删掉最后一个标签；每个标签有移除按钮（离场后其余的平移补位）；\n * - 有 items 时边输入边过滤建议（同 Combobox），↑↓ 移动、回车加入或移除高亮项（已选的打勾）；\n *   异步取建议时绑定 inputValue 去请求、写 filter={false} 与 loading，结果没回来时列表显示加载中；\n * - 写了 name 时每个值一个隐藏的 input 随表单提交。\n *\n * 未声明的属性落到 input（主元素）上。部件：Root（外壳）、Tag、Input、Clear、Popover、Listbox。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { Tag, type TagProps } from '../base/Tag';\nimport { useTextMatcher } from '../config/context';\nimport { isComposingKey } from '../utils/dom/hotkeys';\nimport { useAnchoredPopover, type FloatingPlacement } from '../utils/dom/floating';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { ListPopover } from './ListPopover';\nimport { useLayoutAnimation } from '../utils/motion/layout';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  controlClear,\n  controlParts,\n  focusOnShell,\n  controlIcon,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from './control';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  useSelectedOptions,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\n\n/** 角色、展开状态与可用性由组件管理 */\nexport type TagsInputManaged =\n  | 'value'\n  | 'role'\n  | 'size'\n  | 'disabled'\n  | 'readonly'\n  | 'autocomplete'\n  | 'aria-autocomplete'\n  | 'aria-expanded'\n  | 'aria-controls'\n  | 'aria-activedescendant'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-describedby';\n\n/** TagsInput 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */\nexport interface TagsInputBaseProps<T>\n  extends\n    PartProps<'input', TagsInputManaged>,\n    ControlOptions,\n    ControlIconOptions,\n    OpenChangeProps {\n  /** 已选的值：父级写 _value={list} */\n  _value?: string[];\n  /** 建议：ListboxOption、字符串，或任意数据加 toOption；不给时是纯自由输入 */\n  items?: readonly T[];\n  /** 允许加入不在建议里的文字，默认 true */\n  allowCustomValue?: boolean;\n  /** 失焦时把输入框里还没确认的文字加成标签，默认 true（同 Mantine）；false 时文字留在框里 */\n  acceptOnBlur?: boolean;\n  /** 把输入拆成标签的分隔符，默认 [',', '，', ';', '；']；回车与粘贴里的换行总是分隔 */\n  delimiters?: readonly string[];\n  /** 最多几个标签；到了上限不再加入 */\n  max?: number;\n  /** 输入框里的文字：父级可以写 _inputValue={x}（异步取建议时据此搜索） */\n  _inputValue?: string;\n  /** 建议列表是否打开 */\n  _open?: boolean;\n  /** 过滤建议：默认按显示文字包含输入；false 不过滤（异步搜索） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 正在取建议 */\n  loading?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有标签时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时的 name（每个值一个隐藏的 input） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：标签不能移除，不能输入 */\n  readonly?: boolean;\n  /** 必填：至少要有一个标签（读屏念“必填”；校验交给表单） */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 自定义建议的内容 */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 每个标签的部件属性，可以按值计算 */\n  propsTag?: Partial<TagProps> | ((value: string) => Partial<TagProps>);\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 建议列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 标签输入的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type TagsInputProps<T = ListboxOption> = TagsInputBaseProps<T> & OptionMapping<T>;\n\n/** TagsInput 的样式：root、input、popover */\nexport const tagsInputStyles = css.create({\n  // 标签多了换行；行与行之间留出间距\n  root: { flexWrap: 'wrap', rowGap: '_xs', paddingBlock: '_xs' },\n  // 输入框至少留出几个字的位置，放不下时换到下一行\n  input: { flexBasis: '6em' },\n});\n\n/** 默认的分隔符：英文、中文的逗号与分号 */\nconst DELIMITERS = [',', '，', ';', '；'];\n\n/** 标签输入：输入框里排着 Tag，回车或分隔符加入，退格删最后一个 */\nexport const TagsInput = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string[]>([]),\n    items = [],\n    toOption,\n    allowCustomValue = true,\n    acceptOnBlur = true,\n    delimiters = DELIMITERS,\n    max,\n    _inputValue: inputValue = _bindable(''),\n    _open: open = _bindable(false),\n    onOpenChange,\n    filter,\n    loading = false,\n    placement = 'bottom-start',\n    clearable = false,\n    name,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    children,\n    propsRoot,\n    icon,\n    propsIcon,\n    propsTag,\n    propsClear,\n    propsPopover,\n    propsListbox,\n    ...rest\n  }: TagsInputProps<T>) => {\n    const textMatcher = useTextMatcher();\n    const listId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let shell = _state.raw<HTMLElement | null>(null);\n    let input = _state.raw<HTMLInputElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 标签增删时其余的平移补位\n    const layout = useLayoutAnimation(() => shell, { children: '[data-tag]' });\n\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n    // 异步搜索（filter={false}）时结果可能还没回来：建议列表与 combobox 角色一直在，等待时显示加载中\n    const suggestions = () => items.length > 0 || filter === false;\n    // 标签的文字：异步建议换了 items 之后，已选的仍按之前见过的文字显示；自定义的值就是文字\n    const selectedOf = useSelectedOptions({ items: () => items, toOption: optionOf });\n    const labelOf = (tag: string) => selectedOf([tag])[0]!.label;\n\n    const list = useListState({\n      items: () => {\n        const query = inputValue.trim();\n        if (filter === false || !query) return items;\n        const matcher = textMatcher();\n        return items.filter((item) =>\n          filter ? filter(item, query) : matcher(optionOf(item).label, query),\n        );\n      },\n      toOption: optionOf,\n      selected: () => value,\n      mode: () => 'multiple',\n      onChange: (next) => void layout.change(() => (value = [...next])),\n    });\n\n    /** 把一段文字变成值：是建议的文字或值时取建议的值，否则（允许时）原样 */\n    function resolve(text: string): string | undefined {\n      const trimmed = text.trim();\n      if (!trimmed) return undefined;\n      const item = items.find((candidate) => {\n        const option = optionOf(candidate);\n        return option.value === trimmed || option.label === trimmed;\n      });\n      if (item !== undefined) return optionOf(item).value;\n      return allowCustomValue ? trimmed : undefined;\n    }\n\n    /** 加入几段文字；重复的、超出上限的不加；返回是否加入了 */\n    function add(texts: readonly string[]) {\n      const next = [...value];\n      for (const text of texts) {\n        const tag = resolve(text);\n        if (tag === undefined || next.includes(tag) || (max != null && next.length >= max))\n          continue;\n        next.push(tag);\n      }\n      if (next.length === value.length) return false;\n      void layout.change(() => (value = next));\n      return true;\n    }\n\n    const remove = (tag: string) =>\n      void layout.change(() => (value = value.filter((item) => item !== tag)));\n\n    const splitter = () =>\n      new RegExp(\n        `[${[...delimiters, '\\n', '\\r', '\\t'].map((d) => d.replace(/[\\\\\\]^-]/g, '\\\\$&')).join('')}]`,\n      );\n\n    // 输入了分隔符：分隔符前的部分加成标签，剩下的留在输入框里\n    watch(\n      () => inputValue,\n      (text) => {\n        const parts = text.split(splitter());\n        if (parts.length > 1) {\n          add(parts.slice(0, -1));\n          inputValue = parts.at(-1)!;\n          return;\n        }\n        if (suggestions() && text && !control().readonly) {\n          setOpen(true, 'trigger');\n          list.move('first');\n        }\n      },\n    );\n\n    function onKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly || isComposingKey(event)) return;\n      if (event.key === 'Backspace' && !inputValue && value.length) {\n        event.preventDefault();\n        remove(value.at(-1)!);\n        return;\n      }\n      if (open && suggestions()) {\n        if (handleListKeydown(list, event, { homeEnd: false })) {\n          event.preventDefault();\n          if (event.key === 'Enter') inputValue = '';\n          return;\n        }\n      } else if (event.key === 'ArrowDown' && suggestions()) {\n        event.preventDefault();\n        list.activateDefault();\n        setOpen(true, 'trigger', event);\n        return;\n      }\n      if (event.key === 'Enter' && inputValue.trim()) {\n        event.preventDefault();\n        if (add([inputValue])) inputValue = '';\n      }\n    }\n\n    // 粘贴多段（有分隔符、换行）时拆开加入；只有一段时照常粘贴\n    function onPaste(event: ClipboardEvent) {\n      const text = event.clipboardData?.getData('text') ?? '';\n      const parts = text.split(splitter());\n      if (parts.length < 2) return;\n      event.preventDefault();\n      add(parts);\n    }\n\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open: open && suggestions(),\n        anchor: shell,\n        panel,\n        floating: { placement, matchWidth: true, fitHeight: true },\n        restoreFocus: false,\n      }),\n      { close: (reason, event) => setOpen(false, reason, event) },\n    );\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const editable = !state.disabled && !state.readonly;\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, tagsInputStyles.root] }, propsRoot, {\n              ref: _toRef(shell),\n              // 外壳里的标签不是原生控件的一部分：不可用要写在外壳上，辅助技术才把它们一起当作不可用\n              'aria-disabled': state.disabled || undefined,\n              onPointerdown: focusOnShell(() => input),\n            })}\n            data-state={open ? 'open' : 'closed'}\n            data-invalid={state.invalid || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {controlIcon(s, icon, propsIcon)}\n            {value.map((tag) => {\n              const own = typeof propsTag === 'function' ? propsTag(tag) : propsTag;\n              return (\n                <Tag\n                  key={tag}\n                  {...mergePartProps<TagProps>({ variant: 'surface' }, own, {\n                    onRemove: editable ? () => remove(tag) : undefined,\n                  })}\n                  data-tag=\"\"\n                >\n                  {labelOf(tag)}\n                </Tag>\n              );\n            })}\n            <input\n              {...mergeAttrs<'input'>(\n                { ...s.input, sx: [s.input.sx, tagsInputStyles.input] },\n                rest,\n                {\n                  ref: _toRef(input),\n                  id: state.id,\n                  role: suggestions() ? 'combobox' : undefined,\n                  autocomplete: 'off',\n                  disabled: state.disabled,\n                  readonly: state.readonly,\n                  'aria-autocomplete': suggestions() ? 'list' : undefined,\n                  'aria-expanded': suggestions() ? open : undefined,\n                  'aria-controls': suggestions() ? listId : undefined,\n                  'aria-activedescendant':\n                    open && suggestions() ? activeOptionId(list, listId) : undefined,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-describedby': state.describedBy,\n                  onKeydown,\n                  onPaste,\n                  onBlur: (event: FocusEvent) => {\n                    setOpen(false, 'focus', event);\n                    if (\n                      acceptOnBlur &&\n                      inputValue.trim() &&\n                      !control().readonly &&\n                      add([inputValue])\n                    )\n                      inputValue = '';\n                  },\n                },\n              )}\n              _value={inputValue}\n            />\n            {clearable &&\n              value.length > 0 &&\n              editable &&\n              controlClear(s, propsClear, () => {\n                void layout.change(() => (value = []));\n                input?.focus();\n              })}\n            <FormValue name={name} value={value} disabled={state.disabled} />\n          </div>\n          {suggestions() && (\n            <ListPopover\n              panelRef={_toRef(panel)}\n              onToggle={onToggle}\n              size={appearance().size}\n              labelledBy={state.labelledBy}\n              label={rest['aria-label']}\n              loading={loading}\n              onPick={() => {\n                inputValue = '';\n                input?.focus();\n              }}\n              listbox={{ list, id: listId, multiple: true, renderOption: children }}\n              propsListbox={propsListbox}\n              propsPopover={propsPopover}\n            />\n          )}\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Textarea.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 CharacterCountProps } from './CharacterCount';
 import { type PartProps } from '../utils/props';
 import type { PresetIconButtonProps } from '../base/CloseButton';

package/dist/input/Textarea.js

@@ -4,7 +4,7 @@ import { CharacterCount } from "./CharacterCount.js";
 import { controlClear, controlParts, useControlAppearance } from "./control.js";
 import { createVNode, nextTick, shallowRef, useId, vModelText, withDirectives } from "vue";
 import { _component, bindable, effect, 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/Textarea.tsx
 /** 值与状态由组件管理 */
 /** 未声明的属性落到 textarea（主元素）上；外壳用 propsRoot */

package/dist/input/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/Textarea.tsx"],"sourcesContent":["/**\n * 多行文本框：外壳与 TextField 相同（control），高度随内容增长，在 rows 与 maxRows 之间。\n *\n *   <Field label=\"备注\"><Textarea _value={note} rows={3} maxRows={8} /></Field>\n *\n * 自动增高：内容变化后（含父级改值）把高度设为 scrollHeight，上下限用 lh 单位（行高的倍数）由 CSS 夹住。\n * 没用 field-sizing: content：Firefox 还不支持，样式的类型表里也没有。中文输入法照常（v-model）。\n *\n * 未声明的属性落到 textarea（主元素）上，外壳用 propsRoot。部件：Root（外壳）、Textarea。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId } from 'vue';\nimport { CharacterCount, type CharacterCountProps } from './CharacterCount';\nimport { useFieldControl } from '../form/Field';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { controlClear, controlParts, useControlAppearance, type ControlOptions } from './control';\n\n/** 值与状态由组件管理 */\nexport type TextareaManaged =\n  'value' | 'rows' | 'disabled' | 'readonly' | 'required' | 'aria-invalid' | 'aria-describedby';\n\n/** 未声明的属性落到 textarea（主元素）上；外壳用 propsRoot */\nexport interface TextareaProps extends PartProps<'textarea', TextareaManaged>, ControlOptions {\n  /** 输入值：父级写 _value={x} 双向绑定 */\n  _value?: string;\n  /** 最少显示几行，默认 3 */\n  rows?: number;\n  /** 最多增高到几行，之后出现滚动条；默认不限 */\n  maxRows?: number;\n  /** 不随内容增高，固定为 rows 行（可以拖动右下角改变高度） */\n  fixed?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 显示字数计数（右下角）；上限取 maxlength（含 zod 推出的约束），超出时用危险色 */\n  showCount?: boolean;\n  /** 有内容时在右上角显示清空按钮 */\n  clearable?: boolean;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 字数计数的部件属性 */\n  propsCount?: Partial<CharacterCountProps>;\n}\n\n/** Textarea 的样式：textarea、fixed、count、clear */\nexport const textareaStyles = css.create({\n  // 随外壳拉伸：外壳给了高度（propsRoot 的 height）时文字区占满，不停在基线上\n  textarea: { alignSelf: 'stretch', resize: 'none', overflowY: 'auto' },\n  fixed: { resize: 'vertical' },\n  // 计数贴在右下角\n  count: { alignSelf: 'flex-end', paddingBlockEnd: '_xs' },\n  // 清空按钮贴在第一行（多行时不随内容居中）\n  clear: { alignSelf: 'flex-start', marginBlockStart: '_xs' },\n});\n\n// 行数是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Textarea 的样式：min、max */\nexport const textareaRowStyles = css.create({\n  min: (rows: number) => ({ minHeight: `${rows}lh` }),\n  max: (rows: number) => ({ maxHeight: `${rows}lh` }),\n});\n\n/** 多行文本框：高度随内容增长 */\nexport const Textarea = _component(\n  ({\n    _value: value = _bindable(''),\n    rows = 3,\n    maxRows,\n    fixed = false,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    showCount = false,\n    clearable = false,\n    id,\n    propsRoot,\n    propsCount,\n    propsClear,\n    ...rest\n  }: TextareaProps) => {\n    const countId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let textarea = _state.raw<HTMLTextAreaElement | null>(null);\n\n    // 内容变化（含父级改值）后按内容高度重设\n    _effect(() => {\n      if (fixed || !textarea) return;\n      void value;\n      const element = textarea;\n      void nextTick(() => {\n        element.style.height = 'auto';\n        element.style.height = `${element.scrollHeight}px`;\n      });\n    });\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state, true);\n      const limit = rest.maxlength ?? state.constraints.maxLength;\n      const describedBy = [state.describedBy, showCount && countId].filter(Boolean).join(' ');\n      return (\n        <div\n          {...mergeAttrs<'div'>(s.root, propsRoot)}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          <textarea\n            {...mergeAttrs<'textarea'>(\n              {\n                ...s.input,\n                sx: [\n                  s.input.sx,\n                  textareaStyles.textarea,\n                  fixed && textareaStyles.fixed,\n                  textareaRowStyles.min(rows),\n                  maxRows != null && !fixed && textareaRowStyles.max(maxRows),\n                ],\n                minlength: state.constraints.minLength,\n                maxlength: state.constraints.maxLength,\n              },\n              rest,\n              {\n                ref: _toRef(textarea),\n                id: state.id,\n                rows,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': describedBy || undefined,\n              },\n            )}\n            _value={value}\n          />\n          {clearable &&\n            value &&\n            !state.disabled &&\n            !state.readonly &&\n            // 使用方的 sx 接在贴顶的样式之后，不把它整个换掉\n            controlClear(s, { ...propsClear, sx: [textareaStyles.clear, propsClear?.sx] }, () => {\n              value = '';\n              textarea?.focus();\n            })}\n          {showCount && (\n            <CharacterCount\n              {...mergePartProps<CharacterCountProps>(\n                {\n                  sx: textareaStyles.count,\n                  count: value.length,\n                  max: limit == null ? undefined : Number(limit),\n                },\n                propsCount,\n                { id: countId },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/Textarea.tsx"],"sourcesContent":["/**\n * 多行文本框：外壳与 TextField 相同（control），高度随内容增长，在 rows 与 maxRows 之间。\n *\n *   <Field label=\"备注\"><Textarea _value={note} rows={3} maxRows={8} /></Field>\n *\n * 自动增高：内容变化后（含父级改值）把高度设为 scrollHeight，上下限用 lh 单位（行高的倍数）由 CSS 夹住。\n * 没用 field-sizing: content：Firefox 还不支持，样式的类型表里也没有。中文输入法照常（v-model）。\n *\n * 未声明的属性落到 textarea（主元素）上，外壳用 propsRoot。部件：Root（外壳）、Textarea。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId } from 'vue';\nimport { CharacterCount, type CharacterCountProps } from './CharacterCount';\nimport { useFieldControl } from '../form/Field';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { controlClear, controlParts, useControlAppearance, type ControlOptions } from './control';\n\n/** 值与状态由组件管理 */\nexport type TextareaManaged =\n  'value' | 'rows' | 'disabled' | 'readonly' | 'required' | 'aria-invalid' | 'aria-describedby';\n\n/** 未声明的属性落到 textarea（主元素）上；外壳用 propsRoot */\nexport interface TextareaProps extends PartProps<'textarea', TextareaManaged>, ControlOptions {\n  /** 输入值：父级写 _value={x} 双向绑定 */\n  _value?: string;\n  /** 最少显示几行，默认 3 */\n  rows?: number;\n  /** 最多增高到几行，之后出现滚动条；默认不限 */\n  maxRows?: number;\n  /** 不随内容增高，固定为 rows 行（可以拖动右下角改变高度） */\n  fixed?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 显示字数计数（右下角）；上限取 maxlength（含 zod 推出的约束），超出时用危险色 */\n  showCount?: boolean;\n  /** 有内容时在右上角显示清空按钮 */\n  clearable?: boolean;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 字数计数的部件属性 */\n  propsCount?: Partial<CharacterCountProps>;\n}\n\n/** Textarea 的样式：textarea、fixed、count、clear */\nexport const textareaStyles = css.create({\n  // 随外壳拉伸：外壳给了高度（propsRoot 的 height）时文字区占满，不停在基线上\n  textarea: { alignSelf: 'stretch', resize: 'none', overflowY: 'auto' },\n  fixed: { resize: 'vertical' },\n  // 计数贴在右下角\n  count: { alignSelf: 'flex-end', paddingBlockEnd: '_xs' },\n  // 清空按钮贴在第一行（多行时不随内容居中）\n  clear: { alignSelf: 'flex-start', marginBlockStart: '_xs' },\n});\n\n// 行数是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Textarea 的样式：min、max */\nexport const textareaRowStyles = css.create({\n  min: (rows: number) => ({ minHeight: `${rows}lh` }),\n  max: (rows: number) => ({ maxHeight: `${rows}lh` }),\n});\n\n/** 多行文本框：高度随内容增长 */\nexport const Textarea = _component(\n  ({\n    _value: value = _bindable(''),\n    rows = 3,\n    maxRows,\n    fixed = false,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    showCount = false,\n    clearable = false,\n    id,\n    propsRoot,\n    propsCount,\n    propsClear,\n    ...rest\n  }: TextareaProps) => {\n    const countId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let textarea = _state.raw<HTMLTextAreaElement | null>(null);\n\n    // 内容变化（含父级改值）后按内容高度重设\n    _effect(() => {\n      if (fixed || !textarea) return;\n      void value;\n      const element = textarea;\n      void nextTick(() => {\n        element.style.height = 'auto';\n        element.style.height = `${element.scrollHeight}px`;\n      });\n    });\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state, true);\n      const limit = rest.maxlength ?? state.constraints.maxLength;\n      const describedBy = [state.describedBy, showCount && countId].filter(Boolean).join(' ');\n      return (\n        <div\n          {...mergeAttrs<'div'>(s.root, propsRoot)}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          <textarea\n            {...mergeAttrs<'textarea'>(\n              {\n                ...s.input,\n                sx: [\n                  s.input.sx,\n                  textareaStyles.textarea,\n                  fixed && textareaStyles.fixed,\n                  textareaRowStyles.min(rows),\n                  maxRows != null && !fixed && textareaRowStyles.max(maxRows),\n                ],\n                minlength: state.constraints.minLength,\n                maxlength: state.constraints.maxLength,\n              },\n              rest,\n              {\n                ref: _toRef(textarea),\n                id: state.id,\n                rows,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': describedBy || undefined,\n              },\n            )}\n            _value={value}\n          />\n          {clearable &&\n            value &&\n            !state.disabled &&\n            !state.readonly &&\n            // 使用方的 sx 接在贴顶的样式之后，不把它整个换掉\n            controlClear(s, { ...propsClear, sx: [textareaStyles.clear, propsClear?.sx] }, () => {\n              value = '';\n              textarea?.focus();\n            })}\n          {showCount && (\n            <CharacterCount\n              {...mergePartProps<CharacterCountProps>(\n                {\n                  sx: textareaStyles.count,\n                  count: value.length,\n                  max: limit == null ? undefined : Number(limit),\n                },\n                propsCount,\n                { id: countId },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/ToggleGroup.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 ButtonOptions } from '../base/button-core';
 import type { IconData, IconProps } from '../base/Icon';

package/dist/input/ToggleGroup.js

@@ -7,7 +7,7 @@ import { useActiveIndicator } from "../utils/motion/active-indicator.js";
 import { ToolbarContext } from "../navigation/Toolbar.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, bindable, childrenProp, createContext, effect, 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/ToggleGroup.tsx
 /** ToggleGroup 交给组内 ToggleGroupItem 的状态 */
 /** ToggleGroup 的上下文：自定义的项可以 inject 它接入组 */

package/dist/input/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/ToggleGroup.tsx"],"sourcesContent":["/**\n * 切换按钮组，复合组件：ToggleGroup（role=\"group\"）> ToggleItem（带 aria-pressed 的 button）。\n * 单选像分段控件（视图切换、对齐方式），多选像格式按钮（加粗、斜体）。整组一个 Tab 位置，组内方向键移动（漫游焦点）。\n * 参考 Radix ToggleGroup、Ark UI SegmentGroup。\n *\n *   <ToggleGroup _value={view} aria-label=\"视图\" required>\n *     <ToggleItem value=\"list\" icon={List} aria-label=\"列表\" />\n *     <ToggleItem value=\"grid\" icon={LayoutGrid} aria-label=\"网格\" />\n *   </ToggleGroup>\n *   <ToggleGroup selectionMode=\"multiple\" _value={marks} aria-label=\"格式\">…</ToggleGroup>\n */\nimport { createContext, _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 {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from '../base/button-core';\nimport type { IconData, IconProps } from '../base/Icon';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { ToolbarContext } from '../navigation/Toolbar';\nimport { selectedValues, toggleSelection, type SelectionProps } from '../utils/data/selection';\nimport { useFieldControl } from '../form/Field';\nimport type { TextSize } from '../utils/style/typography';\n\n/** ToggleGroup 交给组内 ToggleGroupItem 的状态 */\nexport interface ToggleGroupState {\n  /** 按下（选中）的项的值 */\n  readonly selected: readonly string[];\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读：按钮照常显示与聚焦，点了不切换 */\n  readonly readonly: boolean;\n  /** 波纹；不写时沿用配置 */\n  readonly ripple: boolean | undefined;\n  /** 单选：选中底色由组里的滑块（Indicator）画，项本身不画底色 */\n  readonly sliding: boolean;\n  /** 切换一项（单选、多选的规则由组决定） */\n  toggle(value: string): void;\n}\n\n/** ToggleGroup 的上下文：自定义的项可以 inject 它接入组 */\nexport const ToggleGroupContext = createContext<ToggleGroupState>('ToggleGroup');\n\n/** 方向 */\nexport interface ToggleGroupOrientations {\n  /** 横排（默认），左右键移动 */\n  horizontal: unknown;\n  /** 竖排，上下键移动 */\n  vertical: unknown;\n}\n\n/** 角色由组件管理（role=\"group\" 不允许 aria-orientation，方向只写在 data-orientation 上） */\nexport type ToggleGroupManaged = 'role';\n\n/** 两种选择方式共有的选项；未声明的属性落到 role=\"group\" 的 div 上，aria-label 是这组的名称 */\nexport interface ToggleGroupBaseProps extends PartProps<'div', ToggleGroupManaged> {\n  /** 必须有选中项：最后一项不能取消（分段控件通常要求）；在必填的 Field 里默认开启 */\n  required?: boolean;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：选中项照常显示、按钮能聚焦，点了不切换（查看详情、审批时） */\n  readonly?: boolean;\n  /** 方向，默认 horizontal */\n  orientation?: keyof ToggleGroupOrientations;\n  /** 字号档位，按钮随之缩放 */\n  size?: TextSize;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 单选时选中项下面的滑块（切换时滑过去）的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 单选或多选 */\nexport type ToggleGroupProps = ToggleGroupBaseProps & SelectionProps;\n\n/** ToggleGroup 的样式：root、vertical、indicator */\nexport const toggleGroupStyles = css.create({\n  root: {\n    // 滑块按项的 offsetLeft / offsetTop 定位；isolation 让 zIndex: -1 的滑块压在项下、组的底色之上\n    position: 'relative',\n    isolation: 'isolate',\n    display: 'inline-flex',\n    // 放在竖排的弹性容器里（Field 的控件列）时不被拉满整行\n    width: 'fit-content',\n    gap: '_xs',\n    padding: '_xs',\n    borderRadius: '_md',\n    backgroundColor: '_fill',\n  },\n  vertical: { flexDirection: 'column' },\n  // 只读、没选中的项：不像能点（悬停也不出底色）\n  readonlyItem: { cursor: 'default', backgroundColor: 'transparent' },\n  // 同按钮的 surface 外观；位置与宽高由脚本写（useActiveIndicator）\n  indicator: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    zIndex: -1,\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_accentBorder',\n    borderRadius: '_sm',\n    backgroundColor: '_accentSoft',\n    pointerEvents: 'none',\n  },\n});\n\n/** 切换按钮组：单选或多选，整组一个 Tab 位置 */\nexport const ToggleGroup = _component(\n  ({\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    required,\n    disabled,\n    readonly,\n    orientation = 'horizontal',\n    size,\n    ripple,\n    propsIndicator,\n    children,\n    id,\n    ...rest\n  }: ToggleGroupProps) => {\n    // 在 Field 里时：标签作为组的名称、关联说明与错误、沿用不可用与只读\n    const control = useFieldControl(() => ({ id, disabled, readonly, required }));\n    let root = _state.raw<HTMLElement | null>(null);\n    // 在工具栏里时焦点交给工具栏：整栏一个 Tab 位置，方向键跨过组内外的按钮（WAI-ARIA Toolbar 模式）\n    const inToolbar = ToolbarContext.inject(null) != null;\n    _effect(() =>\n      root && !inToolbar\n        ? rovingFocus(root, { items: 'button', orientation, loop: true })\n        : undefined,\n    );\n    const selected = _derived(selectedValues(value));\n    let indicator = _state.raw<HTMLElement | null>(null);\n    useActiveIndicator(() => ({\n      container: root,\n      indicator,\n      active: '[aria-pressed=\"true\"]',\n      axis: 'both',\n      value: selected[0],\n    }));\n\n    ToggleGroupContext.provide({\n      get selected() {\n        return selected;\n      },\n      get size() {\n        return size;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get ripple() {\n        return ripple;\n      },\n      get sliding() {\n        return selectionMode === 'single';\n      },\n      toggle(item) {\n        if (control().readonly) return;\n        const next = toggleSelection(selected, item, {\n          mode: selectionMode,\n          required: control().required,\n        });\n        if (next === selected) return;\n        value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null);\n      },\n    });\n\n    return () => {\n      const field = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                toggleGroupStyles.root,\n                orientation === 'vertical' && toggleGroupStyles.vertical,\n              ],\n            },\n            rest,\n            {\n              ref: _toRef(root),\n              id: field.id,\n              role: 'group',\n              'aria-labelledby': defaultLabelledBy(rest, field.labelledBy),\n              'aria-describedby': field.describedBy,\n            },\n          )}\n          data-orientation={orientation}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          {selectionMode === 'single' && selected.length > 0 && (\n            <span\n              {...mergeAttrs<'span'>({ sx: toggleGroupStyles.indicator }, propsIndicator, {\n                ref: _toRef(indicator),\n                'aria-hidden': true,\n              })}\n            />\n          )}\n          {children}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、不可用由组件管理 */\nexport type ToggleGroupItemManaged = 'aria-pressed' | 'disabled' | 'type';\n\n/** 未声明的属性落到 button 上；只有图标时写 aria-label */\nexport interface ToggleItemProps\n  extends PartProps<'button', ToggleGroupItemManaged>, Pick<ButtonOptions, 'radius'> {\n  /** 这一项的值 */\n  value: string;\n  /** 图标 */\n  icon?: IconData;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 内容层的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 切换按钮组里的一项（button，aria-pressed 表示是否选中） */\nexport const ToggleItem = _component(\n  ({\n    value,\n    icon,\n    disabled = false,\n    radius,\n    propsIcon,\n    propsContent,\n    children,\n    ...rest\n  }: ToggleItemProps) => {\n    const group = ToggleGroupContext.inject();\n    // 与 Button 同一套行为：不可用、拦截点击、波纹、状态 data 属性；只读时不出波纹\n    const behavior = useButtonBehavior(\n      () => ({\n        disabled: disabled || group.disabled,\n        loading: false,\n        ripple: group.readonly ? false : group.ripple,\n      }),\n      () => () => group.toggle(value),\n    );\n    // 选中的是浅色底，其余是幽灵按钮；尺寸跟随组\n    const appearance = useButtonAppearance(\n      () => ({ variant: undefined, tone: 'neutral', size: group.size, radius: radius ?? 'sm' }),\n      'ghost',\n    );\n\n    return () => {\n      const pressed = group.selected.includes(value);\n      const off = disabled || group.disabled;\n      const base = appearance();\n      return (\n        <button\n          {...mergeAttrs<'button'>(\n            {\n              ...buttonPart,\n              sx: [\n                buttonSx(\n                  {\n                    ...base,\n                    // 单选时选中底色由组的滑块画\n                    variant: pressed && !group.sliding ? 'surface' : 'ghost',\n                    tone: pressed ? 'accent' : 'neutral',\n                  },\n                  { disabled: off, square: children == null },\n                ),\n                group.readonly && !pressed && toggleGroupStyles.readonlyItem,\n              ],\n            },\n            rest,\n            {\n              type: 'button',\n              'aria-pressed': pressed,\n              // 使用方的 onClick 先执行，preventDefault 可以拦下切换（mergeProps 的规则）\n              ...behavior(),\n            },\n          )}\n          data-state={pressed ? 'on' : 'off'}\n        >\n          {buttonContent({ icon, propsIcon, propsContent, children }, { loading: false })}\n        </button>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ToggleGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/ToggleGroup.tsx"],"sourcesContent":["/**\n * 切换按钮组，复合组件：ToggleGroup（role=\"group\"）> ToggleItem（带 aria-pressed 的 button）。\n * 单选像分段控件（视图切换、对齐方式），多选像格式按钮（加粗、斜体）。整组一个 Tab 位置，组内方向键移动（漫游焦点）。\n * 参考 Radix ToggleGroup、Ark UI SegmentGroup。\n *\n *   <ToggleGroup _value={view} aria-label=\"视图\" required>\n *     <ToggleItem value=\"list\" icon={List} aria-label=\"列表\" />\n *     <ToggleItem value=\"grid\" icon={LayoutGrid} aria-label=\"网格\" />\n *   </ToggleGroup>\n *   <ToggleGroup selectionMode=\"multiple\" _value={marks} aria-label=\"格式\">…</ToggleGroup>\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from '../base/button-core';\nimport type { IconData, IconProps } from '../base/Icon';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { ToolbarContext } from '../navigation/Toolbar';\nimport { selectedValues, toggleSelection, type SelectionProps } from '../utils/data/selection';\nimport { useFieldControl } from '../form/Field';\nimport type { TextSize } from '../utils/style/typography';\n\n/** ToggleGroup 交给组内 ToggleGroupItem 的状态 */\nexport interface ToggleGroupState {\n  /** 按下（选中）的项的值 */\n  readonly selected: readonly string[];\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读：按钮照常显示与聚焦，点了不切换 */\n  readonly readonly: boolean;\n  /** 波纹；不写时沿用配置 */\n  readonly ripple: boolean | undefined;\n  /** 单选：选中底色由组里的滑块（Indicator）画，项本身不画底色 */\n  readonly sliding: boolean;\n  /** 切换一项（单选、多选的规则由组决定） */\n  toggle(value: string): void;\n}\n\n/** ToggleGroup 的上下文：自定义的项可以 inject 它接入组 */\nexport const ToggleGroupContext = createContext<ToggleGroupState>('ToggleGroup');\n\n/** 方向 */\nexport interface ToggleGroupOrientations {\n  /** 横排（默认），左右键移动 */\n  horizontal: unknown;\n  /** 竖排，上下键移动 */\n  vertical: unknown;\n}\n\n/** 角色由组件管理（role=\"group\" 不允许 aria-orientation，方向只写在 data-orientation 上） */\nexport type ToggleGroupManaged = 'role';\n\n/** 两种选择方式共有的选项；未声明的属性落到 role=\"group\" 的 div 上，aria-label 是这组的名称 */\nexport interface ToggleGroupBaseProps extends PartProps<'div', ToggleGroupManaged> {\n  /** 必须有选中项：最后一项不能取消（分段控件通常要求）；在必填的 Field 里默认开启 */\n  required?: boolean;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：选中项照常显示、按钮能聚焦，点了不切换（查看详情、审批时） */\n  readonly?: boolean;\n  /** 方向，默认 horizontal */\n  orientation?: keyof ToggleGroupOrientations;\n  /** 字号档位，按钮随之缩放 */\n  size?: TextSize;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 单选时选中项下面的滑块（切换时滑过去）的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 单选或多选 */\nexport type ToggleGroupProps = ToggleGroupBaseProps & SelectionProps;\n\n/** ToggleGroup 的样式：root、vertical、indicator */\nexport const toggleGroupStyles = css.create({\n  root: {\n    // 滑块按项的 offsetLeft / offsetTop 定位；isolation 让 zIndex: -1 的滑块压在项下、组的底色之上\n    position: 'relative',\n    isolation: 'isolate',\n    display: 'inline-flex',\n    // 放在竖排的弹性容器里（Field 的控件列）时不被拉满整行\n    width: 'fit-content',\n    gap: '_xs',\n    padding: '_xs',\n    borderRadius: '_md',\n    backgroundColor: '_fill',\n  },\n  vertical: { flexDirection: 'column' },\n  // 只读、没选中的项：不像能点（悬停也不出底色）\n  readonlyItem: { cursor: 'default', backgroundColor: 'transparent' },\n  // 同按钮的 surface 外观；位置与宽高由脚本写（useActiveIndicator）\n  indicator: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    zIndex: -1,\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_accentBorder',\n    borderRadius: '_sm',\n    backgroundColor: '_accentSoft',\n    pointerEvents: 'none',\n  },\n});\n\n/** 切换按钮组：单选或多选，整组一个 Tab 位置 */\nexport const ToggleGroup = _component(\n  ({\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    required,\n    disabled,\n    readonly,\n    orientation = 'horizontal',\n    size,\n    ripple,\n    propsIndicator,\n    children,\n    id,\n    ...rest\n  }: ToggleGroupProps) => {\n    // 在 Field 里时：标签作为组的名称、关联说明与错误、沿用不可用与只读\n    const control = useFieldControl(() => ({ id, disabled, readonly, required }));\n    let root = _state.raw<HTMLElement | null>(null);\n    // 在工具栏里时焦点交给工具栏：整栏一个 Tab 位置，方向键跨过组内外的按钮（WAI-ARIA Toolbar 模式）\n    const inToolbar = ToolbarContext.inject(null) != null;\n    _effect(() =>\n      root && !inToolbar\n        ? rovingFocus(root, { items: 'button', orientation, loop: true })\n        : undefined,\n    );\n    const selected = _derived(selectedValues(value));\n    let indicator = _state.raw<HTMLElement | null>(null);\n    useActiveIndicator(() => ({\n      container: root,\n      indicator,\n      active: '[aria-pressed=\"true\"]',\n      axis: 'both',\n      value: selected[0],\n    }));\n\n    ToggleGroupContext.provide({\n      get selected() {\n        return selected;\n      },\n      get size() {\n        return size;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get ripple() {\n        return ripple;\n      },\n      get sliding() {\n        return selectionMode === 'single';\n      },\n      toggle(item) {\n        if (control().readonly) return;\n        const next = toggleSelection(selected, item, {\n          mode: selectionMode,\n          required: control().required,\n        });\n        if (next === selected) return;\n        value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null);\n      },\n    });\n\n    return () => {\n      const field = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                toggleGroupStyles.root,\n                orientation === 'vertical' && toggleGroupStyles.vertical,\n              ],\n            },\n            rest,\n            {\n              ref: _toRef(root),\n              id: field.id,\n              role: 'group',\n              'aria-labelledby': defaultLabelledBy(rest, field.labelledBy),\n              'aria-describedby': field.describedBy,\n            },\n          )}\n          data-orientation={orientation}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          {selectionMode === 'single' && selected.length > 0 && (\n            <span\n              {...mergeAttrs<'span'>({ sx: toggleGroupStyles.indicator }, propsIndicator, {\n                ref: _toRef(indicator),\n                'aria-hidden': true,\n              })}\n            />\n          )}\n          {children}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、不可用由组件管理 */\nexport type ToggleGroupItemManaged = 'aria-pressed' | 'disabled' | 'type';\n\n/** 未声明的属性落到 button 上；只有图标时写 aria-label */\nexport interface ToggleItemProps\n  extends PartProps<'button', ToggleGroupItemManaged>, Pick<ButtonOptions, 'radius'> {\n  /** 这一项的值 */\n  value: string;\n  /** 图标 */\n  icon?: IconData;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 内容层的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 切换按钮组里的一项（button，aria-pressed 表示是否选中） */\nexport const ToggleItem = _component(\n  ({\n    value,\n    icon,\n    disabled = false,\n    radius,\n    propsIcon,\n    propsContent,\n    children,\n    ...rest\n  }: ToggleItemProps) => {\n    const group = ToggleGroupContext.inject();\n    // 与 Button 同一套行为：不可用、拦截点击、波纹、状态 data 属性；只读时不出波纹\n    const behavior = useButtonBehavior(\n      () => ({\n        disabled: disabled || group.disabled,\n        loading: false,\n        ripple: group.readonly ? false : group.ripple,\n      }),\n      () => () => group.toggle(value),\n    );\n    // 选中的是浅色底，其余是幽灵按钮；尺寸跟随组\n    const appearance = useButtonAppearance(\n      () => ({ variant: undefined, tone: 'neutral', size: group.size, radius: radius ?? 'sm' }),\n      'ghost',\n    );\n\n    return () => {\n      const pressed = group.selected.includes(value);\n      const off = disabled || group.disabled;\n      const base = appearance();\n      return (\n        <button\n          {...mergeAttrs<'button'>(\n            {\n              ...buttonPart,\n              sx: [\n                buttonSx(\n                  {\n                    ...base,\n                    // 单选时选中底色由组的滑块画\n                    variant: pressed && !group.sliding ? 'surface' : 'ghost',\n                    tone: pressed ? 'accent' : 'neutral',\n                  },\n                  { disabled: off, square: children == null },\n                ),\n                group.readonly && !pressed && toggleGroupStyles.readonlyItem,\n              ],\n            },\n            rest,\n            {\n              type: 'button',\n              'aria-pressed': pressed,\n              // 使用方的 onClick 先执行，preventDefault 可以拦下切换（mergeProps 的规则）\n              ...behavior(),\n            },\n          )}\n          data-state={pressed ? 'on' : 'off'}\n        >\n          {buttonContent({ icon, propsIcon, propsContent, children }, { loading: false })}\n        </button>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAkDA,IAAa,qBAAqB,cAAgC,aAAa;;;;;;AAoC/E,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAEJ,UAAU;EACV,WAAW;EACX,SAAS;EAET,OAAO;EACP,KAAK;EACL,SAAS;EACT,cAAc;EACd,iBAAiB;CACnB;CACA,UAAU,EAAE,eAAe,SAAS;CAEpC,cAAc;EAAE,QAAQ;EAAW,iBAAiB;CAAc;CAElE,WAAW;EACT,UAAU;EACV,KAAK;EACL,MAAM;EACN,QAAQ;EACR,WAAW;EACX,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,eAAe;CACjB;AACF,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAawB;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAZN,QAAQ;CAAA,MAAA,QAAAC,SAAA,QAAA,gBAC4B,MAAI,KAAA,IAAA;CAAA,MAAA,WAAAD,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eAI1C,YAAY;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAAA,KAAAF,aAAA,QAAA,IAAA;CAAA,MAMvB,OAAIG,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,UAAU,uBAAuB;EAAE,IAAE,GAAA;EAAE,UAAQ,SAAA;EAAE,UAAQ,SAAA;EAAE,UAAQ,SAAA;CAAC,EAAE;CAC5E,IAAI,OAAIC,WAAkC,IAAI;CAE9C,MAAM,YAAY,eAAe,OAAO,IAAI,KAAK;CACjD,aACE,KAAA,SAAQ,CAAC,YACL,YAAW,KAAA,OAAO;EAAE,OAAO;EAAU,aAAW,YAAA;EAAE,MAAM;CAAK,CAAC,IAC9D,KAAA,CAAS;CAEf,MAAM,WAAQC,eAAY,eAAc,MAAA,KAAM,CAAC;CAC/C,IAAI,YAASD,WAAkC,IAAI;CACnD,0BAA0B;EACxB,WAAS,KAAA;EACT,WAAS,UAAA;EACT,QAAQ;EACR,MAAM;EACN,OAAO,SAAA,MAAS;CAClB,EAAE;CAEF,mBAAmB,QAAQ;EACzB,IAAI,WAAW;GACb,OAAA,SAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,KAAA;EACF;EACA,IAAI,WAAW;GACb,OAAO,QAAQ,CAAC,CAAC;EACnB;EACA,IAAI,WAAW;GACb,OAAO,QAAQ,CAAC,CAAC;EACnB;EACA,IAAI,SAAS;GACX,OAAA,OAAA;EACF;EACA,IAAI,UAAU;GACZ,OAAO,cAAA,UAAkB;EAC3B;EACA,OAAO,MAAM;GACX,IAAI,QAAQ,CAAC,CAAC,UAAU;GACxB,MAAM,OAAO,gBAAe,SAAA,OAAW,MAAM;IAC3C,MAAI,cAAA;IACJ,UAAU,QAAQ,CAAC,CAAC;GACtB,CAAC;GACD,IAAI,SAAI,SAAA,OAAe;GACvB,MAAA,QAAQ,cAAA,UAAkB,aAAa,CAAC,GAAG,IAAI,IAAK,KAAK,MAAM;EACjE;CACF,CAAC;CAED,aAAa;EACX,MAAM,QAAQ,QAAQ;EACtB,OAAAE,YAAA,OAAAC,cAEQ,WACF,EACE,IAAI,CACF,kBAAkB,MAClB,YAAA,UAAgB,cAAc,kBAAkB,QAAQ,EAE5D,GACA,MACA;GACE,KAAG;GACH,IAAI,MAAM;GACV,MAAM;GACN,mBAAmB,kBAAkB,MAAM,MAAM,UAAU;GAC3D,oBAAoB,MAAM;EAC5B,CACF,GAAC;GAAA,oBAAA,YAAA;GAAA,iBAEc,MAAM,YAAY,KAAA;GAAS,iBAC3B,MAAM,YAAY,KAAA;EAAS,CAAA,GAAA,CAEzC,cAAA,UAAkB,YAAY,SAAA,MAAS,SAAS,KAACD,YAAA,QAE1C,WAAmB,EAAE,IAAI,kBAAkB,UAAU,GAAC,eAAA,OAAkB;GAC1E,KAAG;GACH,eAAe;EACjB,CAAC,GAAC,IAAA,GAEL,SAAA,KAAA,CAAA;CAIP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;AAsBA,IAAa,aAAa,0BACxB,SAAA,UASuB;CAAA,MAAA,QAAAN,aAAA,SAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,SAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,SAAA,YANV,KAAK;CAAA,MAAA,SAAAA,aAAA,SAAA,QAAA;CAAA,MAAA,YAAAA,aAAA,SAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,SAAA,cAAA;CAAA,MAAA,WAAAE,aAAA,OAAA;CAAA,MAKb,OAAIC,UAAA,SAAA,OAAA,KAAA;CAEP,MAAM,QAAQ,mBAAmB,OAAO;CAExC,MAAM,WAAW,yBACR;EACL,UAAU,SAAA,SAAY,MAAM;EAC5B,SAAS;EACT,QAAQ,MAAM,WAAW,QAAQ,MAAM;CACzC,gBACY,MAAM,OAAM,MAAA,KAAM,CAChC;CAEA,MAAM,aAAa,2BACV;EAAE,SAAS,KAAA;EAAW,MAAM;EAAW,MAAM,MAAM;EAAM,QAAQ,OAAA,SAAU;CAAK,IACvF,OACF;CAEA,aAAa;EACX,MAAM,UAAU,MAAM,SAAS,SAAQ,MAAA,KAAM;EAC7C,MAAM,MAAM,SAAA,SAAY,MAAM;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAAG,YAAA,UAAAC,cAEQ,WACF;GACE,GAAG;GACH,IAAI,CACF,SACE;IACE,GAAG;IAEH,SAAS,WAAW,CAAC,MAAM,UAAU,YAAY;IACjD,MAAM,UAAU,WAAW;GAC7B,GACA;IAAE,UAAU;IAAK,QAAQ,SAAA,SAAY;GAAK,CAC5C,GACA,MAAM,YAAY,CAAC,WAAW,kBAAkB,YAAY;EAEhE,GACA,MACA;GACE,MAAM;GACN,gBAAgB;GAEhB,GAAG,SAAS;EACd,CACF,GAAC,EAAA,cACW,UAAU,OAAO,MAAK,CAAA,GAAA,CAEjC,cAAc;GAAE,MAAI,KAAA;GAAE,WAAS,UAAA;GAAE,cAAY,aAAA;GAAE,UAAQ,SAAA;EAAC,GAAG,EAAE,SAAS,MAAM,CAAC,CAAC,CAAA;CAGrF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/input/Transfer.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 IconButtonProps } from '../base/IconButton';
 import { type TreeProps } from '../display/Tree';
 import { type PartProps } from '../utils/props';

package/dist/input/Transfer.js

@@ -12,7 +12,7 @@ import { Listbox } from "./Listbox.js";
 import { TextField } from "./TextField.js";
 import { computed, createVNode, isVNode, ref, useId } 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 { ChevronLeft, ChevronRight, Search } from "@lucide/icons";
 //#region src/input/Transfer.tsx
 /**

package/dist/input/Transfer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.js","names":["_isVNode","_createVNode","_mergeProps","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_computed"],"sources":["../../src/input/Transfer.tsx"],"sourcesContent":["/**\n * 穿梭框：左边是可选的，右边是已选的，勾上之后点中间的按钮移过去（分配权限、指派成员、挑选导出的列）。\n *\n *   <Transfer items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={memberIds} searchable />\n *   <TreeTransfer items={orgs} getKey={…} getLabel={…} getChildren={…} _value={teamIds} />   左边是一棵树\n *\n * - 每一边是一个可多选的 Listbox（焦点、方向键、空格勾选、虚拟滚动同 Listbox），上方是全选框、标题与“勾上 / 总数”，\n *   searchable 时带搜索框（按选项文字，认 createUi 的 textMatcher）。全选只管当前看得见（搜索后留下）的项。\n * - 中间两个按钮把勾上的项移到另一边（没有勾上的时不可用），双击一项直接移过去；移动后读屏播报移了几项。\n *   不可用的选项（ListboxOption 的 disabled）勾不上，也就移不动。\n * - value 是右边的值，按移过去的先后排列；items 里找不到的值不显示（也不会被删掉）。\n * - TreeTransfer：左边是勾选的 Tree（父子联动、可搜索），已经移过去的节点勾上且不可用；只移叶子，value 是叶子的 key。\n * - 在 Field 里时整体是一组（role=\"group\"，名称是 Field 的标签），两边的列表各以自己的标题为名。\n *\n * 部件：Root（div，role=\"group\"）、Panel（section，每一边）、Header、SelectAll（Checkbox）、Title、Count、\n * Search（TextField）、List（Listbox / Tree）、Actions（中间的按钮）。\n */\nimport { ChevronLeft, ChevronRight, Search } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { UpdateHandlers } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { Tree, type TreeProps } from '../display/Tree';\nimport { useFieldControl } from '../form/Field';\nimport { checkedByStrategy, indexTree } from '../utils/data/tree';\nimport { announce } from '../utils/dom/announcer';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Checkbox } from './Checkbox';\nimport { Listbox, type ListboxBaseProps, type ListboxProps } from './Listbox';\nimport type { MultipleSelectionProps } from '../utils/data/selection';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 两边的列表（可多选的 Listbox）的属性：propsList 用它 */\nexport type TransferListProps<T> = ListboxBaseProps<T> & MultipleSelectionProps & OptionMapping<T>;\n\n/** Transfer 与 TreeTransfer 共有的属性；未声明的属性落到外层 div（role=\"group\"）上 */\nexport interface TransferBaseProps extends PartProps<'div', 'role'> {\n  /** 右边（已选）的值，按移过去的先后排列：父级写 _value={keys} */\n  _value?: string[];\n  /** 左右两边的标题，默认取语言包（可选、已选） */\n  titles?: readonly [string, string];\n  /** 两边带搜索框 */\n  searchable?: boolean;\n  /** 不可用：勾不了、移不了 */\n  disabled?: boolean;\n  /** 每一边的部件属性（section；列表的高度给它的 sx） */\n  propsPanel?: PartProps<'section'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n  /** 中间两个按钮的部件属性 */\n  propsAction?: Partial<IconButtonProps>;\n}\n\n/** 选项是 ListboxOption、字符串，或任意数据加 toOption */\nexport type TransferProps<T = ListboxOption> = TransferBaseProps &\n  OptionMapping<T> & {\n    /** 全部数据（两边一起）：右边显示 value 里的那些 */\n    items: readonly T[];\n    /** 搜索时怎样算匹配；默认选项文字包含输入（忽略大小写与重音，或 createUi 的 textMatcher） */\n    filter?: (item: T, query: string) => boolean;\n    /** 两边列表的部件属性 */\n    propsList?: Partial<TransferListProps<T>>;\n  };\n\n/** 左边是一棵树的穿梭框 */\nexport interface TreeTransferProps<T> extends TransferBaseProps {\n  /** 第一层的节点 */\n  items: readonly T[];\n  /** 节点的 key，整棵树里唯一 */\n  getKey: (node: T) => string;\n  /** 节点的文字 */\n  getLabel: (node: T) => string;\n  /** 子节点 */\n  getChildren: (node: T) => readonly T[] | undefined;\n  /** 左边的树的部件属性 */\n  propsTree?: Partial<TreeProps<T>>;\n  /** 右边列表的部件属性 */\n  propsList?: Partial<TransferListProps<ListboxOption>>;\n}\n\n/** Transfer 的样式：root、panel、header、title、search、list、actions、actionIcon */\nexport const transferStyles = css.create({\n  // 窄屏时上下排，按钮换成上下箭头\n  root: {\n    display: 'grid',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr) auto minmax(0, 1fr)',\n      '@media (max-width: 40rem)': 'minmax(0, 1fr)',\n    },\n    alignItems: 'stretch',\n    gap: '_md',\n  },\n  panel: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    height: '20em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  title: { flexGrow: 1, minWidth: 0, fontWeight: '_semibold' },\n  search: { padding: '_xs', flexShrink: 0 },\n  searchField: { width: '_full' },\n  // 列表占满剩下的高度，自己滚动（虚拟滚动要有确定的高度）\n  list: { flexGrow: 1, minHeight: 0, borderWidth: 0, borderRadius: 0 },\n  actions: {\n    display: 'flex',\n    flexDirection: { default: 'column', '@media (max-width: 40rem)': 'row' },\n    justifyContent: 'center',\n    gap: '_sm',\n  },\n  actionIcon: { rotate: { default: null, '@media (max-width: 40rem)': '90deg' } },\n});\n\ninterface PanelOptions {\n  title: string;\n  titleId: string;\n  /** 看得见的、能勾的项 */\n  selectable: readonly string[];\n  /** 勾上的 */\n  checked: readonly string[];\n  /** 这一边一共几项 */\n  total: number;\n  onCheckAll: (keys: string[]) => void;\n  search: string;\n  onSearch: (text: string) => void;\n  searchable: boolean;\n  disabled: boolean;\n  propsPanel?: PartProps<'section'>;\n  propsSearch?: Partial<TextFieldProps>;\n  list: VNodeChild;\n}\n\n/** 一边：全选框、标题、计数、搜索框与列表 */\nfunction renderPanel(lang: ReturnType<typeof useLang>, options: PanelOptions) {\n  const visibleChecked = options.selectable.filter((key) => options.checked.includes(key));\n  const all = options.selectable.length > 0 && visibleChecked.length === options.selectable.length;\n  return (\n    <section\n      {...mergeAttrs<'section'>({ sx: transferStyles.panel }, options.propsPanel, {\n        'aria-labelledby': options.titleId,\n      })}\n    >\n      <div {...css.attrs(transferStyles.header)}>\n        <Checkbox\n          _checked={all}\n          onUpdate:_checked={(next: boolean) => {\n            const others = options.checked.filter((key) => !options.selectable.includes(key));\n            options.onCheckAll(next ? [...others, ...options.selectable] : others);\n          }}\n          indeterminate={!all && visibleChecked.length > 0}\n          disabled={options.disabled || options.selectable.length === 0}\n          aria-label={lang.transferSelectAll(options.title)}\n        />\n        <span id={options.titleId} {...css.attrs(transferStyles.title)}>\n          {options.title}\n        </span>\n        <Small tone=\"muted\">{lang.transferCount(options.checked.length, options.total)}</Small>\n      </div>\n      {options.searchable && (\n        <div {...css.attrs(transferStyles.search)}>\n          <TextField\n            {...mergePartProps<TextFieldProps>(\n              {\n                icon: Search,\n                variant: 'soft',\n                size: 'sm',\n                placeholder: lang.selectSearch,\n                'aria-label': `${lang.selectSearch} ${options.title}`,\n                propsRoot: { sx: transferStyles.searchField },\n              },\n              options.propsSearch,\n            )}\n            type=\"search\"\n            _value={options.search}\n            onUpdate:_value={options.onSearch}\n            disabled={options.disabled}\n          />\n        </div>\n      )}\n      {options.list}\n    </section>\n  );\n}\n\n/** 中间的两个按钮 */\nfunction renderActions(\n  lang: ReturnType<typeof useLang>,\n  titles: readonly [string, string],\n  enabled: readonly [boolean, boolean],\n  move: readonly [() => void, () => void],\n  propsAction: Partial<IconButtonProps> | undefined,\n) {\n  return (\n    <div {...css.attrs(transferStyles.actions)}>\n      {([1, 0] as const).map((to) => (\n        <IconButton\n          key={to}\n          {...mergePartProps<IconButtonProps>(\n            {\n              icon: to === 1 ? ChevronRight : ChevronLeft,\n              'aria-label': lang.transferMoveTo(titles[to]),\n              variant: 'soft',\n              size: 'sm',\n              propsIcon: { flipInRtl: true, sx: transferStyles.actionIcon },\n            },\n            propsAction,\n            { disabled: !enabled[to], onClick: move[to] },\n          )}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** 穿梭框：两个可多选的列表，勾上之后移到另一边 */\nexport const Transfer = _component(\n  <T,>({\n    items,\n    toOption,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    filter,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsList,\n    ...rest\n  }: TransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n\n    const entries = _derived.by(() =>\n      items.map((item) => ({ item, option: toListboxOption(item, toOption) })),\n    );\n    const byValue = _derived.by(() => new Map(entries.map((entry) => [entry.option.value, entry])));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n\n    const matches = (entry: (typeof entries)[number], query: string) => {\n      const text = query.trim();\n      if (!text) return true;\n      return filter ? filter(entry.item, text) : textMatcher()(entry.option.label, text);\n    };\n    /** 一边的全部项（左边按 items 的顺序，右边按移过去的先后） */\n    const sideEntries = (side: 0 | 1) =>\n      side === 0\n        ? entries.filter((entry) => !chosen.has(entry.option.value))\n        : value.flatMap((key) => byValue.get(key) ?? []);\n    const shownEntries = (side: 0 | 1) =>\n      sideEntries(side).filter((entry) => matches(entry, searches[side]));\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    /** 把 keys 从 from 这一边移到另一边 */\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => {\n        const entry = byValue.get(key);\n        return entry && !entry.option.disabled && chosen.has(key) === (from === 1);\n      });\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const list = (side: 0 | 1) => (\n        <Listbox\n          {...(mergePartProps<TransferListProps<T>>(\n            {\n              items: shownEntries(side).map((entry) => entry.item),\n              toOption: (item: T) => toListboxOption(item, toOption),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (item: T) => ({\n                // 双击直接移过去\n                onDblclick: () => move(side, [toListboxOption(item, toOption).value]),\n              }),\n            } as TransferListProps<T>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-${side}`,\n              'aria-labelledby': `${baseId}-title-${side}`,\n            } as Partial<TransferListProps<T>>,\n          ) as ListboxProps<T> & UpdateHandlers<ListboxProps<T>>)}\n          _value={checked[side]}\n          onUpdate:_value={(next: string[]) => setChecked(side, next)}\n        />\n      );\n      const panel = (side: 0 | 1) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable: shownEntries(side)\n            .filter((entry) => !entry.option.disabled)\n            .map((entry) => entry.option.value),\n          checked: checked[side],\n          total: sideEntries(side).length,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: list(side),\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(0)}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && checked[0].length > 0],\n            [() => move(1, checked[1]), () => move(0, checked[0])],\n            propsAction,\n          )}\n          {panel(1)}\n        </div>\n      );\n    };\n  },\n);\n\n/** 左边是一棵树的穿梭框：勾选叶子（父子联动）移到右边 */\nexport const TreeTransfer = _component(\n  <T,>({\n    items,\n    getKey,\n    getLabel,\n    getChildren,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsTree,\n    propsList,\n    ...rest\n  }: TreeTransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n    let expanded = _state<string[]>([]);\n\n    const index = _derived.by(() =>\n      indexTree(items, { getKey: (node) => getKey(node), getChildren }),\n    );\n    // key → 节点：右边的文字、左边“不可用”的判断都用它\n    const nodes = _derived.by(() => {\n      const map = new Map<string, T>();\n      const visit = (level: readonly T[]) =>\n        level.forEach((node) => {\n          map.set(getKey(node), node);\n          visit(getChildren(node) ?? []);\n        });\n      visit(items);\n      return map;\n    });\n    const leaves = _derived.by(() => index.order.filter((key) => !index.children.get(key)?.length));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n    const matchesSearch = (key: string, side: 0 | 1) => {\n      const text = searches[side].trim();\n      const node = nodes.get(key);\n      return !text || (!!node && textMatcher()(getLabel(node), text));\n    };\n    // 左边能勾的叶子：还没移过去的（搜索时只算匹配的）\n    const sourceLeaves = () => leaves.filter((key) => !chosen.has(key));\n    const targetOptions = () =>\n      value.flatMap((key) => {\n        const node = nodes.get(key);\n        return node ? [{ value: key, label: getLabel(node) }] : [];\n      });\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => nodes.has(key) && chosen.has(key) === (from === 1));\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const sourceChecked = checked[0];\n      const tree = (\n        <Tree\n          {...mergePartProps<TreeProps<T>>(\n            {\n              items,\n              getKey,\n              getLabel,\n              getChildren,\n              checkable: true,\n              // 已经移过去的叶子勾上且不可用\n              isDisabled: (node: T) => state.disabled || chosen.has(getKey(node)),\n              filter: searches[0],\n              propsScrollArea: { sx: transferStyles.list },\n            },\n            propsTree,\n            { 'aria-labelledby': `${baseId}-title-0` },\n          )}\n          _checked={[...value, ...sourceChecked]}\n          onUpdate:_checked={(next: string[]) =>\n            setChecked(\n              0,\n              checkedByStrategy(index, next, 'child').filter((key) => !chosen.has(key)),\n            )\n          }\n          _expanded={expanded}\n        />\n      );\n      const list = (\n        <Listbox\n          {...mergePartProps<TransferListProps<ListboxOption>>(\n            {\n              items: targetOptions().filter((option) => matchesSearch(option.value, 1)),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (option: ListboxOption) => ({\n                onDblclick: () => move(1, [option.value]),\n              }),\n            } as TransferListProps<ListboxOption>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-1`,\n              'aria-labelledby': `${baseId}-title-1`,\n            } as Partial<TransferListProps<ListboxOption>>,\n          )}\n          _value={checked[1]}\n          onUpdate:_value={(next: string[]) => setChecked(1, next)}\n        />\n      );\n      const panel = (side: 0 | 1, selectable: string[], total: number, body: VNodeChild) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable,\n          checked: checked[side],\n          total,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: body,\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(\n            0,\n            sourceLeaves().filter((key) => matchesSearch(key, 0)),\n            sourceLeaves().length,\n            tree,\n          )}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && sourceChecked.length > 0],\n            [() => move(1, checked[1]), () => move(0, sourceChecked)],\n            propsAction,\n          )}\n          {panel(\n            1,\n            value.filter((key) => matchesSearch(key, 1)),\n            targetOptions().length,\n            list,\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Transfer.js","names":["_isVNode","_createVNode","_mergeProps","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_computed"],"sources":["../../src/input/Transfer.tsx"],"sourcesContent":["/**\n * 穿梭框：左边是可选的，右边是已选的，勾上之后点中间的按钮移过去（分配权限、指派成员、挑选导出的列）。\n *\n *   <Transfer items={users} toOption={(user) => ({ value: user.id, label: user.name })} _value={memberIds} searchable />\n *   <TreeTransfer items={orgs} getKey={…} getLabel={…} getChildren={…} _value={teamIds} />   左边是一棵树\n *\n * - 每一边是一个可多选的 Listbox（焦点、方向键、空格勾选、虚拟滚动同 Listbox），上方是全选框、标题与“勾上 / 总数”，\n *   searchable 时带搜索框（按选项文字，认 createUi 的 textMatcher）。全选只管当前看得见（搜索后留下）的项。\n * - 中间两个按钮把勾上的项移到另一边（没有勾上的时不可用），双击一项直接移过去；移动后读屏播报移了几项。\n *   不可用的选项（ListboxOption 的 disabled）勾不上，也就移不动。\n * - value 是右边的值，按移过去的先后排列；items 里找不到的值不显示（也不会被删掉）。\n * - TreeTransfer：左边是勾选的 Tree（父子联动、可搜索），已经移过去的节点勾上且不可用；只移叶子，value 是叶子的 key。\n * - 在 Field 里时整体是一组（role=\"group\"，名称是 Field 的标签），两边的列表各以自己的标题为名。\n *\n * 部件：Root（div，role=\"group\"）、Panel（section，每一边）、Header、SelectAll（Checkbox）、Title、Count、\n * Search（TextField）、List（Listbox / Tree）、Actions（中间的按钮）。\n */\nimport { ChevronLeft, ChevronRight, Search } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { UpdateHandlers } from '@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime';\nimport { useId, type VNodeChild } from 'vue';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang, useTextMatcher } from '../config/context';\nimport { Tree, type TreeProps } from '../display/Tree';\nimport { useFieldControl } from '../form/Field';\nimport { checkedByStrategy, indexTree } from '../utils/data/tree';\nimport { announce } from '../utils/dom/announcer';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Checkbox } from './Checkbox';\nimport { Listbox, type ListboxBaseProps, type ListboxProps } from './Listbox';\nimport type { MultipleSelectionProps } from '../utils/data/selection';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { TextField, type TextFieldProps } from './TextField';\n\n/** 两边的列表（可多选的 Listbox）的属性：propsList 用它 */\nexport type TransferListProps<T> = ListboxBaseProps<T> & MultipleSelectionProps & OptionMapping<T>;\n\n/** Transfer 与 TreeTransfer 共有的属性；未声明的属性落到外层 div（role=\"group\"）上 */\nexport interface TransferBaseProps extends PartProps<'div', 'role'> {\n  /** 右边（已选）的值，按移过去的先后排列：父级写 _value={keys} */\n  _value?: string[];\n  /** 左右两边的标题，默认取语言包（可选、已选） */\n  titles?: readonly [string, string];\n  /** 两边带搜索框 */\n  searchable?: boolean;\n  /** 不可用：勾不了、移不了 */\n  disabled?: boolean;\n  /** 每一边的部件属性（section；列表的高度给它的 sx） */\n  propsPanel?: PartProps<'section'>;\n  /** 搜索框的部件属性 */\n  propsSearch?: Partial<TextFieldProps>;\n  /** 中间两个按钮的部件属性 */\n  propsAction?: Partial<IconButtonProps>;\n}\n\n/** 选项是 ListboxOption、字符串，或任意数据加 toOption */\nexport type TransferProps<T = ListboxOption> = TransferBaseProps &\n  OptionMapping<T> & {\n    /** 全部数据（两边一起）：右边显示 value 里的那些 */\n    items: readonly T[];\n    /** 搜索时怎样算匹配；默认选项文字包含输入（忽略大小写与重音，或 createUi 的 textMatcher） */\n    filter?: (item: T, query: string) => boolean;\n    /** 两边列表的部件属性 */\n    propsList?: Partial<TransferListProps<T>>;\n  };\n\n/** 左边是一棵树的穿梭框 */\nexport interface TreeTransferProps<T> extends TransferBaseProps {\n  /** 第一层的节点 */\n  items: readonly T[];\n  /** 节点的 key，整棵树里唯一 */\n  getKey: (node: T) => string;\n  /** 节点的文字 */\n  getLabel: (node: T) => string;\n  /** 子节点 */\n  getChildren: (node: T) => readonly T[] | undefined;\n  /** 左边的树的部件属性 */\n  propsTree?: Partial<TreeProps<T>>;\n  /** 右边列表的部件属性 */\n  propsList?: Partial<TransferListProps<ListboxOption>>;\n}\n\n/** Transfer 的样式：root、panel、header、title、search、list、actions、actionIcon */\nexport const transferStyles = css.create({\n  // 窄屏时上下排，按钮换成上下箭头\n  root: {\n    display: 'grid',\n    gridTemplateColumns: {\n      default: 'minmax(0, 1fr) auto minmax(0, 1fr)',\n      '@media (max-width: 40rem)': 'minmax(0, 1fr)',\n    },\n    alignItems: 'stretch',\n    gap: '_md',\n  },\n  panel: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    height: '20em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  title: { flexGrow: 1, minWidth: 0, fontWeight: '_semibold' },\n  search: { padding: '_xs', flexShrink: 0 },\n  searchField: { width: '_full' },\n  // 列表占满剩下的高度，自己滚动（虚拟滚动要有确定的高度）\n  list: { flexGrow: 1, minHeight: 0, borderWidth: 0, borderRadius: 0 },\n  actions: {\n    display: 'flex',\n    flexDirection: { default: 'column', '@media (max-width: 40rem)': 'row' },\n    justifyContent: 'center',\n    gap: '_sm',\n  },\n  actionIcon: { rotate: { default: null, '@media (max-width: 40rem)': '90deg' } },\n});\n\ninterface PanelOptions {\n  title: string;\n  titleId: string;\n  /** 看得见的、能勾的项 */\n  selectable: readonly string[];\n  /** 勾上的 */\n  checked: readonly string[];\n  /** 这一边一共几项 */\n  total: number;\n  onCheckAll: (keys: string[]) => void;\n  search: string;\n  onSearch: (text: string) => void;\n  searchable: boolean;\n  disabled: boolean;\n  propsPanel?: PartProps<'section'>;\n  propsSearch?: Partial<TextFieldProps>;\n  list: VNodeChild;\n}\n\n/** 一边：全选框、标题、计数、搜索框与列表 */\nfunction renderPanel(lang: ReturnType<typeof useLang>, options: PanelOptions) {\n  const visibleChecked = options.selectable.filter((key) => options.checked.includes(key));\n  const all = options.selectable.length > 0 && visibleChecked.length === options.selectable.length;\n  return (\n    <section\n      {...mergeAttrs<'section'>({ sx: transferStyles.panel }, options.propsPanel, {\n        'aria-labelledby': options.titleId,\n      })}\n    >\n      <div {...css.attrs(transferStyles.header)}>\n        <Checkbox\n          _checked={all}\n          onUpdate:_checked={(next: boolean) => {\n            const others = options.checked.filter((key) => !options.selectable.includes(key));\n            options.onCheckAll(next ? [...others, ...options.selectable] : others);\n          }}\n          indeterminate={!all && visibleChecked.length > 0}\n          disabled={options.disabled || options.selectable.length === 0}\n          aria-label={lang.transferSelectAll(options.title)}\n        />\n        <span id={options.titleId} {...css.attrs(transferStyles.title)}>\n          {options.title}\n        </span>\n        <Small tone=\"muted\">{lang.transferCount(options.checked.length, options.total)}</Small>\n      </div>\n      {options.searchable && (\n        <div {...css.attrs(transferStyles.search)}>\n          <TextField\n            {...mergePartProps<TextFieldProps>(\n              {\n                icon: Search,\n                variant: 'soft',\n                size: 'sm',\n                placeholder: lang.selectSearch,\n                'aria-label': `${lang.selectSearch} ${options.title}`,\n                propsRoot: { sx: transferStyles.searchField },\n              },\n              options.propsSearch,\n            )}\n            type=\"search\"\n            _value={options.search}\n            onUpdate:_value={options.onSearch}\n            disabled={options.disabled}\n          />\n        </div>\n      )}\n      {options.list}\n    </section>\n  );\n}\n\n/** 中间的两个按钮 */\nfunction renderActions(\n  lang: ReturnType<typeof useLang>,\n  titles: readonly [string, string],\n  enabled: readonly [boolean, boolean],\n  move: readonly [() => void, () => void],\n  propsAction: Partial<IconButtonProps> | undefined,\n) {\n  return (\n    <div {...css.attrs(transferStyles.actions)}>\n      {([1, 0] as const).map((to) => (\n        <IconButton\n          key={to}\n          {...mergePartProps<IconButtonProps>(\n            {\n              icon: to === 1 ? ChevronRight : ChevronLeft,\n              'aria-label': lang.transferMoveTo(titles[to]),\n              variant: 'soft',\n              size: 'sm',\n              propsIcon: { flipInRtl: true, sx: transferStyles.actionIcon },\n            },\n            propsAction,\n            { disabled: !enabled[to], onClick: move[to] },\n          )}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** 穿梭框：两个可多选的列表，勾上之后移到另一边 */\nexport const Transfer = _component(\n  <T,>({\n    items,\n    toOption,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    filter,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsList,\n    ...rest\n  }: TransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n\n    const entries = _derived.by(() =>\n      items.map((item) => ({ item, option: toListboxOption(item, toOption) })),\n    );\n    const byValue = _derived.by(() => new Map(entries.map((entry) => [entry.option.value, entry])));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n\n    const matches = (entry: (typeof entries)[number], query: string) => {\n      const text = query.trim();\n      if (!text) return true;\n      return filter ? filter(entry.item, text) : textMatcher()(entry.option.label, text);\n    };\n    /** 一边的全部项（左边按 items 的顺序，右边按移过去的先后） */\n    const sideEntries = (side: 0 | 1) =>\n      side === 0\n        ? entries.filter((entry) => !chosen.has(entry.option.value))\n        : value.flatMap((key) => byValue.get(key) ?? []);\n    const shownEntries = (side: 0 | 1) =>\n      sideEntries(side).filter((entry) => matches(entry, searches[side]));\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    /** 把 keys 从 from 这一边移到另一边 */\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => {\n        const entry = byValue.get(key);\n        return entry && !entry.option.disabled && chosen.has(key) === (from === 1);\n      });\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const list = (side: 0 | 1) => (\n        <Listbox\n          {...(mergePartProps<TransferListProps<T>>(\n            {\n              items: shownEntries(side).map((entry) => entry.item),\n              toOption: (item: T) => toListboxOption(item, toOption),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (item: T) => ({\n                // 双击直接移过去\n                onDblclick: () => move(side, [toListboxOption(item, toOption).value]),\n              }),\n            } as TransferListProps<T>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-${side}`,\n              'aria-labelledby': `${baseId}-title-${side}`,\n            } as Partial<TransferListProps<T>>,\n          ) as ListboxProps<T> & UpdateHandlers<ListboxProps<T>>)}\n          _value={checked[side]}\n          onUpdate:_value={(next: string[]) => setChecked(side, next)}\n        />\n      );\n      const panel = (side: 0 | 1) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable: shownEntries(side)\n            .filter((entry) => !entry.option.disabled)\n            .map((entry) => entry.option.value),\n          checked: checked[side],\n          total: sideEntries(side).length,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: list(side),\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(0)}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && checked[0].length > 0],\n            [() => move(1, checked[1]), () => move(0, checked[0])],\n            propsAction,\n          )}\n          {panel(1)}\n        </div>\n      );\n    };\n  },\n);\n\n/** 左边是一棵树的穿梭框：勾选叶子（父子联动）移到右边 */\nexport const TreeTransfer = _component(\n  <T,>({\n    items,\n    getKey,\n    getLabel,\n    getChildren,\n    _value: value = _bindable<string[]>([]),\n    titles,\n    searchable = false,\n    disabled,\n    propsPanel,\n    propsSearch,\n    propsAction,\n    propsTree,\n    propsList,\n    ...rest\n  }: TreeTransferProps<T>) => {\n    const lang = useLang();\n    const textMatcher = useTextMatcher();\n    const field = useFieldControl(() => ({ disabled }));\n    const baseId = useId();\n    let checked = _state<[string[], string[]]>([[], []]);\n    let searches = _state<[string, string]>(['', '']);\n    let expanded = _state<string[]>([]);\n\n    const index = _derived.by(() =>\n      indexTree(items, { getKey: (node) => getKey(node), getChildren }),\n    );\n    // key → 节点：右边的文字、左边“不可用”的判断都用它\n    const nodes = _derived.by(() => {\n      const map = new Map<string, T>();\n      const visit = (level: readonly T[]) =>\n        level.forEach((node) => {\n          map.set(getKey(node), node);\n          visit(getChildren(node) ?? []);\n        });\n      visit(items);\n      return map;\n    });\n    const leaves = _derived.by(() => index.order.filter((key) => !index.children.get(key)?.length));\n    const chosen = _derived.by(() => new Set(value));\n    const titleOf = (side: 0 | 1) =>\n      titles?.[side] ?? (side === 0 ? lang.transferSource : lang.transferTarget);\n    const matchesSearch = (key: string, side: 0 | 1) => {\n      const text = searches[side].trim();\n      const node = nodes.get(key);\n      return !text || (!!node && textMatcher()(getLabel(node), text));\n    };\n    // 左边能勾的叶子：还没移过去的（搜索时只算匹配的）\n    const sourceLeaves = () => leaves.filter((key) => !chosen.has(key));\n    const targetOptions = () =>\n      value.flatMap((key) => {\n        const node = nodes.get(key);\n        return node ? [{ value: key, label: getLabel(node) }] : [];\n      });\n\n    function setChecked(side: 0 | 1, keys: string[]) {\n      checked = side === 0 ? [keys, checked[1]] : [checked[0], keys];\n    }\n\n    function move(from: 0 | 1, keys: readonly string[]) {\n      const movable = keys.filter((key) => nodes.has(key) && chosen.has(key) === (from === 1));\n      if (field().disabled || movable.length === 0) return;\n      const moving = new Set(movable);\n      value = from === 0 ? [...value, ...movable] : value.filter((key) => !moving.has(key));\n      setChecked(\n        from,\n        checked[from].filter((key) => !moving.has(key)),\n      );\n      announce(lang.transferMoved(movable.length, titleOf(from === 0 ? 1 : 0)));\n    }\n\n    return () => {\n      const state = field();\n      const sourceChecked = checked[0];\n      const tree = (\n        <Tree\n          {...mergePartProps<TreeProps<T>>(\n            {\n              items,\n              getKey,\n              getLabel,\n              getChildren,\n              checkable: true,\n              // 已经移过去的叶子勾上且不可用\n              isDisabled: (node: T) => state.disabled || chosen.has(getKey(node)),\n              filter: searches[0],\n              propsScrollArea: { sx: transferStyles.list },\n            },\n            propsTree,\n            { 'aria-labelledby': `${baseId}-title-0` },\n          )}\n          _checked={[...value, ...sourceChecked]}\n          onUpdate:_checked={(next: string[]) =>\n            setChecked(\n              0,\n              checkedByStrategy(index, next, 'child').filter((key) => !chosen.has(key)),\n            )\n          }\n          _expanded={expanded}\n        />\n      );\n      const list = (\n        <Listbox\n          {...mergePartProps<TransferListProps<ListboxOption>>(\n            {\n              items: targetOptions().filter((option) => matchesSearch(option.value, 1)),\n              selectionMode: 'multiple',\n              sx: transferStyles.list,\n              propsOption: (option: ListboxOption) => ({\n                onDblclick: () => move(1, [option.value]),\n              }),\n            } as TransferListProps<ListboxOption>,\n            propsList,\n            {\n              disabled: state.disabled,\n              id: `${baseId}-1`,\n              'aria-labelledby': `${baseId}-title-1`,\n            } as Partial<TransferListProps<ListboxOption>>,\n          )}\n          _value={checked[1]}\n          onUpdate:_value={(next: string[]) => setChecked(1, next)}\n        />\n      );\n      const panel = (side: 0 | 1, selectable: string[], total: number, body: VNodeChild) =>\n        renderPanel(lang, {\n          title: titleOf(side),\n          titleId: `${baseId}-title-${side}`,\n          selectable,\n          checked: checked[side],\n          total,\n          onCheckAll: (keys) => setChecked(side, keys),\n          search: searches[side],\n          onSearch: (text) => (searches = side === 0 ? [text, searches[1]] : [searches[0], text]),\n          searchable,\n          disabled: state.disabled,\n          propsPanel,\n          propsSearch,\n          list: body,\n        });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: transferStyles.root }, rest, {\n            role: 'group',\n            'aria-labelledby': rest['aria-labelledby'] ?? state.labelledBy,\n            'aria-describedby': state.describedBy,\n          })}\n        >\n          {panel(\n            0,\n            sourceLeaves().filter((key) => matchesSearch(key, 0)),\n            sourceLeaves().length,\n            tree,\n          )}\n          {renderActions(\n            lang,\n            [titleOf(0), titleOf(1)],\n            [!state.disabled && checked[1].length > 0, !state.disabled && sourceChecked.length > 0],\n            [() => move(1, checked[1]), () => move(0, sourceChecked)],\n            propsAction,\n          )}\n          {panel(\n            1,\n            value.filter((key) => matchesSearch(key, 1)),\n            targetOptions().length,\n            list,\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/TreeSelect.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 { PresetIconButtonProps } from '../base/CloseButton';
 import { type IconProps } from '../base/Icon';
 import type { TagProps } from '../base/Tag';

package/dist/input/TreeSelect.js

@@ -19,7 +19,7 @@ import { TextField } from "./TextField.js";
 import { selectStyles } from "./Select.js";
 import { Fragment, computed, createVNode, ref, shallowRef, useId, watch } 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 { ChevronDown, Search } from "@lucide/icons";
 //#region src/input/TreeSelect.tsx
 /**