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

fix(Notification): improve config options

Browse Source
This commit is contained in:
Benjamin Canac
2023-11-14 17:19:59 +01:00
parent 91511b921d
commit 7cb987de42
2 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,34 +8,32 @@
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
> >
<div :class="[ui.container, ui.rounded, ui.ring]"> <div :class="[ui.container, ui.rounded, ui.ring]">
<div :class="ui.padding"> <div class="flex" :class="[ui.padding, ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.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" />
<UIcon v-if="icon" :name="icon" :class="iconClass" /> <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
<div class="w-0 flex-1"> <div class="w-0 flex-1">
<p :class="ui.title"> <p :class="ui.title">
<slot name="title" :title="title"> <slot name="title" :title="title">
{{ title }} {{ title }}
</slot> </slot>
</p> </p>
<p v-if="(description || $slots.description)" :class="ui.description"> <p v-if="(description || $slots.description)" :class="ui.description">
<slot name="description" :description="description"> <slot name="description" :description="description">
{{ description }} {{ description }}
</slot> </slot>
</p> </p>
<div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2"> <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)" /> <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
</div>
</div> </div>
<div v-if="closeButton || (!description && !$slots.description && actions.length)" class="flex-shrink-0 flex items-center gap-3"> </div>
<div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2"> <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
<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">
</div> <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
</template>
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" /> <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
</div>
</div> </div>
</div> </div>
<div v-if="timeout" :class="progressClass" :style="progressStyle" /> <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -224,7 +222,8 @@ export default defineComponent({
onMouseover, onMouseover,
onMouseleave, onMouseleave,
onClose, onClose,
onAction onAction,
twMerge
} }
} }
}) })

2
src/runtime/ui.config.ts
View File

@@ -1311,10 +1311,12 @@ export const notification = {
container: 'relative overflow-hidden', container: 'relative overflow-hidden',
title: 'text-sm font-medium text-gray-900 dark:text-white', title: 'text-sm font-medium text-gray-900 dark:text-white',
description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400', description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
background: 'bg-white dark:bg-gray-900', background: 'bg-white dark:bg-gray-900',
shadow: 'shadow-lg', shadow: 'shadow-lg',
rounded: 'rounded-lg', rounded: 'rounded-lg',
padding: 'p-4', padding: 'p-4',
gap: 'gap-3',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800', ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
icon: { icon: {
base: 'flex-shrink-0 w-5 h-5', base: 'flex-shrink-0 w-5 h-5',