mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-04 03:28:28 -05:00
c617251f4c
* update naming * refactor tests to use shared structure * shorten names * add tools test case * refactor to support multi-tenant * set group_id on creation * initial refactor for multitenant tags/cats * spelling * additional test case for same valued resources * fix recipe update tests * apply indexes to foreign keys * fix performance regressions * handle unknown exception * utility decorator for function debugging * migrate recipe_id to UUID * GUID for recipes * remove unused import * move image functions into package * move utilities to packages dir * update import * linter * image image and asset routes * update assets and images to use UUIDs * fix migration base * image asset test coverage * use ids for categories and tag crud functions * refactor recipe organizer test suite to reduce duplication * add uuid serlization utility * organizer base router * slug routes testing and fixes * fix postgres error * adopt UUIDs * move tags, categories, and tools under "organizers" umbrella * update composite label * generate ts types * fix import error * update frontend types * fix type errors * fix postgres errors * fix #978 * add null check for title validation * add note in docs on multi-tenancy
119 lines
2.3 KiB
Vue
119 lines
2.3 KiB
Vue
<template>
|
|
<v-img
|
|
v-if="!fallBackImage"
|
|
:height="height"
|
|
:src="getImage(recipeId)"
|
|
@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,
|
|
},
|
|
recipeId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
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.recipeId,
|
|
() => {
|
|
fallBackImage.value = false;
|
|
}
|
|
);
|
|
|
|
function getImage(recipeId: string) {
|
|
switch (imageSize.value) {
|
|
case "tiny":
|
|
return recipeTinyImage(recipeId, props.imageVersion);
|
|
case "small":
|
|
return recipeSmallImage(recipeId, props.imageVersion);
|
|
case "large":
|
|
return recipeImage(recipeId, 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>
|