Merge pull request #5418 from nextcloud-libraries/feat/v-model-checkb…

…ox-radio

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -7,12 +7,30 @@
 This component is made to be used inside of the [NcActions](#NcActions) component slots.
 
 ```vue
+<template>
 	<NcActions>
 		<NcActionCheckbox @change="alert('(un)checked !')">First choice</NcActionCheckbox>
-		<NcActionCheckbox value="second" @change="alert('(un)checked !')">Second 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 :disabled="true" @change="alert('(un)checked !')">Second choice (disabled)</NcActionCheckbox>
+		<NcActionCheckbox :disabled="true" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionCheckbox>
 	</NcActions>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			checkboxValue: false,
+		}
+	},
+
+	methods: {
+		alert(message) {
+			alert(message)
+		}
+	}
+}
+</script>
 ```
 </docs>
 
@@ -53,6 +71,11 @@ export default {
 		},
 	},
 
+	model: {
+		prop: 'checked',
+		event: 'update:checked',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element

src/components/NcActionInput/NcActionInput.vue

@@ -24,7 +24,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
 					<Pencil :size="20" />
 				</template>
 			</NcActionInput>
-			<NcActionInput :value.sync="text" label="Input with placeholder">
+			<NcActionInput v-model="text" label="Input with placeholder">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
@@ -268,6 +268,11 @@ export default {
 
 	mixins: [ActionGlobalMixin],
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element

src/components/NcActionRadio/NcActionRadio.vue

@@ -9,12 +9,30 @@ 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
+<template>
 	<NcActions>
 		<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
-		<NcActionRadio value="second" name="uniqueId" @change="alert('(un)checked !')">Second 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 :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Second choice (disabled)</NcActionRadio>
+		<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionRadio>
 	</NcActions>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radioValue: false,
+			}
+		},
+
+		methods: {
+			alert(message) {
+				alert(message)
+			}
+		}
+	}
+</script>
 ```
 </docs>
 
@@ -56,6 +74,11 @@ export default {
 		},
 	},
 
+	model: {
+		prop: 'checked',
+		event: 'update:checked',
+	},
+
 	props: {
 		/**
 		 * id attribute of the radio element

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -20,7 +20,7 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable name="Please edit the text" value="This is a textarea with name">
+		<NcActionTextEditable name="Please edit the text" v-model="value">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
@@ -34,6 +34,11 @@ export default {
 	components: {
 		Pencil,
 	},
+	data () {
+		return {
+			value: 'This is a textarea with name',
+		}
+	},
 }
 </script>
 ```
@@ -96,6 +101,11 @@ export default {
 
 	mixins: [ActionTextMixin],
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -18,6 +18,7 @@ Note: All attributes on the element are passed to the inner input element - exce
 	<div>
 		<NcCheckboxRadioSwitch :checked.sync="sharingEnabled">Enable sharing</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="sharingEnabled" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model="sharingEnabled">Enable sharing (v-model)</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked="sharingEnabled" :loading="loading" @update:checked="onToggle">Enable sharing (with request loading)</NcCheckboxRadioSwitch>
 		<br>
 		sharingEnabled: {{ sharingEnabled }}
@@ -51,6 +52,7 @@ export default {
 	<div>
 		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio">Default permission read</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio">Default permission read+write</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model="sharingPermission" value="rwx" name="sharing_permission_radio" type="radio">Default permission read+write+execute</NcCheckboxRadioSwitch>
 		<br>
 		sharingPermission: {{ sharingPermission }}
 	</div>
@@ -203,6 +205,7 @@ export default {
 		<NcCheckboxRadioSwitch :disabled="true" :checked.sync="sharingPermission" value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model="sharingPermission" value="x" name="sharing_permission">Permission execute</NcCheckboxRadioSwitch>
 		<br>
 		sharingPermission: {{ sharingPermission }}
 	</div>
@@ -223,6 +226,7 @@ export default {
 <template>
 	<div>
 		<NcCheckboxRadioSwitch :checked.sync="sharingEnabled" type="switch">Enable sharing</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">Enable sharing (v-model)</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="sharingEnabled" type="switch" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
 		<br>
 		sharingEnabled: {{ sharingEnabled }}
@@ -297,9 +301,9 @@ export default {
 </template>
 
 <script>
-import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
+import { n, t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
-import { t, n } from '../../l10n.js'
+import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
 
 export default {
 	name: 'NcCheckboxRadioSwitch',
@@ -311,6 +315,11 @@ export default {
 	// We need to pass attributes to the input element
 	inheritAttrs: false,
 
+	model: {
+		prop: 'checked',
+		event: 'update:checked',
+	},
+
 	props: {
 		/**
 		 * Unique id attribute of the input

src/components/NcInputField/NcInputField.vue

@@ -109,6 +109,11 @@ export default {
 
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * The value of the input field

src/components/NcPasswordField/NcPasswordField.vue

@@ -17,7 +17,7 @@ General purpose password field component.
 		<div class="external-label">
 			<label for="textField">New password</label>
 			<NcPasswordField id="textField"
-				:value.sync="text2"
+				v-model="text2"
 				:label-outside="true"
 				placeholder="Min. 12 characters" />
 		</div>
@@ -146,6 +146,11 @@ export default {
 	// Allow forwarding all attributes
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -26,7 +26,7 @@ Try mentioning user @Test01 or inserting emoji :smile
 		<br>
 
 		<NcRichContenteditable
-			:value.sync="message"
+			v-model="message"
 			:auto-complete="autoComplete"
 			:maxlength="400"
 			:multiline="true"
@@ -320,6 +320,11 @@ export default {
 
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * The ID attribute of the content editable

src/components/NcSettingsInputText/NcSettingsInputText.vue

@@ -6,8 +6,22 @@
 <docs>
 
 ```vue
-<NcSettingsInputText label="Label" hint="Hint" />
-<NcSettingsInputText label="Label" value="Value" hint="Hint" disabled />
+<template>
+	<div>
+		<NcSettingsInputText v-model="value" label="Label" hint="Hint" />
+		<NcSettingsInputText label="Label" value="Value" hint="Hint" disabled />
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			value: ''
+		}
+	},
+}
+</script>
 ```
 
 </docs>
@@ -41,6 +55,12 @@ import GenRandomId from '../../utils/GenRandomId.js'
 
 export default {
 	name: 'NcSettingsInputText',
+
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * label of the select group element

src/components/NcTextArea/NcTextArea.vue

@@ -13,35 +13,58 @@ It extends and styles an HTMLTextAreaElement.
 <template>
 	<div class="wrapper">
 		<NcTextArea label="Text area"
+			:value.sync="text1"
 			placeholder="Placeholders are possible"
 			helper-text="This is a regular helper text." >
 		</NcTextArea>
 		<NcTextArea label="Success state"
+			v-model="text2"
 			:success="true">
 		</NcTextArea>
 		<NcTextArea label="Error state"
+			:value.sync="text3"
 			placeholder="Enter something valid"
 			helper-text="Helper texts will be styled accordingly."
 			:error="true">
 		</NcTextArea>
 		<NcTextArea label="Disabled"
+			:value.sync="text4"
 			:disabled="true" />
 		<NcTextArea label="Disabled + Success"
+			:value.sync="text5"
 			:success="true"
 			:disabled="true" />
 		<div class="external-label">
 			<label for="textField">External label</label>
 			<NcTextArea id="textField"
+				:value.sync="text6"
 				:label-outside="true"
 				placeholder="Text area with external label" />
 		</div>
 		<NcTextArea label="Custom size and no resize"
+			:value.sync="text7"
 			resize="none"
 			rows="5" />
 		</NcTextArea>
 	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				text1: '',
+				text2: '',
+				text3: '',
+				text4: '',
+				text5: '',
+				text6: '',
+				text7: '',
+			}
+		},
+	}
+</script>
+
 <style lang="scss" scoped>
 .wrapper {
 	display: flex;
@@ -71,7 +94,6 @@ It extends and styles an HTMLTextAreaElement.
 				:id="computedId"
 				ref="input"
 				class="textarea__input"
-				:type="type"
 				:disabled="disabled"
 				:placeholder="computedPlaceholder"
 				:aria-describedby="ariaDescribedby"
@@ -123,6 +145,11 @@ export default {
 
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * The value of the input field