2.1.0 (#37)

* NotivueSwipe - Fix isPointerInside miscalculation * Notifications - Do not render animateTransform on reduced motion * Notifications - Add out-in transition on promise-resolve, reject icons * Notifications - Slightly reduce message size, improve slate theme fg color * Core - Add `update` method to config * Pkg - Up notivue dev deps and lock to latesst 3.3 vue-compiler * Demo - Remove floating vue and beta devtools * Demo - Update examples to use new `update` method * Notivue - Remove redundant notification key computation * Notifications - Add transition class to classes object * Pkg - Add astro entry point check to verify tarball script, up root deps * Notifications - Do not check for transition class in elements tests * Demo - Other quality of life refactorings * Demo - Even more quality of life refactorings * Core - Fix NotivueConfigRequired type, fix typo in comment * Tests - Prepare monorepo for vitest * Tests - Add update config tests * Core - Fix ts warn on unknown incoming type * Core - Rename some internal types, add ConfigSlice aliases * Notifications - Reduce title size to 0.925rem * Core - Add more type aliases * Core - Add `updateConfig` util * Pkg - Add new imports to nuxt and astro module, bump v2.1.0 * Pkg - Edit README
smastrom · Jan 2, 2024 · fc297b7 · fc297b7
1 parent 5962464
commit fc297b7
Show file tree

Hide file tree

Showing 45 changed files with 525 additions and 317 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -31,6 +31,8 @@ jobs:
            run: pnpm build
          - name: Install Notivue
            run: pnpm install
+         - name: Test with Vitest
+           run: pnpm test:unit
          - name: Test with Cypress
            uses: cypress-io/github-action@v5
            timeout-minutes: 15

diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@
 
 ## Features
 
-**🧬 Fully modular**  
+**🧬 Fully modular with zero dependencies**  
 _Granularly include only the features you need_
 
 **💊 Drop-in components to enhance notifications**  
@@ -33,13 +33,10 @@ _NotivueSwipe, NotivueKeyboard, all optional and customizable_
 **🧩 Headless API**  
 _Use your own notifications while Notivue handles the rest_
 
-**🌀 Promise API**  
+**🌀 Dynamic Notifications**  
 _Update pending notifications with ease_
 
-**💫 Nuxt and Astro modules**  
-_Buit-in Nuxt and Astro modules_
-
-**🔰 Ready-made notifications with anything you need**  
+**🔰 Ready-made notifications included**  
 _Themes, icons, RTL support and much more_
 
 **🎢 Slick transitions and animations**  
@@ -48,8 +45,8 @@ _Customize any animation with plain CSS_
 **♿️ Fully accessible**  
 _Built-in screen reader, reduced motion, and keyboard support_
 
-**🧚‍♂️ Zero dependencies**  
-_From ~4.5 KB (gzipped)_
+**💫 Nuxt and Astro modules**  
+_Buit-in Nuxt and Astro modules_
 
 <br />
 
@@ -173,7 +170,7 @@ export default defineNuxtConfig({
 
 ```vue
 <template>
-  <button @click="push.success('This is your first notification!')">Push</button>
+  <button @click="push.success('Hello from your first notification!')">Push</button>
 
   <Notivue v-slot="item">
     <Notifications :item="item" />

diff --git a/demo/app.vue b/demo/app.vue
@@ -1,42 +1,34 @@
 <script setup lang="ts">
-import {
-   lightTheme,
-   pastelTheme,
-   materialTheme,
-   darkTheme,
-   slateTheme,
-   outlinedIcons,
-   type NotivueItem,
-} from 'notivue'
+import type { NotivueItem } from 'notivue'
 
 import Nav from '@/components/nav/Nav.vue'
 import Background from '@/components/shared/Background.vue'
-import CustomActions from '@/components/custom-notifications/CustomActions.vue'
-import CustomPromise from '@/components/custom-notifications/CustomPromise.vue'
-import CustomSimple from '@/components/custom-notifications/CustomSimple.vue'
 import QueueCount from '@/components/shared/QueueCount.vue'
 
-import type {
-   CustomPromiseProps,
-   CustomActionProps,
-   CustomSimpleProps,
-} from '@/components/nav/NavPushCustom.vue'
+import FriendRequestNotification, {
+   type FriendRequestNotificationProps,
+} from '@/components/custom-notifications/FriendRequestNotification.vue'
 
-const { state } = useStore()
+import UploadNotification, {
+   type UploadNotificationProps,
+} from '@/components/custom-notifications/UploadNotification.vue'
+
+import SimpleNotification, {
+   type SimpleNotificationProps,
+} from '@/components/custom-notifications/SimpleNotification.vue'
 
+const { state } = useStore()
 const config = useNotivue()
 
+const themes = { lightTheme, pastelTheme, materialTheme, darkTheme, slateTheme } as const
+
 !isSSR &&
    watchEffect(() => document.documentElement.style.setProperty('--nv-root-width', state.maxWidth))
 
 watch(
    () => [config.enqueue.value, config.limit.value],
-   () => {
-      push.destroyAll()
-   }
+   () => push.destroyAll()
 )
-
-const themes = { lightTheme, pastelTheme, materialTheme, darkTheme, slateTheme } as const
 </script>
 
 <template>
@@ -46,29 +38,24 @@ const themes = { lightTheme, pastelTheme, materialTheme, darkTheme, slateTheme }
          :containersTabIndex="containersTabIndex"
          v-slot="item"
       >
-         <CustomActions
-            :item="item as NotivueItem<CustomActionProps>"
-            v-if="(item.props as CustomActionProps).isCustom"
+         <FriendRequestNotification
+            v-if="item.props.isFriendRequestNotification"
+            :item="item as NotivueItem<FriendRequestNotificationProps>"
          />
 
-         <NotivueSwipe
-            :item="item"
-            :disabled="!state.enableSwipe"
-            v-else-if="(item.props as CustomPromiseProps).isFileUpload"
-         >
-            <CustomPromise :item="item as NotivueItem<CustomPromiseProps>" />
-         </NotivueSwipe>
+         <NotivueSwipe v-else :item="item" :disabled="!state.enableSwipe">
+            <UploadNotification
+               v-if="item.props.isUploadNotifiation"
+               :item="item as NotivueItem<UploadNotificationProps>"
+            />
 
-         <NotivueSwipe
-            :item="item"
-            :disabled="!state.enableSwipe"
-            v-else-if="(item.props as CustomSimpleProps).isCustomSimple"
-         >
-            <CustomSimple :item="item as NotivueItem<CustomSimpleProps>" />
-         </NotivueSwipe>
+            <SimpleNotification
+               v-else-if="item.props.isSimpleNotification"
+               :item="item as NotivueItem<SimpleNotificationProps>"
+            />
 
-         <NotivueSwipe :item="item" :disabled="!state.enableSwipe" v-else>
             <Notifications
+               v-else
                :item="item"
                :theme="themes[state.theme]"
                :icons="state.outlinedIcons ? outlinedIcons : undefined"
@@ -78,9 +65,7 @@ const themes = { lightTheme, pastelTheme, materialTheme, darkTheme, slateTheme }
    </NotivueKeyboard>
 
    <QueueCount />
-
    <Nav />
-
    <Background />
 </template>
 

diff --git a/...ts/custom-notifications/CustomActions.vue → ...tifications/FriendRequestNotification.vue b/...ts/custom-notifications/CustomActions.vue → ...tifications/FriendRequestNotification.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import type { NotivueItem } from 'notivue'
 
-import type { CustomActionProps } from '../nav/NavPushCustom.vue'
+export interface FriendRequestNotificationProps {
+   name: string
+   profilePicture: string
+   isFriendRequestNotification: boolean
+}
 
 defineProps<{
-   item: NotivueItem<CustomActionProps>
+   item: NotivueItem<FriendRequestNotificationProps>
 }>()
 
 const { elementsTabIndex } = useNotivueKeyboard()

diff --git a/...nts/custom-notifications/CustomSimple.vue → ...stom-notifications/SimpleNotification.vue b/...nts/custom-notifications/CustomSimple.vue → ...stom-notifications/SimpleNotification.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { NotivueItem } from 'notivue'
-import type { CustomSimpleProps } from '../nav/NavPushCustom.vue'
+
+export interface SimpleNotificationProps {
+   isSimpleNotification: boolean
+}
 
 defineProps<{
-   item: NotivueItem<CustomSimpleProps>
+   item: NotivueItem<SimpleNotificationProps>
 }>()
 </script>
 

diff --git a/...ts/custom-notifications/CustomPromise.vue → ...stom-notifications/UploadNotification.vue b/...ts/custom-notifications/CustomPromise.vue → ...stom-notifications/UploadNotification.vue
@@ -2,10 +2,14 @@
 import CloseIcon from '../icons/CloseIcon.vue'
 
 import type { NotivueItem } from 'notivue'
-import type { CustomPromiseProps } from '../nav/NavPushCustom.vue'
+
+export interface UploadNotificationProps {
+   isUploadNotifiation: boolean
+   fileName: string
+}
 
 const notification = defineProps<{
-   item: NotivueItem<CustomPromiseProps>
+   item: NotivueItem<UploadNotificationProps>
 }>()
 
 const isPromise = computed(() => notification.item.type === 'promise')
@@ -148,33 +152,20 @@ const isPromise = computed(() => notification.item.type === 'promise')
 /* Forked from: https://csslayout.io/indeterminate-progress-bar/ */
 
 .indeterminate-progress-bar {
-   /* Color */
    background-color: #e2efff;
-
-   /* Rounded border */
    border-radius: 9999px;
-
-   /* Size */
    height: 0.3rem;
-
    position: relative;
    overflow: hidden;
 }
 
 .indeterminate-progress-bar__progress {
-   /* Color */
    background-color: #0076ff;
-
-   /* Rounded border */
    border-radius: 9999px;
-
-   /* Absolute position */
    position: absolute;
    bottom: 0;
    top: 0;
    width: 50%;
-
-   /* Move the bar infinitely */
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: indeterminate-progress-bar;

diff --git a/demo/components/nav/Nav.vue b/demo/components/nav/Nav.vue
@@ -2,7 +2,7 @@
 import NavNotivueConfig from './NavNotivueConfig.vue'
 import NavNotificationsThemes from './NavNotificationsThemes.vue'
 import NavPushBuiltIn from './NavPushBuiltIn.vue'
-import NavPushCustom from './NavPushCustom.vue'
+import NavPushHeadless from './NavPushHeadless.vue'
 import NavNotivuePosition from './NavNotivuePosition.vue'
 import ButtonGroup from '../shared/ButtonGroup.vue'
 import Button from '../shared/Button.vue'
@@ -36,8 +36,8 @@ import NavNotificationsCustomization from './NavNotificationsCustomization.vue'
             </ButtonGroup>
          </div>
 
-         <ButtonGroup name="Custom 👇" isPush>
-            <NavPushCustom />
+         <ButtonGroup name="Headless 👇" isPush>
+            <NavPushHeadless />
          </ButtonGroup>
 
          <ButtonGroup name="Actions">

diff --git a/demo/components/nav/NavNotificationsCustomization.vue b/demo/components/nav/NavNotificationsCustomization.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const { state, actions, computed } = useStore()
+const { state, actions, messages } = useStore()
 
 function clearAllAndPushOne() {
    push.destroyAll()
-   push.success(computed.messages.value.success)
+   push.success(messages.value.success)
 }
 
 async function toggleRenderTitles() {