From 561eb4b6ff489901f3ea3629a5156b34fe1d8e98 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Sun, 19 Jan 2025 16:27:14 +0100
Subject: [PATCH] feat(Nc*Field): add #icon slot for forward compatibility with
 v9

- Old default slot for the leading icon is deprecated now

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcInputField/NcInputField.vue    | 15 +++++++--------
 .../NcPasswordField/NcPasswordField.vue         | 10 ++++++++--
 src/components/NcTextField/NcTextField.vue      | 17 +++++++++++++----
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index a5e05cf636..70d6c86e1a 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -21,7 +21,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 		:class="{
 			'input-field--disabled': disabled,
 			'input-field--label-outside': labelOutside || !isValidLabel,
-			'input-field--leading-icon': hasLeadingIcon,
+			'input-field--leading-icon': !!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default,
 			'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,
 			'input-field--pill': pill,
 		}">
@@ -51,9 +51,12 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 			</label>
 
 			<!-- Leading icon -->
-			<div v-show="hasLeadingIcon" class="input-field__icon input-field__icon--leading">
-				<!-- Leading material design icon in the text field, set the size to 18 -->
-				<slot />
+			<div v-show="!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default" class="input-field__icon input-field__icon--leading">
+				<!-- @slot Leading icon, set the size to 18 -->
+				<slot name="icon">
+					<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->
+					<slot />
+				</slot>
 			</div>
 
 			<!-- trailing button -->
@@ -285,10 +288,6 @@ export default {
 			return 'input' + GenRandomId()
 		},
 
-		hasLeadingIcon() {
-			return this.$slots.default
-		},
-
 		hasTrailingIcon() {
 			return this.success
 		},
diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
index 8fc36804e8..464dcd639c 100644
--- a/src/components/NcPasswordField/NcPasswordField.vue
+++ b/src/components/NcPasswordField/NcPasswordField.vue
@@ -96,8 +96,14 @@ export default {
 		v-on="$listeners"
 		@trailing-button-click="togglePasswordVisibility"
 		@input="handleInput">
-		<!-- Default slot for the leading icon -->
-		<slot />
+		<template v-if="!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default" #icon>
+			<!-- @slot Leading icon -->
+			<slot name="icon">
+				<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->
+				<slot />
+			</slot>
+		</template>
+
 		<template #trailing-button-icon>
 			<Eye v-if="isPasswordHidden" :size="18" />
 			<EyeOff v-else :size="18" />
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 0c7e3eb546..e42b77f1e4 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -23,7 +23,9 @@ and `minlength`.
 			trailing-button-icon="close"
 			:show-trailing-button="text1 !== ''"
 			@trailing-button-click="clearText">
-			<Magnify :size="20" />
+			<template #icon>
+				<Magnify :size="20" />
+			</template>
 		</NcTextField>
 		<NcTextField v-model="text4"
 			label="Internal label"
@@ -31,7 +33,9 @@ and `minlength`.
 			trailing-button-icon="close"
 			:show-trailing-button="text4 !== ''"
 			@trailing-button-click="clearText">
-			<Lock :size="20" />
+			<template #icon>
+				<Lock :size="20" />
+			</template>
 		</NcTextField>
 		<NcTextField v-model="text2"
 			label="With helper text"
@@ -124,8 +128,13 @@ export default {
 	<NcInputField v-bind="propsAndAttrsToForward"
 		ref="inputField"
 		v-on="$listeners">
-		<!-- Default slot for the leading icon -->
-		<slot />
+		<template v-if="!!$scopedSlots.icon || !!$slots.default || !!$scopedSlots.default" #icon>
+			<!-- @slot Leading icon -->
+			<slot name="icon">
+				<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->
+				<slot />
+			</slot>
+		</template>
 
 		<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->
 		<template v-if="type !== 'search'" #trailing-button-icon>