mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
86c99b10a2
* Activate more linting rules from eslint and typescript * Properly add VForm as type information * Fix usage of native types * Fix more linting issues * Rename vuetify types file, add VTooltip * Fix some more typing problems * Use composition API for more components * Convert RecipeRating * Convert RecipeNutrition * Convert more components to composition API * Fix globals plugin for type checking * Add missing icon types * Fix vuetify types in Nuxt context * Use composition API for RecipeActionMenu * Convert error.vue to composition API * Convert RecipeContextMenu to composition API * Use more composition API and type checking in recipe/create * Convert AppButtonUpload to composition API * Fix some type checking in RecipeContextMenu * Remove unused components BaseAutoForm and BaseColorPicker * Convert RecipeCategoryTagDialog to composition API * Convert RecipeCardSection to composition API * Convert RecipeCategoryTagSelector to composition API * Properly import vuetify type definitions * Convert BaseButton to composition API * Convert AutoForm to composition API * Remove unused requests API file * Remove static routes from recipe API * Fix more type errors * Convert AppHeader to composition API, fixing some search bar focus problems * Convert RecipeDialogSearch to composition API * Update API types from pydantic models, handle undefined values * Improve more typing problems * Add types to other plugins * Properly type the CRUD API access * Fix typing of static image routes * Fix more typing stuff * Fix some more typing problems * Turn off more rules
112 lines
2.2 KiB
Vue
112 lines
2.2 KiB
Vue
<template>
|
|
<v-img
|
|
v-if="!fallBackImage"
|
|
:height="height"
|
|
:src="getImage(slug)"
|
|
@click="$emit('click')"
|
|
@load="fallBackImage = false"
|
|
@error="fallBackImage = true"
|
|
>
|
|
<slot> </slot>
|
|
</v-img>
|
|
<div v-else class="icon-slot" @click="$emit('click')">
|
|
<v-icon color="primary" class="icon-position" :size="iconSize">
|
|
{{ $globals.icons.primary }}
|
|
</v-icon>
|
|
<slot> </slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, ref, watch} from "@nuxtjs/composition-api";
|
|
import { useStaticRoutes, useUserApi } from "~/composables/api";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
tiny: {
|
|
type: Boolean,
|
|
default: null,
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: null,
|
|
},
|
|
large: {
|
|
type: Boolean,
|
|
default: null,
|
|
},
|
|
iconSize: {
|
|
type: [Number, String],
|
|
default: 100,
|
|
},
|
|
slug: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
imageVersion: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 200,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const api = useUserApi();
|
|
|
|
const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
|
|
|
|
const fallBackImage = ref(false);
|
|
const imageSize = computed(() => {
|
|
if (props.tiny) return "tiny";
|
|
if (props.small) return "small";
|
|
if (props.large) return "large";
|
|
return "large";
|
|
})
|
|
|
|
watch(() => props.slug, () => {
|
|
fallBackImage.value = false;
|
|
});
|
|
|
|
function getImage(slug: string) {
|
|
switch (imageSize.value) {
|
|
case "tiny":
|
|
return recipeTinyImage(slug, props.imageVersion);
|
|
case "small":
|
|
return recipeSmallImage(slug, props.imageVersion);
|
|
case "large":
|
|
return recipeImage(slug, props.imageVersion);
|
|
}
|
|
}
|
|
|
|
return {
|
|
api,
|
|
fallBackImage,
|
|
imageSize,
|
|
getImage,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon-slot {
|
|
position: relative;
|
|
}
|
|
|
|
.icon-slot > div {
|
|
top: 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.icon-position {
|
|
opacity: 0.8;
|
|
display: flex !important;
|
|
position: relative;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
</style>
|