Toast

<script setup lang="ts">
import { AToastAction, AToastClose, AToastDescription, AToastProvider, AToastRoot, AToastTitle, AToastViewport } from 'akar';
</script>

<template>
  <AToastProvider>
    <AToastRoot>
      <AToastTitle />
      <AToastDescription />
      <AToastAction />
      <AToastClose />
    </AToastRoot>

    <AToastViewport />
  </AToastProvider>
</template>

<template>
  <AToastProvider>
    ...
    <AToastViewport :hotkey="['altKey', 'KeyT']" />
  </AToastProvider>
</template>

<template>
  <AToastRoot :duration="3000">
    <AToastDescription>Saved!</AToastDescription>
  </AToastRoot>
</template>

<template>
  <div>
    <form @submit="count++">
      ...
      <button>save</button>
    </form>

    <AToastRoot
      v-for="(_, index) in count"
      :key="index"
    >
      <AToastDescription>Saved!</AToastDescription>
    </AToastRoot>
  </div>
</template>

<template>
  <AToastProvider swipe-direction="right">
    <AToastRoot class="AToastRoot">
      ...
    </AToastRoot>
    <AToastViewport />
  </AToastProvider>
</template>

/* styles.css */
.AToastRoot[data-swipe='move'] {
  transform: translateX(var(--akar-toast-swipe-move-x));
}
.AToastRoot[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.AToastRoot[data-swipe='end'] {
  animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
  from {
    transform: translateX(var(--akar-toast-swipe-end-x));
  }
  to {
    transform: translateX(100%);
  }
}

<template>
  <AToastRoot type="foreground">
    <AToastDescription>File removed successfully.</AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>

  <AToastRoot type="background">
    <AToastDescription>We've just released akar</AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>

<template>
  <AToastRoot type="background">
    <AToastTitle>Upgrade Available!</AToastTitle>
    <AToastDescription>We've just released akar</AToastDescription>
    <AToastAction alt-text="Goto account settings to upgrade">
      Upgrade
    </AToastAction>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>

  <AToastRoot
    type="foreground"
    :duration="10000"
  >
    <AToastDescription>File removed successfully.</AToastDescription>
    <AToastAction alt-text="Undo (Alt+U)">
      Undo <kbd>Alt</kbd>+<kbd>U</kbd>
    </AToastAction>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>

<template>
  <AToastRoot type="foreground">
    <AToastDescription>Saved!</AToastDescription>
    <AToastClose aria-label="Close">
      <span aria-hidden="true">×</span>
    </AToastClose>
  </AToastRoot>
</template>

<script setup lang="ts">
import AToast from './your-toast.vue';
</script>

<template>
  <AToast
    title="Upgrade available"
    content="We've just released Radix 3.0!"
  >
    <button @click="handleUpgrade">
      Upgrade
    </button>
  </AToast>
</template>

// your-toast.vue
<script setup lang="ts">
import { AToastAction, AToastClose, AToastDescription, AToastRoot, AToastTitle } from 'akar';

defineProps<{
  title: string;
  content: string;
}>();
</script>

<template>
  <AToastRoot>
    <AToastTitle v-if="title">
      {{ title }}
    </AToastTitle>
    <AToastDescription v-if="content">
      {{ content }}
    </AToastDescription>
    <AToastAction
      as-child
      alt-text="toast"
    >
      <slot />
    </AToastAction>
    <AToastClose aria-label="Close">
      <span aria-hidden="true">×</span>
    </AToastClose>
  </AToastRoot>
</template>

<script setup lang="ts">
import AToast from './your-toast.vue';

const savedRef = ref<InstanceType<typeof AToast>>();
</script>

<template>
  <div>
    <form @submit="savedRef.publish()">
      ...
    </form>
    <AToast ref="savedRef">
      Saved successfully!
    </AToast>
  </div>
</template>

// your-toast.vue
<script setup lang="ts">
import { AToastClose, AToastDescription, AToastRoot } from 'akar';
import { ref } from 'vue';

const count = ref(0);

function publish() {
  count.value++;
}

defineExpose({
  publish
});
</script>

<template>
  <AToastRoot
    v-for="index in count"
    :key="index"
  >
    <AToastDescription>
      <slot />
    </AToastDescription>
    <AToastClose>Dismiss</AToastClose>
  </AToastRoot>
</template>