mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-12 15:44:06 -08:00
Code Issues Actions 1 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() { mounted() {
if (!this.$props.enabled) { if (!this.enabled) {
return; return;
} }
@ -69,7 +69,7 @@ export default Vue.extend({
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.$props.enabled) { if (this.enabled) {
this.$data.observer.disconnect(); // eslint-disable-line 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any
value(): any | undefined { value(): any | undefined {
if (this.$props.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) { if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
return this.$props.valueXS; return this.valueXS;
} }
if (this.$props.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) { if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
return this.$props.valueXL; return this.valueXL;
} }
if (this.$props.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) { if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
return this.$props.valueLG; return this.valueLG;
} }
if (this.$props.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) { if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
return this.$props.valueMD; return this.valueMD;
} }
if (this.$props.valueSM !== undefined) { if (this.valueSM !== undefined) {
return this.$props.valueSM; 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 let value = (this.value as string).replace(/\s/g, '.'); // force input to expand on space chars
if (!value) { if (!value) {
// @ts-ignore // @ts-ignore
value = this.$props.placeholder; value = this.placeholder;
} }
return `${value}`; // adjust for padding 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() { mounted() {
// autofocus on input element is not reliable // autofocus on input element is not reliable
if (this.$props.autofocus && this.$refs.input) { if (this.autofocus && this.$refs.input) {
this.focus(); this.focus();
} }
if (this.$props.eventBus) { if (this.eventBus) {
this.$props.eventBus.on('focus', () => { this.eventBus.on('focus', () => {
this.focus(); this.focus();
}); });
} }

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

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

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

@ -12,7 +12,7 @@ export default mixins(emitter).extend({
name: 'IntersectionObserved', name: 'IntersectionObserved',
props: ['enabled'], props: ['enabled'],
mounted() { mounted() {
if (!this.$props.enabled) { if (!this.enabled) {
return; return;
} }
@ -21,7 +21,7 @@ export default mixins(emitter).extend({
}); });
}, },
beforeDestroy() { beforeDestroy() {
if (this.$props.enabled) { if (this.enabled) {
this.$dispatch('IntersectionObserver', 'unobserve', this.$refs.observed); 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() { mounted() {
if (!this.$props.enabled) { if (!this.enabled) {
return; return;
} }
const options = { const options = {
root: this.$refs.root as Element, root: this.$refs.root as Element,
rootMargin: '0px', rootMargin: '0px',
threshold: this.$props.threshold, threshold: this.threshold,
}; };
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
@ -46,7 +46,7 @@ export default Vue.extend({
}); });
}, },
beforeDestroy() { beforeDestroy() {
if (this.$props.enabled) { if (this.enabled) {
this.$data.observer.disconnect(); this.$data.observer.disconnect();
} }
}, },

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

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

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

@ -1,7 +1,7 @@
<template> <template>
<el-drawer <el-drawer
:direction="direction" :direction="direction"
:visible="uiStore.isModalOpen(this.$props.name)" :visible="uiStore.isModalOpen(this.name)"
:size="width" :size="width"
:before-close="close" :before-close="close"
:modal="modal" :modal="modal"
@ -54,8 +54,8 @@ export default Vue.extend({
mounted() { mounted() {
window.addEventListener('keydown', this.onWindowKeydown); window.addEventListener('keydown', this.onWindowKeydown);
if (this.$props.eventBus) { if (this.eventBus) {
this.$props.eventBus.on('close', () => { this.eventBus.on('close', () => {
this.close(); this.close();
}); });
} }
@ -73,7 +73,7 @@ export default Vue.extend({
}, },
methods: { methods: {
onWindowKeydown(event: KeyboardEvent) { onWindowKeydown(event: KeyboardEvent) {
if (!this.uiStore.isModalActive(this.$props.name)) { if (!this.uiStore.isModalActive(this.name)) {
return; return;
} }
@ -82,7 +82,7 @@ export default Vue.extend({
} }
}, },
handleEnter() { handleEnter() {
if (this.uiStore.isModalActive(this.$props.name)) { if (this.uiStore.isModalActive(this.name)) {
this.$emit('enter'); this.$emit('enter');
} }
}, },
@ -94,7 +94,7 @@ export default Vue.extend({
return; 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: { computed: {
...mapStores(useWorkflowsStore), ...mapStores(useWorkflowsStore),
showRequiredErrors(): boolean { showRequiredErrors(): boolean {
if (!this.$props.parameter.required) { if (!this.parameter.required) {
return false; return false;
} }
if (this.blurredEver || this.showValidationWarnings) { if (this.blurredEver || this.showValidationWarnings) {
if (this.$props.parameter.type === 'string') { if (this.parameter.type === 'string') {
return !this.value; return !this.value;
} }
if (this.$props.parameter.type === 'number') { if (this.parameter.type === 'number') {
return typeof this.value !== '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() { data() {
return { return {
unchanged: !this.$props.isNew, unchanged: !this.isNew,
activeTab: 'settings', activeTab: 'settings',
hasOnceBeenSaved: !this.$props.isNew, hasOnceBeenSaved: !this.isNew,
isSaving: false, isSaving: false,
isDeleting: false, isDeleting: false,
loading: false, loading: false,
@ -250,7 +250,7 @@ export default mixins(showMessage).extend({
sentryDescription: sentryModalDescription, sentryDescription: sentryModalDescription,
syslogDescription: syslogModalDescription, syslogDescription: syslogModalDescription,
modalBus: createEventBus(), modalBus: createEventBus(),
headerLabel: this.$props.destination.label, headerLabel: this.destination.label,
testMessageSent: false, testMessageSent: false,
testMessageResult: false, testMessageResult: false,
isInstanceOwner: false, isInstanceOwner: false,
@ -451,7 +451,7 @@ export default mixins(showMessage).extend({
if (deleteConfirmed === false) { if (deleteConfirmed === false) {
return; return;
} else { } 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.closeModal(LOG_STREAM_MODAL_KEY);
this.uiStore.stateIsDirty = false; this.uiStore.stateIsDirty = false;
} }
@ -462,7 +462,7 @@ export default mixins(showMessage).extend({
this.logStreamingStore.removeDestination(this.nodeParameters.id!); this.logStreamingStore.removeDestination(this.nodeParameters.id!);
} }
this.ndvStore.activeNodeName = null; this.ndvStore.activeNodeName = null;
this.$props.eventBus.emit('closing', this.destination.id); this.eventBus.emit('closing', this.destination.id);
this.uiStore.stateIsDirty = false; this.uiStore.stateIsDirty = false;
}, },
async saveDestination() { async saveDestination() {
@ -474,7 +474,7 @@ export default mixins(showMessage).extend({
this.hasOnceBeenSaved = true; this.hasOnceBeenSaved = true;
this.testMessageSent = false; this.testMessageSent = false;
this.unchanged = true; this.unchanged = true;
this.$props.eventBus.emit('destinationWasSaved', this.destination.id); this.eventBus.emit('destinationWasSaved', this.destination.id);
this.uiStore.stateIsDirty = false; this.uiStore.stateIsDirty = false;
} }
}, },

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

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

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

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

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

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

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

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