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>

src/runtime/components/overlays/Notifications.vue

@@ -1,31 +1,57 @@
 <template>
-  <div class="fixed bottom-0 right-0 flex flex-col justify-end w-full z-[55] sm:w-96">
-    <div v-if="notifications.length" class="px-4 py-6 space-y-3 overflow-y-auto sm:px-6">
-      <div
-        v-for="notification of notifications"
-        :key="notification.id"
-      >
+  <div :class="ui.wrapper">
+    <div v-if="notifications.length" :class="ui.container">
+      <div v-for="notification of notifications" :key="notification.id">
         <Notification
           v-bind="notification"
           :class="notification.click && 'cursor-pointer'"
           @click="notification.click && notification.click(notification)"
-          @close="toast.removeNotification(notification.id)"
+          @close="toast.remove(notification.id)"
         />
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
 import type { ToastNotification } from '../../types'
 import { useToast } from '../../composables/useToast'
 import Notification from './Notification.vue'
-import { useState } from '#imports'
+import { useState, useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const toast = useToast()
-const notifications = useState<ToastNotification[]>('notifications', () => [])
-</script>
+// const appConfig = useAppConfig()
 
-<script lang="ts">
-export default { name: 'UNotifications' }
+export default defineComponent({
+  components: {
+    Notification
+  },
+  props: {
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.notifications>>,
+      default: () => appConfig.ui.notifications
+    }
+  },
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defu({}, props.ui, appConfig.ui.notifications))
+
+    const toast = useToast()
+    const notifications = useState<ToastNotification[]>('notifications', () => [])
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      toast,
+      notifications
+    }
+  }
+})
 </script>