mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
b153ddf858
* fix new position calculataion
* ensure consistent list item ordering
* fix recipe ref overflow on small screens
* added recipe ref elevation
* tweaked line height (for long notes)
* removed unused user dependency
* remove old shopping list items when there's >100
* 🤷
* cleaned up function generator
* fixed test
* fix potential type error
* made max position calc more efficient
62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
|
<div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
|
|
<SafeMarkdown v-if="parsedIng.quantity" class="d-inline" :source="parsedIng.quantity" />
|
|
<template v-if="parsedIng.unit">{{ parsedIng.unit }} </template>
|
|
<SafeMarkdown v-if="parsedIng.note && !parsedIng.name" class="text-bold d-inline" :source="parsedIng.note" />
|
|
<template v-else>
|
|
<SafeMarkdown v-if="parsedIng.name" class="text-bold d-inline" :source="parsedIng.name" />
|
|
<SafeMarkdown v-if="parsedIng.note" class="note" :source="parsedIng.note" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
|
import { RecipeIngredient } from "~/lib/api/types/group";
|
|
import { useParsedIngredientText } from "~/composables/recipes";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
ingredient: {
|
|
type: Object as () => RecipeIngredient,
|
|
required: true,
|
|
},
|
|
disableAmount: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
scale: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const parsedIng = computed(() => {
|
|
return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
|
|
});
|
|
|
|
return {
|
|
parsedIng,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
.ingredient-item {
|
|
.d-inline {
|
|
& > p {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.note {
|
|
line-height: 1.25em;
|
|
font-size: 0.8em;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|