123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<Card :class="[cardClasses, 'border-[1px] border-complement-50']" :pt="pt">
|
|
<template #header>
|
|
<div class="ui-card-header grid grid-cols-a pb-2 justify-start items-center">
|
|
<h1 class="font-bold text-[11px] text-complement-700 title-generic">{{ title }}</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<slot />
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import Card from 'primevue/card'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value) => ['default', 'elevated', 'outlined', 'filled'].includes(value)
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value) => ['small', 'default', 'large'].includes(value)
|
|
},
|
|
shadow: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value) => ['none', 'sm', 'default', 'md', 'lg', 'xl'].includes(value)
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
rounded: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hover: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
pt: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const cardClasses = computed(() => {
|
|
const classes = ['ui-card']
|
|
|
|
switch (props.size) {
|
|
case 'small':
|
|
classes.push('ui-card--small')
|
|
break
|
|
case 'large':
|
|
classes.push('ui-card--large')
|
|
break
|
|
default:
|
|
classes.push('ui-card--default')
|
|
}
|
|
|
|
switch (props.variant) {
|
|
case 'elevated':
|
|
classes.push('ui-card--elevated')
|
|
break
|
|
case 'outlined':
|
|
classes.push('ui-card--outlined')
|
|
break
|
|
case 'filled':
|
|
classes.push('ui-card--filled')
|
|
break
|
|
default:
|
|
classes.push('ui-card--default')
|
|
}
|
|
|
|
if (props.shadow !== 'none') {
|
|
switch (props.shadow) {
|
|
case 'sm':
|
|
classes.push('ui-card--shadow-sm')
|
|
break
|
|
case 'md':
|
|
classes.push('ui-card--shadow-md')
|
|
break
|
|
case 'lg':
|
|
classes.push('ui-card--shadow-lg')
|
|
break
|
|
case 'xl':
|
|
classes.push('ui-card--shadow-xl')
|
|
break
|
|
default:
|
|
classes.push('ui-card--shadow')
|
|
}
|
|
}
|
|
|
|
if (!props.border) {
|
|
classes.push('ui-card--no-border')
|
|
}
|
|
|
|
if (props.rounded) {
|
|
classes.push('ui-card--rounded')
|
|
}
|
|
|
|
if (props.hover) {
|
|
classes.push('ui-card--hover')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
})
|
|
</script>
|