mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-21 22:13:31 -07:00
Mobile Recipe Card
This commit is contained in:
parent
a0881c451f
commit
c7ab989257
1 changed files with 38 additions and 76 deletions
|
@ -126,7 +126,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
|
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
|
||||||
import RecipeContextMenu from "./RecipeContextMenu.vue";
|
import RecipeContextMenu from "./RecipeContextMenu.vue";
|
||||||
import RecipeCardImage from "./RecipeCardImage.vue";
|
import RecipeCardImage from "./RecipeCardImage.vue";
|
||||||
|
@ -134,82 +134,44 @@ import RecipeRating from "./RecipeRating.vue";
|
||||||
import RecipeChips from "./RecipeChips.vue";
|
import RecipeChips from "./RecipeChips.vue";
|
||||||
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
||||||
|
|
||||||
export default defineNuxtComponent({
|
interface Props {
|
||||||
components: {
|
name: string;
|
||||||
RecipeFavoriteBadge,
|
slug: string;
|
||||||
RecipeContextMenu,
|
description: string;
|
||||||
RecipeRating,
|
rating?: number;
|
||||||
RecipeCardImage,
|
image?: string;
|
||||||
RecipeChips,
|
tags?: Array<any>;
|
||||||
},
|
recipeId: string;
|
||||||
props: {
|
vertical?: boolean;
|
||||||
name: {
|
isFlat?: boolean;
|
||||||
type: String,
|
height?: number;
|
||||||
required: true,
|
disableHighlight?: boolean;
|
||||||
},
|
}
|
||||||
slug: {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
type: String,
|
rating: 0,
|
||||||
required: true,
|
image: "abc123",
|
||||||
},
|
tags: () => [],
|
||||||
description: {
|
vertical: false,
|
||||||
type: String,
|
isFlat: false,
|
||||||
required: true,
|
height: 150,
|
||||||
},
|
disableHighlight: false,
|
||||||
rating: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: "abc123",
|
|
||||||
},
|
|
||||||
tags: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
recipeId: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
vertical: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
isFlat: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: [Number],
|
|
||||||
default: 150,
|
|
||||||
},
|
|
||||||
disableHighlight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ["selected", "delete"],
|
|
||||||
setup(props) {
|
|
||||||
const $auth = useMealieAuth();
|
|
||||||
const { isOwnGroup } = useLoggedInState();
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
|
|
||||||
const showRecipeContent = computed(() => props.recipeId && props.slug);
|
|
||||||
const recipeRoute = computed<string>(() => {
|
|
||||||
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
|
|
||||||
});
|
|
||||||
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
|
|
||||||
|
|
||||||
return {
|
|
||||||
isOwnGroup,
|
|
||||||
recipeRoute,
|
|
||||||
showRecipeContent,
|
|
||||||
cursor,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
selected: [];
|
||||||
|
delete: [slug: string];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const $auth = useMealieAuth();
|
||||||
|
const { isOwnGroup } = useLoggedInState();
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
|
||||||
|
const showRecipeContent = computed(() => props.recipeId && props.slug);
|
||||||
|
const recipeRoute = computed<string>(() => {
|
||||||
|
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
|
||||||
|
});
|
||||||
|
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue