Expose paused state for alert

[MellKam]

I want to make a line at the bottom of the alert that will show when it disappears.

The problem is that in my notivue config I have enabled pauseOnHover: true, pauseOnTabChange: true, but I can't find out when the current alert is active or paused. Therefore, I propose to add some property like isPaused to the alert object (obviously, it should be ref)

[smastrom]

Hi @MellKam, sorry for getting back now but I'm a bit busy these days.

I understand that a boolean indicating whether the stream is paused or not might be useful for stuff like animating a progress bar. But there's a reason why I never included it in the API and why I might never do that.

As you know, notifications are paused by different events such as mouse hovering, tapping, keyboard-navigation, window focus/blur, etc. Ideally once you have access to the value of store.timeouts.isStreamPaused you would animate a progress bar inside your notification like this:

<div
   :class="['Progress', { isPaused: isStreamPaused }]"
   :style="{ '--item-duration': item.duration + 'ms' }"
/>

.Progress {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--nv-accent);
   transform-origin: left;
   animation: ProgressKF var(--item-duration) linear forwards;

   &.isPaused {
      animation-play-state: paused;
   }
}

@keyframes ProgressKF {
   0% {
      transform: scaleX(1);
   }

   100% {
      transform: scaleX(0);
   }
}

This works great in my local playground for any event except for when switching tabs: in this case the class isPaused is not toggled on the DOM element even if the value of isStreamPaused it is. This has to do with how the browser works and there isn't much I can do here unless finding hacks or alternative ways.

In order to release this or any other feature, such feature has to be rock solid and work everytime and in any scenario. This one just won't.

[smastrom]

Released in v2.3.0