Toast 轻提示

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

<template>
  <Inline align="center" class="gap-3">
    <Button variant="outline" tone="neutral" @click="toast.success('已加入书架')">success</Button>
    <Button variant="outline" tone="neutral" @click="toast.danger('网络连接中断')">danger</Button>
    <Button variant="outline" tone="neutral" @click="toast.warning('还有未保存的改动')">
      warning
    </Button>
    <Button variant="outline" tone="neutral" @click="toast.info('新版本已经可用')">info</Button>
    <Button variant="outline" tone="neutral" @click="toast.loading('正在同步')">loading</Button>
  </Inline>
</template>

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

<template>
  <Button
    variant="outline"
    tone="neutral"
    @click="
      toast.success('导入完成', { description: '共导入 128 本书，其中 3 本因格式不符被跳过。' })
    "
  >
    带说明的提示
  </Button>
</template>

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

<template>
  <Inline align="center" class="gap-3">
    <Button
      variant="outline"
      tone="neutral"
      @click="
        toast('已移入回收站', {
          action: { label: '撤销', onClick: () => toast.success('已还原') },
        })
      "
    >
      带操作
    </Button>
    <Button
      variant="outline"
      tone="neutral"
      @click="
        toast.warning('确定要清空吗', {
          duration: 0,
          action: { label: '清空', onClick: () => toast.success('已清空') },
          cancel: { label: '取消' },
        })
      "
    >
      两个按钮
    </Button>
  </Inline>
</template>

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

  function upload() {
    const task = new Promise<{ name: string }>(resolve =>
      setTimeout(() => resolve({ name: 'ATRI.epub' }), 2000),
    )
    toast.promise(task, {
      loading: '正在上传',
      success: book => `${book.name} 上传完成`,
      error: '上传失败，请重试',
    })
  }
</script>

<template>
  <Button variant="outline" tone="neutral" @click="upload">上传文件</Button>
</template>

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

  function sync() {
    toast.loading('正在同步', { id: 'sync' })
    setTimeout(() => toast.loading('已同步 12 / 30', { id: 'sync' }), 1000)
    setTimeout(() => toast.success('同步完成', { id: 'sync' }), 2000)
  }
</script>

<template>
  <Button variant="outline" tone="neutral" @click="sync">开始同步</Button>
</template>

<script setup lang="ts">
  import { defineComponent, h } from 'vue'
  import { BookOpen } from '@lucide/vue'
  import { Button, Heading, Inline, Stack, Text, toast } from '@hina-ui/vue'

  const ChapterToast = defineComponent({
    props: { title: { type: String, required: true }, chapter: { type: String, required: true } },
    setup(props) {
      return () =>
        h(
          Inline,
          { align: 'center', class: 'gap-3' },
          {
            default: () => [
              h(
                'div',
                { class: 'bg-inset grid size-10 shrink-0 place-items-center rounded-md' },
                h(BookOpen, { class: 'size-5' }),
              ),
              h(
                Stack,
                { gap: 'none', class: 'min-w-0 flex-1' },
                {
                  default: () => [
                    h(Heading, { level: 4, size: 'sm' }, () => props.title),
                    h(Text, { tone: 'muted', size: 'sm' }, () => props.chapter),
                  ],
                },
              ),
              h(
                Button,
                { size: 'sm', onClick: () => toast.dismiss('chapter') },
                { default: () => '去阅读' },
              ),
            ],
          },
        )
    },
  })

  function notify() {
    toast.custom(ChapterToast, {
      id: 'chapter',
      duration: 6000,
      props: { title: 'ATRI', chapter: '第 42 话' },
    })
  }
</script>

<template>
  <Button variant="outline" tone="neutral" @click="notify">新章节上线</Button>
</template>

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

<template>
  <Inline align="center" class="gap-3">
    <Button variant="outline" tone="neutral" @click="toast('一秒后消失', { duration: 1000 })">
      一秒
    </Button>
    <Button
      variant="outline"
      tone="neutral"
      @click="toast.info('需要手动关闭', { id: 'sticky', duration: 0 })"
    >
      不自动关闭
    </Button>
    <Button variant="soft" tone="neutral" @click="toast.dismiss('sticky')">关闭上一条</Button>
  </Inline>
</template>