# 命令面板输入框

## 使用方法

把它放进 `CommandPalette` 里，就是那个带结果弹层的搜索框；不在弹层里时，它也能单独当一个搜索框用。

```ts
import { CommandPaletteInput } from '@astryx-vue/core/CommandPalette'
```

### 结构

- **输入区**: 把搜索符号、查询框和尾部内容装在一起的行内布局。
- **搜索符号**: 查询框前面那个装饰用的搜索图标。
- **查询框**: 原生文本框。单独用、没有弹层关系时是 searchbox；给了弹层关系，或者身处 CommandPalette 里时是 combobox。
- **加载转圈**: 搜索进行中时，出现在尾部内容前面的转圈，会先等一小会儿再出现。
- **尾部内容**: 使用方放在尾部的内容，例如清空按钮或快捷键提示。

## 最佳实践

| 指引 | 实践 |
| --- | --- |
| 推荐 | 「Search commands」说不清能搜什么时，自己写一句简短的 `label` 补上。占位文字永远不能代替这个字段的名字。 |
| 推荐 | 尾部只放短小的辅助控件或快捷键提示，用 `endContent`。 |
| 避免 | 自己改 combobox 的角色或弹层状态。接了 `CommandPalette` 之后，这些语义归 `CommandPaletteInput` 管。 |

## 示例

常见的用法和不同的状态。

### 带尾部内容

自定义占位文字，并用 endContent 在尾部放一枚快捷键徽章。

```vue
<script setup lang="ts">
import { createStaticSource } from '@astryx-vue/core'
import { CommandPalette, CommandPaletteInput } from '@astryx-vue/core/CommandPalette'
import { Kbd } from '@astryx-vue/core/Kbd'

const source = createStaticSource([
  { id: 'home', label: 'Home' },
  { id: 'settings', label: 'Settings' },
  { id: 'profile', label: 'Profile' },
  { id: 'help', label: 'Help' },
])
</script>

<template>
  <CommandPalette is-inline is-open :search-source="source">
    <template #input>
      <CommandPaletteInput placeholder="Search commands, files, or actions...">
        <template #endContent>
          <Kbd keys="mod+k" />
        </template>
      </CommandPaletteInput>
    </template>
  </CommandPalette>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `placeholder` | `string` | `Search…` | 框里的灰色占位文字。 |
| `label` | `string` | 按语言显示「搜索命令」 | 这个框给读屏用的名字。默认是按当前语言显示的「搜索命令」，不再用占位文字；搜的不是命令时自己传一个。 |
| `hasAutoFocus` | `boolean` | `true` | 挂载时是否自动聚焦。面板是画在页面里的时候会自动跳过，免得打开文档示例就抢走焦点。 |
| `value` | `string` | — | 搜索文字，用 `v-model:value` 绑定。不传时，读写的是外层 `CommandPalette` 的搜索文字。 |

## 事件

- `update:value(value: string)`：下一个搜索文字。只有当 `value` 被绑定的时候才会触发。
- `valueChange(value: string)`：同一个值，用原来的回调名字再发一次，方便从 React 搬过来的代码。

## 插槽

- `end`：输入框后面的内容，例如清空按钮或 `Kbd` 快捷键提示。转圈会出现在它前面。
- `endContent`：同一个插槽的原始名字。两个都写时用 `end`。