feat(Alert): add icon & avatar slots (#1401)

Co-authored-by: gangan <[email protected]> Co-authored-by: Benjamin Canac <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
nuxt · Mar 13, 2024 · cee3e12 · cee3e12
1 parent f4a48f6
commit cee3e12
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/docs/components/content/examples/AlertExampleAvatar.vue 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>
+
diff --git a/docs/components/content/examples/AlertExampleIcon.vue 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>
+
diff --git 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
@@ -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">