Merge pull request #6399 from nextcloud-libraries/feat/Nc-Fields--ico…

…n-slot-forward-compatibility

feat(Nc*Field): add `#icon` slot for forward compatibility with v9, `#default` slot is deprecated

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
 		},

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" />

src/components/NcTextField/NcTextField.vue

@@ -23,15 +23,19 @@ 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"
 			placeholder="That can be used together with placeholder"
 			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>