search as separate component

This commit is contained in:
Vri 🌈 2023-07-06 18:46:38 +02:00
parent 55b00030ac
commit fab03fac0c
Signed by: vrifox
GPG key ID: D40098E5B60B2197
5 changed files with 50 additions and 42 deletions

View file

@ -1,7 +1,6 @@
<script setup lang="ts">
import { state, fetchPapers, getTopics } from '@/stores'
import { fetchPapers, getTopics } from '@/stores'
import MainMenu from '@/components/MainMenu.vue'
import SearchBar from '@/components/SearchBar.vue'
/* import FooterMenu from '@/components/FooterMenu.vue' */
import { onMounted } from 'vue'
@ -25,9 +24,8 @@ onMounted (async () => {
</h1>
<MainMenu />
</div>
<SearchBar />
</header>
<main class="max-w-5xl m-auto">
<RouterView>
</RouterView>

View file

@ -1,42 +1,7 @@
<script setup lang="ts">
import { updateSearch } from '@/stores';
import { onUpdated, ref } from 'vue';
let searchValue = ref('')
let searchType = ref('')
function submit(type: string) { searchType = ref(type) }
onUpdated(() => updateSearch(searchValue, searchType))
import TheSearch from '@/components/TheSearch.vue';
</script>
<template>
<form class="sticky top-0 flex flex-row place-content-center">
<label class="hidden" for="searchBar">Suche</label>
<div class="flex flex-row w-full max-w-5xl">
<input
id="searchBar"
class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
type="search"
placeholder="z. B. Thema, Name, VII-EF-08640, …"
v-model="searchValue"
@keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')"
/>
<div class="flex flex-row p-4 place-content-center">
<button
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
@click.prevent="submit('filter')"
aria-keyshortcuts="Enter"
>Suchen
</button>
<button
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
@click.prevent="submit('assist')"
aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter"
>Fragen
</button>
</div>
</div>
</form>
<TheSearch />
</template>

View file

@ -0,0 +1,42 @@
<script setup lang="ts">
import { updateSearch } from '@/stores';
import { onUpdated, ref } from 'vue';
let searchValue = ref('');
let searchType = ref('');
function submit(type: string) { searchType = ref(type) };
onUpdated(() => updateSearch(searchValue, searchType));
</script>
<template>
<form class="sticky top-2 flex flex-row place-content-center m-2">
<label class="hidden" for="searchBar">Suche</label>
<div class="flex flex-row w-full max-w-5xl gap-2">
<input
id="searchBar"
class="p-2 grow placeholder:text-text-300 dark:placeholder:text-text-700 text-xl text-center focus-visible:outline focus-visible:outline-current rounded-xl bg-background-100 dark:bg-background-900"
type="search"
placeholder="Suchen, z. B. Thema, Name, VII-EF-08640, …"
v-model="searchValue"
@keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')"
/>
<div class="flex flex-row place-content-center">
<button
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
@click.prevent="submit('filter')"
aria-keyshortcuts="Enter"
>Suchen
</button>
<button
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
@click.prevent="submit('assist')"
aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter"
>Fragen
</button>
</div>
</div>
</form>
</template>

View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import TheSearch from '@/components/TheSearch.vue'
</script>
<template>
Landing Page
<TheSearch />
</template>

View file

@ -1,9 +1,11 @@
<script setup lang="ts">
import FilterSidebar from '@/components/papers/FilterSidebar.vue'
import TopicList from '@/components/papers/TopicList.vue'
import SearchBar from '@/components/SearchBar.vue'
</script>
<template>
<SearchBar />
<div
class="flex flex-row"
>