fix: radio control

The radio control did not store the actual value in the data but the event.
This is now fixed.

Other changes:
- use @update:modelValue instead of @change where appropriate
- add root schema to createDefaultValue of list-with-detail

Author: Toilal

packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue

@@ -305,7 +305,7 @@ const controlRenderer = defineComponent({
     addButtonClick() {
       this.addItem(
         this.control.path,
-        createDefaultValue(this.control.schema)
+        createDefaultValue(this.control.schema, this.control.rootSchema)
       )();
     },
     moveUpClick(event: Event, toMove: number): void {

packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue

@@ -30,7 +30,7 @@
         :items="items"
         :clearable="isHovering"
         v-bind="vuetifyProps('v-combobox')"
-        @change="onChange"
+        @update:modelValue="onChange"
         @focus="handleFocus"
         @blur="handleBlur"
       />

packages/vue-vuetify/src/controls/BooleanControlRenderer.vue

@@ -19,7 +19,7 @@
       :indeterminate="control.data === undefined"
       :model-value="control.data"
       v-bind="vuetifyProps('v-checkbox')"
-      @change="onChange"
+      @update:modelValue="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
     />
@@ -53,8 +53,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVuetifyControl(useJsonFormsControl(props), (event) => {
-      return event.target.checked || false;
+    return useVuetifyControl(useJsonFormsControl(props), (value) => {
+      return value || false;
     });
   },
 });

packages/vue-vuetify/src/controls/BooleanToggleControlRenderer.vue

@@ -21,7 +21,7 @@
       :true-value="true"
       :false-value="false"
       v-bind="vuetifyProps('v-switch')"
-      @change="onChange"
+      @update:modelValue="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
     />
@@ -59,7 +59,7 @@ const controlRenderer = defineComponent({
   setup(props: RendererProps<ControlElement>) {
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (newValue) => newValue.target.checked || false
+      (value) => value || false
     );
   },
 });

packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue

@@ -24,7 +24,7 @@
         :item-title="(item) => t(item.label, item.label)"
         item-value="value"
         v-bind="vuetifyProps('v-select')"
-        @change="onChange"
+        @update:modelValue="onChange"
         @focus="handleFocus"
         @blur="handleBlur"
       />

packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue

@@ -20,7 +20,7 @@
       :error-messages="control.errors"
       v-bind="vuetifyProps('v-radio-group')"
       :model-value="control.data"
-      @change="onChange"
+      @update:modelValue="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
     >
@@ -29,7 +29,7 @@
         v-bind="vuetifyProps(`v-radio[${o.value}]`)"
         :key="o.value"
         :label="o.label"
-        :model-value="o.value"
+        :value="o.value"
       ></v-radio>
     </v-radio-group>
   </control-wrapper>

packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue

@@ -20,7 +20,7 @@
       :error-messages="control.errors"
       :model-value="control.data"
       v-bind="vuetifyProps('v-radio-group')"
-      @change="onChange"
+      @update:modelValue="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
     >
@@ -29,7 +29,7 @@
         v-bind="vuetifyProps(`v-radio[${o.value}]`)"
         :key="o.value"
         :label="o.label"
-        :model-value="o.value"
+        :value="o.value"
       ></v-radio>
     </v-radio-group>
   </control-wrapper>