Toast

<script setup lang="ts">
const { toast } = useToast()
</script>

<template>
  <!-- Optional -->
  <NToaster />

  <div class="grid h-28 place-items-center">
    <NButton
      label="Show toast"
      btn="solid-white"
      @click="toast(
        {
          title: 'Example Toast',
          duration: 5 * 1000,
          showProgress: true,
          description: 'This toast automatically closes.',
        },
      )"
    />
  </div>
</template>

<script setup lang="ts">
const { toast } = useToast()

const actions = [
  {
    label: 'Retry',
    btn: 'solid-primary',
    altText: 'Error',
    onClick: () => {
      alert('Retry clicked')
    },
  },
  {
    label: 'Dismiss',
    btn: 'solid-white',
    altText: 'Error',
    onClick: () => {
      alert('Dismiss clicked')
    },
  },
]
</script>

<template>
  <div class="grid h-28 place-items-center">
    <NButton
      label="Show toast"
      btn="solid-white"
      @click="toast(
        {
          title: 'Uh oh! Something went wrong.',
          description: 'There was a problem with your request.',
          actions,
        },
      )"
    />
  </div>
</template>

<script setup lang="ts">
const { toast } = useToast()
</script>

<template>
  <div class="grid h-28 place-items-center">
    <NButton
      label="Show toast"
      btn="solid-white"
      @click="toast(
        {
          title: 'Success Toast',
          leading: 'i-check',
          description: 'This toast is a success message.',
        },
      )"
    />
  </div>
</template>

<script setup lang="ts">
const { toast } = useToast()

const actions = ref([
  {
    label: 'Try again',
    click: () => alert('Try again'),
    altText: 'Try again',
  },
])
</script>

<template>
  <div class="h-28 flex flex-wrap items-center justify-around gap-4">
    <NButton
      label="Base toast"
      btn="solid-white"
      @click="toast(
        {
          title: 'Uh oh! Something went wrong.',
          description: 'There was a problem with your request.',
          toast: 'solid-white',
          progress: 'white',
          showProgress: true,
          actions,
          closable: true,
        },
      )"
    />
    <NButton
      label="soft-success toast"
      btn="soft-success"
      @click="toast(
        {
          title: 'Success! Your request was processed.',
          description: 'Your request has been successfully processed.',
          toast: 'soft-success',
          progress: 'success',
          showProgress: true,
          closable: true,
        },
      )"
    />
    <NButton
      label="soft-warning toast"
      btn="soft-warning"
      @click="toast(
        {
          title: 'Uh oh! Something went wrong.',
          description: 'There was a problem with your request.',
          toast: 'soft-warning',
          progress: 'warning',
          showProgress: true,
          actions,
          closable: true,
        },
      )"
    />
  </div>
</template>

<script setup lang="ts">
const { toast } = useToast()
</script>

<template>
  <div class="grid h-28 place-items-center">
    <NButton
      label="Show toast"
      btn="solid-white"
      @click="toast(
        {
          title: 'Uh oh! Something went wrong.',
          description: 'There was a problem with your request.',
          _toastProvider: {
            duration: 1000,
            swipeDirection: 'up',
          },
          closable: true,
        },
      )"
    />
  </div>
</template>

<script setup lang="ts">
import type { NToastProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'

import { cn } from '../../../utils'
import Icon from '../../elements/Icon.vue'
import Progress from '../../elements/Progress.vue'
import ToastAction from './ToastAction.vue'
import ToastClose from './ToastClose.vue'
import ToastDescription from './ToastDescription.vue'
import ToastInfo from './ToastInfo.vue'
import ToastTitle from './ToastTitle.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NToastProps>(), {
  toast: 'solid-white',
  closable: true,
})

const emits = defineEmits<ToastRootEmits>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
</script>

<template>
  <ToastRoot
    v-slot="{ remaining, duration }"
    :class="cn(
      'group toast data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
      props.class,
      props.una?.toast,
    )"
    v-bind="rootProps"
    :toast
    @update:open="onOpenChange"
  >
    <slot name="leading">
      <Icon
        v-if="leading"
        :name="leading"
        :class="cn(
          'toast-leading',
          props.una?.toastLeading,
        )"
      />
    </slot>

    <div
      :class="cn(
        'toast-wrapper',
        props.una?.toastWrapper,
      )"
    >
      <slot>
        <ToastInfo
          v-if="$slots.info || $slots.title || $slots.description || title || description"
          v-bind="_toastInfo"
          :una
        >
          <slot name="info">
            <ToastTitle
              v-if="$slots.title || title"
              v-bind="_toastTitle"
              :una
            >
              <slot name="title">
                {{ title }}
              </slot>
            </ToastTitle>

            <ToastDescription
              v-if="$slots.description || description"
              v-bind="_toastDescription"
              :una
            >
              <slot name="description">
                {{ description }}
              </slot>
            </ToastDescription>
          </slot>
        </ToastInfo>

        <div
          v-if="actions"
          class="toast-actions"
        >
          <slot name="actions" :actions>
            <ToastAction
              v-for="(action, index) in actions"
              :key="index"
              v-bind="action"
            />
          </slot>
        </div>

        <ToastClose
          v-if="closable"
          v-bind="_toastClose"
          :una
        >
          <slot name="closeIcon" />
        </ToastClose>
      </slot>
    </div>

    <div
      v-if="showProgress"
      class="absolute inset-x-0 bottom-0 !mx-0"
    >
      <Progress
        :progress
        v-bind="_progress"
        :class="cn(
          'toast-progress bg-transparent',
          props.una?.toastProgress,
        )"
        :model-value="remaining / duration * 100"
      />
    </div>
  </ToastRoot>
