mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 21:37:32 -08:00
Code Issues Actions 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'], 'comma-dangle': ['error', 'always-multiline'],
'no-tabs': 0, 'no-tabs': 0,
'no-labels': 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"> <div :class="$style.activator" @click.prevent @blur="onButtonBlur">
<n8n-icon :icon="activatorIcon" /> <n8n-icon :icon="activatorIcon" />
</div> </div>
<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu"> <template #dropdown>
<el-dropdown-item <el-dropdown-menu :class="$style.userActionsMenu">
v-for="item in items" <el-dropdown-item
:key="item.id" v-for="item in items"
:command="item.id" :key="item.id"
:disabled="item.disabled" :command="item.id"
:divided="item.divided" :disabled="item.disabled"
> :divided="item.divided"
<div
:class="{
[$style.itemContainer]: true,
[$style.hasCustomStyling]: item.customClass !== undefined,
[item.customClass]: item.customClass !== undefined,
}"
> >
<span v-if="item.icon" :class="$style.icon"> <div
<n8n-icon :icon="item.icon" :size="item.iconSize" /> :class="{
</span> [$style.itemContainer]: true,
<span :class="$style.label"> [$style.hasCustomStyling]: item.customClass !== undefined,
{{ item.label }} [item.customClass]: item.customClass !== undefined,
</span> }"
</div> >
</el-dropdown-item> <span v-if="item.icon" :class="$style.icon">
</el-dropdown-menu> <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> </el-dropdown>
</div> </div>
</template> </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\\"> <div class=\\"_activator_lf4ng_1\\">
<n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
</div> </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> </el-dropdown-stub>
</div>" </div>"
`; `;
@ -27,16 +16,6 @@ exports[`components > N8nActionDropdown > should render default styling correctl
<div class=\\"_activator_lf4ng_1\\"> <div class=\\"_activator_lf4ng_1\\">
<n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
</div> </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> </el-dropdown-stub>
</div>" </div>"
`; `;

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]"> <ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]">
<template v-slot="{ bp }"> <template #default="{ bp }">
<div :class="bp === 'md' || columnView ? $style.grid : $style.gridMulti"> <div :class="bp === 'md' || columnView ? $style.grid : $style.gridMulti">
<div v-for="input in filteredInputs" :key="input.name"> <div v-for="input in filteredInputs" :key="input.name">
<n8n-text <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-if="items.length > 0" :class="$style.accordionItems">
<div v-for="item in items" :key="item.id" :class="$style.accordionItem"> <div v-for="item in items" :key="item.id" :class="$style.accordionItem">
<n8n-tooltip :disabled="!item.tooltip"> <n8n-tooltip :disabled="!item.tooltip">
<div <template #content>
slot="content" <div v-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
v-html="item.tooltip" </template>
@click="onTooltipClick(item.id, $event)"
></div>
<n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" /> <n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
</n8n-tooltip> </n8n-tooltip>
<n8n-text size="small" color="text-base">{{ item.label }}</n8n-text> <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"> <span :class="$style.iconText">
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" /> <n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
</span> </span>
<span slot="content"> <template #content>
<slot /> <span>
</span> <slot name="content" />
</span>
</template>
</n8n-tooltip> </n8n-tooltip>
<span :class="$style.iconText" v-else> <span :class="$style.iconText" v-else>
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" /> <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`] = ` 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\\"> "<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>" </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-tooltip placement="top" :popper-class="$style.tooltipPopper">
<n8n-icon icon="question-circle" size="small" /> <n8n-icon icon="question-circle" size="small" />
<div slot="content" v-html="addTargetBlank(tooltipText)" /> <template #content>
<div v-html="addTargetBlank(tooltipText)" />
</template>
</n8n-tooltip> </n8n-tooltip>
</span> </span>
<div <div

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

@ -4,7 +4,7 @@
:animated="animated" :animated="animated"
:class="['n8n-loading', `n8n-loading-${variant}`]" :class="['n8n-loading', `n8n-loading-${variant}`]"
> >
<template slot="template"> <template #template>
<div v-if="variant === 'h1'"> <div v-if="variant === 'h1'">
<div <div
v-for="(item, index) in rows" 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-append-to-body
:popper-class="`${$style.submenuPopper} ${popperClass}`" :popper-class="`${$style.submenuPopper} ${popperClass}`"
> >
<template slot="title"> <template #title>
<n8n-icon <n8n-icon
v-if="item.icon" v-if="item.icon"
:class="$style.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' }" :class="{ [$style.alignRight]: option.align === 'right' }"
> >
<n8n-tooltip :disabled="!option.tooltip" placement="bottom"> <n8n-tooltip :disabled="!option.tooltip" placement="bottom">
<div <template #content>
slot="content" <div v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)" />
v-html="option.tooltip" </template>
@click="handleTooltipClick(option.value, $event)"
></div>
<a <a
v-if="option.href" v-if="option.href"
target="_blank" target="_blank"

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

@ -31,7 +31,7 @@
:value="value[label]" :value="value[label]"
:nodeClass="nodeClass" :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> <slot :name="name" v-bind="data"></slot>
</template> </template>
</n8n-tree> </n8n-tree>

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

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

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

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

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

@ -4,7 +4,7 @@
:title="$locale.baseText('activationModal.workflowActivated')" :title="$locale.baseText('activationModal.workflowActivated')"
width="460px" width="460px"
> >
<template v-slot:content> <template #content>
<div> <div>
<n8n-text>{{ triggerContent }}</n8n-text> <n8n-text>{{ triggerContent }}</n8n-text>
</div> </div>
@ -24,7 +24,7 @@
</template> </template>
<template v-slot:footer="{ close }"> <template #footer="{ close }">
<div :class="$style.footer"> <div :class="$style.footer">
<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox> <el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" /> <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" width="460px"
:eventBus="modalBus" :eventBus="modalBus"
> >
<template slot="content"> <template #content>
<n8n-form-inputs <n8n-form-inputs
:inputs="config" :inputs="config"
:eventBus="formBus" :eventBus="formBus"
@ -16,7 +16,7 @@
@submit="onSubmit" @submit="onSubmit"
/> />
</template> </template>
<template slot="footer"> <template #footer>
<n8n-button :loading="loading" :label="$locale.baseText('auth.changePassword')" @click="onSubmitClick" float="right" /> <n8n-button :loading="loading" :label="$locale.baseText('auth.changePassword')" @click="onSubmitClick" float="right" />
</template> </template>
</Modal> </Modal>

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

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

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

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

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
width="70%" width="70%"
height="80%" height="80%"
> >
<template slot="header"> <template #header>
<div :class="$style.header"> <div :class="$style.header">
<div :class="$style.credInfo"> <div :class="$style.credInfo">
<div :class="$style.credIcon"> <div :class="$style.credIcon">
@ -46,7 +46,7 @@
</div> </div>
<hr /> <hr />
</template> </template>
<template slot="content"> <template #content>
<div :class="$style.container"> <div :class="$style.container">
<div :class="$style.sidebar"> <div :class="$style.sidebar">
<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu> <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" maxWidth="460px"
minHeight="250px" minHeight="250px"
> >
<template slot="header"> <template #header>
<h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2> <h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2>
</template> </template>
<template slot="content"> <template #content>
<div> <div>
<div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div> <div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
<n8n-select <n8n-select
@ -23,7 +23,9 @@
:value="selected" :value="selected"
@change="onSelect" @change="onSelect"
> >
<font-awesome-icon icon="search" slot="prefix" /> <template #prefix>
<font-awesome-icon icon="search" />
</template>
<n8n-option <n8n-option
v-for="credential in credentialsStore.allCredentialTypes" v-for="credential in credentialsStore.allCredentialTypes"
:value="credential.name" :value="credential.name"
@ -34,7 +36,7 @@
</n8n-select> </n8n-select>
</div> </div>
</template> </template>
<template slot="footer"> <template #footer>
<div :class="$style.footer"> <div :class="$style.footer">
<n8n-button <n8n-button
:label="$locale.baseText('credentialSelectModal.continue')" :label="$locale.baseText('credentialSelectModal.continue')"

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

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

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

@ -7,7 +7,7 @@
:center="true" :center="true"
width="420px" width="420px"
> >
<template v-slot:content> <template #content>
<div :class="$style.content"> <div :class="$style.content">
<n8n-input <n8n-input
v-model="name" v-model="name"
@ -28,7 +28,7 @@
/> />
</div> </div>
</template> </template>
<template v-slot:footer="{ close }"> <template #footer="{ close }">
<div :class="$style.footer"> <div :class="$style.footer">
<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" /> <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" /> <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>
<div v-if="error.timestamp"> <div v-if="error.timestamp">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <template #header>
<span>{{ $locale.baseText('nodeErrorView.time') }}</span> <div class="clearfix box-card__title">
</div> <span>{{ $locale.baseText('nodeErrorView.time') }}</span>
</div>
</template>
<div> <div>
{{new Date(error.timestamp).toLocaleString()}} {{new Date(error.timestamp).toLocaleString()}}
</div> </div>
@ -40,9 +42,11 @@
</div> </div>
<div v-if="error.httpCode"> <div v-if="error.httpCode">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <template #header>
<span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span> <div class="clearfix box-card__title">
</div> <span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
</div>
</template>
<div> <div>
{{error.httpCode}} {{error.httpCode}}
</div> </div>
@ -50,11 +54,13 @@
</div> </div>
<div v-if="error.cause"> <div v-if="error.cause">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <template #header>
<span>{{ $locale.baseText('nodeErrorView.cause') }}</span> <div class="clearfix box-card__title">
<br> <span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span> <br>
</div> <span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
</div>
</template>
<div> <div>
<div class="copy-button" v-if="displayCause"> <div class="copy-button" v-if="displayCause">
<n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" /> <n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" />
@ -76,9 +82,11 @@
</div> </div>
<div v-if="error.stack"> <div v-if="error.stack">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <template #header>
<span>{{ $locale.baseText('nodeErrorView.stack') }}</span> <div class="clearfix box-card__title">
</div> <span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
</div>
</template>
<div> <div>
<pre><code>{{error.stack}}</code></pre> <pre><code>{{error.stack}}</code></pre>
</div> </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}`" :title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
:eventBus="modalBus" :eventBus="modalBus"
> >
<template v-slot:content> <template #content>
<div class="filters"> <div class="filters">
<el-row> <el-row>
@ -50,21 +50,21 @@
<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass"> <el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass">
<el-table-column label="" width="30"> <el-table-column label="" width="30">
<!-- eslint-disable-next-line vue/no-unused-vars --> <!-- 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> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" label=" "></el-checkbox>
</template> </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> <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> </template>
</el-table-column> </el-table-column>
<el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205"> <el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205">
<template slot-scope="scope"> <template #default="scope">
{{convertToDisplayDate(scope.row.startedAt)}}<br /> {{convertToDisplayDate(scope.row.startedAt)}}<br />
<small v-if="scope.row.id">ID: {{scope.row.id}}</small> <small v-if="scope.row.id">ID: {{scope.row.id}}</small>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')"> <el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
<template slot-scope="scope"> <template #default="scope">
<div class="ph-no-capture"> <div class="ph-no-capture">
<span class="workflow-name"> <span class="workflow-name">
{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }} {{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
@ -83,9 +83,11 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$locale.baseText('executionsList.status')" width="122" align="center"> <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" > <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"> <span class="status-badge running" v-if="scope.row.waitTill">
{{ $locale.baseText('executionsList.waiting') }} {{ $locale.baseText('executionsList.waiting') }}
</span> </span>
@ -114,25 +116,27 @@
icon="redo" icon="redo"
/> />
</span> </span>
<el-dropdown-menu slot="dropdown"> <template #dropdown>
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}"> <el-dropdown-menu>
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }} <el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
</el-dropdown-item> {{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
<el-dropdown-item :command="{command: 'original', row: scope.row}"> </el-dropdown-item>
{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }} <el-dropdown-item :command="{command: 'original', row: scope.row}">
</el-dropdown-item> {{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
</el-dropdown-menu> </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown> </el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="mode" :label="$locale.baseText('executionsList.mode')" width="100" align="center"> <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}`) }} {{ $locale.baseText(`executionsList.modes.${scope.row.mode}`) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$locale.baseText('executionsList.runningTime')" width="150" align="center"> <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"> <span v-if="scope.row.stoppedAt === undefined">
<font-awesome-icon icon="spinner" spin /> <font-awesome-icon icon="spinner" spin />
<execution-time :start-time="scope.row.startedAt"/> <execution-time :start-time="scope.row.startedAt"/>
@ -147,7 +151,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="" width="100" align="center"> <el-table-column label="" width="100" align="center">
<template slot-scope="scope"> <template #default="scope">
<div class="actions-container"> <div class="actions-container">
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill"> <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)" /> <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" @blur="onRetryButtonBlur"
/> />
</span> </span>
<el-dropdown-menu slot="dropdown"> <template #dropdown>
<el-dropdown-item command="current-workflow"> <el-dropdown-menu>
{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }} <el-dropdown-item command="current-workflow">
</el-dropdown-item> {{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
<el-dropdown-item command="original-workflow"> </el-dropdown-item>
{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }} <el-dropdown-item command="original-workflow">
</el-dropdown-item> {{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
</el-dropdown-menu> </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown> </el-dropdown>
<n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" /> <n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" />
</div> </div>

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

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

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

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

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

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

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

@ -21,10 +21,10 @@
@runChange="onRunIndexChange" @runChange="onRunIndexChange"
@tableMounted="$emit('tableMounted', $event)" @tableMounted="$emit('tableMounted', $event)"
> >
<template v-slot:header> <template #header>
<div :class="$style.titleSection"> <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> <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> <span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
</template> </template>
<n8n-option v-for="node of parentNodes" :value="node.name" :key="node.name" class="node-option" :label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"> <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> </div>
</template> </template>
<template v-slot:node-not-run> <template #node-not-run>
<div :class="$style.noOutputData" v-if="parentNodes.length"> <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-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"> <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" /> <NodeExecuteButton type="secondary" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
</n8n-tooltip> </n8n-tooltip>
<n8n-text v-if="!readOnly" tag="div" size="small"> <n8n-text v-if="!readOnly" tag="div" size="small">
@ -62,7 +64,7 @@
</div> </div>
</template> </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> <n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
</template> </template>
</RunData> </RunData>

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

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

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

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

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

@ -1,8 +1,10 @@
<template> <template>
<n8n-tooltip class="primary-color" placement="bottom-end" > <n8n-tooltip class="primary-color" placement="bottom-end" >
<div slot="content"> <template #content>
<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span> <div>
</div> <span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
</div>
</template>
<div> <div>
<font-awesome-icon icon="exclamation-triangle" /> <font-awesome-icon icon="exclamation-triangle" />
<span v-text="$locale.baseText('executionDetails.readOnly.readOnly')"></span> <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> <template>
<div class="container" v-if="workflowName"> <div class="container" v-if="workflowName">
<BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container"> <BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container">
<template v-slot="{ value }"> <template #default="{ value }">
<ShortenName <ShortenName
:name="workflowName" :name="workflowName"
:limit="value" :limit="value"
:custom="true" :custom="true"
> >
<template v-slot="{ shortenedName }"> <template #default="{ shortenedName }">
<InlineTextEdit <InlineTextEdit
:value="workflowName" :value="workflowName"
:previewValue="shortenedName" :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"> <el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }"> <div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" /> <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="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item> <el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</div> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"> <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" :style="styles"
append-to-body append-to-body
> >
<template v-slot:title v-if="$scopedSlots.header"> <template #title v-if="$scopedSlots.header">
<slot name="header" v-if="!loading" /> <slot name="header" v-if="!loading" />
</template> </template>
<template v-slot:title v-else-if="title"> <template #title v-else-if="title">
<div :class="centerTitle ? $style.centerTitle : ''"> <div :class="centerTitle ? $style.centerTitle : ''">
<div v-if="title"> <div v-if="title">
<n8n-heading tag="h1" size="xlarge">{{title}}</n8n-heading> <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" :modal="modal"
:wrapperClosable="wrapperClosable" :wrapperClosable="wrapperClosable"
> >
<template v-slot:title> <template #title>
<slot name="header" /> <slot name="header" />
</template> </template>
<template> <template>

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

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY"> <ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
<template v-slot:default="{ modalName }"> <template #default="{ modalName }">
<ContactPromptModal <ContactPromptModal
:modalName="modalName" :modalName="modalName"
/> />
@ -9,7 +9,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY"> <ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
<template v-slot="{ modalName, activeId, mode }"> <template #default="{ modalName, activeId, mode }">
<CredentialEdit <CredentialEdit
:modalName="modalName" :modalName="modalName"
:mode="mode" :mode="mode"
@ -26,7 +26,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="DUPLICATE_MODAL_KEY"> <ModalRoot :name="DUPLICATE_MODAL_KEY">
<template v-slot:default="{ modalName, active, data }"> <template #default="{ modalName, active, data }">
<DuplicateWorkflowDialog <DuplicateWorkflowDialog
:data="data" :data="data"
:isActive="active" :isActive="active"
@ -48,7 +48,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true"> <ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
<template v-slot:default="{ active }"> <template #default="{ active }">
<ValueSurvey :isActive="active"/> <ValueSurvey :isActive="active"/>
</template> </template>
</ModalRoot> </ModalRoot>
@ -66,7 +66,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="DELETE_USER_MODAL_KEY"> <ModalRoot :name="DELETE_USER_MODAL_KEY">
<template v-slot="{ modalName, activeId }"> <template #default="{ modalName, activeId }">
<DeleteUserModal <DeleteUserModal
:modalName="modalName" :modalName="modalName"
:activeId="activeId" :activeId="activeId"
@ -99,7 +99,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"> <ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
<template v-slot="{ modalName, activeId, mode }"> <template #default="{ modalName, activeId, mode }">
<CommunityPackageManageConfirmModal <CommunityPackageManageConfirmModal
:modalName="modalName" :modalName="modalName"
:activePackageName="activeId" :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="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
<div v-if="hasIssues" class="node-issues"> <div v-if="hasIssues" class="node-issues">
<n8n-tooltip placement="bottom" > <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" /> <font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
<div v-else-if="waiting" class="waiting"> <div v-else-if="waiting" class="waiting">
<n8n-tooltip placement="bottom"> <n8n-tooltip placement="bottom">
<div slot="content" v-text="waiting"></div> <template #content>
<div v-text="waiting"></div>
</template>
<font-awesome-icon icon="clock" /> <font-awesome-icon icon="clock" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
@ -32,7 +36,9 @@
<div class="node-trigger-tooltip__wrapper"> <div class="node-trigger-tooltip__wrapper">
<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item"> <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 /> <span />
</n8n-tooltip> </n8n-tooltip>
<n8n-tooltip <n8n-tooltip

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

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

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

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

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

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

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

@ -43,7 +43,9 @@
<div :class="$style.warning" v-if="issues.length"> <div :class="$style.warning" v-if="issues.length">
<n8n-tooltip placement="top" > <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" /> <font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>

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

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

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

@ -1,6 +1,8 @@
<template> <template>
<n8n-tooltip placement="bottom" :disabled="!disabledHint"> <n8n-tooltip placement="bottom" :disabled="!disabledHint">
<div slot="content">{{ disabledHint }}</div> <template #content>
<div>{{ disabledHint }}</div>
</template>
<div> <div>
<n8n-button <n8n-button
:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents" :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')" /> <n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
</div> </div>
</div> </div>
<div class="ph-no-capture" slot="reference" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}"> <template #reference>
{{ value }} <div class="ph-no-capture" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
<div :class="$style.editIconContainer"> {{ value }}
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" /> <div :class="$style.editIconContainer">
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
</div>
</div> </div>
</div> </template>
</n8n-popover> </n8n-popover>
</span> </span>
</template> </template>

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

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

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

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

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

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

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

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

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

@ -27,14 +27,16 @@
:stickyOffset="4" :stickyOffset="4"
@drop="onDrop" @drop="onDrop"
> >
<template v-slot="{ droppable, activeDrop }"> <template #default="{ droppable, activeDrop }">
<n8n-tooltip <n8n-tooltip
placement="left" placement="left"
:manual="true" :manual="true"
:value="showMappingTooltip" :value="showMappingTooltip"
:buttons="dataMappingTooltipButtons" :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 <parameter-input-wrapper
ref="param" ref="param"
:parameter="parameter" :parameter="parameter"

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

@ -1,7 +1,9 @@
<template> <template>
<div :class="$style['parameter-issues']" v-if="issues.length"> <div :class="$style['parameter-issues']" v-if="issues.length">
<n8n-tooltip placement="top" > <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" /> <font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>

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

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

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

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

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

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

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

@ -11,7 +11,9 @@
</div> </div>
<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown"> <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')"> <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> </n8n-input>
</div> </div>
<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired"> <div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
@ -48,7 +50,7 @@
</div> </div>
</div> </div>
</div> </div>
<slot slot="reference" /> <slot name="reference" />
</n8n-popover> </n8n-popover>
</template> </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"> <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> <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-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
</n8n-select> </n8n-select>
@ -307,7 +307,7 @@
<div :class="$style.pageSizeSelector"> <div :class="$style.pageSizeSelector">
<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body> <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 <n8n-option
v-for="size in pageSizes" v-for="size in pageSizes"
:key="size" :key="size"

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -9,12 +9,12 @@
width="120px" width="120px"
class="value-survey" class="value-survey"
> >
<template slot="header"> <template #header>
<div :class="$style.title"> <div :class="$style.title">
<n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading> <n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading>
</div> </div>
</template> </template>
<template slot="content"> <template #content>
<section :class="$style.content"> <section :class="$style.content">
<div v-if="showButtons" :class="$style.wrapper"> <div v-if="showButtons" :class="$style.wrapper">
<div :class="$style.buttons"> <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> <span class="el-dropdown-link clickable" @click.stop>
<font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" /> <font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <template #dropdown>
<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item> <el-dropdown-menu>
</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> </el-dropdown>
</div> </div>

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

@ -1,6 +1,8 @@
<template> <template>
<n8n-tooltip content=" " placement="top" > <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> <font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
</n8n-tooltip> </n8n-tooltip>
</template> </template>

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

@ -9,7 +9,9 @@
</n8n-text> </n8n-text>
</div> </div>
<n8n-tooltip :disabled="!disabled" placement="bottom"> <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 <el-switch
v-loading="updatingWorkflowActivation" v-loading="updatingWorkflowActivation"
:value="workflowActive" :value="workflowActive"
@ -24,7 +26,9 @@
<div class="could-not-be-started" v-if="couldNotBeStarted"> <div class="could-not-be-started" v-if="couldNotBeStarted">
<n8n-tooltip placement="top"> <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" /> <font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

@ -51,10 +51,11 @@
:hideActions="pullConnActive" :hideActions="pullConnActive"
:isProductionExecutionPreview="isProductionExecutionPreview" :isProductionExecutionPreview="isProductionExecutionPreview"
> >
<span <template #custom-tooltip>
slot="custom-tooltip" <span
v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')" v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
/> />
</template>
</node> </node>
<sticky <sticky
v-else 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> <n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning"> <div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom"> <n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span"> <template #content>
<template #action> <i18n path="settings.users.setupSMTPToInviteUsers" tag="span">
<a <template #action>
href="https://docs.n8n.io/reference/user-management.html#step-one-smtp" <a
target="_blank" href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')" target="_blank"
/> v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
</template> />
</i18n> </template>
</i18n>
</template>
<div> <div>
<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" /> <n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
</div> </div>

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

@ -1,6 +1,6 @@
<template> <template>
<TemplatesView :goBackEnabled="true"> <TemplatesView :goBackEnabled="true">
<template v-slot:header> <template #header>
<div v-if="!notFoundError" :class="$style.wrapper"> <div v-if="!notFoundError" :class="$style.wrapper">
<div :class="$style.title"> <div :class="$style.title">
<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge"> <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> <n8n-text color="text-base">{{ $locale.baseText('templates.collectionsNotFound') }}</n8n-text>
</div> </div>
</template> </template>
<template v-if="!notFoundError" v-slot:content> <template v-if="!notFoundError" #content>
<div :class="$style.wrapper"> <div :class="$style.wrapper">
<div :class="$style.mainContent"> <div :class="$style.mainContent">
<div :class="$style.markdown" v-if="loading || (collection && collection.description)"> <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> <template>
<TemplatesView> <TemplatesView>
<template v-slot:header> <template #header>
<div :class="$style.wrapper"> <div :class="$style.wrapper">
<div :class="$style.title"> <div :class="$style.title">
<n8n-heading tag="h1" size="2xlarge"> <n8n-heading tag="h1" size="2xlarge">
@ -16,7 +16,7 @@
</div> </div>
</div> </div>
</template> </template>
<template v-slot:content> <template #content>
<div :class="$style.contentWrapper"> <div :class="$style.contentWrapper">
<div :class="$style.filters"> <div :class="$style.filters">
<TemplateFilters <TemplateFilters
@ -37,7 +37,9 @@
@blur="trackSearch" @blur="trackSearch"
clearable clearable
> >
<font-awesome-icon icon="search" slot="prefix" /> <template #prefix>
<font-awesome-icon icon="search" />
</template>
</n8n-input> </n8n-input>
<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections"> <div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
<div :class="$style.header"> <div :class="$style.header">

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

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

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

@ -11,7 +11,7 @@
@click:add="addWorkflow" @click:add="addWorkflow"
@update:filters="filters = $event" @update:filters="filters = $event"
> >
<template v-slot="{ data }"> <template #default="{ data }">
<workflow-card :data="data" @click:tag="onClickTag" /> <workflow-card :data="data" @click:tag="onClickTag" />
</template> </template>
<template #empty> <template #empty>
@ -38,7 +38,7 @@
</n8n-card> </n8n-card>
</div> </div>
</template> </template>
<template v-slot:filters="{ setKeyValue }"> <template #filters="{ setKeyValue }">
<div class="mb-s" v-if="settingsStore.areTagsEnabled"> <div class="mb-s" v-if="settingsStore.areTagsEnabled">
<n8n-input-label <n8n-input-label
:label="$locale.baseText('workflows.filters.tags')" :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-regular-svg-icons': ^6.1.1
'@fortawesome/free-solid-svg-icons': ^5.15.3 '@fortawesome/free-solid-svg-icons': ^5.15.3
'@fortawesome/vue-fontawesome': ^2.0.2 '@fortawesome/vue-fontawesome': ^2.0.2
'@intlify/vue-i18n-loader': ^1.1.0
'@pinia/testing': ^0.0.14 '@pinia/testing': ^0.0.14
'@testing-library/jest-dom': ^5.16.5 '@testing-library/jest-dom': ^5.16.5
'@testing-library/vue': ^5.8.3 '@testing-library/vue': ^5.8.3
@ -487,7 +486,6 @@ importers:
'@types/uuid': ^8.3.2 '@types/uuid': ^8.3.2
'@vitejs/plugin-legacy': ^1.8.2 '@vitejs/plugin-legacy': ^1.8.2
'@vitejs/plugin-vue2': ^1.1.2 '@vitejs/plugin-vue2': ^1.1.2
'@yfwz100/vite-plugin-vue2-i18n': ^1.0.0-2
axios: ^0.21.1 axios: ^0.21.1
c8: ^7.12.0 c8: ^7.12.0
dateformat: ^3.0.3 dateformat: ^3.0.3
@ -592,7 +590,6 @@ importers:
vue2-touch-events: 3.2.2 vue2-touch-events: 3.2.2
xss: 1.0.14 xss: 1.0.14
devDependencies: devDependencies:
'@intlify/vue-i18n-loader': 1.1.0
'@pinia/testing': 0.0.14_pinia@2.0.23+vue@2.7.13 '@pinia/testing': 0.0.14_pinia@2.0.23+vue@2.7.13
'@testing-library/jest-dom': 5.16.5 '@testing-library/jest-dom': 5.16.5
'@testing-library/vue': 5.8.3_2s2ymob7v2oigx3hqbmnjuqthq '@testing-library/vue': 5.8.3_2s2ymob7v2oigx3hqbmnjuqthq
@ -608,7 +605,6 @@ importers:
'@types/uuid': 8.3.4 '@types/uuid': 8.3.4
'@vitejs/plugin-legacy': 1.8.2_vite@2.9.5 '@vitejs/plugin-legacy': 1.8.2_vite@2.9.5
'@vitejs/plugin-vue2': 1.1.2_vite@2.9.5+vue@2.7.13 '@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 c8: 7.12.0
jshint: 2.13.5 jshint: 2.13.5
sass: 1.55.0 sass: 1.55.0
@ -2863,20 +2859,6 @@ packages:
xregexp: 2.0.0 xregexp: 2.0.0
dev: false 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: /@istanbuljs/load-nyc-config/1.1.0:
resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==} resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -6877,14 +6859,6 @@ packages:
resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
dev: true 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: /a-sync-waterfall/1.0.1:
resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==} resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==}
dev: false dev: false