bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance CartItem component with non-selectable elements

Browse Source 
- Updated quantity control buttons and display in CartItem.vue to include the 'select-none' class, preventing text selection during user interaction.
This commit is contained in:
Bastian Masanek
2025-11-03 16:31:05 +01:00
parent b302411626
commit 0b7098662b
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Cart/CartItem.vue
View File

@@ -132,20 +132,20 @@ const placeholderImage = '/img/makerspace-jk-2025.jpg'
<!-- Bottom Row: Quantity Controls (left) + Subtotal (right) --> <!-- Bottom Row: Quantity Controls (left) + Subtotal (right) -->
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<!-- Quantity Controls --> <!-- Quantity Controls -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 select-none">
<!-- Decrease Button --> <!-- Decrease Button -->
<Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10" <Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10 select-none"
:disabled="loading || localQuantity <= 1" @click="decreaseQuantity"> :disabled="loading || localQuantity <= 1" @click="decreaseQuantity">
<Minus class="h-4 w-4" /> <Minus class="h-4 w-4" />
</Button> </Button>
<!-- Quantity Display --> <!-- Quantity Display -->
<div class="flex h-8 w-16 items-center justify-center rounded-md border border-white/20 bg-white/5 text-sm font-medium text-white"> <div class="flex h-8 w-16 items-center justify-center rounded-md border border-white/20 bg-white/5 text-sm font-medium text-white select-none">
{{ localQuantity }} {{ localQuantity }}
</div> </div>
<!-- Increase Button --> <!-- Increase Button -->
<Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10" <Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10 select-none"
:disabled="loading || localQuantity >= item.product.stockQuantity" @click="increaseQuantity"> :disabled="loading || localQuantity >= item.product.stockQuantity" @click="increaseQuantity">
<Plus class="h-4 w-4" /> <Plus class="h-4 w-4" />
</Button> </Button>