Alexandr SaVBaD Waltz
8d7685ef67
Added a global `notify` method via Nuxt plugin to replace `useNotification`. Improved messaging structure by embedding progress bars and handled dynamic durations. Updated usage across composables and components for consistency. - Replaced `useNotification` with `$notify` in all applicable files. - Updated `app.config.ts` to support customizable notification positions. - Refactored affected composables for simplified notification calls. - Enhanced progress indicator display within notifications. Breaking Changes: `useNotification` is removed, requiring migration to the new `$notify` API.
50 lines
No EOL
1,002 B
TypeScript
50 lines
No EOL
1,002 B
TypeScript
import type { VNodeChild } from 'vue'
|
|
import type { NotificationOptions } from 'element-plus'
|
|
|
|
export interface INotificationArguments {
|
|
message: string | VNodeChild
|
|
type: 'success' | 'error' | 'warning' | 'info'
|
|
title?: string
|
|
}
|
|
|
|
export default defineNuxtPlugin(() => {
|
|
const duration = 5000
|
|
const config = useAppConfig()
|
|
|
|
function notify(args: INotificationArguments) {
|
|
const progressBar = h('div', {
|
|
class: 'el-notification__progress',
|
|
style: {
|
|
animationDuration: `${duration}ms`,
|
|
},
|
|
})
|
|
|
|
const bodyContent =
|
|
typeof args.message === 'string'
|
|
? h('p', args.message)
|
|
: args.message
|
|
|
|
const messageVNode = h('div', [
|
|
bodyContent,
|
|
progressBar,
|
|
])
|
|
|
|
const notification = ElNotification({
|
|
title: args.title,
|
|
duration: 0,
|
|
message: messageVNode,
|
|
type: args.type,
|
|
position: config.ui.notificationPosition,
|
|
} as NotificationOptions)
|
|
|
|
setTimeout(() => {
|
|
notification.close()
|
|
}, duration)
|
|
}
|
|
|
|
return {
|
|
provide: {
|
|
notify,
|
|
},
|
|
}
|
|
}) |