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

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

docs/content/1.getting-started/3.theming.md

@@ -33,7 +33,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components that have a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 ## Dark mode
 

docs/content/3.forms/4.select-menu.md

@@ -81,7 +81,7 @@ const selected = ref(people[3])
 ```
 ::
 
-You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `optionAttribute` prop that defaults to `label`.
+You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
 
 ::component-example
 #default

docs/content/4.navigation/2.command-palette.md

@@ -237,7 +237,7 @@ excludedProps:
 
 The CommandPalette component takes care of the full-text search for you with [Fuse.js](https://fusejs.io). You can pass all the options of Fuse.js through the `fuse` prop.
 
-When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `commandAttribute` prop. This will also affect the display of the command.
+When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `command-attribute` prop. This will also affect the display of the command.
 
 You can also highlight the matches in the command by setting the `fuse.fuseOptions.includeMatches` to `true`. The CommandPalette component automatically takes care of the highlighting for you.
 

docs/content/5.overlays/6.notification.md

@@ -114,7 +114,21 @@ baseProps:
   title: 'Notification'
   description: 'This is a notification.'
 props:
-  timeout: 10000
+  timeout: 60000
+---
+::
+
+You can change the color of the progress bar through the `progress-color` prop.
+
+::component-card
+---
+baseProps:
+  id: 5
+  title: 'Notification'
+  description: 'This is a notification.'
+  timeout: 600000
+props:
+  progressColor: 'primary'
 ---
 ::
 

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,