<template>
  <toast-provider :transition="transition">
    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select transition</label>
    <select v-model="transition" id="countries" class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
      <option value="slide-left">Slide left</option>
      <option value="slide-right">Slide right</option>
      <option value="slide-top">Slide top</option>
      <option value="slide-bottom">Slide bottom</option>
      <option value="fade">Fade</option>
    </select>
    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
      <toast-provider-example-child />
    </div>
  </toast-provider>
</template>
<script setup>
import { ToastProvider } from '../../../../src/index'
import ToastProviderExampleChild from './ToastProviderExampleChild.vue'
import { ref } from 'vue'

const transition = ref('slide-left')
</script>
