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

…consistency

docs/content/1.getting-started/3.theming.md

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

docs/content/5.overlays/6.notification.md

@@ -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
 ---

src/runtime/app.config.ts

@@ -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'
     }

src/runtime/components/overlays/Notification.vue

@@ -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,

src/runtime/types/notification.d.ts

@@ -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