mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-03 13:19:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

moved many compoents to composition API

Browse Source
This commit is contained in:
vabene1111
2024-04-21 15:58:31 +02:00
parent ce6c43fb62
commit e040a10096
13 changed files with 342 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
vue3/src/components/display/RecipeCard.vue
View File

@@ -1,64 +1,68 @@
<template>
<template v-if="!loading">
<v-card :to="`/recipe/${recipe.id}`" :style="{'height': height}">
<template v-if="!componentProps.loading">
<v-card :to="`/recipe/${componentProps.recipe.id}`" :style="{'height': componentProps.height}">
<v-tooltip
class="align-center justify-center"
location="top center" origin="overlap"
no-click-animation
:open-on-hover="recipe.description != null && recipe.description != ''"
:open-on-hover="componentProps.recipe.description != null && componentProps.recipe.description != ''"
contained
>
<template v-slot:activator="{ props }">
<v-img cover
height="60%"
:src="recipeImageUrl"
<recipe-image
height="60%"
width="100%"
:recipe="componentProps.recipe"
>
<v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
class="float-start ms-1 mt-1" v-if="recipe.workingTime != undefined && recipe.workingTime > 0">
{{ recipe.workingTime }}
</v-chip>
<v-chip size="x-small" prepend-icon="fa fa-pause" label color="secondary" variant="elevated"
class="float-start ms-1 mt-1" v-if="recipe.waitingTime != undefined && recipe.waitingTime > 0">
{{ recipe.waitingTime }}
</v-chip>
<template #overlay>
<v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
class="float-start ms-1 mt-1" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">
{{ recipe.workingTime }}
</v-chip>
<v-chip size="x-small" prepend-icon="fa fa-pause" label color="secondary" variant="elevated"
class="float-start ms-1 mt-1" v-if="componentProps.recipe.waitingTime != undefined && componentProps.recipe.waitingTime > 0">
{{ recipe.waitingTime }}
</v-chip>
<keywords-component variant="flat" :keywords="recipe.keywords"></keywords-component>
</v-img>
<v-divider class="p-0" v-if="recipe.image == null"></v-divider>
<keywords-component variant="flat" :keywords="componentProps.recipe.keywords"></keywords-component>
</template>
</recipe-image>
<v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
</template>
<div v-if="recipe.description != null && recipe.description != ''">
{{ recipe.description }}
<div v-if="componentProps.recipe.description != null && componentProps.recipe.description != ''">
{{ componentProps.recipe.description }}
</div>
</v-tooltip>
<v-card-item>
<v-card-title>
{{ recipe.name }}
<recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
{{ componentProps.recipe.name }}
<recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
</v-card-title>
<v-card-subtitle>by {{ recipe.createdBy}}</v-card-subtitle>
<v-card-subtitle>by {{ componentProps.recipe.createdBy }}</v-card-subtitle>
<!-- <v-card-subtitle v-if="show_keywords">-->
<!-- <keywords-component :keywords="recipe.keywords"></keywords-component>-->
<!-- </v-card-subtitle>-->
<!-- <v-rating-->
<!-- v-if="recipe.rating != null"-->
<!-- v-model="recipe.rating"-->
<!-- color="amber"-->
<!-- density="comfortable"-->
<!-- half-increments-->
<!-- readonly-->
<!-- size="x-small"-->
<!-- ></v-rating>-->
<!-- <v-card-subtitle v-if="show_keywords">-->
<!-- <keywords-component :keywords="recipe.keywords"></keywords-component>-->
<!-- </v-card-subtitle>-->
<!-- <v-rating-->
<!-- v-if="recipe.rating != null"-->
<!-- v-model="recipe.rating"-->
<!-- color="amber"-->
<!-- density="comfortable"-->
<!-- half-increments-->
<!-- readonly-->
<!-- size="x-small"-->
<!-- ></v-rating>-->
</v-card-item>
</v-card>
</template>
<template v-else>
<v-card :style="{'height': height}">
<v-card :style="{'height': componentProps.height}">
<v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
<v-card-title>
<v-skeleton-loader type="heading"></v-skeleton-loader>
@@ -72,29 +76,22 @@
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'
<script setup lang="ts">
import {PropType} from 'vue'
import KeywordsComponent from "@/components/display/KeywordsBar.vue";
import {Recipe, RecipeOverview} from "@/openapi";
import recipeNoImage from '@/assets/recipe_no_image.svg';
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
export default defineComponent({
name: "RecipeCard",
components: {RecipeContextMenu, KeywordsComponent},
props: {
recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
loading: {type: Boolean, required: false},
show_keywords: {type: Boolean, required: false},
show_description: {type: Boolean, required: false},
height: {type: String, required: false, default: '25vh'},
},
computed: {
recipeImageUrl: function () {
return (this.recipe.image != null) ? this.recipe.image : recipeNoImage
}
}
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
import RecipeImage from "@/components/display/RecipeImage.vue";
const componentProps = defineProps({
recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
loading: {type: Boolean, required: false},
show_keywords: {type: Boolean, required: false},
show_description: {type: Boolean, required: false},
height: {type: String, required: false, default: '25vh'},
})
</script>
<style scoped>