kyvg / vue3-notification Goto Github PK

I have no idea that I can't use this library on the new vite app.

To Reproduce

1. yarn create vite
2. import Notifications from '@kyvg/vue3-notification';
3. app.use(Notifications);
4. <notifications />

And it appear below error:

Describe the bug
In a project with Webpack where the Vue Options API is disabled, this library does not work. It builds, but no notifications pop up.

To Reproduce
Steps to reproduce the behavior:

1. In a project using Webpack, disable the Vue Options API: (set it to false, not true like this screenshot)
   
2. Follow the instructions in the README of this GitHub repo for using the composition API
3. Run Webpack
4. Try to show a notification

Expected behavior
A notification should show up.

Screenshots
N/a

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 108

Smartphone (please complete the following information):
N/a

Additional context
N/a

Since today, using the Component inside my Vue3 app gives me this error
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I'm using Vue3, Vite, Babel

Is it possible to add a click event?

this.$notify({
  title: "Important message",
  text: "Hello user!",
  click: () => {
      // do redirect or whatever 
  }
});

Looks like lots of recent tags have been removed. Specifically latest tag which is 2.9.0 is not in the list anymore.

Describe the bug
[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key

To Reproduce
Steps to reproduce the behavior:

1. add to vue with plugin

import Notifications from '@kyvg/vue3-notification'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Notifications)
})

2. add the notifications component to app.vue <notifications />
3. pnpm build
4. node .output/server/index.mjs
5. See error

I'm trying to get this to work with NuxtJS, but I can't figure out why it's not working.

app.vue

import Notifications from "@kyvg/vue3-notification";

<template><Notifications /></template>

composables/useNotification.ts

import { useNotification } from "@kyvg/vue3-notification";

export default useNotification;

I always end up getting this error: Component is missing template or render function. even thou I can call useNotification().notify({title: 'foo', text: 'bar'}) without erros or warnings.

