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

package/dist/input/ColorField.js

@@ -0,0 +1,143 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useFieldControl } from "../form/Field.js";
+import { controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { parseColor, toHex } from "../utils/data/color.js";
+import { swatchStyles } from "../utils/style/swatch-styles.js";
+import { createVNode, mergeProps, ref, shallowRef, vModelText, watch, withDirectives } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/ColorField.tsx
+/** 值、状态与无障碍关联由组件管理 */
+/** 未声明的属性落到文字输入框（input）上 */
+/** ColorField 的样式：swatch、fill、picker、input */
+var colorFieldStyles = css.create({
+	swatch: {
+		position: "relative",
+		flexShrink: 0,
+		width: "1.25em",
+		height: "1.25em",
+		borderRadius: "_sm",
+		overflow: "hidden",
+		cursor: "pointer"
+	},
+	fill: {
+		position: "absolute",
+		inset: 0
+	},
+	picker: {
+		position: "absolute",
+		inset: 0,
+		width: "_full",
+		height: "_full",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		opacity: 0,
+		cursor: "inherit"
+	},
+	input: {
+		fontFamily: "_mono",
+		fontVariantLigatures: "none"
+	}
+});
+/** ColorField 的动态样式：色块里的颜色 */
+var colorFieldDynamicStyles = css.create({ fill: (color) => ({ backgroundColor: color }) });
+/** 颜色输入（色块 + 文字输入）：值是 #hex */
+var ColorField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => "#000000", _ctx.emit);
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsSwatch = readonlyProp(_props, "propsSwatch");
+	const propsPicker = readonlyProp(_props, "propsPicker");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let input = shallowRef(null);
+	let draft = ref(untrack(() => value.value));
+	watch(() => value.value, (next) => draft.value = next);
+	const parsed = () => parseColor(draft.value) !== void 0;
+	function commit() {
+		const hex = toHex(draft.value);
+		if (hex) value.value = hex;
+		draft.value = value.value;
+	}
+	return () => {
+		const state = control();
+		const editable = !state.disabled && !state.readonly;
+		const showInvalid = state.invalid || !parsed();
+		const s = controlParts(appearance(), {
+			...state,
+			invalid: showInvalid
+		});
+		const opaque = toHex(value.value)?.slice(0, 7) ?? "#000000";
+		return createVNode("div", mergeProps(mergeAttrs(s.root, propsRoot.value, { onPointerdown: focusOnShell(() => input.value) }), {
+			"data-invalid": showInvalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [createVNode("label", mergeAttrs({ sx: [swatchStyles.checkerboard, colorFieldStyles.swatch] }, propsSwatch.value), [createVNode("span", css.attrs(colorFieldStyles.fill, swatchStyles.ring, css.bind(colorFieldDynamicStyles.fill, () => [value.value], true)), null), createVNode("input", mergeAttrs({ sx: [colorFieldStyles.picker, focusRingStyles.visible] }, propsPicker.value, {
+			type: "color",
+			value: opaque,
+			disabled: !editable,
+			"aria-label": lang.colorPick,
+			onInput: (event) => value.value = event.target.value
+		}), null)]), withDirectives(createVNode("input", mergeProps(mergeAttrs({
+			...s.input,
+			sx: [s.input.sx, colorFieldStyles.input]
+		}, rest, {
+			ref: input,
+			id: state.id,
+			type: "text",
+			spellcheck: false,
+			autocomplete: "off",
+			disabled: state.disabled,
+			readonly: state.readonly,
+			required: state.required,
+			"aria-invalid": showInvalid || void 0,
+			"aria-describedby": state.describedBy,
+			onBlur: commit,
+			onKeydown: (event) => {
+				if (event.key === "Enter") commit();
+			}
+		}), { "onUpdate:modelValue": ($event) => draft.value = $event }), null), [[vModelText, draft.value]])]);
+	};
+}, {
+	name: "ColorField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsRoot",
+		"propsSwatch",
+		"propsPicker"
+	]
+});
+//#endregion
+export { ColorField, colorFieldDynamicStyles, colorFieldStyles };
+
+//# sourceMappingURL=ColorField.js.map

