github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-23 06:45:22 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

autoform no mutating props

Browse source
This commit is contained in:
Kuchenpirat 2025-06-19 10:44:14 +00:00
commit 571b300ec8
1 changed files with 81 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/components/global/AutoForm.vue
View file

@ -124,13 +124,13 @@
style="width: 100%" style="width: 100%"
> >
<v-menu offset-y> <v-menu offset-y>
<template #activator="{ props }"> <template #activator="{ props: templateProps }">
<v-btn <v-btn
class="my-2 ml-auto" class="my-2 ml-auto"
style="min-width: 200px" style="min-width: 200px"
:color="modelValue[inputField.varName]" :color="modelValue[inputField.varName]"
dark dark
v-bind="props" v-bind="templateProps"
> >
{{ inputField.label }} {{ inputField.label }}
</v-btn> </v-btn>
@ -196,7 +196,7 @@
</v-card> </v-card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { validators } from "@/composables/use-validators"; import { validators } from "@/composables/use-validators";
import { fieldTypes } from "@/composables/forms"; import { fieldTypes } from "@/composables/forms";
import type { AutoFormItems } from "~/types/auto-forms"; import type { AutoFormItems } from "~/types/auto-forms";
@ -205,13 +205,10 @@ const BLUR_EVENT = "blur";
type ValidatorKey = keyof typeof validators; type ValidatorKey = keyof typeof validators;
export default defineNuxtComponent({ // Use defineModel for v-model
name: "AutoForm", const modelValue = defineModel<[object, Array<any>]>();
props: {
modelValue: { const props = defineProps({
default: null,
type: [Object, Array],
},
updateMode: { updateMode: {
default: false, default: false,
type: Boolean, type: Boolean,
@ -244,9 +241,10 @@ export default defineNuxtComponent({
default: null, default: null,
type: Array as () => string[], type: Array as () => string[],
}, },
}, });
emits: ["blur", "update:modelValue"],
setup(props, context) { const emit = defineEmits(["blur", "update:modelValue"]);
function rulesByKey(keys?: ValidatorKey[] | null) { function rulesByKey(keys?: ValidatorKey[] | null) {
if (keys === undefined || keys === null) { if (keys === undefined || keys === null) {
return []; return [];
@ -286,20 +284,8 @@ export default defineNuxtComponent({
} }
function emitBlur() { function emitBlur() {
context.emit(BLUR_EVENT, props.modelValue); emit(BLUR_EVENT, modelValue.value);
} }
return {
rulesByKey,
defaultRules,
removeByIndex,
getTemplate,
emitBlur,
fieldTypes,
validators,
};
},
});
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>