update pauseOnTouch, tests, demo

README.md

@@ -4,8 +4,6 @@
 
 ### Fully-featured notification system for Vue 3.
 
----
-
 [Live Demo](https://notivue.netlify.app) - [Documentation](https://notivuedocs.netlify.app) - [StackBlitz](https://stackblitz.com/edit/vitejs-vite-kdrtrw?file=src/components/Example.vue)
 
 </div>

demo/App.vue

@@ -15,25 +15,26 @@ import { store } from './store'
 import Nav from './components/Nav.vue'
 import Logo from './components/Background.vue'
 import CustomIcon from './icons/CustomIcon.vue'
-import { NotivueIcons } from '../src/types'
+
+import type { NotivueIcons } from '../src/types'
 
 const options = {
    global: {
       icon: true,
    },
 } as const
 
-const icons: NotivueIcons = {
-   ..._icons,
-   warning: () => CustomIcon,
-}
-
 const _options = {
    global: {
       title: false,
    },
 } as const
 
+const icons: NotivueIcons = {
+   ..._icons,
+   warning: () => CustomIcon,
+}
+
 const emojis = computed<NotivueIcons>(() => ({
    success: '✅',
    error: '⛔️',
@@ -62,6 +63,7 @@ watchEffect(() => document.documentElement.style.setProperty('--nv-root-containe
       :options="store.renderTitles ? options : _options"
       :icons="store.customIcons ? emojis : store.outlineIcons ? outlineIcons : icons"
       :pauseOnHover="store.pauseOnHover"
+      :pauseOnTouch="store.pauseOnTouch"
       :position="store.position"
       :theme="themes[store.theme]"
       :class="{ CustomClass: store.centerOnMobile }"

demo/assets/style.css

@@ -131,7 +131,7 @@ body {
 }
 
 .BounceAnim {
-   animation: BounceKF 1s 6;
+   animation: BounceKF 1s 4;
 }
 
 @keyframes BounceKF {

src/Receiver.ts

@@ -77,9 +77,9 @@ export const Receiver = defineComponent({
       // Reactivity - Props
 
       const position = toRef(props, 'position')
+      const animations = toRef(props, 'animations')
       const pauseOnHover = toRef(props, 'pauseOnHover')
       const pauseOnTouch = toRef(props, 'pauseOnTouch')
-      const animations = toRef(props, 'animations')
 
       const isTop = computed(() => position.value.startsWith('top'))
 
@@ -124,10 +124,10 @@ export const Receiver = defineComponent({
 
       // Watchers - Resize and positioning
 
-      watch(isTop, () => setPositions(TType.SILENT))
-
       const resizeObserver = useResizeObserver(() => setPositions(TType.HEIGHT))
 
+      watch(isTop, () => setPositions(TType.SILENT))
+
       watch(
          () => items.value.filter(({ type }) => type === NType.PROMISE).map(({ id }) => id),
          (newPromises) => {
@@ -142,25 +142,23 @@ export const Receiver = defineComponent({
 
       // Watchers - Clear All
 
-      watch(clearAllTrigger, () => {
-         if (hasItems.value) {
-            animateClearAll()
-         }
-      })
+      watch(clearAllTrigger, animateClearAll)
 
       // Watchers - Hover and Touch
 
-      watch(
-         hasItems,
-         (_hasItems) => {
-            if (!_hasItems) {
-               isHovering = false
-               hasTouched = false
-               document.removeEventListener('pointerdown', resumeTouch)
-            }
-         },
-         { flush: 'post' }
-      )
+      watch(hasItems, (_hasItems) => {
+         if (!_hasItems) {
+            isHovering = false
+            hasTouched = false
+            removeTouchListener()
+         }
+      })
+
+      watch(pauseOnTouch, (_pauseOnTouch) => {
+         if (!_pauseOnTouch) {
+            removeTouchListener()
+         }
+      })
 
       // Watchers - Notifications
 
@@ -359,6 +357,10 @@ export const Receiver = defineComponent({
          ...(pauseOnTouch.value ? { onPointerdown: pauseTouch } : {}),
       }))
 
+      function removeTouchListener() {
+         document.removeEventListener('pointerdown', resumeTouch)
+      }
+
       function pauseHover(event: PointerEvent) {
          if (!isHovering && isMouse(event)) {
             pauseTimeouts()
@@ -381,7 +383,7 @@ export const Receiver = defineComponent({
                pauseTimeouts()
                hasTouched = true
 
-               document.removeEventListener('pointerdown', resumeTouch)
+               removeTouchListener()
                document.addEventListener('pointerdown', resumeTouch)
             }
          }

src/useWindowSize.ts

@@ -4,7 +4,7 @@ import { isSSR } from './utils'
 export function useWindowSize(onResize: () => void) {
    if (isSSR) return
 
-   function _onResize(event: UIEvent) {
+   function _onResize() {
       // Below this width always reposition
       if (window.matchMedia('(max-width: 768px)').matches) {
          onResize()

tests/PauseOnHover.cy.ts

@@ -1,21 +1,17 @@
 import PauseOnHover from './PauseOnHover.vue'
 
-it('Can dismiss notification', { browser: 'chrome' }, () => {
-   cy.mount(PauseOnHover)
-
-   cy.get('.Push').click()
+it('Can pause and resume notification', { browser: 'chrome' }, () => {
+   cy.log('cypress-real-events is only supported in Chromium')
 
-   cy.wait(6000)
-
-   cy.get('.Notivue__notification').should('not.exist')
+   cy.mount(PauseOnHover)
 
    cy.get('.Push').click()
 
-   cy.log('realEvents is only supported in Chromium')
-
    cy.get('.Notivue__notification').realMouseMove(50, 50, { position: 'center' })
-
    cy.wait(6000)
-
    cy.get('.Notivue__notification').should('exist')
+
+   cy.get('body').realMouseMove(50, 50, { position: 'bottomRight' })
+   cy.wait(6000)
+   cy.get('.Notivue__notification').should('not.exist')
 })

tests/PauseOnTouch.cy.ts

@@ -0,0 +1,15 @@
+import PauseOnTouch from './PauseOnHover.vue'
+
+it('Can pause and resume notification', { browser: ['chromium', 'firefox'] }, () => {
+   cy.mount(PauseOnTouch)
+
+   cy.get('.Push').click()
+
+   cy.get('.Notivue__content-message').trigger('pointerdown', { pointerType: 'touch' })
+   cy.wait(6000)
+   cy.get('.Notivue__notification').should('exist')
+
+   cy.get('body').trigger('pointerdown', { pointerType: 'touch' })
+   cy.wait(6000)
+   cy.get('.Notivue__notification').should('not.exist')
+})