v1.2.2

This release brings various bug fixes introduced in the yesterday's minor release (1.2.0) and a refactor of the configuration types.

What's fixed

• Core - Refactored the configuration types, which were causing a Vue bug where NotivueConfig type couldn't be imported in an SFC because of a complex generic that vue-sfc-compiler couldn't process. Issue
• NotivueSwipe - Force touch-action: none on any child of the notification.
• NotivueKeyboard - Fixed useLastFocused composable, which was returning a wrong element.

What's improved

• NotivueSwipe - Functionalities are now automatically disabled if the item has its duration set to Infinity.
• NotivueKeyboard - Improved queue support.

v1.2.0

Welcome to the next minor release of Notivue, which brings many new key features and various fixes and improvements.

What's new

Notivue Core

• Added support for enqueuing notifications using the enqueue config option. By defining a limit and enqueue: true, notifications will be queued once the limit is reached and displayed one-by-one as soon as a previous notification is dismissed. Guide and concepts.
• Added skipQueue push option to skip the queue and display the notification immediately.
• Added ariaLiveOnly to push options. This allows to push a notification without displaying it, but only making it available to screen readers.

Drop-In Components

Notivue now ships with two new drop-in components: NotivueKeyboard and NotivueSwipe.

• NotivueKeyboard enables proper keyboard navigation with great screen-reader support on custom notifications with more than 1 focusable element. It is meant to be used with custom components. Guide and concepts.

• NotivueSwipe allows you to dismiss notifications by swiping them away. I decided to write from scratch an ad-hoc, zero-config solution for Notivue, instead of suggesting a third-party library. It works with both built-in and custom components and perfectly integrates with the rest of the features, including NotivueKeyboard. If you were using NeoDrag, check how to configure NotivueSwipe instead.

As any other feature of this package, they're completely optional, so if you don't import them, they won't be included in your bundle.

Composables

Notivue now exports a useNotifications composable, which allows you to access a read-only reactive array of all displayed and queued notifications. It can be used to create side effects.

---

What's changed - ⚠️ Important

Starting from this release, Notivue doesn't render anymore the aria-live region for custom components by giving you full control on announcements.

If you were using Custom Components, to replicate the same behavior as the previous versions, simply pass the attributes to the node that wraps your message:

<template>
  <div class="MyCustomNotification">
    <p :role="item.ariaRole" :aria-live="item.ariaLive">
      {{ item.message }}
    </p>
  </div>

  <!-- ... -->
</template>

Or if using both title and message:

<template>
  <div class="MyCustomNotification">
    <div :role="item.ariaRole" :aria-live="item.ariaLive">
      <h3>{{ item.title }}</h3>
      <p>
        {{ item.message }}
      </p>
    </div>
  </div>

  <!-- ... -->
</template>

---

What's improved

Notivue Core

• Timeout handling logic has been rewritten from scratch, considering all of the above new features and interactions.
• Minification step is now performed by esbuild instead of terser (using Vite defaults). This increases by very little the whole bundle size, but improves my DX a lot.

Built-in Notifications

• Disabled keyboard navigation and removed focus styles on the dismiss button. More info here.
• Slightly darkened darkTheme colors.

Documentation

Added API Reference section to documentation website.

---

What's fixed

• Fixed a bug where passing an empty string as animation name would throw an error.
• Fixed a bug where calling item.clear method on the last notification would not resume leave timeouts.

v1.1.3

Release notes

Fixed a bug where enter/leave/clearAll animations were played if setting prefers-reduced-motion to reduce from System Settings after mount.

v1.1.0

Release notes

This is the first minor release of Notivue v1, which brings many improvements and a couple of new features.

What's new

Notivue Core

• Notifications are now paused and resumed when focusing with the keyboard any button in the notification. This is done automatically whether you're using built-in notifications or custom components.
• Types are now generated using vite-plugin-dts rollupTypes flag. Notivue now ships with a single declaration file instead of relying on multiple files (and imports).

What's improved

Notivue Core

• pauseOnTouch logic has been streamlined and updated. When tapping on a notification, the stream is paused for 2 seconds, then timeouts are resumed. Timeouts can be paused again only after they are resumed, ensuring an overall better UX and support for swipe gestures.
• The above-mentioned improvement adds support for clear on swipe gesture using NeoDrag. This feature is not included in the package and must be installed manually. A guide has been published to the documentation website.

Built-in Notifications

• lightTheme foreground color and shadow have been updated. Shadow is now less invasive, and the foreground color has been updated from a slate to a neutral black.
• Icons overflow has been set to visible to avoid some pixels cut-off in some edge cases on low resolution devices.
• Container width has been reduced from 360px to 350px.

v1.0.5

Release notes

This release fixes an import bug happening in some environments where types exported via wildcard in the package entry point could not be resolved.

Update using:

pnpm add notivue@latest

v1.0.4

Release notes

• Update plugin's type. It now gives autocompletion and Intellisense which was not retained before due to previous interface imported from vue.
• Added Intellisense comments to plugin config type properties.
• Increased default timeout increment from 800 to 1200ms. This is summed to the remaining time every time timeouts are resumed due to hover out or tab re-focus.
• Removed class property from notivue's config object which was already not supported and unused since v1.
• Removed blur filter from leave animation which caused lags on Chrome on Android.
• Removed an optical CSS correction applied to Notification's title and message elements.
• Added CSS font-size: var(--nv-message-size) rule for Notification's close button. Useful if emojis or strings are used in place of SVG icons.
• Forced Notification's icons height to match --nv-icon-width which caused some inconsistencies on Safari.

v1.0.3

Release notes

• Remove closeAriaLabel from config notification options as it would be useless for users using Custom Components. It is now available as prop instead.
• Added will-change: filter to entrance animations to fix a lag happening on the first 2-3 pushed notifications on WebKit-based browsers.
• Improved clearAll store action. If the correspondent animation class is not defined, it destroys the container.

v1.0.2

Release notes

• Fixed a bug with custom entrance animations
• Add optical correction to Notifications title/message margin-top
• Add some more tests case to Notivue's aria-live region
• Add randomization to Notivue's slot tests

v1.0.0

This version is a full rewrite of Notivue.

Take a look at the new documentation: https://notivue.netlify.app/

Install it now:

pnpm add notivue@latest

v0.9.4

What's fixed

• Bug that displayed an "injection key not found" warning in the console when calling usePush on the server with SSR frameworks.

What's improved

• usePush() now returns a no-op push function when called server-side. If used outside a component, it will still throw errors.
• Nuxt 3 installation guide in both README and documentation website.