refactor: Migrate Vue slots to the new syntax (#4603)

Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/views/CredentialsView.vue

@@ -9,10 +9,10 @@
 		@click:add="addCredential"
 		@update:filters="filters = $event"
 	>
-		<template v-slot="{ data }">
+		<template #default="{ data }">
 			<credential-card :data="data"/>
 		</template>
-		<template v-slot:filters="{ setKeyValue }">
+		<template #filters="{ setKeyValue }">
 			<div class="mb-s">
 				<n8n-input-label
 					:label="$locale.baseText('credentials.filters.type')"

packages/editor-ui/src/views/NodeView.vue

@@ -51,10 +51,11 @@
 						:hideActions="pullConnActive"
 						:isProductionExecutionPreview="isProductionExecutionPreview"
 					>
-						<span
-							slot="custom-tooltip"
-							v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
-						/>
+						<template #custom-tooltip>
+							<span
+								v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
+							/>
+						</template>
 					</node>
 					<sticky
 						v-else

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -4,15 +4,17 @@
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
 			<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
 					<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
-						<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
-							<template #action>
-								<a
-									href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
-									target="_blank"
-									v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
-								/>
-							</template>
-						</i18n>
+						<template #content>
+							<i18n path="settings.users.setupSMTPToInviteUsers" tag="span">
+								<template #action>
+									<a
+										href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
+										target="_blank"
+										v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
+									/>
+								</template>
+							</i18n>
+						</template>
 						<div>
 							<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
 						</div>

packages/editor-ui/src/views/TemplatesCollectionView.vue

@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView :goBackEnabled="true">
-		<template v-slot:header>
+		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
@@ -16,7 +16,7 @@
 				<n8n-text color="text-base">{{ $locale.baseText('templates.collectionsNotFound') }}</n8n-text>
 			</div>
 		</template>
-		<template v-if="!notFoundError" v-slot:content>
+		<template v-if="!notFoundError" #content>
 			<div :class="$style.wrapper">
 				<div :class="$style.mainContent">
 					<div :class="$style.markdown" v-if="loading || (collection && collection.description)">

packages/editor-ui/src/views/TemplatesSearchView.vue

@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView>
-		<template v-slot:header>
+		<template #header>
 			<div :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading tag="h1" size="2xlarge">
@@ -16,7 +16,7 @@
 				</div>
 			</div>
 		</template>
-		<template v-slot:content>
+		<template #content>
 			<div :class="$style.contentWrapper">
 				<div :class="$style.filters">
 					<TemplateFilters
@@ -37,7 +37,9 @@
 						@blur="trackSearch"
 						clearable
 					>
-						<font-awesome-icon icon="search" slot="prefix" />
+						<template #prefix>
+							<font-awesome-icon icon="search" />
+						</template>
 					</n8n-input>
 					<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
 						<div :class="$style.header">

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView :goBackEnabled="true">
-		<template v-slot:header>
+		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
@@ -25,7 +25,7 @@
 				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
 			</div>
 		</template>
-		<template v-if="!notFoundError" v-slot:content>
+		<template v-if="!notFoundError" #content>
 			<div :class="$style.image">
 				<WorkflowPreview
 					v-if="showPreview"

packages/editor-ui/src/views/WorkflowsView.vue

@@ -11,7 +11,7 @@
 		@click:add="addWorkflow"
 		@update:filters="filters = $event"
 	>
-		<template v-slot="{ data }">
+		<template #default="{ data }">
 			<workflow-card :data="data" @click:tag="onClickTag" />
 		</template>
 		<template #empty>
@@ -38,7 +38,7 @@
 				</n8n-card>
 			</div>
 		</template>
-		<template v-slot:filters="{ setKeyValue }">
+		<template #filters="{ setKeyValue }">
 			<div class="mb-s" v-if="settingsStore.areTagsEnabled">
 				<n8n-input-label
 					:label="$locale.baseText('workflows.filters.tags')"