From df455db3caeb689ac1f24f224606183d4f5135ea Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 20 Jul 2023 11:58:43 +0200
Subject: [PATCH] feat(Notification): support html with `title` and
 `description` slots (#431)

---
 docs/app.vue                                  | 10 ++++-
 .../examples/NotificationExampleHtml.vue      |  7 +++
 docs/content/6.overlays/6.notification.md     | 44 +++++++++++++++++++
 .../components/overlays/Notification.vue      |  8 +++-
 .../components/overlays/Notifications.vue     |  6 ++-
 5 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 docs/components/content/examples/NotificationExampleHtml.vue

diff --git a/docs/app.vue b/docs/app.vue
index da5b1e4d..ac5d7094 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -38,7 +38,15 @@
       <UDocsSearch :files="files" :links="navigation" />
     </ClientOnly>
 
-    <UNotifications />
+    <UNotifications>
+      <template #title="{ title }">
+        <span v-html="title" />
+      </template>
+
+      <template #description="{ description }">
+        <span v-html="description" />
+      </template>
+    </UNotifications>
   </div>
 </template>
 
diff --git a/docs/components/content/examples/NotificationExampleHtml.vue b/docs/components/content/examples/NotificationExampleHtml.vue
new file mode 100644
index 00000000..3ebfe186
--- /dev/null
+++ b/docs/components/content/examples/NotificationExampleHtml.vue
@@ -0,0 +1,7 @@
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Notification <i>italic</i>', description: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
+</template>
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md
index d2d1eeca..63d7dfec 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/6.overlays/6.notification.md
@@ -316,6 +316,50 @@ excludedProps:
 ---
 ::
 
+## Slots
+
+### `title` / `description`
+
+Use the `#title` and `#description` slots to customize the Notification.
+
+This can be handy when you want to display HTML content. To achieve this, you can define those slots in the top-level `<UNotifications />` component in your `app.vue` and use the `v-html` directive.
+
+```vue [app.vue]
+<template>
+  <UNotifications>
+    <template #title="{ title }">
+      <span v-html="title" />
+    </template>
+
+    <template #description="{ description }">
+      <span v-html="description" />
+    </template>
+  </UNotifications>
+</template>
+```
+
+This way, you can use HTML tags in the `title` and `description` props when using `useToast`.
+
+::component-example
+#default
+:notification-example-html
+
+#code
+```vue
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Notification <i>italic</i>', description: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
+</template>
+```
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Slots defined in the `<UNotifications />` component are automatically passed down to the `Notification` children.
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index 2e827e06..aa0a56e2 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -9,10 +9,14 @@
 
             <div class="w-0 flex-1">
               <p :class="ui.title">
-                {{ title }}
+                <slot name="title" :title="title">
+                  {{ title }}
+                </slot>
               </p>
               <p v-if="description" :class="ui.description">
-                {{ description }}
+                <slot name="description" :description="description">
+                  {{ description }}
+                </slot>
               </p>
 
               <div v-if="description && actions.length" class="mt-3 flex items-center gap-2">
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index f903ba09..b38c5a89 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -7,7 +7,11 @@
           :class="notification.click && 'cursor-pointer'"
           @click="notification.click && notification.click(notification)"
           @close="toast.remove(notification.id)"
-        />
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UNotification>
       </div>
     </div>
   </div>