From 0794b2afe74566dce34ac812fe13993af047db7e Mon Sep 17 00:00:00 2001 From: Alexandr Date: Mon, 4 Jul 2022 15:43:55 +0300 Subject: [PATCH] feat: alert component --- .eslintrc.js | 1 + docs/.vitepress/config.ts | 1 + docs/guide/alert/alert.md | 208 ++++++++++++++++++ .../alert/examples/AlertBorderExample.vue | 12 + .../alert/examples/AlertClosableExample.vue | 12 + .../guide/alert/examples/AlertIconExample.vue | 12 + .../alert/examples/AlertInlineExample.vue | 33 +++ .../alert/examples/AlertTitleExample.vue | 12 + .../guide/alert/examples/AlertTypeExample.vue | 12 + src/components/Alert/Alert.vue | 73 ++++++ src/components/Alert/useAlertClasses.ts | 106 +++++++++ src/components/Button/useButtonClasses.ts | 13 +- src/index.ts | 1 + 13 files changed, 489 insertions(+), 7 deletions(-) create mode 100644 docs/guide/alert/alert.md create mode 100644 docs/guide/alert/examples/AlertBorderExample.vue create mode 100644 docs/guide/alert/examples/AlertClosableExample.vue create mode 100644 docs/guide/alert/examples/AlertIconExample.vue create mode 100644 docs/guide/alert/examples/AlertInlineExample.vue create mode 100644 docs/guide/alert/examples/AlertTitleExample.vue create mode 100644 docs/guide/alert/examples/AlertTypeExample.vue create mode 100644 src/components/Alert/Alert.vue create mode 100644 src/components/Alert/useAlertClasses.ts diff --git a/.eslintrc.js b/.eslintrc.js index 9655d93..6e93d4a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,5 +19,6 @@ module.exports = { 'vue/multi-word-component-names': 'off', 'comma-dangle': ['error', 'always-multiline'], 'no-multiple-empty-lines': 'error', + 'object-curly-spacing': ['error', 'always'], }, } diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 31a9ea5..b0b3cb3 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -16,6 +16,7 @@ function buildSidebar() { function getComponents() { return [ + { text: 'Alert', link: '/guide/alert/alert.md' }, { text: 'Button', link: '/guide/button/button.md' }, { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' }, { text: 'Spinner', link: '/guide/spinner/spinner.md' }, diff --git a/docs/guide/alert/alert.md b/docs/guide/alert/alert.md new file mode 100644 index 0000000..18a3ca8 --- /dev/null +++ b/docs/guide/alert/alert.md @@ -0,0 +1,208 @@ + + +# Alert + +reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/) + +## Prop - type + +```typescript +export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark' +defineProps({ + type: { + type: String as PropType, + default: 'info', + }, +}) +``` + + + + +```vue + + +``` + +## Prop - title + +```typescript +defineProps({ + title: { + type: String, + default: '', + }, +}) +``` + + + + +```vue + + +``` + +## Prop - closable + +```typescript +defineProps({ + closable: { + type: Boolean, + default: false, + }, +}) +``` + + + + +```vue + + +``` + +## Prop - border + +```typescript +defineProps({ + border: { + type: Boolean, + default: false, + }, +}) +``` + + + + +```vue + + +``` + +## Prop - icon + +```typescript +defineProps({ + icon: { + type: Boolean, + default: true, + }, +}) +``` + + + + +```vue + + +``` + +## Prop - inline + +```typescript +defineProps({ + inline: { + type: Boolean, + default: true, + }, +}) +``` + + + + +```vue + + +``` \ No newline at end of file diff --git a/docs/guide/alert/examples/AlertBorderExample.vue b/docs/guide/alert/examples/AlertBorderExample.vue new file mode 100644 index 0000000..08d551b --- /dev/null +++ b/docs/guide/alert/examples/AlertBorderExample.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/guide/alert/examples/AlertClosableExample.vue b/docs/guide/alert/examples/AlertClosableExample.vue new file mode 100644 index 0000000..78742e9 --- /dev/null +++ b/docs/guide/alert/examples/AlertClosableExample.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/guide/alert/examples/AlertIconExample.vue b/docs/guide/alert/examples/AlertIconExample.vue new file mode 100644 index 0000000..57542ec --- /dev/null +++ b/docs/guide/alert/examples/AlertIconExample.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/guide/alert/examples/AlertInlineExample.vue b/docs/guide/alert/examples/AlertInlineExample.vue new file mode 100644 index 0000000..9c6efd0 --- /dev/null +++ b/docs/guide/alert/examples/AlertInlineExample.vue @@ -0,0 +1,33 @@ + + diff --git a/docs/guide/alert/examples/AlertTitleExample.vue b/docs/guide/alert/examples/AlertTitleExample.vue new file mode 100644 index 0000000..88d4269 --- /dev/null +++ b/docs/guide/alert/examples/AlertTitleExample.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/guide/alert/examples/AlertTypeExample.vue b/docs/guide/alert/examples/AlertTypeExample.vue new file mode 100644 index 0000000..957cb95 --- /dev/null +++ b/docs/guide/alert/examples/AlertTypeExample.vue @@ -0,0 +1,12 @@ + + diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue new file mode 100644 index 0000000..1e5c6f2 --- /dev/null +++ b/src/components/Alert/Alert.vue @@ -0,0 +1,73 @@ + + \ No newline at end of file diff --git a/src/components/Alert/useAlertClasses.ts b/src/components/Alert/useAlertClasses.ts new file mode 100644 index 0000000..0d8bedf --- /dev/null +++ b/src/components/Alert/useAlertClasses.ts @@ -0,0 +1,106 @@ +import type { AlertType } from './Alert.vue' +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: AlertType + border: boolean + icon: boolean + inline: boolean + title: string +} + +export function useAlertClasses(props: UseAlertClassesProps): { + alertClasses: Ref, + textClasses: Ref, + closeClasses: Ref, + contentClasses: Ref, + titleClasses: Ref, +} { + + const alertClasses = computed(() => { + return classNames( + defaultAlertClasses, + alertTypeClasses[props.type], + textClasses.value, + props.border ? alertBorderClasses[props.type] : 'rounded-lg', // rounded only if no border + props.inline ? 'flex' : '', + ) + }) + + const textClasses = computed(() => { + return classNames( + alertTextClasses[props.type], + ) + }) + + const closeClasses = computed(() => { + return classNames( + defaultCloseButtonClasses, + closeButtonClasses[props.type], + ) + }) + + const contentClasses = computed(() => { + if(!props.inline) return classNames('mt-2 mb-4') + if(!props.icon && !props.title) return '' + return classNames(!props.title ? 'ml-3' : 'ml-1') + }) + + const titleClasses = computed(() => { + if(!props.icon || !props.inline) return classNames( + 'font-medium', + !props.inline ? 'text-lg ml-2' : '', + ) + return classNames( + 'font-medium ml-3', + !props.inline ? 'text-lg' : '', + ) + }) + + return { + alertClasses, + textClasses, + closeClasses, + contentClasses, + titleClasses, + } +} \ No newline at end of file diff --git a/src/components/Button/useButtonClasses.ts b/src/components/Button/useButtonClasses.ts index 63e8f24..74c09f7 100644 --- a/src/components/Button/useButtonClasses.ts +++ b/src/components/Button/useButtonClasses.ts @@ -4,7 +4,9 @@ import classNames from 'classnames' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue' -const buttonColorClasses: { hover: Record, default: Record } = { +export type ButtonClassMap = { hover: Record, default: Record } + +const buttonColorClasses: ButtonClassMap = { default: { default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800', alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600', @@ -28,10 +30,7 @@ const buttonColorClasses: { hover: Record, default: Reco }, } -const buttonOutlineColorClasses: { - hover: Record, string>, - default: Record, string> -} = { +const buttonOutlineColorClasses: ButtonClassMap> = { default: { dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800', default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800', @@ -51,7 +50,7 @@ const buttonOutlineColorClasses: { } -const buttonGradientClasses: { hover: Record, default: Record } = { +const buttonGradientClasses: ButtonClassMap = { hover: { 'cyan-blue': 'hover:bg-gradient-to-bl', 'green-blue': 'hover:bg-gradient-to-bl', @@ -88,7 +87,7 @@ const buttonGradientClasses: { hover: Record, default: R }, } -const buttonOutlineGradientClasses: { hover: Record, default: Record } = { +const buttonOutlineGradientClasses: ButtonClassMap = { default: { 'cyan-blue': 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800', diff --git a/src/index.ts b/src/index.ts index d44c61b..96e58bb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ export { default as Button } from './components/Button/Button.vue' export { default as Spinner } from './components/Spinner/Spinner.vue' export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue' +export { default as Alert } from './components/Alert/Alert.vue'