chore(Notifications): simplify how to position them (#190)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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`.

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'
 }
 

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