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: {
default: {
close: {
closeButton: {
icon: 'i-octicon-x-24'
}
}

View File

@@ -187,9 +187,9 @@ function onCallback () {
### 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
---
@@ -198,7 +198,7 @@ baseProps:
title: 'Notification'
timeout: 0
props:
close:
closeButton:
icon: 'i-heroicons-archive-box-x-mark'
color: 'primary'
variant: 'outline'
@@ -207,7 +207,7 @@ props:
ui:
rounded: 'rounded-full'
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
---

View File

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

View File

@@ -16,15 +16,15 @@
</p>
<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 class="flex-shrink-0 flex items-center gap-3">
<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>
<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>
@@ -80,9 +80,9 @@ export default defineComponent({
type: Object as PropType<Partial<Avatar>>,
default: null
},
close: {
closeButton: {
type: Object as PropType<Partial<Button>>,
default: () => appConfig.ui.notification.default.close
default: () => appConfig.ui.notification.default.closeButton
},
timeout: {
type: Number,

View File

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