petervdn / notivuecation Goto Github PK

I suggest you add types to use it with typescript easily.

See the message below about it.

8<--------------------------------------------------------------------------------

PS C:\Users\marceladmin\Documents\GitHub\replayer-pwa> npm i --save-dev @types/notivuecation
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fnotivuecation - Not found
npm ERR! 404
npm ERR! 404 '@types/notivuecation@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\marceladmin\AppData\Local\npm-cache_logs\2022-03-02T16_17_25_430Z-debug-0.log

so should be closed by code

And allow them to be changed

I installed plugin.
In nuxt.config.js added to plugins array
plugins: ["~/plugins/vee-validate.js", "~/plugins/notevuecation.js"],
In file notivuecation.js wrote:

import notivuecation from "notivuecation";

Vue.use(notivuecation);

And the browser go in to infinite loop.

"These two methods to show either a notification with Ok/Cancel buttons or just a single Ok-button"

Hi,

Currently, when the modal is opened it does not receive focus. This make is somewhat inaccessible for keyboard users.

It would be possible to make the first button receive focus like so:

In src/lib/Notification.vue:

<button
+  ref="notivuecationButton"
   v-for="button in buttons"
   :class="button.css"
   @click="resolve(button.value)"
>{{button.label}}</button>

In src/lib/componentMixin.js

onShowNotification(notification) {
  this.notifications.push(notification);
+ this.$nextTick(() => this.$refs.notivuecationButton[0].focus());
},

But this creates a new problem, that when the modal is shut, focus is returned to the top of the page and not wherever the user was previously.

This could be solved like so:

In src/lib/componentMixin.js

data() {
  return {
+   activeElement: null,
    notifications: [],
  };
},
methods: {
  onShowNotification(notification) {
    this.notifications.push(notification);
+   this.activeElement = document.activeElement;
+   this.$nextTick(() => this.$refs.notivuecationButton[0].focus());
  },
  onHideNotification(notification) {
    const index = this.notifications.indexOf(notification);
    if (index > -1) {
      this.notifications.splice(index, 1);
    }
+   if (this.activeElement) this.activeElement.focus();
  },

But now the plugin is reaching into the DOM, which feels a bit messy.

My question(s): would you be interested in adding this functionality to your plugin?
If so, and presuming the above is an acceptable way of approaching things, I'd be happy to send a PR.
Otherwise, do you have any thoughts on a better way to handle this?

some usecases:

• have inputfields in the popup (like prompt method)
• popup without buttons, for example with a loading progressbar

For handling the case of activating a notification when there's already one in view

Right now, any custom logic for a custom component will not be triggered (only the resolve function is called).