chore(Notification): improve types

src/runtime/components/overlays/Notification.vue

@@ -42,9 +42,9 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useTimer } from '../../composables/useTimer'
-import type { ToastNotificationAction } from '../../types'
-import type { Avatar as AvatarType } from '../../types/avatar'
-import type { Button as ButtonType } from '../../types/button'
+import type { NotificationAction } from '../../types'
+import type { Avatar} from '../../types/avatar'
+import type { Button } from '../../types/button'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -77,11 +77,11 @@ export default defineComponent({
       default: null
     },
     avatar: {
-      type: Object as PropType<Partial<AvatarType>>,
+      type: Object as PropType<Partial<Avatar>>,
       default: null
     },
     close: {
-      type: Object as PropType<Partial<ButtonType>>,
+      type: Object as PropType<Partial<Button>>,
       default: () => appConfig.ui.notification.default.close
     },
     timeout: {
@@ -89,7 +89,7 @@ export default defineComponent({
       default: 5000
     },
     actions: {
-      type: Array as PropType<ToastNotificationAction[]>,
+      type: Array as PropType<NotificationAction[]>,
       default: () => []
     },
     callback: {
@@ -162,7 +162,7 @@ export default defineComponent({
       emit('close')
     }
 
-    function onAction (action: ToastNotificationAction) {
+    function onAction (action: NotificationAction) {
       if (timer) {
         timer.stop()
       }

src/runtime/components/overlays/Notifications.vue

@@ -17,7 +17,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import type { ToastNotification } from '../../types'
+import type { Notification } from '../../types'
 import { useToast } from '../../composables/useToast'
 import UNotification from './Notification.vue'
 import { useState, useAppConfig } from '#imports'
@@ -44,7 +44,7 @@ export default defineComponent({
     const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defu({}, props.ui, appConfig.ui.notifications))
 
     const toast = useToast()
-    const notifications = useState<ToastNotification[]>('notifications', () => [])
+    const notifications = useState<Notification[]>('notifications', () => [])
 
     return {
       // eslint-disable-next-line vue/no-dupe-keys

src/runtime/composables/useCopyToClipboard.ts

@@ -1,8 +1,8 @@
 import { useClipboard } from '@vueuse/core'
-import type { ToastNotification } from '../types/toast'
+import type { Notification } from '../types/notification'
 import { useToast } from './useToast'
 
-export function useCopyToClipboard (options: Partial<ToastNotification> = {}) {
+export function useCopyToClipboard (options: Partial<Notification> = {}) {
   const { copy: copyToClipboard, isSupported } = useClipboard()
   const toast = useToast()
 

src/runtime/composables/useToast.ts

@@ -1,25 +1,25 @@
-import type { ToastNotification } from '../types'
+import type { Notification } from '../types'
 import { useState } from '#imports'
 
 export function useToast () {
-  const notifications = useState<ToastNotification[]>('notifications', () => [])
+  const notifications = useState<Notification[]>('notifications', () => [])
 
-  function add (notification: Partial<ToastNotification>) {
+  function add (notification: Partial<Notification>) {
     const body = {
       id: new Date().getTime().toString(),
       ...notification
     }
 
-    const index = notifications.value.findIndex((n: ToastNotification) => n.id === body.id)
+    const index = notifications.value.findIndex((n: Notification) => n.id === body.id)
     if (index === -1) {
-      notifications.value.push(body as ToastNotification)
+      notifications.value.push(body as Notification)
     }
 
     return body
   }
 
   function remove (id: string) {
-    notifications.value = notifications.value.filter((n: ToastNotification) => n.id !== id)
+    notifications.value = notifications.value.filter((n: Notification) => n.id !== id)
   }
 
   return {

src/runtime/types/index.d.ts

@@ -1,5 +1,5 @@
 export * from './avatar'
 export * from './clipboard'
 export * from './command-palette'
+export * from './notification'
 export * from './popper'
-export * from './toast'

src/runtime/types/notification.d.ts

@@ -0,0 +1,23 @@
+import type { Avatar } from './avatar'
+import type { Button } from './button'
+import appConfig from '#build/app.config'
+
+export interface NotificationAction extends Partial<Button> {
+  click: Function
+}
+
+export interface Notification {
+  id: string
+  title: string
+  description: string
+  icon?: string
+  avatar?: Partial<Avatar>
+  close?: Partial<Button>
+  timeout: number
+  actions?: NotificationAction[]
+  click?: Function
+  callback?: Function
+  progressColor?: string
+  progressVariant?: string
+  ui?: Partial<typeof appConfig.ui.notification>
+}

src/runtime/types/toast.d.ts

@@ -1,17 +0,0 @@
-import type { Button } from './button'
-
-export interface ToastNotificationAction extends Partial<Button> {
-  click: Function
-}
-
-export interface ToastNotification {
-  id: string
-  title: string
-  description: string
-  type: string
-  icon?: string
-  timeout: number
-  actions?: ToastNotificationAction[]
-  click?: Function
-  callback?: Function
-}