feat(Notification): support html with title and description slots (…

…#431)

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>
 

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>

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

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">

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>