53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<component
|
|
:is="linkable ? NuxtLink : 'div'"
|
|
:to="linkable ? localePath(`/catalog/products/${product.uuid}`) : undefined"
|
|
class="block"
|
|
:class="{ 'cursor-pointer': selectable }"
|
|
@click="selectable && $emit('select')"
|
|
>
|
|
<Card
|
|
padding="sm"
|
|
:interactive="linkable || selectable"
|
|
:class="[
|
|
isSelected && 'ring-2 ring-primary ring-offset-2'
|
|
]"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack gap="1">
|
|
<Text size="base" weight="semibold">{{ product.name }}</Text>
|
|
<Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
|
|
</Stack>
|
|
<Text v-if="product.description && !compact" tone="muted" size="sm">{{ product.description }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NuxtLink } from '#components'
|
|
|
|
interface Product {
|
|
uuid?: string | null
|
|
name?: string | null
|
|
categoryName?: string | null
|
|
description?: string | null
|
|
}
|
|
|
|
const props = defineProps<{
|
|
product: Product
|
|
selectable?: boolean
|
|
isSelected?: boolean
|
|
compact?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'select'): void
|
|
}>()
|
|
|
|
const localePath = useLocalePath()
|
|
const { t } = useI18n()
|
|
|
|
const linkable = computed(() => !props.selectable && props.product.uuid)
|
|
</script>
|