mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests 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
40 changed files with 486 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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