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

package/dist/input/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/Combobox.tsx"],"sourcesContent":["/**\n * 组合框（WAI-ARIA Combobox，aria-autocomplete=\"list\"）：边输入边从列表里选，或者只当带建议的输入框用。\n *\n *   <Field label=\"城市\"><Combobox items={cities} _value={city} /></Field>\n *   <Combobox items={results} filter={false} loading={searching} _inputValue={keyword} aria-label=\"搜索用户\" />\n *\n * 组合已有的部件：外壳同 TextField（controlParts），弹出层用 useAnchoredPopover（与外壳同宽），列表是 ListboxView。\n * 焦点一直在输入框里，高亮项经 aria-activedescendant 告诉读屏。\n *\n * - 过滤：默认本地按显示文字包含输入（Intl.Collator，忽略大小写与重音）；filter={false} 时不过滤，\n *   由调用方按 inputValue 换 items（异步搜索，配合 loading）。给 load 时组件自己请求：打开时与输入停下 300 ms 后\n *   按输入请求，只采用最后一次（remote-items.ts，同 Select）。\n * - 中文输入法：输入经 v-model 写回，组合输入期间 inputValue 不变，所以不会拿拼音去过滤。\n * - 选中后输入框显示选项文字；失焦时如果文字不是某个选项（且没开 allowCustomValue），恢复成已选项的文字，清空则取消选择。\n * - 键盘：↓ 打开、↑↓ / Page Up / Down 移动，Enter 选中，Esc 关闭（关闭时再按 Esc 清空）；Home / End 照常移动光标。\n *\n * 部件：Root（外壳）、Input（主元素）、Clear、Chevron（切换按钮）、Popover、Listbox。\n */\nimport { ChevronDown } from '@lucide/icons';\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 { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang, 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 { 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 { disclosureStyles } from '../utils/style/transitions';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  useResultAnnouncement,\n  useSelectedOptions,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\nimport { useRemoteItems, type OptionsLoader } from './remote-items';\n\n/** 角色、展开状态、值与可用性由组件管理 */\nexport type ComboboxManaged =\n  | 'value'\n  | 'role'\n  | 'size'\n  | 'disabled'\n  | 'readonly'\n  | 'required'\n  | 'autocomplete'\n  | 'aria-autocomplete'\n  | 'aria-expanded'\n  | 'aria-controls'\n  | 'aria-activedescendant'\n  | 'aria-invalid'\n  | 'aria-describedby';\n\n/** Combobox 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */\nexport interface ComboboxBaseProps<T>\n  extends PartProps<'input', ComboboxManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {\n  /** 数据：ListboxOption、字符串，或任意数据加 toOption；有 load 时是第一次加载之前的选项（编辑页放上已选的那一项） */\n  items?: readonly T[];\n  /** 选中项的值：父级写 _value={x}；没有选中时是 null */\n  _value?: string | null;\n  /** 输入框里的文字：父级可以写 _inputValue={x}（异步搜索时据此取数据） */\n  _inputValue?: string;\n  /** 是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 过滤：默认按显示文字包含输入（忽略大小写与重音）；函数自定义；false 不过滤（异步搜索） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 远程选项：打开时与输入停下 300 ms 后按输入调用，结果代替 items；只采用最后一次，被顶掉的请求 signal 中止 */\n  load?: OptionsLoader<T>;\n  /** 允许输入不在选项里的文字：失焦时保留，value 为 null */\n  allowCustomValue?: boolean;\n  /**\n   * 显示右侧的展开按钮；只当带建议的输入框用时（Autocomplete）关掉，列表随输入出现\n   * @default true\n   */\n  showToggle?: boolean;\n  /** 没有可选的项时不弹出列表（不显示“没有匹配的选项”）：只当带建议的输入框用时（Autocomplete） */\n  hideEmpty?: boolean;\n  /** 正在取选项（异步搜索）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */\n  loading?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有内容时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时的 name（用隐藏的 input 提交 value） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 自定义选项内容：`{(item, { selected, active }) => …}`，拿到 items 里的原始数据 */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 没有匹配的选项时列表里显示的内容 */\n  empty?: VNodeChild;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 切换按钮（下拉箭头）的部件属性 */\n  propsChevron?: Partial<IconButtonProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 组合框的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type ComboboxProps<T = ListboxOption> = ComboboxBaseProps<T> & OptionMapping<T>;\n\n/** Combobox 的样式：chevronOpen */\nexport const comboboxStyles = css.create({\n  chevronOpen: { rotate: '180deg' },\n});\n\n/** 组合框：输入框 + 过滤后的选项列表 */\nexport const Combobox = _component(\n  <T,>({\n    items = [],\n    toOption,\n    _value: value = _bindable<string | null>(null),\n    _inputValue: inputValue = _bindable(''),\n    _open: open = _bindable(false),\n    onOpenChange,\n    filter,\n    load,\n    allowCustomValue = false,\n    showToggle = true,\n    hideEmpty = false,\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    empty,\n    propsRoot,\n    icon,\n    propsIcon,\n    propsClear,\n    propsChevron,\n    propsPopover,\n    propsListbox,\n    ...rest\n  }: ComboboxProps<T>) => {\n    const lang = useLang();\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    // 用户输入的过滤词：选中、用箭头打开时清空（显示全部选项）\n    let query = _state('');\n    // 组件自己改 inputValue（选中后写入选项文字）时，不当作用户输入\n    let writing = false;\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    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n\n    function matches(item: T, text: string) {\n      if (!text) return true;\n      return filter ? filter(item, text) : textMatcher()(optionOf(item).label, text);\n    }\n\n    const remote = useRemoteItems({\n      load: () => load,\n      query: () => query,\n      open: () => open,\n      items: () => items,\n    });\n    const list = useListState({\n      // 有 load 或 filter={false} 时由服务端按输入过滤\n      items: () =>\n        load || filter === false\n          ? remote.items()\n          : remote.items().filter((item) => matches(item, query)),\n      toOption: optionOf,\n      selected: () => (value != null ? [value] : []),\n      mode: () => 'single',\n      // 再选已选的项不取消\n      required: () => true,\n      onChange: (next) => (value = next[0] ?? null),\n    });\n\n    // 已选项的文字：远程搜索换了 items 之后，仍按之前见过的文字显示\n    const selectedOf = useSelectedOptions({ items: remote.items, toOption: optionOf });\n    const selectedLabel = () => (value == null ? '' : selectedOf([value])[0]!.label);\n\n    function setText(text: string) {\n      if (inputValue === text) return;\n      writing = true;\n      inputValue = text;\n    }\n\n    useResultAnnouncement(() => ({ query, count: list.options.length }));\n\n    // 用户输入（含输入法组合结束）：打开并按输入过滤，高亮第一项\n    watch(\n      () => inputValue,\n      (text) => {\n        if (writing) {\n          writing = false;\n          return;\n        }\n        query = text;\n        // 只在输入框聚焦时打开：父级把 inputValue 改掉（重置成空）不该弹出列表\n        if (!control().readonly && document.activeElement === input) setOpen(true, 'trigger');\n        list.move('first');\n      },\n    );\n\n    // 父级改了 value，或选项后到（编辑页先拿到值、再拿到选项）：输入框跟着显示它的文字；用户正在输入时不打断\n    watch(\n      () => [value, selectedLabel()],\n      () => {\n        if (query) return;\n        if (!allowCustomValue || value != null) setText(selectedLabel());\n      },\n      { immediate: true },\n    );\n\n    function pick(choice: string, event?: Event) {\n      value = choice;\n      setText(selectedLabel());\n      query = '';\n      setOpen(false, 'select', event);\n    }\n\n    function show(event?: Event) {\n      query = '';\n      list.activateDefault();\n      setOpen(true, 'trigger', event);\n    }\n\n    // 失焦：文字不是选项时恢复（或清空选择）\n    function commit(event: FocusEvent) {\n      setOpen(false, 'focus', event);\n      if (allowCustomValue) {\n        if (inputValue !== selectedLabel()) value = null;\n        return;\n      }\n      if (!inputValue) value = null;\n      else setText(selectedLabel());\n      query = '';\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly || isComposingKey(event)) return;\n      if (event.key === 'Escape') {\n        // 打开时交给原生 popover 关闭；关闭时清空\n        if (!open && inputValue) {\n          event.preventDefault();\n          setText('');\n          value = null;\n        }\n        return;\n      }\n      if (!open) {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n          event.preventDefault();\n          show(event);\n        }\n        return;\n      }\n      if (handleListKeydown(list, event, { homeEnd: false }, (choice) => pick(choice, event)))\n        event.preventDefault();\n    }\n\n    // 列表是否真的弹出：hideEmpty 时没有可选的项（也不在加载）就不弹\n    const shown = () =>\n      open && (!hideEmpty || list.options.length > 0 || loading || remote.loading());\n\n    // 弹层贴着外壳、与它同宽；焦点一直在输入框上，关闭时不用归还\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open: shown(),\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, propsRoot, {\n              ref: _toRef(shell),\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            {/* _bind 编译为 v-model：输入法组合期间不写回 */}\n            <input\n              {...mergeAttrs<'input'>(s.input, rest, {\n                ref: _toRef(input),\n                id: state.id,\n                role: 'combobox',\n                autocomplete: 'off',\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-autocomplete': 'list',\n                'aria-expanded': shown(),\n                'aria-controls': listId,\n                'aria-activedescendant': open ? activeOptionId(list, listId) : undefined,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': state.describedBy,\n                onKeydown,\n                onBlur: commit,\n              })}\n              _value={inputValue}\n            />\n            {clearable &&\n              inputValue &&\n              editable &&\n              controlClear(s, propsClear, () => {\n                setText('');\n                value = null;\n                input?.focus();\n              })}\n            {showToggle && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    ...s.button,\n                    sx: [s.button.sx, disclosureStyles.icon, open && comboboxStyles.chevronOpen],\n                    radius: 'full',\n                    icon: ChevronDown,\n                    'aria-label': lang.comboboxToggle,\n                  },\n                  propsChevron,\n                  {\n                    tabindex: -1,\n                    disabled: !editable,\n                    'aria-expanded': shown(),\n                    'aria-controls': listId,\n                    // 不让输入框失焦（失焦会提交并关闭）\n                    onPointerdown: (event: PointerEvent) => event.preventDefault(),\n                    onClick: (event: MouseEvent) => {\n                      if (open) setOpen(false, 'trigger', event);\n                      else show(event);\n                      input?.focus();\n                    },\n                  },\n                )}\n              />\n            )}\n            <FormValue name={name} value={value} disabled={state.disabled} />\n          </div>\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 || remote.loading()}\n            onPick={(choice) => pick(choice)}\n            listbox={{\n              list,\n              id: listId,\n              renderOption: children,\n              empty: remote.failure() ?? empty,\n            }}\n            propsListbox={propsListbox}\n            propsPopover={propsPopover}\n          />\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/Combobox.tsx"],"sourcesContent":["/**\n * 组合框（WAI-ARIA Combobox，aria-autocomplete=\"list\"）：边输入边从列表里选，或者只当带建议的输入框用。\n *\n *   <Field label=\"城市\"><Combobox items={cities} _value={city} /></Field>\n *   <Combobox items={results} filter={false} loading={searching} _inputValue={keyword} aria-label=\"搜索用户\" />\n *\n * 组合已有的部件：外壳同 TextField（controlParts），弹出层用 useAnchoredPopover（与外壳同宽），列表是 ListboxView。\n * 焦点一直在输入框里，高亮项经 aria-activedescendant 告诉读屏。\n *\n * - 过滤：默认本地按显示文字包含输入（Intl.Collator，忽略大小写与重音）；filter={false} 时不过滤，\n *   由调用方按 inputValue 换 items（异步搜索，配合 loading）。给 load 时组件自己请求：打开时与输入停下 300 ms 后\n *   按输入请求，只采用最后一次（remote-items.ts，同 Select）。\n * - 中文输入法：输入经 v-model 写回，组合输入期间 inputValue 不变，所以不会拿拼音去过滤。\n * - 选中后输入框显示选项文字；失焦时如果文字不是某个选项（且没开 allowCustomValue），恢复成已选项的文字，清空则取消选择。\n * - 键盘：↓ 打开、↑↓ / Page Up / Down 移动，Enter 选中，Esc 关闭（关闭时再按 Esc 清空）；Home / End 照常移动光标。\n *\n * 部件：Root（外壳）、Input（主元素）、Clear、Chevron（切换按钮）、Popover、Listbox。\n */\nimport { ChevronDown } from '@lucide/icons';\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 { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang, 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 { 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 { disclosureStyles } from '../utils/style/transitions';\nimport { activeOptionId, type ListboxViewProps, type OptionRenderState } from './Listbox';\nimport {\n  handleListKeydown,\n  useListState,\n  useResultAnnouncement,\n  useSelectedOptions,\n  type ListboxOption,\n  type OptionMapping,\n  toListboxOption,\n} from './list-state';\nimport { useRemoteItems, type OptionsLoader } from './remote-items';\n\n/** 角色、展开状态、值与可用性由组件管理 */\nexport type ComboboxManaged =\n  | 'value'\n  | 'role'\n  | 'size'\n  | 'disabled'\n  | 'readonly'\n  | 'required'\n  | 'autocomplete'\n  | 'aria-autocomplete'\n  | 'aria-expanded'\n  | 'aria-controls'\n  | 'aria-activedescendant'\n  | 'aria-invalid'\n  | 'aria-describedby';\n\n/** Combobox 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */\nexport interface ComboboxBaseProps<T>\n  extends PartProps<'input', ComboboxManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {\n  /** 数据：ListboxOption、字符串，或任意数据加 toOption；有 load 时是第一次加载之前的选项（编辑页放上已选的那一项） */\n  items?: readonly T[];\n  /** 选中项的值：父级写 _value={x}；没有选中时是 null */\n  _value?: string | null;\n  /** 输入框里的文字：父级可以写 _inputValue={x}（异步搜索时据此取数据） */\n  _inputValue?: string;\n  /** 是否打开：父级可以写 _open={x} */\n  _open?: boolean;\n  /** 过滤：默认按显示文字包含输入（忽略大小写与重音）；函数自定义；false 不过滤（异步搜索） */\n  filter?: false | ((item: T, query: string) => boolean);\n  /** 远程选项：打开时与输入停下 300 ms 后按输入调用，结果代替 items；只采用最后一次，被顶掉的请求 signal 中止 */\n  load?: OptionsLoader<T>;\n  /** 允许输入不在选项里的文字：失焦时保留，value 为 null */\n  allowCustomValue?: boolean;\n  /**\n   * 显示右侧的展开按钮；只当带建议的输入框用时（Autocomplete）关掉，列表随输入出现\n   * @default true\n   */\n  showToggle?: boolean;\n  /** 没有可选的项时不弹出列表（不显示“没有匹配的选项”）：只当带建议的输入框用时（Autocomplete） */\n  hideEmpty?: boolean;\n  /** 正在取选项（异步搜索）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */\n  loading?: boolean;\n  /** 弹出位置，默认 bottom-start */\n  placement?: FloatingPlacement;\n  /** 有内容时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时的 name（用隐藏的 input 提交 value） */\n  name?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 自定义选项内容：`{(item, { selected, active }) => …}`，拿到 items 里的原始数据 */\n  children?: (item: T, state: OptionRenderState) => VNodeChild;\n  /** 没有匹配的选项时列表里显示的内容 */\n  empty?: VNodeChild;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Partial<PresetIconButtonProps>;\n  /** 切换按钮（下拉箭头）的部件属性 */\n  propsChevron?: Partial<IconButtonProps>;\n  /** 弹出层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover'>;\n  /** 列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n}\n\n/** 组合框的属性；items 不是 ListboxOption 或字符串时要给 toOption */\nexport type ComboboxProps<T = ListboxOption> = ComboboxBaseProps<T> & OptionMapping<T>;\n\n/** Combobox 的样式：chevronOpen */\nexport const comboboxStyles = css.create({\n  chevronOpen: { rotate: '180deg' },\n});\n\n/** 组合框：输入框 + 过滤后的选项列表 */\nexport const Combobox = _component(\n  <T,>({\n    items = [],\n    toOption,\n    _value: value = _bindable<string | null>(null),\n    _inputValue: inputValue = _bindable(''),\n    _open: open = _bindable(false),\n    onOpenChange,\n    filter,\n    load,\n    allowCustomValue = false,\n    showToggle = true,\n    hideEmpty = false,\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    empty,\n    propsRoot,\n    icon,\n    propsIcon,\n    propsClear,\n    propsChevron,\n    propsPopover,\n    propsListbox,\n    ...rest\n  }: ComboboxProps<T>) => {\n    const lang = useLang();\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    // 用户输入的过滤词：选中、用箭头打开时清空（显示全部选项）\n    let query = _state('');\n    // 组件自己改 inputValue（选中后写入选项文字）时，不当作用户输入\n    let writing = false;\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    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const optionOf = (item: T) => toListboxOption(item, toOption);\n\n    function matches(item: T, text: string) {\n      if (!text) return true;\n      return filter ? filter(item, text) : textMatcher()(optionOf(item).label, text);\n    }\n\n    const remote = useRemoteItems({\n      load: () => load,\n      query: () => query,\n      open: () => open,\n      items: () => items,\n    });\n    const list = useListState({\n      // 有 load 或 filter={false} 时由服务端按输入过滤\n      items: () =>\n        load || filter === false\n          ? remote.items()\n          : remote.items().filter((item) => matches(item, query)),\n      toOption: optionOf,\n      selected: () => (value != null ? [value] : []),\n      mode: () => 'single',\n      // 再选已选的项不取消\n      required: () => true,\n      onChange: (next) => (value = next[0] ?? null),\n    });\n\n    // 已选项的文字：远程搜索换了 items 之后，仍按之前见过的文字显示\n    const selectedOf = useSelectedOptions({ items: remote.items, toOption: optionOf });\n    const selectedLabel = () => (value == null ? '' : selectedOf([value])[0]!.label);\n\n    function setText(text: string) {\n      if (inputValue === text) return;\n      writing = true;\n      inputValue = text;\n    }\n\n    useResultAnnouncement(() => ({ query, count: list.options.length }));\n\n    // 用户输入（含输入法组合结束）：打开并按输入过滤，高亮第一项\n    watch(\n      () => inputValue,\n      (text) => {\n        if (writing) {\n          writing = false;\n          return;\n        }\n        query = text;\n        // 只在输入框聚焦时打开：父级把 inputValue 改掉（重置成空）不该弹出列表\n        if (!control().readonly && document.activeElement === input) setOpen(true, 'trigger');\n        list.move('first');\n      },\n    );\n\n    // 父级改了 value，或选项后到（编辑页先拿到值、再拿到选项）：输入框跟着显示它的文字；用户正在输入时不打断\n    watch(\n      () => [value, selectedLabel()],\n      () => {\n        if (query) return;\n        if (!allowCustomValue || value != null) setText(selectedLabel());\n      },\n      { immediate: true },\n    );\n\n    function pick(choice: string, event?: Event) {\n      value = choice;\n      setText(selectedLabel());\n      query = '';\n      setOpen(false, 'select', event);\n    }\n\n    function show(event?: Event) {\n      query = '';\n      list.activateDefault();\n      setOpen(true, 'trigger', event);\n    }\n\n    // 失焦：文字不是选项时恢复（或清空选择）\n    function commit(event: FocusEvent) {\n      setOpen(false, 'focus', event);\n      if (allowCustomValue) {\n        if (inputValue !== selectedLabel()) value = null;\n        return;\n      }\n      if (!inputValue) value = null;\n      else setText(selectedLabel());\n      query = '';\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const state = control();\n      if (state.disabled || state.readonly || isComposingKey(event)) return;\n      if (event.key === 'Escape') {\n        // 打开时交给原生 popover 关闭；关闭时清空\n        if (!open && inputValue) {\n          event.preventDefault();\n          setText('');\n          value = null;\n        }\n        return;\n      }\n      if (!open) {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n          event.preventDefault();\n          show(event);\n        }\n        return;\n      }\n      if (handleListKeydown(list, event, { homeEnd: false }, (choice) => pick(choice, event)))\n        event.preventDefault();\n    }\n\n    // 列表是否真的弹出：hideEmpty 时没有可选的项（也不在加载）就不弹\n    const shown = () =>\n      open && (!hideEmpty || list.options.length > 0 || loading || remote.loading());\n\n    // 弹层贴着外壳、与它同宽；焦点一直在输入框上，关闭时不用归还\n    const { onToggle } = useAnchoredPopover(\n      () => ({\n        open: shown(),\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, propsRoot, {\n              ref: _toRef(shell),\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            {/* _bind 编译为 v-model：输入法组合期间不写回 */}\n            <input\n              {...mergeAttrs<'input'>(s.input, rest, {\n                ref: _toRef(input),\n                id: state.id,\n                role: 'combobox',\n                autocomplete: 'off',\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-autocomplete': 'list',\n                'aria-expanded': shown(),\n                'aria-controls': listId,\n                'aria-activedescendant': open ? activeOptionId(list, listId) : undefined,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': state.describedBy,\n                onKeydown,\n                onBlur: commit,\n              })}\n              _value={inputValue}\n            />\n            {clearable &&\n              inputValue &&\n              editable &&\n              controlClear(s, propsClear, () => {\n                setText('');\n                value = null;\n                input?.focus();\n              })}\n            {showToggle && (\n              <IconButton\n                {...mergePartProps<IconButtonProps>(\n                  {\n                    ...s.button,\n                    sx: [s.button.sx, disclosureStyles.icon, open && comboboxStyles.chevronOpen],\n                    radius: 'full',\n                    icon: ChevronDown,\n                    'aria-label': lang.comboboxToggle,\n                  },\n                  propsChevron,\n                  {\n                    tabindex: -1,\n                    disabled: !editable,\n                    'aria-expanded': shown(),\n                    'aria-controls': listId,\n                    // 不让输入框失焦（失焦会提交并关闭）\n                    onPointerdown: (event: PointerEvent) => event.preventDefault(),\n                    onClick: (event: MouseEvent) => {\n                      if (open) setOpen(false, 'trigger', event);\n                      else show(event);\n                      input?.focus();\n                    },\n                  },\n                )}\n              />\n            )}\n            <FormValue name={name} value={value} disabled={state.disabled} />\n          </div>\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 || remote.loading()}\n            onPick={(choice) => pick(choice)}\n            listbox={{\n              list,\n              id: listId,\n              renderOption: children,\n              empty: remote.failure() ?? empty,\n            }}\n            propsListbox={propsListbox}\n            propsPopover={propsPopover}\n          />\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/ConditionBuilder.js

@@ -12,8 +12,8 @@ import { DateRangePicker } from "../date/DateRangePicker.js";
 import { isRuleComplete, operatorLabel, operatorsOf, toText, valueShape } from "./condition.js";
 import { NumberRangeField } from "./NumberRangeField.js";
 import { TagsInput } from "./TagsInput.js";
-import { createVNode, mergeProps, nextTick, ref, watch } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, nextTick, ref, watch } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Plus, Trash2, X } from "@lucide/icons";
 //#region src/input/ConditionBuilder.tsx
@@ -218,8 +218,9 @@ var ConditionBuilder = /*#__PURE__*/ _component((_props, _ctx) => {
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	let element = null;
-	let emitted = JSON.stringify(value.value ?? null);
-	let tree = ref(value.value ? toGroup(value.value) : group("all"));
+	const initial = untrack(() => value.value);
+	let emitted = JSON.stringify(initial ?? null);
+	let tree = ref(initial ? toGroup(initial) : group("all"));
 	watch(() => value.value, (next) => {
 		const key = JSON.stringify(next ?? null);
 		if (key === emitted) return;
@@ -299,33 +300,33 @@ var ConditionBuilder = /*#__PURE__*/ _component((_props, _ctx) => {
 				label: option.label
 			}));
 			const back = (key) => options.find((option) => String(option.value) === key)?.value;
-			return shape === "list" ? createVNode(Select, mergeProps(common, {
+			return shape === "list" ? createVNode(Select, mergeJsxProps(common, {
 				"items": items,
 				"selectionMode": "multiple",
 				"maxTagCount": "responsive",
 				"_value": (node.value ?? []).map(String),
 				"onUpdate:_value": (keys) => onChange(keys.map(back))
-			}), null) : createVNode(Select, mergeProps(common, {
+			}), null) : createVNode(Select, mergeJsxProps(common, {
 				"items": items,
 				"_value": optionKey(node.value),
 				"onUpdate:_value": (key) => onChange(back(key))
 			}), null);
 		}
-		if (shape === "list") return createVNode(TagsInput, mergeProps(common, {
+		if (shape === "list") return createVNode(TagsInput, mergeJsxProps(common, {
 			"_value": (node.value ?? []).map(String),
 			"onUpdate:_value": (list) => onChange(field.type === "number" ? list.map(Number).filter((n) => !Number.isNaN(n)) : list)
 		}), null);
-		if (field.type === "number") return shape === "range" ? createVNode(NumberRangeField, mergeProps(common, {
+		if (field.type === "number") return shape === "range" ? createVNode(NumberRangeField, mergeJsxProps(common, {
 			"_value": node.value ?? [null, null],
 			"onUpdate:_value": (range) => onChange([...range])
-		}), null) : createVNode(NumberField, mergeProps(common, {
+		}), null) : createVNode(NumberField, mergeJsxProps(common, {
 			"_value": node.value ?? null,
 			"onUpdate:_value": onChange
 		}), null);
 		if (field.type === "date") {
 			if (shape === "range") {
 				const [start, end] = node.value ?? [null, null];
-				return createVNode(DateRangePicker, mergeProps(common, {
+				return createVNode(DateRangePicker, mergeJsxProps(common, {
 					"_value": start && end ? {
 						start,
 						end
@@ -333,12 +334,12 @@ var ConditionBuilder = /*#__PURE__*/ _component((_props, _ctx) => {
 					"onUpdate:_value": (range) => onChange(range ? [range.start, range.end] : [null, null])
 				}), null);
 			}
-			return createVNode(DatePicker, mergeProps(common, {
+			return createVNode(DatePicker, mergeJsxProps(common, {
 				"_value": node.value ?? null,
 				"onUpdate:_value": onChange
 			}), null);
 		}
-		return createVNode(TextField, mergeProps(common, {
+		return createVNode(TextField, mergeJsxProps(common, {
 			"_value": node.value ?? "",
 			"onUpdate:_value": onChange
 		}), null);
@@ -426,8 +427,8 @@ var ConditionBuilder = /*#__PURE__*/ _component((_props, _ctx) => {
 			node.children.length === 0 ? !nested && createVNode(Small, { "sx": conditionBuilderStyles.empty }, {
 				default: () => [lang.conditionEmpty],
 				$stable: true
-			}) : createVNode("div", css.attrs(conditionBuilderStyles.rows), [node.children.map((child, index) => createVNode("div", mergeProps({ "key": child.id }, css.attrs(conditionBuilderStyles.row)), [createVNode("span", mergeProps(css.attrs(conditionBuilderStyles.joiner), { "aria-hidden": "true" }), [index > 0 ? joiner : ""]), child.kind === "rule" ? renderRule(node, child, index) : renderGroup(child, depth + 1, node)]))]),
-			createVNode("div", mergeProps(css.attrs(conditionBuilderStyles.actions, node.children.length === 0 && conditionBuilderStyles.actionsRoot), { "data-condition-part": "actions" }), [createVNode(Button, {
+			}) : createVNode("div", css.attrs(conditionBuilderStyles.rows), [node.children.map((child, index) => createVNode("div", mergeJsxProps({ "key": child.id }, css.attrs(conditionBuilderStyles.row)), [createVNode("span", mergeJsxProps(css.attrs(conditionBuilderStyles.joiner), { "aria-hidden": "true" }), [index > 0 ? joiner : ""]), child.kind === "rule" ? renderRule(node, child, index) : renderGroup(child, depth + 1, node)]))]),
+			createVNode("div", mergeJsxProps(css.attrs(conditionBuilderStyles.actions, node.children.length === 0 && conditionBuilderStyles.actionsRoot), { "data-condition-part": "actions" }), [createVNode(Button, {
 				"variant": "ghost",
 				"size": size.value,
 				"icon": Plus,

package/dist/input/ConditionBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/ConditionBuilder.tsx"],"sourcesContent":["/**\n * 条件构造器：编辑 all / any / not 加比较的条件树（Condition，见 condition.ts）。每条是“字段 · 比较方式 · 值”，\n * 比较方式随字段类型、值的输入随字段类型与比较方式；组的表头选满足方式（全部、任一、都不、不全），组里还能再加组。\n *\n *   const fields: ConditionField[] = [\n *     { name: 'amount', label: '金额', type: 'number' },\n *     { name: 'category', label: '品类', type: 'select', options: [{ value: 'steel', label: '钢材' }, …] },\n *     { name: 'owner', label: '经办人', type: 'select', input: ({ value, onChange, label }) => <UserPicker … /> },\n *   ];\n *   let condition = _state<Condition | null>(null);\n *   <ConditionBuilder fields={fields} _value={condition} aria-label=\"审批条件\" />\n *\n * 写回的是只含填完整的比较的条件：没选字段、没填值的那几条留在界面上，不进 _value；一条也没有时是 null。\n * 根总是一个组（{ all }、{ any }，都不满足是 { not: { any } }，不全满足是 { not: { all } }）；\n * 传进来的单条比较、嵌套的 not 按同样的规则读成组。父级改了 _value（与上次写回的不同）时整棵重读。\n *\n * 读屏：根与每个嵌套的组是 role=\"group\"，每条比较也是一组（“条件 2”），三个控件各有名称（“字段”“比较方式”“金额的值”）。\n * 加了一条之后焦点落到它的字段上；删掉之后落到组的“添加条件”上。\n * 部件：Root（div）、Group（每个组）、Rule（每条比较）。\n */\nimport { Plus, Trash2, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { t } from '../config/theme/tokens';\nimport { DatePicker } from '../date/DatePicker';\nimport { DateRangePicker } from '../date/DateRangePicker';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport {\n  isRuleComplete,\n  operatorLabel,\n  toText,\n  operatorsOf,\n  valueShape,\n  type Condition,\n  type ConditionField,\n  type ConditionOp,\n  type ConditionRule,\n} from './condition';\nimport { NumberField } from './NumberField';\nimport { NumberRangeField } from './NumberRangeField';\nimport { Select } from './Select';\nimport { TagsInput } from './TagsInput';\nimport { TextField } from './TextField';\n\n/** 组的满足方式 */\nexport interface ConditionModes {\n  /** 全部满足：{ all } */\n  all: unknown;\n  /** 任一满足：{ any } */\n  any: unknown;\n  /** 都不满足：{ not: { any } } */\n  none: unknown;\n  /** 不全满足：{ not: { all } } */\n  notAll: unknown;\n}\n\n/** 组的满足方式 */\nexport type ConditionMode = keyof ConditionModes;\n\n/** 未声明的属性落到外层 div（role=\"group\"）上：aria-label 写条件管什么 */\nexport interface ConditionBuilderProps extends PartProps<'div', 'role'> {\n  /** 能参与比较的字段 */\n  fields: readonly ConditionField[];\n  /** 条件：父级写 _value={condition} 双向绑定；没有填完整的比较时是 null */\n  _value?: Condition | null;\n  /** 组最多嵌套几层，默认 2（根组里还能加一层组）；1 时不能加组 */\n  maxDepth?: number;\n  /** 控件与按钮的字号档位，不写时继承 */\n  size?: TextSize;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 每个组的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 每条比较的部件属性 */\n  propsRule?: PartProps<'div'>;\n}\n\ninterface RuleNode {\n  kind: 'rule';\n  id: number;\n  field: string | null;\n  op: ConditionOp | null;\n  value: unknown;\n}\n\ninterface GroupNode {\n  kind: 'group';\n  id: number;\n  mode: ConditionMode;\n  children: (RuleNode | GroupNode)[];\n}\n\nconst MODES: readonly ConditionMode[] = ['all', 'any', 'none', 'notAll'];\n\n/** ConditionBuilder 的样式：root、group、nested、header、rows、row、joiner、rule、field、op、value、range、actions、empty */\nexport const conditionBuilderStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  group: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  // 嵌套的组：浅底加描边，和外层的条件分开\n  nested: {\n    flexGrow: 1,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  rows: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  row: { display: 'flex', alignItems: 'flex-start', gap: '_sm', minWidth: 0 },\n  // 连接词（且、或）一列，宽度固定：各条的字段对齐\n  joiner: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '2em',\n    // 与控件同高：连接词对着这一条的第一行\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  rule: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  field: { flexGrow: 1, flexShrink: 1, flexBasis: '9rem', minWidth: '7rem', maxWidth: '14rem' },\n  op: { flexGrow: 0, flexShrink: 1, flexBasis: '8rem', minWidth: '6rem' },\n  // grid：里面的输入框拉满这一格（多选的标签按这个宽度排）\n  value: { display: 'grid', flexGrow: 2, flexShrink: 1, flexBasis: '12rem', minWidth: '8rem' },\n  range: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  actions: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    paddingInlineStart: 'calc(2em + 0.5rem)',\n  },\n  actionsRoot: { paddingInlineStart: 0 },\n  removeGroup: { marginInlineStart: 'auto' },\n  empty: { color: '_textMuted' },\n});\n\nlet nextId = 0;\nconst rule = (\n  field: string | null = null,\n  op: ConditionOp | null = null,\n  value?: unknown,\n): RuleNode => ({\n  kind: 'rule',\n  id: ++nextId,\n  field,\n  op,\n  value,\n});\nconst group = (mode: ConditionMode, children: (RuleNode | GroupNode)[] = []): GroupNode => ({\n  kind: 'group',\n  id: ++nextId,\n  mode,\n  children,\n});\n\n/** 条件读成界面上的组：not 包着 any 是“都不满足”、包着 all 是“不全满足”，包着单条比较是只有它的“都不满足” */\nfunction toGroup(condition: Condition): GroupNode {\n  if ('all' in condition) return group('all', condition.all.map(toNode));\n  if ('any' in condition) return group('any', condition.any.map(toNode));\n  if ('not' in condition) {\n    const inner = condition.not;\n    if ('not' in inner) return toGroup(inner.not);\n    if ('any' in inner) return group('none', inner.any.map(toNode));\n    if ('all' in inner) return group('notAll', inner.all.map(toNode));\n    return group('none', [toNode(inner)]);\n  }\n  return group('all', [toNode(condition)]);\n}\n\nfunction toNode(condition: Condition): RuleNode | GroupNode {\n  return 'field' in condition\n    ? rule(condition.field, condition.op, condition.value)\n    : toGroup(condition);\n}\n\n/** 界面上的组写回条件：只留填完整的比较，空的组去掉 */\nfunction toCondition(node: GroupNode): Condition | null {\n  const list = node.children.flatMap((child): Condition[] => {\n    if (child.kind === 'group') {\n      const nested = toCondition(child);\n      return nested ? [nested] : [];\n    }\n    if (!child.field || !child.op) return [];\n    const item: ConditionRule =\n      valueShape(child.op) === 'none'\n        ? { field: child.field, op: child.op }\n        : { field: child.field, op: child.op, value: child.value };\n    return isRuleComplete(item) ? [item] : [];\n  });\n  if (list.length === 0) return null;\n  switch (node.mode) {\n    case 'all':\n      return { all: list };\n    case 'any':\n      return { any: list };\n    case 'none':\n      return { not: { any: list } };\n    case 'notAll':\n      return { not: { all: list } };\n  }\n}\n\n/** 换比较方式时把值换成新的形状：一个值 ↔ 一组值 ↔ 范围，尽量留住已经填的 */\nfunction reshape(value: unknown, op: ConditionOp): unknown {\n  const first = Array.isArray(value) ? value.find((item) => item != null && item !== '') : value;\n  switch (valueShape(op)) {\n    case 'none':\n      return undefined;\n    case 'list':\n      return Array.isArray(value)\n        ? value.filter((item) => item != null)\n        : first == null\n          ? []\n          : [first];\n    case 'range':\n      return Array.isArray(value) && value.length === 2 ? value : [first ?? null, null];\n    case 'single':\n      return first;\n  }\n}\n\n/** 选项的值写成文字（Select 的值是文字），选中后再换回原来的值 */\nconst optionKey = (value: unknown) => (value == null ? null : toText(value));\n\n/** 条件构造器 */\nexport const ConditionBuilder = _component(\n  ({\n    fields,\n    _value: value = _bindable<Condition | null>(null),\n    maxDepth = 2,\n    size,\n    disabled = false,\n    propsGroup,\n    propsRule,\n    ...rest\n  }: ConditionBuilderProps) => {\n    const lang = useLang();\n    let element: HTMLElement | null = null;\n    // 上次写回的值：父级改成别的才整棵重读，自己写回的不重读（没填完的那几条还要留在界面上）\n    let emitted = JSON.stringify(value ?? null);\n    let tree = _state<GroupNode>(value ? toGroup(value) : group('all'));\n\n    watch(\n      () => value,\n      (next) => {\n        const key = JSON.stringify(next ?? null);\n        if (key === emitted) return;\n        emitted = key;\n        tree = next ? toGroup(next) : group('all');\n      },\n    );\n\n    function commit() {\n      const next = toCondition(tree);\n      emitted = JSON.stringify(next);\n      value = next;\n    }\n\n    const fieldOf = (name: string | null) => fields.find((field) => field.name === name);\n\n    /** 渲染之后把焦点移到某个元素上（加了一条之后到它的字段，删掉之后到“添加条件”） */\n    function focusLater(selector: string) {\n      void nextTick(() => element?.querySelector<HTMLElement>(selector)?.focus());\n    }\n\n    function addRule(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(added);\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function addGroup(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(group('all', [added]));\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function remove(parent: GroupNode, child: RuleNode | GroupNode) {\n      parent.children = parent.children.filter((item) => item !== child);\n      commit();\n      focusLater(`[data-condition-group=\"${parent.id}\"] > [data-condition-part=\"actions\"] button`);\n    }\n\n    function setField(node: RuleNode, name: string | null) {\n      const field = fieldOf(name);\n      node.field = name;\n      const ops = field ? operatorsOf(field) : [];\n      if (!node.op || !ops.includes(node.op)) node.op = ops[0] ?? null;\n      // 换了字段，原来的值多半不适用：清空，是否型默认“是”\n      node.value = node.op\n        ? reshape(field?.type === 'boolean' ? true : undefined, node.op)\n        : undefined;\n      commit();\n    }\n\n    function setOp(node: RuleNode, op: ConditionOp) {\n      node.op = op;\n      node.value = reshape(node.value, op);\n      commit();\n    }\n\n    function setValue(node: RuleNode, next: unknown) {\n      node.value = next;\n      commit();\n    }\n\n    /** 值的输入：随字段类型与比较方式 */\n    function renderValue(node: RuleNode, field: ConditionField, op: ConditionOp): VNodeChild {\n      const label = lang.conditionValue(field.label);\n      const shape = valueShape(op);\n      const onChange = (next: unknown) => setValue(node, next);\n      const common = { size, disabled, 'aria-label': label };\n      if (shape === 'none') return null;\n      if (field.input) return field.input({ field, op, value: node.value, onChange, label });\n\n      if (field.type === 'select' || field.type === 'boolean') {\n        const options =\n          field.type === 'boolean'\n            ? [\n                { value: true, label: lang.conditionTrue },\n                { value: false, label: lang.conditionFalse },\n              ]\n            : (field.options ?? []);\n        const items = options.map((option) => ({\n          value: String(option.value),\n          label: option.label,\n        }));\n        const back = (key: string | null) =>\n          options.find((option) => String(option.value) === key)?.value;\n        return shape === 'list' ? (\n          <Select\n            {...common}\n            items={items}\n            selectionMode=\"multiple\"\n            maxTagCount=\"responsive\"\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(keys) => onChange((keys as string[]).map(back))}\n          />\n        ) : (\n          <Select\n            {...common}\n            items={items}\n            _value={optionKey(node.value)}\n            onUpdate:_value={(key) => onChange(back(key as string | null))}\n          />\n        );\n      }\n\n      if (shape === 'list') {\n        return (\n          <TagsInput\n            {...common}\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(list) =>\n              onChange(\n                field.type === 'number' ? list.map(Number).filter((n) => !Number.isNaN(n)) : list,\n              )\n            }\n          />\n        );\n      }\n\n      if (field.type === 'number') {\n        return shape === 'range' ? (\n          <NumberRangeField\n            {...common}\n            _value={(node.value as [number | null, number | null] | undefined) ?? [null, null]}\n            onUpdate:_value={(range) => onChange([...range])}\n          />\n        ) : (\n          <NumberField\n            {...common}\n            _value={(node.value as number | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      if (field.type === 'date') {\n        if (shape === 'range') {\n          const [start, end] = (node.value as [string | null, string | null] | undefined) ?? [\n            null,\n            null,\n          ];\n          return (\n            <DateRangePicker\n              {...common}\n              _value={start && end ? { start, end } : null}\n              onUpdate:_value={(range) => onChange(range ? [range.start, range.end] : [null, null])}\n            />\n          );\n        }\n        return (\n          <DatePicker\n            {...common}\n            _value={(node.value as string | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...common}\n          _value={(node.value as string | undefined) ?? ''}\n          onUpdate:_value={onChange}\n        />\n      );\n    }\n\n    function renderRule(parent: GroupNode, node: RuleNode, index: number): VNodeChild {\n      const field = fieldOf(node.field);\n      const ops = field ? operatorsOf(field) : [];\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.rule }, propsRule, {\n            role: 'group',\n            'aria-label': lang.conditionRule(index + 1),\n            ...dataAttrs({ 'data-condition-rule': node.id }),\n          })}\n        >\n          <Select\n            items={fields.map((item) => ({\n              value: item.name,\n              label: item.label,\n              group: item.group,\n            }))}\n            _value={node.field}\n            onUpdate:_value={(name) => setField(node, name as string | null)}\n            searchable={fields.length > 8}\n            placeholder={lang.conditionField}\n            aria-label={lang.conditionField}\n            size={size}\n            disabled={disabled}\n            propsRoot={{ sx: conditionBuilderStyles.field }}\n            data-condition-part=\"field\"\n          />\n          <Select\n            items={ops.map((op) => ({ value: op, label: operatorLabel(lang, field!.type, op) }))}\n            _value={node.op}\n            onUpdate:_value={(op) => op && setOp(node, op as ConditionOp)}\n            aria-label={lang.conditionOperator}\n            size={size}\n            disabled={disabled || !field}\n            propsRoot={{ sx: conditionBuilderStyles.op }}\n          />\n          {field && node.op && valueShape(node.op) !== 'none' && (\n            <div {...css.attrs(conditionBuilderStyles.value)}>\n              {renderValue(node, field, node.op)}\n            </div>\n          )}\n          <IconButton\n            icon={X}\n            variant=\"ghost\"\n            size={size}\n            disabled={disabled}\n            aria-label={lang.conditionRemoveRule}\n            onClick={() => remove(parent, node)}\n          />\n        </div>\n      );\n    }\n\n    function renderGroup(node: GroupNode, depth: number, parent?: GroupNode): VNodeChild {\n      const nested = depth > 0;\n      const joiner =\n        node.mode === 'any' || node.mode === 'none' ? lang.conditionOr : lang.conditionAnd;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [conditionBuilderStyles.group, nested && conditionBuilderStyles.nested] },\n            propsGroup,\n            {\n              ...(nested ? { role: 'group', 'aria-label': lang.conditionGroup } : {}),\n              ...dataAttrs({ 'data-condition-group': node.id }),\n            },\n          )}\n        >\n          {(node.children.length > 0 || nested) && (\n            <div {...css.attrs(conditionBuilderStyles.header)}>\n              <Select\n                items={MODES.map((mode) => ({ value: mode, label: lang.conditionModes[mode] }))}\n                _value={node.mode}\n                onUpdate:_value={(mode) => {\n                  if (!mode) return;\n                  node.mode = mode as ConditionMode;\n                  commit();\n                }}\n                aria-label={lang.conditionMode}\n                size={size}\n                disabled={disabled}\n              />\n              {nested && parent && (\n                <IconButton\n                  icon={Trash2}\n                  variant=\"ghost\"\n                  size={size}\n                  disabled={disabled}\n                  aria-label={lang.conditionRemoveGroup}\n                  onClick={() => remove(parent, node)}\n                  sx={conditionBuilderStyles.removeGroup}\n                />\n              )}\n            </div>\n          )}\n          {node.children.length === 0 ? (\n            !nested && <Small sx={conditionBuilderStyles.empty}>{lang.conditionEmpty}</Small>\n          ) : (\n            <div {...css.attrs(conditionBuilderStyles.rows)}>\n              {node.children.map((child, index) => (\n                <div key={child.id} {...css.attrs(conditionBuilderStyles.row)}>\n                  <span {...css.attrs(conditionBuilderStyles.joiner)} aria-hidden=\"true\">\n                    {index > 0 ? joiner : ''}\n                  </span>\n                  {child.kind === 'rule'\n                    ? renderRule(node, child, index)\n                    : renderGroup(child, depth + 1, node)}\n                </div>\n              ))}\n            </div>\n          )}\n          <div\n            {...css.attrs(\n              conditionBuilderStyles.actions,\n              node.children.length === 0 && conditionBuilderStyles.actionsRoot,\n            )}\n            data-condition-part=\"actions\"\n          >\n            <Button\n              variant=\"ghost\"\n              size={size}\n              icon={Plus}\n              disabled={disabled}\n              onClick={() => addRule(node)}\n            >\n              {lang.conditionAddRule}\n            </Button>\n            {depth + 1 < maxDepth && (\n              <Button\n                variant=\"ghost\"\n                size={size}\n                icon={Plus}\n                disabled={disabled}\n                onClick={() => addGroup(node)}\n              >\n                {lang.conditionAddGroup}\n              </Button>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.root }, rest, {\n          role: 'group',\n          ref: (target: unknown) => (element = target as HTMLElement | null),\n        })}\n      >\n        {renderGroup(tree, 0)}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ConditionBuilder.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_untrack","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/ConditionBuilder.tsx"],"sourcesContent":["/**\n * 条件构造器：编辑 all / any / not 加比较的条件树（Condition，见 condition.ts）。每条是“字段 · 比较方式 · 值”，\n * 比较方式随字段类型、值的输入随字段类型与比较方式；组的表头选满足方式（全部、任一、都不、不全），组里还能再加组。\n *\n *   const fields: ConditionField[] = [\n *     { name: 'amount', label: '金额', type: 'number' },\n *     { name: 'category', label: '品类', type: 'select', options: [{ value: 'steel', label: '钢材' }, …] },\n *     { name: 'owner', label: '经办人', type: 'select', input: ({ value, onChange, label }) => <UserPicker … /> },\n *   ];\n *   let condition = _state<Condition | null>(null);\n *   <ConditionBuilder fields={fields} _value={condition} aria-label=\"审批条件\" />\n *\n * 写回的是只含填完整的比较的条件：没选字段、没填值的那几条留在界面上，不进 _value；一条也没有时是 null。\n * 根总是一个组（{ all }、{ any }，都不满足是 { not: { any } }，不全满足是 { not: { all } }）；\n * 传进来的单条比较、嵌套的 not 按同样的规则读成组。父级改了 _value（与上次写回的不同）时整棵重读。\n *\n * 读屏：根与每个嵌套的组是 role=\"group\"，每条比较也是一组（“条件 2”），三个控件各有名称（“字段”“比较方式”“金额的值”）。\n * 加了一条之后焦点落到它的字段上；删掉之后落到组的“添加条件”上。\n * 部件：Root（div）、Group（每个组）、Rule（每条比较）。\n */\nimport { Plus, Trash2, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, watch, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton } from '../base/IconButton';\nimport { Small } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { t } from '../config/theme/tokens';\nimport { DatePicker } from '../date/DatePicker';\nimport { DateRangePicker } from '../date/DateRangePicker';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport {\n  isRuleComplete,\n  operatorLabel,\n  toText,\n  operatorsOf,\n  valueShape,\n  type Condition,\n  type ConditionField,\n  type ConditionOp,\n  type ConditionRule,\n} from './condition';\nimport { NumberField } from './NumberField';\nimport { NumberRangeField } from './NumberRangeField';\nimport { Select } from './Select';\nimport { TagsInput } from './TagsInput';\nimport { TextField } from './TextField';\n\n/** 组的满足方式 */\nexport interface ConditionModes {\n  /** 全部满足：{ all } */\n  all: unknown;\n  /** 任一满足：{ any } */\n  any: unknown;\n  /** 都不满足：{ not: { any } } */\n  none: unknown;\n  /** 不全满足：{ not: { all } } */\n  notAll: unknown;\n}\n\n/** 组的满足方式 */\nexport type ConditionMode = keyof ConditionModes;\n\n/** 未声明的属性落到外层 div（role=\"group\"）上：aria-label 写条件管什么 */\nexport interface ConditionBuilderProps extends PartProps<'div', 'role'> {\n  /** 能参与比较的字段 */\n  fields: readonly ConditionField[];\n  /** 条件：父级写 _value={condition} 双向绑定；没有填完整的比较时是 null */\n  _value?: Condition | null;\n  /** 组最多嵌套几层，默认 2（根组里还能加一层组）；1 时不能加组 */\n  maxDepth?: number;\n  /** 控件与按钮的字号档位，不写时继承 */\n  size?: TextSize;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 每个组的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 每条比较的部件属性 */\n  propsRule?: PartProps<'div'>;\n}\n\ninterface RuleNode {\n  kind: 'rule';\n  id: number;\n  field: string | null;\n  op: ConditionOp | null;\n  value: unknown;\n}\n\ninterface GroupNode {\n  kind: 'group';\n  id: number;\n  mode: ConditionMode;\n  children: (RuleNode | GroupNode)[];\n}\n\nconst MODES: readonly ConditionMode[] = ['all', 'any', 'none', 'notAll'];\n\n/** ConditionBuilder 的样式：root、group、nested、header、rows、row、joiner、rule、field、op、value、range、actions、empty */\nexport const conditionBuilderStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  group: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  // 嵌套的组：浅底加描边，和外层的条件分开\n  nested: {\n    flexGrow: 1,\n    padding: '_sm',\n    backgroundColor: '_surfaceMuted',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n  },\n  header: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  rows: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  row: { display: 'flex', alignItems: 'flex-start', gap: '_sm', minWidth: 0 },\n  // 连接词（且、或）一列，宽度固定：各条的字段对齐\n  joiner: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    width: '2em',\n    // 与控件同高：连接词对着这一条的第一行\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  rule: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  field: { flexGrow: 1, flexShrink: 1, flexBasis: '9rem', minWidth: '7rem', maxWidth: '14rem' },\n  op: { flexGrow: 0, flexShrink: 1, flexBasis: '8rem', minWidth: '6rem' },\n  // grid：里面的输入框拉满这一格（多选的标签按这个宽度排）\n  value: { display: 'grid', flexGrow: 2, flexShrink: 1, flexBasis: '12rem', minWidth: '8rem' },\n  range: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  actions: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    paddingInlineStart: 'calc(2em + 0.5rem)',\n  },\n  actionsRoot: { paddingInlineStart: 0 },\n  removeGroup: { marginInlineStart: 'auto' },\n  empty: { color: '_textMuted' },\n});\n\nlet nextId = 0;\nconst rule = (\n  field: string | null = null,\n  op: ConditionOp | null = null,\n  value?: unknown,\n): RuleNode => ({\n  kind: 'rule',\n  id: ++nextId,\n  field,\n  op,\n  value,\n});\nconst group = (mode: ConditionMode, children: (RuleNode | GroupNode)[] = []): GroupNode => ({\n  kind: 'group',\n  id: ++nextId,\n  mode,\n  children,\n});\n\n/** 条件读成界面上的组：not 包着 any 是“都不满足”、包着 all 是“不全满足”，包着单条比较是只有它的“都不满足” */\nfunction toGroup(condition: Condition): GroupNode {\n  if ('all' in condition) return group('all', condition.all.map(toNode));\n  if ('any' in condition) return group('any', condition.any.map(toNode));\n  if ('not' in condition) {\n    const inner = condition.not;\n    if ('not' in inner) return toGroup(inner.not);\n    if ('any' in inner) return group('none', inner.any.map(toNode));\n    if ('all' in inner) return group('notAll', inner.all.map(toNode));\n    return group('none', [toNode(inner)]);\n  }\n  return group('all', [toNode(condition)]);\n}\n\nfunction toNode(condition: Condition): RuleNode | GroupNode {\n  return 'field' in condition\n    ? rule(condition.field, condition.op, condition.value)\n    : toGroup(condition);\n}\n\n/** 界面上的组写回条件：只留填完整的比较，空的组去掉 */\nfunction toCondition(node: GroupNode): Condition | null {\n  const list = node.children.flatMap((child): Condition[] => {\n    if (child.kind === 'group') {\n      const nested = toCondition(child);\n      return nested ? [nested] : [];\n    }\n    if (!child.field || !child.op) return [];\n    const item: ConditionRule =\n      valueShape(child.op) === 'none'\n        ? { field: child.field, op: child.op }\n        : { field: child.field, op: child.op, value: child.value };\n    return isRuleComplete(item) ? [item] : [];\n  });\n  if (list.length === 0) return null;\n  switch (node.mode) {\n    case 'all':\n      return { all: list };\n    case 'any':\n      return { any: list };\n    case 'none':\n      return { not: { any: list } };\n    case 'notAll':\n      return { not: { all: list } };\n  }\n}\n\n/** 换比较方式时把值换成新的形状：一个值 ↔ 一组值 ↔ 范围，尽量留住已经填的 */\nfunction reshape(value: unknown, op: ConditionOp): unknown {\n  const first = Array.isArray(value) ? value.find((item) => item != null && item !== '') : value;\n  switch (valueShape(op)) {\n    case 'none':\n      return undefined;\n    case 'list':\n      return Array.isArray(value)\n        ? value.filter((item) => item != null)\n        : first == null\n          ? []\n          : [first];\n    case 'range':\n      return Array.isArray(value) && value.length === 2 ? value : [first ?? null, null];\n    case 'single':\n      return first;\n  }\n}\n\n/** 选项的值写成文字（Select 的值是文字），选中后再换回原来的值 */\nconst optionKey = (value: unknown) => (value == null ? null : toText(value));\n\n/** 条件构造器 */\nexport const ConditionBuilder = _component(\n  ({\n    fields,\n    _value: value = _bindable<Condition | null>(null),\n    maxDepth = 2,\n    size,\n    disabled = false,\n    propsGroup,\n    propsRule,\n    ...rest\n  }: ConditionBuilderProps) => {\n    const lang = useLang();\n    let element: HTMLElement | null = null;\n    // 初始值只取一次，之后由下面的 watch 跟随父级\n    const initial = _untrack(value);\n    // 上次写回的值：父级改成别的才整棵重读，自己写回的不重读（没填完的那几条还要留在界面上）\n    let emitted = JSON.stringify(initial ?? null);\n    let tree = _state<GroupNode>(initial ? toGroup(initial) : group('all'));\n\n    watch(\n      () => value,\n      (next) => {\n        const key = JSON.stringify(next ?? null);\n        if (key === emitted) return;\n        emitted = key;\n        tree = next ? toGroup(next) : group('all');\n      },\n    );\n\n    function commit() {\n      const next = toCondition(tree);\n      emitted = JSON.stringify(next);\n      value = next;\n    }\n\n    const fieldOf = (name: string | null) => fields.find((field) => field.name === name);\n\n    /** 渲染之后把焦点移到某个元素上（加了一条之后到它的字段，删掉之后到“添加条件”） */\n    function focusLater(selector: string) {\n      void nextTick(() => element?.querySelector<HTMLElement>(selector)?.focus());\n    }\n\n    function addRule(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(added);\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function addGroup(parent: GroupNode) {\n      const added = rule();\n      parent.children.push(group('all', [added]));\n      focusLater(`[data-condition-rule=\"${added.id}\"] [data-condition-part=\"field\"]`);\n    }\n\n    function remove(parent: GroupNode, child: RuleNode | GroupNode) {\n      parent.children = parent.children.filter((item) => item !== child);\n      commit();\n      focusLater(`[data-condition-group=\"${parent.id}\"] > [data-condition-part=\"actions\"] button`);\n    }\n\n    function setField(node: RuleNode, name: string | null) {\n      const field = fieldOf(name);\n      node.field = name;\n      const ops = field ? operatorsOf(field) : [];\n      if (!node.op || !ops.includes(node.op)) node.op = ops[0] ?? null;\n      // 换了字段，原来的值多半不适用：清空，是否型默认“是”\n      node.value = node.op\n        ? reshape(field?.type === 'boolean' ? true : undefined, node.op)\n        : undefined;\n      commit();\n    }\n\n    function setOp(node: RuleNode, op: ConditionOp) {\n      node.op = op;\n      node.value = reshape(node.value, op);\n      commit();\n    }\n\n    function setValue(node: RuleNode, next: unknown) {\n      node.value = next;\n      commit();\n    }\n\n    /** 值的输入：随字段类型与比较方式 */\n    function renderValue(node: RuleNode, field: ConditionField, op: ConditionOp): VNodeChild {\n      const label = lang.conditionValue(field.label);\n      const shape = valueShape(op);\n      const onChange = (next: unknown) => setValue(node, next);\n      const common = { size, disabled, 'aria-label': label };\n      if (shape === 'none') return null;\n      if (field.input) return field.input({ field, op, value: node.value, onChange, label });\n\n      if (field.type === 'select' || field.type === 'boolean') {\n        const options =\n          field.type === 'boolean'\n            ? [\n                { value: true, label: lang.conditionTrue },\n                { value: false, label: lang.conditionFalse },\n              ]\n            : (field.options ?? []);\n        const items = options.map((option) => ({\n          value: String(option.value),\n          label: option.label,\n        }));\n        const back = (key: string | null) =>\n          options.find((option) => String(option.value) === key)?.value;\n        return shape === 'list' ? (\n          <Select\n            {...common}\n            items={items}\n            selectionMode=\"multiple\"\n            maxTagCount=\"responsive\"\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(keys) => onChange((keys as string[]).map(back))}\n          />\n        ) : (\n          <Select\n            {...common}\n            items={items}\n            _value={optionKey(node.value)}\n            onUpdate:_value={(key) => onChange(back(key as string | null))}\n          />\n        );\n      }\n\n      if (shape === 'list') {\n        return (\n          <TagsInput\n            {...common}\n            _value={((node.value as unknown[] | undefined) ?? []).map(String)}\n            onUpdate:_value={(list) =>\n              onChange(\n                field.type === 'number' ? list.map(Number).filter((n) => !Number.isNaN(n)) : list,\n              )\n            }\n          />\n        );\n      }\n\n      if (field.type === 'number') {\n        return shape === 'range' ? (\n          <NumberRangeField\n            {...common}\n            _value={(node.value as [number | null, number | null] | undefined) ?? [null, null]}\n            onUpdate:_value={(range) => onChange([...range])}\n          />\n        ) : (\n          <NumberField\n            {...common}\n            _value={(node.value as number | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      if (field.type === 'date') {\n        if (shape === 'range') {\n          const [start, end] = (node.value as [string | null, string | null] | undefined) ?? [\n            null,\n            null,\n          ];\n          return (\n            <DateRangePicker\n              {...common}\n              _value={start && end ? { start, end } : null}\n              onUpdate:_value={(range) => onChange(range ? [range.start, range.end] : [null, null])}\n            />\n          );\n        }\n        return (\n          <DatePicker\n            {...common}\n            _value={(node.value as string | null | undefined) ?? null}\n            onUpdate:_value={onChange}\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...common}\n          _value={(node.value as string | undefined) ?? ''}\n          onUpdate:_value={onChange}\n        />\n      );\n    }\n\n    function renderRule(parent: GroupNode, node: RuleNode, index: number): VNodeChild {\n      const field = fieldOf(node.field);\n      const ops = field ? operatorsOf(field) : [];\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.rule }, propsRule, {\n            role: 'group',\n            'aria-label': lang.conditionRule(index + 1),\n            ...dataAttrs({ 'data-condition-rule': node.id }),\n          })}\n        >\n          <Select\n            items={fields.map((item) => ({\n              value: item.name,\n              label: item.label,\n              group: item.group,\n            }))}\n            _value={node.field}\n            onUpdate:_value={(name) => setField(node, name as string | null)}\n            searchable={fields.length > 8}\n            placeholder={lang.conditionField}\n            aria-label={lang.conditionField}\n            size={size}\n            disabled={disabled}\n            propsRoot={{ sx: conditionBuilderStyles.field }}\n            data-condition-part=\"field\"\n          />\n          <Select\n            items={ops.map((op) => ({ value: op, label: operatorLabel(lang, field!.type, op) }))}\n            _value={node.op}\n            onUpdate:_value={(op) => op && setOp(node, op as ConditionOp)}\n            aria-label={lang.conditionOperator}\n            size={size}\n            disabled={disabled || !field}\n            propsRoot={{ sx: conditionBuilderStyles.op }}\n          />\n          {field && node.op && valueShape(node.op) !== 'none' && (\n            <div {...css.attrs(conditionBuilderStyles.value)}>\n              {renderValue(node, field, node.op)}\n            </div>\n          )}\n          <IconButton\n            icon={X}\n            variant=\"ghost\"\n            size={size}\n            disabled={disabled}\n            aria-label={lang.conditionRemoveRule}\n            onClick={() => remove(parent, node)}\n          />\n        </div>\n      );\n    }\n\n    function renderGroup(node: GroupNode, depth: number, parent?: GroupNode): VNodeChild {\n      const nested = depth > 0;\n      const joiner =\n        node.mode === 'any' || node.mode === 'none' ? lang.conditionOr : lang.conditionAnd;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [conditionBuilderStyles.group, nested && conditionBuilderStyles.nested] },\n            propsGroup,\n            {\n              ...(nested ? { role: 'group', 'aria-label': lang.conditionGroup } : {}),\n              ...dataAttrs({ 'data-condition-group': node.id }),\n            },\n          )}\n        >\n          {(node.children.length > 0 || nested) && (\n            <div {...css.attrs(conditionBuilderStyles.header)}>\n              <Select\n                items={MODES.map((mode) => ({ value: mode, label: lang.conditionModes[mode] }))}\n                _value={node.mode}\n                onUpdate:_value={(mode) => {\n                  if (!mode) return;\n                  node.mode = mode as ConditionMode;\n                  commit();\n                }}\n                aria-label={lang.conditionMode}\n                size={size}\n                disabled={disabled}\n              />\n              {nested && parent && (\n                <IconButton\n                  icon={Trash2}\n                  variant=\"ghost\"\n                  size={size}\n                  disabled={disabled}\n                  aria-label={lang.conditionRemoveGroup}\n                  onClick={() => remove(parent, node)}\n                  sx={conditionBuilderStyles.removeGroup}\n                />\n              )}\n            </div>\n          )}\n          {node.children.length === 0 ? (\n            !nested && <Small sx={conditionBuilderStyles.empty}>{lang.conditionEmpty}</Small>\n          ) : (\n            <div {...css.attrs(conditionBuilderStyles.rows)}>\n              {node.children.map((child, index) => (\n                <div key={child.id} {...css.attrs(conditionBuilderStyles.row)}>\n                  <span {...css.attrs(conditionBuilderStyles.joiner)} aria-hidden=\"true\">\n                    {index > 0 ? joiner : ''}\n                  </span>\n                  {child.kind === 'rule'\n                    ? renderRule(node, child, index)\n                    : renderGroup(child, depth + 1, node)}\n                </div>\n              ))}\n            </div>\n          )}\n          <div\n            {...css.attrs(\n              conditionBuilderStyles.actions,\n              node.children.length === 0 && conditionBuilderStyles.actionsRoot,\n            )}\n            data-condition-part=\"actions\"\n          >\n            <Button\n              variant=\"ghost\"\n              size={size}\n              icon={Plus}\n              disabled={disabled}\n              onClick={() => addRule(node)}\n            >\n              {lang.conditionAddRule}\n            </Button>\n            {depth + 1 < maxDepth && (\n              <Button\n                variant=\"ghost\"\n                size={size}\n                icon={Plus}\n                disabled={disabled}\n                onClick={() => addGroup(node)}\n              >\n                {lang.conditionAddGroup}\n              </Button>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: conditionBuilderStyles.root }, rest, {\n          role: 'group',\n          ref: (target: unknown) => (element = target as HTMLElement | null),\n        })}\n      >\n        {renderGroup(tree, 0)}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/input/FileDrop.js

@@ -5,8 +5,8 @@ import { focusRingStyles } from "../utils/style/styles.js";
 import { Icon } from "../base/Icon.js";
 import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
 import { useFieldControl } from "../form/Field.js";
-import { Fragment, createVNode, mergeProps, ref } from "vue";
-import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, createVNode, ref } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Upload } from "@lucide/icons";
 //#region src/input/FileDrop.tsx
@@ -147,7 +147,7 @@ var FileDrop = /*#__PURE__*/ _component((_props, _ctx) => {
 	};
 	return () => {
 		const field = control();
-		return createVNode("label", mergeProps(mergeAttrs({ sx: [
+		return createVNode("label", mergeJsxProps(mergeAttrs({ sx: [
 			fileDropStyles.root,
 			focusRingStyles.hasVisible,
 			dragging.value && fileDropStyles.dragging,

package/dist/input/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","UploadIcon"],"sources":["../../src/input/FileDrop.tsx"],"sourcesContent":["/**\n * 选择文件的区域（label > input[type=file]）：点击（或聚焦后按 Enter / 空格）打开文件对话框，也可以把文件拖进来。\n * 只负责选文件：选到的文件经 onFiles 交出去，不在 accept 里的经 onReject 交出去（拖放不受 accept 限制，这里补上）。\n * 列表、进度、重试见 Upload（建在它上面）。\n *\n *   <FileDrop accept=\"image/*\" multiple onFiles={(files) => add(files)} />\n *\n * 原生 input 只是视觉上隐藏，焦点、键盘、读屏都是浏览器的；区域的文字是它的名称。拖着文件经过时写 data-dragging。\n * 在 Field 里时关联标签、说明与错误。部件：Root（label）、Input（input）、Icon、Hint（提示文字）、Description（说明）。\n */\nimport { Upload as UploadIcon } 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 { VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useFieldControl } from '../form/Field';\nimport { t } from '../config/theme/tokens';\n\n/** 文件是否符合 accept（`image/*`、`.pdf`、`application/json` 这样的逗号分隔列表）；accept 为空时都符合 */\nexport function matchesAccept(file: File, accept: string | undefined): boolean {\n  const rules = (accept ?? '')\n    .split(',')\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean);\n  if (rules.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/** 文件、不可用、必填由组件管理；未声明的属性落到 input 上，外层 label 用 propsRoot */\nexport interface FileDropProps extends PartProps<\n  'input',\n  'type' | 'disabled' | 'required' | 'aria-invalid' | 'aria-describedby'\n> {\n  /** 接受的文件类型（同原生 accept） */\n  accept?: string;\n  /** 可以选多个 */\n  multiple?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 只读：不能选文件（同不可用，文件输入框没有原生的只读） */\n  readonly?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 选到了文件（已按 accept 过滤） */\n  onFiles?: (files: File[]) => void;\n  /** 拖进来的文件里不在 accept 里的 */\n  onReject?: (files: File[]) => void;\n  /** 提示文字下面的说明（大小、类型限制） */\n  description?: VNodeChild;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 提示文字的部件属性 */\n  propsHint?: PartProps<'span'>;\n  /** 提示文字下面的说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 区域里的内容；默认是图标、提示文字（取语言包）与 description */\n  children?: VNodeChild;\n}\n\n/** FileDrop 的样式：root、dragging、disabled、invalid、icon、hint、description */\nexport const fileDropStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: '8em',\n    padding: '_lg',\n    borderWidth: '_sm',\n    borderStyle: 'dashed',\n    borderColor: { default: '_borderStrong', ':hover': '_accent' },\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    textAlign: 'center',\n    cursor: 'pointer',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dragging: { borderColor: '_accent', backgroundColor: '_accentSoft' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  invalid: { borderColor: '_danger' },\n  icon: { width: '1.5em', height: '1.5em', color: '_textMuted' },\n  hint: { fontWeight: '_medium' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n});\n\n/** 选择文件的区域：点击打开文件对话框，或把文件拖进来 */\nexport const FileDrop = _component(\n  ({\n    accept,\n    multiple = false,\n    disabled,\n    required,\n    readonly,\n    invalid,\n    onFiles,\n    onReject,\n    description,\n    id,\n    propsRoot,\n    propsIcon,\n    propsHint,\n    propsDescription,\n    children,\n    ...rest\n  }: FileDropProps) => {\n    const lang = useLang();\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const locked = () => control().disabled || control().readonly;\n    let dragging = _state(false);\n    // dragenter / dragleave 在子元素之间也会触发：计数，回到 0 才算离开\n    let depth = 0;\n\n    function deliver(list: FileList | null | undefined) {\n      const files = [...(list ?? [])];\n      const accepted = files.filter((file) => matchesAccept(file, accept));\n      const rejected = files.filter((file) => !accepted.includes(file));\n      const taken = multiple ? accepted : accepted.slice(0, 1);\n      if (taken.length > 0) onFiles?.(taken);\n      if (rejected.length > 0) onReject?.(rejected);\n    }\n\n    function onChange(event: Event) {\n      const input = event.target as HTMLInputElement;\n      deliver(input.files);\n      // 清空：再选同一个文件也会触发 change\n      input.value = '';\n    }\n\n    const accepting = (event: DragEvent) =>\n      !locked() && (event.dataTransfer?.types.includes('Files') ?? false);\n\n    const dragHandlers = {\n      onDragenter: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth++;\n        dragging = true;\n      },\n      onDragover: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        // 不阻止默认行为就不会触发 drop\n        event.preventDefault();\n        event.dataTransfer!.dropEffect = 'copy';\n      },\n      onDragleave: () => {\n        depth = Math.max(0, depth - 1);\n        if (depth === 0) dragging = false;\n      },\n      onDrop: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth = 0;\n        dragging = false;\n        deliver(event.dataTransfer?.files);\n      },\n    };\n\n    return () => {\n      const field = control();\n      return (\n        <label\n          {...mergeAttrs<'label'>(\n            {\n              sx: [\n                fileDropStyles.root,\n                // 原生 input 视觉上隐藏，焦点环画在整个区域上\n                focusRingStyles.hasVisible,\n                dragging && fileDropStyles.dragging,\n                field.invalid && fileDropStyles.invalid,\n                (field.disabled || field.readonly) && fileDropStyles.disabled,\n              ],\n            },\n            propsRoot,\n            dragHandlers,\n          )}\n          data-dragging={dragging || undefined}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          <input\n            {...mergeAttrs<'input'>({ sx: visuallyHiddenStyles.hidden }, rest, {\n              type: 'file',\n              id: field.id,\n              accept,\n              multiple,\n              disabled: field.disabled || field.readonly,\n              required: field.required,\n              'aria-invalid': field.invalid || undefined,\n              'aria-describedby': field.describedBy,\n              onChange,\n            })}\n          />\n          {children ?? (\n            <>\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: UploadIcon, sx: fileDropStyles.icon },\n                  propsIcon,\n                )}\n              />\n              <span {...mergeAttrs<'span'>({ sx: fileDropStyles.hint }, propsHint)}>\n                {lang.fileDrop}\n              </span>\n              {hasContent(description) && (\n                <span {...mergeAttrs<'span'>({ sx: fileDropStyles.description }, propsDescription)}>\n                  {description}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"FileDrop.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","UploadIcon"],"sources":["../../src/input/FileDrop.tsx"],"sourcesContent":["/**\n * 选择文件的区域（label > input[type=file]）：点击（或聚焦后按 Enter / 空格）打开文件对话框，也可以把文件拖进来。\n * 只负责选文件：选到的文件经 onFiles 交出去，不在 accept 里的经 onReject 交出去（拖放不受 accept 限制，这里补上）。\n * 列表、进度、重试见 Upload（建在它上面）。\n *\n *   <FileDrop accept=\"image/*\" multiple onFiles={(files) => add(files)} />\n *\n * 原生 input 只是视觉上隐藏，焦点、键盘、读屏都是浏览器的；区域的文字是它的名称。拖着文件经过时写 data-dragging。\n * 在 Field 里时关联标签、说明与错误。部件：Root（label）、Input（input）、Icon、Hint（提示文字）、Description（说明）。\n */\nimport { Upload as UploadIcon } 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 { VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useFieldControl } from '../form/Field';\nimport { t } from '../config/theme/tokens';\n\n/** 文件是否符合 accept（`image/*`、`.pdf`、`application/json` 这样的逗号分隔列表）；accept 为空时都符合 */\nexport function matchesAccept(file: File, accept: string | undefined): boolean {\n  const rules = (accept ?? '')\n    .split(',')\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean);\n  if (rules.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/** 文件、不可用、必填由组件管理；未声明的属性落到 input 上，外层 label 用 propsRoot */\nexport interface FileDropProps extends PartProps<\n  'input',\n  'type' | 'disabled' | 'required' | 'aria-invalid' | 'aria-describedby'\n> {\n  /** 接受的文件类型（同原生 accept） */\n  accept?: string;\n  /** 可以选多个 */\n  multiple?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 只读：不能选文件（同不可用，文件输入框没有原生的只读） */\n  readonly?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 选到了文件（已按 accept 过滤） */\n  onFiles?: (files: File[]) => void;\n  /** 拖进来的文件里不在 accept 里的 */\n  onReject?: (files: File[]) => void;\n  /** 提示文字下面的说明（大小、类型限制） */\n  description?: VNodeChild;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 提示文字的部件属性 */\n  propsHint?: PartProps<'span'>;\n  /** 提示文字下面的说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 区域里的内容；默认是图标、提示文字（取语言包）与 description */\n  children?: VNodeChild;\n}\n\n/** FileDrop 的样式：root、dragging、disabled、invalid、icon、hint、description */\nexport const fileDropStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: '8em',\n    padding: '_lg',\n    borderWidth: '_sm',\n    borderStyle: 'dashed',\n    borderColor: { default: '_borderStrong', ':hover': '_accent' },\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    textAlign: 'center',\n    cursor: 'pointer',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dragging: { borderColor: '_accent', backgroundColor: '_accentSoft' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  invalid: { borderColor: '_danger' },\n  icon: { width: '1.5em', height: '1.5em', color: '_textMuted' },\n  hint: { fontWeight: '_medium' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n});\n\n/** 选择文件的区域：点击打开文件对话框，或把文件拖进来 */\nexport const FileDrop = _component(\n  ({\n    accept,\n    multiple = false,\n    disabled,\n    required,\n    readonly,\n    invalid,\n    onFiles,\n    onReject,\n    description,\n    id,\n    propsRoot,\n    propsIcon,\n    propsHint,\n    propsDescription,\n    children,\n    ...rest\n  }: FileDropProps) => {\n    const lang = useLang();\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const locked = () => control().disabled || control().readonly;\n    let dragging = _state(false);\n    // dragenter / dragleave 在子元素之间也会触发：计数，回到 0 才算离开\n    let depth = 0;\n\n    function deliver(list: FileList | null | undefined) {\n      const files = [...(list ?? [])];\n      const accepted = files.filter((file) => matchesAccept(file, accept));\n      const rejected = files.filter((file) => !accepted.includes(file));\n      const taken = multiple ? accepted : accepted.slice(0, 1);\n      if (taken.length > 0) onFiles?.(taken);\n      if (rejected.length > 0) onReject?.(rejected);\n    }\n\n    function onChange(event: Event) {\n      const input = event.target as HTMLInputElement;\n      deliver(input.files);\n      // 清空：再选同一个文件也会触发 change\n      input.value = '';\n    }\n\n    const accepting = (event: DragEvent) =>\n      !locked() && (event.dataTransfer?.types.includes('Files') ?? false);\n\n    const dragHandlers = {\n      onDragenter: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth++;\n        dragging = true;\n      },\n      onDragover: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        // 不阻止默认行为就不会触发 drop\n        event.preventDefault();\n        event.dataTransfer!.dropEffect = 'copy';\n      },\n      onDragleave: () => {\n        depth = Math.max(0, depth - 1);\n        if (depth === 0) dragging = false;\n      },\n      onDrop: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth = 0;\n        dragging = false;\n        deliver(event.dataTransfer?.files);\n      },\n    };\n\n    return () => {\n      const field = control();\n      return (\n        <label\n          {...mergeAttrs<'label'>(\n            {\n              sx: [\n                fileDropStyles.root,\n                // 原生 input 视觉上隐藏，焦点环画在整个区域上\n                focusRingStyles.hasVisible,\n                dragging && fileDropStyles.dragging,\n                field.invalid && fileDropStyles.invalid,\n                (field.disabled || field.readonly) && fileDropStyles.disabled,\n              ],\n            },\n            propsRoot,\n            dragHandlers,\n          )}\n          data-dragging={dragging || undefined}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          <input\n            {...mergeAttrs<'input'>({ sx: visuallyHiddenStyles.hidden }, rest, {\n              type: 'file',\n              id: field.id,\n              accept,\n              multiple,\n              disabled: field.disabled || field.readonly,\n              required: field.required,\n              'aria-invalid': field.invalid || undefined,\n              'aria-describedby': field.describedBy,\n              onChange,\n            })}\n          />\n          {children ?? (\n            <>\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: UploadIcon, sx: fileDropStyles.icon },\n                  propsIcon,\n                )}\n              />\n              <span {...mergeAttrs<'span'>({ sx: fileDropStyles.hint }, propsHint)}>\n                {lang.fileDrop}\n              </span>\n              {hasContent(description) && (\n                <span {...mergeAttrs<'span'>({ sx: fileDropStyles.description }, propsDescription)}>\n                  {description}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Listbox.js

@@ -1,5 +1,5 @@
 import { useLang } from "../config/context.js";
-import { defaultLabelledBy, elementProps, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { defaultLabelledBy, elementProps, mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { focusRingStyles } from "../utils/style/styles.js";
 import { Icon } from "../base/Icon.js";
 import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
@@ -15,8 +15,8 @@ import { handleListKeydown, toListboxOption, useListState } from "./list-state.j
 import { itemStyles } from "../utils/style/item-styles.js";
 import { defaultRangeExtractor } from "../utils/virtual/virtualizer.js";
 import { useVirtualizer } from "../utils/virtual/use-virtualizer.js";
-import { Fragment, computed, createVNode, isVNode, mergeProps, shallowRef, useId, watch, withMemo } from "vue";
-import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Fragment, computed, createVNode, isVNode, shallowRef, useId, watch, withMemo } 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 { Check } from "@lucide/icons";
 //#region src/input/Listbox.tsx
@@ -214,7 +214,7 @@ var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
 			active: list.value.active === option.value
 		};
 		const own = typeof propsOption.value === "function" ? propsOption.value(option.item, state) : propsOption.value;
-		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 			itemStyles.row,
 			state.active && itemStyles.highlighted,
 			state.selected && itemStyles.selected,
@@ -252,7 +252,7 @@ var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
 		if (rows.value.length === 0) {
 			if (loading.value) {
 				if (!indicator.value) return null;
-				return Array.from({ length: SKELETON_ROWS }, (_, index) => createVNode(Skeleton, mergeProps({ "key": index }, mergePartProps({
+				return Array.from({ length: SKELETON_ROWS }, (_, index) => createVNode(Skeleton, mergeJsxProps({ "key": index }, mergePartProps({
 					sx: [listboxStyles.skeleton, listboxPositionStyles.width(`${85 - index * 15}%`)],
 					delay: index * 120
 				}, propsSkeleton.value)), null));
@@ -263,12 +263,12 @@ var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
 				description: lang.selectEmpty
 			}, propsEmpty.value), null);
 		}
-		return createVNode("div", mergeProps({
+		return createVNode("div", mergeJsxProps({
 			"ref": sizer,
 			"role": "presentation"
 		}, css.attrs(listboxStyles.sizer, listboxPositionStyles.height(virtual.total))), [virtual.items.map((item) => {
 			const row = rows.value[item.index];
-			return createVNode("div", mergeProps({
+			return createVNode("div", mergeJsxProps({
 				"key": item.key,
 				"ref": virtual.measure,
 				"data-index": item.index,
@@ -285,7 +285,7 @@ var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
 	}
 	return () => {
 		const own = scroller.value === void 0;
-		const props = mergeProps$1({ sx: [
+		const props = mergeProps({ sx: [
 			listboxStyles.root,
 			own && listboxStyles.scroll,
 			focusRingStyles.visible
@@ -296,7 +296,7 @@ var ListboxView = /*#__PURE__*/ _component((_props, _ctx) => {
 			"aria-multiselectable": multiple.value || void 0,
 			"aria-busy": loading.value || void 0
 		});
-		const body = [indicator.value && rows.value.length > 0 && createVNode("div", mergeProps({ "aria-hidden": "true" }, css.attrs(listboxStyles.progress)), [createVNode(Progress, {
+		const body = [indicator.value && rows.value.length > 0 && createVNode("div", mergeJsxProps({ "aria-hidden": "true" }, css.attrs(listboxStyles.progress)), [createVNode(Progress, {
 			"size": "xs",
 			"aria-label": lang.loading
 		}, null)]), renderBody()];