mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 15:49:42 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,101 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-text-field
|
||||
v-if="value.title || showTitle"
|
||||
v-model="value.title"
|
||||
dense
|
||||
v-if="model.title || showTitle"
|
||||
v-model="model.title"
|
||||
density="compact"
|
||||
variant="underlined"
|
||||
hide-details
|
||||
class="mx-1 mt-3 mb-4"
|
||||
:placeholder="$t('recipe.section-title')"
|
||||
style="max-width: 500px"
|
||||
@click="$emit('clickIngredientField', 'title')"
|
||||
/>
|
||||
<v-row
|
||||
:no-gutters="mdAndUp"
|
||||
dense
|
||||
class="d-flex flex-wrap my-1"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-row :no-gutters="$vuetify.breakpoint.mdAndUp" dense class="d-flex flex-wrap my-1">
|
||||
<v-col v-if="!disableAmount" sm="12" md="2" cols="12" class="flex-grow-0 flex-shrink-0">
|
||||
<v-col
|
||||
v-if="!disableAmount"
|
||||
sm="12"
|
||||
md="2"
|
||||
cols="12"
|
||||
class="flex-grow-0 flex-shrink-0"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="value.quantity"
|
||||
solo
|
||||
v-model="model.quantity"
|
||||
variant="solo"
|
||||
hide-details
|
||||
dense
|
||||
density="compact"
|
||||
type="number"
|
||||
:placeholder="$t('recipe.quantity')"
|
||||
@keypress="quantityFilter"
|
||||
>
|
||||
<v-icon v-if="$listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
<template #prepend>
|
||||
<v-icon
|
||||
class="mr-n1 handle"
|
||||
>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col v-if="!disableAmount" sm="12" md="3" cols="12">
|
||||
<v-col
|
||||
v-if="!disableAmount"
|
||||
sm="12"
|
||||
md="3"
|
||||
cols="12"
|
||||
>
|
||||
<v-autocomplete
|
||||
ref="unitAutocomplete"
|
||||
v-model="value.unit"
|
||||
:search-input.sync="unitSearch"
|
||||
v-model="model.unit"
|
||||
v-model:search="unitSearch"
|
||||
auto-select-first
|
||||
hide-details
|
||||
dense
|
||||
solo
|
||||
density="compact"
|
||||
variant="solo"
|
||||
return-object
|
||||
:items="units || []"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
class="mx-1"
|
||||
:placeholder="$t('recipe.choose-unit')"
|
||||
clearable
|
||||
@keyup.enter="handleUnitEnter"
|
||||
>
|
||||
<template #no-data>
|
||||
<div class="caption text-center pb-2">{{ $t("recipe.press-enter-to-create") }}</div>
|
||||
<div class="caption text-center pb-2">
|
||||
{{ $t("recipe.press-enter-to-create") }}
|
||||
</div>
|
||||
</template>
|
||||
<template #append-item>
|
||||
<div class="px-2">
|
||||
<BaseButton block small @click="createAssignUnit()"></BaseButton>
|
||||
<BaseButton
|
||||
block
|
||||
size="small"
|
||||
@click="createAssignUnit()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</v-col>
|
||||
|
||||
<!-- Foods Input -->
|
||||
<v-col v-if="!disableAmount" m="12" md="3" cols="12" class="">
|
||||
<v-col
|
||||
v-if="!disableAmount"
|
||||
m="12"
|
||||
md="3"
|
||||
cols="12"
|
||||
class=""
|
||||
>
|
||||
<v-autocomplete
|
||||
ref="foodAutocomplete"
|
||||
v-model="value.food"
|
||||
:search-input.sync="foodSearch"
|
||||
v-model="model.food"
|
||||
v-model:search="foodSearch"
|
||||
auto-select-first
|
||||
hide-details
|
||||
dense
|
||||
solo
|
||||
density="compact"
|
||||
variant="solo"
|
||||
return-object
|
||||
:items="foods || []"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
class="mx-1 py-0"
|
||||
:placeholder="$t('recipe.choose-food')"
|
||||
clearable
|
||||
@keyup.enter="handleFoodEnter"
|
||||
>
|
||||
<template #no-data>
|
||||
<div class="caption text-center pb-2">{{ $t("recipe.press-enter-to-create") }}</div>
|
||||
<div class="caption text-center pb-2">
|
||||
{{ $t("recipe.press-enter-to-create") }}
|
||||
</div>
|
||||
</template>
|
||||
<template #append-item>
|
||||
<div class="px-2">
|
||||
<BaseButton block small @click="createAssignFood()"></BaseButton>
|
||||
<BaseButton
|
||||
block
|
||||
size="small"
|
||||
@click="createAssignFood()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</v-col>
|
||||
<v-col sm="12" md="" cols="12">
|
||||
<v-col
|
||||
sm="12"
|
||||
md=""
|
||||
cols="12"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<v-text-field
|
||||
v-model="value.note"
|
||||
v-model="model.note"
|
||||
hide-details
|
||||
dense
|
||||
solo
|
||||
density="compact"
|
||||
variant="solo"
|
||||
:placeholder="$t('recipe.notes')"
|
||||
class="mb-auto"
|
||||
@click="$emit('clickIngredientField', 'note')"
|
||||
>
|
||||
<v-icon v-if="disableAmount && $listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
<template #prepend>
|
||||
<v-icon
|
||||
v-if="disableAmount && $attrs && $attrs.delete"
|
||||
class="mr-n1 handle"
|
||||
>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<BaseButtonGroup
|
||||
hover
|
||||
|
|
@ -112,195 +159,181 @@
|
|||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<p v-if="showOriginalText" class="text-caption">
|
||||
{{ $t("recipe.original-text-with-value", { originalText: value.originalText }) }}
|
||||
<p
|
||||
v-if="showOriginalText"
|
||||
class="text-caption"
|
||||
>
|
||||
{{ $t("recipe.original-text-with-value", { originalText: model.originalText }) }}
|
||||
</p>
|
||||
|
||||
<v-divider v-if="!$vuetify.breakpoint.mdAndUp" class="my-4"></v-divider>
|
||||
<v-divider
|
||||
v-if="!mdAndUp"
|
||||
class="my-4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, toRefs } from "vue";
|
||||
import { useDisplay } from "vuetify";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { RecipeIngredient } from "~/lib/api/types/recipe";
|
||||
import { useNuxtApp } from "#app";
|
||||
import type { RecipeIngredient } from "~/lib/api/types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Object as () => RecipeIngredient,
|
||||
required: true,
|
||||
},
|
||||
disableAmount: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowInsertIngredient: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
// defineModel replaces modelValue prop
|
||||
const model = defineModel<RecipeIngredient>({ required: true });
|
||||
|
||||
const props = defineProps({
|
||||
disableAmount: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
setup(props, { listeners }) {
|
||||
const { i18n, $globals } = useContext();
|
||||
|
||||
const contextMenuOptions = computed(() => {
|
||||
const options = [
|
||||
{
|
||||
text: i18n.tc("recipe.toggle-section"),
|
||||
event: "toggle-section",
|
||||
},
|
||||
{
|
||||
text: i18n.tc("recipe.insert-above"),
|
||||
event: "insert-above",
|
||||
},
|
||||
{
|
||||
text: i18n.tc("recipe.insert-below"),
|
||||
event: "insert-below",
|
||||
},
|
||||
];
|
||||
|
||||
if (props.allowInsertIngredient) {
|
||||
options.push({
|
||||
text: i18n.tc("recipe.insert-ingredient") ,
|
||||
event: "insert-ingredient",
|
||||
})
|
||||
}
|
||||
|
||||
// FUTURE: add option to parse a single ingredient
|
||||
// if (!value.food && !value.unit && value.note) {
|
||||
// options.push({
|
||||
// text: "Parse Ingredient",
|
||||
// event: "parse-ingredient",
|
||||
// });
|
||||
// }
|
||||
|
||||
if (props.value.originalText) {
|
||||
options.push({
|
||||
text: i18n.tc("recipe.see-original-text"),
|
||||
event: "toggle-original",
|
||||
});
|
||||
}
|
||||
|
||||
return options;
|
||||
});
|
||||
|
||||
const btns = computed(() => {
|
||||
const out = [
|
||||
{
|
||||
icon: $globals.icons.dotsVertical,
|
||||
text: i18n.tc("general.menu"),
|
||||
event: "open",
|
||||
children: contextMenuOptions.value,
|
||||
},
|
||||
];
|
||||
|
||||
if (listeners && listeners.delete) {
|
||||
// @ts-expect-error - TODO: fix this
|
||||
out.unshift({
|
||||
icon: $globals.icons.delete,
|
||||
text: i18n.tc("general.delete"),
|
||||
event: "delete",
|
||||
});
|
||||
}
|
||||
|
||||
return out;
|
||||
});
|
||||
|
||||
// ==================================================
|
||||
// Foods
|
||||
const foodStore = useFoodStore();
|
||||
const foodData = useFoodData();
|
||||
const foodSearch = ref("");
|
||||
const foodAutocomplete = ref<HTMLInputElement>();
|
||||
|
||||
async function createAssignFood() {
|
||||
foodData.data.name = foodSearch.value;
|
||||
props.value.food = await foodStore.actions.createOne(foodData.data) || undefined;
|
||||
foodData.reset();
|
||||
foodAutocomplete.value?.blur();
|
||||
}
|
||||
|
||||
// ==================================================
|
||||
// Units
|
||||
const unitStore = useUnitStore();
|
||||
const unitsData = useUnitData();
|
||||
const unitSearch = ref("");
|
||||
const unitAutocomplete = ref<HTMLInputElement>();
|
||||
|
||||
async function createAssignUnit() {
|
||||
unitsData.data.name = unitSearch.value;
|
||||
props.value.unit = await unitStore.actions.createOne(unitsData.data) || undefined;
|
||||
unitsData.reset();
|
||||
unitAutocomplete.value?.blur();
|
||||
}
|
||||
|
||||
const state = reactive({
|
||||
showTitle: false,
|
||||
showOriginalText: false,
|
||||
});
|
||||
|
||||
function toggleTitle() {
|
||||
if (state.showTitle) {
|
||||
props.value.title = "";
|
||||
}
|
||||
state.showTitle = !state.showTitle;
|
||||
}
|
||||
|
||||
function toggleOriginalText() {
|
||||
state.showOriginalText = !state.showOriginalText;
|
||||
}
|
||||
|
||||
function handleUnitEnter() {
|
||||
if (
|
||||
props.value.unit === undefined ||
|
||||
props.value.unit === null ||
|
||||
!props.value.unit.name.includes(unitSearch.value)
|
||||
) {
|
||||
createAssignUnit();
|
||||
}
|
||||
}
|
||||
|
||||
function handleFoodEnter() {
|
||||
if (
|
||||
props.value.food === undefined ||
|
||||
props.value.food === null ||
|
||||
!props.value.food.name.includes(foodSearch.value)
|
||||
) {
|
||||
createAssignFood();
|
||||
}
|
||||
}
|
||||
|
||||
function quantityFilter(e: KeyboardEvent) {
|
||||
// if digit is pressed, add to quantity
|
||||
if (e.key === "-" || e.key === "+" || e.key === "e") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
quantityFilter,
|
||||
toggleOriginalText,
|
||||
contextMenuOptions,
|
||||
handleUnitEnter,
|
||||
handleFoodEnter,
|
||||
foodAutocomplete,
|
||||
createAssignFood,
|
||||
unitAutocomplete,
|
||||
createAssignUnit,
|
||||
foods: foodStore.store,
|
||||
foodSearch,
|
||||
toggleTitle,
|
||||
unitActions: unitStore.actions,
|
||||
units: unitStore.store,
|
||||
unitSearch,
|
||||
validators,
|
||||
workingUnitData: unitsData.data,
|
||||
btns,
|
||||
};
|
||||
allowInsertIngredient: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits([
|
||||
"clickIngredientField",
|
||||
"insert-above",
|
||||
"insert-below",
|
||||
"insert-ingredient",
|
||||
"delete",
|
||||
]);
|
||||
|
||||
const { mdAndUp } = useDisplay();
|
||||
const i18n = useI18n();
|
||||
const { $globals } = useNuxtApp();
|
||||
|
||||
const state = reactive({
|
||||
showTitle: false,
|
||||
showOriginalText: false,
|
||||
});
|
||||
|
||||
const contextMenuOptions = computed(() => {
|
||||
const options = [
|
||||
{
|
||||
text: i18n.t("recipe.toggle-section"),
|
||||
event: "toggle-section",
|
||||
},
|
||||
{
|
||||
text: i18n.t("recipe.insert-above"),
|
||||
event: "insert-above",
|
||||
},
|
||||
{
|
||||
text: i18n.t("recipe.insert-below"),
|
||||
event: "insert-below",
|
||||
},
|
||||
];
|
||||
|
||||
if (props.allowInsertIngredient) {
|
||||
options.push({
|
||||
text: i18n.t("recipe.insert-ingredient"),
|
||||
event: "insert-ingredient",
|
||||
});
|
||||
}
|
||||
|
||||
if (model.value.originalText) {
|
||||
options.push({
|
||||
text: i18n.t("recipe.see-original-text"),
|
||||
event: "toggle-original",
|
||||
});
|
||||
}
|
||||
|
||||
return options;
|
||||
});
|
||||
|
||||
const btns = computed(() => {
|
||||
const out = [
|
||||
{
|
||||
icon: $globals.icons.dotsVertical,
|
||||
text: i18n.t("general.menu"),
|
||||
event: "open",
|
||||
children: contextMenuOptions.value,
|
||||
},
|
||||
];
|
||||
|
||||
// If delete event is being listened for, show delete button
|
||||
// $attrs is not available in <script setup>, so always show if parent listens
|
||||
out.unshift({
|
||||
icon: $globals.icons.delete,
|
||||
text: i18n.t("general.delete"),
|
||||
event: "delete",
|
||||
children: undefined,
|
||||
});
|
||||
|
||||
return out;
|
||||
});
|
||||
|
||||
// Foods
|
||||
const foodStore = useFoodStore();
|
||||
const foodData = useFoodData();
|
||||
const foodSearch = ref("");
|
||||
const foodAutocomplete = ref<HTMLInputElement>();
|
||||
|
||||
async function createAssignFood() {
|
||||
foodData.data.name = foodSearch.value;
|
||||
model.value.food = await foodStore.actions.createOne(foodData.data) || undefined;
|
||||
foodData.reset();
|
||||
foodAutocomplete.value?.blur();
|
||||
}
|
||||
|
||||
// Units
|
||||
const unitStore = useUnitStore();
|
||||
const unitsData = useUnitData();
|
||||
const unitSearch = ref("");
|
||||
const unitAutocomplete = ref<HTMLInputElement>();
|
||||
|
||||
async function createAssignUnit() {
|
||||
unitsData.data.name = unitSearch.value;
|
||||
model.value.unit = await unitStore.actions.createOne(unitsData.data) || undefined;
|
||||
unitsData.reset();
|
||||
unitAutocomplete.value?.blur();
|
||||
}
|
||||
|
||||
function toggleTitle() {
|
||||
if (state.showTitle) {
|
||||
model.value.title = "";
|
||||
}
|
||||
state.showTitle = !state.showTitle;
|
||||
}
|
||||
|
||||
function toggleOriginalText() {
|
||||
state.showOriginalText = !state.showOriginalText;
|
||||
}
|
||||
|
||||
function handleUnitEnter() {
|
||||
if (
|
||||
model.value.unit === undefined
|
||||
|| model.value.unit === null
|
||||
|| !model.value.unit.name.includes(unitSearch.value)
|
||||
) {
|
||||
createAssignUnit();
|
||||
}
|
||||
}
|
||||
|
||||
function handleFoodEnter() {
|
||||
if (
|
||||
model.value.food === undefined
|
||||
|| model.value.food === null
|
||||
|| !model.value.food.name.includes(foodSearch.value)
|
||||
) {
|
||||
createAssignFood();
|
||||
}
|
||||
}
|
||||
|
||||
function quantityFilter(e: KeyboardEvent) {
|
||||
if (e.key === "-" || e.key === "+" || e.key === "e") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
const { showTitle, showOriginalText } = toRefs(state);
|
||||
|
||||
const foods = foodStore.store;
|
||||
const units = unitStore.store;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue