From 34cf4062e8f48c8e3ee667938a9c28acf42dc144 Mon Sep 17 00:00:00 2001 From: Ilya Artamonov Date: Fri, 15 Sep 2023 16:20:12 +0300 Subject: [PATCH] refactor: Alert component refactoring (#195) --- docs/components/alert.md | 289 +++++++++--------- .../examples/AlertBorderAccentExample.vue | 12 + .../alert/examples/AlertBorderExample.vue | 10 +- .../alert/examples/AlertClosableExample.vue | 10 +- .../examples/AlertCustomContentExample.vue | 43 +++ .../alert/examples/AlertIconExample.vue | 10 +- .../alert/examples/AlertInlineExample.vue | 33 -- .../alert/examples/AlertTitleExample.vue | 21 +- .../alert/examples/AlertTypeExample.vue | 10 +- src/components/Alert/Alert.vue | 149 +++++---- .../Alert/composables/useAlertClasses.ts | 106 ------- 11 files changed, 329 insertions(+), 364 deletions(-) create mode 100644 docs/components/alert/examples/AlertBorderAccentExample.vue create mode 100644 docs/components/alert/examples/AlertCustomContentExample.vue delete mode 100644 docs/components/alert/examples/AlertInlineExample.vue delete mode 100644 src/components/Alert/composables/useAlertClasses.ts diff --git a/docs/components/alert.md b/docs/components/alert.md index b6d2393..4bd765d 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -4,36 +4,17 @@ import AlertTitleExample from './alert/examples/AlertTitleExample.vue'; import AlertClosableExample from './alert/examples/AlertClosableExample.vue'; import AlertBorderExample from './alert/examples/AlertBorderExample.vue'; import AlertIconExample from './alert/examples/AlertIconExample.vue'; -import AlertInlineExample from './alert/examples/AlertInlineExample.vue'; +import AlertBorderAccentExample from './alert/examples/AlertBorderAccentExample.vue'; +import AlertCustomContentExample from './alert/examples/AlertCustomContentExample.vue'; # Vue Alert - Flowbite #### Show contextual information to your users using alert elements based on Tailwind CSS - ---- - -:::tip -Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/) -::: - The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. -Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon. - -## Prop - type - -```typescript -export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark' -defineProps({ - type: { - type: String as PropType, - default: 'info', - }, -}) -``` - - +## Default alert +Use the following examples of alert components to show messages as feedback to your users. ```vue @@ -42,26 +23,76 @@ import { Alert } from 'flowbite-vue' +``` +## Alerts with icon +You can also include a descriptive icon to complement the message inside the alert component with the following example. + + + +```vue + + ``` -## Prop - title +## Bordered alerts +Use this example to add a border accent to the alert component instead of just a plain background. -```typescript -defineProps({ - title: { - type: String, - default: '', - }, -}) + + +```vue + + ``` +## Border accent +Use this example to add a border accent on top of the alert component for further visual distinction. + + + +```vue + + +``` + +## Alerts with list +Use this example to show a list and a description inside an alert component. @@ -71,26 +102,28 @@ import { Alert } from 'flowbite-vue' ``` -## Prop - closable - -```typescript -defineProps({ - closable: { - type: Boolean, - default: false, - }, -}) -``` - +## Dismissing +Use the following alert elements that are also dismissable. @@ -109,110 +142,74 @@ import { Alert } from 'flowbite-vue' ``` -## Prop - border +## Additional content +The following alert components can be used if you wish to disclose more information inside the element. -```typescript -defineProps({ - border: { - type: Boolean, - default: false, - }, -}) -``` - - - + ```vue ``` -## Prop - icon +## API -```typescript -defineProps({ - icon: { - type: Boolean, - default: true, - }, -}) -``` +### Props +| Name | Values | Default | +|------------|-----------------------------------------------|---------| +| type | `info`, `danger`, `success`,`warning`, `dark` | `info` | +| closable | `boolean` | `false` | +| icon | `boolean` | `false` | +| border | `boolean` | `false` | +### Events +| Name | Description | +|----------|----------------------| +| close | Close button pressed | - - -```vue - - -``` - -## Prop - inline - -```typescript -defineProps({ - inline: { - type: Boolean, - default: true, - }, -}) -``` - - - - -```vue - - -``` +### Slots +| Name | Description | +|------------|-------------------| +| default | alert content | +| close-icon | custom close icon | +| icon | custom icon | +| title | title content | diff --git a/docs/components/alert/examples/AlertBorderAccentExample.vue b/docs/components/alert/examples/AlertBorderAccentExample.vue new file mode 100644 index 0000000..33df263 --- /dev/null +++ b/docs/components/alert/examples/AlertBorderAccentExample.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/components/alert/examples/AlertBorderExample.vue b/docs/components/alert/examples/AlertBorderExample.vue index a5b5fa2..3394a5b 100644 --- a/docs/components/alert/examples/AlertBorderExample.vue +++ b/docs/components/alert/examples/AlertBorderExample.vue @@ -1,10 +1,10 @@ diff --git a/docs/components/alert/examples/AlertIconExample.vue b/docs/components/alert/examples/AlertIconExample.vue index 85444cc..aa3d799 100644 --- a/docs/components/alert/examples/AlertIconExample.vue +++ b/docs/components/alert/examples/AlertIconExample.vue @@ -1,10 +1,10 @@ diff --git a/docs/components/alert/examples/AlertTitleExample.vue b/docs/components/alert/examples/AlertTitleExample.vue index 00ab33b..25aaf88 100644 --- a/docs/components/alert/examples/AlertTitleExample.vue +++ b/docs/components/alert/examples/AlertTitleExample.vue @@ -1,10 +1,21 @@ diff --git a/src/components/Alert/composables/useAlertClasses.ts b/src/components/Alert/composables/useAlertClasses.ts deleted file mode 100644 index fc88992..0000000 --- a/src/components/Alert/composables/useAlertClasses.ts +++ /dev/null @@ -1,106 +0,0 @@ -import type { AlertType } from '../types' -import { computed } from 'vue' -import type { Ref } from 'vue' -import classNames from 'classnames' - -const defaultAlertClasses = 'p-4 text-sm' - -const alertTextClasses: Record = { - danger: 'text-red-700 dark:text-red-800', - dark: 'text-gray-700 dark:text-gray-300', - info: 'text-blue-700 dark:text-blue-800', - success: 'text-green-700 dark:text-green-800', - warning: 'text-yellow-700 dark:text-yellow-800', -} - -const alertTypeClasses: Record = { - danger: 'bg-red-100 dark:bg-red-200', - dark: 'bg-gray-100 dark:bg-gray-700', - info: 'bg-blue-100 dark:bg-blue-200', - success: 'bg-green-100 dark:bg-green-200', - warning: 'bg-yellow-100 dark:bg-yellow-200', -} - -const alertBorderClasses: Record = { - danger: 'border-t-4 border-red-500', - dark: 'border-t-4 border-gray-500', - info: 'border-t-4 border-blue-500', - success: 'border-t-4 border-green-500', - warning: 'border-t-4 border-yellow-500', -} - - -const defaultCloseButtonClasses = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8' - -const closeButtonClasses: Record = { - danger: 'hover:bg-red-200 dark:hover:bg-red-300 focus:ring-red-400 bg-red-100 dark:bg-red-200 text-red-500', - dark: 'dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white hover:bg-gray-200 focus:ring-gray-400 bg-gray-100 text-gray-500', - info: 'hover:bg-blue-200 dark:hover:bg-blue-300 focus:ring-blue-400 bg-blue-100 dark:bg-blue-200 text-blue-500', - success: 'bg-green-100 dark:bg-green-200 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300', - warning: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300 bg-yellow-100 dark:bg-yellow-200 text-yellow-500', -} - -export type UseAlertClassesProps = { - type: Ref - border: Ref - icon: Ref - inline: Ref - title: Ref -} - -export function useAlertClasses(props: UseAlertClassesProps): { - alertClasses: Ref, - textClasses: Ref, - closeClasses: Ref, - contentClasses: Ref, - titleClasses: Ref, -} { - - const alertClasses = computed(() => { - return classNames( - defaultAlertClasses, - alertTypeClasses[props.type.value], - textClasses.value, - props.border.value ? alertBorderClasses[props.type.value] : 'rounded-lg', // rounded only if no border - props.inline.value ? 'flex' : '', - ) - }) - - const textClasses = computed(() => { - return classNames( - alertTextClasses[props.type.value], - ) - }) - - const closeClasses = computed(() => { - return classNames( - defaultCloseButtonClasses, - closeButtonClasses[props.type.value], - ) - }) - - const contentClasses = computed(() => { - if(!props.inline.value) return classNames('mt-2 mb-4') - if(!props.icon.value && !props.title.value) return '' - return classNames(!props.title.value ? 'ml-3' : 'ml-1') - }) - - const titleClasses = computed(() => { - if(!props.icon.value || !props.inline.value) return classNames( - 'font-medium', - !props.inline.value ? 'text-lg ml-2' : '', - ) - return classNames( - 'font-medium ml-3', - !props.inline.value ? 'text-lg' : '', - ) - }) - - return { - alertClasses, - textClasses, - closeClasses, - contentClasses, - titleClasses, - } -} \ No newline at end of file