mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse source 
Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2022-11-18 14:59:31 +01:00 committed by GitHub
parent 6757c9a2ea
commit 600b285a44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
84 changed files with 455 additions and 376 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/@n8n_io/eslint-config/frontend.js
View file

@ -32,5 +32,9 @@ module.exports = {
'comma-dangle': ['error', 'always-multiline'],
'no-tabs': 0,
'no-labels': 0,
'vue/no-deprecated-slot-attribute': 'error',
'vue/no-deprecated-slot-scope-attribute': 'error',
'vue/no-multiple-template-root': 'error',
'vue/v-slot-style': 'error',
},
};

48
packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View file

@ -9,30 +9,32 @@
<div :class="$style.activator" @click.prevent @blur="onButtonBlur">
<n8n-icon :icon="activatorIcon" />
</div>
<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
<el-dropdown-item
v-for="item in items"
:key="item.id"
:command="item.id"
:disabled="item.disabled"
:divided="item.divided"
>
<div
:class="{
[$style.itemContainer]: true,
[$style.hasCustomStyling]: item.customClass !== undefined,
[item.customClass]: item.customClass !== undefined,
}"
<template #dropdown>
<el-dropdown-menu :class="$style.userActionsMenu">
<el-dropdown-item
v-for="item in items"
:key="item.id"
:command="item.id"
:disabled="item.disabled"
:divided="item.divided"
>
<span v-if="item.icon" :class="$style.icon">
<n8n-icon :icon="item.icon" :size="item.iconSize" />
</span>
<span :class="$style.label">
{{ item.label }}
</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
<div
:class="{
[$style.itemContainer]: true,
[$style.hasCustomStyling]: item.customClass !== undefined,
[item.customClass]: item.customClass !== undefined,
}"
>
<span v-if="item.icon" :class="$style.icon">
<n8n-icon :icon="item.icon" :size="item.iconSize" />
</span>
<span :class="$style.label">
{{ item.label }}
</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>

21
packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
View file

