mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
chore(Notification)!: rename to closeButton and actionButton for consistency
This commit is contained in:
@@ -176,7 +176,7 @@ export default defineAppConfig({
|
||||
},
|
||||
notification: {
|
||||
default: {
|
||||
close: {
|
||||
closeButton: {
|
||||
icon: 'i-octicon-x-24'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
2
src/runtime/types/notification.d.ts
vendored
2
src/runtime/types/notification.d.ts
vendored
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user