arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 13:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Alert): add actions slot (#1785)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
John Tanz
2024-05-28 12:29:10 +02:00
committed by GitHub
parent 4f0d00f7a6
commit c8dd71c4f5
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/2.components/alert.md
View File

@@ -175,6 +175,12 @@ Use the `#avatar` slot to customize the displayable avatar.
:component-example{component="alert-example-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 ## Props
:component-props :component-props

12
src/runtime/components/elements/Alert.vue
View File

@@ -20,13 +20,17 @@
</slot> </slot>
</p> </p>
<div v-if="(description || $slots.description) && actions.length" :class="ui.actions"> <div v-if="(description || $slots.description) && (actions.length || $slots.actions)" :class="ui.actions">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" /> <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> </div>
<div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')"> <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
<template v-if="!description && !$slots.description && actions.length"> <template v-if="!description && !$slots.description && (actions.length || $slots.actions)">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" /> <slot name="actions">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
</slot>
</template> </template>
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" /> <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />