b8906efc80
Some checks failed
ci / ci (22, ubuntu-latest) (push) Has been cancelled
Nuxt 4 + Supabase + Flightics API. Incluye búsqueda de vuelos, inspiraciones, watchlist, tracking de precios y mapa interactivo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 lines
1.4 KiB
Vue
34 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: { adult: number; child: number; infant: number }
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: { adult: number; child: number; infant: number }]
|
|
}>()
|
|
|
|
function update(key: 'adult' | 'child' | 'infant', delta: number) {
|
|
const val = { ...props.modelValue }
|
|
val[key] = Math.max(key === 'adult' ? 1 : 0, val[key] + delta)
|
|
emit('update:modelValue', val)
|
|
}
|
|
|
|
const total = computed(() => props.modelValue.adult + props.modelValue.child + props.modelValue.infant)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-2">
|
|
<div v-for="type in (['adult', 'child', 'infant'] as const)" :key="type" class="flex items-center justify-between">
|
|
<span class="text-sm capitalize text-neutral-600 dark:text-neutral-400">
|
|
{{ type === 'adult' ? 'Adultos' : type === 'child' ? 'Ninos' : 'Bebes' }}
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<UButton size="xs" icon="i-lucide-minus" color="neutral" variant="outline" :disabled="type === 'adult' ? modelValue[type] <= 1 : modelValue[type] <= 0" @click="update(type, -1)" />
|
|
<span class="w-6 text-center text-sm font-medium">{{ modelValue[type] }}</span>
|
|
<UButton size="xs" icon="i-lucide-plus" color="neutral" variant="outline" @click="update(type, 1)" />
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-neutral-500">{{ total }} pasajero{{ total !== 1 ? 's' : '' }}</p>
|
|
</div>
|
|
</template>
|