From 7160c0fb8bd0ffc196a3a23b5b474f2614cb568e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 13 Oct 2023 21:28:52 +0200
Subject: [PATCH] feat: migrate from value to model-value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcEmojiPicker/NcEmojiPicker.vue           |  2 +-
 src/components/NcInputField/NcInputField.vue  |  8 ++++----
 .../NcPasswordField/NcPasswordField.vue       | 18 ++++++++---------
 src/components/NcTextField/NcTextField.vue    | 20 +++++++++----------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 2fd4ef5c08..d13c383bca 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -147,7 +147,7 @@ This component allows the user to pick an emoji.
 			@select="select">
 			<template #searchTemplate="slotProps">
 				<NcTextField ref="search"
-					v-model:value="search"
+					v-model="search"
 					class="search"
 					:label="t('Search')"
 					:label-visible="true"
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 6456105e6e..a8a1cd9288 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -52,7 +52,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--success': success,
 						'input-field__input--error': error,
 					}]"
-				:value="value"
+				:value="modelValue"
 				@input="handleInput">
 			<!-- Label -->
 			<label v-if="!labelOutside && isValidLabel"
@@ -128,7 +128,7 @@ export default {
 		/**
 		 * The value of the input field
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			required: true,
 		},
@@ -252,7 +252,7 @@ export default {
 	},
 
 	emits: [
-		'update:value',
+		'update:modelValue',
 		'trailing-button-click',
 	],
 
@@ -317,7 +317,7 @@ export default {
 		},
 
 		handleInput(event) {
-			this.$emit('update:value', event.target.value)
+			this.$emit('update:modelValue', event.target.value)
 		},
 
 		handleTrailingButtonClick(event) {
diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
index ec64ce9b06..a872aae366 100644
--- a/src/components/NcPasswordField/NcPasswordField.vue
+++ b/src/components/NcPasswordField/NcPasswordField.vue
@@ -29,18 +29,18 @@ General purpose password field component.
 ```
 <template>
 	<div class="wrapper">
-		<NcPasswordField v-model:value="text1"
+		<NcPasswordField v-model="text1"
 			label="Old password" />
 		<div class="external-label">
 			<label for="textField">New password</label>
-			<NcPasswordField v-model:value="text2"
+			<NcPasswordField v-model="text2"
 				id="textField"
 				:label-outside="true"
 				placeholder="Min. 12 characters" />
 		</div>
 		<div class="external-label">
 			<label for="textField2">New password</label>
-			<NcPasswordField v-model:value="text3"
+			<NcPasswordField v-model="text3"
 				id="textField2"
 				:error="true"
 				:label-outside="true"
@@ -48,7 +48,7 @@ General purpose password field component.
 				helper-text="Password is insecure" />
 		</div>
 
-		<NcPasswordField v-model:value="text4"
+		<NcPasswordField v-model="text4"
 			label="Good new password"
 			:success="true"
 			placeholder="Min. 12 characters"
@@ -58,7 +58,7 @@ General purpose password field component.
 			</template>
 		</NcPasswordField>
 
-		<NcPasswordField v-model:value="text5"
+		<NcPasswordField v-model="text5"
 			:disabled="true"
 			label="Disabled" />
 	</div>
@@ -116,7 +116,7 @@ export default {
 		:success="computedSuccess"
 		:minlength="rules.minlength"
 		@trailing-button-click="togglePasswordVisibility"
-		@input="handleInput">
+		@update:model-value="handleInput">
 		<template v-if="!!$slots.icon" #icon>
 			<!-- Default slot for the leading icon -->
 			<slot name="icon" />
@@ -204,7 +204,7 @@ export default {
 	emits: [
 		'valid',
 		'invalid',
-		'update:value',
+		'update:modelValue',
 	],
 
 	data() {
@@ -243,7 +243,7 @@ export default {
 	},
 
 	watch: {
-		value(newValue) {
+		modelValue(newValue) {
 			if (this.checkPasswordStrength) {
 				if (this.passwordPolicy === null) {
 					return
@@ -281,7 +281,7 @@ export default {
 			 *
 			 * @property {string} The new value
 			 */
-			this.$emit('update:value', event.target.value)
+			this.$emit('update:modelValue', event)
 		},
 		togglePasswordVisibility() {
 			this.isPasswordHidden = !this.isPasswordHidden
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 605d8f9bd3..aa7d858b46 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -34,7 +34,7 @@ and `minlength`.
 ```
 <template>
 	<div class="wrapper">
-		<NcTextField v-model:value="text1"
+		<NcTextField v-model="text1"
 			label="Leading icon and clear trailing button"
 			trailing-button-icon="close"
 			:show-trailing-button="text1 !== ''"
@@ -43,7 +43,7 @@ and `minlength`.
 				<Magnify :size="20" />
 			</template>
 		</NcTextField>
-		<NcTextField :value.sync="text4"
+		<NcTextField v-model="text4"
 			label="Internal label"
 			placeholder="That can be used together with placeholder"
 			trailing-button-icon="close"
@@ -53,28 +53,28 @@ and `minlength`.
 				<Lock :size="20" />
 			</template>
 		</NcTextField>
-		<NcTextField v-model:value="text2"
+		<NcTextField v-model="text2"
 			label="Success state"
 			placeholder="Placeholders are possible"
 			:success="true"
 			@trailing-button-click="clearText">
 		</NcTextField>
-		<NcTextField v-model:value="text3"
+		<NcTextField v-model="text3"
 			label="Error state"
 			placeholder="Enter something valid"
 			:error="true"
 			@trailing-button-click="clearText">
 		</NcTextField>
-		<NcTextField :value=""
+		<NcTextField :model-value=""
 			label="Disabled"
 			:disabled="true" />
-		<NcTextField :value=""
+		<NcTextField :model-value=""
 			label="Disabled + Success"
 			:success="true"
 			:disabled="true" />
 		<div class="external-label">
 			<label for="textField">External label</label>
-			<NcTextField v-model:value="text5"
+			<NcTextField v-model="text5"
 				id="textField"
 				:label-outside="true"
 				placeholder="Input with external label"
@@ -139,7 +139,7 @@ export default {
 	<NcInputField v-bind="$props"
 		ref="inputField"
 		:trailing-button-label="clearTextLabel"
-		@input="handleInput">
+		@update:model-value="handleInput">
 		<template v-if="!!$slots.icon" #icon>
 			<!-- Default slot for the leading icon -->
 			<slot name="icon" />
@@ -193,7 +193,7 @@ export default {
 	},
 
 	emits: [
-		'update:value',
+		'update:modelValue',
 	],
 
 	computed: {
@@ -222,7 +222,7 @@ export default {
 		},
 
 		handleInput(event) {
-			this.$emit('update:value', event.target.value)
+			this.$emit('update:modelValue', event)
 		},
 	},
 }