mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Refactor several smaller components to composition API (no-changelog) (#10038)

Browse source
This commit is contained in:
oleg 2024-07-12 15:43:07 +02:00 committed by GitHub
parent 2e9ab66602
commit c4c25eadfd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 147 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
packages/editor-ui/src/components/Banner.vue
View file

@ -35,51 +35,41 @@
</el-tag>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script setup lang="ts">
import { ref } from 'vue';
export default defineComponent({
name: 'Banner',
props: {
theme: {
type: String,
validator: (value: string): boolean => ['success', 'danger'].indexOf(value) !== -1,
},
message: {
type: String,
},
buttonLabel: {
type: String,
},
buttonLoadingLabel: {
type: String,
},
buttonTitle: {
type: String,
},
details: {
type: String,
},
buttonLoading: {
type: Boolean,
default: false,
},
},
data() {
return {
expanded: false,
};
},
methods: {
expand() {
this.expanded = true;
},
onClick() {
this.expanded = false;
this.$emit('click');
},
},
interface Props {
theme: 'success' | 'danger';
message: string;
buttonLabel?: string;
buttonLoadingLabel?: string;
buttonTitle?: string;
details?: string;
buttonLoading?: boolean;
}
withDefaults(defineProps<Props>(), {
buttonLoading: false,
buttonLabel: '',
buttonLoadingLabel: '',
buttonTitle: '',
details: '',
});
const emit = defineEmits<{
click: [];
}>();
const expanded = ref(false);
const expand = () => {
expanded.value = true;
};
const onClick = () => {
expanded.value = false;
emit('click');
};
</script>
<style module lang="scss">

21
packages/editor-ui/src/components/CollectionWorkflowCard.vue
View file

@ -1,6 +1,6 @@
<template>
<n8n-card :class="$style.card" v-bind="$attrs">
<template v-if="!loading" #header>
<template v-if="!loading && title" #header>
<span :class="$style.title" v-text="title" />
</template>
<n8n-loading :loading="loading" :rows="3" variant="p" />
@ -10,20 +10,11 @@
</n8n-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Card',
props: {
loading: {
type: Boolean,
},
title: {
type: String,
},
},
});
<script lang="ts" setup>
defineProps<{
loading: boolean;
title?: string;
}>();
</script>
<style lang="scss" module>

26
packages/editor-ui/src/components/GoBackButton.vue
View file

@ -5,27 +5,15 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { VIEWS } from '@/constants';
export default defineComponent({
name: 'GoBackButton',
data() {
return {
routeHasHistory: false,
};
},
mounted() {
window.history.state ? (this.routeHasHistory = true) : (this.routeHasHistory = false);
},
methods: {
navigateTo() {
if (this.routeHasHistory) this.$router.go(-1);
else void this.$router.push({ name: VIEWS.TEMPLATES });
},
},
});
const router = useRouter();
const navigateTo = () => {
void router.push({ name: VIEWS.TEMPLATES });
};
</script>
<style lang="scss" module>

35
packages/editor-ui/src/components/PageContentWrapper.vue
View file

@ -1,35 +0,0 @@
<template>
<div class="wrapper">
<div class="scroll">
<div class="content">
<slot></slot>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageContentWrapper',
});
</script>
<style scoped>
.wrapper {
padding-top: 40px;
position: absolute;
width: 100%;
height: calc(100% - 40px);
}
.scroll {
overflow-y: auto;
width: 100%;
height: 100%;
}
.content {
padding: 1em;
height: 100%;
}
</style>

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

@ -119,7 +119,7 @@
<TextEdit
:dialog-visible="textEditDialogVisible"
:model-value="modelValue"
:model-value="`${modelValue}`"
:parameter="parameter"
:path="path"
:is-read-only="isReadOnly"

28
packages/editor-ui/src/components/ShortenName.vue
View file

@ -4,24 +4,24 @@
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script setup lang="ts">
import { computed } from 'vue';
import { shorten } from '@/utils/typesUtils';
const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
export default defineComponent({
name: 'ShortenName',
props: ['name', 'limit', 'testId'],
computed: {
shortenedName(): string {
return shorten(
this.name,
this.limit || DEFAULT_WORKFLOW_NAME_LIMIT,
WORKFLOW_NAME_END_COUNT_TO_KEEP,
);
},
},
interface Props {
name: string;
testId: string;
limit?: number;
}
const props = withDefaults(defineProps<Props>(), {
limit: DEFAULT_WORKFLOW_NAME_LIMIT,
});
const shortenedName = computed(() =>
shorten(props.name, props.limit, WORKFLOW_NAME_END_COUNT_TO_KEEP),
);
</script>

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

@ -17,14 +17,6 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'NoTagsView',
});
</script>
<style lang="scss" module>
$--footer-spacing: 45px;

