mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 22:43:34 -07:00
RecipePageFooter use v-model instead of prop and turn into script setup
This commit is contained in:
parent
de1d9c5959
commit
27d8109a6e
1 changed files with 29 additions and 51 deletions
|
@ -81,61 +81,39 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePageState } from "~/composables/recipe-page/shared-state";
|
import { usePageState } from "~/composables/recipe-page/shared-state";
|
||||||
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
|
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||||
import type { Recipe } from "~/lib/api/types/recipe";
|
import type { Recipe } from "~/lib/api/types/recipe";
|
||||||
|
|
||||||
export default defineNuxtComponent({
|
const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
|
||||||
props: {
|
const { isEditForm, isCookMode } = usePageState(recipe.value.slug);
|
||||||
recipe: {
|
const apiNewKey = ref("");
|
||||||
type: Object as () => NoUndefinedField<Recipe>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const { isEditForm, isCookMode } = usePageState(props.recipe.slug);
|
|
||||||
const apiNewKey = ref("");
|
|
||||||
|
|
||||||
function createApiExtra() {
|
function createApiExtra() {
|
||||||
if (!props.recipe) {
|
if (!recipe.value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!recipe.value.extras) {
|
||||||
|
recipe.value.extras = {};
|
||||||
|
}
|
||||||
|
// check for duplicate keys
|
||||||
|
if (Object.keys(recipe.value.extras).includes(apiNewKey.value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
recipe.value.extras[apiNewKey.value] = "";
|
||||||
|
apiNewKey.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
if (!props.recipe.extras) {
|
function removeApiExtra(key: string | number) {
|
||||||
props.recipe.extras = {};
|
if (!recipe.value) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
// check for duplicate keys
|
if (!recipe.value.extras) {
|
||||||
if (Object.keys(props.recipe.extras).includes(apiNewKey.value)) {
|
return;
|
||||||
return;
|
}
|
||||||
}
|
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
||||||
|
delete recipe.value.extras[key];
|
||||||
props.recipe.extras[apiNewKey.value] = "";
|
recipe.value.extras = { ...recipe.value.extras };
|
||||||
|
}
|
||||||
apiNewKey.value = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeApiExtra(key: string | number) {
|
|
||||||
if (!props.recipe) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!props.recipe.extras) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
|
||||||
delete props.recipe.extras[key];
|
|
||||||
props.recipe.extras = { ...props.recipe.extras };
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
removeApiExtra,
|
|
||||||
createApiExtra,
|
|
||||||
apiNewKey,
|
|
||||||
isEditForm,
|
|
||||||
isCookMode,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue