You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.5 KiB
89 lines
2.5 KiB
<script setup lang="ts">
|
|
import { useMediaQuery } from '@vueuse/core'
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@/components/ui/sheet'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import CartEmpty from './CartEmpty.vue'
|
|
import CartItem from './CartItem.vue'
|
|
import CartSummary from './CartSummary.vue'
|
|
|
|
// Get cart state and UI controls
|
|
const { items, itemCount, total, loading, updateItem, removeItem } = useCart()
|
|
const { isOpen, close } = useCartUI()
|
|
|
|
// Detect mobile viewport (< 640px = Tailwind sm breakpoint)
|
|
const isMobile = useMediaQuery('(max-width: 639px)')
|
|
|
|
// Responsive side prop: bottom for mobile, right for desktop
|
|
const side = computed(() => isMobile.value ? 'bottom' : 'right')
|
|
|
|
// Responsive sizing classes
|
|
const sizeClasses = computed(() =>
|
|
isMobile.value ? 'h-[90vh]' : 'w-full sm:w-[400px]'
|
|
)
|
|
|
|
// Handle quantity update
|
|
async function handleUpdateQuantity(itemId: string, quantity: number) {
|
|
await updateItem(itemId, quantity)
|
|
}
|
|
|
|
// Handle item removal
|
|
async function handleRemoveItem(itemId: string) {
|
|
await removeItem(itemId)
|
|
}
|
|
|
|
// Navigate to checkout
|
|
function handleCheckout() {
|
|
close()
|
|
navigateTo('/checkout')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Sheet :open="isOpen" @update:open="(open) => !open && close()">
|
|
<SheetContent :side="side" :class="[sizeClasses, 'p-0 flex flex-col']">
|
|
<!-- Header -->
|
|
<SheetHeader class="px-6 py-4 border-b">
|
|
<SheetTitle class="text-xl font-bold">
|
|
Warenkorb ({{ itemCount }})
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="itemCount === 0" class="flex-1 flex items-start justify-center px-6 pt-8">
|
|
<CartEmpty />
|
|
</div>
|
|
|
|
<!-- Cart Items + Summary -->
|
|
<template v-else>
|
|
<!-- Scrollable Items List -->
|
|
<ScrollArea class="flex-1 px-6">
|
|
<div class="space-y-4 py-4">
|
|
<CartItem
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
:item="item"
|
|
:loading="loading"
|
|
@update:quantity="(qty) => handleUpdateQuantity(item.id, qty)"
|
|
@remove="handleRemoveItem(item.id)"
|
|
/>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<!-- Sticky Footer with Summary -->
|
|
<div class="border-t px-6 py-4 bg-background">
|
|
<CartSummary
|
|
:items="items"
|
|
:total="total"
|
|
:loading="loading"
|
|
@checkout="handleCheckout"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</template>
|
|
|