@ -6,17 +6,6 @@ exports[`components > N8nActionDropdown > should render custom styling correctly
<div class=\\"_activator_lf4ng_1\\">
<n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
<el-dropdown-item-stub command=\\"item1\\">
<div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
</el-dropdown-item-stub>
<el-dropdown-item-stub command=\\"item2\\" disabled=\\"true\\">
<div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
</el-dropdown-item-stub>
<el-dropdown-item-stub command=\\"item3\\" divided=\\"true\\">
<div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
</el-dropdown-item-stub>
</el-dropdown-menu-stub>
</el-dropdown-stub>
</div>"
`;
@ -27,16 +16,6 @@ exports[`components > N8nActionDropdown > should render default styling correctl
<div class=\\"_activator_lf4ng_1\\">
<n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
<el-dropdown-item-stub command=\\"item1\\">
<div class=\\"_itemContainer_lf4ng_16\\">
<!----><span> Action 1 </span></div>
</el-dropdown-item-stub>
<el-dropdown-item-stub command=\\"item2\\">
<div class=\\"_itemContainer_lf4ng_16\\">
<!----><span> Action 2 </span></div>
</el-dropdown-item-stub>
</el-dropdown-menu-stub>
</el-dropdown-stub>
</div>"
`;

41
packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
View file

@ -11,25 +11,28 @@
<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
<component :is="$options.components.N8nIcon" icon="ellipsis-v" :size="iconSize" />
</span>
<el-dropdown-menu slot="dropdown" data-test-id="action-toggle-dropdown">
<el-dropdown-item
v-for="action in actions"
:key="action.value"
:command="action.value"
:disabled="action.disabled"
>
{{ action.label }}
<div :class="$style.iconContainer">
<component
v-if="action.type === 'external-link'"
:is="$options.components.N8nIcon"
icon="external-link-alt"
size="xsmall"
color="text-base"
/>
</div>
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu data-test-id="action-toggle-dropdown">
<el-dropdown-item
v-for="action in actions"
:key="action.value"
:command="action.value"
:disabled="action.disabled"
>
{{ action.label }}
<div :class="$style.iconContainer">
<component
v-if="action.type === 'external-link'"
:is="$options.components.N8nIcon"
icon="external-link-alt"
size="xsmall"
color="text-base"
/>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</template>

2
packages/design-system/src/components/N8nFormInputs/FormInputs.vue
View file

@ -1,6 +1,6 @@
<template>
<ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]">
<template v-slot="{ bp }">
<template #default="{ bp }">
<div :class="bp === 'md' || columnView ? $style.grid : $style.gridMulti">
<div v-for="input in filteredInputs" :key="input.name">
<n8n-text

8
packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
View file

@ -22,11 +22,9 @@
<div v-if="items.length > 0" :class="$style.accordionItems">
<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
<n8n-tooltip :disabled="!item.tooltip">
<div
slot="content"
v-html="item.tooltip"
@click="onTooltipClick(item.id, $event)"
></div>
<template #content>
<div v-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
</template>
<n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
</n8n-tooltip>
<n8n-text size="small" color="text-base">{{ item.label }}</n8n-text>

8
packages/design-system/src/components/N8nInfoTip/InfoTip.vue
View file

@ -16,9 +16,11 @@
<span :class="$style.iconText">
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
</span>
<span slot="content">
<slot />
</span>
<template #content>
<span>
<slot name="content" />
</span>
</template>
</n8n-tooltip>
<span :class="$style.iconText" v-else>
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />

2
packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
View file

@ -4,6 +4,6 @@ exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
"<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span></span></n8n-tooltip-stub>
</div>"
`;

4
packages/design-system/src/components/N8nInputLabel/InputLabel.vue
View file

@ -23,7 +23,9 @@
>
<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
<n8n-icon icon="question-circle" size="small" />
<div slot="content" v-html="addTargetBlank(tooltipText)" />
<template #content>
<div v-html="addTargetBlank(tooltipText)" />
</template>
</n8n-tooltip>
</span>
<div

2
packages/design-system/src/components/N8nLoading/Loading.vue
View file

@ -4,7 +4,7 @@
:animated="animated"
:class="['n8n-loading', `n8n-loading-${variant}`]"
>
<template slot="template">
<template #template>
<div v-if="variant === 'h1'">
<div
v-for="(item, index) in rows"

2
packages/design-system/src/components/N8nMenuItem/MenuItem.vue
View file

@ -12,7 +12,7 @@
popper-append-to-body
:popper-class="`${$style.submenuPopper} ${popperClass}`"
>
<template slot="title">
<template #title>
<n8n-icon
v-if="item.icon"
:class="$style.icon"

8
packages/design-system/src/components/N8nTabs/Tabs.vue
View file

@ -14,11 +14,9 @@
:class="{ [$style.alignRight]: option.align === 'right' }"
>
<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
<div
slot="content"
v-html="option.tooltip"
@click="handleTooltipClick(option.value, $event)"
></div>
<template #content>
<div v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)" />
</template>
<a
v-if="option.href"
target="_blank"

2
packages/design-system/src/components/N8nTree/Tree.vue
View file

@ -31,7 +31,7 @@
:value="value[label]"
:nodeClass="nodeClass"
>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<template v-for="(index, name) in $scopedSlots" #[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</n8n-tree>

2
packages/editor-ui/package.json
View file

@ -80,7 +80,6 @@
"xss": "^1.0.10"
},
"devDependencies": {
"@intlify/vue-i18n-loader": "^1.1.0",
"@pinia/testing": "^0.0.14",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/vue": "^5.8.3",
@ -96,7 +95,6 @@
"@types/uuid": "^8.3.2",
"@vitejs/plugin-legacy": "^1.8.2",
"@vitejs/plugin-vue2": "^1.1.2",
"@yfwz100/vite-plugin-vue2-i18n": "^1.0.0-2",
"c8": "^7.12.0",
"jshint": "^2.9.7",
"sass": "^1.55.0",

4
packages/editor-ui/src/components/AboutModal.vue
View file

@ -6,7 +6,7 @@
:name="ABOUT_MODAL_KEY"
:center="true"
>
<template slot="content">
<template #content>
<div :class="$style.container">
<el-row>
<el-col :span="8" class="info-name">
@ -45,7 +45,7 @@
</div>
</template>
<template slot="footer">
<template #footer>
<div class="action-buttons">
<n8n-button @click="closeDialog" float="right" :label="$locale.baseText('about.close')" />
</div>

4
packages/editor-ui/src/components/ActivationModal.vue
View file

@ -4,7 +4,7 @@
:title="$locale.baseText('activationModal.workflowActivated')"
width="460px"
>
<template v-slot:content>
<template #content>
<div>
<n8n-text>{{ triggerContent }}</n8n-text>
</div>
@ -24,7 +24,7 @@
</template>
<template v-slot:footer="{ close }">
<template #footer="{ close }">
<div :class="$style.footer">
<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />

4
packages/editor-ui/src/components/ChangePasswordModal.vue
View file

@ -7,7 +7,7 @@
width="460px"
:eventBus="modalBus"
>
<template slot="content">
<template #content>
<n8n-form-inputs
:inputs="config"
:eventBus="formBus"
@ -16,7 +16,7 @@
@submit="onSubmit"
/>
</template>
<template slot="footer">
<template #footer>
<n8n-button :loading="loading" :label="$locale.baseText('auth.changePassword')" @click="onSubmitClick" float="right" />
</template>
</Modal>

2
packages/editor-ui/src/components/CollectionCard.vue
View file

@ -4,7 +4,7 @@
:title="collection.name"
@click="onClick"
>
<template v-slot:footer>
<template #footer>
<n8n-text size="small" color="text-light">
{{ collection.workflows.length }}
{{ $locale.baseText('templates.workflows') }}

24
packages/editor-ui/src/components/CommunityPackageCard.vue
View file

@ -29,21 +29,27 @@
v{{ communityPackage.installedVersion }}
</n8n-text>
<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
<div slot="content">
{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
</div>
<template #content>
<div>
{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
</div>
</template>
<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
</n8n-tooltip>
<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
<div slot="content">
{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
</div>
<template #content>
<div>
{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
</div>
</template>
<n8n-button type="outline" label="Update" @click="onUpdateClick"/>
</n8n-tooltip>
<n8n-tooltip v-else placement="top">
<div slot="content">
{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
</div>
<template #content>
<div>
{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
</div>
</template>
<n8n-icon icon="check-circle" color="text-light" size="large" />
</n8n-tooltip>
<div :class="$style.cardActions">

4
packages/editor-ui/src/components/CommunityPackageInstallModal.vue
View file

@ -8,7 +8,7 @@
:beforeClose="onModalClose"
:showClose="!loading"
>
<template slot="content">
<template #content>
<div :class="[$style.descriptionContainer, 'p-s']">
<div>
<n8n-text>
@ -66,7 +66,7 @@
</el-checkbox>
</div>
</template>
<template slot="footer">
<template #footer>
<n8n-button
:loading="loading"
:disabled="packageName === '' || loading"

4
packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
View file

@ -8,7 +8,7 @@
:showClose="!loading"
:beforeClose="onModalClose"
>
<template slot="content">
<template #content>
<n8n-text>{{ getModalContent.message }}</n8n-text>
<div :class="$style.descriptionContainer" v-if="this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE">
<n8n-info-tip theme="info" type="note" :bold="false">
@ -18,7 +18,7 @@
</n8n-info-tip>
</div>
</template>
<template slot="footer">
<template #footer>
<n8n-button
:loading="loading"
:disabled="loading"

6
packages/editor-ui/src/components/ContactPromptModal.vue
View file

@ -8,10 +8,10 @@
customClass="contact-prompt-modal"
width="460px"
>
<template slot="header">
<template #header>
<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
</template>
<template v-slot:content>
<template #content>
<div :class="$style.description">
<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
</div>
@ -24,7 +24,7 @@
>
</div>
</template>
<template v-slot:footer>
<template #footer>
<div :class="$style.footer">
<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
</div>

4
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View file

@ -8,7 +8,7 @@
width="70%"
height="80%"
>
<template slot="header">
<template #header>
<div :class="$style.header">
<div :class="$style.credInfo">
<div :class="$style.credIcon">
@ -46,7 +46,7 @@
</div>
<hr />
</template>
<template slot="content">
<template #content>
<div :class="$style.container">
<div :class="$style.sidebar">
<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu>

10
packages/editor-ui/src/components/CredentialsSelectModal.vue
View file

@ -8,10 +8,10 @@
maxWidth="460px"
minHeight="250px"
>
<template slot="header">
<template #header>
<h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2>
</template>
<template slot="content">
<template #content>
<div>
<div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
<n8n-select
@ -23,7 +23,9 @@
:value="selected"
@change="onSelect"
>
<font-awesome-icon icon="search" slot="prefix" />
<template #prefix>
<font-awesome-icon icon="search" />
</template>
<n8n-option
v-for="credential in credentialsStore.allCredentialTypes"
:value="credential.name"
@ -34,7 +36,7 @@
</n8n-select>
</div>
</template>
<template slot="footer">
<template #footer>
<div :class="$style.footer">
<n8n-button
:label="$locale.baseText('credentialSelectModal.continue')"

4
packages/editor-ui/src/components/DeleteUserModal.vue
View file

@ -7,7 +7,7 @@
width="460px"
:eventBus="modalBus"
>
<template slot="content">
<template #content>
<div>
<div v-if="isPending">
<n8n-text color="text-base">{{ $locale.baseText('settings.users.confirmUserDeletion') }}</n8n-text>
@ -39,7 +39,7 @@
</div>
</div>
</template>
<template slot="footer">
<template #footer>
<n8n-button :loading="loading" :disabled="!enabled" :label="$locale.baseText('settings.users.delete')" @click="onSubmit" float="right" />
</template>
</Modal>

4
packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
View file

@ -7,7 +7,7 @@
:center="true"
width="420px"
>
<template v-slot:content>
<template #content>
<div :class="$style.content">
<n8n-input
v-model="name"
@ -28,7 +28,7 @@
/>
</div>
</template>
<template v-slot:footer="{ close }">
<template #footer="{ close }">
<div :class="$style.footer">
<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
<n8n-button type="secondary" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />

36
packages/editor-ui/src/components/Error/NodeErrorView.vue
View file

@ -18,9 +18,11 @@
</div>
<div v-if="error.timestamp">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.time') }}</span>
</div>
<template #header>
<div class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.time') }}</span>
</div>
</template>
<div>
{{new Date(error.timestamp).toLocaleString()}}
</div>
@ -40,9 +42,11 @@
</div>
<div v-if="error.httpCode">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
</div>
<template #header>
<div class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
</div>
</template>
<div>
{{error.httpCode}}
</div>
@ -50,11 +54,13 @@
</div>
<div v-if="error.cause">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
<br>
<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
</div>
<template #header>
<div class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
<br>
<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
</div>
</template>
<div>
<div class="copy-button" v-if="displayCause">
<n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" />
@ -76,9 +82,11 @@
</div>
<div v-if="error.stack">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
</div>
<template #header>
<div class="clearfix box-card__title">
<span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
</div>
</template>
<div>
<pre><code>{{error.stack}}</code></pre>
</div>

40
packages/editor-ui/src/components/ExecutionsList.vue
View file

@ -5,7 +5,7 @@
:title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
:eventBus="modalBus"
>
<template v-slot:content>
<template #content>
<div class="filters">
<el-row>
@ -50,21 +50,21 @@
<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass">
<el-table-column label="" width="30">
<!-- eslint-disable-next-line vue/no-unused-vars -->
<template slot="header" slot-scope="scope">
<template #header="scope" >
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" label=" "></el-checkbox>
</template>
<template slot-scope="scope">
<template #default="scope">
<el-checkbox v-if="scope.row.stoppedAt !== undefined && scope.row.id" :value="selectedItems[scope.row.id.toString()] || checkAll" @change="handleCheckboxChanged(scope.row.id)" label=" "></el-checkbox>
</template>
</el-table-column>
<el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205">
<template slot-scope="scope">
<template #default="scope">
{{convertToDisplayDate(scope.row.startedAt)}}<br />
<small v-if="scope.row.id">ID: {{scope.row.id}}</small>
</template>
</el-table-column>
<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
<template slot-scope="scope">
<template #default="scope">
<div class="ph-no-capture">
<span class="workflow-name">
{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
@ -83,9 +83,11 @@
</template>
</el-table-column>
<el-table-column :label="$locale.baseText('executionsList.status')" width="122" align="center">
<template slot-scope="scope" align="center">
<template #default="scope" align="center">
<n8n-tooltip placement="top" >
<div slot="content" v-html="statusTooltipText(scope.row)"></div>
<template #content>
<div v-html="statusTooltipText(scope.row)"></div>
</template>
<span class="status-badge running" v-if="scope.row.waitTill">
{{ $locale.baseText('executionsList.waiting') }}
</span>
@ -114,25 +116,27 @@
icon="redo"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'original', row: scope.row}">
{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'original', row: scope.row}">
{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
<el-table-column property="mode" :label="$locale.baseText('executionsList.mode')" width="100" align="center">
<template slot-scope="scope">
<template #default="scope">
{{ $locale.baseText(`executionsList.modes.${scope.row.mode}`) }}
</template>
</el-table-column>
<el-table-column :label="$locale.baseText('executionsList.runningTime')" width="150" align="center">
<template slot-scope="scope">
<template #default="scope">
<span v-if="scope.row.stoppedAt === undefined">
<font-awesome-icon icon="spinner" spin />
<execution-time :start-time="scope.row.startedAt"/>
@ -147,7 +151,7 @@
</template>
</el-table-column>
<el-table-column label="" width="100" align="center">
<template slot-scope="scope">
<template #default="scope">
<div class="actions-container">
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
<n8n-icon-button icon="stop" size="small" :title="$locale.baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />

18
packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
View file

@ -46,14 +46,16 @@
@blur="onRetryButtonBlur"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="current-workflow">
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item>
<el-dropdown-item command="original-workflow">
{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="current-workflow">
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item>
<el-dropdown-item command="original-workflow">
{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" />
</div>

10
packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
View file

@ -12,10 +12,12 @@
<footer class="mt-2xs">
{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer') }}
<n8n-tooltip :disabled="!isNewWorkflow">
<div slot="content">
<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
</div>
<template #content>
<div>
<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
</div>
</template>
<n8n-link @click.prevent="openWorkflowSettings" :class="{[$style.disabled]: isNewWorkflow}" size="small">
{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
</n8n-link>

2
packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
View file

@ -8,7 +8,7 @@
<div :class="$style.controls">
<el-checkbox v-model="autoRefresh" @change="onAutoRefreshToggle">{{ $locale.baseText('executionsList.autoRefresh') }}</el-checkbox>
<n8n-popover trigger="click" >
<template slot="reference">
<template #reference>
<div :class="$style.filterButton">
<n8n-button icon="filter" type="tertiary" size="medium" :active="statusFilterApplied">
<n8n-badge v-if="statusFilterApplied" theme="primary" class="mr-4xs">1</n8n-badge>

4
packages/editor-ui/src/components/HoverableNodeIcon.vue
View file

@ -8,7 +8,9 @@
>
<div :class="$style.tooltip">
<n8n-tooltip placement="top" manual :value="showTooltip">
<div slot="content" v-text="nodeType.displayName"></div>
<template #content>
<div v-text="nodeType.displayName"></div>
</template>
<span />
</n8n-tooltip>
</div>

4
packages/editor-ui/src/components/ImportCurlModal.vue
View file

@ -6,7 +6,7 @@
:name="IMPORT_CURL_MODAL_KEY"
:center="true"
>
<template slot="content">
<template #content>
<div :class="$style.container">
<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')" color="text-dark">
<n8n-input
@ -21,7 +21,7 @@
</n8n-input-label>
</div>
</template>
<template slot="footer">
<template #footer>
<div :class="$style.modalFooter">
<n8n-notice
:class="$style.notice"

12
packages/editor-ui/src/components/InputPanel.vue
View file

@ -21,10 +21,10 @@
@runChange="onRunIndexChange"
@tableMounted="$emit('tableMounted', $event)"
>
<template v-slot:header>
<template #header>
<div :class="$style.titleSection">
<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable>
<template slot="prepend">
<template #prepend>
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
</template>
<n8n-option v-for="node of parentNodes" :value="node.name" :key="node.name" class="node-option" :label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`">
@ -37,11 +37,13 @@
</div>
</template>
<template v-slot:node-not-run>
<template #node-not-run>
<div :class="$style.noOutputData" v-if="parentNodes.length">
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
<n8n-tooltip v-if="!readOnly" :manual="true" :value="showDraggableHint && showDraggableHintWithDelay">
<div slot="content" v-html="$locale.baseText('dataMapping.dragFromPreviousHint', { interpolate: { name: focusedMappableInput } })"></div>
<template #content>
<div v-html="$locale.baseText('dataMapping.dragFromPreviousHint', { interpolate: { name: focusedMappableInput } })"></div>
</template>
<NodeExecuteButton type="secondary" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
</n8n-tooltip>
<n8n-text v-if="!readOnly" tag="div" size="small">
@ -62,7 +64,7 @@
</div>
</template>
<template v-slot:no-output-data>
<template #no-output-data>
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
</template>
</RunData>

4
packages/editor-ui/src/components/InviteUsersModal.vue
View file

@ -7,7 +7,7 @@
width="460px"
:eventBus="modalBus"
>
<template slot="content">
<template #content>
<n8n-form-inputs
:inputs="config"
:eventBus="formBus"
@ -16,7 +16,7 @@
@submit="onSubmit"
/>
</template>
<template slot="footer">
<template #footer>
<n8n-button :loading="loading" :disabled="!enabledButton" :label="buttonLabel" @click="onSubmitClick" float="right" />
</template>
</Modal>

2
packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
View file

@ -27,7 +27,7 @@
{{ $locale.baseText('executionDetails.of') }}
<span class="primary-color clickable" :title="$locale.baseText('executionDetails.openWorkflow')">
<ShortenName :name="workflowName">
<template v-slot="{ shortenedName }">
<template #default="{ shortenedName }">
<span @click="openWorkflow(workflowExecution.workflowId)">
"{{ shortenedName }}"
</span>

8
packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
View file

@ -1,8 +1,10 @@
<template>
<n8n-tooltip class="primary-color" placement="bottom-end" >
<div slot="content">
<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
</div>
<template #content>
<div>
<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
</div>
</template>
<div>
<font-awesome-icon icon="exclamation-triangle" />
<span v-text="$locale.baseText('executionDetails.readOnly.readOnly')"></span>

4
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="container" v-if="workflowName">
<BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container">
<template v-slot="{ value }">
<template #default="{ value }">
<ShortenName
:name="workflowName"
:limit="value"
:custom="true"
>
<template v-slot="{ shortenedName }">
<template #default="{ shortenedName }">
<InlineTextEdit
:value="workflowName"
:previewValue="shortenedName"

6
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -32,11 +32,13 @@
<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" />
<el-dropdown-menu slot="dropdown">
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
</el-dropdown-menu>
</div>
</template>
</el-dropdown>
</div>
<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">

4
packages/editor-ui/src/components/Modal.vue
View file

@ -11,10 +11,10 @@
:style="styles"
append-to-body
>
<template v-slot:title v-if="$scopedSlots.header">
<template #title v-if="$scopedSlots.header">
<slot name="header" v-if="!loading" />
</template>
<template v-slot:title v-else-if="title">
<template #title v-else-if="title">
<div :class="centerTitle ? $style.centerTitle : ''">
<div v-if="title">
<n8n-heading tag="h1" size="xlarge">{{title}}</n8n-heading>

2
packages/editor-ui/src/components/ModalDrawer.vue
View file

@ -7,7 +7,7 @@
:modal="modal"
:wrapperClosable="wrapperClosable"
>
<template v-slot:title>
<template #title>
<slot name="header" />
</template>
<template>

12
packages/editor-ui/src/components/Modals.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
<template v-slot:default="{ modalName }">
<template #default="{ modalName }">
<ContactPromptModal
:modalName="modalName"
/>
@ -9,7 +9,7 @@
</ModalRoot>
<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
<template v-slot="{ modalName, activeId, mode }">
<template #default="{ modalName, activeId, mode }">
<CredentialEdit
:modalName="modalName"
:mode="mode"
@ -26,7 +26,7 @@
</ModalRoot>
<ModalRoot :name="DUPLICATE_MODAL_KEY">
<template v-slot:default="{ modalName, active, data }">
<template #default="{ modalName, active, data }">
<DuplicateWorkflowDialog
:data="data"
:isActive="active"
@ -48,7 +48,7 @@
</ModalRoot>
<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
<template v-slot:default="{ active }">
<template #default="{ active }">
<ValueSurvey :isActive="active"/>
</template>
</ModalRoot>
@ -66,7 +66,7 @@
</ModalRoot>
<ModalRoot :name="DELETE_USER_MODAL_KEY">
<template v-slot="{ modalName, activeId }">
<template #default="{ modalName, activeId }">
<DeleteUserModal
:modalName="modalName"
:activeId="activeId"
@ -99,7 +99,7 @@
</ModalRoot>
<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
<template v-slot="{ modalName, activeId, mode }">
<template #default="{ modalName, activeId, mode }">
<CommunityPackageManageConfirmModal
:modalName="modalName"
:activePackageName="activeId"

12
packages/editor-ui/src/components/Node.vue
View file

@ -6,13 +6,17 @@
<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
<div v-if="hasIssues" class="node-issues">
<n8n-tooltip placement="bottom" >
<titled-list slot="content" :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
<template #content>
<titled-list :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
</template>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
<div v-else-if="waiting" class="waiting">
<n8n-tooltip placement="bottom">
<div slot="content" v-text="waiting"></div>
<template #content>
<div v-text="waiting"></div>
</template>
<font-awesome-icon icon="clock" />
</n8n-tooltip>
</div>
@ -32,7 +36,9 @@
<div class="node-trigger-tooltip__wrapper">
<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
<div slot="content" v-text="getTriggerNodeTooltip"></div>
<template #content>
<div v-text="getTriggerNodeTooltip"></div>
</template>
<span />
</n8n-tooltip>
<n8n-tooltip

37
packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
View file

@ -44,18 +44,32 @@
/>
</div>
<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
<!-- There are results in other sub-categories/tabs -->
<template v-if="filteredAllNodeTypes.length > 0">
<p
v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')"
slot="title"
/>
<!-- There are results in other sub-categories/tabs -->
<template #title>
<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
</template>
<!-- Regular Search -->
<template v-if="filteredAllNodeTypes.length === 0" #action>
{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
</n8n-link>
<template v-if="selectedType === ALL_NODE_FILTER">
{{ $locale.baseText('nodeCreator.noResults.or') }}
</template>
<!-- Regular Search -->
<template v-else>
<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" slot="title" />
<template slot="action">
<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
<!-- There are results in other sub-categories/tabs -->
<template #title>
<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
</template>
<!-- Regular Search -->
<template v-if="filteredAllNodeTypes.length === 0" #action>
{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
@ -69,7 +83,8 @@
</n8n-link>
{{ $locale.baseText('nodeCreator.noResults.node') }}
</template>
</template>
</no-results>
</template>
</no-results>
</div>
</transition>

8
packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
View file

@ -9,7 +9,9 @@
:searchItems="searchItems"
@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
>
<type-selector slot="header" />
<template #header>
<type-selector/>
</template>
</trigger-helper-panel>
<categorized-items
v-else
@ -18,7 +20,9 @@
:initialActiveCategories="[CORE_NODES_CATEGORY]"
@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
>
<type-selector slot="header" />
<template #header>
<type-selector />
</template>
</categorized-items>
</div>
</div>

15
packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
View file

@ -19,13 +19,14 @@
<trigger-icon />
</span>
<n8n-tooltip v-if="isCommunityNode" placement="top">
<div
:class="$style['community-node-icon']"
slot="content"
v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
@click="onCommunityNodeTooltipClick"
>
</div>
<template #content>
<div
:class="$style['community-node-icon']"
v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
@click="onCommunityNodeTooltipClick"
>
</div>
</template>
<n8n-icon icon="cube" />
</n8n-tooltip>
</div>

4
packages/editor-ui/src/components/NodeCredentials.vue
View file

@ -43,7 +43,9 @@
<div :class="$style.warning" v-if="issues.length">
<n8n-tooltip placement="top" >
<titled-list slot="content" :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
<template #content>
<titled-list :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
</template>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>

8
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -14,9 +14,11 @@
:disabled="!showTriggerWaitingWarning"
manual
>
<div slot="content" :class="$style.triggerWarning">
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
</div>
<template #content>
<div :class="$style.triggerWarning">
{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
</div>
</template>
<div :class="$style.backToCanvas" @click="close" data-test-id="back-to-canvas">
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
<n8n-text color="text-xlight" size="medium" :bold="true">

4
packages/editor-ui/src/components/NodeExecuteButton.vue
View file

@ -1,6 +1,8 @@
<template>
<n8n-tooltip placement="bottom" :disabled="!disabledHint">
<div slot="content">{{ disabledHint }}</div>
<template #content>
<div>{{ disabledHint }}</div>
</template>
<div>
<n8n-button
:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"

12
packages/editor-ui/src/components/NodeTitle.vue
View file

@ -16,12 +16,14 @@
<n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
</div>
</div>
<div class="ph-no-capture" slot="reference" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
{{ value }}
<div :class="$style.editIconContainer">
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
<template #reference>
<div class="ph-no-capture" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
{{ value }}
<div :class="$style.editIconContainer">
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
</div>
</div>
</div>
</template>
</n8n-popover>
</span>
</template>

4
packages/editor-ui/src/components/OnboardingCallSignupModal.vue
View file

@ -8,7 +8,7 @@
:beforeClose="onModalClose"
width="460px"
>
<template slot="content">
<template #content>
<div class="pb-m">
<n8n-text>
{{ $locale.baseText('onboardingCallSignupModal.description') }}
@ -21,7 +21,7 @@
</n8n-text>
</div>
</template>
<template slot="footer">
<template #footer>
<div :class="$style.buttonsContainer">
<n8n-button
:label="$locale.baseText('onboardingCallSignupModal.cancelButton.label')"

6
packages/editor-ui/src/components/OutputPanel.vue
View file

@ -20,7 +20,7 @@
@itemHover="$emit('itemHover', $event)"
ref="runData"
>
<template v-slot:header>
<template #header>
<div :class="$style.titleSection">
<span :class="$style.title">
{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
@ -46,7 +46,7 @@
</div>
</template>
<template v-slot:node-not-run>
<template #node-not-run>
<n8n-text v-if="workflowRunning && !isTriggerNode">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
<n8n-text v-if="!workflowRunning">
{{ $locale.baseText('ndv.output.runNodeHint') }}
@ -64,7 +64,7 @@
</n8n-text>
</template>
<template v-slot:no-output-data>
<template #no-output-data>
<n8n-text :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
<n8n-text>
{{ $locale.baseText('ndv.output.noOutputData.message') }}

2
packages/editor-ui/src/components/PanelDragButton.vue
View file

@ -1,6 +1,6 @@
<template>
<Draggable type="panel-resize" @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd" :class="$style.dragContainer">
<template v-slot="{ isDragging }">
<template #default="{ isDragging }">
<div
:class="{ [$style.dragButton]: true }"
>

22
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -105,15 +105,17 @@
:title="displayTitle"
:placeholder="getPlaceholder()"
>
<div slot="suffix" class="expand-input-icon-container">
<font-awesome-icon
v-if="!isReadOnly"
icon="expand-alt"
class="edit-window-button clickable"
:title="$locale.baseText('parameterInput.openEditWindow')"
@click="displayEditDialog()"
/>
</div>
<template #suffix>
<div class="expand-input-icon-container">
<font-awesome-icon
v-if="!isReadOnly"
icon="expand-alt"
class="edit-window-button clickable"
:title="$locale.baseText('parameterInput.openEditWindow')"
@click="displayEditDialog()"
/>
</div>
</template>
</n8n-input>
</div>
@ -200,7 +202,7 @@
@setFocus="setFocus"
@onBlur="onBlur"
>
<template v-slot:issues-and-options>
<template #issues-and-options>
<parameter-issues :issues="getIssues" />
</template>
</credentials-select>

6
packages/editor-ui/src/components/ParameterInputFull.vue
View file

@ -27,14 +27,16 @@
:stickyOffset="4"
@drop="onDrop"
>
<template v-slot="{ droppable, activeDrop }">
<template #default="{ droppable, activeDrop }">
<n8n-tooltip
placement="left"
:manual="true"
:value="showMappingTooltip"
:buttons="dataMappingTooltipButtons"
>
<span slot="content" v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
<template #content>
<span v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
</template>
<parameter-input-wrapper
ref="param"
:parameter="parameter"

4
packages/editor-ui/src/components/ParameterIssues.vue
View file

@ -1,7 +1,9 @@
<template>
<div :class="$style['parameter-issues']" v-if="issues.length">
<n8n-tooltip placement="top" >
<titled-list slot="content" :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
<template #content>
<titled-list :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
</template>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>

4
packages/editor-ui/src/components/PersonalizationModal.vue
View file

@ -16,7 +16,7 @@
data-test-id="personalization-form"
@enter="onSave"
>
<template v-slot:content>
<template #content>
<div v-if="submitted" :class="$style.submittedContainer">
<img :class="$style.demoImage" :src="rootStore.baseUrl + 'suggestednodes.png'" />
<n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
@ -25,7 +25,7 @@
<n8n-form-inputs :inputs="survey" :columnView="true" :eventBus="formBus" @submit="onSubmit"/>
</div>
</template>
<template v-slot:footer>
<template #footer>
<div>
<n8n-button
v-if="submitted"

4
packages/editor-ui/src/components/PushConnectionTracker.vue
View file

@ -2,7 +2,9 @@
<span>
<div class="push-connection-lost primary-color" v-if="!rootStore.pushConnectionActive">
<n8n-tooltip placement="bottom-end" >
<div slot="content" v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
<template #current>
<div v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
</template>
<span>
<font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $locale.baseText('pushConnectionTracker.connectionLost') }}
</span>

27
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View file

@ -69,7 +69,7 @@
:stickyOffset="4"
@drop="onDrop"
>
<template v-slot="{ droppable, activeDrop }">
<template #default="{ droppable, activeDrop }">
<div
:class="{
[$style.listModeInputContainer]: isListMode,
@ -103,19 +103,18 @@
@focus="onInputFocus"
@blur="onInputBlur"
>
<div
v-if="isListMode"
slot="suffix"
>
<i
:class="{
['el-input__icon']: true,
['el-icon-arrow-down']: true,
[$style.selectIcon]: true,
[$style.isReverse]: showResourceDropdown,
}"
></i>
</div>
<template #suffix>
<div v-if="isListMode">
<i
:class="{
['el-input__icon']: true,
['el-icon-arrow-down']: true,
[$style.selectIcon]: true,
[$style.isReverse]: showResourceDropdown,
}"
></i>
</div>
</template>
</n8n-input>
</div>
</template>

6
packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

@ -11,7 +11,9 @@
</div>
<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown">
<n8n-input size="medium" :value="filter" :clearable="true" @input="onFilterInput" @blur="onSearchBlur" ref="search" :placeholder="$locale.baseText('resourceLocator.search.placeholder')">
<font-awesome-icon :class="$style.searchIcon" icon="search" slot="prefix" />
<template #prefix>
<font-awesome-icon :class="$style.searchIcon" icon="search" />
</template>
</n8n-input>
</div>
<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
@ -48,7 +50,7 @@
</div>
</div>
</div>
<slot slot="reference" />
<slot name="reference" />
</n8n-popover>
</template>

4
packages/editor-ui/src/components/RunData.vue
View file

@ -107,7 +107,7 @@
<div :class="$style.runSelector" v-if="maxRunIndex > 0" v-show="!editMode.enabled">
<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop popper-append-to-body>
<template slot="prepend">{{ $locale.baseText('ndv.output.run') }}</template>
<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
</n8n-select>
@ -307,7 +307,7 @@
<div :class="$style.pageSizeSelector">
<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body>
<template slot="prepend">{{ $locale.baseText('ndv.output.pageSize') }}</template>
<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
<n8n-option
v-for="size in pageSizes"
:key="size"

24
packages/editor-ui/src/components/RunDataJsonActions.vue
View file

@ -9,17 +9,19 @@
:circle="false"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'value'}">
{{ $locale.baseText('runData.copyValue') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'itemPath'}" divided>
{{ $locale.baseText('runData.copyItemPath') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'parameterPath'}">
{{ $locale.baseText('runData.copyParameterPath') }}
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{command: 'value'}">
{{ $locale.baseText('runData.copyValue') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'itemPath'}" divided>
{{ $locale.baseText('runData.copyItemPath') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'parameterPath'}">
{{ $locale.baseText('runData.copyParameterPath') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>

32
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -26,10 +26,12 @@
:disabled="!mappingEnabled"
:open-delay="1000"
>
<div slot="content">
<img src='/static/data-mapping-gif.gif'/>
{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
</div>
<template #content>
<div>
<img src='/static/data-mapping-gif.gif'/>
{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
</div>
</template>
<draggable
type="mapping"
:data="getExpression(column)"
@ -37,7 +39,7 @@
@dragstart="onDragStart"
@dragend="(column) => onDragEnd(column, 'column')"
>
<template v-slot:preview="{ canDrop }">
<template #preview="{ canDrop }">
<div
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
>
@ -48,7 +50,7 @@
}}
</div>
</template>
<template v-slot="{ isDragging }">
<template #default="{ isDragging }">
<div
:class="{
[$style.header]: true,
@ -68,11 +70,13 @@
</th>
<th v-if="columnLimitExceeded" :class="$style.header">
<n8n-tooltip placement="bottom-end">
<div slot="content">
<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
</i18n>
</div>
<template #content>
<div>
<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
</i18n>
</div>
</template>
<span>
<font-awesome-icon :class="$style['warningTooltip']" icon="exclamation-triangle"></font-awesome-icon>
{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
@ -91,7 +95,7 @@
@dragend="onCellDragEnd"
ref="draggable"
>
<template v-slot:preview="{ canDrop, el }">
<template #preview="{ canDrop, el }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
{{
$locale.baseText(
@ -118,7 +122,7 @@
>
<span v-if="isSimple(data)" :class="{[$style.value]: true, [$style.empty]: isEmpty(data)}">{{ getValueToRender(data) }}</span>
<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
<template v-slot:label="{ label, path }">
<template #label="{ label, path }">
<span
@mouseenter="() => onMouseEnterKey(path, index2)"
@mouseleave="onMouseLeaveKey"
@ -135,7 +139,7 @@
>{{ label || $locale.baseText('runData.unnamedField') }}</span
>
</template>
<template v-slot:value="{ value }">
<template #value="{ value }">
<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">{{
getValueToRender(value)
}}</span>

4
packages/editor-ui/src/components/SettingsSidebar.vue
View file

@ -6,9 +6,11 @@
<i class="mr-xs">
<font-awesome-icon icon="arrow-left" />
</i>
<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
</div>
</template>
<template #title>
<n8n-heading size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
</template>
<template #menuSuffix>
<div :class="$style.versionContainer">
<n8n-link @click="onVersionClick" size="small">

4
packages/editor-ui/src/components/TagsManager/TagsManager.vue
View file

@ -7,7 +7,7 @@
minWidth="620px"
minHeight="420px"
>
<template v-slot:content>
<template #content>
<el-row>
<TagsView
v-if="hasTags || isCreating"
@ -24,7 +24,7 @@
v-else />
</el-row>
</template>
<template v-slot:footer="{ close }">
<template #footer="{ close }">
<n8n-button :label="$locale.baseText('tagsManager.done')" @click="close" float="right" />
</template>
</Modal>

6
packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
View file

@ -10,7 +10,7 @@
v-loading="isLoading"
>
<el-table-column :label="$locale.baseText('tagsTable.name')">
<template slot-scope="scope">
<template #default="scope">
<div class="name" :key="scope.row.id" @keydown.stop>
<transition name="fade" mode="out-in">
<n8n-input
@ -32,7 +32,7 @@
</template>
</el-table-column>
<el-table-column :label="$locale.baseText('tagsTable.usage')" width="150">
<template slot-scope="scope">
<template #default="scope">
<transition name="fade" mode="out-in">
<div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }">
{{ scope.row.usage }}
@ -41,7 +41,7 @@
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<template #default="scope">
<transition name="fade" mode="out-in">
<div class="ops" v-if="scope.row.create">
<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />

4
packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
View file

@ -9,7 +9,9 @@
clearable
:maxlength="maxLength"
>
<font-awesome-icon slot="prefix" icon="search" />
<template #prefix>
<font-awesome-icon icon="search" />
</template>
</n8n-input>
</el-col>
<el-col :span="14">

4
packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -4,12 +4,12 @@
direction="ltr"
width="520px"
>
<template slot="header">
<template #header>
<span :class="$style.title">
{{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
</span>
</template>
<template slot="content">
<template #content>
<section :class="$style['description']">
<p v-if="currentVersion">
{{ $locale.baseText(

4
packages/editor-ui/src/components/ValueSurvey.vue
View file

@ -9,12 +9,12 @@
width="120px"
class="value-survey"
>
<template slot="header">
<template #header>
<div :class="$style.title">
<n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading>
</div>
</template>
<template slot="content">
<template #content>
<section :class="$style.content">
<div v-if="showButtons" :class="$style.wrapper">
<div :class="$style.buttons">

8
packages/editor-ui/src/components/VariableSelectorItem.vue
View file

@ -13,9 +13,11 @@
<span class="el-dropdown-link clickable" @click.stop>
<font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>

4
packages/editor-ui/src/components/WarningTooltip.vue
View file

@ -1,6 +1,8 @@
<template>
<n8n-tooltip content=" " placement="top" >
<div slot="content"><slot /></div>
<template #content>
<slot />
</template>
<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
</n8n-tooltip>
</template>

8
packages/editor-ui/src/components/WorkflowActivator.vue
View file

@ -9,7 +9,9 @@
</n8n-text>
</div>
<n8n-tooltip :disabled="!disabled" placement="bottom">
<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
<template #content>
<div>{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
</template>
<el-switch
v-loading="updatingWorkflowActivation"
:value="workflowActive"
@ -24,7 +26,9 @@
<div class="could-not-be-started" v-if="couldNotBeStarted">
<n8n-tooltip placement="top">
<div @click="displayActivationError" slot="content" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
<template #content>
<div @click="displayActivationError" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
</template>
<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
</n8n-tooltip>
</div>

50
packages/editor-ui/src/components/WorkflowSettings.vue
View file

@ -7,13 +7,15 @@
:eventBus="modalBus"
:scrollable="true"
>
<template v-slot:content>
<template #content>
<div v-loading="isLoading" class="workflow-settings">
<el-row>
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.errorWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.errorWorkflow"></div>
<template #content>
<div v-html="helpTexts.errorWorkflow"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -32,7 +34,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.timezone') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.timezone"></div>
<template #content>
<div v-text="helpTexts.timezone"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -51,7 +55,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.saveDataErrorExecution"></div>
<template #content>
<div v-text="helpTexts.saveDataErrorExecution"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -70,7 +76,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.saveDataSuccessExecution"></div>
<template #content>
<div v-text="helpTexts.saveDataSuccessExecution"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -89,7 +97,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.saveManualExecutions') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.saveManualExecutions"></div>
<template #content>
<div v-text="helpTexts.saveManualExecutions"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -108,7 +118,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.saveExecutionProgress"></div>
<template #content>
<div v-text="helpTexts.saveExecutionProgress"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -128,7 +140,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.callerPolicy') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.workflowCallerPolicy"></div>
<template #content>
<div v-text="helpTexts.workflowCallerPolicy"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -148,7 +162,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.callerIds') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.workflowCallerIds"></div>
<template #content>
<div v-text="helpTexts.workflowCallerIds"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -166,7 +182,9 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.executionTimeoutToggle"></div>
<template #content>
<div v-text="helpTexts.executionTimeoutToggle"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
@ -181,30 +199,32 @@
<el-col :span="10" class="setting-name">
{{ $locale.baseText('workflowSettings.timeoutAfter') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-text="helpTexts.executionTimeout"></div>
<template #content>
<div v-text="helpTexts.executionTimeout"></div>
</template>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
<el-col :span="4">
<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
<template slot="append">{{ $locale.baseText('workflowSettings.hours') }}</template>
<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
</n8n-input>
</el-col>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
<template slot="append">{{ $locale.baseText('workflowSettings.minutes') }}</template>
<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
</n8n-input>
</el-col>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
<template slot="append">{{ $locale.baseText('workflowSettings.seconds') }}</template>
<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
</n8n-input>
</el-col>
</el-row>
</div>
</div>
</template>
<template v-slot:footer>
<template #footer>
<div class="action-buttons">
<n8n-button :label="$locale.baseText('workflowSettings.save')" size="large" float="right" @click="saveSettings" />
</div>

6
packages/editor-ui/src/components/WorkflowShareModal.ee.vue
View file

@ -6,7 +6,7 @@
:name="WORKFLOW_SHARE_MODAL_KEY"
:center="true"
>
<template slot="content">
<template #content>
<div :class="$style.container">
<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
<n8n-user-select
@ -29,7 +29,7 @@
:readonly="!workflowPermissions.updateSharing"
@delete="onRemoveSharee"
>
<template v-slot:actions="{ user }">
<template #actions="{ user }">
<n8n-select
:class="$style.roleSelect"
value="editor"
@ -57,7 +57,7 @@
</div>
</template>
<template slot="footer">
<template #footer>
<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]" :class="$style.actionButtons">
<n8n-text
v-show="isDirty"

2
packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
View file

@ -2,7 +2,7 @@
<n8n-popover
trigger="click"
>
<template slot="reference">
<template #reference>
<n8n-button
icon="filter"
type="tertiary"

7
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View file

@ -55,7 +55,9 @@
ref="search"
data-test-id="resources-list-search"
>
<n8n-icon icon="search" slot="prefix"/>
<template #prefix>
<n8n-icon icon="search"/>
</template>
</n8n-input>
<div :class="$style['sort-and-filter']">
<n8n-select
@ -75,7 +77,7 @@
@input="$emit('update:filters', $event)"
@update:filtersLength="onUpdateFiltersLength"
>
<template v-slot="resourceFiltersSlotProps">
<template #default="resourceFiltersSlotProps">
<slot name="filters" v-bind="resourceFiltersSlotProps" />
</template>
</resource-filters-dropdown>
@ -407,4 +409,3 @@ export default mixins(
height: 69px;
}
</style>

4
packages/editor-ui/src/views/CredentialsView.vue
View file

@ -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')"

9
packages/editor-ui/src/views/NodeView.vue
View file

@ -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

20
packages/editor-ui/src/views/SettingsUsersView.vue
View file

@ -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>

4
packages/editor-ui/src/views/TemplatesCollectionView.vue
View file

@ -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)">

8
packages/editor-ui/src/views/TemplatesSearchView.vue
View file

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

4
packages/editor-ui/src/views/TemplatesWorkflowView.vue
View file

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

4
packages/editor-ui/src/views/WorkflowsView.vue
View file

@ -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')"

26
pnpm-lock.yaml
View file

@ -471,7 +471,6 @@ importers:
'@fortawesome/free-regular-svg-icons': ^6.1.1
'@fortawesome/free-solid-svg-icons': ^5.15.3
'@fortawesome/vue-fontawesome': ^2.0.2
'@intlify/vue-i18n-loader': ^1.1.0
'@pinia/testing': ^0.0.14
'@testing-library/jest-dom': ^5.16.5
'@testing-library/vue': ^5.8.3
@ -487,7 +486,6 @@ importers:
'@types/uuid': ^8.3.2
'@vitejs/plugin-legacy': ^1.8.2
'@vitejs/plugin-vue2': ^1.1.2
'@yfwz100/vite-plugin-vue2-i18n': ^1.0.0-2
axios: ^0.21.1
c8: ^7.12.0
dateformat: ^3.0.3
@ -592,7 +590,6 @@ importers:
vue2-touch-events: 3.2.2
xss: 1.0.14
devDependencies:
'@intlify/vue-i18n-loader': 1.1.0
'@pinia/testing': 0.0.14_pinia@2.0.23+vue@2.7.13
'@testing-library/jest-dom': 5.16.5
'@testing-library/vue': 5.8.3_2s2ymob7v2oigx3hqbmnjuqthq
@ -608,7 +605,6 @@ importers:
'@types/uuid': 8.3.4
'@vitejs/plugin-legacy': 1.8.2_vite@2.9.5
'@vitejs/plugin-vue2': 1.1.2_vite@2.9.5+vue@2.7.13
'@yfwz100/vite-plugin-vue2-i18n': 1.0.0-3_vite@2.9.5
c8: 7.12.0
jshint: 2.13.5
sass: 1.55.0
@ -2863,20 +2859,6 @@ packages:
xregexp: 2.0.0
dev: false
/@intlify/shared/9.2.2:
resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
engines: {node: '>= 14'}
dev: true
/@intlify/vue-i18n-loader/1.1.0:
resolution: {integrity: sha512-9LXiztMtYKTE8t/hRwwGUp+ofrwU0sxLQLzFEOZ38zvn0DonUIQmZUj1cfz5p1Lu8BllxKbCrn6HnsRJ+LYA6g==}
engines: {node: '>= 10'}
dependencies:
'@intlify/shared': 9.2.2
js-yaml: 3.14.1
json5: 2.2.1
dev: true
/@istanbuljs/load-nyc-config/1.1.0:
resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
engines: {node: '>=8'}
@ -6877,14 +6859,6 @@ packages:
resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
dev: true
/@yfwz100/vite-plugin-vue2-i18n/1.0.0-3_vite@2.9.5:
resolution: {integrity: sha512-HlhVMhrOpBHlkkdSm5wQ6YN65ZqdF9YqP7HS1at6NjQgEOIhBiP7tRZ+dYM3ymztKAX0ovhyKCY9ZnQ/GMK0Qg==}
peerDependencies:
vite: ^2.1.5 || ^3.0.5
dependencies:
vite: 2.9.5_sass@1.55.0
dev: true
/a-sync-waterfall/1.0.1:
resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==}
dev: false