EmojiPicker

独立的表情面板：上面是搜索框，下面按分组列出全部表情，常用表情排在最前。可以内嵌，也可以放进弹出层。选中后发出 select。选择器自己不保留选中态。

这是 Meta Astryx 实验室 EmojiPicker 的 Vue 移植，不是把现有 ChatEmojiPicker 改个名。ChatEmojiPicker 仍然是聊天里那一组短而固定的回应表情弹出层；EmojiPicker 会加载内置的 CLDR 分组（或你传入的分组），支持常用表情、关键词搜索、预览栏，以及跨所有分组共用的一个 Tab 落脚点。后续的 CommentComposer 会复用这个面板。

这个组件属于 @astryx-vue/lab，只通过 canary 标签发布。

导入

import { DEFAULT_FREQUENT_EMOJIS, EmojiPicker } from '@astryx-vue/lab'

不传 categories 时，第一次挂载会加载内置集：Emoji 15 以内的全部表情，带英文 CLDR 名称，数据对齐 Meta Astryx v0.7.13（由 emojibase-data 17.0.0 生成）。要本地化或自定义时，传入自己的 categories 和 frequentEmojis。frequentEmojis 传空数组则不显示「常用」这一行。

属性

名称	类型	默认值	说明
frequentEmojis	readonly EmojiOption[]	DEFAULT_FREQUENT_EMOJIS	列在最前面、出现在「常用」下面的表情。空数组则不显示这一行。
categories	readonly EmojiCategory[]	内置集	按组分好的表情。不传则加载内置集。
height	number | string	'calc(var(--astryx-spacing-8, 32px) * 10)'	可滚动表情列表的高度。
hasAutoFocus	boolean	false	挂载时聚焦搜索框，适合内嵌或放在对话框里。放在弹出层里时应改用弹出层自己的自动聚焦。
label	string	文案键 @astryx.emojiPicker.label	表情列表的无障碍名称。没有悬停或聚焦的表情时，预览栏也用这句话。
searchLabel	string	文案键 @astryx.emojiPicker.searchLabel	搜索框的占位符和隐藏标签。

EmojiOption 是 { emoji: string; name: string; keywords?: readonly string[] }。EmojiCategory 是 { name: string; emojis: readonly EmojiOption[] }。

事件

名称	参数	说明
select	emoji: string, option: EmojiOption	选中的表情字符和对应的选项。

键盘与文案

每个分组是以标题命名的 WAI-ARIA 网格，每行 8 个格子。整张选择器只有一个 Tab 落脚点：从搜索框按 Tab 落到它，再按一次 Tab 离开选择器。方向键按布局移动，Home / End 走到行首行尾，Ctrl+Home / Ctrl+End 跳到第一个和最后一个表情，Enter 选中当前表情。搜索框里按 Down 进入第一个表情，第一行再按 Up 回到搜索框。搜索框里按 Enter 选中第一条匹配。输入法正在组字时，Enter 和方向键留给候选框。

过滤框、分组标题、加载中、加载失败和没有匹配的句子走 @astryx.emojiPicker.*。内置分组标题会翻译；内置表情的名称本身仍是英文 CLDR，其他语言请传入本地化的 categories。