Merge pull request #6264 from nextcloud-libraries/fix/noid/action-radio-vmodel

Author: Antreesy

CHANGELOG.md

@@ -16,6 +16,8 @@
   - to `import NcButton from '@nextcloud/vue/components/NcButton'`
 
   The old import paths are still valid, but deprecated and will be removed in version 9.
+* `NcActionRadio` is now expecting String|Number in `v-model` directive (to compare with passed `value`) instead of Boolean. Consider it for migration.
+
 
 ## [v8.22.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.22.0) (2024-12-20)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.21.0...v8.22.0)

src/components/NcActionRadio/NcActionRadio.vue

@@ -10,27 +10,34 @@ So that only one of each name set can be selected at the same time.
 
 ```vue
 <template>
-	<NcActions>
-		<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
-		<NcActionRadio value="second" v-model="radioValue" name="uniqueId" @change="alert('(un)checked !')">Second choice (v-model)</NcActionRadio>
-		<NcActionRadio :model-value="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
-		<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionRadio>
-	</NcActions>
+	<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 {
-				radioValue: false,
+				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',
 			}
 		},
-
-		methods: {
-			alert(message) {
-				alert(message)
-			}
-		}
 	}
 </script>
 ```
@@ -41,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="checked"
 				:name="name"
 				:value="value"
 				:class="{ focusable: isFocusable }"
@@ -100,11 +107,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: '',
 		},
 
 		/**
@@ -186,7 +193,11 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			this.model = this.$refs.radio.checked
+			if (this.checked !== undefined) {
+				this.model = this.$refs.radio.checked
+			} else {
+				this.model = this.value
+			}
 
 			/**
 			 * Emitted when the radio state is changed