2.4.0 (#50)

* Core - Rename NKeys to NType, move Notivue utils to core

* Notivue - Fine-tine `pauseOnTabChange: false` behavior

* Notivue - Remove unnecessary ResizeObsever repositioning call

* Core - Move `isTopAlign` out of `createConfig`

* Core - Rename `createWatchers`, remove repositioning watcher, get unwatchers

* Core - Add counters, fine-tune repositioning watcher

* Core - Add `useNotivueInstance`

* Demo - Add NavActions, instance controls

* Core, Notifications - Add new type aliases

* Dev - Disable minification, nuxt devtools

* Notivue - Rename attributes

* Core - Sort imports in main entry file

* Pkg - Add exports.js, verify-exports.js

* Demo - Edit duplicate control behavior

* Core - Cleanup useless code in `createStore`

* Pkg - Edit README

* Core - Update config tests

* Tests - Fix import tests

* Pkg - Edit README, nuxt/README

* Core - Restore triggerRef on queue add/edit methods

* Core - Use interfaces, edit some comments

* Core - Add Intellisense description to `useNotivueInstance`

* Notivue, NotivueKeyboard - Force unmount when not running

* Tests - Add instance tests

* Tests - Imrpove instance tests nomenclatures

* Demo - Move limit select above enqueue control

* Notivue - Rename window focus events

* Pkg - Bump 2.4.0

* Astro - Make push more readable

* Astro - Prefer createdAt istead of counter for event id

* Core, Notivue - Fix some typos

.gitignore

@@ -19,3 +19,5 @@ cypress/screenshots
 
 .nuxt
 pnpm-lock.yaml
+
+astro-dev

README.md

@@ -48,9 +48,6 @@ _Built-in announcements, reduced-motion and keyboard support_
 **💫 Nuxt and Astro modules**  
 _Built-in Nuxt and Astro ad-hoc modules_
 
-**📜 Complete yet friendly documentation**  
-_You're covered with a plain-language [documentation](https://notivuedocs.netlify.app/)_
-
 <br />
 
 ## Installation

demo/components/nav/Nav.vue

@@ -1,4 +1,42 @@
+<script setup lang="ts">
+import { useNotivueInstance } from 'notivue'
+
+const { isRunning } = useNotivueInstance()
+
+let shouldDisplayNotice = ref(false)
+
+let timeout: number
+
+watch(isRunning, (newVal) => {
+   window.clearTimeout(timeout)
+
+   shouldDisplayNotice.value = true
+
+   if (newVal) {
+      window.setTimeout(() => {
+         shouldDisplayNotice.value = false
+      }, 3000)
+   }
+})
+</script>
+
 <template>
+   <div
+      class="Notice"
+      v-if="shouldDisplayNotice"
+      :style="{ backgroundColor: isRunning ? '#399b76' : '#d2463c' }"
+      aria-live="assertive"
+      role="alert"
+      dir="ltr"
+   >
+      <template v-if="isRunning">
+         Notivue is now running again. This will be dismissed shortly.</template
+      >
+      <template v-else>
+         Notivue instance has been stopped. Restart it to create notifications.
+      </template>
+   </div>
+
    <nav dir="ltr">
       <div class="Container">
          <SharedButtonGroup name="Position">
@@ -28,18 +66,25 @@
          </SharedButtonGroup>
 
          <SharedButtonGroup name="Actions">
-            <SharedButton @click="push.clearAll()" text="Dismiss All">
-               <IconsDismissIcon />
-            </SharedButton>
-            <SharedButton @click="push.destroyAll()" text="Destroy All">
-               <IconsDestroyIcon />
-            </SharedButton>
+            <NavActions />
          </SharedButtonGroup>
       </div>
    </nav>
 </template>
 
 <style scoped>
+.Notice {
+   position: fixed;
+   bottom: var(--nav-height);
+   width: 100%;
+   color: #fff;
+   padding: 0.25rem 2rem;
+   text-align: center;
+   font-size: 0.925rem;
+   line-height: normal;
+   z-index: 1000;
+}
+
 nav {
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background-color: var(--nav-bg-color);

demo/components/nav/NavActions.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { entries } = useNotifications()
+
+const { isRunning, startInstance, stopInstance } = useNotivueInstance()
+</script>
+
+<template>
+   <SharedButton
+      @click="push.clearAll()"
+      text="Dismiss All"
+      :isDisabled="entries.length === 0"
+      :key="entries.length"
+   >
+      <IconsDismissIcon />
+   </SharedButton>
+   <SharedButton
+      @click="push.destroyAll()"
+      text="Destroy All"
+      :isDisabled="entries.length === 0"
+      :key="entries.length"
+   >
+      <IconsDestroyIcon />
+   </SharedButton>
+
+   <SharedButton @click="startInstance()" text="Start Instance" :isDisabled="isRunning">
+      <IconsSuccessIcon />
+   </SharedButton>
+   <SharedButton @click="stopInstance()" text="Stop Instance" :isDisabled="!isRunning">
+      <IconsWarnIcon :isWarn="false" />
+   </SharedButton>
+</template>

demo/components/nav/NavNotivueConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const config = useNotivue()
 const { queue } = useNotifications()
-const { state, actions } = useStore()
+const { state, actions, messages } = useStore()
 
 function togglePauseOnHover() {
    config.update((prevConf) => ({
@@ -30,11 +30,15 @@ function toggleQueue() {
 }
 
 function toggleNoDupes() {
+   push.destroyAll()
+
    config.update((prevConf) => ({
       avoidDuplicates: !prevConf.avoidDuplicates,
    }))
 
    if (config.avoidDuplicates.value) state.hasProgress = true
+
+   push.success(messages.value.success)
 }
 
 const enqueuedLength = computed(() => queue.value.length)
@@ -105,6 +109,14 @@ const btnProps = {
          No Duplicates
       </button>
 
+      <select class="ButtonBase Select" v-model="config.limit.value" aria-label="Limit">
+         <option selected :value="Infinity">No Limit</option>
+         <option :value="1">Limit - 1</option>
+         <option :value="3">Limit - 3</option>
+         <option :value="5">Limit - 5</option>
+         <option :value="10">Limit - 10</option>
+      </select>
+
       <button
          v-bind="btnProps"
          :aria-checked="config.enqueue.value"
@@ -113,16 +125,6 @@ const btnProps = {
       >
          Enqueue ({{ enqueuedLength }})
       </button>
-
-      <hr />
-
-      <select class="ButtonBase Select" v-model="config.limit.value" aria-label="Limit">
-         <option selected :value="Infinity">No Limit</option>
-         <option :value="1">Limit - 1</option>
-         <option :value="3">Limit - 3</option>
-         <option :value="5">Limit - 5</option>
-         <option :value="10">Limit - 10</option>
-      </select>
    </div>
 </template>
 
@@ -147,10 +149,4 @@ const btnProps = {
    background-repeat: no-repeat;
    background-size: auto 1rem;
 }
-
-hr {
-   margin: 0.25rem 0;
-   border: 0;
-   border-bottom: 1px solid var(--divider-color);
-}
 </style>

demo/components/nav/NavPushBuiltIn.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-const { state } = useStore()
-const { messages } = useStore()
+const { state, messages } = useStore()
 
 async function asyncRefMessagePush() {
    const initialMessage = ref(state.rtl ? 'جاري تحميل الملفات...' : 'Preparing to upload files...')

demo/components/shared/Button.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
    text: string
+   isDisabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -9,7 +10,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-   <button @click="emit('click')" class="ButtonBase" role="button">
+   <button @click="emit('click')" class="ButtonBase" role="button" :disabled="isDisabled">
       <slot />
       <span>{{ props.text }}</span>
    </button>

demo/nuxt.config.ts

@@ -3,11 +3,15 @@ import { getHead } from './utils/head'
 export default defineNuxtConfig({
    modules: ['notivue/nuxt'],
    ssr: true,
+   devtools: {
+      enabled: false,
+   },
    experimental: {
       componentIslands: true,
    },
    notivue: {
       // addPlugin: true,
+      // startOnCreation: true,
       notifications: {
          global: {
             // duration: Infinity,
@@ -21,7 +25,12 @@ export default defineNuxtConfig({
       head: getHead(),
    },
    vite: {
+      esbuild: {
+         minifyIdentifiers: !import.meta.env.DEV,
+         minifySyntax: !import.meta.env.DEV,
+      },
       build: {
+         minify: import.meta.env.DEV ? false : 'esbuild',
          cssMinify: 'lightningcss',
       },
       css: {

packages/notivue/Notifications/icons/index.ts

@@ -1,6 +1,6 @@
 import { markRaw as raw, type SVGAttributes } from 'vue'
 
-import { NotificationTypeKeys as NKeys } from '@/core/constants'
+import { NotificationTypeKeys as NType } from '@/core/constants'
 
 import SuccessIcon from './SuccessIcon.vue'
 import ErrorIcon from './ErrorIcon.vue'
@@ -34,23 +34,23 @@ export const featherProps: SVGAttributes = {
 }
 
 export const filledIcons: NotivueIcons = {
-   [NKeys.SUCCESS]: raw(SuccessIcon),
-   [NKeys.ERROR]: raw(ErrorIcon),
-   [NKeys.INFO]: raw(InfoIcon),
-   [NKeys.WARNING]: raw(ErrorIcon),
-   [NKeys.PROMISE]: raw(PromiseIcon),
-   [NKeys.PROMISE_RESOLVE]: raw(SuccessIcon),
-   [NKeys.PROMISE_REJECT]: raw(ErrorIcon),
+   [NType.SUCCESS]: raw(SuccessIcon),
+   [NType.ERROR]: raw(ErrorIcon),
+   [NType.INFO]: raw(InfoIcon),
+   [NType.WARNING]: raw(ErrorIcon),
+   [NType.PROMISE]: raw(PromiseIcon),
+   [NType.PROMISE_RESOLVE]: raw(SuccessIcon),
+   [NType.PROMISE_REJECT]: raw(ErrorIcon),
    close: raw(CloseIcon),
 }
 
 export const outlinedIcons: NotivueIcons = {
-   [NKeys.SUCCESS]: raw(SuccessOutlineIcon),
-   [NKeys.ERROR]: raw(ErrorOutlineIcon),
-   [NKeys.INFO]: raw(InfoOutlineIcon),
-   [NKeys.WARNING]: raw(ErrorOutlineIcon),
-   [NKeys.PROMISE]: raw(PromiseIcon),
-   [NKeys.PROMISE_RESOLVE]: raw(SuccessOutlineIcon),
-   [NKeys.PROMISE_REJECT]: raw(ErrorOutlineIcon),
+   [NType.SUCCESS]: raw(SuccessOutlineIcon),
+   [NType.ERROR]: raw(ErrorOutlineIcon),
+   [NType.INFO]: raw(InfoOutlineIcon),
+   [NType.WARNING]: raw(ErrorOutlineIcon),
+   [NType.PROMISE]: raw(PromiseIcon),
+   [NType.PROMISE_RESOLVE]: raw(SuccessOutlineIcon),
+   [NType.PROMISE_REJECT]: raw(ErrorOutlineIcon),
    close: raw(CloseIcon),
 }

packages/notivue/Notifications/types.ts

@@ -69,3 +69,7 @@ type ThemeVars =
    | WarningColorsVars
    | InfoColorsVars
    | PromiseColorsVars
+
+// New v2.4.0 aliases
+
+export type NotificationProps = NotificationsProps

packages/notivue/Notivue/Notivue.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useNotivueInstance } from '@/core/useStore'
 import { DEFAULT_PROPS } from './constants'
+
 import { NotivueClientOnly } from '@/shared/ClientOnly'
 
 import NotivueImpl from './NotivueImpl.vue'
@@ -8,12 +10,14 @@ import type { NotivueComponentSlot, NotivueProps } from 'notivue'
 
 const props = withDefaults(defineProps<NotivueProps>(), DEFAULT_PROPS)
 
+const { isRunning } = useNotivueInstance()
+
 defineSlots<NotivueComponentSlot>()
 </script>
 
 <template>
    <NotivueClientOnly>
-      <NotivueImpl v-bind="props" v-slot="item">
+      <NotivueImpl v-bind="props" v-slot="item" v-if="isRunning">
          <slot v-bind="item" />
       </NotivueImpl>
    </NotivueClientOnly>

packages/notivue/Notivue/NotivueImpl.vue

@@ -4,13 +4,16 @@ import { Teleport } from 'vue'
 import AriaLive from './AriaLive.vue'
 
 import { useStore } from '@/core/useStore'
+import { getSlotItem } from '@/core/utils'
+
 import { useMouseEvents } from './composables/useMouseEvents'
 import { useTouchEvents } from './composables/useTouchEvents'
 import { useNotivueStyles } from './composables/useNotivueStyles'
 import { useRepositioning } from './composables/useRepositioning'
 import { useWindowFocus } from './composables/useWindowFocus'
 import { useReducedMotion } from './composables/useReducedMotion'
-import { getSlotItem, getAriaLabel } from './utils'
+
+import { getAriaLabel } from './utils'
 import { DEFAULT_PROPS } from './constants'
 
 import type { NotivueProps, NotivueComponentSlot } from 'notivue'
@@ -43,22 +46,22 @@ useRepositioning()
    >
       <!-- List Container -->
       <ol
-         v-if="items.length > 0"
+         v-if="items.entries.value.length > 0"
          v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value }"
-         :data-notivue-align="config.isTopAlign.value ? 'top' : 'bottom'"
+         :data-notivue-align="config.position.value.split('-')[0]"
          :aria-label="props.listAriaLabel"
          :ref="elements.root"
          :class="props.class"
          :style="{ ...styles.list, ...props.styles?.list }"
       >
          <!-- List Item -->
          <li
-            v-for="(item, index) in items.entries.value"
+            v-for="(item, i) in items.entries.value"
             tabindex="-1"
             :key="item.id"
-            :data-notivue-id="item.id"
+            :data-notivue-item="item.id"
             :aria-setsize="items.length"
-            :aria-posinset="index + 1"
+            :aria-posinset="i + 1"
             :ref="elements.items"
             :style="{
                ...styles.listItem,