diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 374e0d81..631140fe 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/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
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 73ea4541..898099b9 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/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
diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md
index 81ac7a60..264c6cd5 100644
--- a/docs/content/4.navigation/2.command-palette.md
+++ b/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.
diff --git a/docs/content/5.overlays/6.notification.md b/docs/content/5.overlays/6.notification.md
index c4a89c53..873e67cb 100644
--- a/docs/content/5.overlays/6.notification.md
+++ b/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'
---
::
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 3a656372..73ce3752 100644
--- a/src/runtime/app.config.ts
+++ b/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',
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index 86bcaa67..27c94ec9 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -32,7 +32,7 @@
-
+
@@ -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>,
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,