diff --git a/demo/components/nav/NavActions.vue b/demo/components/nav/NavActions.vue
index 54adcb6..6c02398 100644
--- a/demo/components/nav/NavActions.vue
+++ b/demo/components/nav/NavActions.vue
@@ -1,24 +1,12 @@
-
+
-
+
diff --git a/packages/notivue/core/createNotivue.ts b/packages/notivue/core/createNotivue.ts
index d8c1ff8..2e51224 100644
--- a/packages/notivue/core/createNotivue.ts
+++ b/packages/notivue/core/createNotivue.ts
@@ -79,7 +79,7 @@ function createInstance(startOnCreation: boolean) {
store.items.clear()
store.queue.clear()
- store.items.clearEffects()
+ store.items.clearLifecycleEvents()
store.animations.resetTransitionStyles()
setPush(createPushMock())
diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
index d5a6b95..e5b69aa 100644
--- a/packages/notivue/core/createStore.ts
+++ b/packages/notivue/core/createStore.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef, triggerRef, unref, isRef, type Ref } from 'vue'
+import { ref, shallowRef, triggerRef, unref, isRef, type Ref, type CSSProperties } from 'vue'
import {
createConfigRefs,
@@ -88,17 +88,17 @@ export function createItems(config: ConfigSlice, queue: QueueSlice) {
get length() {
return this.entries.value.length
},
- effectsCount: ref(0),
- addEffect() {
- this.effectsCount.value++
+ lifecycleEventsCount: ref(0),
+ addLifecycleEvent() {
+ this.lifecycleEventsCount.value++
},
- clearEffects() {
- this.effectsCount.value = 0
+ clearLifecycleEvents() {
+ this.lifecycleEventsCount.value = 0
},
add(item: StoreItem) {
this.entries.value.unshift(item)
this.triggerRef()
- this.addEffect()
+ this.addLifecycleEvent()
},
addFromQueue() {
const next = {
@@ -167,40 +167,36 @@ export function createAnimations(
queue: QueueSlice,
elements: ElementsSlice
) {
- type TransitionStyles = { transitionDuration: string; transitionTimingFunction: string }
+ let tStyles = ['0.35s', 'cubic-bezier(0.5, 1, 0.25, 1)']
return {
isReducedMotion: ref(false),
- transitionStyles: null as null | TransitionStyles,
+ transitionStyles: null as null | Pick, // prettier-ignore
setReducedMotion(newVal: boolean) {
this.isReducedMotion.value = newVal
},
- getTransitionStyles() {
- if (!this.transitionStyles) this.syncTransitionStyles()
- return this.transitionStyles
- },
resetTransitionStyles() {
this.transitionStyles = null
},
syncTransitionStyles() {
- const mountedRoot = elements.root.value
- if (!mountedRoot) return // If the root is not yet queryable, try to sync the next push
-
- const enterClass = config.animations.value.enter
- const animEl = enterClass ? mountedRoot.querySelector(`.${enterClass}`) : null
-
- console.log('Syncing transition styles')
+ const { enter } = config.animations.value
- if (!animEl) {
- this.transitionStyles = { transitionDuration: '0s', transitionTimingFunction: 'ease' }
+ if (!enter) {
+ tStyles = ['0s', 'ease']
} else {
- const styles = window.getComputedStyle(animEl)
+ const animEl = elements.root.value?.querySelector(`.${enter}`)
+ if (animEl) {
+ console.log('Syncing transition styles')
- this.transitionStyles = {
- transitionDuration: styles.animationDuration,
- transitionTimingFunction: styles.animationTimingFunction,
+ 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
@@ -216,7 +212,7 @@ export function createAnimations(
}
if (!item || !leave || isDestroy || this.isReducedMotion.value) {
- items.addEffect()
+ items.addLifecycleEvent()
return onAnimationend()
}
@@ -231,7 +227,7 @@ export function createAnimations(
},
})
- items.addEffect()
+ items.addLifecycleEvent()
},
playClearAll() {
items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
@@ -251,9 +247,19 @@ export function createAnimations(
})
},
updatePositions({ isImmediate = false } = {}) {
- const transitionStyles = this.getTransitionStyles()
- if (!transitionStyles) return
-
+ 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
@@ -272,7 +278,7 @@ export function createAnimations(
positionStyles: {
willChange: 'transform',
transform: `translate3d(0, ${accPrevHeights}px, 0)`,
- ...(isReduced ? { transition: 'none' } : transitionStyles),
+ ...(isReduced ? { transition: 'none' } : this.transitionStyles),
},
})
diff --git a/packages/notivue/core/createStoreWatchers.ts b/packages/notivue/core/createStoreWatchers.ts
index 7e2acc2..5e1ce8f 100644
--- a/packages/notivue/core/createStoreWatchers.ts
+++ b/packages/notivue/core/createStoreWatchers.ts
@@ -5,7 +5,7 @@ import type { NotivueStore } from 'notivue'
export function createStoreWatchers(store: NotivueStore) {
return [
watch(
- store.items.effectsCount,
+ store.items.lifecycleEventsCount,
() => {
store.animations.updatePositions()
},
diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json
index dc06a10..494d097 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.1"
+ "version": "2.4.2"
}
diff --git a/packages/notivue/package.json b/packages/notivue/package.json
index 28fc106..9e92b68 100644
--- a/packages/notivue/package.json
+++ b/packages/notivue/package.json
@@ -1,6 +1,6 @@
{
"name": "notivue",
- "version": "2.4.1",
+ "version": "2.4.2",
"private": false,
"description": "Powerful toast notification system for Vue and Nuxt",
"keywords": [
diff --git a/packages/notivue/vite.config.ts b/packages/notivue/vite.config.ts
index c3018f3..24cd726 100644
--- a/packages/notivue/vite.config.ts
+++ b/packages/notivue/vite.config.ts
@@ -27,12 +27,13 @@ export default defineConfig({
},
esbuild: {
drop: isFinalBundle ? ['console'] : [],
- ...(!isFinalBundle ? { minifyIdentifiers: false, minifySyntax: false } : {}),
+ minifyIdentifiers: false,
+ minifySyntax: false,
},
build: {
emptyOutDir: isFinalBundle,
target: 'es2015',
- minify: isFinalBundle ? 'esbuild' : false,
+ minify: false,
lib: {
entry: 'index.ts',
fileName: 'index',