From 1743ea91d58815dcfc6d4847e051921f6c1d3125 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Fri, 19 May 2023 10:01:43 +0200
Subject: [PATCH] chore(Notifications): simplify how to position them (#190)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/5.overlays/6.notification.md         | 15 +++++++++++++--
 src/runtime/app.config.ts                         |  4 +++-
 src/runtime/components/overlays/Notifications.vue |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/content/5.overlays/6.notification.md b/docs/content/5.overlays/6.notification.md
index 02f08fdc..f1230a97 100644
--- a/docs/content/5.overlays/6.notification.md
+++ b/docs/content/5.overlays/6.notification.md
@@ -6,8 +6,6 @@ github: true
 
 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>
@@ -37,6 +35,19 @@ const toast = useToast()
 ```
 ::
 
+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`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 right-0'
+    }
+  }
+})
+```
+
 ### Description
 
 You can add a `description` in addition of the `title`.
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 6ff157da..0fd94ce1 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -721,7 +721,9 @@ const notification = {
 }
 
 const notifications = {
-  wrapper: 'fixed bottom-0 right-0 flex flex-col justify-end w-full z-[55] sm:w-96',
+  wrapper: 'fixed flex flex-col justify-end z-[55]',
+  position: 'bottom-0 right-0',
+  width: 'w-full sm:w-96',
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
 
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index 44ef580d..da5330fd 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="[ui.wrapper, ui.position, ui.width]">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification