1.1.4 (#13)

* remove unneeded isSSR check * add nextTick to pause/resume timeouts * add types import to exports field, remove pnpm-only-allow, add side effects false * bump deps and version, update readme, release 1.1.4
smastrom · Aug 3, 2023 · 64eb4ff · 64eb4ff
1 parent 8e2fb9f
commit 64eb4ff
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-   "version": "1.1.3",
+   "version": "1.1.4",
    "private": true,
    "packageManager": "pnpm@8.6.3",
    "engines": {
@@ -24,7 +24,7 @@
       "pretty-quick": "^3.1.3",
       "rimraf": "^4.4.1",
       "typescript": "^4.9.5",
-      "vite": "^4.4.7",
+      "vite": "^4.4.8",
       "vue": "^3.3.4",
       "vue-tsc": "^1.8.8"
    }

diff --git a/packages/notivue/Notivue/composables/useFocusEvents.ts b/packages/notivue/Notivue/composables/useFocusEvents.ts
@@ -1,7 +1,6 @@
 import { watch } from 'vue'
 
 import { useElements, useItems } from '@/core/useStore'
-import { isSSR } from '@/core/utils'
 
 export function useFocusEvents() {
    const items = useItems()
@@ -16,8 +15,6 @@ export function useFocusEvents() {
    watch(
       elements.items.value,
       (newItems) => {
-         if (isSSR) return
-
          buttonSet.forEach((button) => {
             if (!elements.wrapper.value?.contains(button)) buttonSet.delete(button)
          })

diff --git a/packages/notivue/README.md b/packages/notivue/README.md
@@ -48,29 +48,31 @@ pnpm add notivue
 
 <br />
 
-## Vite / Vue CLI
+## Vite
 
 ### 1. Configure
 
 **main.js/ts**
 
-```js
+```diff
 import { createApp } from 'vue'
-import { notivue } from 'notivue'
++ import { notivue } from 'notivue'
 
 import App from './App.vue'
 
-import 'notivue/notifications.css' // Only needed if using built-in notifications
-import 'notivue/animations.css' // Only needed if using built-in animations
++ import 'notivue/notifications.css' // Only needed if using built-in notifications
++ import 'notivue/animations.css' // Only needed if using built-in animations
 
 const app = createApp(App)
 
-app.use(notivue)
++ app.use(notivue)
 app.mount('#app')
 ```
 
 **App.vue**
 
+With built-in notifications:
+
 ```vue
 <script setup>
 import { Notivue, Notifications } from 'notivue'
@@ -85,6 +87,41 @@ import { Notivue, Notifications } from 'notivue'
 </template>
 ```
 
+Or roll your own:
+
+```vue
+<template>
+  <Notivue v-slot="item">
+    <div class="rounded-full flex py-2 pl-3 bg-slate-700 text-slate-50 text-sm">
+      {{ item.message }}
+
+      <button
+        @click="item.clear"
+        aria-label="Dismiss"
+        class="pl-3 pr-2 hover:text-red-300 transition-colors"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-5 h-5"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+          />
+        </svg>
+      </button>
+    </div>
+  </Notivue>
+
+  <!-- ... -->
+</template>
+```
+
+Animations, repositioning, pausing, timeouts, and ARIA live regions are always handled by `<Notivue />` when using custom components, so don't worry about anything else besides building the component itself.
+
 ### 2. Push notifications from any component
 
 ```vue

diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef, triggerRef, type InjectionKey } from 'vue'
+import { ref, shallowRef, triggerRef, nextTick, type InjectionKey } from 'vue'
 
 import { getConfig } from './config'
 import { mergeNotificationOptions } from './options'
@@ -97,7 +97,7 @@ export function createStore(userConfig: NotivueConfig) {
             }
          })
 
-         this.arePaused = true
+         nextTick(() => (this.arePaused = true))
       },
       resumeTimeouts() {
          if (this.data.value.length === 0 || !this.arePaused) return
@@ -115,7 +115,7 @@ export function createStore(userConfig: NotivueConfig) {
             }
          })
 
-         this.arePaused = false
+         nextTick(() => (this.arePaused = false))
       },
       updatePositions(type = TType.PUSH) {
          const sortedItems = elements.items.value.sort(
@@ -202,23 +202,24 @@ export function createStore(userConfig: NotivueConfig) {
    const elements = {
       wrapper: ref<HTMLElement | null>(null),
       items: ref<HTMLElement[]>([]),
-      animationData: { duration: '', easing: '' },
       /**
        * Gets CSS animation duration and easing on first push and stores them.
        * Returns the stored values which are applied to internal reposition transitions.
        */
+      animationData: null as null | { duration: string; easing: string },
       getAnimationData() {
-         if (!this.animationData.duration || !this.animationData.easing) {
+         if (!this.animationData) {
             const animEl = this.wrapper.value?.querySelector(`.${config.animations.value.enter}`)
 
             if (!animEl) {
-               this.animationData.duration = '0s'
-               this.animationData.easing = 'linear'
+               this.animationData = { duration: '0s', easing: 'ease' }
             } else {
                const style = getComputedStyle(animEl)
 
-               this.animationData.duration = style.animationDuration
-               this.animationData.easing = style.animationTimingFunction
+               this.animationData = {
+                  duration: style.animationDuration,
+                  easing: style.animationTimingFunction,
+               }
             }
          }
          return this.animationData

diff --git a/packages/notivue/package.json b/packages/notivue/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "1.1.3",
+   "version": "1.1.4",
    "private": false,
    "description": "Fully-featured toast notification system for Vue and Nuxt.",
    "keywords": [
@@ -27,8 +27,10 @@
       "name": "Simone Mastromattei",
       "email": "smastrom@proton.me"
    },
+   "sideEffects": false,
    "exports": {
       ".": {
+         "types": "./dist/index.d.ts",
          "import": "./dist/index.mjs",
          "require": "./dist/index.js"
       },
@@ -39,11 +41,11 @@
    "module": "dist/index.mjs",
    "types": "dist/index.d.ts",
    "files": [
-      "dist/*"
+      "dist/*",
+      "*.d.ts"
    ],
    "scripts": {
       "dev": "pnpm --C \"../../demo\" run dev",
-      "preinstall": "npx only-allow pnpm",
       "prebuild": "cp ../../README.md .",
       "build": "rimraf dist && vue-tsc && vite build && pnpm run build:css",
       "build:css": "esbuild ./Notifications/notifications.css ./core/animations.css --bundle --outdir=dist --minify --target=chrome58,edge16,firefox57,node12,safari11 --log-level=error",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml