From 562bca07a26fa339e6ff75770c0185bb194f7f44 Mon Sep 17 00:00:00 2001 From: Simone Mastromattei Date: Tue, 15 Aug 2023 13:52:34 +0200 Subject: [PATCH] 1.2.0 (#16) * begin enqueue logic * queue feature complete * rename some store methods, move them to different store slices * rename some internal property keys * remove fixed increment constant, refactor timeout handling * update demo, tests * add NotivueSwipe * remove neodrag, emoji examples, edit demo * move queue inside items store * finalized queue, add config side effects, rename some methods * finalize NotivueSwipe.vue * delete useFocusEvents, begin useKeyboardNavigation * finalize NotivueSwipe * add NotivueKeyboard * refactor useMouseEvents, useTouchEvents and useVisibilityChange to interop with NotivueSwipe and NotivueKeyboard * disable tabbing on built-in notifications and add new props to Notivue * rename some NotivueSwipe and NotivueKeboard functions and props * add skipQueue and ariaLiveOnly to push options * rename data-notivue-top to data-notivue-align * add containersTabIndex to NotivueKeyboard slot props * remove built-in aria-live node * add clearProxy * update accessibility tests * externalize props, edit demo * migrate demo to nuxt, add proper watch scripts * add ariaLiveOnly push option and listAriaLabel Notivue prop * demo migration to nuxt complete * drop support for cjs output * add renderMessage prop to NotivueKeyboard * move notivue tests to project root * cleanup notivue config, add optional prop to NotivueKeyboard * add tooltip to queue demo * moved any test to root tests folder * add different mount commands per test category, rename some test utils * add NotivueSwipe tests * add push-specific options tests * add config-enqueue tests * edit included notifications accessibility test * finalize Notivue / NotivueSwipe tests, remove aria-atomic=true from AriaLive * drop terser support, remove some useless methods and styles * add missing cy.wait to slot tests, remove unnecessary NotivueSwipe style test * try to update node ver in github actions * edit workflow to skip bugged hanging test on ci * rename some core types and add prev versions type aliases * rework NotivueKeyboard * rename NotivueSlot type to NotivueItem * cleanup and update deps * edit dark theme * edit demo * edit vite.config.ts, add composables type export * edit NotivueKeyboard comments, fix NotivueSwipe missing fn call * improve cy.mount commands, add notivue-keyboard commands * add NotivueKeyboard tests * revert deps, edit readme, release 1.2.0 * add verify-tarball postbuild script * edit build demo script * migrate demo to cloudflare pages --- .github/workflows/tests.yml | 12 +- README.md | 23 +- demo/.gitignore | 10 + demo/.npmrc | 2 + demo/app.vue | 85 + demo/assets/style.css | 35 +- demo/components/App.vue | 95 - demo/components/app/NavComponentControls.vue | 143 - .../CustomPromise.vue | 21 +- .../CustomStatic.vue | 51 +- demo/components/{app => nav}/Nav.vue | 25 +- .../nav/NavNotificationsCustomization.vue | 63 + .../NavNotificationsThemes.vue} | 15 +- demo/components/nav/NavNotivueConfig.vue | 218 + .../NavNotivuePosition.vue} | 23 +- .../components/{app => nav}/NavPushCustom.vue | 29 +- .../components/{app => nav}/NavPushStatic.vue | 7 +- .../components/{app => shared}/Background.vue | 1 + demo/components/shared/Button.vue | 4 +- demo/index.html | 14 - demo/index.ts | 11 - demo/lib/store.ts | 106 - demo/lib/useDragOptions.ts | 54 - demo/lib/utils.ts | 7 - demo/nuxt.config.ts | 22 + demo/package.json | 25 +- demo/plugins/notivue.client.ts | 5 + demo/plugins/store.client.ts | 3 + demo/public/icon.svg | 34 + demo/public/og-image.jpg | Bin 0 -> 37720 bytes demo/public/vue.svg | 1 - demo/server/tsconfig.json | 3 + demo/tsconfig.json | 25 +- demo/utils/head.ts | 62 + demo/utils/misc.ts | 13 + demo/utils/store.ts | 109 + demo/vite-env.d.ts | 1 - demo/vite.config.ts | 29 - package.json | 25 +- packages/notivue/.gitignore | 1 + .../notivue/Notifications/Notifications.vue | 12 +- .../Notifications/__tests__/accessibility.ts | 24 - .../__tests__/components/Notivue.vue | 28 - .../notivue/Notifications/notifications.css | 11 - packages/notivue/Notifications/themes.ts | 4 +- packages/notivue/Notivue/AriaLive.vue | 33 + packages/notivue/Notivue/Notivue.vue | 88 +- .../Notivue/__tests__/Accessibility.cy.ts | 76 - .../Notivue/__tests__/Attributes.cy.ts | 23 - .../Notivue/__tests__/config-limit.cy.ts | 27 - .../Notivue/__tests__/pause-on-focus.cy.ts | 30 - .../Notivue/composables/useFocusEvents.ts | 39 - .../Notivue/composables/useMouseEvents.ts | 2 +- .../Notivue/composables/useNotivueStyles.ts | 10 - .../Notivue/composables/useRepositioning.ts | 2 +- .../Notivue/composables/useTouchEvents.ts | 30 +- .../composables/useVisibilityChange.ts | 24 +- packages/notivue/Notivue/utils.ts | 14 +- .../NotivueKeyboard/NotivueKeyboard.vue | 363 + packages/notivue/NotivueKeyboard/constants.ts | 7 + packages/notivue/NotivueKeyboard/types.ts | 53 + .../notivue/NotivueKeyboard/useKeyboard.ts | 24 + .../notivue/NotivueKeyboard/useLastFocused.ts | 49 + .../NotivueKeyboard/useNotivueKeyboard.ts | 17 + .../notivue/NotivueSwipe/NotivueSwipe.vue | 315 + packages/notivue/NotivueSwipe/types.ts | 28 + packages/notivue/README.md | 206 - packages/notivue/core/animations.css | 4 +- packages/notivue/core/config.ts | 1 + packages/notivue/core/constants.ts | 2 - packages/notivue/core/createPush.ts | 30 +- packages/notivue/core/createStore.ts | 418 +- packages/notivue/core/notivue.ts | 10 +- packages/notivue/core/options.ts | 10 +- packages/notivue/core/useStore.ts | 58 +- packages/notivue/cypress.config.ts | 21 - .../cypress/support/commands-notifications.ts | 37 - packages/notivue/cypress/support/component.ts | 10 - packages/notivue/index.ts | 15 +- packages/notivue/package.json | 41 +- packages/notivue/scripts/verify-tarball.sh | 34 + packages/notivue/tsconfig.json | 4 +- packages/notivue/types.ts | 76 +- packages/notivue/vite.config.ts | 37 +- pnpm-lock.yaml | 10908 +++++++++++++--- pnpm-workspace.yaml | 2 + tests/.gitignore | 20 + tests/Notifications/accessibility.cy.ts | 20 + .../Notifications/close-button.cy.ts | 6 +- tests/Notifications/components/Notivue.vue | 30 + .../Notifications/elements.cy.ts | 47 +- .../Notifications/themes.cy.ts | 8 +- tests/Notivue/accessibility.cy.ts | 36 + tests/Notivue/attributes.cy.ts | 27 + .../Notivue}/components/Notivue.vue | 51 +- .../Notivue}/config-animations.cy.ts | 6 +- tests/Notivue/config-enqueue.cy.ts | 72 + tests/Notivue/config-limit.cy.ts | 31 + .../Notivue}/config-pause-on-hover.cy.ts | 12 +- .../Notivue}/config-pause-on-touch.cy.ts | 14 +- .../Notivue}/config-teleport.cy.ts | 6 +- .../Notivue}/prefers-reduced-motion.cy.ts | 8 +- .../Notivue/push-methods.cy.ts | 16 +- tests/Notivue/push-specific-options.cy.ts | 30 + .../Notivue}/slot-callbacks.cy.ts | 6 +- .../Notivue}/slot-custom-push-options.cy.ts | 54 +- .../Notivue}/slot-custom-push-props.cy.ts | 48 +- .../Notivue}/slot-default-options.cy.ts | 23 +- .../Notivue}/slot-global-options.cy.ts | 61 +- .../Notivue}/slot-internal-properties.cy.ts | 10 +- .../Notivue}/transitions-coordinates.cy.ts | 6 +- .../Notivue}/transitions-properties.cy.ts | 4 +- tests/NotivueKeyboard/actions.cy.ts | 76 + .../NotivueKeyboard/components/Candidate.vue | 57 + tests/NotivueKeyboard/components/Notivue.vue | 86 + .../components/Unqualified.vue | 34 + tests/NotivueKeyboard/entering-stream.cy.ts | 98 + tests/NotivueKeyboard/leaving-stream.cy.ts | 78 + tests/NotivueKeyboard/props.cy.ts | 71 + tests/NotivueSwipe/clear.cy.ts | 85 + tests/NotivueSwipe/components/Notivue.vue | 66 + tests/NotivueSwipe/props.cy.ts | 43 + tests/NotivueSwipe/styles.cy.ts | 37 + tests/NotivueSwipe/timeouts.cy.ts | 51 + tests/cypress.config.ts | 38 + tests/cypress/support/commands-keyboard.ts | 37 + .../cypress/support/commands-notifications.ts | 45 + .../cypress/support/commands-notivue.ts | 39 +- tests/cypress/support/commands-swipe.ts | 26 + .../cypress/support/component-index.html | 0 tests/cypress/support/component.ts | 14 + .../cypress/support/styles.css | 0 .../cypress/support/utils.ts | 32 +- tests/package.json | 25 + tests/tsconfig.json | 26 + 135 files changed, 12811 insertions(+), 3574 deletions(-) create mode 100644 demo/.gitignore create mode 100644 demo/.npmrc create mode 100644 demo/app.vue delete mode 100644 demo/components/App.vue delete mode 100644 demo/components/app/NavComponentControls.vue rename demo/components/{custom-components => custom-notifications}/CustomPromise.vue (86%) rename demo/components/{custom-components => custom-notifications}/CustomStatic.vue (68%) rename demo/components/{app => nav}/Nav.vue (76%) create mode 100644 demo/components/nav/NavNotificationsCustomization.vue rename demo/components/{app/NavThemesControls.vue => nav/NavNotificationsThemes.vue} (75%) create mode 100644 demo/components/nav/NavNotivueConfig.vue rename demo/components/{app/NavPositionControls.vue => nav/NavNotivuePosition.vue} (84%) rename demo/components/{app => nav}/NavPushCustom.vue (72%) rename demo/components/{app => nav}/NavPushStatic.vue (93%) rename demo/components/{app => shared}/Background.vue (99%) delete mode 100644 demo/index.html delete mode 100644 demo/index.ts delete mode 100644 demo/lib/store.ts delete mode 100644 demo/lib/useDragOptions.ts delete mode 100644 demo/lib/utils.ts create mode 100644 demo/nuxt.config.ts create mode 100644 demo/plugins/notivue.client.ts create mode 100644 demo/plugins/store.client.ts create mode 100644 demo/public/icon.svg create mode 100644 demo/public/og-image.jpg delete mode 100644 demo/public/vue.svg create mode 100644 demo/server/tsconfig.json create mode 100644 demo/utils/head.ts create mode 100644 demo/utils/misc.ts create mode 100644 demo/utils/store.ts delete mode 100644 demo/vite-env.d.ts delete mode 100644 demo/vite.config.ts create mode 100644 packages/notivue/.gitignore delete mode 100644 packages/notivue/Notifications/__tests__/accessibility.ts delete mode 100644 packages/notivue/Notifications/__tests__/components/Notivue.vue create mode 100644 packages/notivue/Notivue/AriaLive.vue delete mode 100644 packages/notivue/Notivue/__tests__/Accessibility.cy.ts delete mode 100644 packages/notivue/Notivue/__tests__/Attributes.cy.ts delete mode 100644 packages/notivue/Notivue/__tests__/config-limit.cy.ts delete mode 100644 packages/notivue/Notivue/__tests__/pause-on-focus.cy.ts delete mode 100644 packages/notivue/Notivue/composables/useFocusEvents.ts create mode 100644 packages/notivue/NotivueKeyboard/NotivueKeyboard.vue create mode 100644 packages/notivue/NotivueKeyboard/constants.ts create mode 100644 packages/notivue/NotivueKeyboard/types.ts create mode 100644 packages/notivue/NotivueKeyboard/useKeyboard.ts create mode 100644 packages/notivue/NotivueKeyboard/useLastFocused.ts create mode 100644 packages/notivue/NotivueKeyboard/useNotivueKeyboard.ts create mode 100644 packages/notivue/NotivueSwipe/NotivueSwipe.vue create mode 100644 packages/notivue/NotivueSwipe/types.ts delete mode 100644 packages/notivue/README.md delete mode 100644 packages/notivue/cypress.config.ts delete mode 100644 packages/notivue/cypress/support/commands-notifications.ts delete mode 100644 packages/notivue/cypress/support/component.ts create mode 100755 packages/notivue/scripts/verify-tarball.sh create mode 100644 tests/.gitignore create mode 100644 tests/Notifications/accessibility.cy.ts rename packages/notivue/Notifications/__tests__/close-button.ts => tests/Notifications/close-button.cy.ts (64%) create mode 100644 tests/Notifications/components/Notivue.vue rename packages/notivue/Notifications/__tests__/elements.ts => tests/Notifications/elements.cy.ts (66%) rename packages/notivue/Notifications/__tests__/themes.ts => tests/Notifications/themes.cy.ts (75%) create mode 100644 tests/Notivue/accessibility.cy.ts create mode 100644 tests/Notivue/attributes.cy.ts rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/components/Notivue.vue (75%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/config-animations.cy.ts (84%) create mode 100644 tests/Notivue/config-enqueue.cy.ts create mode 100644 tests/Notivue/config-limit.cy.ts rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/config-pause-on-hover.cy.ts (81%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/config-pause-on-touch.cy.ts (75%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/config-teleport.cy.ts (89%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/prefers-reduced-motion.cy.ts (88%) rename packages/notivue/Notivue/__tests__/Push.cy.ts => tests/Notivue/push-methods.cy.ts (86%) create mode 100644 tests/Notivue/push-specific-options.cy.ts rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-callbacks.cy.ts (80%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-custom-push-options.cy.ts (73%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-custom-push-props.cy.ts (59%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-default-options.cy.ts (77%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-global-options.cy.ts (67%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/slot-internal-properties.cy.ts (78%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/transitions-coordinates.cy.ts (85%) rename {packages/notivue/Notivue/__tests__ => tests/Notivue}/transitions-properties.cy.ts (89%) create mode 100644 tests/NotivueKeyboard/actions.cy.ts create mode 100644 tests/NotivueKeyboard/components/Candidate.vue create mode 100644 tests/NotivueKeyboard/components/Notivue.vue create mode 100644 tests/NotivueKeyboard/components/Unqualified.vue create mode 100644 tests/NotivueKeyboard/entering-stream.cy.ts create mode 100644 tests/NotivueKeyboard/leaving-stream.cy.ts create mode 100644 tests/NotivueKeyboard/props.cy.ts create mode 100644 tests/NotivueSwipe/clear.cy.ts create mode 100644 tests/NotivueSwipe/components/Notivue.vue create mode 100644 tests/NotivueSwipe/props.cy.ts create mode 100644 tests/NotivueSwipe/styles.cy.ts create mode 100644 tests/NotivueSwipe/timeouts.cy.ts create mode 100644 tests/cypress.config.ts create mode 100644 tests/cypress/support/commands-keyboard.ts create mode 100644 tests/cypress/support/commands-notifications.ts rename {packages/notivue => tests}/cypress/support/commands-notivue.ts (78%) create mode 100644 tests/cypress/support/commands-swipe.ts rename {packages/notivue => tests}/cypress/support/component-index.html (100%) create mode 100644 tests/cypress/support/component.ts rename {packages/notivue => tests}/cypress/support/styles.css (100%) rename {packages/notivue => tests}/cypress/support/utils.ts (64%) create mode 100644 tests/package.json create mode 100644 tests/tsconfig.json diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index f6ae85e9..7de2da6b 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -9,7 +9,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '18' + node-version: '20' - uses: pnpm/action-setup@v2 name: Install pnpm id: pnpm-install @@ -18,10 +18,14 @@ jobs: run_install: false - name: Install dependencies run: pnpm install - - name: Chrome tests + - name: Build Notivue + run: pnpm build + - name: Cypress run uses: cypress-io/github-action@v5 + timeout-minutes: 10 with: - working-directory: packages/notivue - install: false + env: CYPRESS_SKIP_BUGGED_CI_TEST=true component: true + install: true + project: ./tests browser: chrome diff --git a/README.md b/README.md index 856bdfe8..4f3fd795 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,14 @@
+![notivue](https://i.ibb.co/CJCG2Hq/readme-header.png) + +
+ # Notivue ### Fully-featured notification system for Vue and Nuxt. -[Live Demo](https://notivue.netlify.app) - [Documentation](https://notivuedocs.netlify.app) +[Live Demo](https://notivue.pages.dev) - [Documentation](https://notivuedocs.netlify.app) **Examples** @@ -23,8 +27,11 @@ _Granularly include only the features you need_ **🧚‍♂️ Zero deps and lightweight** _From ~4 KB (gzipped)_ +**💊 Drop-in components to enhance notifications** +_NotivueSwipe, NotivueKeyboard, all optional and customizable_ + **🎢 Slick transitions and animations** -_Customize any animation_ +_Customize any animation with CSS_ **🧩 Custom Components API** _Use your own components while Notivue handles the rest_ @@ -36,7 +43,7 @@ _Update pending notifications with ease_ _Themes, icons, rtl support and much more_ **♿️ Fully accessible** -_Built-in screen reader and reduced motion support_ +_Built-in screen reader, reduced motion, and keyboard support_
@@ -90,10 +97,16 @@ import { Notivue, Notifications } from 'notivue' Or roll your own: ```vue + +