package/dist/input/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vtp_untrack","_createVNode","_mergeProps","_withDirectives","_vModelText"],"sources":["../../src/input/ColorField.tsx"],"sourcesContent":["/**\n * 颜色输入：前面是色块（点开浏览器原生的取色器），后面可以直接输入颜色值。主题编辑器、品牌色设置这类地方用。\n *\n *   <ColorField _value={brand} aria-label=\"品牌色\" />\n *\n * - 值是 #rrggbb（有透明度时 #rrggbbaa）：输入 rgb()、颜色名也行，失焦或回车时规范成 #hex 写回；\n *   写不成颜色时外壳标为无效（aria-invalid），值不变，失焦后恢复成原来的值。\n * - 原生取色器不带透明度：用它选色时透明度去掉。\n * - 接入 Field（标签、说明、错误、必填、不可用），外观同 TextField（control.tsx）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { parseColor, toHex } from '../utils/data/color';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { controlParts, focusOnShell, useControlAppearance, type ControlOptions } from './control';\n\n/** 值、状态与无障碍关联由组件管理 */\nexport type ColorFieldManaged =\n  | 'value'\n  | 'type'\n  | 'disabled'\n  | 'readonly'\n  | 'required'\n  | 'size'\n  | 'aria-invalid'\n  | 'aria-describedby';\n\n/** 未声明的属性落到文字输入框（input）上 */\nexport interface ColorFieldProps extends PartProps<'input', ColorFieldManaged>, ControlOptions {\n  /** 颜色值（#rrggbb 或 #rrggbbaa）：父级写 _value={x} 双向绑定 */\n  _value?: string;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能看到颜色、复制取值，不能修改 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 外壳（边框、焦点环）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 色块（包着原生取色器的 label）的部件属性 */\n  propsSwatch?: PartProps<'label'>;\n  /** 原生取色器（透明地盖在色块上）的部件属性；类型、取值、可用性与无障碍名称由组件管理 */\n  propsPicker?: PartProps<'input', 'type' | 'value' | 'disabled' | 'aria-label' | 'onInput'>;\n}\n\n/** ColorField 的样式：swatch、fill、picker、input */\nexport const colorFieldStyles = css.create({\n  // 色块：棋盘格垫底（swatchStyles），颜色铺在上面一层\n  swatch: {\n    position: 'relative',\n    flexShrink: 0,\n    width: '1.25em',\n    height: '1.25em',\n    borderRadius: '_sm',\n    overflow: 'hidden',\n    cursor: 'pointer',\n  },\n  fill: { position: 'absolute', inset: 0 },\n  // 原生取色器盖满色块、完全透明：点色块就是点它，键盘也能聚焦它\n  picker: {\n    position: 'absolute',\n    inset: 0,\n    width: '_full',\n    height: '_full',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    opacity: 0,\n    cursor: 'inherit',\n  },\n  // 等宽字体：#hex 各位对齐，改一位时不跳动\n  input: { fontFamily: '_mono', fontVariantLigatures: 'none' },\n});\n\n// 颜色是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ColorField 的动态样式：色块里的颜色 */\nexport const colorFieldDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 颜色输入（色块 + 文字输入）：值是 #hex */\nexport const ColorField = _component(\n  ({\n    _value: value = _bindable('#000000'),\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsSwatch,\n    propsPicker,\n    ...rest\n  }: ColorFieldProps) => {\n    const lang = useLang();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let input = _state.raw<HTMLInputElement | null>(null);\n    // 正在输入的文字：写成颜色之前不写回 value\n    let draft = _state(_untrack(value));\n    watch(\n      () => value,\n      (next) => (draft = next),\n    );\n    const parsed = () => parseColor(draft) !== undefined;\n\n    function commit() {\n      const hex = toHex(draft);\n      if (hex) value = hex;\n      draft = value;\n    }\n\n    return () => {\n      const state = control();\n      const editable = !state.disabled && !state.readonly;\n      const showInvalid = state.invalid || !parsed();\n      const s = controlParts(appearance(), { ...state, invalid: showInvalid });\n      // 原生取色器只认 #rrggbb\n      const opaque = toHex(value)?.slice(0, 7) ?? '#000000';\n      return (\n        <div\n          {...mergeAttrs<'div'>(s.root, propsRoot, { onPointerdown: focusOnShell(() => input) })}\n          data-invalid={showInvalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          <label\n            {...mergeAttrs<'label'>(\n              { sx: [swatchStyles.checkerboard, colorFieldStyles.swatch] },\n              propsSwatch,\n            )}\n          >\n            <span\n              {...css.attrs(\n                colorFieldStyles.fill,\n                swatchStyles.ring,\n                colorFieldDynamicStyles.fill(value),\n              )}\n            />\n            <input\n              {...mergeAttrs<'input'>(\n                { sx: [colorFieldStyles.picker, focusRingStyles.visible] },\n                propsPicker,\n                {\n                  type: 'color',\n                  value: opaque,\n                  disabled: !editable,\n                  'aria-label': lang.colorPick,\n                  onInput: (event: Event) => (value = (event.target as HTMLInputElement).value),\n                },\n              )}\n            />\n          </label>\n          <input\n            {...mergeAttrs<'input'>(\n              { ...s.input, sx: [s.input.sx, colorFieldStyles.input] },\n              rest,\n              {\n                ref: _toRef(input),\n                id: state.id,\n                type: 'text',\n                spellcheck: false,\n                autocomplete: 'off',\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': showInvalid || undefined,\n                'aria-describedby': state.describedBy,\n                onBlur: commit,\n                onKeydown: (event: KeyboardEvent) => {\n                  if (event.key === 'Enter') commit();\n                },\n              },\n            )}\n            _value={draft}\n          />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Combobox.d.ts

@@ -0,0 +1,75 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import { type IconButtonProps } from '../base/IconButton';
+import { type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type ControlIconOptions, type ControlOptions } from './control';
+import { type ListboxViewProps, type OptionRenderState } from './Listbox';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type OptionsLoader } from './remote-items';
+/** 角色、展开状态、值与可用性由组件管理 */
+export type ComboboxManaged = 'value' | 'role' | 'size' | 'disabled' | 'readonly' | 'required' | 'autocomplete' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'aria-invalid' | 'aria-describedby';
+/** Combobox 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */
+export interface ComboboxBaseProps<T> extends PartProps<'input', ComboboxManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {
+    /** 数据：ListboxOption、字符串，或任意数据加 toOption；有 load 时是第一次加载之前的选项（编辑页放上已选的那一项） */
+    items?: readonly T[];
+    /** 选中项的值：父级写 _value={x}；没有选中时是 null */
+    _value?: string | null;
+    /** 输入框里的文字：父级可以写 _inputValue={x}（异步搜索时据此取数据） */
+    _inputValue?: string;
+    /** 是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 过滤：默认按显示文字包含输入（忽略大小写与重音）；函数自定义；false 不过滤（异步搜索） */
+    filter?: false | ((item: T, query: string) => boolean);
+    /** 远程选项：打开时与输入停下 300 ms 后按输入调用，结果代替 items；只采用最后一次，被顶掉的请求 signal 中止 */
+    load?: OptionsLoader<T>;
+    /** 允许输入不在选项里的文字：失焦时保留，value 为 null */
+    allowCustomValue?: boolean;
+    /**
+     * 显示右侧的展开按钮；只当带建议的输入框用时（Autocomplete）关掉，列表随输入出现
+     * @default true
+     */
+    showToggle?: boolean;
+    /** 没有可选的项时不弹出列表（不显示“没有匹配的选项”）：只当带建议的输入框用时（Autocomplete） */
+    hideEmpty?: boolean;
+    /** 正在取选项（异步搜索）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */
+    loading?: boolean;
+    /** 弹出位置，默认 bottom-start */
+    placement?: FloatingPlacement;
+    /** 有内容时显示清空按钮 */
+    clearable?: boolean;
+    /** 表单提交时的 name（用隐藏的 input 提交 value） */
+    name?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 自定义选项内容：`{(item, { selected, active }) => …}`，拿到 items 里的原始数据 */
+    children?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 没有匹配的选项时列表里显示的内容 */
+    empty?: VNodeChild;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Partial<PresetIconButtonProps>;
+    /** 切换按钮（下拉箭头）的部件属性 */
+    propsChevron?: Partial<IconButtonProps>;
+    /** 弹出层的部件属性 */
+    propsPopover?: PartProps<'div', 'id' | 'popover'>;
+    /** 列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+}
+/** 组合框的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+export type ComboboxProps<T = ListboxOption> = ComboboxBaseProps<T> & OptionMapping<T>;
+/** Combobox 的样式：chevronOpen */
+export declare const comboboxStyles: Readonly<{
+    chevronOpen: css.CompiledStyles;
+}>;
+/** 组合框：输入框 + 过滤后的选项列表 */
+export declare const Combobox: <T>(props: ComboboxProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/input/Combobox.js

@@ -0,0 +1,321 @@
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { IconButton } from "../base/IconButton.js";
+import { useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { isComposingKey } from "../utils/dom/hotkeys.js";
+import { handleListKeydown, toListboxOption, useListState, useResultAnnouncement, useSelectedOptions } from "./list-state.js";
+import { controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { activeOptionId } from "./Listbox.js";
+import { FormValue } from "../form/FormValue.js";
+import { ListPopover } from "./ListPopover.js";
+import { useRemoteItems } from "./remote-items.js";
+import { Fragment, createVNode, mergeProps, ref, shallowRef, useId, vModelText, watch, withDirectives } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown } from "@lucide/icons";
+//#region src/input/Combobox.tsx
+/**
+* 组合框（WAI-ARIA Combobox，aria-autocomplete="list"）：边输入边从列表里选，或者只当带建议的输入框用。
+*
+*   <Field label="城市"><Combobox items={cities} _value={city} /></Field>
+*   <Combobox items={results} filter={false} loading={searching} _inputValue={keyword} aria-label="搜索用户" />
+*
+* 组合已有的部件：外壳同 TextField（controlParts），弹出层用 useAnchoredPopover（与外壳同宽），列表是 ListboxView。
+* 焦点一直在输入框里，高亮项经 aria-activedescendant 告诉读屏。
+*
+* - 过滤：默认本地按显示文字包含输入（Intl.Collator，忽略大小写与重音）；filter={false} 时不过滤，
+*   由调用方按 inputValue 换 items（异步搜索，配合 loading）。给 load 时组件自己请求：打开时与输入停下 300 ms 后
+*   按输入请求，只采用最后一次（remote-items.ts，同 Select）。
+* - 中文输入法：输入经 v-model 写回，组合输入期间 inputValue 不变，所以不会拿拼音去过滤。
+* - 选中后输入框显示选项文字；失焦时如果文字不是某个选项（且没开 allowCustomValue），恢复成已选项的文字，清空则取消选择。
+* - 键盘：↓ 打开、↑↓ / Page Up / Down 移动，Enter 选中，Esc 关闭（关闭时再按 Esc 清空）；Home / End 照常移动光标。
+*
+* 部件：Root（外壳）、Input（主元素）、Clear、Chevron（切换按钮）、Popover、Listbox。
+*/
+/** 角色、展开状态、值与可用性由组件管理 */
+/** Combobox 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */
+/** 组合框的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+/** Combobox 的样式：chevronOpen */
+var comboboxStyles = css.create({ chevronOpen: { rotate: "180deg" } });
+/** 组合框：输入框 + 过滤后的选项列表 */
+var Combobox = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items", () => []);
+	const toOption = readonlyProp(_props, "toOption");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const inputValue = bindable(_props, "_inputValue", () => "", _ctx.emit);
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const filter = readonlyProp(_props, "filter");
+	const load = readonlyProp(_props, "load");
+	const allowCustomValue = readonlyProp(_props, "allowCustomValue", false);
+	const showToggle = readonlyProp(_props, "showToggle", true);
+	const hideEmpty = readonlyProp(_props, "hideEmpty", false);
+	const loading = readonlyProp(_props, "loading", false);
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const name = readonlyProp(_props, "name");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const children = childrenProp(_props);
+	const empty = readonlyProp(_props, "empty");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const icon = readonlyProp(_props, "icon");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsChevron = readonlyProp(_props, "propsChevron");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsListbox = readonlyProp(_props, "propsListbox");
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const listId = useId();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let query = ref("");
+	let writing = false;
+	let shell = shallowRef(null);
+	let input = shallowRef(null);
+	let panel = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const optionOf = (item) => toListboxOption(item, toOption.value);
+	function matches(item, text) {
+		if (!text) return true;
+		return filter.value ? filter.value(item, text) : textMatcher()(optionOf(item).label, text);
+	}
+	const remote = useRemoteItems({
+		load: () => load.value,
+		query: () => query.value,
+		open: () => open.value,
+		items: () => items.value
+	});
+	const list = useListState({
+		items: () => load.value || filter.value === false ? remote.items() : remote.items().filter((item) => matches(item, query.value)),
+		toOption: optionOf,
+		selected: () => value.value != null ? [value.value] : [],
+		mode: () => "single",
+		required: () => true,
+		onChange: (next) => value.value = next[0] ?? null
+	});
+	const selectedOf = useSelectedOptions({
+		items: remote.items,
+		toOption: optionOf
+	});
+	const selectedLabel = () => value.value == null ? "" : selectedOf([value.value])[0].label;
+	function setText(text) {
+		if (inputValue.value === text) return;
+		writing = true;
+		inputValue.value = text;
+	}
+	useResultAnnouncement(() => ({
+		query: query.value,
+		count: list.options.length
+	}));
+	watch(() => inputValue.value, (text) => {
+		if (writing) {
+			writing = false;
+			return;
+		}
+		query.value = text;
+		if (!control().readonly && document.activeElement === input.value) setOpen(true, "trigger");
+		list.move("first");
+	});
+	watch(() => [value.value, selectedLabel()], () => {
+		if (query.value) return;
+		if (!allowCustomValue.value || value.value != null) setText(selectedLabel());
+	}, { immediate: true });
+	function pick(choice, event) {
+		value.value = choice;
+		setText(selectedLabel());
+		query.value = "";
+		setOpen(false, "select", event);
+	}
+	function show(event) {
+		query.value = "";
+		list.activateDefault();
+		setOpen(true, "trigger", event);
+	}
+	function commit(event) {
+		setOpen(false, "focus", event);
+		if (allowCustomValue.value) {
+			if (inputValue.value !== selectedLabel()) value.value = null;
+			return;
+		}
+		if (!inputValue.value) value.value = null;
+		else setText(selectedLabel());
+		query.value = "";
+	}
+	function onKeydown(event) {
+		const state = control();
+		if (state.disabled || state.readonly || isComposingKey(event)) return;
+		if (event.key === "Escape") {
+			if (!open.value && inputValue.value) {
+				event.preventDefault();
+				setText("");
+				value.value = null;
+			}
+			return;
+		}
+		if (!open.value) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				show(event);
+			}
+			return;
+		}
+		if (handleListKeydown(list, event, { homeEnd: false }, (choice) => pick(choice, event))) event.preventDefault();
+	}
+	const shown = () => open.value && (!hideEmpty.value || list.options.length > 0 || loading.value || remote.loading());
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: shown(),
+		anchor: shell.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			matchWidth: true,
+			fitHeight: true
+		},
+		restoreFocus: false
+	}), { close: (reason, event) => setOpen(false, reason, event) });
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const editable = !state.disabled && !state.readonly;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs(s.root, propsRoot.value, {
+			ref: shell,
+			onPointerdown: focusOnShell(() => input.value)
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			withDirectives(createVNode("input", mergeProps(mergeAttrs(s.input, rest, {
+				ref: input,
+				id: state.id,
+				role: "combobox",
+				autocomplete: "off",
+				disabled: state.disabled,
+				readonly: state.readonly,
+				required: state.required,
+				"aria-autocomplete": "list",
+				"aria-expanded": shown(),
+				"aria-controls": listId,
+				"aria-activedescendant": open.value ? activeOptionId(list, listId) : void 0,
+				"aria-invalid": state.invalid || void 0,
+				"aria-describedby": state.describedBy,
+				onKeydown,
+				onBlur: commit
+			}), { "onUpdate:modelValue": ($event) => inputValue.value = $event }), null), [[vModelText, inputValue.value]]),
+			clearable.value && inputValue.value && editable && controlClear(s, propsClear.value, () => {
+				setText("");
+				value.value = null;
+				input.value?.focus();
+			}),
+			showToggle.value && createVNode(IconButton, mergePartProps({
+				...s.button,
+				sx: [
+					s.button.sx,
+					disclosureStyles.icon,
+					open.value && comboboxStyles.chevronOpen
+				],
+				radius: "full",
+				icon: ChevronDown,
+				"aria-label": lang.comboboxToggle
+			}, propsChevron.value, {
+				tabindex: -1,
+				disabled: !editable,
+				"aria-expanded": shown(),
+				"aria-controls": listId,
+				onPointerdown: (event) => event.preventDefault(),
+				onClick: (event) => {
+					if (open.value) setOpen(false, "trigger", event);
+					else show(event);
+					input.value?.focus();
+				}
+			}), null),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": value.value,
+				"disabled": state.disabled
+			}, null)
+		]), createVNode(ListPopover, {
+			"panelRef": panel,
+			"onToggle": onToggle,
+			"size": appearance().size,
+			"labelledBy": state.labelledBy,
+			"label": rest["aria-label"],
+			"loading": loading.value || remote.loading(),
+			"onPick": _cache[0] || (_cache[0] = (choice) => pick(choice)),
+			"listbox": {
+				list,
+				id: listId,
+				renderOption: children.value,
+				empty: remote.error() ? lang.listLoadFailed : empty.value
+			},
+			"propsListbox": propsListbox.value,
+			"propsPopover": propsPopover.value
+		}, null)]);
+	};
+}, {
+	name: "Combobox",
+	props: [
+		"items",
+		"toOption",
+		"_value",
+		"onUpdate:_value",
+		"_inputValue",
+		"onUpdate:_inputValue",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"filter",
+		"load",
+		"allowCustomValue",
+		"showToggle",
+		"hideEmpty",
+		"loading",
+		"placement",
+		"clearable",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"empty",
+		"propsRoot",
+		"icon",
+		"propsIcon",
+		"propsClear",
+		"propsChevron",
+		"propsPopover",
+		"propsListbox"
+	]
+});
+//#endregion
+export { Combobox, comboboxStyles };
+
+//# sourceMappingURL=Combobox.js.map

package/dist/input/Combobox.js.map

@@ -0,0 +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.error() ? lang.listLoadFailed : empty,\n            }}\n            propsListbox={propsListbox}\n            propsPopover={propsPopover}\n          />\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}