# useInputStatusIcon

## 使用方法

决定带边框的输入框里那颗状态图标画什么，让同一状态下这一类输入框长得一样。`attached` 只画一个图形，文案留给下面的状态栏；`detached` 这里什么都不画，因为状态栏自己带了图标；`tooltip` 画一个真按钮，键盘、鼠标、触摸、读屏都能摸到它的说明。给带边框的输入框用它，不要拿它做字段级的提示文案。

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

`statusIcon` 是组件、`statusIconProps` 是它的属性，所以在输入框容器里写成 `<component :is="statusIcon" v-bind="statusIconProps" />`。

这个移植版里，无障碍那一半由 `Field` 管：它已经把状态文案渲染成视觉隐藏文本、接进输入框的 `aria-describedby`；信息按钮自己也引用着自己的 tooltip。所以这里不再返回 id。

## 建议

| 指引 | 做法 |
| --- | --- |
| 推荐 | 在输入框容器里渲染 `statusIcon`，属性接 `statusIconProps`。 |
| 推荐 | 该不该画交给它判断，`isInGroup` 和 `statusVariant` 原样传进去，不要在调用处自己分支。 |
| 不要 | 只靠图标传达状态；只有 `tooltip` 这一种带文案，其它还得配状态文案。 |

## 参数

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `status` | `FieldStatusInput \| undefined`，或它的 ref / 取值函数 | — | 输入框的状态（类型加文案），没有状态就不传。 |
| `statusVariant` | `'attached' \| 'detached' \| 'tooltip'`，或它的 ref / 取值函数 | `'attached'` | 状态相对输入框怎么摆。`tooltip` 但没有文案时退回普通图形。 |
| `isInGroup` | `boolean`，或它的 ref / 取值函数 | `false` | 输入框是否在 `InputGroup` 里，组自己会画状态。 |

## 返回值

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `statusIcon` | `ComputedRef` | 要渲染在输入框容器里的东西：普通图形是 `FieldIcon`，带 tooltip 的信息按钮是 `FieldInfoTip`。不该画图标时是 `null`。 |
| `statusIconProps` | `ComputedRef<Record<string, unknown>>` | 上面那个组件的属性：`type`，信息按钮那一支还有 `text`。 |