527379a2cd
- Added AddressForm and CheckoutForm components for user input during checkout. - Implemented validation using Zod and VeeValidate for billing address fields. - Created OrderSummary and MockPayPalButton components for order confirmation and payment simulation. - Updated CartSheet and CartSidebar to navigate to the new checkout page at '/kasse'. - Introduced new API endpoints for validating checkout data and creating orders. - Enhanced user experience with responsive design and error handling. These changes complete the checkout functionality, allowing users to enter billing information, simulate payment, and confirm orders.
42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { type HTMLAttributes, computed } from 'vue'
|
|
import { Checkbox as CheckboxPrimitive, CheckboxIndicator } from 'reka-ui'
|
|
import { Check } from 'lucide-vue-next'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface CheckboxProps {
|
|
checked?: boolean
|
|
disabled?: boolean
|
|
class?: HTMLAttributes['class']
|
|
id?: string
|
|
}
|
|
|
|
const props = defineProps<CheckboxProps>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:checked': [value: boolean]
|
|
}>()
|
|
|
|
const delegatedProps = computed(() => {
|
|
const { class: _, ...delegated } = props
|
|
return delegated
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<CheckboxPrimitive
|
|
v-bind="delegatedProps"
|
|
:class="
|
|
cn(
|
|
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
|
props.class
|
|
)
|
|
"
|
|
@update:checked="emit('update:checked', $event)"
|
|
>
|
|
<CheckboxIndicator class="flex items-center justify-center text-current">
|
|
<Check class="h-4 w-4" />
|
|
</CheckboxIndicator>
|
|
</CheckboxPrimitive>
|
|
</template>
|