arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 07:50:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Alert): new component (#449)

Browse Source
This commit is contained in:
Benjamin Canac
2023-07-27 16:59:50 +02:00
committed by GitHub
parent 8298b62f21
commit ab2abae48a
14 changed files with 392 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/overlays/Notification.vue
View File

@@ -3,7 +3,7 @@
<div :class="[ui.wrapper, ui.background, ui.rounded, ui.shadow]" @mouseover="onMouseover" @mouseleave="onMouseleave">
<div :class="[ui.container, ui.rounded, ui.ring]">
<div :class="ui.padding">
<div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
<div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
<UIcon v-if="icon" :name="icon" :class="iconClass" />
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
@@ -13,18 +13,18 @@
{{ title }}
</slot>
</p>
<p v-if="description" :class="ui.description">
<p v-if="(description || $slots.description)" :class="ui.description">
<slot name="description" :description="description">
{{ description }}
</slot>
</p>
<div v-if="description && actions.length" class="mt-3 flex items-center gap-2">
<div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
</div>
</div>
<div class="flex-shrink-0 flex items-center gap-3">
<div v-if="!description && actions.length" class="flex items-center gap-2">
<div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
</div>