2.3.0 (#47)

* Core - Remove lightningcss bug workaround

* Core - Implement `avoidDuplicates`

* Notifications - Add duplicate animation, add aria-atomic everywhere

* Core - Refactor `useVisibilityChange`

* Core - Expose `isStreamPaused`

* Notifications - Implement `NotificationProgress`

* Core, NotivueKeyboard - Cleanup

* Notifications - Fix `--nv-accent` fallback value computation

* Demo - Add new controls, cleanup

* Pkg - Edit verify script, bump v2.3.0

* Tests - Add NotivueProgress to Notifications test file

* Core - Add singular named import aliases to any exported CSS file

* Demo - Add duplicate effect to custom notifications

* Tests, Notifications - Add duplicate class test

* Tests - Add `avoidDuplicates` tests

* Tests - Up tests deps

* Demo - Up deps

Author: smastrom

demo/app.vue

@@ -39,7 +39,7 @@ watch(
             :item="item as NotivueItem<FriendRequestNotificationProps>"
          />
 
-         <NotivueSwipe v-else :item="item" :disabled="!state.enableSwipe">
+         <NotivueSwipe v-else :item :disabled="!state.enableSwipe">
             <UploadNotification
                v-if="item.props.isUploadNotifiation"
                :item="item as NotivueItem<UploadNotificationProps>"
@@ -52,10 +52,12 @@ watch(
 
             <Notification
                v-else
-               :item="item"
+               :item
                :theme="{ ...themes[state.theme], '--nv-y-align-has-title': 'flex-start' }"
                :icons="state.outlinedIcons ? outlinedIcons : undefined"
-            />
+            >
+               <NotificationProgress :item v-if="state.hasProgress" />
+            </Notification>
          </NotivueSwipe>
       </Notivue>
    </NotivueKeyboard>

demo/assets/style.css

@@ -40,7 +40,7 @@
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    --app-font-family: 'PT Sans Narrow', Avenir, Helvetica, Arial, sans-serif;
-   --nav-height: 260px;
+   --nav-height: 280px;
    --royal-blue: #438bff;
    --focus-ring: 0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--royal-blue);
    --focus-ring-xl: 0px 0px 0px 2px #fff, 0px 0px 0px 5px var(--royal-blue);

demo/components/custom-notifications/FriendRequestNotification.vue

@@ -15,7 +15,15 @@ const { elementsTabIndex } = useNotivueKeyboard()
 </script>
 
 <template>
-   <div class="Notification">
+   <div
+      :key="item.duplicates"
+      :class="[
+         'Notification',
+         {
+            Duplicate_Anim: item.duplicates > 0,
+         },
+      ]"
+   >
       <div class="Avatar">
          <img :src="item.props.profilePicture" alt="profile" class="Picture" />
          <span class="OnlineDot" />
@@ -30,14 +38,14 @@ const { elementsTabIndex } = useNotivueKeyboard()
          </div>
          <nav class="Buttons">
             <button
-               role="button"
+               type="button"
                @click="item.clear"
                class="Button ButtonReverse"
                :tabIndex="elementsTabIndex"
             >
                Deny
             </button>
-            <button role="button" @click="item.clear" class="Button" :tabIndex="elementsTabIndex">
+            <button type="button" @click="item.clear" class="Button" :tabIndex="elementsTabIndex">
                Accept
             </button>
          </nav>
@@ -169,4 +177,23 @@ const { elementsTabIndex } = useNotivueKeyboard()
       opacity: 1;
    }
 }
