From 2975b95fe03d39d9295203169032d42f2f8cc6ab Mon Sep 17 00:00:00 2001 From: smastrom <60471784+smastrom@users.noreply.github.com> Date: Mon, 3 Jul 2023 16:25:53 +0200 Subject: [PATCH] bump 1.0.2 --- package.json | 2 +- .../Notivue/__tests__/SlotGlobalOptions.cy.ts | 2 +- packages/notivue/README.md | 169 ++++++++++++++++++ packages/notivue/core/createStore.ts | 1 + .../cypress/support/commands-notivue.ts | 2 +- packages/notivue/cypress/support/utils.ts | 10 +- packages/notivue/package.json | 5 +- 7 files changed, 181 insertions(+), 10 deletions(-) create mode 100644 packages/notivue/README.md diff --git a/package.json b/package.json index d2c5b450..b5043b91 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0", + "version": "1.0.2", "private": true, "packageManager": "pnpm@8.6.3", "engines": { diff --git a/packages/notivue/Notivue/__tests__/SlotGlobalOptions.cy.ts b/packages/notivue/Notivue/__tests__/SlotGlobalOptions.cy.ts index 907356da..f3899ff0 100644 --- a/packages/notivue/Notivue/__tests__/SlotGlobalOptions.cy.ts +++ b/packages/notivue/Notivue/__tests__/SlotGlobalOptions.cy.ts @@ -22,7 +22,7 @@ describe('Global options have higher priority over defaults', () => { 'promise-resolve': newDefaultOptions, 'promise-reject': newDefaultOptions, }, - }, + } as any, } describe('First-level notifications', () => { diff --git a/packages/notivue/README.md b/packages/notivue/README.md new file mode 100644 index 00000000..92c6d430 --- /dev/null +++ b/packages/notivue/README.md @@ -0,0 +1,169 @@ +
+ +# Notivue + +### Fully-featured notification system for Vue and Nuxt. + +[Live Demo](https://notivue.netlify.app) - [Documentation](https://notivuedocs.netlify.app) + +**Examples** + +[Custom Components](https://stackblitz.com/edit/vitejs-vite-9jkh73?file=src%2Fcomponents%2FPage.vue) - +[Vue Router](https://stackblitz.com/edit/vitejs-vite-kdrtrw?file=src/components/Example.vue) - [Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue) - [Pinia](https://stackblitz.com/edit/vitejs-vite-knysks?file=src%2FApp.vue) - [TanStack Query](https://stackblitz.com/edit/vitejs-vite-ymjktx?file=src%2FApp.vue) + +
+ +
+ +## Features + +**🧬 JS and CSS modular** +_Granularly include only the features you need_ + +**🧚‍♂️ Zero deps and lightweight** +_From ~4 KB (gzipped)_ + +**🎢 Slick transitions and animations** +_Customize any animation_ + +**🧩 Custom Components API** +_Use your own components while Notivue handles the rest_ + +**🌀 Promise API** +_Update pending notifications with ease_ + +**🔰 Includes a ready-made component with anything you need** +_Themes, icons, animations, rtl support and much more_ + +**♿️ Fully accessible** +_Built-in screen reader support_ + +
+ +## Installation + +```bash +pnpm add notivue +``` + +
+ +## Vite / Vue CLI + +### 1. Configure + +**main.js/ts** + +```js +import { createApp } from 'vue' +import { notivue } from 'notivue' + +import App from './App.vue' + +import 'notivue/notifications.css' // Only needed if using built-in notifications +import 'notivue/animations.css' // Only needed if using built-in animations + +const app = createApp(App) + +app.use(notivue) +app.mount('#app') +``` + +**App.vue** + +```vue + + + +``` + +### 2. Push notifications from any component + +```vue + + + +``` + +
+ +## Nuxt 3 + +### 1. Configure + +**plugins/notivue.client.ts** (create _/plugins_ folder if it doesn't exist) + +```ts +import { notivue } from 'notivue' + +export default defineNuxtPlugin(({ vueApp }) => { + vueApp.use(notivue) +}) +``` + +**nuxt.config.ts** + +```ts +export default defineNuxtConfig({ + css: ['notivue/notifications.css', 'notivue/animations.css'] +}) +``` + +**App.vue** (wrap `` in a [ClientOnly](https://nuxt.com/docs/api/components/client-only) component) + +```vue + + + +``` + +### 2. Push notifications from any component + +```vue + + + +``` + +
+ +## Thanks + +- [Ionic Team](https://ionic.io/) for the icon sets +- [Uktash Verna](https://github.com/n3r4zzurr0) for the SVG spinner + +
+ +## License + +MIT Licensed - Simone Mastromattei © 2023 diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts index a9277563..7449dafa 100644 --- a/packages/notivue/core/createStore.ts +++ b/packages/notivue/core/createStore.ts @@ -156,6 +156,7 @@ export function createStore(userConfig: NotivueConfig) { ...notification, createdAt, resumedAt, + animationClass: '', timeoutId: shouldSkipTimeout ? undefined : this.playLeaveTimeout(notification.id, notification.duration), diff --git a/packages/notivue/cypress/support/commands-notivue.ts b/packages/notivue/cypress/support/commands-notivue.ts index 192b9100..683da4cd 100644 --- a/packages/notivue/cypress/support/commands-notivue.ts +++ b/packages/notivue/cypress/support/commands-notivue.ts @@ -76,7 +76,7 @@ Cypress.Commands.add('clickAllStatic', () => { Cypress.Commands.add('clickRandomStatic', () => { const randomSelector = ['.Success', '.Error', '.Info', '.Warning'][Math.floor(Math.random() * 4)] - cy.get(randomSelector).click() + return cy.get(randomSelector).click() }) Cypress.Commands.add('clickAll', () => { diff --git a/packages/notivue/cypress/support/utils.ts b/packages/notivue/cypress/support/utils.ts index 9b328c3b..25417061 100644 --- a/packages/notivue/cypress/support/utils.ts +++ b/packages/notivue/cypress/support/utils.ts @@ -6,12 +6,12 @@ export const RESOLVE_REJECT_DELAY = 1000 export function getRandomOptions() { return { - title: Math.random().toString(), - message: Math.random().toString(), + title: window.crypto.randomUUID(), + message: window.crypto.randomUUID(), duration: Math.floor(Math.random() * 10000), - ariaLive: Math.random().toString() as any, - ariaRole: Math.random().toString() as any, - closeAriaLabel: Math.random().toString(), + ariaLive: window.crypto.randomUUID(), + ariaRole: window.crypto.randomUUID(), + closeAriaLabel: window.crypto.randomUUID(), } } diff --git a/packages/notivue/package.json b/packages/notivue/package.json index cd014135..3296c4e2 100644 --- a/packages/notivue/package.json +++ b/packages/notivue/package.json @@ -1,8 +1,8 @@ { "name": "notivue", - "version": "1.0.0", + "version": "1.0.2", "private": false, - "description": "Fully-featured notification system for Vue and Nuxt.", + "description": "Fully-featured toast notification system for Vue and Nuxt.", "keywords": [ "vue", "vuejs", @@ -44,6 +44,7 @@ "scripts": { "dev": "pnpm --C \"../../demo\" run dev", "preinstall": "npx only-allow pnpm", + "prebuild": "cp ../../README.md .", "build": "rimraf dist && vue-tsc && vite build && pnpm run build:css", "build:css": "esbuild ./Notifications/notifications.css ./core/animations.css --bundle --outdir=dist --minify --target=chrome58,edge16,firefox57,node12,safari11 --log-level=error", "test": "pnpm run test:chrome && pnpm run test:firefox",