chore(Notification): add progressColor and progressVariant props (#219)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

src/runtime/app.config.ts

@@ -698,7 +698,12 @@ const notification = {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   icon: 'flex-shrink-0 w-5 h-5 text-gray-900 dark:text-white',
   avatar: 'flex-shrink-0 pt-0.5',
-  progress: 'absolute bottom-0 left-0 right-0 h-1 bg-primary-500 dark:bg-primary-400',
+  progress: {
+    base: 'absolute bottom-0 left-0 right-0 h-1',
+    variant: {
+      solid: 'bg-{color}-500 dark:bg-{color}-400',
+    }
+  },
   transition: {
     enterActiveClass: 'transform ease-out duration-300 transition',
     enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
@@ -708,6 +713,8 @@ const notification = {
     leaveToClass: 'opacity-0'
   },
   default: {
+    progressColor: 'primary',
+    progressVariant: 'solid',
     close: {
       icon: 'i-heroicons-x-mark-20-solid',
       color: 'gray',

src/runtime/components/overlays/Notification.vue

@@ -32,7 +32,7 @@
             </div>
           </div>
         </div>
-        <div v-if="timeout" :class="ui.progress" :style="progressBarStyle" />
+        <div v-if="timeout" :class="progressClass" :style="progressStyle" />
       </div>
     </div>
   </transition>
@@ -49,6 +49,7 @@ import { useTimer } from '../../composables/useTimer'
 import type { ToastNotificationAction } from '../../types'
 import type { Avatar as AvatarType } from '../../types/avatar'
 import type { Button as ButtonType } from '../../types/button'
+import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -99,6 +100,20 @@ export default defineComponent({
       type: Function,
       default: null
     },
+    progressColor: {
+      type: String,
+      default: () => appConfig.ui.notification.default.progressColor,
+      validator (value: string) {
+        return ['gray', ...appConfig.ui.colors].includes(value)
+      }
+    },
+    progressVariant: {
+      type: String,
+      default: () => appConfig.ui.notification.default.progressVariant,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.notification.progress.variant).includes(value)
+      }
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
       default: () => appConfig.ui.notification
@@ -114,12 +129,19 @@ export default defineComponent({
     let timer: any = null
     const remaining = ref(props.timeout)
 
-    const progressBarStyle = computed(() => {
+    const progressStyle = computed(() => {
       const remainingPercent = remaining.value / props.timeout * 100
 
       return { width: `${remainingPercent || 0}%` }
     })
 
+    const progressClass = computed(() => {
+      return classNames(
+        ui.value.progress.base,
+        ui.value.progress.variant[props.progressVariant]?.replaceAll('{color}', props.progressColor)
+      )
+    })
+
     function onMouseover () {
       if (timer) {
         timer.pause()
@@ -179,7 +201,8 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      progressBarStyle,
+      progressStyle,
+      progressClass,
       onMouseover,
       onMouseleave,
       onClose,