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

refactor(editor): Replace this.$props (no-changelog) (#5928)

Browse source 
* refactor(editor): Replace this. (no-changelog)

* Lintfix
This commit is contained in:
OlegIvaniv 2023-04-07 12:21:17 +02:00 committed by GitHub
parent 5651a52364
commit 07c360c30d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 60 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
View file

@ -34,7 +34,7 @@ export default Vue.extend({
};
},
mounted() {
if (!this.$props.enabled) {
if (!this.enabled) {
return;
}
@ -69,7 +69,7 @@ export default Vue.extend({
}
},
beforeDestroy() {
if (this.$props.enabled) {
if (this.enabled) {
this.$data.observer.disconnect(); // eslint-disable-line
}
},

22
packages/editor-ui/src/components/BreakpointsObserver.vue
View file

@ -64,27 +64,27 @@ export default mixins(genericHelpers, debounceHelper).extend({
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
value(): any | undefined {
if (this.$props.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
return this.$props.valueXS;
if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
return this.valueXS;
}
if (this.$props.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
return this.$props.valueXL;
if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
return this.valueXL;
}
if (this.$props.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
return this.$props.valueLG;
if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
return this.valueLG;
}
if (this.$props.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
return this.$props.valueMD;
if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
return this.valueMD;
}
if (this.$props.valueSM !== undefined) {
return this.$props.valueSM;
if (this.valueSM !== undefined) {
return this.valueSM;
}
return this.$props.valueDefault;
return this.valueDefault;
},
},
});

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

@ -16,7 +16,7 @@ export default Vue.extend({
let value = (this.value as string).replace(/\s/g, '.'); // force input to expand on space chars
if (!value) {
// @ts-ignore
value = this.$props.placeholder;
value = this.placeholder;
}
return `${value}`; // adjust for padding

6
packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
View file

@ -34,12 +34,12 @@ export default Vue.extend({
},
mounted() {
// autofocus on input element is not reliable
if (this.$props.autofocus && this.$refs.input) {
if (this.autofocus && this.$refs.input) {
this.focus();
}
if (this.$props.eventBus) {
this.$props.eventBus.on('focus', () => {
if (this.eventBus) {
this.eventBus.on('focus', () => {
this.focus();
});
}

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

@ -51,7 +51,7 @@ export default Vue.extend({
return;
}
this.$data.newValue = this.$props.value;
this.$data.newValue = this.value;
this.$emit('toggle');
},
onBlur() {

4
packages/editor-ui/src/components/IntersectionObserved.vue
View file

@ -12,7 +12,7 @@ export default mixins(emitter).extend({
name: 'IntersectionObserved',
props: ['enabled'],
mounted() {
if (!this.$props.enabled) {
if (!this.enabled) {
return;
}
@ -21,7 +21,7 @@ export default mixins(emitter).extend({
});
},
beforeDestroy() {
if (this.$props.enabled) {
if (this.enabled) {
this.$dispatch('IntersectionObserver', 'unobserve', this.$refs.observed);
}
},

6
packages/editor-ui/src/components/IntersectionObserver.vue
View file

@ -16,14 +16,14 @@ export default Vue.extend({
};
},
mounted() {
if (!this.$props.enabled) {
if (!this.enabled) {
return;
}
const options = {
root: this.$refs.root as Element,
rootMargin: '0px',
threshold: this.$props.threshold,
threshold: this.threshold,
};
const observer = new IntersectionObserver((entries) => {
@ -46,7 +46,7 @@ export default Vue.extend({
});
},
beforeDestroy() {
if (this.$props.enabled) {
if (this.enabled) {
this.$data.observer.disconnect();
}
},

20
packages/editor-ui/src/components/Modal.vue
View file

@ -1,6 +1,6 @@
<template>
<el-dialog
:visible="uiStore.isModalOpen(this.$props.name)"
:visible="uiStore.isModalOpen(this.name)"
:before-close="closeDialog"
:class="{ 'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable }"
:width="width"
@ -10,7 +10,7 @@
:close-on-press-escape="closeOnPressEscape"
:style="styles"
append-to-body
:data-test-id="`${this.$props.name}-modal`"
:data-test-id="`${this.name}-modal`"
>
<template #title v-if="$scopedSlots.header">
<slot name="header" v-if="!loading" />
@ -121,12 +121,12 @@ export default Vue.extend({
mounted() {
window.addEventListener('keydown', this.onWindowKeydown);
if (this.$props.eventBus) {
this.$props.eventBus.on('close', () => {
if (this.eventBus) {
this.eventBus.on('close', () => {
this.closeDialog();
});
this.$props.eventBus.on('closeAll', () => {
this.eventBus.on('closeAll', () => {
this.uiStore.closeAllModals();
});
}
@ -163,7 +163,7 @@ export default Vue.extend({
},
methods: {
onWindowKeydown(event: KeyboardEvent) {
if (!this.uiStore.isModalActive(this.$props.name)) {
if (!this.uiStore.isModalActive(this.name)) {
return;
}
@ -172,7 +172,7 @@ export default Vue.extend({
}
},
handleEnter() {
if (this.uiStore.isModalActive(this.$props.name)) {
if (this.uiStore.isModalActive(this.name)) {
this.$emit('enter');
}
},
@ -184,12 +184,12 @@ export default Vue.extend({
return;
}
}
this.uiStore.closeModal(this.$props.name);
this.uiStore.closeModal(this.name);
},
getCustomClass() {
let classes = this.$props.customClass || '';
let classes = this.customClass || '';
if (this.$props.classic) {
if (this.classic) {
classes = `${classes} classic`;
}

12
packages/editor-ui/src/components/ModalDrawer.vue
View file

@ -1,7 +1,7 @@
<template>
<el-drawer
:direction="direction"
:visible="uiStore.isModalOpen(this.$props.name)"
:visible="uiStore.isModalOpen(this.name)"
:size="width"
:before-close="close"
:modal="modal"
@ -54,8 +54,8 @@ export default Vue.extend({
mounted() {
window.addEventListener('keydown', this.onWindowKeydown);
if (this.$props.eventBus) {
this.$props.eventBus.on('close', () => {
if (this.eventBus) {
this.eventBus.on('close', () => {
this.close();
});
}
@ -73,7 +73,7 @@ export default Vue.extend({
},
methods: {
onWindowKeydown(event: KeyboardEvent) {
if (!this.uiStore.isModalActive(this.$props.name)) {
if (!this.uiStore.isModalActive(this.name)) {
return;
}
@ -82,7 +82,7 @@ export default Vue.extend({
}
},
handleEnter() {
if (this.uiStore.isModalActive(this.$props.name)) {
if (this.uiStore.isModalActive(this.name)) {
this.$emit('enter');
}
},
@ -94,7 +94,7 @@ export default Vue.extend({
return;
}
}
this.uiStore.closeModal(this.$props.name);
this.uiStore.closeModal(this.name);
},
},
});

6
packages/editor-ui/src/components/ParameterInputExpanded.vue
View file

@ -102,16 +102,16 @@ export default Vue.extend({
computed: {
...mapStores(useWorkflowsStore),
showRequiredErrors(): boolean {
if (!this.$props.parameter.required) {
if (!this.parameter.required) {
return false;
}
if (this.blurredEver || this.showValidationWarnings) {
if (this.$props.parameter.type === 'string') {
if (this.parameter.type === 'string') {
return !this.value;
}
if (this.$props.parameter.type === 'number') {
if (this.parameter.type === 'number') {
return typeof this.value !== 'number';
}
}

12
packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
View file

@ -236,9 +236,9 @@ export default mixins(showMessage).extend({
},
data() {
return {
unchanged: !this.$props.isNew,
unchanged: !this.isNew,
activeTab: 'settings',
hasOnceBeenSaved: !this.$props.isNew,
hasOnceBeenSaved: !this.isNew,
isSaving: false,
isDeleting: false,
loading: false,
@ -250,7 +250,7 @@ export default mixins(showMessage).extend({
sentryDescription: sentryModalDescription,
syslogDescription: syslogModalDescription,
modalBus: createEventBus(),
headerLabel: this.$props.destination.label,
headerLabel: this.destination.label,
testMessageSent: false,
testMessageResult: false,
isInstanceOwner: false,
@ -451,7 +451,7 @@ export default mixins(showMessage).extend({
if (deleteConfirmed === false) {
return;
} else {
this.$props.eventBus.emit('remove', this.destination.id);
this.eventBus.emit('remove', this.destination.id);
this.uiStore.closeModal(LOG_STREAM_MODAL_KEY);
this.uiStore.stateIsDirty = false;
}
@ -462,7 +462,7 @@ export default mixins(showMessage).extend({
this.logStreamingStore.removeDestination(this.nodeParameters.id!);
}
this.ndvStore.activeNodeName = null;
this.$props.eventBus.emit('closing', this.destination.id);
this.eventBus.emit('closing', this.destination.id);
this.uiStore.stateIsDirty = false;
},
async saveDestination() {
@ -474,7 +474,7 @@ export default mixins(showMessage).extend({
this.hasOnceBeenSaved = true;
this.testMessageSent = false;
this.unchanged = true;
this.$props.eventBus.emit('destinationWasSaved', this.destination.id);
this.eventBus.emit('destinationWasSaved', this.destination.id);
this.uiStore.stateIsDirty = false;
}
},

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

@ -68,20 +68,20 @@ export default Vue.extend({
computed: {
...mapStores(useTagsStore),
tags() {
const tags = this.$props.tagIds
const tags = this.tagIds
.map((tagId: string) => this.tagsStore.getTagById(tagId))
.filter(Boolean); // if tag has been deleted from store
const limit = this.$props.limit || DEFAULT_MAX_TAGS_LIMIT;
const limit = this.limit || DEFAULT_MAX_TAGS_LIMIT;
let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
toDisplay = toDisplay.map((tag: ITag) => ({
...tag,
hidden: this.$props.responsive && !this.$data.visibility[tag.id],
hidden: this.responsive && !this.$data.visibility[tag.id],
}));
let visibleCount = toDisplay.length;
if (this.$props.responsive) {
if (this.responsive) {
visibleCount = Object.values(this.visibility).reduce(
(accu, val) => (val ? accu + 1 : accu),
0,

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

@ -117,8 +117,8 @@ export default mixins(showMessage).extend({
}
}
if (this.$props.eventBus) {
this.$props.eventBus.on('focus', () => {
if (this.eventBus) {
this.eventBus.on('focus', () => {
this.focusOnInput();
this.focusOnTopOption();
});
@ -140,7 +140,7 @@ export default mixins(showMessage).extend({
);
},
appliedTags(): string[] {
return this.$props.currentTagIds.filter((id: string) => this.tagsStore.getTagById(id));
return this.currentTagIds.filter((id: string) => this.tagsStore.getTagById(id));
},
},
methods: {
@ -152,7 +152,7 @@ export default mixins(showMessage).extend({
const name = this.$data.filter;
try {
const newTag = await this.tagsStore.create(name);
this.$emit('update', [...this.$props.currentTagIds, newTag.id]);
this.$emit('update', [...this.currentTagIds, newTag.id]);
this.$nextTick(() => this.focusOnTag(newTag.id));
this.$data.filter = '';

2
packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
View file

@ -123,7 +123,7 @@ export default Vue.extend({
};
},
mounted() {
if (this.$props.rows.length === 1 && this.$props.rows[0].create) {
if (this.rows.length === 1 && this.rows[0].create) {
this.focusOnInput();
}
},

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

@ -52,7 +52,7 @@ export default Vue.extend({
computed: {
...mapStores(useUsersStore),
isCreateEnabled(): boolean {
return (this.$props.tags || []).length === 0 || this.$data.createEnabled;
return (this.tags || []).length === 0 || this.$data.createEnabled;
},
rows(): ITagRow[] {
const getUsage = (count: number | undefined) =>
@ -61,7 +61,7 @@ export default Vue.extend({
: this.$locale.baseText('tagsView.notBeingUsed');
const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
const tagRows = (this.$props.tags || [])
const tagRows = (this.tags || [])
.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
.map(
(tag: ITag): ITagRow => ({
@ -87,8 +87,7 @@ export default Vue.extend({
},
isHeaderDisabled(): boolean {
return (
this.$props.isLoading ||
!!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
);
},