44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ floating?: boolean }>()
|
|
|
|
const search = defineModel<string>('search', { required: true })
|
|
const sort = defineModel<WishlistSort>('sort', { required: true })
|
|
|
|
const sortItems = [
|
|
{ label: 'Autor', value: 'author' },
|
|
{ label: 'Titel', value: 'title' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<UInput
|
|
v-model="search"
|
|
icon="i-lucide-search"
|
|
placeholder="Titel oder Autor"
|
|
:variant="floating ? 'none' : 'outline'"
|
|
class="min-w-0 flex-1"
|
|
:ui="{ trailing: 'pe-1' }"
|
|
>
|
|
<template v-if="search" #trailing>
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="link"
|
|
size="sm"
|
|
aria-label="Suche leeren"
|
|
@click="search = ''"
|
|
/>
|
|
</template>
|
|
</UInput>
|
|
<USelect
|
|
v-model="sort"
|
|
:items="sortItems"
|
|
icon="i-lucide-arrow-down-a-z"
|
|
:variant="floating ? 'soft' : 'outline'"
|
|
class="w-28 shrink-0"
|
|
:class="{ 'rounded-full': floating }"
|
|
/>
|
|
</div>
|
|
</template>
|