32 lines
822 B
Vue
32 lines
822 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
color?: 'info' | 'success' | 'warning' | 'error'
|
|
density?: 'regular' | 'compact'
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
color: 'info',
|
|
density: 'regular'
|
|
})
|
|
|
|
const styleClass = computed(() => {
|
|
const colorVariants = {
|
|
'info': 'dui-alert-info',
|
|
'success': 'dui-alert-success',
|
|
'warning': 'dui-alert-warning',
|
|
'error': 'dui-alert-error'
|
|
}
|
|
const densityVariants = {
|
|
'regular': 'py-4 px-4',
|
|
'compact': 'py-2 px-4'
|
|
}
|
|
const colorClass = colorVariants[props.color]
|
|
const densityClass = densityVariants[props.density]
|
|
return [colorClass, densityClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="dui-alert shadow-lg items-start" :class="styleClass">
|
|
<div class="flex items-center w-full"><slot></slot></div>
|
|
</div>
|
|
</template>
|