WIP

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -22,7 +22,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			<input :id="id"
 				ref="checkbox"
 				:disabled="disabled"
-				:checked="checked"
+				:checked="model"
 				:value="value"
 				:class="{ focusable: isFocusable }"
 				type="checkbox"
@@ -38,6 +38,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -65,12 +66,21 @@ export default {
 
 		/**
 		 * checked state of the the checkbox element
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: Boolean,
 			default: false,
 		},
 
+		/**
+		 * checked state of the the checkbox element
+		 */
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * value of the checkbox input
 		 */
@@ -92,9 +102,23 @@ export default {
 		'change',
 		'check',
 		'uncheck',
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'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
@@ -112,7 +136,7 @@ export default {
 		 */
 		ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -124,12 +148,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

src/components/NcActionRadio/NcActionRadio.vue

@@ -41,6 +41,7 @@ So that only one of each name set can be selected at the same time.
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -68,12 +69,21 @@ export default {
 
 		/**
 		 * checked state of the the radio element
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: Boolean,
 			default: false,
 		},
 
+		/**
+		 * checked state of the the radio element
+		 */
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Define if this radio is part of a set.
 		 * Checking the radio will disable all the
@@ -102,10 +112,23 @@ export default {
 	},
 
 	emits: [
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'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
@@ -123,7 +146,7 @@ export default {
 		 */
 		 ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -135,12 +158,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

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -10,17 +10,17 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 ```
 <template>
 	<NcActions>
-		<NcActionTextEditable value="This is a textarea">
+		<NcActionTextEditable :modelValue.sync="This is a textarea">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable :disabled="true" value="This is a disabled textarea">
+		<NcActionTextEditable :modelValue.sync="This is a disabled textarea" disabled>
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable name="Please edit the text" value="This is a textarea with name">
+		<NcActionTextEditable :modelValue.sync="This is a textarea with name" name="Please edit the text">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
@@ -34,6 +34,14 @@ export default {
 	components: {
 		Pencil,
 	},
+
+	data() {
+		return {
+			text1: 'This is a textarea',
+			text2: 'This is a disabled textarea',
+			text3: 'This is a textarea with name',
+		}
+	}
 }
 </script>
 ```
@@ -66,7 +74,7 @@ export default {
 
 				<textarea :id="computedId"
 					:disabled="disabled"
-					:value="value"
+					:value="model"
 					v-bind="$attrs"
 					:class="['action-text-editable__textarea', { focusable: isFocusable }]"
 					@input="onInput" />
@@ -82,6 +90,7 @@ export default {
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionTextMixin from '../../mixins/actionText.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -114,19 +123,36 @@ export default {
 		},
 		/**
 		 * value attribute of the input field
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		value: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * value attribute of the input field
+		 */
+		modelValue: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
 		'input',
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'update:value',
+		'update:modelValue',
 		'submit',
 	],
 
+	setup() {
+		const { model } = useModelMigration('value', 'update:value')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -150,12 +176,8 @@ export default {
 			 * @type {Event|Date}
 			 */
 			this.$emit('input', event)
-			/**
-			 * Emitted when the inputs value changes
-			 *
-			 * @type {string|Date}
-			 */
-			this.$emit('update:value', event.target.value)
+			
+			this.model = event.target.value
 		},
 		onSubmit(event) {
 			event.preventDefault()

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -300,6 +300,7 @@ export default {
 import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
 import GenRandomId from '../../utils/GenRandomId.js'
 import { t, n } from '../../l10n.js'
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 
 export default {
 	name: 'NcCheckboxRadioSwitch',
@@ -388,12 +389,21 @@ export default {
 
 		/**
 		 * Checked state. To be used with `:value.sync`
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: [Boolean, Array, String],
 			default: false,
 		},
 
+		/**
+		 * Checkbox value
+		 */
+		modelValue: {
+			type: [Boolean, Array, String],
+			default: false,
+		},
+
 		/**
 		 * Value to be synced on check
 		 */
@@ -447,7 +457,18 @@ export default {
 		},
 	},
 
-	emits: ['update:checked'],
+	emits: [
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
+		'update:checked',
+		'update:modelValue',
+	],
+
+	setup() {
+		const { model } = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
 
 	computed: {
 		dataAttrs() {
@@ -531,18 +552,18 @@ export default {
 		/**
 		 * Check if that entry is checked
 		 * If value is defined, we use that as the checked value
-		 * If not, we expect true/false in this.checked
+		 * If not, we expect true/false in checked state
 		 *
 		 * @return {boolean}
 		 */
 		isChecked() {
 			if (this.value !== null) {
-				if (Array.isArray(this.checked)) {
-					return [...this.checked].indexOf(this.value) > -1
+				if (Array.isArray(this.model)) {
+					return [...this.model].indexOf(this.value) > -1
 				}
-				return this.checked === this.value
+				return this.model === this.value
 			}
-			return this.checked === true
+			return this.model === true
 		},
 
 		hasIndeterminate() {
@@ -555,7 +576,7 @@ export default {
 
 	mounted() {
 		if (this.name && this.type === TYPE_CHECKBOX) {
-			if (!Array.isArray(this.checked)) {
+			if (!Array.isArray(this.model)) {
 				throw new Error('When using groups of checkboxes, the updated value will be an array.')
 			}
 		}
@@ -566,7 +587,7 @@ export default {
 		}
 
 		// https://material.io/components/checkboxes#usage
-		if (typeof this.checked !== 'boolean' && this.type === TYPE_SWITCH) {
+		if (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {
 			throw new Error('Switches can only be used with boolean as checked prop.')
 		}
 	},
@@ -582,19 +603,19 @@ export default {
 
 			// If this is a radio, there can only be one value
 			if (this.type === TYPE_RADIO) {
-				this.$emit('update:checked', this.value)
+				this.model = this.value
 				return
 			}
 
 			// If this is a radio, there can only be one value
 			if (this.type === TYPE_SWITCH) {
-				this.$emit('update:checked', !this.isChecked)
+				this.model = !this.isChecked
 				return
 			}
 
 			// If the initial value was a boolean, let's keep it that way
-			if (typeof this.checked === 'boolean') {
-				this.$emit('update:checked', !this.checked)
+			if (typeof this.model === 'boolean') {
+				this.model = !this.model
 				return
 			}
 
@@ -604,9 +625,9 @@ export default {
 				.map(input => input.value)
 
 			if (values.includes(this.value)) {
-				this.$emit('update:checked', values.filter((v) => v !== this.value))
+				this.model = values.filter((v) => v !== this.value)
 			} else {
-				this.$emit('update:checked', [...values, this.value])
+				this.model = [...values, this.value]
 			}
 		},