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.
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import type { NotificationOptions } from 'element-plus';
|
|
import type { VNodeChild } from 'vue';
|
|
|
|
export interface INotificationArguments {
|
|
message: string | VNodeChild;
|
|
type: 'success' | 'error' | 'warning' | 'info';
|
|
title?: string;
|
|
}
|
|
|
|
export default defineNuxtPlugin(() => {
|
|
const config = useAppConfig();
|
|
|
|
function notify(args: INotificationArguments) {
|
|
if (process.server) return;
|
|
|
|
const duration = 5000;
|
|
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,
|
|
},
|
|
}
|
|
});
|