feat(Toast): new component (#50)

playground/app.config.ts

@@ -1,4 +1,9 @@
 export default defineAppConfig({
+  toaster: {
+    position: 'bottom-right' as const,
+    expand: true,
+    duration: 60000
+  },
   ui: {
     primary: 'sky',
     gray: 'cool'

playground/app.vue

@@ -7,6 +7,8 @@ useHead({
   }
 })
 
+const appConfig = useAppConfig()
+
 const components = [
   'accordion',
   'avatar',
@@ -31,6 +33,7 @@ const components = [
   'switch',
   'tabs',
   'textarea',
+  'toast',
   'tooltip'
 ]
 
@@ -40,7 +43,7 @@ function upperName (name: string) {
 </script>
 
 <template>
-  <UApp>
+  <UApp :toaster="appConfig.toaster">
     <div class="min-h-screen w-screen flex flex-col items-center justify-center overflow-y-auto">
       <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
 

playground/pages/toast.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import theme from '#build/ui/toaster'
+
+const positions = Object.keys(theme.variants.position)
+
+const { toasts, add, update, remove } = useToast()
+const appConfig = useAppConfig()
+
+const count = ref(1)
+const last = computed(() => toasts.value[toasts.value.length - 1])
+
+const templates = (id: number) => [{
+  title: 'Toast',
+  description: `This is the toast ${id}`
+}, {
+  title: `Toast ${id}`
+}, {
+  description: `This is the toast ${id}`
+}, {
+  title: 'Toast',
+  description: `This is the toast ${id}`,
+  icon: 'i-heroicons-rocket-launch'
+}, {
+  title: `Toast ${id}`,
+  icon: 'i-heroicons-rocket-launch'
+}, {
+  description: `This is the toast ${id}`,
+  icon: 'i-heroicons-rocket-launch'
+}, {
+  title: 'Toast',
+  description: `This is the toast ${id}`,
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  title: 'Toast',
+  description: `This is the toast ${id}`,
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  actions: [{
+    label: 'Action',
+    click () {
+      console.log(`Toast ${id} action clicked`)
+    }
+  }]
+}, {
+  title: `Toast ${id}`,
+  icon: 'i-heroicons-rocket-launch',
+  actions: [{
+    label: 'Action 1',
+    color: 'gray' as const,
+    click () {
+      console.log(`Toast ${id} action 1 clicked`)
+    }
+  }, {
+    label: 'Action 2',
+    color: 'black' as const,
+    click () {
+      console.log(`Toast ${id} action 2 clicked`)
+    }
+  }]
+}, {
+  description: `This is the toast ${id}`,
+  icon: 'i-heroicons-rocket-launch',
+  actions: [{
+    label: 'Action',
+    color: 'primary' as const,
+    variant: 'outline' as const,
+    click () {
+      console.log(`Toast ${id} action clicked`)
+    }
+  }]
+}]
+
+function addToast () {
+  const id = count.value++
+
+  const template = templates(id)[Math.floor(Math.random() * templates(id).length)]
+
+  add({
+    id,
+    ...template,
+    click (toast) {
+      console.log(`Toast ${toast.id} clicked`)
+    }
+  })
+}
+
+function updateToast () {
+  if (!last.value) {
+    return
+  }
+
+  update(last.value.id, {
+    title: 'Toast updated',
+    description: `This is the updated toast ${count.value++}`
+  })
+}
+
+function removeToast () {
+  if (!last.value) {
+    return
+  }
+
+  remove(last.value.id)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-8">
+    <div>
+      <URadioGroup v-model="appConfig.toaster.position" :options="positions" />
+      <UCheckbox v-model="appConfig.toaster.expand" label="Expand" class="mt-1" />
+      <UInput v-model="appConfig.toaster.duration" label="Duration" type="number" class="mt-1" />
+    </div>
+
+    <div class="flex items-center gap-2">
+      <UButton label="Add new" color="gray" @click="addToast" />
+      <UButton label="Update last" color="gray" @click="updateToast" />
+      <UButton label="Remove last" color="gray" @click="removeToast" />
+    </div>
+  </div>
+</template>