AlertDialog 确认对话框

<script setup lang="ts">
  import { ref } from 'vue'
  import { AlertDialog, Button, Stack, Text } from '@hina-ui/vue'

  const published = ref(false)
</script>

<template>
  <Stack gap="sm" align="start">
    <AlertDialog
      title="发布这篇文章？"
      description="发布之后所有人都能看到它。"
      confirm-text="发布"
      cancel-text="再想想"
      @confirm="published = true"
    >
      <Button variant="outline" tone="neutral">发布</Button>
    </AlertDialog>
    <Text v-if="published" tone="muted" size="sm">文章已发布。</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { AlertDialog, Button } from '@hina-ui/vue'
</script>

<template>
  <AlertDialog
    title="注销账号？"
    description="账号与所有数据会在 30 天后永久删除，期间登录即可撤销。"
    tone="danger"
    confirm-text="注销"
  >
    <Button variant="outline" tone="danger">注销账号</Button>
  </AlertDialog>
</template>

<script setup lang="ts">
  import { AlertDialog, Button } from '@hina-ui/vue'
</script>

<template>
  <AlertDialog
    title="确认操作？"
    description="倒计时结束后，确认按钮可以点击。"
    tone="danger"
    confirm-text="确认"
    :confirm-delay="3"
  >
    <Button variant="outline" tone="neutral">确认倒计时</Button>
  </AlertDialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { AlertDialog, Button, Stack, Switch, Text } from '@hina-ui/vue'

  const fail = ref(false)
  const status = ref('')

  async function archive() {
    status.value = ''
    await new Promise(resolve => setTimeout(resolve, 1000))
    if (fail.value) {
      throw new Error('归档失败，请稍后再试。')
    }
    status.value = '已归档。'
  }
  function handleError(error: unknown) {
    status.value = error instanceof Error ? error.message : String(error)
  }
</script>

<template>
  <Stack gap="md" align="start">
    <Switch v-model="fail">模拟失败</Switch>
    <AlertDialog
      title="归档这个项目？"
      description="归档后项目变为只读，可以随时恢复。"
      confirm-text="归档"
      @confirm="archive"
      @error="handleError"
    >
      <Button variant="outline" tone="neutral">归档项目</Button>
      <template #content>
        <Text v-if="status" tone="muted" size="sm">{{ status }}</Text>
      </template>
    </AlertDialog>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { AlertDialog, Button, Inline } from '@hina-ui/vue'

  const open = ref(false)
</script>

<template>
  <Inline gap="sm">
    <Button variant="outline" tone="neutral" @click="open = true">从外部打开</Button>
    <AlertDialog v-model:open="open" title="离开当前页面？" description="未保存的修改会丢失。" />
  </Inline>
</template>

<script setup lang="ts">
  import { AlertDialog, Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="sm">
    <AlertDialog title="清空回收站？" description="回收站里的 12 个文件会被永久删除。" size="md">
      <Button variant="outline" tone="neutral">md 尺寸</Button>
    </AlertDialog>
    <AlertDialog
      title="清空回收站？"
      description="回收站里的 12 个文件会被永久删除。"
      placement="center"
    >
      <Button variant="outline" tone="neutral">始终居中</Button>
    </AlertDialog>
    <AlertDialog
      title="清空回收站？"
      description="回收站里的 12 个文件会被永久删除。"
      placement="bottom"
    >
      <Button variant="outline" tone="neutral">始终贴底</Button>
    </AlertDialog>
  </Inline>
</template>