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

refactor: Alert component refactoring (#195)

Browse Source
This commit is contained in:
Ilya Artamonov
2023-09-15 16:20:12 +03:00
committed by GitHub
parent 46c08239c3
commit 34cf4062e8
11 changed files with 329 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/Alert/Alert.vue
View File

@@ -1,69 +1,110 @@
<template>
<div :class="alertClasses" role="alert" v-if="visible">
<div :class="inline ? 'flex' : '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">
<div v-if="visible" v-bind="$attrs" :class="wrapperClasses" role="alert">
<div class="flex items-center">
<slot v-if="icon || $slots.icon" name="icon">
<svg class="flex-shrink-0 w-5 h-5" 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>
</slot>
<slot name="title"></slot>
</div>
<slot name="default" :on-close-click="onCloseClick" />
<slot name="close-icon" :on-close-click="onCloseClick">
<button v-if="closable" type="button" :class="closeBtnClasses" aria-label="Close" @click="onCloseClick">
<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>
<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" v-if="$slots.actions">
<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>
</slot>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { useAlertClasses } from './composables/useAlertClasses'
import { ref, toRefs } from 'vue'
import { ref, useAttrs } from 'vue'
import type { AlertType } from './types'
import { twMerge } from 'tailwind-merge'
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,
},
interface IAlertProps {
type?: AlertType
closable?: boolean
icon?: boolean
border?: boolean
}
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(defineProps<IAlertProps>(), {
type: 'info',
closable: false,
icon: false,
border: false,
})
defineSlots<{
/* eslint-disable @typescript-eslint/no-explicit-any */
default: any
'close-icon': any
icon: any
title: any
/* eslint-enable @typescript-eslint/no-explicit-any */
}>()
const emits = defineEmits<{
(e: 'close'): void
}>()
const { alertClasses, textClasses, closeClasses, contentClasses, titleClasses } = useAlertClasses(toRefs(props))
const attrs = useAttrs()
const alertTextClasses: Record<AlertType, string> = {
danger: 'text-red-800 dark:text-red-400',
dark: 'text-gray-800 dark:text-gray-300',
info: 'text-blue-800 dark:text-blue-400',
success: 'text-green-800 dark:text-green-400',
warning: 'text-yellow-800 dark:text-yellow-300',
}
const alertTypeClasses: Record<AlertType, string> = {
danger: 'bg-red-50',
dark: 'bg-gray-50',
info: 'bg-blue-50',
success: 'bg-green-50',
warning: 'bg-yellow-50',
}
const defaultCloseButtonClasses = 'ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 dark:bg-gray-800 dark:hover:bg-gray-700'
const closeButtonClasses: Record<AlertType, string> = {
danger: 'text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-200 focus:ring-red-400',
dark: 'text-gray-500 dark:text-gray-300 bg-gray-50 hover:bg-gray-200 focus:ring-gray-400 dark:hover:text-white',
info: 'text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-200 focus:ring-blue-400',
success: 'text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-200 focus:ring-green-400',
warning: 'text-yellow-500 dark:text-yellow-300 bg-yellow-50 hover:bg-yellow-200 focus:ring-yellow-400',
}
const closeBtnClasses = twMerge(defaultCloseButtonClasses, closeButtonClasses[props.type])
const borderColor: Record<AlertType, string> = {
danger: 'border-red-500 dark:text-red-400',
dark: 'border-gray-500 dark:text-gray-400',
info: 'border-blue-500 dark:text-blue-400',
success: 'border-green-500 dark:text-green-400',
warning: 'border-yellow-500 dark:text-yellow-400',
}
const colors = {
danger: [alertTextClasses.danger, alertTypeClasses.danger].join(' '),
dark: [alertTextClasses.dark, alertTypeClasses.dark].join(' '),
info: [alertTextClasses.info, alertTypeClasses.info].join(' '),
success: [alertTextClasses.success, alertTypeClasses.success].join(' '),
warning: [alertTextClasses.warning, alertTypeClasses.warning].join(' '),
}
const wrapperClasses = twMerge(
'p-4 gap-3 text-sm dark:bg-gray-800 rounded-lg',
colors[props.type],
(props.icon || props.closable) && 'flex items-center',
borderColor[props.type],
props.border && 'border',
attrs.class as string,
)
const visible = ref(true)
const onCloseClick = () => {
function onCloseClick() {
emits('close')
visible.value = false
}
</script>

106
src/components/Alert/composables/useAlertClasses.ts
View File

@@ -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<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: Ref<AlertType>
border: Ref<boolean>
icon: Ref<boolean>
inline: Ref<boolean>
title: Ref<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.value],
textClasses.value,
props.border.value ? alertBorderClasses[props.type.value] : 'rounded-lg', // rounded only if no border
props.inline.value ? 'flex' : '',
)
})
const textClasses = computed<string>(() => {
return classNames(
alertTextClasses[props.type.value],
)
})
const closeClasses = computed<string>(() => {
return classNames(
defaultCloseButtonClasses,
closeButtonClasses[props.type.value],
)
})
const contentClasses = computed<string>(() => {
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<string>(() => {
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,
}
}