jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: alert component

Browse Source
This commit is contained in:
Alexandr
2022-07-04 15:43:55 +03:00
parent 9e76cdf938
commit 0794b2afe7
13 changed files with 489 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -19,5 +19,6 @@ module.exports = {
'vue/multi-word-component-names': 'off', 'vue/multi-word-component-names': 'off',
'comma-dangle': ['error', 'always-multiline'], 'comma-dangle': ['error', 'always-multiline'],
'no-multiple-empty-lines': 'error', 'no-multiple-empty-lines': 'error',
'object-curly-spacing': ['error', 'always'],
}, },
} }

1
docs/.vitepress/config.ts
View File

@@ -16,6 +16,7 @@ function buildSidebar() {
function getComponents() { function getComponents() {
return [ return [
{ text: 'Alert', link: '/guide/alert/alert.md' },
{ text: 'Button', link: '/guide/button/button.md' }, { text: 'Button', link: '/guide/button/button.md' },
{ text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' }, { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
{ text: 'Spinner', link: '/guide/spinner/spinner.md' }, { text: 'Spinner', link: '/guide/spinner/spinner.md' },

208
docs/guide/alert/alert.md Normal file
View File

@@ -0,0 +1,208 @@
<script setup>
import AlertTypeExample from './examples/AlertTypeExample.vue';
import AlertTitleExample from './examples/AlertTitleExample.vue';
import AlertClosableExample from './examples/AlertClosableExample.vue';
import AlertBorderExample from './examples/AlertBorderExample.vue';
import AlertIconExample from './examples/AlertIconExample.vue';
import AlertInlineExample from './examples/AlertInlineExample.vue';
</script>
# 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<AlertType>,
default: 'info',
},
})
```
<AlertTypeExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" class="mb-2">Info</Alert>
<Alert type="warning" class="mb-2">Warning</Alert>
<Alert type="danger" class="mb-2">Danger</Alert>
<Alert type="dark" class="mb-2">Dark</Alert>
<Alert type="success">Success</Alert>
</div>
</template>
```
## Prop - title
```typescript
defineProps({
title: {
type: String,
default: '',
},
})
```
<AlertTitleExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
<Alert type="success" title="Some success title">Success</Alert>
</div>
</template>
```
## Prop - closable
```typescript
defineProps({
closable: {
type: Boolean,
default: false,
},
})
```
<AlertClosableExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" closable class="mb-2">Info</Alert>
<Alert type="warning" closable class="mb-2">Warning</Alert>
<Alert type="danger" closable class="mb-2">Danger</Alert>
<Alert type="dark" closable class="mb-2">Dark</Alert>
<Alert type="success" closable>Success</Alert>
</div>
</template>
```
## Prop - border
```typescript
defineProps({
border: {
type: Boolean,
default: false,
},
})
```
<AlertBorderExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" border class="mb-2">Info</Alert>
<Alert type="warning" border class="mb-2">Warning</Alert>
<Alert type="danger" border class="mb-2">Danger</Alert>
<Alert type="dark" border class="mb-2">Dark</Alert>
<Alert type="success" border>Success</Alert>
</div>
</template>
```
## Prop - icon
```typescript
defineProps({
icon: {
type: Boolean,
default: true,
},
})
```
<AlertIconExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
<Alert type="success" :icon="false">Success</Alert>
</div>
</template>
```
## Prop - inline
```typescript
defineProps({
inline: {
type: Boolean,
default: true,
},
})
```
<AlertInlineExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Info title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="success" title="Success title" :inline="false">
Lorem...
<template #actions>
<Button size="sm" color="green" class="mr-2">
Buttons everywhere
</Button>
<Button size="sm" outline color="green">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
And here
</Button>
</template>
</Alert>
</div>
</template>
```

12
docs/guide/alert/examples/AlertBorderExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex flex-col">
<Alert type="info" border class="mb-2">Info</Alert>
<Alert type="warning" border class="mb-2">Warning</Alert>
<Alert type="danger" border class="mb-2">Danger</Alert>
<Alert type="dark" border class="mb-2">Dark</Alert>
<Alert type="success" border>Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertClosableExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex flex-col">
<Alert type="info" closable class="mb-2">Info</Alert>
<Alert type="warning" closable class="mb-2">Warning</Alert>
<Alert type="danger" closable class="mb-2">Danger</Alert>
<Alert type="dark" closable class="mb-2">Dark</Alert>
<Alert type="success" closable>Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertIconExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex flex-col">
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
<Alert type="success" :icon="false">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

33
docs/guide/alert/examples/AlertInlineExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="flex flex-col">
<Alert type="info" title="Info title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
</Alert>
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cupiditate dicta dolore dolores hic sequi tenetur, vero! Blanditiis consequatur culpa nisi ratione repellat! Delectus dolore magni nemo placeat qui sequi.
</Alert>
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium atque cupiditate, dignissimos dolorum, error inventore iste libero minus nihil possimus quasi quia quibusdam quisquam recusandae repellat reprehenderit temporibus.
</Alert>
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam dolore et, fuga impedit, iusto nam numquam officiis quas, repellat sapiente sit unde vel? Adipisci delectus dolore eius optio sunt.
</Alert>
<Alert type="success" title="Success title" :inline="false">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at culpa cupiditate deleniti eos ipsam ipsum, nostrum perspiciatis provident tempore? Aspernatur expedita praesentium voluptatibus. Accusamus explicabo iusto nobis reiciendis temporibus!
<template #actions>
<Button size="sm" color="green" class="mr-2">
Buttons everywhere
</Button>
<Button size="sm" outline color="green">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
And here
</Button>
</template>
</Alert>
</div>
</template>
<script setup>
import { Alert, Button } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertTitleExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex flex-col">
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
<Alert type="success" title="Some success title">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/guide/alert/examples/AlertTypeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="flex flex-col">
<Alert type="info" class="mb-2">Info</Alert>
<Alert type="warning" class="mb-2">Warning</Alert>
<Alert type="danger" class="mb-2">Danger</Alert>
<Alert type="dark" class="mb-2">Dark</Alert>
<Alert type="success">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

73
src/components/Alert/Alert.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div :class="alertClasses" role="alert" v-if="visible">
<div :class="inline ? '' : 'flex items-center'">
<svg v-if="icon" :class="['flex-shrink-0', 'w-5', 'h-5', textClasses]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span
:class="titleClasses"
v-if="title"
>
{{ title }}
</span>
<button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="!inline && closable">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div :class="contentClasses">
<slot />
</div>
<div class="inline-flex items-center">
<slot name="actions" />
</div>
<button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="inline && closable">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { useAlertClasses } from './useAlertClasses'
import { onBeforeUnmount, ref } from 'vue'
export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
const props = defineProps({
type: {
type: String as PropType<AlertType>,
default: 'info',
},
title: {
type: String,
default: '',
},
closable: {
type: Boolean,
default: false,
},
icon: {
type: Boolean,
default: true,
},
border: {
type: Boolean,
default: false,
},
inline: {
type: Boolean,
default: true,
},
})
const { alertClasses, textClasses, closeClasses, contentClasses, titleClasses } = useAlertClasses(props)
const visible = ref(true)
const onCloseClick = () => {
visible.value = false
}
onBeforeUnmount(() => {
console.log('UNMOUNTED')
})
</script>

106
src/components/Alert/useAlertClasses.ts Normal file
View File

@@ -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<AlertType, string> = {
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<AlertType, string> = {
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<AlertType, string> = {
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<AlertType, string> = {
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<string>,
textClasses: Ref<string>,
closeClasses: Ref<string>,
contentClasses: Ref<string>,
titleClasses: Ref<string>,
} {
const alertClasses = computed<string>(() => {
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<string>(() => {
return classNames(
alertTextClasses[props.type],
)
})
const closeClasses = computed<string>(() => {
return classNames(
defaultCloseButtonClasses,
closeButtonClasses[props.type],
)
})
const contentClasses = computed<string>(() => {
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<string>(() => {
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,
}
}

13
src/components/Button/useButtonClasses.ts
View File

@@ -4,7 +4,9 @@ import classNames from 'classnames'
import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue'
const buttonColorClasses: { hover: Record<ButtonVariant, string>, default: Record<ButtonVariant, string> } = { export type ButtonClassMap<T extends string> = { hover: Record<T, string>, default: Record<T, string> }
const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
default: { 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', 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', 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<ButtonVariant, string>, default: Reco
}, },
} }
const buttonOutlineColorClasses: { const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' | 'alternative'>> = {
hover: Record<Exclude<ButtonVariant, 'light' | 'alternative'>, string>,
default: Record<Exclude<ButtonVariant, 'light' | 'alternative'>, string>
} = {
default: { 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', 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', 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<ButtonGradient, string>, default: Record<ButtonGradient, string> } = { const buttonGradientClasses: ButtonClassMap<ButtonGradient> = {
hover: { hover: {
'cyan-blue': 'hover:bg-gradient-to-bl', 'cyan-blue': 'hover:bg-gradient-to-bl',
'green-blue': 'hover:bg-gradient-to-bl', 'green-blue': 'hover:bg-gradient-to-bl',
@@ -88,7 +87,7 @@ const buttonGradientClasses: { hover: Record<ButtonGradient, string>, default: R
}, },
} }
const buttonOutlineGradientClasses: { hover: Record<ButtonDuotoneGradient, string>, default: Record<ButtonDuotoneGradient, string> } = { const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
default: { default: {
'cyan-blue': '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', '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',

1
src/index.ts
View File

@@ -1,3 +1,4 @@
export { default as Button } from './components/Button/Button.vue' export { default as Button } from './components/Button/Button.vue'
export { default as Spinner } from './components/Spinner/Spinner.vue' export { default as Spinner } from './components/Spinner/Spinner.vue'
export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue' export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
export { default as Alert } from './components/Alert/Alert.vue'