2026-05-31 11:51:52 +03:30
|
|
|
<template>
|
|
|
|
|
<article
|
2026-06-14 21:04:26 +03:30
|
|
|
class="rounded-2xl border-base surface shadow-sm"
|
2026-05-31 11:51:52 +03:30
|
|
|
:class="[paddingClass, clickable ? 'cursor-pointer' : '']"
|
|
|
|
|
@click="clickable ? $emit('click') : undefined"
|
|
|
|
|
>
|
|
|
|
|
<slot />
|
|
|
|
|
</article>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
const props = withDefaults(
|
|
|
|
|
defineProps<{
|
|
|
|
|
clickable?: boolean
|
|
|
|
|
compact?: boolean
|
|
|
|
|
}>(),
|
|
|
|
|
{
|
|
|
|
|
clickable: false,
|
|
|
|
|
compact: true
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
defineEmits<{
|
|
|
|
|
(e: 'click'): void
|
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
const paddingClass = computed(() => (props.compact ? 'px-3 py-3' : 'p-4'))
|
|
|
|
|
</script>
|