</template>

<script setup lang="ts">
import type { NToasterProps } from '../../types'
import { reactivePick } from '@vueuse/core'
import { useToast } from '../../composables/useToast'
import Toast from './toast/Toast.vue'
import ToastProvider from './toast/ToastProvider.vue'
import ToastViewport from './toast/ToastViewport.vue'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<NToasterProps>()
const slots = defineSlots<any>()

const rootProps = reactivePick(props, ['duration', 'label', 'swipeDirection', 'swipeThreshold'])

const { toasts } = useToast()
</script>

<template>
  <ToastProvider
    v-bind="rootProps"
  >
    <slot>
      <Toast
        v-for="t in toasts"
        :key="t.id"
        v-bind="{ ..._toast, ...$attrs, ...t }"
      >
        <template v-for="(_, name) in slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </Toast>
    </slot>

    <ToastViewport v-bind="_toastViewport" />
  </ToastProvider>
</template>

<script setup lang="ts">
import type { NToastProviderProps } from '../../../types'
import { ToastProvider } from 'radix-vue'

const props = withDefaults(defineProps<NToastProviderProps>(), {
  duration: 5000,
})
</script>

<template>
  <ToastProvider v-bind="props">
    <slot />
  </ToastProvider>
</template>

<script setup lang="ts">
import type { NToastViewportProps } from '../../../types'
import { ToastViewport } from 'radix-vue'
import { computed } from 'vue'
import { cn } from '../../../utils'

const props = defineProps<NToastViewportProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <ToastViewport
    v-bind="delegatedProps"
    :class="cn(
      'toast-viewport',
      props.class,
      props.una?.toastViewport,
    )"
  />
</template>

<script setup lang="ts">
import type { NToastInfoProps } from '../../../types'
import { cn } from '../../../utils'

const props = defineProps<NToastInfoProps>()
</script>

<template>
  <div
    :class="cn(
      'toast-info',
      props.class,
      props.una?.toastInfo,
    )"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { NToastTitleProps } from '../../../types'
import { ToastTitle } from 'radix-vue'
import { computed } from 'vue'
import { cn } from '../../../utils'

const props = defineProps<NToastTitleProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <ToastTitle
    v-bind="delegatedProps"
    :class="cn(
      'toast-title',
      props.class,
      props.una?.toastTitle,
    )"
  >
    <slot />
  </ToastTitle>
</template>

<script setup lang="ts">
import type { NToastDescriptionProps } from '../../../types'
import { ToastDescription } from 'radix-vue'
import { computed } from 'vue'
import { cn } from '../../../utils'

const props = defineProps<NToastDescriptionProps>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <ToastDescription
    v-bind="delegatedProps"
    :class="cn(
      'toast-description',
      props.class,
      props.una?.toastDescription,
    )"
  >
    <slot />
  </ToastDescription>
</template>

<script setup lang="ts">
import type { NToastActionProps } from '../../../types'
import { ToastAction } from 'radix-vue'
import { computed } from 'vue'
import { cn, omitProps, randomId } from '../../../utils'
import Button from '../../elements/Button.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NToastActionProps>(), {
  btn: 'solid-white',
  size: 'xs',
})

const slots = defineSlots<any>()

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <ToastAction
    :alt-text="altText"
    as-child
  >
    <Button
      v-bind="omitProps({ ...$attrs, ...delegatedProps }, ['altText'])"
      :id="randomId('toast-action')"
      :class="cn('toast-action', props.class)"
    >
      <template v-for="(_, name) in slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </Button>
  </ToastAction>
</template>

<script setup lang="ts">
import type { NToastCloseProps } from '../../../types'
import { ToastClose } from 'radix-vue'
import { computed } from 'vue'
import { cn } from '../../../utils'
import Icon from '../../elements/Icon.vue'

const props = defineProps<NToastCloseProps>()

const delegatedProps = computed(() => {
  const { ...delegated } = props

  return delegated
})
</script>

<template>
  <ToastClose
    v-bind="delegatedProps"
    :class="cn(
      'toast-close',
      props.class,
      props.una?.toastClose,
    )"
  >
    <Icon
      :name="una?.toastCloseIcon ?? 'toast-close-icon'"
      :class="cn(
        'toast-close-icon-base',
        una?.toastCloseIconBase,
      )"
      aria-hidden="true"
    />
  </ToastClose>
</template>