From cee3e126a472735c0e484de315868bb28287164f Mon Sep 17 00:00:00 2001
From: Alex Thorwaldson <alex@zoobz.io>
Date: Wed, 13 Mar 2024 13:49:57 -0700
Subject: [PATCH] feat(Alert): add `icon` & `avatar` slots (#1401)

Co-authored-by: gangan <44604921+shinGangan@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .../content/examples/AlertExampleAvatar.vue   | 20 +++++++++++++++++++
 .../content/examples/AlertExampleIcon.vue     | 10 ++++++++++
 docs/content/2.components/alert.md            | 12 +++++++++++
 src/runtime/components/elements/Alert.vue     |  8 ++++++--
 4 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/content/examples/AlertExampleAvatar.vue
 create mode 100644 docs/components/content/examples/AlertExampleIcon.vue

diff --git a/docs/components/content/examples/AlertExampleAvatar.vue b/docs/components/content/examples/AlertExampleAvatar.vue
new file mode 100644
index 0000000000..66db4bdf3e
--- /dev/null
+++ b/docs/components/content/examples/AlertExampleAvatar.vue
@@ -0,0 +1,20 @@
+<template>
+  <UAlert 
+    title="Customize Alert Avatar" 
+    description="Insert custom content into the avatar slot!" 
+    :avatar="{ 
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4', 
+      alt: 'Avatar' 
+    }"
+  >
+    <template #avatar="{ avatar }">
+      <UAvatar 
+        v-bind="avatar" 
+        chip-color="primary"
+        chip-text=""
+        chip-position="top-right"
+      />
+    </template>
+  </UAlert>
+</template>
+  
\ No newline at end of file
diff --git a/docs/components/content/examples/AlertExampleIcon.vue b/docs/components/content/examples/AlertExampleIcon.vue
new file mode 100644
index 0000000000..5e498864ac
--- /dev/null
+++ b/docs/components/content/examples/AlertExampleIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <UAlert title="Customize Alert Icon" description="Insert custom content into the icon slot!" icon="i-heroicons-command-line">
+    <template #icon="{ icon }">
+      <UBadge size="sm">
+        <UIcon :name="icon" />
+      </UBadge>
+    </template>
+  </UAlert>
+</template>
+  
\ No newline at end of file
diff --git a/docs/content/2.components/alert.md b/docs/content/2.components/alert.md
index 0d74544cf4..5f025b66f9 100644
--- a/docs/content/2.components/alert.md
+++ b/docs/content/2.components/alert.md
@@ -163,6 +163,18 @@ This can be handy when you want to display HTML content. To achieve this, you ca
 
 :component-example{component="alert-example-html"}
 
+### `icon`
+
+Use the `#icon` slot to customize the displayed icon.
+
+:component-example{component="alert-example-icon"}
+
+### `avatar`
+
+Use the `#avatar` slot to customize the displayable avatar.
+
+:component-example{component="alert-example-avatar"}
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index a1fb268b64..2ba3b71c73 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -1,8 +1,12 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
     <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
-      <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
-      <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+      <slot name="icon" :icon="icon">
+        <UIcon v-if="icon" :name="icon" :ui="ui.icon.base" />
+      </slot>
+      <slot name="avatar" :avatar="avatar">
+        <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+      </slot>
 
       <div :class="ui.inner">
         <p v-if="(title || $slots.title)" :class="ui.title">