796204b3cd
All checks were successful
Build Docker Image / build (push) Successful in 4m8s
- CatalogPage: added gridColumns prop (1/2/3 columns) - Card: added hover:shadow-lg on interactive cards - Products, hubs, suppliers pages now use 3-column grid - Offers remain full-width (gridColumns=1 default)
45 lines
995 B
Vue
45 lines
995 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 hover:shadow-lg transition-shadow duration-200'
|
|
: ''
|
|
const baseClass = 'card'
|
|
return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
|
|
})
|
|
</script>
|