2.4.3 (#53)

* Notivue - Move `isMouse` util to /Notivue

* Pkg - Edit tests workflow

* Core - Deprecate `syncTransitionStyles` add add `transitionStyles` config

* Core - Set transition config prop as whole

* Core - Remove deprecated transitions test

* Pkg - Bump 2.4.3

Author: smastrom

.github/workflows/tests.yml

@@ -2,9 +2,11 @@ name: Tests
 
 on:
    pull_request:
+      branches:
+         - main
    push:
       branches:
-         - '*'
+         - main
       tags-ignore:
          - '*'
    workflow_call:

packages/notivue/Notivue/composables/useMouseEvents.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-import { isMouse } from '@/core/utils'
+import { isMouse } from '@/Notivue/utils'
 import { useStore } from '@/core/useStore'
 
 export function useMouseEvents() {

packages/notivue/Notivue/composables/useTouchEvents.ts

@@ -1,7 +1,7 @@
 import { computed, onBeforeUnmount } from 'vue'
 
 import { useStore } from '@/core/useStore'
-import { isMouse } from '@/core/utils'
+import { isMouse } from '@/Notivue/utils'
 
 /**
  * The logic follows this pattern:

packages/notivue/Notivue/utils.ts

@@ -1,5 +1,7 @@
 import type { NotivueItem } from 'notivue'
 
+export const isMouse = (e: PointerEvent) => e.pointerType === 'mouse'
+
 export function getAriaLabel(item: NotivueItem) {
    return `${item.title ? `${item.title}: ` : ''}${item.message}`
 }

packages/notivue/NotivueSwipe/NotivueSwipe.vue

@@ -12,7 +12,7 @@ import {
 } from 'vue'
 
 import { useStore } from '@/core/useStore'
-import { isMouse } from '@/core/utils'
+import { isMouse } from '@/Notivue/utils'
 import { NotificationTypeKeys as NType } from '@/core/constants'
 import { DEFAULT_PROPS, DEBOUNCE, RETURN_DUR } from './constants'
 

packages/notivue/core/constants.ts

@@ -62,6 +62,7 @@ export const DEFAULT_CONFIG: NotivueConfigRequired = {
    notifications: DEFAULT_NOTIFICATION_OPTIONS,
    limit: Infinity,
    avoidDuplicates: false,
+   transition: 'transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)',
    animations: {
       enter: CLASS_PREFIX + 'enter',
       leave: CLASS_PREFIX + 'leave',

packages/notivue/core/createNotivue.ts

@@ -80,7 +80,6 @@ function createInstance(startOnCreation: boolean) {
             store.items.clear()
             store.queue.clear()
             store.items.clearLifecycleEvents()
-            store.animations.resetTransitionStyles()
 
             setPush(createPushMock())
             unwatchStore.forEach((unwatch) => unwatch())

packages/notivue/core/createStore.ts

@@ -167,37 +167,11 @@ export function createAnimations(
    queue: QueueSlice,
    elements: ElementsSlice
 ) {
-   let tStyles = ['0.35s', 'cubic-bezier(0.5, 1, 0.25, 1)']
-
    return {
       isReducedMotion: ref(false),
-      transitionStyles: null as null | Pick<CSSProperties, 'transitionDuration' | 'transitionTimingFunction'>, // prettier-ignore
       setReducedMotion(newVal: boolean) {
          this.isReducedMotion.value = newVal
       },
-      resetTransitionStyles() {
-         this.transitionStyles = null
-      },
-      syncTransitionStyles() {
-         const { enter } = config.animations.value
-
-         if (!enter) {
-            tStyles = ['0s', 'ease']
-         } else {
-            const animEl = elements.root.value?.querySelector(`.${enter}`)
-            if (animEl) {
-               console.log('Syncing transition styles')
-
-               const style = window.getComputedStyle(animEl)
-               tStyles = [style.animationDuration, style.animationTimingFunction]
-            }
-         }
-
-         this.transitionStyles = {
-            transitionDuration: tStyles[0],
-            transitionTimingFunction: tStyles[1],
-         }
-      },
       playLeave(id: string, { isDestroy = false, isUserTriggered = false } = {}) {
          const { leave = '' } = config.animations.value
          const item = items.get(id)
@@ -247,19 +221,6 @@ export function createAnimations(
          })
       },
       updatePositions({ isImmediate = false } = {}) {
-         if (!this.transitionStyles) {
-            // Runs the first time a notification is rendered
-            window.requestAnimationFrame(() => {
-               this.syncTransitionStyles()
-               window.requestAnimationFrame(() => {
-                  this.updatePositionsImpl(isImmediate)
-               })
-            })
-         } else {
-            this.updatePositionsImpl(isImmediate)
-         }
-      },
-      updatePositionsImpl(isImmediate: boolean) {
          console.log('Updating positions')
 
          const isReduced = this.isReducedMotion.value || isImmediate
@@ -276,9 +237,8 @@ export function createAnimations(
 
             items.update(id, {
                positionStyles: {
-                  willChange: 'transform',
                   transform: `translate3d(0, ${accPrevHeights}px, 0)`,
-                  ...(isReduced ? { transition: 'none' } : this.transitionStyles),
+                  transition: isReduced ? 'none' : config.transition.value,
                },
             })
 

packages/notivue/core/createStoreWatchers.ts

@@ -30,14 +30,5 @@ export function createStoreWatchers(store: NotivueStore) {
          },
          { flush: 'post' }
       ),
-
-      watch(
-         () => store.config.animations.value.enter,
-         (newEnter, prevEnter) => {
-            if (newEnter !== prevEnter) {
-               store.animations.resetTransitionStyles()
-            }
-         }
-      ),
    ]
 }

packages/notivue/core/types.ts

@@ -77,6 +77,17 @@ export interface NotivueConfig {
    notifications?: Partial<NotificationTypesOptions>
    /** Animation classes for `enter`, `leave` and `clearAll`. */
    animations?: NotivueAnimations
+   /** Transition property applied when repositioning notifications. Must match the following pattern:
+    *
+    * `transform <duration> <timing-function>`
+    *
+    * @example
+    *
+    * ```ts
+    * transition: 'transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)'
+    * ```
+    */
+   transition?: string
    /** Tag or element to which the stream will be teleported. */
    teleportTo?: string | HTMLElement | false
    /** Notifications limit. Defaults to `Infinity`. */

packages/notivue/core/utils.ts

@@ -14,8 +14,6 @@ import type {
 
 export const isSSR = typeof window === 'undefined'
 
-export const isMouse = (e: PointerEvent) => e.pointerType === 'mouse'
-
 export function mergeDeep<T extends Obj>(target: T, source: Record<string, any>): T {
    const merged: T = { ...target }
 
@@ -96,6 +94,7 @@ export const internalKeys: (keyof InternalKeys)[] = [
    'timeout',
    'resumedAt',
    'remaining',
+   // Maybe in future releases these could be exposed
    'animationAttrs',
    'positionStyles',
 ]

packages/notivue/nuxt/module.json

@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.4.2"
+   "version": "2.4.3"
 }

packages/notivue/package.json

@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "2.4.2",
+   "version": "2.4.3",
    "private": false,
    "description": "Powerful toast notification system for Vue and Nuxt",
    "keywords": [

tests/Notivue/transitions-properties.cy.ts

@@ -123,7 +123,5 @@ Cypress.Commands.add('checkTransitions', (element: HTMLElement, height: number)
       .wrap(element)
       .should('have.attr', 'style')
       .and('include', `transform: translate3d(0px, ${height}px, 0px)`)
-      .and('include', 'transition-duration: 0.35s')
-      .and('include', 'transition-property: transform')
-      .and('include', 'transition-timing-function: cubic-bezier(0.5, 1, 0.25, 1)')
+      .and('include', 'transition: transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)')
 )