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