# useImperativeAlertDialog

## 使用方法

不用自己管「开没开」这个状态，就能弹出一个警示对话框。调 `alert.show(options)` 打开，调 `alert.hide()` 关掉。把 `alert.Host` 在模板里渲染一次即可。

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

```vue
<script setup lang="ts">
import { useImperativeAlertDialog } from '@astryx-vue/core/AlertDialog'

const alert = useImperativeAlertDialog()
const AlertHost = alert.Host

function askToDelete(): void {
  alert.show({
    title: '删除这一项？',
    description: '删除之后无法恢复。',
    actionLabel: '删除',
    onAction: () => alert.hide(),
  })
}
</script>

<template>
  <button type="button" @click="askToDelete">
    删除
  </button>
  <AlertHost />
</template>
```

## 示例

常见配置、变体和状态。

### useImperativeAlertDialog — 删除确认

删除按钮先让用户确认，确认之后才真的删。

```vue
<script setup lang="ts">
import { useImperativeAlertDialog } from '@astryx-vue/core/AlertDialog'
import { Button } from '@astryx-vue/core/Button'

const alert = useImperativeAlertDialog()
const AlertHost = alert.Host

function confirmDelete(): void {
  alert.show({
    title: 'Delete item?',
    description: 'This action cannot be undone. The item and all its data will be permanently removed.',
    actionLabel: 'Delete',
    onAction: () => alert.hide(),
  })
}
</script>

<template>
  <div class="alert-dialog-preview">
    <Button label="Delete item" variant="destructive" @click="confirmDelete" />
    <AlertHost />
  </div>
</template>
```

## 返回值

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `show` | `(options: ImperativeAlertDialogOptions) => void` | 按给定配置弹出对话框。配置就是 `AlertDialog` 的属性去掉 `isOpen`，再加上 `onAction`。 |
| `hide` | `() => void` | 关掉对话框。 |
| `isOpen` | `Ref<boolean>` | 对话框当前是否打开。 |
| `Host` | `Component` | 承载对话框的组件。在模板里渲染一次：`<component :is="alert.Host" />`。 |

## 配置项

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | — | 要问的问题，通过 `aria-labelledby` 成为对话框的名字。必填。 |
| `description` | `string` | — | 确认之后会发生什么，通过 `aria-describedby` 和对话框关联，读屏会一起念出来。必填。 |
| `actionLabel` | `string` | — | 确认按钮的文字。写清楚会发生什么，例如 `'Delete project'`。必填。 |
| `onAction` | `(event: MouseEvent) => void` | — | 确认动作被触发时调用。对话框不会自己关：事情办完你自己调 `hide()`。 |
| `cancelLabel` | `string` | `'Cancel'` | 取消按钮的文字。 |
| `actionVariant` | `AlertDialogActionVariant` | `'destructive'` | 确认按钮的视觉样式。 |
| `isActionLoading` | `boolean` | `false` | 确认动作还在跑的时候，在按钮上显示转圈。 |
| `width` | `number \| string` | `400` | 期望宽度。数字按像素，字符串原样使用。 |