Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Replace Vue.extend with defineComponent in design system (no-changelog) #5918

Merged
merged 17 commits into from
Apr 12, 2023
Merged

feat: Replace Vue.extend with defineComponent in design system (no-changelog) #5918

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e816419
refactor: replace new Vue() with custom event bus (no-changelog)
alexgrozav Mar 24, 2023
d8c0976
fix: export types from design system main
alexgrozav Mar 24, 2023
c2bb7a0
Merge branch 'master' into n8n-6269-replace-vue-event-buses-with-custom
alexgrozav Apr 4, 2023
f6a9071
fix: update component types
alexgrozav Apr 4, 2023
39f285d
fix: update form inputs event bus
alexgrozav Apr 4, 2023
022424b
Merge branch 'master' into n8n-6269-replace-vue-event-buses-with-custom
alexgrozav Apr 6, 2023
b17c3aa
refactor: replace global Vue references in design-system
alexgrozav Apr 6, 2023
5555367
refactor: update prop types
alexgrozav Apr 6, 2023
1e8bf8c
chore: merge master
alexgrozav Apr 10, 2023
9e58066
feat: improve types
alexgrozav Apr 11, 2023
08a5c81
fix: further type improvements
alexgrozav Apr 11, 2023
d8f4faf
fix: further types improvements
alexgrozav Apr 11, 2023
3bf5b25
fix: further type improvements
alexgrozav Apr 11, 2023
dbddd98
test: fix test snapshots
alexgrozav Apr 11, 2023
b81b599
test: fix snapshot
alexgrozav Apr 11, 2023
181b4c8
chore: fix linting issues
alexgrozav Apr 11, 2023
9431c63
test: fix personalization modal snapshot
alexgrozav Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/design-system/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"name": "Mutasem Aldmour",
"email": "[email protected]"
},
"main": "src/main.js",
"main": "src/main.ts",
"import": "src/main.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/n8n-io/n8n.git"
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nActionBox/ActionBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ import N8nButton from '../N8nButton';
import N8nHeading from '../N8nHeading';
import N8nText from '../N8nText';
import N8nCallout from '../N8nCallout';
import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-action-box',
components: {
N8nButton,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import {
Dropdown as ElDropdown,
DropdownMenu as ElDropdownMenu,
Expand All @@ -64,7 +64,7 @@ interface IActionDropdownItem {
// by Element UI dropdown component).
// It can be used in different parts of editor UI while ActionToggle
// is designed to be used in card components.
export default Vue.extend({
export default defineComponent({
name: 'n8n-action-dropdown',
components: {
ElDropdown,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import {
Dropdown as ElDropdown,
DropdownMenu as ElDropdownMenu,
Expand All @@ -53,7 +53,7 @@ interface Action {
type?: 'external-link';
}

export default Vue.extend({
export default defineComponent({
name: 'n8n-action-toggle',
components: {
ElDropdown,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nAvatar/Avatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ const sizes: { [size: string]: number } = {
medium: 40,
};

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-avatar',
props: {
firstName: {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nBadge/Badge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<script lang="ts">
import N8nText from '../N8nText';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
props: {
theme: {
type: String,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nButton/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import N8nIcon from '../N8nIcon';
import N8nSpinner from '../N8nSpinner';

export default Vue.extend({
export default defineComponent({
name: 'n8n-button',
props: {
label: {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nButton/overrides/ElButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import N8nButton from '../Button.vue';

const classToTypeMap = {
'btn--cancel': 'secondary',
'el-picker-panel__link-btn': 'secondary',
};

export default Vue.extend({
export default defineComponent({
components: {
N8nButton,
},
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nCallout/Callout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon';

Expand All @@ -27,7 +27,7 @@ const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
danger: 'times-circle',
};

export default Vue.extend({
export default defineComponent({
name: 'n8n-callout',
components: {
N8nText,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nCard/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-card',
inheritAttrs: true,
props: {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nCheckbox/Checkbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { Checkbox as ElCheckbox } from 'element-ui';
import N8nInputLabel from '../N8nInputLabel';

export default Vue.extend({
export default defineComponent({
name: 'n8n-checkbox',
components: {
ElCheckbox,
Expand Down
9 changes: 5 additions & 4 deletions packages/design-system/src/components/N8nFormBox/FormBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,14 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import N8nFormInputs from '../N8nFormInputs';
import N8nHeading from '../N8nHeading';
import N8nLink from '../N8nLink';
import N8nButton from '../N8nButton';
import { createEventBus } from '../../utils';

export default Vue.extend({
export default defineComponent({
name: 'n8n-form-box',
components: {
N8nHeading,
Expand Down Expand Up @@ -81,7 +82,7 @@ export default Vue.extend({
},
data() {
return {
formBus: new Vue(),
formBus: createEventBus(),
};
},
methods: {
Expand All @@ -92,7 +93,7 @@ export default Vue.extend({
this.$emit('submit', e);
},
onButtonClick() {
this.formBus.$emit('submit');
this.formBus.emit('submit');
},
onSecondaryButtonClick(event: Event) {
this.$emit('secondaryClick', event);
Expand Down
17 changes: 8 additions & 9 deletions packages/design-system/src/components/N8nFormInputs/FormInputs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,13 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent, PropType } from 'vue';
import N8nFormInput from '../N8nFormInput';
import type { IFormInput } from '../../types';
import ResizeObserver from '../ResizeObserver';
import { EventBus } from '@/utils';

export default Vue.extend({
export default defineComponent({
name: 'n8n-form-inputs',
components: {
N8nFormInput,
Expand All @@ -51,12 +52,10 @@ export default Vue.extend({
props: {
inputs: {
type: Array,
default() {
return [[]];
},
default: () => [[]],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Re: this comment, FormBox, UserSelect, DraggableTarget, ResourceLocator still use method syntax for array default.
  2. Maybe we should update all the type: Array with a prop type assertion. Or later if too many.

},
eventBus: {
type: Vue,
type: Object as PropType<EventBus>,
},
columnView: {
type: Boolean,
Expand All @@ -78,12 +77,12 @@ export default Vue.extend({
mounted() {
(this.inputs as IFormInput[]).forEach((input) => {
if (input.hasOwnProperty('initialValue')) {
Vue.set(this.values, input.name, input.initialValue);
this.$set(this.values, input.name, input.initialValue);
}
});

if (this.eventBus) {
this.eventBus.$on('submit', this.onSubmit); // eslint-disable-line @typescript-eslint/unbound-method
this.eventBus.on('submit', this.onSubmit); // eslint-disable-line @typescript-eslint/unbound-method
}
},
computed: {
Expand Down Expand Up @@ -111,7 +110,7 @@ export default Vue.extend({
this.$emit('input', { name, value }); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
},
onValidate(name: string, valid: boolean) {
Vue.set(this.validity, name, valid);
this.$set(this.validity, name, valid);
},
onSubmit() {
this.showValidationWarnings = true;
Expand Down
6 changes: 3 additions & 3 deletions packages/design-system/src/components/N8nHeading/Heading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-heading',
props: {
tag: {
Expand Down Expand Up @@ -52,7 +52,7 @@ export default Vue.extend({

applied.push(this.bold ? 'bold' : 'regular');

return applied.map((c) => (this.$style as { [key: string]: string })[c]);
return applied.map((c) => this.$style[c]);
},
},
});
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nIcon/Icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import N8nText from '../N8nText';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-icon',
components: {
FontAwesomeIcon,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nIconButton/IconButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<script lang="ts">
import N8nButton from '../N8nButton';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-icon-button',
components: {
N8nButton,
Expand Down
10 changes: 4 additions & 6 deletions packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@
<script lang="ts">
import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon';
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';

interface IAccordionItem {
id: string;
label: string;
icon: string;
}

export default Vue.extend({
export default defineComponent({
name: 'n8n-info-accordion',
components: {
N8nText,
Expand All @@ -64,9 +64,7 @@ export default Vue.extend({
},
items: {
type: Array as PropType<IAccordionItem[]>,
default() {
return [];
},
default: () => [],
},
initiallyExpanded: {
type: Boolean,
Expand All @@ -92,7 +90,7 @@ export default Vue.extend({
toggle() {
this.expanded = !this.expanded;
},
onClick(e) {
onClick(e: MouseEvent) {
this.$emit('click', e);
},
onTooltipClick(item: string, event: MouseEvent) {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nInfoTip/InfoTip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@
import N8nIcon from '../N8nIcon';
import N8nTooltip from '../N8nTooltip';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-info-tip',
components: {
N8nIcon,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nInput/Input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@

<script lang="ts">
import { Input as ElInput } from 'element-ui';
import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-input',
components: {
ElInput,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nInputLabel/InputLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ import N8nIcon from '../N8nIcon';

import { addTargetBlank } from '../utils/helpers';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-input-label',
components: {
N8nText,
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nLink/Link.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import N8nText from '../N8nText';
import N8nRoute from '../N8nRoute';

export default Vue.extend({
export default defineComponent({
name: 'n8n-link',
props: {
size: {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/N8nLoading/Loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
<script lang="ts">
import { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from 'element-ui';

import Vue from 'vue';
import { defineComponent } from 'vue';

export default Vue.extend({
export default defineComponent({
name: 'n8n-loading',
components: {
ElSkeleton,
Expand Down
Loading