59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<q-card
|
|
:class="[
|
|
'rounded-lg shadow-md transition-shadow',
|
|
hoverable && 'hover:shadow-lg cursor-pointer',
|
|
customClass
|
|
]"
|
|
style="border: 1px solid #e5e7eb;"
|
|
@click="handleClick"
|
|
>
|
|
<!-- Card Header -->
|
|
<q-card-section v-if="$slots.header || title" class="border-b border-gray-200">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h3 v-if="title" class="text-lg font-semibold text-gray-900">{{ title }}</h3>
|
|
<p v-if="subtitle" class="text-sm text-gray-600 mt-1">{{ subtitle }}</p>
|
|
</div>
|
|
<slot name="header-actions"></slot>
|
|
</div>
|
|
<slot name="header"></slot>
|
|
</q-card-section>
|
|
|
|
<!-- Card Content -->
|
|
<q-card-section :class="contentClass">
|
|
<slot></slot>
|
|
</q-card-section>
|
|
|
|
<!-- Card Footer -->
|
|
<q-card-section v-if="$slots.footer" class="border-t border-gray-200">
|
|
<slot name="footer"></slot>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title?: string;
|
|
subtitle?: string;
|
|
hoverable?: boolean;
|
|
customClass?: string;
|
|
contentClass?: string;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
title: '',
|
|
subtitle: '',
|
|
hoverable: false,
|
|
customClass: '',
|
|
contentClass: ''
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
click: [];
|
|
}>();
|
|
|
|
const handleClick = () => {
|
|
emit('click');
|
|
};
|
|
</script>
|