Describe the bug
As stated in the documentation (https://kyvg.github.io/vue3-notification/api/#props) the 'classes' prop can receive String or Array types. But in fact Array leads to types mismatch error:

[Vue warn]: Invalid prop: type check failed for prop "classes". Expected String with value "vue-notification,n-light", got Array

To Reproduce
Set the prop 'classes' to any array of strings:
<NuxtNotifications :classes="['vue-notification', 'n-light']" />

Expected behavior
Setting prop 'classes' to array of strings should adds all the classes listed in this array.

Additional context
There is the workaround: setting a list of classes separated by spaces.
<NuxtNotifications classes="vue-notification n-light" />
But this is not an Array type.

Describe the bug
I have added the component on App.vue
<VApp> <VMain> <RouterView /> <Notifications group="success" position="bottom right" /> </VMain> </VApp>

To Reproduce

Screenshots

What I'm I doing wrong?

Describe the bug
Hello, thanks for the help. I'm looking to install vue3-notification via CDN like in the jsfiddle example below, but I am unable to see a notification.

To Reproduce
See jsfiddle example here

Is this install correct? Is this approach even supported?
Thanks for the information.

Hi, I'm looking for your advice.

First, Is it possible to markup the progressbar that is linked to the set duration as shown in the UI below?

Second, I am trying to provide notification in mobile device web as well.

When a notification is swiped with a finger on a mobile device, I want to execute the close function with an animation that the notification is swiped. Any good way?

I've read all the guides, but couldn't think of a good way.

I look forward to your comments and advice. Thank you.

Is your feature request related to a problem? Please describe.
I need to pair id of notification object when the object is created to block closeOnClick, but i dont know when the notification dissapear.
If you get the id of object when created, then you just check if is equal to id emitted by destroy event.

Describe the solution you'd like
In the chapter before.

Describe alternatives you've considered
Another alternative is implement properties closeOnClick, pauseOnHover and so on. to a single instance (not whole component)

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Yes there is no typescript support for intellisense on the component props and no help found in the README

Describe the solution you'd like
I would like to add the following instructions to the README.md file

import type { FunctionalComponent } from 'vue';
import type { NotificationsOptions } from '@kyvg/vue3-notification';
declare module 'vue' {
  export interface GlobalComponents {
    Notifications: FunctionalComponent<NotificationsOptions>;
  }
}

Describe alternatives you've considered
Being able to import the Notifications component as a named import

Additional context
This will give syntax highlighting as well as typescript intellisense

Describe the bug
vue3-notification is not working with a restrictive Content Security Policy.

Our Content Security Policy is "default-src 'self'; object-src 'none';" and at runtime we are getting errors and vue3 notifcations is not working correctly because the CSS Class vue-notification-group is missing. It seems to be trying to add it in an inline/eval fashion that our CSP does not allow.

Locally we allow unsafe-inline/unsafe-eval in our CSP so it works. In the deployed version we have the more restrictive CSP.

We're using Vite 2.9.13, Vue 3.2.37 and @kyvg/vue3-notification 2.4.1.

Are we doing something wrong in how we include / use vue3-notification that is breaking under a restrictive CSP?

Screenshots

the default animation doesn't work

I use it in vue 3, the enter is work, but when the duration came, leave animation didn't work, it will disappear in a flash, without excessive effect

Then I try to download your demo, npm install, then npm run dev, when I try to click the "CSS animation Success button", I found the same effect, it will disappear in a flash, without excessive effect.

Is it a BUG or my operation is wrong?

Would be great to have it like maybe to have useNotiification imported to be used inside setup vue component.

Describe the bug
The animation-name attribute does not work, the notifications simply appear and disappear without any animation (although there seems to be a delay when I click on it, before it goes away). If I manually add the animation-name: CSS property, the animation works for enter, but not for leave.

To Reproduce

1. Use CSS animation (default), add animation-name="examplename" attribute
2. Add some @keyframes examplename
3. Reload and trigger a notification with $notify

Expected behavior
The animation-name attribute creates the appropriate CSS property, and preferably reverse the animation on leave or provide additional configuration for a leave animation.

Screenshots
n/a

Desktop (please complete the following information):

• OS: macOS 11
• Browser: Firefox / Chrome
• Version 93 / 95

Additional context
n/a

if at the moment when the notification appeared the user is not active, then the timer should stop.
and only when the user has moved the cursor or pressed something the timer continues.

Describe the bug
Like the title says customizing the whole template doesn't work anymore. The attributes slot and slot-scope are deprecated. Please update the documentation.

Is your feature request related to a problem? Please describe.
No implementation for nuxt3

Describe the solution you'd like
I implemented my solution to use this package in nuxt3 environment. Could add a link to README.MD for people who want to use this with nuxt3.

Additional context
My contacts:
telegram

My package:
npmjs
github

Describe the bug
I am experiencing an issue when trying to import the @kyvg/vue3-notification library. The error message I am receiving is: "Failed to resolve import "@kyvg/vue3-notification" from "src\main.js". Does the file exist?" It seems to be an import error, but I have followed the documentation for importing the library.

To Reproduce
Steps to reproduce the behavior:
(Its a private Repo that i cannot share)

1. I Clone the project from te repository link.
2. Navigated to 'src\main.js' where the import statement for @kyvg/vue3-notification is located.
3. Ensured that the other developers have installed the library as per the documentation.
4. Runned the project using Vite command "npm run dev".
5. Observe the error mentioned above.

Expected behavior
I expected the library @kyvg/vue3-notification to be imported without any issues, as per the documentation.

Screenshots

Desktop (please complete the following information):

• OS: [Windows 11]
• Node.js Version: [20.4.0]
• Vite Version: [4.1.4]
• Browser [Chrome]
• Browser Version [116.0.5845.188 ]

Additional context
I recently migrated to this project and encountered this issue when trying to work with the @kyvg/vue3-notification library. I have followed the import instructions provided in the library's documentation, but I am still facing this problem. Please let me know if there is any additional information needed to resolve this issue.

Describe the bug
Notifications library not working when installed from plugin.

To Reproduce
I have a plugin used crossed multiple apps, where some common code is extracted. Along with others, I wanted to also extract Notifications library, with some custom styling. Everything worked seamless including version 2.4.1, but after that, notifications are not shown at all. If I move the notification out of the plugin and install it in my SPA, works normally.

What could be? I can provide more info if it is needed.

Describe the bug
When using the <script setup/> syntax, the this.$notify is not recognized.

To Reproduce
Steps to reproduce the behavior:

1. Installed @kyvg/vue3-notification, ^2.3.4
2. Added

import Notifications from '@kyvg/vue3-notification'
app.use(Notifications)

3. Added
   <notifications/>
4. Getting
   ReferenceError: $notify is not defined

Expected behavior
Is there a way to reference $notify, or should I import { notify } from "@kyvg/vue3-notification"; ?

Desktop/Smartphone (please complete the following information):

• OS: All
• Browser All
• Version 2.3.4

Additional context
Add any other context about the problem here.

Describe the bug
Notifications apper unstyled and don't respect position prop when using version 2.6.0. It's all good when I use 2.5.0.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Vue 3 project using npm init vue@latest (choose TypeScript support).
2. Install the latest version of the library (2.6.0)
3. Use Notifications plugin and add notifications component to the app. Set position prop to "top center", for example.
4. Call notify to see the notification appears in the top right corner unstyled (see screenshot).

Expected behavior
A styled notification to appear in the top center position.

Screenshots
This is 2.6.0:

And this is 2.5.0:

Additional context
I didn't check any another props, maybe they're not working too.

Describe the bug
I just installed the Notification module and I got this

error in ./node_modules/@kyvg/vue3-notification/dist/index.esm.js

Module parse failed: Unexpected token (334:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| pauseTimeout() {
| if (this.pauseOnHover) {

            this.timerControl?.pause();

| }
| },

@ ./src/main.js 13:0-52 28:8-21
@ multi (webpack)-dev-server/client?http://192.168.1.34:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

To Reproduce
Steps to reproduce the behavior:
npm install --save @kyvg/vue3-notification
Add dependencies to your main.js:

import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'

const app = createApp({...})
app.use(Notifications)
Add the global component to your App.vue:

Config

• vue: ^3.0.0 => 3.0.11
• @kyvg/vue3-notification: ^2.2.5 => 2.2.5

#22 is merged but an npm release is missing for it

I'm using vue3 with laravel sail and vite, after installing this package, my "sail npm run dev" command prints an error

error when starting dev server:
Error: EACCES: permission denied, unlink '/var/www/html/node_modules/.vite/deps/@inertiajs_inertia-vue3.js'
    at unlinkSync (node:fs:1780:3)
    at _unlinkSync (node:internal/fs/rimraf:214:14)
    ...

I tried to chmod that directory, but I don't even have directory "www" inside my "var" directory, so there is nothing to change.
What can I do to make it work?

My versions:

        "vite": "^4.0.0",
        "vue": "^3.2.41"
        "@kyvg/vue3-notification": "^2.7.0"

Describe the bug
When a notification fades out using CSS animation, it stays in place with opacity 0, but does not disappear.

This puts up the text selection cursor when hovering on desktop, prevents clicking behind the invisible notification and messes up the notification stacking.

To Reproduce
Steps to reproduce the behavior:

1. Run demo
2. Trigger any notification under CSS animation
3. Click on the notification or wait for it to fade out
4. Notification stays in place, albeit invisible with the problems described above

Expected behavior
Notification is expected to disappear after fading out.

Screenshots
https://i.imgur.com/C0vVIFA.png

Desktop:

• OS: Arch Linux
• Browser: Firefox 89.0, Chromium 91.0.4472.101

Additional context
Bug introduced in v2.3.2.

In addition to ignoreDuplicates, it would be nice if you could keep track of the duplication count inside the Notification component. If you know this number, you can style the notification somewhat like this:

The counter would then increase when a new notification is spawned, as long as the duration of the last occurrence hasn't passed.

The reason is in this faulty line of code, probably an auto-complete error:

I always get upset when developing a custom notification I can subscribe to the @destroy event, but there is no emit @start. Please add emit, it will help to configure notifications more flexibly or tell me how I can solve my problem? Thanks

I am writing an issue to explain my case and get advice to everyone who uses this library.

Problem

I'm writing a code that notify data in a notification using a custom template (slot).

// custom template
<notifications group="custom-notify" position="bottom right">
  <template #body="props">
      // markup notify display 'name', 'price', 'quantity' from props.item
  </template>
</notifications>

// this.$notify call
this.$notify({
  group: 'custom-notify',
  duration: 3000,
  data: {
    id: '1',
    name: 'A',
    price: 30000,
    quantity: 25,
  } // example data
})

// examples of data (occured randomly)
{
    id: '1',
    name: 'A',
    price: 30000,
    quantity: 25,
},
{
    id: '2',
    name: 'B',
    price: 2000,
    quantity: 3,
},
{
    id: '3',
    name: 'A',
    price: 29990,
    quantity: 3,
},
{
    id: '4',
    name: 'B',
    price: 2500,
    quantity: 100,
}

In this case(four example datas),

If this.$notify is called with an interval of 3 seconds or more (longer than the duration) in the order of the 4 objects above, the previous notification is cleared by the duration, so a total of 4 notifications will occur.

However, when this.$notify is called 4 times within 3 seconds, I want to initialize(reset) the duration(3 seconds) of the notification with the same name and change only the price and quantity of the notification (in the end, only 2 notifications for A and B are displayed.

I wonder if there are any ways or API option for this.

If not, may I ask for feature support?

Thank you.

Is your feature request related to a problem? Please describe.
When having two (or more) groups display at the same position (e.g. top right), the groups overlap when they are shown at the same time. This makes it hard to use different notification layouts that display at the same position

Describe the solution you'd like
Have the two groups behave like they are in the same group and just be displayed under each other

Describe alternatives you've considered
Using classes and DOM Manipulation. But that would be very dirty

Is your feature request related to a problem? Please describe.

I want to define the attributes position and width with a API call. Sadly, it will be ignored.

notify({
  title: "Important message!",
  text: "Hello user!",
  position: "top left",
  type: "error",
  width: "400", 
});

Describe the solution you'd like
If would be nice, if I could use it like the example above.

Describe alternatives you've considered
Another solution would be at least to define the parameter global like:

app.use(Notifications, { width: "400", postion: "top left" }, { velocity });

Describe the bug
When there's a notification shown and a new notification is added, the previous notification is moved one position without animation and the new one is animated in.

This happens with both the CSS and velocity-animate library.

To Reproduce
Steps to reproduce the behavior:

1. Display a notification using notify()
2. Add another one using notify()

Expected behavior
As shown in the GIF in the README, both animations should move to their new position with the configured animation.

Screenshots
A short clip:
https://github.com/kyvg/vue3-notification/assets/711940/6f958eec-05fd-473f-a3a9-bc5cdb71105d

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox Developer Edition
• Version: 124

Additional context
"@kyvg/vue3-notification": "^3.1.4"

Hello,

duration doesn't work when using velocity !

<notifications position="top center" width="90%" animation-type="velocity" :duration="1000" />

Please help, when I make a Vite build and send it to prod, it does not work

Describe the bug
hi, the tag property of the transition-group component is set to span wich creates invalid html

To Reproduce
Steps to reproduce the behavior:

1. open https://kyvg.github.io/vue3-notification/
2. click on any button to test a notification
3. open the developer tools
4. every notification has as parent element a span element

Expected behavior
valid html / transition-group tag should probably set to div

In local, the notification works well with custom css .my-notification and type success will reproduce class my-notification success
but in production, the notification reproduces the wrong class my-notificationsuccess which leads to failure to render the style.

All is well just the style is issue. Has anyone ever experienced this and have resolved it?

Local

<div class="vue-notification-group" style="width: 500px; top: 0px; right: 0px;">
     <span>
         <div class="vue-notification-wrapper" style="transition: all 300ms ease 0s;" data-id="3">
             <div class="my-notification success flex pl-3 pr-4 py-2 gap-x-3">
                 <div class="flex items-center justify-center">
                     <!-- Icon here -->
                 </div>
                 <div class="flex flex-col justify-center">
                     <p class="text-sm truncate mb-0 max-w-full">Text successfully copied to clipboard.</p>
                 </div>
             </div>
         </div>
     </span>
 </div>

Production

<div class="vue-notification-group" style="width: 500px; top: 0px; right: 0px;">
     <name>
         <div class="vue-notification-wrapper" style="transition: all 300ms ease 0s;" data-id="26">
             <div class="my-notificationsuccess flex pl-3 pr-4 py-2 gap-x-3">
                 <div class="flex items-center justify-center">
                     <!-- Icon here -->
                 </div>
                 <div class="flex flex-col justify-center"><!---->
                     <p class="text-sm truncate mb-0 max-w-full">Text successfully copied to clipboard.</p>
                 </div>
             </div>
         </div>
     </name>
 </div>

I need to do some actions after clicking on notice, but I don't know hod to do this.

It would be greate if I could use something like this

this.$notify(message).bind(this);

Describe the bug
closeOnClick : false is not working in vue3

To Reproduce
Steps to reproduce the behavior:

1. change the default value of closeOnClick: false

      notify({
           title: "Tenant Onboarding started 🎉",
           text: `Workflow_id = ${result.data["workflow_id"]} <br />
                  Onboarding update will be sent to your mail id`,
           group: "onboard",
           duration: -1,
           closeOnClick: false,
         });
   

2. still in the notification will disappear on click

Expected behavior
notification should expire after a given time not the click

Screenshots

Desktop (please complete the following information):

• OS: Macos
• Browser: chrome
• chrom Version 96.0.4664.110

Additional context
Add any other context about the problem here.

Ive tried adding a duration of 0 and -1 to both $notify and as a prop to notifications but so far i cant remove the timeout behaviour