Files
webapp/app/components/catalog/ProductCard.vue
Ruslan Bakiev 2b6cccdead
All checks were successful
Build Docker Image / build (push) Successful in 5m8s
Fix all TypeScript errors and remove Storybook
- Remove all Storybook files and configuration
- Add type declarations for @vueuse/core, @formkit/core, vue3-apexcharts
- Fix TypeScript configuration (typeRoots, include paths)
- Fix Sentry config - move settings to plugin
- Fix nullable prop assignments with ?? operator
- Fix type narrowing issues with explicit type assertions
- Fix Card component linkable computed properties
- Update codegen with operationResultSuffix
- Fix GraphQL operation type definitions
2026-01-26 00:32:36 +07:00

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">
<Text size="base" weight="semibold">{{ product.name }}</Text>
<Text v-if="product.offersCount" tone="muted" size="sm">
{{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
</Text>
<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
description?: string | null
offersCount?: number | 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>