feat: modelValue compatibility for NcActionCheckbox, NcActionRadio, N…

…cCheckboxRadioSwitch Signed-off-by: Grigorii K. Shartsev <[email protected]>
nextcloud-libraries · Oct 30, 2024 · 98e720c · 98e720c
1 parent 1333165
commit 98e720c
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 59 deletions.
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -10,8 +10,8 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 <template>
 	<NcActions>
 		<NcActionCheckbox @change="alert('(un)checked !')">First choice</NcActionCheckbox>
-		<NcActionCheckbox value="second" v-model="checkboxValue" @change="alert('(un)checked !')">Second choice (v-model)</NcActionCheckbox>
-		<NcActionCheckbox :checked="true" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
+		<NcActionCheckbox v-model="checkboxValue" value="second" @change="alert('(un)checked !')">Second choice (v-model)</NcActionCheckbox>
+		<NcActionCheckbox :model-value="checkboxValue" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
 		<NcActionCheckbox :disabled="true" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionCheckbox>
 	</NcActions>
 </template>
@@ -40,7 +40,7 @@ export default {
 			<input :id="id"
 				ref="checkbox"
 				:disabled="disabled"
-				:checked="checked"
+				:checked="model"
 				:value="value"
 				:class="{ focusable: isFocusable }"
 				type="checkbox"
@@ -56,6 +56,7 @@ export default {
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/useModelMigration.ts'
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -72,8 +73,8 @@ export default {
 	},
 
 	model: {
-		prop: 'checked',
-		event: 'update:checked',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 
 	props: {
@@ -87,9 +88,18 @@ export default {
 		},
 
 		/**
-		 * checked state of the the checkbox element
+		 * Removed in v9 - use `modelValue` (`v-model`) instead
+		 * @deprecated
 		 */
 		checked: {
+			type: Boolean,
+			default: undefined,
+		},
+
+		/**
+		 * checked state of the the checkbox element
+		 */
+		modelValue: {
 			type: Boolean,
 			default: false,
 		},
@@ -115,9 +125,25 @@ export default {
 		'change',
 		'check',
 		'uncheck',
+		/**
+		 * Removed in v9 - use `update:modelValue` (`v-model`) instead
+		 * @deprecated
+		 */
 		'update:checked',
+		/**
+		 * Emitted when the checkbox state is changed
+		 * @type {boolean}
+		 */
+		'update:modelValue',
 	],
 
+	setup() {
+		const model = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -135,7 +161,7 @@ export default {
 		 */
 		ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -147,12 +173,7 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			/**
-			 * Emitted when the checkbox state is changed
-			 *
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.checkbox.checked)
+			this.model = this.$refs.checkbox.checked
 
 			/**
 			 * Emitted when the checkbox state is changed

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -13,7 +13,7 @@ So that only one of each name set can be selected at the same time.
 	<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 :checked="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</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>
 </template>
@@ -59,6 +59,7 @@ So that only one of each name set can be selected at the same time.
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/useModelMigration.ts'
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -75,8 +76,8 @@ export default {
 	},
 
 	model: {
-		prop: 'checked',
-		event: 'update:checked',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 
 	props: {
@@ -90,9 +91,18 @@ export default {
 		},
 
 		/**
-		 * checked state of the the radio element
+		 * Removed in v9 - use `modelValue` (`v-model`) instead
+		 * @deprecated
 		 */
 		checked: {
+			type: Boolean,
+			default: undefined,
+		},
+
+		/**
+		 * checked state of the the radio element
+		 */
+		modelValue: {
 			type: Boolean,
 			default: false,
 		},
@@ -125,10 +135,26 @@ export default {
 	},
 
 	emits: [
+		/**
+		 * Removed in v9 - use `update:modelValue` (`v-model`) instead
+		 * @deprecated
+		 */
 		'update:checked',
+		/**
+		 * The radio state is changed
+		 * @type {boolean}
+		 */
+		'update:modelValue',
 		'change',
 	],
 
+	setup() {
+		const model = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -146,7 +172,7 @@ export default {
 		 */
 		 ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -158,12 +184,7 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			/**
-			 * Emitted when the radio state is changed
-			 *
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.radio.checked)
+			this.model = this.$refs.radio.checked
 
 			/**
 			 * Emitted when the radio state is changed