mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-02-25 09:13:11 -05:00
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="text-center">
|
||
|
|
<v-dialog v-model="dialog" min-height="700" max-width="1000">
|
||
|
|
<v-card min-height="725" height="100%">
|
||
|
|
<v-card-text>
|
||
|
|
<v-card-title></v-card-title>
|
||
|
|
<v-row justify="center">
|
||
|
|
<v-col cols="1"> </v-col>
|
||
|
|
<v-col>
|
||
|
|
<SearchBar @results="updateResults" :show-results="false" />
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="2">
|
||
|
|
<v-btn icon>
|
||
|
|
<v-icon large> mdi-filter </v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
|
||
|
|
<v-row v-if="searchResults">
|
||
|
|
<v-col
|
||
|
|
:sm="6"
|
||
|
|
:md="6"
|
||
|
|
:lg="4"
|
||
|
|
:xl="3"
|
||
|
|
v-for="item in searchResults.slice(0, 10)"
|
||
|
|
:key="item.item.name"
|
||
|
|
>
|
||
|
|
<RecipeCard
|
||
|
|
:route="false"
|
||
|
|
:name="item.item.name"
|
||
|
|
:description="item.item.description"
|
||
|
|
:slug="item.item.slug"
|
||
|
|
:rating="item.item.rating"
|
||
|
|
:image="item.item.image"
|
||
|
|
@click="emitSelect(item.item.name, item.item.slug)"
|
||
|
|
/>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import SearchBar from "../UI/SearchBar";
|
||
|
|
import RecipeCard from "../UI/RecipeCard";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
SearchBar,
|
||
|
|
RecipeCard,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
searchResults: null,
|
||
|
|
dialog: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
updateResults(results) {
|
||
|
|
this.searchResults = results;
|
||
|
|
},
|
||
|
|
emitSelect(name, slug) {
|
||
|
|
this.$emit("select", name, slug);
|
||
|
|
this.dialog = false;
|
||
|
|
},
|
||
|
|
open() {
|
||
|
|
this.dialog = true;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|