feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/5.overlays/6.notification.md

@@ -0,0 +1,249 @@
+---
+github: true
+---
+
+## Usage
+
+First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
+
+This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+
+    <UNotifications />
+  </div>
+</template>
+```
+
+Then, you can use the `useToast` composable to add notifications to your app:
+
+::component-example
+#default
+:notification-example-basic
+#code
+```vue
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
+</template>
+```
+::
+
+### Description
+
+You can add a `description` in addition of the `title`.
+
+::component-card
+---
+baseProps:
+  id: 2
+  timeout: 0
+props:
+  title: 'Notification'
+  description: 'This is a notification.'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+baseProps:
+  id: 3
+  timeout: 0
+  title: 'Notification'
+props:
+  icon: 'i-heroicons-check-circle'
+  description: 'This is a notification.'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+baseProps:
+  id: 4
+  timeout: 0
+  title: 'Notification'
+  description: 'This is a notification.'
+props:
+  avatar:
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+excludedProps:
+  - avatar
+---
+::
+
+### Timeout
+
+Use the `timeout` prop to configure how long the Notification will remain. Set it to `0` to disable the timeout.
+
+You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
+
+::component-card
+---
+baseProps:
+  id: 5
+  title: 'Notification'
+  description: 'This is a notification.'
+props:
+  timeout: 10000
+---
+::
+
+### Click
+
+Use the `click` prop to execute a function when the Notification is clicked.
+
+::component-example
+#default
+:notification-example-click
+#code
+```vue
+<script setup>
+const toast = useToast()
+
+function onClick () {
+  alert('Clicked!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
+</template>
+```
+::
+
+### Callback
+
+Use the `callback` prop to execute a function when the Notification expires.
+
+::component-example
+#default
+:notification-example-callback
+#code
+```vue
+<script setup>
+const toast = useToast()
+
+function onCallback () {
+  alert('Notification expired!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
+</template>
+```
+::
+
+### Close
+
+Use the `close` prop to hide or customize the close button on the Notification.
+
+You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.notifications.default.close`.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  timeout: 0
+props:
+  close:
+    icon: 'i-heroicons-archive-box-x-mark'
+    color: 'primary'
+    variant: 'outline'
+    padded: true
+    size: '2xs'
+    ui:
+      rounded: 'rounded-full'
+excludedProps:
+  - close
+---
+::
+
+### Actions
+
+Use the `actions` prop to add actions to the Notification.
+
+::component-example
+#default
+:notification-example-actions
+#code
+```vue
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
+</template>
+```
+::
+
+Like for `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  timeout: 0
+props:
+  actions:
+    - variant: 'ghost'
+      color: 'gray'
+      label: Action 1
+    - variant: 'solid'
+      color: 'gray'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+Actions will render differently whether you have a `description` set.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  description: 'This is a notification.'
+  timeout: 0
+props:
+  actions:
+    - variant: 'solid'
+      color: 'primary'
+      label: Action 1
+    - variant: 'outline'
+      color: 'primary'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset