From c3223b51de87ef57e36a4e21f69cb5500219d336 Mon Sep 17 00:00:00 2001
From: Anupam Kumar <kyteinsky@gmail.com>
Date: Mon, 18 Mar 2024 03:18:08 +0530
Subject: [PATCH 1/4] feat: add v-model to remaining input components

This facilitates migration from Vue 2 to Vue Next (3) easier.
Also comes with the v-model advantages like the number modifier
(v-model.number) which is not possible with .sync prop modifier.

Signed-off-by: Anupam Kumar <kyteinsky@gmail.com>
---
 src/components/NcActionCheckbox/NcActionCheckbox.vue     | 5 +++++
 src/components/NcActionInput/NcActionInput.vue           | 5 +++++
 src/components/NcActionRadio/NcActionRadio.vue           | 5 +++++
 .../NcActionTextEditable/NcActionTextEditable.vue        | 5 +++++
 .../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue      | 9 +++++++--
 src/components/NcInputField/NcInputField.vue             | 5 +++++
 src/components/NcPasswordField/NcPasswordField.vue       | 5 +++++
 .../NcRichContenteditable/NcRichContenteditable.vue      | 5 +++++
 .../NcSettingsInputText/NcSettingsInputText.vue          | 6 ++++++
 src/components/NcTextArea/NcTextArea.vue                 | 5 +++++
 src/components/NcTextField/NcTextField.vue               | 5 +++++
 11 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index 54d30dba5a..d45e132eb8 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -53,6 +53,11 @@ export default {
 		},
 	},
 
+	model: {
+		prop: 'checked',
+		event: 'update:checked',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 8397bdcfd8..0a9d895f06 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -268,6 +268,11 @@ export default {
 
 	mixins: [ActionGlobalMixin],
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index ae3a46593b..6ecbfa0057 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/src/components/NcActionRadio/NcActionRadio.vue
@@ -56,6 +56,11 @@ export default {
 		},
 	},
 
+	model: {
+		prop: 'checked',
+		event: 'update:checked',
+	},
+
 	props: {
 		/**
 		 * id attribute of the radio element
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 29d91bb237..28c5e6cfce 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -96,6 +96,11 @@ export default {
 
 	mixins: [ActionTextMixin],
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * id attribute of the checkbox element
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 5bcbc9a115..00dcc2ef04 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -297,9 +297,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 +311,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
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 5a084ab3c4..7b695e7f30 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/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
diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
index f7addbbe7e..d2faeb45bb 100644
--- a/src/components/NcPasswordField/NcPasswordField.vue
+++ b/src/components/NcPasswordField/NcPasswordField.vue
@@ -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
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index c5f4c59181..16e015ac9a 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -320,6 +320,11 @@ export default {
 
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * The ID attribute of the content editable
diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue
index 241d3011c1..61ccf5d813 100644
--- a/src/components/NcSettingsInputText/NcSettingsInputText.vue
+++ b/src/components/NcSettingsInputText/NcSettingsInputText.vue
@@ -41,6 +41,12 @@ import GenRandomId from '../../utils/GenRandomId.js'
 
 export default {
 	name: 'NcSettingsInputText',
+
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * label of the select group element
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
index 7b8a2ff6e8..c5a9d8e88a 100644
--- a/src/components/NcTextArea/NcTextArea.vue
+++ b/src/components/NcTextArea/NcTextArea.vue
@@ -123,6 +123,11 @@ export default {
 
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * The value of the input field
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 0d04525197..31b4befdcd 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -160,6 +160,11 @@ export default {
 	// Allow forwarding all attributes
 	inheritAttrs: false,
 
+	model: {
+		prop: 'value',
+		event: 'update:value',
+	},
+
 	props: {
 		/**
 		 * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props

From 4e6ba04d5efe4748c893db4b04d7481c0a209a32 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 22 Oct 2024 14:51:09 +0200
Subject: [PATCH 2/4] fix(NcTextArea): remove non-existing prop 'type' for
 textarea

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcTextArea/NcTextArea.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
index c5a9d8e88a..b8741c1d89 100644
--- a/src/components/NcTextArea/NcTextArea.vue
+++ b/src/components/NcTextArea/NcTextArea.vue
@@ -71,7 +71,6 @@ It extends and styles an HTMLTextAreaElement.
 				:id="computedId"
 				ref="input"
 				class="textarea__input"
-				:type="type"
 				:disabled="disabled"
 				:placeholder="computedPlaceholder"
 				:aria-describedby="ariaDescribedby"

From 84bb554f5a36fb4d7799f5a621d99d44b9e11923 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 22 Oct 2024 13:19:08 +0200
Subject: [PATCH 3/4] chore(docs): add v-model examples for updated components
 (checked)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NcActionCheckbox/NcActionCheckbox.vue     | 22 +++++++++++++++++--
 .../NcActionRadio/NcActionRadio.vue           | 22 +++++++++++++++++--
 .../NcCheckboxRadioSwitch.vue                 |  4 ++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index d45e132eb8..c75dec312a 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/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>
 
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index 6ecbfa0057..9b58d5d773 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/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>
 
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 00dcc2ef04..818fb3ce1e 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/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 }}

From bdb06772101d52524102ab44f1f55415d1df0183 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 22 Oct 2024 14:50:35 +0200
Subject: [PATCH 4/4] chore(docs): add v-model examples for updated components
 (value)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NcActionInput/NcActionInput.vue           |  2 +-
 .../NcActionTextEditable.vue                  |  7 +++++-
 .../NcPasswordField/NcPasswordField.vue       |  2 +-
 .../NcRichContenteditable.vue                 |  2 +-
 .../NcSettingsInputText.vue                   | 18 +++++++++++++--
 src/components/NcTextArea/NcTextArea.vue      | 23 +++++++++++++++++++
 src/components/NcTextField/NcTextField.vue    |  4 +++-
 7 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 0a9d895f06..be537316c1 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/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>
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 28c5e6cfce..fce2056700 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/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>
 ```
diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
index d2faeb45bb..81592b1588 100644
--- a/src/components/NcPasswordField/NcPasswordField.vue
+++ b/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>
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index 16e015ac9a..1ef89d83c3 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/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"
diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue
index 61ccf5d813..f50192cb2b 100644
--- a/src/components/NcSettingsInputText/NcSettingsInputText.vue
+++ b/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>
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
index b8741c1d89..388d2a72e9 100644
--- a/src/components/NcTextArea/NcTextArea.vue
+++ b/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;
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 31b4befdcd..2b2d262cd7 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -25,7 +25,7 @@ and `minlength`.
 			@trailing-button-click="clearText">
 			<Magnify :size="20" />
 		</NcTextField>
-		<NcTextField :value.sync="text4"
+		<NcTextField v-model="text4"
 			label="Internal label"
 			placeholder="That can be used together with placeholder"
 			trailing-button-icon="close"
@@ -51,8 +51,10 @@ and `minlength`.
 			@trailing-button-click="clearText">
 		</NcTextField>
 		<NcTextField label="Disabled"
+			:value="text1"
 			:disabled="true" />
 		<NcTextField label="Disabled + Success"
+			:value="text2"
 			:success="true"
 			:disabled="true" />
 		<div class="external-label">