50
packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
View file

@ -27,33 +27,35 @@
</el-row>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script setup lang="ts">
import { ref } from 'vue';
import { MAX_TAG_NAME_LENGTH } from '@/constants';
export default defineComponent({
props: {
disabled: {
default: false,
},
search: {
default: '',
},
withDefaults(
defineProps<{
disabled: boolean;
search: string;
}>(),
{
disabled: false,
search: '',
},
data() {
return {
maxLength: MAX_TAG_NAME_LENGTH,
};
},
methods: {
onAddNew() {
this.$emit('createEnable');
},
onSearchChange(search: string) {
this.$emit('searchChange', search);
},
},
});
);
const emit = defineEmits<{
searchChange: [value: string];
createEnable: [];
}>();
const maxLength = ref(MAX_TAG_NAME_LENGTH);
const onAddNew = () => {
emit('createEnable');
};
const onSearchChange = (search: string) => {
emit('searchChange', search);
};
</script>
<style lang="scss" scoped>

15
packages/editor-ui/src/components/TemplateDetailsBlock.vue
View file

@ -9,17 +9,10 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'TemplateDetailsBlock',
props: {
title: {
type: String,
},
},
});
<script lang="ts" setup>
defineProps<{
title: string;
}>();
</script>
<style lang="scss" module>

91
packages/editor-ui/src/components/TextEdit.vue
View file

@ -11,7 +11,7 @@
>
<div class="ignore-key-press">
<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
<div @keydown.stop @keydown.esc="onKeyDownEsc()">
<div @keydown.stop @keydown.esc="onKeyDownEsc">
<n8n-input
ref="inputField"
v-model="tempValue"
@ -28,49 +28,60 @@
</div>
</template>
<script lang="ts">
import { nextTick, defineComponent } from 'vue';
<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from 'vue';
import type { INodeProperties } from 'n8n-workflow';
export default defineComponent({
name: 'TextEdit',
props: ['dialogVisible', 'parameter', 'path', 'modelValue', 'isReadOnly'],
data() {
return {
tempValue: '', // el-input does not seem to work without v-model so add one
};
},
watch: {
async dialogVisible() {
if (this.dialogVisible === true) {
await nextTick();
(this.$refs.inputField as HTMLInputElement).focus();
}
},
modelValue(value: string) {
this.tempValue = value;
},
},
mounted() {
this.tempValue = this.modelValue as string;
},
methods: {
valueChanged(value: string) {
this.$emit('update:modelValue', value);
},
const props = defineProps<{
dialogVisible: boolean;
parameter: INodeProperties;
path: string;
modelValue: string;
isReadOnly: boolean;
}>();
onKeyDownEsc() {
// Resetting input value when closing the dialog, required when closing it using the `Esc` key
this.tempValue = this.modelValue;
const emit = defineEmits<{
'update:modelValue': [value: string];
closeDialog: [];
}>();
this.closeDialog();
},
const inputField = ref<HTMLInputElement | null>(null);
const tempValue = ref('');
closeDialog() {
// Handle the close externally as the visible parameter is an external prop
// and is so not allowed to be changed here.
this.$emit('closeDialog');
return false;
},
watch(
() => props.dialogVisible,
async (newValue) => {
if (newValue) {
await nextTick();
inputField.value?.focus();
}
},
);
watch(
() => props.modelValue,
(value: string) => {
tempValue.value = value;
},
);
onMounted(() => {
tempValue.value = props.modelValue;
});
const valueChanged = (value: string) => {
emit('update:modelValue', value);
};
const onKeyDownEsc = () => {
// Resetting input value when closing the dialog, required when closing it using the `Esc` key
tempValue.value = props.modelValue;
closeDialog();
};
const closeDialog = () => {
// Handle the close externally as the visible parameter is an external prop
// and is so not allowed to be changed here.
emit('closeDialog');
};
</script>

21
packages/editor-ui/src/components/TitledList.vue
View file

@ -7,22 +7,11 @@
</div>
</template>
<script lang="ts">
import { type PropType, defineComponent } from 'vue';
export default defineComponent({
name: 'TitledList',
props: {
title: {
type: String,
required: true,
},
items: {
type: Array as PropType<string[]>,
default: () => [],
},
},
});
<script lang="ts" setup>
defineProps<{
title: string;
items: string[];
}>();
</script>
<style lang="scss" scoped>
.titled-list {

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

@ -4,14 +4,6 @@
</transition>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'SlideTransition',
});
</script>
<style lang="scss" scoped>
.slide-leave-active,
.slide-enter-active {