From c8dd71c4f5a5239811b07b50f1dc802101af07d5 Mon Sep 17 00:00:00 2001
From: John Tanz <82201261+moshetanzer@users.noreply.github.com>
Date: Tue, 28 May 2024 12:29:10 +0200
Subject: [PATCH] feat(Alert): add `actions` slot (#1785)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/2.components/alert.md        |  6 ++++++
 src/runtime/components/elements/Alert.vue | 12 ++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/content/2.components/alert.md b/docs/content/2.components/alert.md
index 30188319..406ee11d 100644
--- a/docs/content/2.components/alert.md
+++ b/docs/content/2.components/alert.md
@@ -175,6 +175,12 @@ Use the `#avatar` slot to customize the displayable avatar.
 
 :component-example{component="alert-example-avatar"}
 
+### `actions` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `#actions` slot to add custom user interaction elements.
+
+:component-example{component="alert-example-actions"}
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index 2ba3b71c..b0af93ca 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -20,13 +20,17 @@
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+        <div v-if="(description || $slots.description) && (actions.length || $slots.actions)" :class="ui.actions">
+          <slot name="actions">
+            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          </slot>
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
-        <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+        <template v-if="!description && !$slots.description && (actions.length || $slots.actions)">
+          <slot name="actions">
+            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          </slot>
         </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />