ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

autofocus search field on search page

Browse source
This commit is contained in:
Ruidy 2024-12-17 21:26:39 +01:00
parent 5bd9f2c382
commit 7decbe7cbe
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
2 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/recipe/search.vue
View file

@ -9,7 +9,8 @@
placeholder="Search recipes..."
@focus="isFocused = true"
@blur="isFocused = false"
>
:autofocus="autofocus"
/>
<kbd
class="hidden md:inline-block kbd kbd-sm"
:class="{ 'opacity-50': !isFocused }"
@ -27,6 +28,9 @@
<script setup lang="ts">
const model = defineModel<string>();
const props = defineProps<{
autofocus?: boolean;
}>();
const isFocused = ref(false);
// Debounced navigation

35
pages/search.vue
View file

@ -4,18 +4,24 @@ import type { Recipe } from "~/types/recipe";
const route = useRoute();
const searchQuery = computed(() => route.query.q as string);
const searchResults = ref<Recipe[]>([]);
const loading = ref(false);
const { data, status, error } = await useRecipeSearch(searchQuery.value || "");
if (error.value) {
throw createError({
statusCode: 500,
message: error.value.message,
});
if (searchQuery.value) {
loading.value = true;
const { data, error } = await useRecipeSearch(searchQuery.value);
if (error.value) {
throw createError({
statusCode: 500,
message: error.value.message,
});
}
searchResults.value = data.value!;
loading.value = false;
}
searchResults.value = data.value;
watch(searchQuery, async (newQuery) => {
loading.value = true;
const { data, error } = await useRecipeSearch(newQuery.trim());
if (error.value) {
throw createError({
@ -24,21 +30,26 @@ watch(searchQuery, async (newQuery) => {
});
}
searchResults.value = data.value;
searchResults.value = data.value!;
loading.value = false;
});
</script>
<template>
<div class="container mx-auto px-4">
<div v-if="status === 'pending'" class="flex justify-center my-8">
<recipe-search
class="md:hidden mb-6"
:initial-query="searchQuery"
:autofocus="true"
/>
<div v-if="loading" class="flex justify-center my-8">
<span class="loading loading-spinner loading-lg text-primary" />
</div>
<div
v-else-if="searchResults.length > 0"
v-if="searchResults.length > 0"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"
>
<recipe-search class="md:hidden mb-6" :initial-query="searchQuery" />
<div
v-for="recipe in searchResults"
:key="recipe.id"