Toast

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();

const types = ["success", "error", "warning", "info"];
</script>

<template>
  <Button v-for="type in types" :key="type" variant="outline"
    @click="toaster.create({ type, title: type, description: 'Notification details.' })">
    {{ type }}
  </Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();
</script>

<template>
  <Button @click="toaster.create({ title: 'Settings saved' })">Title only</Button>
  <Button @click="toaster.create({ description: 'Your changes are available to the team.' })">Description only</Button>
  <Button @click="toaster.create({ title: 'Automatic notice', closable: false })">Without close button</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";
import { ref } from "vue";

const toaster = createToaster();

const removed = ref(false);
function removeItem() {
  removed.value = true;
  toaster.create({
    title: "Item removed",
    description: "You can undo this change.",
    duration: Infinity,
    action: { label: "Undo", onClick: () => { removed.value = false; } },
  });
}
</script>

<template>
  <Button @click="removeItem">Remove item</Button>
  <span>{{ removed ? 'Item removed' : 'Item available' }}</span>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();

let task;
function startUpload() {
  task = Promise.withResolvers();
  toaster.promise(task.promise, {
    loading: { title: "Uploading geometry" },
    success: (file) => ({ title: "Upload complete", description: file + " is ready." }),
    error: { title: "Upload failed", description: "No files were changed. Try again." },
  });
}
</script>

<template>
  <Button @click="startUpload">Start upload</Button>
  <Button @click="task?.resolve('geometry.step')">Finish upload</Button>
  <Button @click="task?.reject(new Error('Connection lost'))">Fail upload</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();

let id;
function startExport() {
  id = toaster.create({ title: "Preparing export", type: "loading" });
}
function completeExport() {
  if (id) toaster.update(id, { title: "Export ready", type: "success", duration: 5000 });
}
</script>

<template>
  <Button @click="startExport">Start export</Button>
  <Button @click="completeExport">Complete export</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster({ duration: Infinity });

let number = 0;
function addNotifications(count = 1) {
  for (let index = 0; index < count; index++) {
    toaster.create({ title: "Notification " + ++number });
  }
}
</script>

<template>
  <Button @click="addNotifications()">Add notification</Button>
  <Button @click="addNotifications(6)">Add six notifications</Button>
  <Button @click="toaster.remove()">Clear all</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();
</script>

<template>
  <Button @click="toaster.create({ title: 'Link copied', duration: 2000 })">Two seconds</Button>
  <Button @click="toaster.create({ title: 'Review required', duration: Infinity })">Persistent</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster({ placement: "top-end", offsets: "1rem" });
</script>

<template>
  <Button @click="toaster.info({ title: 'Position preview' })">Show notification</Button>
  <Toaster :toaster="toaster" />
</template>

<script setup>
import { DirectionProvider } from "@dicehub/kappa/components/direction-provider";
import { Button } from "@dicehub/kappa/components/button";
import { Toaster, createToaster } from "@dicehub/kappa/components/toast";
const toaster = createToaster({ placement: "bottom-end" });
</script>

<template>
  <DirectionProvider locale="ar">
    <Button @click="toaster.success({ title: 'تم الحفظ', description: 'تم تحديث إعدادات المشروع.' })">Show notification</Button>
    <Toaster :toaster="toaster" />
  </DirectionProvider>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Toast, Toaster, createToaster } from "@dicehub/kappa/components/toast";

const toaster = createToaster();
function shareProject() {
  toaster.create({
    title: "Project shared",
    description: "The team can now access this project.",
    action: { label: "View project", onClick: () => console.log("Open project") },
  });
}
</script>

<template>
  <Button @click="shareProject">Share project</Button>
  <Toaster v-slot="toast" :toaster="toaster">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger as-child>
        <Button size="xs" variant="outline">{{ toast.action.label }}</Button>
      </Toast.ActionTrigger>
      <Toast.CloseTrigger />
    </Toast.Root>
  </Toaster>
</template>