[next] fix(NcActionRadio): change modelValue to behave like NcCheckboxRadioSwitch

CHANGELOG.md

@@ -23,6 +23,7 @@ All notable changes to this project will be documented in this file.
   - `NcActionCheckbox`
   - `NcActionRadio`
   - `NcCheckboxRadioSwitch`
+* The `modelValue` prop of `NcActionRadio` is expecting to have type String|Number to be compared to `value` prop.
 * The `value` prop was renamed to `modelValue`, the `update:value` or `input` events were renamed to `update:modelValue`. This affects the following components:
   - `NcActionInput`
   - `NcActionTextEditable`
@@ -87,7 +88,7 @@ All notable changes to this project will be documented in this file.
 * ci: Migrate component tests to Playwright [\#5818](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5818) \([susnux](https://github.com/susnux)\)
 * Change module import paths - drop dist and .js-extension [\#6389](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6389) \([susnux](https://github.com/susnux)\)
 * The plugin was removed - components need to be registered manually now [\#6349](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6349) \([ShGKme](https://github.com/ShGKme)\)
-* chore(Nc*Field): icon slot change note [\#6398](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6398) \([ShGKme](https://github.com/ShGKme)\) 
+* chore(Nc*Field): icon slot change note [\#6398](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6398) \([ShGKme](https://github.com/ShGKme)\)
 * Rename `checked` prop to `modelValue` [\#4994](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4994) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * Unify `modelValue` naming [\#4990](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4990) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * Remove deprecated mixins [\#4830](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4830) \([raimund-schluessler](https://github.com/raimund-schluessler)\)

src/components/NcActionRadio/NcActionRadio.vue

@@ -9,12 +9,37 @@ Usually, you will provide a name prop to bind the radio together.
 So that only one of each name set can be selected at the same time.
 
 ```vue
-	<NcActions>
-		<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
-		<NcActionRadio value="second" name="uniqueId" @change="alert('(un)checked !')">Second choice</NcActionRadio>
-		<NcActionRadio :model-value="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
-		<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Second choice (disabled)</NcActionRadio>
-	</NcActions>
+<template>
+	<div>
+		<NcActions>
+			<NcActionRadio v-for="option in radioOptions"
+				:key="option.value"
+				:value="option.value"
+				:disabled="option.disabled"
+				name="uniqueId"
+				v-model="radioValue">
+				{{ option.label }}
+			</NcActionRadio>
+		</NcActions>
+		<span>Selected value: {{ radioValue }}</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radioOptions: [
+					{ value: 'first', label: 'First choise', disabled: false },
+					{ value: 'second', label: 'Second choise', disabled: false },
+					{ value: 'third', label: 'Third choise', disabled: false },
+					{ value: 'fourth', label: 'Fourth choise (disabled)', disabled: true },
+				],
+				radioValue: 'first',
+			}
+		},
+	}
+</script>
 ```
 </docs>
 
@@ -23,8 +48,8 @@ So that only one of each name set can be selected at the same time.
 		<span class="action-radio" role="menuitemradio" :aria-checked="ariaChecked">
 			<input :id="id"
 				ref="radio"
+				v-model="model"
 				:disabled="disabled"
-				:checked="modelValue"
 				:name="name"
 				:value="value"
 				:class="{ focusable: isFocusable }"
@@ -67,11 +92,11 @@ export default {
 		},
 
 		/**
-		 * checked state of the the radio element
+		 * checked state of the radio element
 		 */
 		modelValue: {
-			type: Boolean,
-			default: false,
+			type: [String, Number],
+			default: '',
 		},
 
 		/**
@@ -116,14 +141,28 @@ export default {
 			return !this.disabled
 		},
 
+		model: {
+			get() {
+				return this.modelValue
+			},
+			set(value) {
+				/**
+				 * Emitted when the radio state is changed
+				 *
+				 * @type {string|number}
+				 */
+				this.$emit('update:modelValue', value)
+			},
+		},
+
 		/**
 		 * aria-checked attribute for role="menuitemcheckbox"
 		 *
 		 * @return {'true'|'false'|undefined} aria-checked value if needed
 		 */
 		 ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.modelValue ? 'true' : 'false'
+				return this.modelValue === this.value ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -135,13 +174,6 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			/**
-			 * Emitted when the radio state is changed
-			 *
-			 * @type {boolean}
-			 */
-			this.$emit('update:modelValue', this.$refs.radio.checked)
-
 			/**
 			 * Emitted when the radio state is changed
 			 *