autoform no mutating props

frontend/components/global/AutoForm.vue

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