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>
100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { SortKey } from '~/composables/useResultFilters'
|
|
|
|
const sortBy = defineModel<SortKey>('sortBy', { default: 'price' })
|
|
const viewMode = defineModel<'full' | 'compact'>('viewMode', { default: 'full' })
|
|
const { showOriginTime } = useOriginTime()
|
|
|
|
defineProps<{
|
|
count: number
|
|
hasActiveFilters: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
toggleFilters: []
|
|
resetFilters: []
|
|
}>()
|
|
|
|
const sortOptions: { value: SortKey, label: string, icon: string }[] = [
|
|
{ value: 'price', label: 'Precio', icon: 'i-lucide-arrow-down-narrow-wide' },
|
|
{ value: 'departure', label: 'Salida', icon: 'i-lucide-clock' },
|
|
{ value: 'duration', label: 'Duracion', icon: 'i-lucide-timer' },
|
|
{ value: 'stops', label: 'Escalas', icon: 'i-lucide-git-branch' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<p class="text-sm text-muted">
|
|
{{ count }} resultado{{ count !== 1 ? 's' : '' }}
|
|
</p>
|
|
<UButton
|
|
v-if="hasActiveFilters"
|
|
label="Limpiar filtros"
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="xs"
|
|
@click="$emit('resetFilters')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<!-- Sort buttons -->
|
|
<div class="flex gap-0.5">
|
|
<UButton
|
|
v-for="opt in sortOptions"
|
|
:key="opt.value"
|
|
:label="opt.label"
|
|
:icon="opt.icon"
|
|
:color="sortBy === opt.value ? 'primary' : 'neutral'"
|
|
:variant="sortBy === opt.value ? 'soft' : 'ghost'"
|
|
size="xs"
|
|
@click="sortBy = opt.value"
|
|
/>
|
|
</div>
|
|
|
|
<USeparator orientation="vertical" class="h-5" />
|
|
|
|
<!-- View mode -->
|
|
<div class="flex gap-0.5">
|
|
<UButton
|
|
icon="i-lucide-rows-3"
|
|
:color="viewMode === 'full' ? 'primary' : 'neutral'"
|
|
:variant="viewMode === 'full' ? 'soft' : 'ghost'"
|
|
size="xs"
|
|
@click="viewMode = 'full'"
|
|
/>
|
|
<UButton
|
|
icon="i-lucide-list"
|
|
:color="viewMode === 'compact' ? 'primary' : 'neutral'"
|
|
:variant="viewMode === 'compact' ? 'soft' : 'ghost'"
|
|
size="xs"
|
|
@click="viewMode = 'compact'"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Origin time toggle -->
|
|
<UButton
|
|
icon="i-lucide-clock"
|
|
label="Hora origen"
|
|
:color="showOriginTime ? 'primary' : 'neutral'"
|
|
:variant="showOriginTime ? 'soft' : 'ghost'"
|
|
size="xs"
|
|
@click="showOriginTime = !showOriginTime"
|
|
/>
|
|
|
|
<!-- Filter toggle -->
|
|
<UButton
|
|
icon="i-lucide-sliders-horizontal"
|
|
label="Filtros"
|
|
:color="hasActiveFilters ? 'primary' : 'neutral'"
|
|
:variant="hasActiveFilters ? 'soft' : 'ghost'"
|
|
size="xs"
|
|
@click="$emit('toggleFilters')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|