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