chore(Notification)!: rename to closeButton and actionButton for consistency

This commit is contained in:
Benjamin Canac
2023-05-29 21:59:59 +02:00
parent daca46371c
commit 4458656be5
5 changed files with 14 additions and 14 deletions

View File

@@ -176,7 +176,7 @@ export default defineAppConfig({
}, },
notification: { notification: {
default: { default: {
close: { closeButton: {
icon: 'i-octicon-x-24' icon: 'i-octicon-x-24'
} }
} }

View File

@@ -187,9 +187,9 @@ function onCallback () {
### Close ### Close
Use the `close` prop to hide or customize the close button on the Notification. Use the `close-button` prop to hide or customize the close button on the Notification.
You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.notifications.default.close`. You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.notifications.default.closeButton`.
::component-card ::component-card
--- ---
@@ -198,7 +198,7 @@ baseProps:
title: 'Notification' title: 'Notification'
timeout: 0 timeout: 0
props: props:
close: closeButton:
icon: 'i-heroicons-archive-box-x-mark' icon: 'i-heroicons-archive-box-x-mark'
color: 'primary' color: 'primary'
variant: 'outline' variant: 'outline'
@@ -207,7 +207,7 @@ props:
ui: ui:
rounded: 'rounded-full' rounded: 'rounded-full'
excludedProps: excludedProps:
- close - closeButton
--- ---
:: ::
@@ -230,7 +230,7 @@ const toast = useToast()
``` ```
:: ::
Like for `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`. Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.actionButton`.
::component-card ::component-card
--- ---

View File

@@ -744,13 +744,13 @@ const notification = {
default: { default: {
color: 'primary', color: 'primary',
icon: null, icon: null,
close: { closeButton: {
icon: 'i-heroicons-x-mark-20-solid', icon: 'i-heroicons-x-mark-20-solid',
color: 'gray', color: 'gray',
variant: 'link', variant: 'link',
padded: false padded: false
}, },
action: { actionButton: {
size: 'xs', size: 'xs',
color: 'white' color: 'white'
} }

View File

@@ -16,15 +16,15 @@
</p> </p>
<div v-if="description && actions.length" class="mt-3 flex items-center gap-2"> <div v-if="description && actions.length" class="mt-3 flex items-center gap-2">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...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>
<div class="flex-shrink-0 flex items-center gap-3"> <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 && actions.length" class="flex items-center gap-2">
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...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>
<UButton v-if="close" v-bind="{ ...ui.default.close, ...close }" @click.stop="onClose" /> <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
</div> </div>
</div> </div>
</div> </div>
@@ -80,9 +80,9 @@ export default defineComponent({
type: Object as PropType<Partial<Avatar>>, type: Object as PropType<Partial<Avatar>>,
default: null default: null
}, },
close: { closeButton: {
type: Object as PropType<Partial<Button>>, type: Object as PropType<Partial<Button>>,
default: () => appConfig.ui.notification.default.close default: () => appConfig.ui.notification.default.closeButton
}, },
timeout: { timeout: {
type: Number, type: Number,

View File

@@ -12,7 +12,7 @@ export interface Notification {
description: string description: string
icon?: string icon?: string
avatar?: Partial<Avatar> avatar?: Partial<Avatar>
close?: Partial<Button> closeButton?: Partial<Button>
timeout: number timeout: number
actions?: NotificationAction[] actions?: NotificationAction[]
click?: Function click?: Function