Use Card components instead of buttons for product selection
All checks were successful
Build Docker Image / build (push) Successful in 4m30s
All checks were successful
Build Docker Image / build (push) Successful in 4m30s
This commit is contained in:
@@ -43,16 +43,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #filters>
|
<template #filters>
|
||||||
<div class="flex gap-2 flex-wrap">
|
<div class="flex gap-3 overflow-x-auto pb-2">
|
||||||
<button
|
<Card
|
||||||
v-for="product in products"
|
v-for="product in products"
|
||||||
:key="product.uuid"
|
:key="product.uuid"
|
||||||
class="btn btn-sm"
|
padding="sm"
|
||||||
:class="selectedProductUuid === product.uuid ? 'btn-primary' : 'btn-outline'"
|
interactive
|
||||||
|
class="min-w-32 cursor-pointer shrink-0"
|
||||||
|
:class="selectedProductUuid === product.uuid ? 'ring-2 ring-primary' : ''"
|
||||||
@click="selectedProductUuid = product.uuid"
|
@click="selectedProductUuid = product.uuid"
|
||||||
>
|
>
|
||||||
{{ product.name }}
|
<Text weight="semibold" size="sm">{{ product.name }}</Text>
|
||||||
</button>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user