From e7eea067b2aaa23b37cead5eae91d8f69613bdf6 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Mon, 22 May 2023 15:01:19 +0200 Subject: [PATCH] chore(Notification): add `progressColor` and `progressVariant` props (#219) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Chopin --- docs/content/1.getting-started/3.theming.md | 2 +- docs/content/3.forms/4.select-menu.md | 2 +- .../content/4.navigation/2.command-palette.md | 2 +- docs/content/5.overlays/6.notification.md | 16 +++++++++- src/runtime/app.config.ts | 9 +++++- .../components/overlays/Notification.vue | 29 +++++++++++++++++-- 6 files changed, 52 insertions(+), 8 deletions(-) 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,