kugatsu765 / vuenotification Goto Github PK

View Code? Open in Web Editor NEW

51.0 3.0 9.0 2.99 MB

Notification plugin for VuesJS

Home Page: https://codesandbox.io/s/github/kugatsu765/vueNotificationSample2/tree/master/

License: MIT License

JavaScript 19.91% HTML 4.56% Vue 75.53%

vuejs2 vuejs vuejs-plugin vuejs-components notifications toast-notifications toastr gsap

vuenotification's Introduction

Notification Vue JS 🚀

🚨🚨🚨 Not maintained anymore

The Notification vue plugin allows you to display notifications from anywhere within your app. Just with one line of code. This notification plugin is unique from others as it utilises the GSAP library allowing you to animate your notifications in a near limitless number of ways

How to use it

Install with npm. If you don't already have GSAP in your project, you also have to install it.

npm i @kugatsu/vuenotification --save
npm i gsap --save

Import with ES6

import VueNotification from "@kugatsu/vuenotification";

Vue.use(VueNotification, {
  timer: 20
});

Emit the notification where you want.

this.$notification.new("hello world", {  timer: 10 });
this.$notification.error("hello world", { infiniteTimer: false });
...

Parameters

Name	Type	Default value
message	String	"🚧 You missed something ..."
title	String	null
timer	Number	5(s)
infiniteTimer	Boolean	false
position	String	topRight
type	String	primary
[type]	Object	( See type section )
showLeftIcn	Boolean	true
showCloseIcn	Boolean	false
animateIn	Function	()=> TimelineMax
animateOut	Function	()=> TimelineMax
messageIsHTML	Boolean	false

position

Name	Value
top center	topCenter
top left	topLeft
top right	topRight
bottom center	bottomCenter
bottom left	bottomLeft
bottom right	bottomRight

Type

There are 5 notifications types.

primary
dark
success
warning
error

To customise the colors of the notification you can do this globally or locally :

// Sample to change all error notifications
Vue.use(NotificationVuejs, {
  error: {
    background: "green",
    color: "red"
  }
});

Animation

To animate the in and out animation, we use GSAP. To customize the default animation, you have to add to your config object. animateIn and animateOut with a function that returns a gsap timeline.

Vue.use(NotificationVuejs, {
  animateIn: function() {
    var tl = new TimelineMax()
      .from(this.notificationEl, 0.6, {
        opacity: 0
      })
      .from(this.notificationEl, 0.4, {
        borderRadius: 100,
        width: 58,
        height: 58
      })
      .from(this.notificationElContent, 0.3, {
        opacity: 0
      });
    return tl;
  }
});

You can select the notification with a custom selector.

Selector	Value to use
all notification	this.notification
current notification	this.notificationEl
all content of the notification	this.notificationElContent
Notification title	this.notificationTitle
Notification message	this.notificationMessage
Notification icone	this.notificationIcone
Notification close button	this.notificationIconeClose

Credit

Icones

Icons made by Pixel perfect, Smashicons from www.flaticon.com is licensed by CC 3.0 BY

vuenotification's People

Contributors

Stargazers

Watchers

Forkers

vuenotification's Issues

How to move messages to front plan?

Hello.
When i open Dialog like in this example https://vuetifyjs.com/ru/components/data-tables#crud-actions
all notifications appears on back plan. How to fix it?

how to add button or event call function after close

Customize left icon

Hello.

Is it possible to customize the left side icon SVG and add my own?

If it is impossible can you please add this feature in the future?

Thank you.

Please make following fix

thanks for your work - great component

Is HTML support added in it?

HTML not working!

this.$notification.success("hello world");

Missing the GSAP module instructions

Hi I installed this module (vueNotification) but got a error messageModule not found: Error: Can't resolve 'gsap' in '/var/www/html/node_modules/@kugatsu/vuenotification/dist'.

I solved it installing the module GSAP but is missing instruction in the documentation about it or another way is to include as dependence on this module.

CSS class for different type of notification

Can we add the type of notification class onto the container so that we can customise the container style?

Make possible to change position of notification from absolute to fixed

The problem arises when using notifications in a really long page.

I currently have the position set to bottomRight. When I scroll up, the notification will be scrolled out. This is not always the desired behavior.

Would it be possible to allow for a configuration setting .notificationCenter position to fixed?

new line

est-il possible d'utiliser une nouvelle ligne (new line ) dans le message?

Customize font

Hello.
Is it possible to customize fonts of title and message text?
If it is impossible can you add this feature?

import TimelineMax from 'gsap';

Hi. I've decided to use your package in my project and certain things I cannot configure very well. Basically, what I'm trying to accomplish is to reduce animation time that is quite slow and then I followed your instructions. First, I imported TimelineMax from GSAP

import TimelineMax from 'gsap';

Then I start to configure the notification:

this.$notification.success(message, { title: this.t('messages.SUCCESS'), timer: 5, animateIn: () => { let tl = new TimelineMax() .from(.vn-notif${this.uuid}, 0.6, { opacity: 0 }) .from(this.notificationEl, 0.4, { borderRadius: 100, width: 20, height: 20 }) .from(.vn-notif${this.uuid}>div, 0.3, { opacity: 0 }); tl.pause(); return tl; } });

And I've got an error in console: Cannot tween a null target. I tried to debug it with no success. What's actually happening in this case?

Error Gsap TimelineMax is not defined

I had declared properly the import and the Vue Use.

I have this error only if a specify the animateIn in the Vue.use.

When i call the notification in a Vue component, the notification works as expected but an error appear in the debug console :

[Vue warn]: Error in mounted hook: "ReferenceError: TimelineMax is not defined"
(found in )

Can we use thus notification from vuex store

I have an action which is triggered if an api request throws an error. i would like to take this error message and display them to user from the action. Does such a functionallity exist.