diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 9cc06e4..a4f2876 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -2,9 +2,11 @@ name: Tests on: pull_request: + branches: + - main push: branches: - - '*' + - main tags-ignore: - '*' workflow_call: diff --git a/packages/notivue/Notivue/composables/useMouseEvents.ts b/packages/notivue/Notivue/composables/useMouseEvents.ts index d4edaaa..891b21d 100644 --- a/packages/notivue/Notivue/composables/useMouseEvents.ts +++ b/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() { diff --git a/packages/notivue/Notivue/composables/useTouchEvents.ts b/packages/notivue/Notivue/composables/useTouchEvents.ts index fa62cf0..6e480ae 100644 --- a/packages/notivue/Notivue/composables/useTouchEvents.ts +++ b/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: diff --git a/packages/notivue/Notivue/utils.ts b/packages/notivue/Notivue/utils.ts index 4b61f63..0038012 100644 --- a/packages/notivue/Notivue/utils.ts +++ b/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}` } diff --git a/packages/notivue/NotivueSwipe/NotivueSwipe.vue b/packages/notivue/NotivueSwipe/NotivueSwipe.vue index 3203ecf..ec27d83 100644 --- a/packages/notivue/NotivueSwipe/NotivueSwipe.vue +++ b/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' diff --git a/packages/notivue/core/constants.ts b/packages/notivue/core/constants.ts index 612e14d..bd3ba1d 100644 --- a/packages/notivue/core/constants.ts +++ b/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', diff --git a/packages/notivue/core/createNotivue.ts b/packages/notivue/core/createNotivue.ts index 2e51224..cd1cd54 100644 --- a/packages/notivue/core/createNotivue.ts +++ b/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()) diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts index e5b69aa..b337e11 100644 --- a/packages/notivue/core/createStore.ts +++ b/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, // 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, }, }) diff --git a/packages/notivue/core/createStoreWatchers.ts b/packages/notivue/core/createStoreWatchers.ts index 5e1ce8f..4239045 100644 --- a/packages/notivue/core/createStoreWatchers.ts +++ b/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() - } - } - ), ] } diff --git a/packages/notivue/core/types.ts b/packages/notivue/core/types.ts index 59c3f10..d85d283 100644 --- a/packages/notivue/core/types.ts +++ b/packages/notivue/core/types.ts @@ -77,6 +77,17 @@ export interface NotivueConfig { notifications?: Partial /** Animation classes for `enter`, `leave` and `clearAll`. */ animations?: NotivueAnimations + /** Transition property applied when repositioning notifications. Must match the following pattern: + * + * `transform ` + * + * @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`. */ diff --git a/packages/notivue/core/utils.ts b/packages/notivue/core/utils.ts index 783b387..923d8db 100644 --- a/packages/notivue/core/utils.ts +++ b/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(target: T, source: Record): 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', ] diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json index 494d097..874a58d 100644 --- a/packages/notivue/nuxt/module.json +++ b/packages/notivue/nuxt/module.json @@ -1,5 +1,5 @@ { "name": "notivue/nuxt", "configKey": "notivue", - "version": "2.4.2" + "version": "2.4.3" } diff --git a/packages/notivue/package.json b/packages/notivue/package.json index 9e92b68..a345f88 100644 --- a/packages/notivue/package.json +++ b/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": [ diff --git a/tests/Notivue/transitions-properties.cy.ts b/tests/Notivue/transitions-properties.cy.ts deleted file mode 100644 index 8ff174c..0000000 --- a/tests/Notivue/transitions-properties.cy.ts +++ /dev/null @@ -1,21 +0,0 @@ -it('Transition properties are inherited correctly from CSS animations', () => { - cy.mountNotivue({ - config: { - animations: { - enter: 'fade-in-test-prop', - leave: 'fade-out-test-prop', - }, - }, - }) - - for (let i = 0; i < 20; i++) cy.clickRandomStatic() - - cy.get('li').then((notifications) => { - notifications.each((_, notification) => { - cy.wrap(notification) - .should('have.attr', 'style') - .and('include', 'transition-duration: 0.8s') - .and('include', 'transition-timing-function: ease-in-out') - }) - }) -}) diff --git a/tests/Notivue/transitions-coordinates.cy.ts b/tests/Notivue/transitions.cy.ts similarity index 100% rename from tests/Notivue/transitions-coordinates.cy.ts rename to tests/Notivue/transitions.cy.ts diff --git a/tests/cypress/support/commands-notivue.ts b/tests/cypress/support/commands-notivue.ts index 7f00d59..0adbb4f 100644 --- a/tests/cypress/support/commands-notivue.ts +++ b/tests/cypress/support/commands-notivue.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)') )