mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
feat(editor): Refactor several smaller components to composition API (no-changelog) (#10038)
This commit is contained in:
oleg
GitHub
parent
2e9ab66602
commit
c4c25eadfd
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
<TextEdit
|
||||
:dialog-visible="textEditDialogVisible"
|
||||
:model-value="modelValue"
|
||||
:model-value="`${modelValue}`"
|
||||
:parameter="parameter"
|
||||
:path="path"
|
||||
:is-read-only="isReadOnly"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue