@manohub/ui 0.7.0 → 0.8.0

package/dist/components/select/index.d.ts

@@ -1,33 +1,29 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import type { ControlSize } from '../control-size';
-import { type InputStatus } from '../input';
-export interface SelectOption {
-    label: string;
-    value: string | number;
-    disabled?: boolean;
-    /** 分组标题用的标记（内部判别用，消费方不必写） */
-    options?: never;
-}
-/** 分组选项（`{ label: '进行中', options: [...] }`，组内选项与平铺选项同构） */
-export interface SelectOptionGroup {
-    label: string;
-    options: SelectOption[];
-}
-export type SelectItem = SelectOption | SelectOptionGroup;
-export type SelectValue = string | number | Array<string | number>;
 /**
- * 选择器（**自绘**，不封装 farris）。
+ * Select —— 选择器（**自绘**，不封装 farris）；同目录另出 `SelectTree`（树选择）。
+ *
+ * 本文件是选择器族的**组装层与出口**：`Select` 与 `SelectTree` 都只是把下面这几个内件拼起来，
+ * 内件一律不对外导出（`src/index.ts` 只出 `Select` 与 `SelectTree`，成员不平级、也不挂点号）。
  *
- * ## 触发器复用的是输入框的「触发器形态」（不自绘框）
+ * ```
+ * components/select/
+ *   index.tsx            组装层与出口（Select / SelectTree）
+ *   select-shared.ts     叶子模块：类型、面板 id、popover 开合、触发器键盘契约
+ *   select-trigger.tsx   触发器内件（输入框的「触发器形态」）
+ *   select-panel.tsx     面板壳内件（原生 popover + 搜索行 + 内容槽）
+ *   select-list.tsx      选项列表体内件（平铺 / 分组 / 创建行 / 空态与加载行）
+ *   select-tree.tsx      树体内件（SelectTree 的实现）
+ *   select-tree-filter.ts 纯函数：树过滤与命中切分
+ * ```
  *
- * 触发器由 `<Input as="button">` 渲染 —— 框 / 内距 / 边 / 圆角 / 字号 / hover / 聚焦 / 禁用 /
- * 校验色（红·黄）/ **内建清除位** / **右侧图标位**全部来自输入面与它的表壳，本件只提供值 / 标签的排版。
- * 好处是「像输入框」这件事只剩一份规格（改输入框即自动跟随），且清除与右侧图标不必再自绘一套。
- * 三条落点各有其处：`class` → 表壳（显式锚 + 本件对壳的微调）、`controlClass` → 壳内控件（本件排版类）、
- * `controlAttrs` → 控件上的原生语义与键盘契约（`popovertarget` / `aria-*` / `keydown`）。
- * 触发器仍是原生 `<button>`（`popovertarget` 只认 button），故零 JS 开合与隐式锚路径不变；
- * 面板改挂 `mh-popup--anchored`：锚显式钉在**表壳**上 —— 否则隐式锚会缩成壳内控件，
- * 面板不再与整件同宽（`anchor-size(width)` 取的是锚的宽）。
+ * 拆件的收益是**规格只剩一份**：触发器（像输入框 / 清除位 / 箭头 / 键盘开面板）与面板壳
+ * （皮肤 / 定位档 / 显式锚 / 搜索行）在「列表形态」与「树形态」之间是同一份代码，改一处两处都跟着走。
+ * 面上仍是**一个** `styles/components/select.css`（一件的多种形态共用一份面与一个目录）。
+ *
+ * ## 触发器的框不在本件
+ *
+ * 触发器 = 输入框的「触发器形态」（`<Input as="button">`，见 `select-trigger.tsx`）：框 / 内距 /
+ * 边 / 圆角 / 底 / 字 / hover / 聚焦 / 禁用 / 校验色与**清除位**、**右侧图标位**全部归输入面与它的表壳。
+ * 本件只给选择器自己的排版（值 / 标签 / 面板内容）。
  *
  * ## 浮层边界（与「popup 只给零 JS 面」的取舍一致）
  *
@@ -39,7 +35,7 @@ export type SelectValue = string | number | Array<string | number>;
  * ## 状态三源等价
  *
  * 选中行 = `[data-state='selected']`（组件下发）/ 原生 `input:checked`（静态页零 JS 路径）/
- * `.is-selected`（规格冻结档），样式层只写一份声明。
+ * `.is-selected`（规格冻结档），样式层只写一份声明（见 `select-list.tsx`）。
  *
  * @example 单选
  * <Select options={opts} modelValue={v} placeholder="请选择" onChange={setV} />
@@ -50,6 +46,12 @@ export type SelectValue = string | number | Array<string | number>;
  * @example 分组 + 搜索 + 可创建
  * <Select searchable allowCreate multiple options={grouped} modelValue={list} onChange={setList} />
  */
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+import type { InputStatus } from '../input';
+import { type SelectItem, type SelectOption, type SelectValue } from './select-shared';
+export type { SelectItem, SelectOption, SelectOptionGroup, SelectValue } from './select-shared';
+export { SelectTree } from './select-tree';
 export declare const Select: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** 选项表（平铺项与分组项可混用） */
     options: {
@@ -241,12 +243,12 @@ export declare const Select: import("vue").DefineComponent<import("vue").Extract
     status: InputStatus;
     clearable: boolean;
     onSearch: (keyword: string) => void;
+    emptyText: string;
+    searchable: boolean;
     maxTagCount: number;
     maxTagPlaceholder: string;
-    searchable: boolean;
     filterOption: (option: SelectOption, keyword: string) => boolean;
     allowCreate: boolean;
-    emptyText: string;
 }, SlotsType<{
     empty?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/select/index.js

@@ -1,7 +1,8 @@
-import { defineComponent, ref, computed, createVNode, Fragment, mergeProps, createTextVNode } from "vue";
-import { Icon } from "@manohub/icon";
-import { Input } from "../input/index.js";
-const isGroup = (item) => Array.isArray(item.options);
+import { defineComponent, ref, computed, createVNode, Fragment } from "vue";
+import { SelectList } from "./select-list.js";
+import { SelectPanel } from "./select-panel.js";
+import { SelectTrigger } from "./select-trigger.js";
+import { createSelectPanelId, isGroup, createTriggerKeydown, showPanel, hidePanel } from "./select-shared.js";
 const Select = /* @__PURE__ */ defineComponent({
   name: "Select",
   inheritAttrs: false,
@@ -102,7 +103,7 @@ const Select = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
-    const panelId = `mh-select-${Math.random().toString(36).slice(2, 10)}`;
+    const panelId = createSelectPanelId();
     const panelRef = ref(null);
     const inner = ref(props.defaultValue);
     const keyword = ref("");
@@ -149,7 +150,7 @@ const Select = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", value);
       props.onChange?.(value);
     };
-    const hidePanel = () => panelRef.value?.hidePopover?.();
+    const hide = () => hidePanel(panelRef.value);
     const pick = (option) => {
       if (option.disabled) return;
       if (props.multiple) {
@@ -158,7 +159,7 @@ const Select = /* @__PURE__ */ defineComponent({
         return;
       }
       commit(option.value);
-      hidePanel();
+      hide();
     };
     const createFromKeyword = () => {
       const value = keyword.value.trim();
@@ -175,104 +176,67 @@ const Select = /* @__PURE__ */ defineComponent({
       const next = at < 0 ? step > 0 ? 0 : items.length - 1 : (at + step + items.length) % items.length;
       items[next].focus();
     };
-    const onTriggerKeydown = (event) => {
-      if (event.key === "Delete" && props.clearable) clear();
-      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault();
-        if (!props.disabled) {
-          panelRef.value?.showPopover?.();
-          requestAnimationFrame(() => moveFocus(event.key === "ArrowDown" ? 0 : -1));
-        }
-      }
-    };
+    const onTriggerKeydown = createTriggerKeydown({
+      clearable: props.clearable,
+      disabled: props.disabled,
+      clear,
+      openPanel: () => showPanel(panelRef.value),
+      focusFirst: (direction) => moveFocus(direction)
+    });
     const onPanelKeydown = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
         moveFocus(event.key === "ArrowDown" ? 1 : -1);
       }
     };
-    const renderOption = (option) => createVNode("button", {
-      "key": String(option.value),
-      "type": "button",
-      "class": ["mh-select__option", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
-      "data-state": selectedValues.value.includes(option.value) ? "selected" : "unselected",
-      "disabled": option.disabled,
-      "role": "option",
-      "aria-selected": selectedValues.value.includes(option.value) ? "true" : "false",
-      "onClick": () => pick(option)
-    }, [option.label]);
     return () => {
       const hasValue = selectedValues.value.length > 0;
       return createVNode("div", {
         "class": ["mh-popup-host", attrs.class].filter(Boolean).join(" "),
         "style": attrs.style
-      }, [createVNode(Input, {
-        "as": "button",
+      }, [createVNode(SelectTrigger, {
+        "panelId": panelId,
         "size": props.size,
         "status": props.status,
         "disabled": props.disabled,
         "clearable": props.clearable,
         "hasValue": hasValue,
-        "class": "mh-popup-anchor mh-select-host",
-        "controlClass": ["mh-select", props.multiple ? "mh-select--multiple" : "", props.size === "md" ? "" : `mh-select--${props.size}`].filter(Boolean).join(" "),
-        "controlAttrs": {
-          popovertarget: panelId,
-          "aria-haspopup": "listbox",
-          "aria-expanded": "false",
-          onKeydown: onTriggerKeydown
-        },
-        "onChange": clear
-      }, {
-        default: () => props.multiple ? createVNode(Fragment, null, [visibleTags.value.map((option) => createVNode("span", {
+        "multiple": props.multiple,
+        "placeholder": props.placeholder,
+        "label": selectedOptions.value[0]?.label,
+        "onKeydown": onTriggerKeydown,
+        "onClear": clear,
+        "renderValue": props.multiple ? () => createVNode(Fragment, null, [visibleTags.value.map((option) => createVNode("span", {
           "key": String(option.value),
           "class": "mh-select__chip"
         }, [option.label])), foldedCount.value > 0 ? createVNode("span", {
           "class": "mh-select__chip mh-select__chip--fold"
         }, [foldText.value]) : null, !hasValue ? createVNode("span", {
           "class": "mh-select__value mh-select__value--placeholder"
-        }, [props.placeholder]) : null]) : createVNode("span", {
-          "class": ["mh-select__value", hasValue ? "" : "mh-select__value--placeholder"].filter(Boolean).join(" ")
-        }, [selectedOptions.value[0]?.label ?? props.placeholder]),
-        /* 箭头沿用输入框的右侧图标位（本次不开放自定义入口） */
-        suffix: () => createVNode(Icon, {
-          "name": "chevron-down",
-          "class": "mh-select__caret mh-popup-caret"
-        }, null)
-      }), createVNode("div", mergeProps({
-        "ref": panelRef,
-        "id": panelId
-      }, {
-        popover: "auto"
-      }, {
-        "class": "mh-popup mh-select__panel mh-popup--anchored",
-        "data-side": "bottom",
-        "data-align": "start",
-        "role": "listbox",
+        }, [props.placeholder]) : null]) : void 0
+      }, null), createVNode(SelectPanel, {
+        "id": panelId,
+        "elementRef": panelRef,
+        "searchable": showSearch.value,
+        "keyword": keyword.value,
+        "onKeyword": (value) => {
+          keyword.value = value;
+          props.onSearch?.(value);
+        },
         "onKeydown": onPanelKeydown
-      }), [showSearch.value ? createVNode("div", {
-        "class": "mh-select__search"
-      }, [createVNode("input", {
-        "class": "mh-input",
-        "value": keyword.value,
-        "placeholder": "搜索",
-        "onInput": (event) => {
-          keyword.value = event.target.value;
-          props.onSearch?.(keyword.value);
-        }
-      }, null)]) : null, props.loading ? createVNode("span", {
-        "class": "mh-select__option mh-select__option--hint"
-      }, [createTextVNode("加载中…")]) : visibleOptions.value.length === 0 && !creatable.value ? slots.empty ? slots.empty() : createVNode("span", {
-        "class": "mh-select__option mh-select__option--empty"
-      }, [props.emptyText]) : createVNode(Fragment, null, [visibleOptions.value.map((item, index) => isGroup(item) ? createVNode("div", {
-        "key": `group-${index}`,
-        "class": "mh-select__group"
-      }, [createVNode("span", {
-        "class": "mh-select__group-label"
-      }, [item.label]), item.options.map((option) => renderOption(option))]) : renderOption(item)), creatable.value ? createVNode("button", {
-        "type": "button",
-        "class": "mh-select__option mh-select__add",
-        "onClick": createFromKeyword
-      }, [createTextVNode("创建「"), keyword.value.trim(), createTextVNode("」")]) : null])])]);
+      }, {
+        default: () => createVNode(SelectList, {
+          "options": visibleOptions.value,
+          "selectedValues": selectedValues.value,
+          "loading": props.loading,
+          "emptyText": props.emptyText,
+          "creatable": creatable.value,
+          "keyword": keyword.value,
+          "onPick": pick,
+          "onCreate": createFromKeyword,
+          "renderEmpty": slots.empty
+        }, null)
+      })]);
     };
   }
 });

package/dist/components/select/select-list.d.ts

@@ -0,0 +1,125 @@
+/**
+ * SelectList —— 选择器族的**选项列表体内件**（`Select` 用，不对外导出）。
+ *
+ * 它拥有「面板里那一撮选项」的全部形态与状态行：平铺选项 / 分组（组标题不可点）/ 「创建」行 /
+ * 空态行 / 加载行。**不含面板壳与搜索行**（那是 `SelectPanel` 的事），也不持有任何状态 ——
+ * 过滤结果、选中值、是否可创建统统由消费方算好喂进来，本件只渲染。
+ *
+ * 选项是真实 `<button role="option">`（不是 div + JS 高亮）：键盘可达、`:focus-visible` 可直接
+ * 承载「高亮行」这层语义，于是不需要再维护一份 JS 高亮下标 —— **焦点即高亮**，
+ * 状态只有 DOM 焦点一个来源。四条按钮重置（`border` / `background` / `font-family` /
+ * `text-align`）在面上自带（reset 层清了前三条、`text-align` 属列表行语义故面里显式写），
+ * 否则选项会长成原生按钮的灰底立体框 —— 见 `select.css` 的 `.mh-select__option` 一节。
+ *
+ * 选中态**三源等价**（面层只写一份声明）：组件下发 `[data-state='selected']` /
+ * 原生 `:has(input:checked)`（静态页零 JS 单选路径）/ `.is-selected`（规格冻结档）。
+ */
+import { type PropType, type VNodeChild } from 'vue';
+import { type SelectItem, type SelectOption } from './select-shared';
+export declare const SelectList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 已经过滤过的渲染树（分组内全空则由消费方整组去掉） */
+    options: {
+        type: PropType<SelectItem[]>;
+        default: () => never[];
+    };
+    /** 当前选中值（多选为数组；只用于判定选项行的选中态） */
+    selectedValues: {
+        type: PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 可创建：搜索词无命中时由消费方判定，本件只负责渲染那一行 */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 当前搜索词（「创建「xxx」」那一行的文案来源） */
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    onPick: {
+        type: PropType<(option: SelectOption) => void>;
+        default: undefined;
+    };
+    onCreate: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /**
+     * 空态自定义内容。
+     *
+     * 用**函数 prop** 而不是插槽：内件不对外，插槽还要多一层 `SlotsType` 签名与父层的对象写法，
+     * 而这一处只有「给或是不给」两种。返回 `undefined` 即走内建的空态行。
+     */
+    renderEmpty: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+}>, () => string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNodeArrayChildren, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 已经过滤过的渲染树（分组内全空则由消费方整组去掉） */
+    options: {
+        type: PropType<SelectItem[]>;
+        default: () => never[];
+    };
+    /** 当前选中值（多选为数组；只用于判定选项行的选中态） */
+    selectedValues: {
+        type: PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 可创建：搜索词无命中时由消费方判定，本件只负责渲染那一行 */
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 当前搜索词（「创建「xxx」」那一行的文案来源） */
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    onPick: {
+        type: PropType<(option: SelectOption) => void>;
+        default: undefined;
+    };
+    onCreate: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /**
+     * 空态自定义内容。
+     *
+     * 用**函数 prop** 而不是插槽：内件不对外，插槽还要多一层 `SlotsType` 签名与父层的对象写法，
+     * 而这一处只有「给或是不给」两种。返回 `undefined` 即走内建的空态行。
+     */
+    renderEmpty: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    loading: boolean;
+    options: SelectItem[];
+    selectedValues: (string | number)[];
+    emptyText: string;
+    creatable: boolean;
+    keyword: string;
+    onPick: (option: SelectOption) => void;
+    onCreate: () => void;
+    renderEmpty: () => VNodeChild;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/select/select-list.js

@@ -0,0 +1,95 @@
+import { defineComponent, createVNode, createTextVNode, Fragment } from "vue";
+import { isGroup } from "./select-shared.js";
+const SelectList = /* @__PURE__ */ defineComponent({
+  name: "SelectList",
+  inheritAttrs: false,
+  props: {
+    /** 已经过滤过的渲染树（分组内全空则由消费方整组去掉） */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /** 当前选中值（多选为数组；只用于判定选项行的选中态） */
+    selectedValues: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 可创建：搜索词无命中时由消费方判定，本件只负责渲染那一行 */
+    creatable: {
+      type: Boolean,
+      default: false
+    },
+    /** 当前搜索词（「创建「xxx」」那一行的文案来源） */
+    keyword: {
+      type: String,
+      default: ""
+    },
+    onPick: {
+      type: Function,
+      default: void 0
+    },
+    onCreate: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 空态自定义内容。
+     *
+     * 用**函数 prop** 而不是插槽：内件不对外，插槽还要多一层 `SlotsType` 签名与父层的对象写法，
+     * 而这一处只有「给或是不给」两种。返回 `undefined` 即走内建的空态行。
+     */
+    renderEmpty: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const renderOption = (option) => {
+      const selected = props.selectedValues.includes(option.value);
+      return createVNode("button", {
+        "key": String(option.value),
+        "type": "button",
+        "class": ["mh-select__option", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
+        "data-state": selected ? "selected" : "unselected",
+        "disabled": option.disabled,
+        "role": "option",
+        "aria-selected": selected ? "true" : "false",
+        "onClick": () => props.onPick?.(option)
+      }, [option.label]);
+    };
+    return () => {
+      if (props.loading) {
+        return createVNode("span", {
+          "class": "mh-select__option mh-select__option--hint"
+        }, [createTextVNode("加载中…")]);
+      }
+      if (props.options.length === 0 && !props.creatable) {
+        const custom = props.renderEmpty?.();
+        return custom !== void 0 && custom !== null ? custom : createVNode("span", {
+          "class": "mh-select__option mh-select__option--empty"
+        }, [props.emptyText]);
+      }
+      return createVNode(Fragment, null, [props.options.map((item, index) => isGroup(item) ? createVNode("div", {
+        "key": `group-${index}`,
+        "class": "mh-select__group"
+      }, [createVNode("span", {
+        "class": "mh-select__group-label"
+      }, [item.label]), item.options.map((option) => renderOption(option))]) : renderOption(item)), props.creatable ? createVNode("button", {
+        "type": "button",
+        "class": "mh-select__option mh-select__add",
+        "onClick": () => props.onCreate?.()
+      }, [createTextVNode("创建「"), props.keyword.trim(), createTextVNode("」")]) : null]);
+    };
+  }
+});
+export {
+  SelectList
+};

package/dist/components/select/select-panel.d.ts

@@ -0,0 +1,106 @@
+/**
+ * SelectPanel —— 选择器族的**面板壳内件**（`Select` 与 `SelectTree` 共用，不对外导出）。
+ *
+ * 它只拥有三样东西：**原生 popover 元素**（开合 / Esc / 点外部关闭 / 顶层渲染 / 定位全归浏览器）、
+ * **搜索行**（面板顶部那一个输入框）、以及**内容槽**（列表体或树体）。
+ * 「面板里装什么」不在本件 —— 这正是让列表与树共用同一份面板皮肤的原因。
+ *
+ * 组合类名与服务端三条属性都是**操作层的组合**，不是本件新造的浮层：
+ * `class="mh-popup mh-select__panel mh-popup--anchored"`（状态根 + 本族皮肤 + 显式锚档）、
+ * `data-side` / `data-align`（`popup.css` 的定位档）、`popover="auto"`（原生轻 dismiss）。
+ * 面板宽度跟触发器走：`select.css` 的 `.mh-select__panel` 用 `anchor-size(width)` 取锚点宽，
+ * 锚是挂在**表壳**上的 `.mh-popup-anchor`（触发器进壳后隐式锚会缩成壳内控件，故走显式锚档）。
+ *
+ * `elementRef` 是**由消费方持有的 ref**（不是本件自己的）：开面板（触发器 ↑↓）、收起面板（选中后）、
+ * 以及列表形态的 `.mh-select__option` 焦点遍历都要在父层拿到这个 DOM 元素。
+ */
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ElementRef } from './select-shared';
+export declare const SelectPanel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 面板 id（必须与触发器的 `popovertarget` 成对） */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** 面板元素的 ref，由消费方持有（父层要用它开合与遍历选项） */
+    elementRef: {
+        type: PropType<ElementRef>;
+        default: undefined;
+    };
+    /** 是否渲染搜索行（列表形态：`searchable` 或选项多于 8 条；树形态同口径） */
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 搜索词变化（消费方负责写回 keyword，并自行决定要不要上抛 `onSearch`） */
+    onKeyword: {
+        type: PropType<(keyword: string) => void>;
+        default: undefined;
+    };
+    /**
+     * 面板上的键盘契约。
+     *
+     * 列表形态给 `↑↓` 移动高亮行（选项是真实 `<button>`，焦点即高亮）；树形态不给 ——
+     * 树的行是 `div`、没有 tabindex，焦点无处可落（与 `Tree` 自身不做键盘导航同口径）。
+     */
+    onKeydown: {
+        type: PropType<(event: KeyboardEvent) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 面板 id（必须与触发器的 `popovertarget` 成对） */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** 面板元素的 ref，由消费方持有（父层要用它开合与遍历选项） */
+    elementRef: {
+        type: PropType<ElementRef>;
+        default: undefined;
+    };
+    /** 是否渲染搜索行（列表形态：`searchable` 或选项多于 8 条；树形态同口径） */
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 搜索词变化（消费方负责写回 keyword，并自行决定要不要上抛 `onSearch`） */
+    onKeyword: {
+        type: PropType<(keyword: string) => void>;
+        default: undefined;
+    };
+    /**
+     * 面板上的键盘契约。
+     *
+     * 列表形态给 `↑↓` 移动高亮行（选项是真实 `<button>`，焦点即高亮）；树形态不给 ——
+     * 树的行是 `div`、没有 tabindex，焦点无处可落（与 `Tree` 自身不做键盘导航同口径）。
+     */
+    onKeydown: {
+        type: PropType<(event: KeyboardEvent) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onKeydown: (event: KeyboardEvent) => void;
+    keyword: string;
+    elementRef: ElementRef;
+    searchable: boolean;
+    searchPlaceholder: string;
+    onKeyword: (keyword: string) => void;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;