add clearProxy

smastrom · Aug 11, 2023 · 00548b8 · 00548b8
1 parent dc99d6b
commit 00548b8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/packages/notivue/NotivueSwipe/NotivueSwipe.vue b/packages/notivue/NotivueSwipe/NotivueSwipe.vue
@@ -30,7 +30,7 @@ const props = withDefaults(
       /** A [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
        * string that specifies elements to be exempted from the swipe action.
        *
-       * @default `a, button`
+       * @default "a, button"
        */
       exclude?: string
       /** Whether to disable the swipe gesture or not.
@@ -46,7 +46,7 @@ const props = withDefaults(
        */
       threshold?: number
    }>(),
-   { exclude: 'a, button', disabled: false, threshold: 0.5 }
+   { touchOnly: false, exclude: 'a, button', disabled: false, threshold: 0.5 }
 )
 
 const touchOnly = toRef(props, 'touchOnly')
@@ -115,7 +115,7 @@ function setDragStyles() {
          el.style.touchAction = 'none'
          el.style.userSelect = 'none'
       }
-   }) // TODO: Maybe find a better way to do this
+   }) // Could this be done the Vue way?
 }
 
 function resetDragStyles() {
@@ -222,12 +222,7 @@ function onPointerMoveClear(e: PointerEvent) {
 
    if (isMouse(e) && isPointerInside(e)) {
       const isLastItem = lastItemContainer.value.contains(itemRef.value)
-
-      if (isLastItem) {
-         items.resumeTimeouts()
-      } else {
-         items.pauseTimeouts()
-      }
+      if (!isLastItem) items.pauseTimeouts()
    } else {
       items.resumeTimeouts()
    }

diff --git a/packages/notivue/core/createPush.ts b/packages/notivue/core/createPush.ts
@@ -16,7 +16,12 @@ export function createPush(
 
       items.pushProxy({ ...options, id, type })
 
-      return { id, clear: () => items.addLeaveClass(id), destroy: () => items.remove(id) }
+      return {
+         id,
+         clear: () => items.clearProxy(id),
+         destroy: () => items.clearProxy(id, true),
+         playLeave: () => items.addLeaveClass(id),
+      }
    }
 
    return {
@@ -25,13 +30,14 @@ export function createPush(
       warning: (options) => push(options, NKeys.WARNING),
       info: (options) => push(options, NKeys.INFO),
       promise: (options) => {
-         const { id, clear, destroy } = push(options, NKeys.PROMISE)
+         const { id, clear, destroy, playLeave } = push(options, NKeys.PROMISE)
 
          return {
             resolve: (options) => push(options, NKeys.PROMISE_RESOLVE, id),
             reject: (options) => push(options, NKeys.PROMISE_REJECT, id),
             clear,
             destroy,
+            playLeave,
          }
       },
       clearAll: () => elements.addClearAllClass(),

diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
@@ -26,7 +26,7 @@ export function createStore(userConfig: NotivueConfig) {
       isStreamPaused: ref(false),
       isStreamFocused: ref(false),
       /* ====================================================================================
-       * UI Methods and Reset
+       * Interaction states and store reset
        * ==================================================================================== */
       resetPause() {
          this.isStreamPaused.value = false
@@ -108,10 +108,19 @@ export function createStore(userConfig: NotivueConfig) {
          this.queue.value = []
       },
       /* ====================================================================================
+       * Proxies - Used by push methods
+       *
+       * Clear Proxy - Removes a notification and resumes timesouts if needed
        * Push Proxy - Creates, updates or enqueues a notification created using push methods
        * ==================================================================================== */
+      clearProxy(id: string, isDestroy = false) {
+         const isLast = this.entries.value.length > 1 && this.entries.value.at(-1)?.id === id
+         if (isLast) this.resumeTimeouts()
+         isDestroy ? this.remove(id) : this.addLeaveClass(id)
+      },
       pushProxy<T extends Obj = Obj>(incomingOptions: UserPushOptionsWithInternals<T>) {
          const createdAt = Date.now()
+
          const entry = mergeOptions<T>(config.notifications.value, incomingOptions)
          const isQueueActive = config.enqueue.value
          const shouldSkipQueue = incomingOptions.skipQueue
@@ -144,8 +153,8 @@ export function createStore(userConfig: NotivueConfig) {
                ...entry,
                createdAt,
                timeout: shouldEnqueue ? createTimeout : createTimeout(), // Will be called when dequeued
-               clear: () => this.addLeaveClass(entry.id),
-               destroy: () => this.remove(entry.id),
+               clear: () => this.clearProxy(entry.id),
+               destroy: () => this.clearProxy(entry.id, true),
             } as StoreItem<T>
 
             if (shouldEnqueue) {
@@ -220,7 +229,7 @@ export function createStore(userConfig: NotivueConfig) {
          this.isStreamPaused.value = false
       },
       /* ====================================================================================
-       * Reactive Classes - Animations
+       * Reactive classes - Animations
        * ==================================================================================== */
       updateClass(id: string, animationClass: string | undefined, onEnd = () => {}) {
          if (!animationClass) return onEnd()
@@ -240,14 +249,20 @@ export function createStore(userConfig: NotivueConfig) {
          this.updateClass(id, config.animations.value.enter) // ...same if class is undefined
          items.updatePositions()
       },
+      removeClick(id: string) {
+         if (id === this.entries.value.at(-1)?.id) {
+            items.resumeTimeouts()
+         }
+         this.addLeaveClass(id)
+      },
       addLeaveClass(id: string) {
          if (isReducedMotion()) return this.remove(id)
 
          this.updateClass(id, config.animations.value.leave, () => this.remove(id))
          items.updatePositions()
       },
       /* ====================================================================================
-       * Reactive Styles - Positions
+       * Reactive styles - Positions
        * ==================================================================================== */
       updatePositions(type = TType.PUSH) {
          const sortedItems = elements.getSortedItems()
@@ -314,7 +329,7 @@ export function createStore(userConfig: NotivueConfig) {
          this.transitionData = null
       },
       /* ====================================================================================
-       * Imperative Classes - Animations
+       * Imperative - Animations
        * ==================================================================================== */
       addClearAllClass() {
          if (this.wrapper.value) {
@@ -339,7 +354,7 @@ export function createStore(userConfig: NotivueConfig) {
    watch(
       () => items.entries.value.length === 0 && items.queue.value.length === 0,
       () => {
-         console.log('Reset from watcher!')
+         console.log('Store reset!')
 
          elements.resetTransitionData()
          items.resetPause()