Select 下拉选择

FluereSelect 是不可编辑的下拉选择器：触发面只显示当前项文本（或占位符），点击展开面板、点选或键盘选一项。视觉还原 WinUI 3（Windows App SDK）的 ComboBox 非编辑形态，交互底座复用 reka-ui 的 Select。

与 Combobox 的差异

两者长得像，但职责不同——选错会把「可输入 + 可搜索」的能力白送出去：

基础用法

v-model 绑定选中值；未选中时显示 placeholder。选项用 items 传（value / text / disabled）。

<FluereSelect v-model="value" :items="items" header="刷新频率" placeholder="请选择" />

受控与清空

modelValue 是唯一事实源；把它设为 null 即可回到占位符。每次选中都会抛 change。

<FluereSelect v-model="value" :items="items" @change="(args) => (last = args.value)" />
<FluereButton size="small" @click="value = null">清空选择</FluereButton>

状态与空列表

header / description 与触发面按 id 关联；禁用项键盘会跳过；整组 disabled 时不展开；items 为空时用 #empty 给空态文案。

<FluereSelect v-model="v" :items="items" header="同步速度" description="含一个不可选项。" />
<FluereSelect v-model="v2" :items="items" disabled header="整组禁用" />
<FluereSelect :items="[]" header="空列表">
  <template #empty>没有可选项</template>
</FluereSelect>

规格来源

实现要点

• 触发面：ComboBoxBackground* ← ControlFillColor* → --colorNeutralBackground1 / …Hover / …Pressed / …Disabled；四边 ControlElevationBorderBrush → --colorNeutralStrokeAlpha、底边 ControlStrokeColorDefault → --colorNeutralStroke1（与本库 FluereCombobox 非编辑形态同一套口径，避免同页两种下拉视觉漂移）。
• 下拉项：ComboBoxItemBackground* ← SubtleFillColor* → --colorSubtleBackground / …Hover / …Pressed / …Selected；选中项左侧 3px 指示条用 --colorCompoundBrandBackground。
• 下拉面：圆角 --borderRadiusXLarge（OverlayCornerRadius）、描边 --colorNeutralStroke1、--shadow16（elevation 16）、底色 --colorNeutralBackground1。
• 层级与焦点：下拉走 0.4.1 的 useFlyout（--zIndexNavFlyout + 嵌套提升），触发面走 0.4.3 的 useFocusVisual（双层焦点矩形）。
• 面板样式必须写在非 scoped 块：reka 的 SelectContent 把 class 落在 Teleport 到 body 的元素上，拿不到本组件的 data-v-*——scoped 选择器会静默失效（jsdom 不解析 var()，单测发现不了）。
• 已知缺口：高对比度未实现；不实现 WinUI 的 IsTextSearchEnabled 前缀匹配（底座按字符跳转不算搜索）；size 档位与 WinUI 的 Compact 样式未做。

API

FluereSelect