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

refactor(design-system): replace functional components (#3802)

Browse source 
* update creator item

* update warning tooltip

* update badge and trigger icon

* update action box

* update avatar component

* update badge

* update heading component

* update icon component

* update link component

* update menu

* update route component

* fix avatar bug

* fix avatar bug

* update input component

* update select

* update input

* update tags component

* update spinner

* update square button

* update tag component

* update text component

* add danger color

* add vue.extend

* add human readable names

* add human readable name

* revert button changes

* update name

* revert name

* update classes

* delete unused component

* redo name change

* rename

* rename back

* rename back

* update snapshots
This commit is contained in:
Mutasem Aldmour 2022-08-05 15:03:24 +02:00 committed by GitHub
parent f151a8ad4a
commit 60da5bb7ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 486 additions and 307 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/design-system/src/components/N8nActionBox/ActionBox.vue
View file

@ -1,29 +1,28 @@
<template functional> <template>
<div :class="$style.container"> <div :class="['n8n-action-box', $style.container]">
<div :class="$style.heading" v-if="props.heading"> <div :class="$style.heading" v-if="heading">
<component :is="$options.components.N8nHeading" size="xlarge" align="center">{{ props.heading }}</component> <n8n-heading size="xlarge" align="center">{{ heading }}</n8n-heading>
</div> </div>
<div :class="$style.description" @click="(e) => listeners.descriptionClick && listeners.descriptionClick(e)"> <div :class="$style.description" @click="$emit('descriptionClick', $event)">
<component :is="$options.components.N8nText" color="text-base"> <n8n-text color="text-base">
<span v-html="props.description"></span> <span v-html="description"></span>
</component> </n8n-text>
</div> </div>
<component v-if="props.buttonText" :is="$options.components.N8nButton" :label="props.buttonText" size="large" <n8n-button v-if="buttonText" :label="buttonText" size="large"
@click="(e) => listeners.click && listeners.click(e)" @click="$emit('click', $event)"
/> />
<component <n8n-callout
v-if="props.calloutText" v-if="calloutText"
:is="$options.components.N8nCallout" :theme="calloutTheme"
:theme="props.calloutTheme" :icon="calloutIcon"
:icon="props.calloutIcon"
:class="$style.callout" :class="$style.callout"
> >
<template> <template>
<component :is="$options.components.N8nText" color="text-base"> <n8n-text color="text-base">
<span size="small" v-html="props.calloutText"></span> <span size="small" v-html="calloutText"></span>
</component> </n8n-text>
</template> </template>
</component> </n8n-callout>
</div> </div>
</template> </template>
@ -32,8 +31,9 @@ import N8nButton from '../N8nButton';
import N8nHeading from '../N8nHeading'; import N8nHeading from '../N8nHeading';
import N8nText from '../N8nText'; import N8nText from '../N8nText';
import N8nCallout from '../N8nCallout'; import N8nCallout from '../N8nCallout';
import Vue from 'vue';
export default { export default Vue.extend({
name: 'n8n-action-box', name: 'n8n-action-box',
components: { components: {
N8nButton, N8nButton,
@ -62,7 +62,7 @@ export default {
type: String, type: String,
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

54
packages/design-system/src/components/N8nAvatar/Avatar.vue
View file

@ -1,19 +1,18 @@
<template functional> <template>
<span :class="$style.container"> <span :class="['n8n-avatar', $style.container]" v-on="$listeners">
<component <avatar
v-if="props.firstName" v-if="firstName"
:is="$options.components.Avatar" :size="getSize(size)"
:size="$options.methods.getSize(props.size)" :name="firstName + ' ' + lastName"
:name="props.firstName + ' ' + props.lastName"
variant="marble" variant="marble"
:colors="$options.methods.getColors(props.colors)" :colors="getColors(colors)"
/> />
<div <div
v-else v-else
:class="$style.empty" :class="[$style.empty, $style[size]]"
:style="$options.methods.getBlankStyles(props.size)"> >
</div> </div>
<span v-if="props.firstName" :class="$style.initials">{{$options.methods.getInitials(props)}}</span> <span v-if="firstName" :class="$style.initials">{{initials}}</span>
</span> </span>
</template> </template>
@ -26,7 +25,9 @@ const sizes: {[size: string]: number} = {
medium: 40, medium: 40,
}; };
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-avatar', name: 'n8n-avatar',
props: { props: {
firstName: { firstName: {
@ -46,14 +47,12 @@ export default {
components: { components: {
Avatar, Avatar,
}, },
computed: {
initials() {
return (this.firstName ? this.firstName.charAt(0): '') + (this.lastName? this.lastName.charAt(0): '');
},
},
methods: { methods: {
getInitials({firstName, lastName}) {
return firstName.charAt(0) + lastName.charAt(0);
},
getBlankStyles(size): {height: string, width: string} {
const px = sizes[size];
return { height: `${px}px`, width: `${px}px` };
},
getColors(colors): string[] { getColors(colors): string[] {
const style = getComputedStyle(document.body); const style = getComputedStyle(document.body);
return colors.map((color: string) => style.getPropertyValue(color)); return colors.map((color: string) => style.getPropertyValue(color));
@ -62,7 +61,7 @@ export default {
return sizes[size]; return sizes[size];
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -86,4 +85,19 @@ export default {
color: var(--color-text-xlight); color: var(--color-text-xlight);
text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3); text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
} }
.small {
height: 28px;
width: 28px;
}
.medium {
height: 40px;
width: 40px;
}
.large {
height: 48px;
width: 48px;
}
</style> </style>

14
packages/design-system/src/components/N8nBadge/Badge.vue
View file

@ -1,17 +1,19 @@
<template functional> <template>
<span <span
:class="$style[props.theme]" :class="['n8n-badge', $style[theme]]"
> >
<component :is="$options.components.N8nText" :size="props.size" :bold="props.bold" :compact="true"> <n8n-text :size="size" :bold="bold" :compact="true">
<slot></slot> <slot></slot>
</component> </n8n-text>
</span> </span>
</template> </template>
<script lang="ts"> <script lang="ts">
import N8nText from '../N8nText'; import N8nText from '../N8nText';
export default { import Vue from 'vue';
export default Vue.extend({
props: { props: {
theme: { theme: {
type: String, type: String,
@ -30,7 +32,7 @@ export default {
components: { components: {
N8nText, N8nText,
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

6
packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap
View file

@ -1,7 +1,7 @@
// Vitest Snapshot v1 // Vitest Snapshot v1
exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"_default_13dw2_9 _badge_13dw2_1\\"><span class=\\"_size-large_9dlpz_14 _bold_9dlpz_1\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></span></span>"`; exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge _default_13dw2_9 _badge_13dw2_1\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"_secondary_13dw2_16 _badge_13dw2_1\\"><span class=\\"_size-medium_9dlpz_19 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></span></span>"`; exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge _secondary_13dw2_16 _badge_13dw2_1\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"_default_13dw2_9 _badge_13dw2_1\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\" style=\\"line-height: 1;\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></span></span>"`; exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge _default_13dw2_9 _badge_13dw2_1\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;

1
packages/design-system/src/components/N8nCallout/Callout.vue
View file

@ -49,6 +49,7 @@ export default Vue.extend({
computed: { computed: {
classes(): string[] { classes(): string[] {
return [ return [
'n8n-callout',
this.$style['callout'], this.$style['callout'],
this.$style[this.theme], this.$style[this.theme],
]; ];

14
packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View file

@ -1,7 +1,7 @@
// Vitest Snapshot v1 // Vitest Snapshot v1
exports[`components > N8nCallout > should render additional slots correctly 1`] = ` exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _custom_p74de_16\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _custom_p74de_16\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
@ -13,7 +13,7 @@ exports[`components > N8nCallout > should render additional slots correctly 1`]
`; `;
exports[`components > N8nCallout > should render custom theme correctly 1`] = ` exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _custom_p74de_16\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _custom_p74de_16\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
@ -24,7 +24,7 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
`; `;
exports[`components > N8nCallout > should render danger theme correctly 1`] = ` exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _danger_p74de_34\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _danger_p74de_34\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
@ -35,7 +35,7 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
`; `;
exports[`components > N8nCallout > should render info theme correctly 1`] = ` exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _info_p74de_16\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _info_p74de_16\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
@ -46,7 +46,7 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
`; `;
exports[`components > N8nCallout > should render secondary theme correctly 1`] = ` exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _secondary_p74de_44\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _secondary_p74de_44\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
@ -57,7 +57,7 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
`; `;
exports[`components > N8nCallout > should render success theme correctly 1`] = ` exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _success_p74de_28\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _success_p74de_28\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
@ -68,7 +68,7 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
`; `;
exports[`components > N8nCallout > should render warning theme correctly 1`] = ` exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"_callout_p74de_1 _warning_p74de_22\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_p74de_1 _warning_p74de_22\\">
<div class=\\"_message-section_p74de_12\\"> <div class=\\"_message-section_p74de_12\\">
<div class=\\"_icon_p74de_40\\"> <div class=\\"_icon_p74de_40\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>

2
packages/design-system/src/components/N8nCheckbox/Checkbox.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<el-checkbox <el-checkbox
v-bind="$props" v-bind="$props"
:class="$style.n8nCheckbox" :class="['n8n-checkbox', $style.n8nCheckbox]"
:disabled="disabled" :disabled="disabled"
:indeterminate="indeterminate" :indeterminate="indeterminate"
:value="value" :value="value"

2
packages/design-system/src/components/N8nFormBox/FormBox.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
:class="$style.container" :class="['n8n-form-box', $style.container]"
> >
<div <div
v-if="title" v-if="title"

74
packages/design-system/src/components/N8nHeading/Heading.vue
View file

@ -1,11 +1,13 @@
<template functional> <template>
<component :is="props.tag" :class="$options.methods.getClasses(props, $style)" :style="$options.methods.getStyles(props)"> <component :is="tag" :class="['n8n-heading', ...classes]" v-on="$listeners">
<slot></slot> <slot></slot>
</component> </component>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-heading', name: 'n8n-heading',
props: { props: {
tag: { tag: {
@ -23,29 +25,31 @@ export default {
}, },
color: { color: {
type: String, type: String,
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'].includes(value), validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger'].includes(value),
}, },
align: { align: {
type: String, type: String,
validator: (value: string): boolean => ['right', 'left', 'center'].includes(value), validator: (value: string): boolean => ['right', 'left', 'center'].includes(value),
}, },
}, },
methods: { computed: {
getClasses(props: {size: string, bold: boolean}, $style: any) { classes() {
return {[$style[`size-${props.size}`]]: true, [$style.bold]: props.bold, [$style.regular]: !props.bold}; const applied = [];
}, if (this.align) {
getStyles(props: {color: string}) { applied.push(`align-${this.align}`);
const styles = {} as any;
if (props.color) {
styles.color = `var(--color-${props.color})`;
} }
if (props.align) { if (this.color) {
styles['text-align'] = props.align; applied.push(this.color);
} }
return styles;
}, applied.push(`size-${this.size}`);
applied.push(this.bold? 'bold': 'regular');
return applied.map((c) => this.$style[c]);
}
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -82,4 +86,40 @@ export default {
line-height: var(--font-line-height-regular); line-height: var(--font-line-height-regular);
} }
.primary {
color: var(--color-primary);
}
.text-dark {
color: var(--color-text-dark);
}
.text-base {
color: var(--color-text-base);
}
.text-light {
color: var(--color-text-light);
}
.text-xlight {
color: var(--color-text-xlight);
}
.danger {
color: var(--color-danger);
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
</style> </style>

27
packages/design-system/src/components/N8nIcon/Icon.vue
View file

@ -1,24 +1,25 @@
<template functional> <template>
<component <n8n-text
:is="$options.components.N8nText" :size="size"
:size="props.size" :color="color"
:color="props.color"
:compact="true" :compact="true"
class="n8n-icon"
> >
<component <font-awesome-icon
:is="$options.components.FontAwesomeIcon" :icon="icon"
:icon="props.icon" :spin="spin"
:spin="props.spin" :class="$style[size]"
:class="$style[props.size]"
/> />
</component> </n8n-text>
</template> </template>
<script lang="ts"> <script lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import N8nText from '../N8nText'; import N8nText from '../N8nText';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-icon', name: 'n8n-icon',
components: { components: {
FontAwesomeIcon, FontAwesomeIcon,
@ -40,7 +41,7 @@ export default {
type: String, type: String,
}, },
}, },
}; });
</script> </script>

6
packages/design-system/src/components/N8nIconButton/IconButton.vue
View file

@ -9,7 +9,9 @@
<script lang="ts"> <script lang="ts">
import N8nButton from '../N8nButton'; import N8nButton from '../N8nButton';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-icon-button', name: 'n8n-icon-button',
components: { components: {
N8nButton, N8nButton,
@ -61,7 +63,7 @@ export default {
default: true, default: true,
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

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

@ -21,7 +21,9 @@
import N8nText from '../N8nText'; import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon'; import N8nIcon from '../N8nIcon';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-info-accordion', name: 'n8n-info-accordion',
components: { components: {
N8nText, N8nText,
@ -53,7 +55,7 @@ export default {
this.$emit('click', e); this.$emit('click', e);
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="{[$style[theme]]: true, [$style[type]]: true, [$style.bold]: bold}"> <div :class="{'n8n-info-tip': true, [$style[theme]]: true, [$style[type]]: true, [$style.bold]: bold}">
<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'"> <n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
<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'" />
@ -14,7 +14,9 @@
import N8nIcon from '../N8nIcon'; import N8nIcon from '../N8nIcon';
import N8nTooltip from '../N8nTooltip'; import N8nTooltip from '../N8nTooltip';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-info-tip', name: 'n8n-info-tip',
components: { components: {
N8nIcon, N8nIcon,
@ -42,7 +44,7 @@ export default {
default: 'top', default: 'top',
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

69
packages/design-system/src/components/N8nInput/Input.vue
View file

@ -1,32 +1,33 @@
<template functional> <template>
<component <el-input
:is="$options.components.ElInput" v-bind="$props"
v-bind="props" :size="computedSize"
:size="$options.methods.getSize(props.size)" :class="['n8n-input', ...classes]"
:class="$style[$options.methods.getClass(props)]" :autoComplete="autocomplete"
:ref="data.ref" ref="innerInput"
:autoComplete="props.autocomplete" v-on="$listeners"
v-on="listeners"
> >
<template v-slot:prepend> <template #prepend>
<slot name="prepend" /> <slot name="prepend" />
</template> </template>
<template v-slot:append> <template #append>
<slot name="append" /> <slot name="append" />
</template> </template>
<template v-slot:prefix> <template #prefix>
<slot name="prefix" /> <slot name="prefix" />
</template> </template>
<template v-slot:suffix> <template #suffix>
<slot name="suffix" /> <slot name="suffix" />
</template> </template>
</component> </el-input>
</template> </template>
<script lang="ts"> <script lang="ts">
import ElInput from 'element-ui/lib/input'; import ElInput from 'element-ui/lib/input';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-input', name: 'n8n-input',
components: { components: {
ElInput, ElInput,
@ -68,23 +69,43 @@ export default {
default: 'off', default: 'off',
}, },
}, },
methods: { computed: {
getSize(size: string): string | undefined { computedSize(): string | undefined {
if (size === 'xlarge') { if (this.size === 'xlarge') {
return undefined; return undefined;
} }
return size; return this.size;
}, },
getClass(props: { size: string }): string { classes(): string[] {
if (props.size === 'xlarge') { if (this.size === 'xlarge') {
return 'xlarge'; return ['xlarge'];
} }
return ''; return [];
}, },
}, },
}; methods: {
focus() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
}
},
blur() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).blur();
}
},
select() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).select();
}
},
},
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>

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

@ -1,6 +1,7 @@
<template> <template>
<div :class="$style.container"> <div :class="$style.container">
<div v-if="label || $slots.options" :class="{ <div v-if="label || $slots.options" :class="{
'n8n-input-label': true,
[this.$style.heading]: !!this.label, [this.$style.heading]: !!this.label,
[this.$style.underline]: this.underline, [this.$style.underline]: this.underline,
[this.$style[this.size]]: true, [this.$style[this.size]]: true,
@ -34,7 +35,9 @@ import N8nIcon from '../N8nIcon';
import { addTargetBlank } from '../utils/helpers'; import { addTargetBlank } from '../utils/helpers';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-input-label', name: 'n8n-input-label',
components: { components: {
N8nText, N8nText,
@ -74,7 +77,7 @@ export default {
methods: { methods: {
addTargetBlank, addTargetBlank,
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

21
packages/design-system/src/components/N8nLink/Link.vue
View file

@ -1,15 +1,16 @@
<template functional> <template>
<component :is="$options.components.N8nRoute" :to="props.to" :newWindow="props.newWindow" <n8n-route :to="to" :newWindow="newWindow"
@click="listeners.click" v-on="$listeners"
class="n8n-link"
> >
<span <span
:class="$style[`${props.underline ? `${props.theme}-underline` : props.theme}`]" :class="$style[`${underline ? `${theme}-underline` : theme}`]"
> >
<component :is="$options.components.N8nText" :size="props.size" :bold="props.bold"> <n8n-text :size="size" :bold="bold">
<slot></slot> <slot></slot>
</component> </n8n-text>
</span> </span>
</component> </n8n-route>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -17,7 +18,9 @@ import Vue from 'vue';
import N8nText from '../N8nText'; import N8nText from '../N8nText';
import N8nRoute from '../N8nRoute'; import N8nRoute from '../N8nRoute';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-link', name: 'n8n-link',
props: { props: {
size: { size: {
@ -49,7 +52,7 @@ export default {
N8nText, N8nText,
N8nRoute, N8nRoute,
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

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

@ -1,5 +1,5 @@
<template> <template>
<el-skeleton :loading="loading" :animated="animated"> <el-skeleton :loading="loading" :animated="animated" class="n8n-loading">
<template slot="template"> <template slot="template">
<el-skeleton-item <el-skeleton-item
v-if="variant === 'button'" v-if="variant === 'button'"
@ -43,7 +43,9 @@
import ElSkeleton from 'element-ui/lib/skeleton'; import ElSkeleton from 'element-ui/lib/skeleton';
import ElSkeletonItem from 'element-ui/lib/skeleton-item'; import ElSkeletonItem from 'element-ui/lib/skeleton-item';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-loading', name: 'n8n-loading',
components: { components: {
ElSkeleton, ElSkeleton,
@ -72,7 +74,7 @@ export default {
validator: (value: string): boolean => ['p', 'h1', 'button', 'image'].includes(value), validator: (value: string): boolean => ['p', 'h1', 'button', 'image'].includes(value),
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

8
packages/design-system/src/components/N8nMarkdown/Markdown.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="n8n-markdown">
<div <div
v-if="!loading" v-if="!loading"
ref="editor" ref="editor"
@ -55,7 +55,9 @@ interface IImage {
url: string; url: string;
} }
export default { import Vue from 'vue';
export default Vue.extend({
components: { components: {
N8nLoading, N8nLoading,
}, },
@ -175,7 +177,7 @@ export default {
this.$emit('markdown-click', clickedLink, event); this.$emit('markdown-click', clickedLink, event);
} }
} }
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

23
packages/design-system/src/components/N8nMenu/Menu.vue
View file

@ -1,20 +1,21 @@
<template functional> <template>
<component <el-menu
:is="$options.components.ElMenu" :defaultActive="defaultActive"
:defaultActive="props.defaultActive" :collapse="collapse"
:collapse="props.collapse" :router="router"
:router="props.router" :class="['n8n-menu', $style[type + (light ? '-light' : '')]]"
:class="$style[props.type + (props.light ? '-light' : '')]" v-on="$listeners"
@select="(e) => listeners.select && listeners.select(e)"
> >
<slot></slot> <slot></slot>
</component> </el-menu>
</template> </template>
<script lang="ts"> <script lang="ts">
import ElMenu from 'element-ui/lib/menu'; import ElMenu from 'element-ui/lib/menu';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-menu', name: 'n8n-menu',
props: { props: {
type: { type: {
@ -38,7 +39,7 @@ export default {
components: { components: {
ElMenu, ElMenu,
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

6
packages/design-system/src/components/N8nPulse/Pulse.vue
View file

@ -9,9 +9,11 @@
</template> </template>
<script> <script>
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-pulse', name: 'n8n-pulse',
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

8
packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
View file

@ -1,12 +1,14 @@
<template> <template>
<label role="radio" tabindex="-1" :class="{[$style.container]: true, [$style.hoverable]: !this.disabled}" aria-checked="true"> <label role="radio" tabindex="-1" :class="{'n8n-radio-button': true, [$style.container]: true, [$style.hoverable]: !this.disabled}" aria-checked="true">
<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value"> <input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
<div :class="{[$style.button]: true, [$style.active]: active, [$style[size]]: true, [$style.disabled]: disabled}" @click="$emit('click')">{{ label }}</div> <div :class="{[$style.button]: true, [$style.active]: active, [$style[size]]: true, [$style.disabled]: disabled}" @click="$emit('click')">{{ label }}</div>
</label> </label>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-radio-button', name: 'n8n-radio-button',
props: { props: {
label: { label: {
@ -31,7 +33,7 @@ export default {
type: Boolean, type: Boolean,
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

8
packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div role="radiogroup" :class="{[$style.radioGroup]: true, [$style.disabled]: disabled}"> <div role="radiogroup" :class="{'n8n-radio-buttons': true, [$style.radioGroup]: true, [$style.disabled]: disabled}">
<RadioButton <RadioButton
v-for="option in options" v-for="option in options"
:key="option.value" :key="option.value"
@ -15,7 +15,9 @@
<script lang="ts"> <script lang="ts">
import RadioButton from './RadioButton.vue'; import RadioButton from './RadioButton.vue';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-radio-buttons', name: 'n8n-radio-buttons',
props: { props: {
value: { value: {
@ -41,7 +43,7 @@ export default {
this.$emit('input', value); this.$emit('input', value);
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

40
packages/design-system/src/components/N8nRoute/Route.vue
View file

@ -1,17 +1,17 @@
<template functional> <template>
<span> <span>
<router-link <router-link
v-if="$options.methods.useRouterLink(props)" v-if="useRouterLink"
:to="props.to" :to="to"
@click="(e) => listeners.click && listeners.click(e)" v-on="$listeners"
> >
<slot></slot> <slot></slot>
</router-link> </router-link>
<a <a
v-else v-else
:href="props.to" :href="to"
@click="(e) => listeners.click && listeners.click(e)" :target="openNewWindow ? '_blank': '_self'"
:target="$options.methods.openNewWindow(props) ? '_blank': '_self'" v-on="$listeners"
> >
<slot></slot> <slot></slot>
</a> </a>
@ -21,7 +21,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default { export default Vue.extend({
name: 'n8n-route', name: 'n8n-route',
props: { props: {
to: { to: {
@ -32,28 +32,28 @@ export default {
default: undefined, default: undefined,
}, },
}, },
methods: { computed: {
useRouterLink(props: {to: object | string, newWindow: boolean | undefined}) { useRouterLink() {
if (props.newWindow === true) { if (this.newWindow === true) {
// router-link does not support click events and opening in new window // router-link does not support click events and opening in new window
return false; return false;
} }
if (typeof props.to === 'string') { if (typeof this.to === 'string') {
return props.to.startsWith('/'); return this.to.startsWith('/');
} }
return props.to !== undefined; return this.to !== undefined;
}, },
openNewWindow(props: {to: string, newWindow: boolean | undefined}) { openNewWindow() {
if (props.newWindow !== undefined) { if (this.newWindow !== undefined) {
return props.newWindow; return this.newWindow;
} }
if (typeof props.to === 'string') { if (typeof this.to === 'string') {
return !props.to.startsWith('/'); return !this.to.startsWith('/');
} }
return true; return true;
}, },
}, },
}; });
</script> </script>

77
packages/design-system/src/components/N8nSelect/Select.vue
View file

@ -1,33 +1,33 @@
<template functional> <template>
<div :class="{[$style.container]: true, [$style.withPrepend]: !!$slots.prepend}"> <div :class="{'n8n-select': true, [$style.container]: true, [$style.withPrepend]: !!$slots.prepend}">
<div v-if="$slots.prepend" :class="$style.prepend"> <div v-if="$slots.prepend" :class="$style.prepend">
<slot name="prepend" /> <slot name="prepend" />
</div> </div>
<component <el-select
:is="$options.components.ElSelect" v-bind="$props"
v-bind="props" :value="value"
:value="props.value" :size="computedSize"
:size="$options.methods.getSize(props.size)" :class="$style[classes]"
:class="$style[$options.methods.getClass(props)]" :popper-class="popperClass"
:popper-class="$options.methods.getPopperClass(props, $style)" v-on="$listeners"
v-on="listeners" ref="innerSelect"
:ref="data.ref"
> >
<template v-slot:prefix> <template #prefix>
<slot name="prefix" /> <slot name="prefix" />
</template> </template>
<template v-slot:suffix> <template #suffix>
<slot name="suffix" /> <slot name="suffix" />
</template> </template>
<template v-slot:default> <template #default>
<slot></slot> <slot></slot>
</template> </template>
</component> </el-select>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import ElSelect from 'element-ui/lib/select'; import ElSelect from 'element-ui/lib/select';
import Vue from 'vue';
interface IProps { interface IProps {
size?: string; size?: string;
@ -35,7 +35,7 @@ interface IProps {
popperClass?: string; popperClass?: string;
} }
export default { export default Vue.extend({
name: 'n8n-select', name: 'n8n-select',
components: { components: {
ElSelect, ElSelect,
@ -86,31 +86,54 @@ export default {
type: String, type: String,
}, },
}, },
methods: { computed: {
getSize(size: string): string | undefined { computedSize(): string | undefined {
if (size === 'xlarge') { if (this.size === 'xlarge') {
return undefined; return undefined;
} }
return size; return this.size;
}, },
getClass(props: IProps): string { classes(): string {
if (props.size === 'xlarge') { if (this.size === 'xlarge') {
return 'xlarge'; return 'xlarge';
} }
return ''; return '';
}, },
getPopperClass(props: IProps, $style: any): string { popperClasses(): string {
let classes = props.popperClass || ''; let classes = this.popperClass || '';
if (props.limitPopperWidth) { if (this.limitPopperWidth) {
classes = `${classes} ${$style.limitPopperWidth}`; classes = `${classes} ${this.$style.limitPopperWidth}`;
} }
return classes; return classes;
}, },
}, },
}; methods: {
focus() {
const input = this.$refs.innerSelect;
if (input) {
input.focus();
}
},
blur() {
const input = this.$refs.innerSelect;
if (input) {
input.blur();
}
},
focusOnInput() {
const select = (this.$refs.innerSelect) as (Vue | undefined);
if (select) {
const input = select.$refs.input;
if (input) {
input.focus();
}
}
},
},
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>

17
packages/design-system/src/components/N8nSpinner/Spinner.vue
View file

@ -1,11 +1,10 @@
<template functional> <template>
<span> <span class="n8n-spinner">
<div v-if="props.type === 'ring'" class="lds-ring"><div></div><div></div><div></div><div></div></div> <div v-if="type === 'ring'" class="lds-ring"><div></div><div></div><div></div><div></div></div>
<component <n8n-icon
v-else v-else
:is="$options.components.N8nIcon"
icon="spinner" icon="spinner"
:size="props.size" :size="size"
spin spin
/> />
</span> </span>
@ -14,7 +13,9 @@
<script lang="ts"> <script lang="ts">
import N8nIcon from '../N8nIcon'; import N8nIcon from '../N8nIcon';
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-spinner', name: 'n8n-spinner',
components: { components: {
N8nIcon, N8nIcon,
@ -34,7 +35,7 @@ export default {
default: 'dots', default: 'dots',
}, },
}, },
}; });
</script> </script>
<style lang="scss"> <style lang="scss">

7
packages/design-system/src/components/N8nSquareButton/SquareButton.vue
View file

@ -1,11 +1,12 @@
<template functional> <template>
<button :class="$style.button" @click="(e) => listeners.click && listeners.click(e)"> <button :class="['n8n-square-button', $style.button]" v-on="$listeners">
<span :class="$style.text" v-text="props.label" /> <span :class="$style.text">{{label}}</span>
</button> </button>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
name: 'n8n-square-button', name: 'n8n-square-button',
props: { props: {

6
packages/design-system/src/components/N8nSticky/Resize.vue
View file

@ -46,7 +46,9 @@ function getSize(delta, min, virtual, gridSize): number {
return min; return min;
}; };
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-resize', name: 'n8n-resize',
props: { props: {
isResizingEnabled: { isResizingEnabled: {
@ -152,7 +154,7 @@ export default {
this.dir = ''; this.dir = '';
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

9
packages/design-system/src/components/N8nSticky/Sticky.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
:class="{[$style.sticky]: true, [$style.clickable]: !isResizing}" :class="{'n8n-sticky': true, [$style.sticky]: true, [$style.clickable]: !isResizing}"
:style="styles" :style="styles"
@keydown.prevent @keydown.prevent
> >
@ -183,8 +183,11 @@ export default mixins(Locale).extend({
watch: { watch: {
editMode(newMode, prevMode) { editMode(newMode, prevMode) {
setTimeout(() => { setTimeout(() => {
if (newMode && !prevMode && this.$refs.input && this.$refs.input.$refs && this.$refs.input.$refs.textarea) { if (newMode &&
const textarea = this.$refs.input.$refs.textarea; !prevMode &&
this.$refs.input
) {
const textarea = this.$refs.input;
if (this.defaultText === this.content) { if (this.defaultText === this.content) {
textarea.select(); textarea.select();
} }

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="$style.container"> <div :class="['n8n-tabs', $style.container]">
<div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft"> <div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft">
<n8n-icon icon="chevron-left" size="small" /> <n8n-icon icon="chevron-left" size="small" />
</div> </div>

12
packages/design-system/src/components/N8nTag/Tag.vue
View file

@ -1,16 +1,20 @@
<template functional> <template>
<span :class="$style.tag" v-text="props.text" @click="(e) => listeners.click && listeners.click(e)" /> <span :class="['n8n-tag', $style.tag]" v-on="$listeners">
{{ text }}
</span>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { import Vue from 'vue';
export default Vue.extend({
name: 'n8n-tag', name: 'n8n-tag',
props: { props: {
text: { text: {
type: String, type: String,
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

11
packages/design-system/src/components/N8nTags/Tags.vue
View file

@ -1,13 +1,14 @@
<template functional> <template>
<div :class="$style.tags"> <div :class="['n8n-tags', $style.tags]">
<component :is="$options.components.N8nTag" v-for="tag in props.tags" :key="tag.id" :text="tag.name" @click="(e) => listeners.click && listeners.click(tag.id, e)"/> <n8n-tag v-for="tag in tags" :key="tag.id" :text="tag.name" @click="$emit('click', tag.id, $event)"/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import N8nTag from '../N8nTag'; import N8nTag from '../N8nTag';
import Vue from 'vue';
export default { export default Vue.extend({
name: 'n8n-tags', name: 'n8n-tags',
components: { components: {
N8nTag, N8nTag,
@ -17,7 +18,7 @@ export default {
type: Array, type: Array,
}, },
}, },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>

83
packages/design-system/src/components/N8nText/Text.vue
View file

@ -1,11 +1,12 @@
<template functional> <template>
<component :is="props.tag" :class="$options.methods.getClasses(props, $style, data)" :style="$options.methods.getStyles(props)" v-on="listeners"> <component :is="tag" :class="['n8n-text', ...classes]" v-on="$listeners">
<slot></slot> <slot></slot>
</component> </component>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
name: 'n8n-text', name: 'n8n-text',
props: { props: {
@ -20,7 +21,7 @@ export default Vue.extend({
}, },
color: { color: {
type: String, type: String,
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'].includes(value), validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger'].includes(value),
}, },
align: { align: {
type: String, type: String,
@ -35,28 +36,26 @@ export default Vue.extend({
default: 'span', default: 'span',
}, },
}, },
methods: { computed: {
getClasses(props: {size: string, bold: boolean}, $style: any, data: any) { classes() {
const classes = {[$style[`size-${props.size}`]]: true, [$style.bold]: props.bold, [$style.regular]: !props.bold}; const applied = [];
if (data.staticClass) { if (this.align) {
classes[data.staticClass] = true; applied.push(`align-${this.align}`);
}
if (this.color) {
applied.push(this.color);
} }
return classes; if (this.compact) {
}, applied.push('compact');
getStyles(props: {color: string, align: string, compact: false}) {
const styles = {} as any;
if (props.color) {
styles.color = `var(--color-${props.color})`;
} }
if (props.compact) {
styles['line-height'] = 1; applied.push(`size-${this.size}`);
}
if (props.align) { applied.push(this.bold? 'bold': 'regular');
styles['text-align'] = props.align;
} return applied.map((c) => this.$style[c]);
return styles; }
},
}, },
}); });
</script> </script>
@ -95,4 +94,44 @@ export default Vue.extend({
line-height: var(--font-line-height-compact); line-height: var(--font-line-height-compact);
} }
.compact {
line-height: 1;
}
.primary {
color: var(--color-primary);
}
.text-dark {
color: var(--color-text-dark);
}
.text-base {
color: var(--color-text-base);
}
.text-light {
color: var(--color-text-light);
}
.text-xlight {
color: var(--color-text-xlight);
}
.danger {
color: var(--color-danger);
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
</style> </style>

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

@ -1,19 +1,19 @@
<template functional> <template>
<fragment> <fragment>
<el-tag <el-tag
v-if="props.type === 'danger'" v-if="type === 'danger'"
type="danger" type="danger"
size="small" size="small"
:class="$style['danger']" :class="$style['danger']"
> >
{{ props.text }} {{ text }}
</el-tag> </el-tag>
<el-tag <el-tag
v-else-if="props.type === 'warning'" v-else-if="type === 'warning'"
size="small" size="small"
:class="$style['warning']" :class="$style['warning']"
> >
{{ props.text }} {{ text }}
</el-tag> </el-tag>
</fragment> </fragment>
</template> </template>
@ -48,4 +48,4 @@ export default {
color: $--badge-warning-color; color: $--badge-warning-color;
border: none; border: none;
} }
</style> </style>

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

@ -1,28 +1,28 @@
<template functional> <template>
<div <div
:class="{ :class="{
container: true, container: true,
clickable: props.clickable, clickable: clickable,
active: props.active, active: active,
}" }"
@click="listeners.click" v-on="$listeners"
> >
<CategoryItem <CategoryItem
v-if="props.item.type === 'category'" v-if="item.type === 'category'"
:item="props.item" :item="item"
/> />
<SubcategoryItem <SubcategoryItem
v-else-if="props.item.type === 'subcategory'" v-else-if="item.type === 'subcategory'"
:item="props.item" :item="item"
/> />
<NodeItem <NodeItem
v-else-if="props.item.type === 'node'" v-else-if="item.type === 'node'"
:nodeType="props.item.properties.nodeType" :nodeType="item.properties.nodeType"
:bordered="!props.lastNode" :bordered="!lastNode"
@dragstart="listeners.dragstart" @dragstart="$listeners.dragstart"
@dragend="listeners.dragend" @dragend="$listeners.dragend"
/> />
</div> </div>
</template> </template>
@ -33,13 +33,15 @@ import NodeItem from './NodeItem.vue';
import CategoryItem from './CategoryItem.vue'; import CategoryItem from './CategoryItem.vue';
import SubcategoryItem from './SubcategoryItem.vue'; import SubcategoryItem from './SubcategoryItem.vue';
Vue.component('CategoryItem', CategoryItem); export default Vue.extend({
Vue.component('SubcategoryItem', SubcategoryItem); name: 'CreatorItem',
Vue.component('NodeItem', NodeItem); components: {
CategoryItem,
export default { SubcategoryItem,
NodeItem,
},
props: ['item', 'active', 'clickable', 'lastNode'], props: ['item', 'active', 'clickable', 'lastNode'],
}; });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -8,7 +8,7 @@
@keydown.stop @keydown.stop
@keydown.esc="editName = false" @keydown.esc="editName = false"
> >
<n8n-text :class="$style.renameText" :bold="true" color="text-base" tag="div" <n8n-text :bold="true" color="text-base" tag="div"
>{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text> >{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text>
<n8n-input ref="input" size="small" v-model="newName" /> <n8n-input ref="input" size="small" v-model="newName" />
<div :class="$style.editButtons"> <div :class="$style.editButtons">

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

@ -845,9 +845,9 @@ export default mixins(
// Set focus on field // Set focus on field
setTimeout(() => { setTimeout(() => {
// @ts-ignore // @ts-ignore
if (this.$refs.inputField.$el) { if (this.$refs.inputField) {
// @ts-ignore // @ts-ignore
(this.$refs.inputField.$el.querySelector(this.getStringInputType === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus(); this.$refs.inputField.focus();
} }
}); });

11
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -77,7 +77,8 @@ export default mixins(showMessage).extend({
}; };
}, },
mounted() { mounted() {
const select = this.$refs.select as (Vue | undefined); // @ts-ignore
const select = (this.$refs.select && this.$refs.select.$refs && this.$refs.select.$refs.innerSelect) as (Vue | undefined);
if (select) { if (select) {
const input = select.$refs.input as (Element | undefined); const input = select.$refs.input as (Element | undefined);
if (input) { if (input) {
@ -200,10 +201,10 @@ export default mixins(showMessage).extend({
} }
}, },
focusOnInput() { focusOnInput() {
const select = this.$refs.select as Vue; const select = (this.$refs.select) as (Vue | undefined);
const input = select && select.$refs.input as HTMLElement; if (select) {
if (input && input.focus) { // @ts-ignore
input.focus(); select.focusOnInput();
this.focused = true; this.focused = true;
} }
}, },

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

@ -1,4 +1,4 @@
<template functional> <template>
<span :class="$style.trigger"> <span :class="$style.trigger">
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Trigger node</title> <title>Trigger node</title>

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

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

42
packages/editor-ui/src/plugins/components.ts
View file

@ -86,10 +86,10 @@ import { ElMessageBoxOptions } from "element-ui/types/message-box";
Vue.use(Fragment.Plugin); Vue.use(Fragment.Plugin);
// n8n design system // n8n design system
Vue.use(N8nInfoAccordion); Vue.component('n8n-info-accordion', N8nInfoAccordion);
Vue.use(N8nActionBox); Vue.component('n8n-action-box', N8nActionBox);
Vue.use(N8nActionToggle); Vue.component('n8n-action-toggle', N8nActionToggle);
Vue.use(N8nAvatar); Vue.component('n8n-avatar', N8nAvatar);
Vue.component('n8n-button', N8nButton); Vue.component('n8n-button', N8nButton);
Vue.component('el-button', N8nElButton); Vue.component('el-button', N8nElButton);
Vue.component('n8n-callout', N8nCallout); Vue.component('n8n-callout', N8nCallout);
@ -97,31 +97,31 @@ Vue.component('n8n-card', N8nCard);
Vue.component('n8n-form-box', N8nFormBox); Vue.component('n8n-form-box', N8nFormBox);
Vue.component('n8n-form-inputs', N8nFormInputs); Vue.component('n8n-form-inputs', N8nFormInputs);
Vue.component('n8n-icon', N8nIcon); Vue.component('n8n-icon', N8nIcon);
Vue.use(N8nIconButton); Vue.component('n8n-icon-button', N8nIconButton);
Vue.use(N8nInfoTip); Vue.component('n8n-info-tip', N8nInfoTip);
Vue.use(N8nInput); Vue.component('n8n-input', N8nInput);
Vue.use(N8nInputLabel); Vue.component('n8n-input-label', N8nInputLabel);
Vue.use(N8nInputNumber); Vue.component('n8n-input-number', N8nInputNumber);
Vue.component('n8n-loading', N8nLoading); Vue.component('n8n-loading', N8nLoading);
Vue.use(N8nHeading); Vue.component('n8n-heading', N8nHeading);
Vue.use(N8nLink); Vue.component('n8n-link', N8nLink);
Vue.component('n8n-markdown', N8nMarkdown); Vue.component('n8n-markdown', N8nMarkdown);
Vue.use(N8nMenu); Vue.component('n8n-menu', N8nMenu);
Vue.use(N8nMenuItem); Vue.component('n8n-menu-item', N8nMenuItem);
Vue.component('n8n-node-icon', N8nNodeIcon); Vue.component('n8n-node-icon', N8nNodeIcon);
Vue.component('n8n-notice', N8nNotice); Vue.component('n8n-notice', N8nNotice);
Vue.use(N8nOption); Vue.component('n8n-option', N8nOption);
Vue.use(N8nPulse); Vue.component('n8n-pulse', N8nPulse);
Vue.use(N8nSelect); Vue.component('n8n-select', N8nSelect);
Vue.use(N8nSpinner); Vue.component('n8n-spinner', N8nSpinner);
Vue.component('n8n-sticky', N8nSticky); Vue.component('n8n-sticky', N8nSticky);
Vue.use(N8nRadioButtons); Vue.component('n8n-radio-buttons', N8nRadioButtons);
Vue.component('n8n-square-button', N8nSquareButton); Vue.component('n8n-square-button', N8nSquareButton);
Vue.use(N8nTags); Vue.component('n8n-tags', N8nTags);
Vue.component('n8n-tabs', N8nTabs); Vue.component('n8n-tabs', N8nTabs);
Vue.use(N8nTag); Vue.component('n8n-tag', N8nTag);
Vue.component('n8n-text', N8nText); Vue.component('n8n-text', N8nText);
Vue.use(N8nTooltip); Vue.component('n8n-tooltip', N8nTooltip);
// element io // element io
Vue.use(Dialog); Vue.use(Dialog);