43310f5c28
All checks were successful
Build Docker Image / build (push) Successful in 4m37s
- Add clusterNodeType prop to CatalogPage - Update useClusteredNodes to accept nodeType parameter - Enable server clustering on /offers and /suppliers pages - Add hoveredId sync on /offers page - Remove hover:shadow-lg animation from Card
43 lines
968 B
Vue
43 lines
968 B
Vue
<template>
|
|
<div :class="cardClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
padding: {
|
|
type: String,
|
|
default: 'medium', // none | small | medium
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: 'default', // default | muted | primary
|
|
},
|
|
interactive: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const paddingMap: Record<string, string> = {
|
|
none: '',
|
|
small: 'p-4',
|
|
medium: 'p-6',
|
|
}
|
|
|
|
const toneMap: Record<string, string> = {
|
|
default: 'bg-base-100',
|
|
muted: 'bg-base-200',
|
|
primary: 'bg-primary/10',
|
|
}
|
|
|
|
const cardClass = computed(() => {
|
|
const paddingClass = paddingMap[props.padding] || paddingMap.medium
|
|
const toneClass = toneMap[props.tone] || toneMap.default
|
|
const interactiveClass = props.interactive ? 'cursor-pointer' : ''
|
|
const baseClass = 'card transition-all duration-200'
|
|
return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
|
|
})
|
|
</script>
|