+
+.Duplicate_Anim {
+   animation: Duplicate_KF 350ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes Duplicate_KF {
+   0% {
+      transform: scale(1);
+   }
+
+   50% {
+      transform: scale(1.05);
+      box-shadow: 0 0 0 3px var(--royal-blue);
+   }
+
+   100% {
+      transform: scale(1);
+   }
+}
 </style>

demo/components/custom-notifications/SimpleNotification.vue

@@ -11,7 +11,15 @@ defineProps<{
 </script>
 
 <template>
-   <div class="Notification">
+   <div
+      :key="item.duplicates"
+      :class="[
+         'Notification',
+         {
+            Duplicate_Anim: item.duplicates > 0,
+         },
+      ]"
+   >
       <p :role="item.ariaRole" :aria-live="item.ariaLive">
          {{ item.message }}
       </p>
@@ -64,4 +72,25 @@ defineProps<{
       height: 1.25rem;
    }
 }
+
+.Duplicate_Anim {
+   animation: Duplicate_KF 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes Duplicate_KF {
+   0% {
+      transform: scale(1);
+      opacity: 1;
+   }
+
+   50% {
+      transform: scale(1.035);
+      opacity: 0.8;
+   }
+
+   100% {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
 </style>

demo/components/nav/Nav.vue

@@ -52,7 +52,7 @@ nav {
    z-index: 9999;
    bottom: 0;
    left: 0;
-   height: 260px;
+   height: var(--nav-height);
    position: fixed;
    overflow: hidden;
 

demo/components/nav/NavNotificationsCustomization.vue

@@ -6,7 +6,7 @@ function clearAllAndPushOne() {
    push.success(messages.value.success)
 }
 
-async function toggleRenderTitles() {
+function toggleRenderTitles() {
    actions.toggleRenderTitles()
    clearAllAndPushOne()
 }
@@ -15,34 +15,34 @@ function toggleRTL() {
    actions.toggleRTL()
    clearAllAndPushOne()
 }
+
+function toggleProgress() {
+   actions.toggleProgress()
+   clearAllAndPushOne()
+}
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton',
+   role: 'switch',
+}
 </script>
 
 <template>
    <div class="Controls">
-      <button
-         class="ButtonBase SwitchButton"
-         role="switch"
-         :aria-checked="state.renderTitles"
-         @click="toggleRenderTitles"
-      >
+      <button v-bind="btnProps" :aria-checked="state.hasProgress" @click="toggleProgress">
+         Progress
+      </button>
+      <button v-bind="btnProps" :aria-checked="state.renderTitles" @click="toggleRenderTitles">
          Titles
       </button>
       <button
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="state.outlinedIcons"
          @click="actions.toggleOutlinedIcons"
       >
          Outlined
       </button>
-      <button
-         class="ButtonBase SwitchButton"
-         role="switch"
-         :aria-checked="state.rtl"
-         @click="toggleRTL"
-      >
-         RTL
-      </button>
+      <button v-bind="btnProps" :aria-checked="state.rtl" @click="toggleRTL">RTL</button>
    </div>
 </template>
 
@@ -53,4 +53,3 @@ function toggleRTL() {
    grid-auto-flow: row;
 }
 </style>
-utils/store

demo/components/nav/NavNotivueConfig.vue

@@ -7,13 +7,6 @@ function togglePauseOnHover() {
    config.update((prevConf) => ({
       pauseOnHover: !prevConf.pauseOnHover,
    }))
-
-   push.info({
-      title: `Pause on hover ${config.pauseOnHover.value ? 'enabled' : 'disabled'}`,
-      message: config.pauseOnHover.value
-         ? 'Notifications will be paused on hover.'
-         : 'Notifications will not be paused on hover.',
-   })
 }
 
 function toggleRtlIfNeeded() {
@@ -26,13 +19,6 @@ function togglePauseOnTouch() {
    config.update((prevConf) => ({
       pauseOnTouch: !prevConf.pauseOnTouch,
    }))
-
-   push.info({
-      title: `Pause on touch ${config.pauseOnTouch.value ? 'enabled' : 'disabled'}`,
-      message: config.pauseOnTouch.value
-         ? 'Notifications will be paused on touch.'
-         : 'Notifications will not be paused on touch.',
-   })
 }
 
 function toggleQueue() {
@@ -43,6 +29,14 @@ function toggleQueue() {
    }))
 }
 
+function toggleNoDupes() {
+   config.update((prevConf) => ({
+      avoidDuplicates: !prevConf.avoidDuplicates,
+   }))
+
+   if (config.avoidDuplicates.value) state.hasProgress = true
+}
+
 const enqueuedLength = computed(() => queue.value.length)
 const isEnqueueDisabled = computed(() => config.limit.value === Infinity)
 const isSwipeDisabled = computed(() => !config.pauseOnHover.value)
@@ -71,14 +65,18 @@ watch(
 watch(config.limit, () => {
    toggleRtlIfNeeded()
 })
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton',
+   role: 'switch',
+}
 </script>
 
 <template>
    <div class="Controls">
       <button
          v-if="isMobile()"
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.pauseOnTouch.value"
          @click="togglePauseOnTouch"
       >
@@ -87,27 +85,28 @@ watch(config.limit, () => {
 
       <button
          v-else
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.pauseOnHover.value"
          @click="togglePauseOnHover"
       >
          Pause on Hover
       </button>
 
       <button
-         class="ButtonBase SwitchButton"
+         v-bind="btnProps"
          :disabled="isSwipeDisabled"
-         role="switch"
          :aria-checked="state.enableSwipe"
          @click="actions.toggleSwipe"
       >
          Clear on Swipe
       </button>
 
+      <button v-bind="btnProps" :aria-checked="config.avoidDuplicates.value" @click="toggleNoDupes">
+         No Duplicates
+      </button>
+
       <button
-         class="ButtonBase SwitchButton ButtonTooltip"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.enqueue.value"
          @click="toggleQueue"
          :disabled="isEnqueueDisabled"
@@ -138,6 +137,7 @@ watch(config.limit, () => {
    text-align: center;
    display: flex;
    justify-items: center;
+   padding-right: 1rem;
 
    -webkit-appearance: none;
    appearance: none;
@@ -148,30 +148,9 @@ watch(config.limit, () => {
    background-size: auto 1rem;
 }
 
-.ButtonTooltip {
-   width: 100%;
-}
-
 hr {
    margin: 0.25rem 0;
    border: 0;
    border-bottom: 1px solid var(--divider-color);
 }
 </style>
-
-<style>
-.v-popper__wrapper {
-   max-width: 160px;
-}
-
-.v-popper__inner {
-   background: var(--button-bg-color) !important;
-   color: var(--button-color) !important;
-   font-size: 0.825rem !important;
-   line-height: 1.35;
-}
-
-.v-popper__arrow-outer {
-   border-color: var(--button-bg-color) !important;
-}
-</style>

demo/components/nav/NavNotivuePosition.vue

@@ -18,6 +18,11 @@ const isFullWidth = computed(() => state.maxWidth === '100%')
 function setPosition(position: Position) {
    config.update({ position })
 }
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton Switch',
+   role: 'switch',
+}
 </script>
 
 <template>
@@ -35,17 +40,11 @@ function setPosition(position: Position) {
          <IconsArrowIcon :rotate="position.rotate" />
       </div>
 
-      <button
-         class="ButtonBase SwitchButton Switch"
-         role="switch"
-         :aria-checked="isFullWidth"
-         @click="actions.setFullWidth"
-      >
+      <button v-bind="btnProps" :aria-checked="isFullWidth" @click="actions.setFullWidth">
          Full Width
       </button>
       <button
-         class="ButtonBase SwitchButton Switch"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="state.centerOnMobile"
          @click="actions.toggleCenterOnMobile"
          :disabled="config.position.value.endsWith('center')"

demo/nuxt.config.ts

@@ -28,5 +28,10 @@ export default defineNuxtConfig({
          transformer: 'lightningcss',
       },
    },
-   css: ['assets/style.css', 'notivue/notifications.css', 'notivue/animations.css'],
+   css: [
+      'assets/style.css',
+      'notivue/notifications.css',
+      'notivue/notifications-progress.css',
+      'notivue/animations.css',
+   ],
 })