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

* refactor: replace new Vue() with custom event bus (no-changelog)

* fix: export types from design system main

* fix: update component types

* fix: update form inputs event bus

* refactor: replace global Vue references in design-system

* refactor: update prop types

* feat: improve types

* fix: further type improvements

* fix: further types improvements

* fix: further type improvements

* test: fix test snapshots

* test: fix snapshot

* chore: fix linting issues

* test: fix personalization modal snapshot
This commit is contained in:
Alex Grozav
2023-04-12 17:39:45 +03:00
committed by GitHub
parent 0a53c957c4
commit 430a8781e8
67 changed files with 447 additions and 375 deletions

View File

@@ -32,7 +32,7 @@
}"
data-test-id="menu-item"
:index="child.id"
@click="onItemClick(child)"
@click="onItemClick(child, $event)"
>
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
<span :class="$style.label">{{ child.label }}</span>
@@ -56,7 +56,7 @@
}"
data-test-id="menu-item"
:index="item.id"
@click="onItemClick(item)"
@click="onItemClick(item, $event)"
>
<n8n-icon
v-if="item.icon"
@@ -74,10 +74,10 @@
import { Submenu as ElSubmenu, MenuItem as ElMenuItem } from 'element-ui';
import N8nTooltip from '../N8nTooltip';
import N8nIcon from '../N8nIcon';
import { IMenuItem } from '../../types';
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import type { IMenuItem, RouteObject } from '../../types';
export default Vue.extend({
export default defineComponent({
name: 'n8n-menu-item',
components: {
ElSubmenu,
@@ -117,6 +117,14 @@ export default Vue.extend({
? this.item.children.filter((child) => child.available !== false)
: [];
},
currentRoute(): RouteObject {
return (
(this as typeof this & { $route: RouteObject }).$route || {
name: '',
path: '',
}
);
},
},
methods: {
isItemActive(item: IMenuItem): boolean {
@@ -130,12 +138,12 @@ export default Vue.extend({
if (item.activateOnRoutePaths) {
return (
Array.isArray(item.activateOnRoutePaths) &&
item.activateOnRoutePaths.includes(this.$route.path)
item.activateOnRoutePaths.includes(this.currentRoute.path)
);
} else if (item.activateOnRouteNames) {
return (
Array.isArray(item.activateOnRouteNames) &&
item.activateOnRouteNames.includes(this.$route.name || '')
item.activateOnRouteNames.includes(this.currentRoute.name || '')
);
}
return false;