admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Replace Vue.extend with defineComponent in design system (no-changelog) (#5918)

Browse Source 
* refactor: replace new Vue() with custom event bus (no-changelog)

* fix: export types from design system main

* fix: update component types

* fix: update form inputs event bus

* refactor: replace global Vue references in design-system

* refactor: update prop types

* feat: improve types

* fix: further type improvements

* fix: further types improvements

* fix: further type improvements

* test: fix test snapshots

* test: fix snapshot

* chore: fix linting issues

* test: fix personalization modal snapshot
This commit is contained in:
Alex Grozav
2023-04-12 17:39:45 +03:00
committed by GitHub
parent 0a53c957c4
commit 430a8781e8
67 changed files with 447 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/design-system/src/components/N8nFormInputs/FormInputs.vue
View File

@@ -5,7 +5,7 @@
<div
v-for="(input, index) in filteredInputs"
:key="input.name"
:class="{ [`mt-${verticalSpacing}`]: index > 0 }"
:class="{ [`mt-${verticalSpacing}`]: verticalSpacing && index > 0 }"
>
<n8n-text
color="text-base"
@@ -37,13 +37,13 @@
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import N8nFormInput from '../N8nFormInput';
import type { IFormInput } from '../../types';
import ResizeObserver from '../ResizeObserver';
import { EventBus } from '@/utils';
import { createEventBus, EventBus } from '../../utils';
export default Vue.extend({
export default defineComponent({
name: 'n8n-form-inputs',
components: {
N8nFormInput,
@@ -51,13 +51,12 @@ export default Vue.extend({
},
props: {
inputs: {
type: Array,
default() {
return [[]];
},
type: Array as PropType<IFormInput[]>,
default: (): IFormInput[] => [],
},
eventBus: {
type: Object as PropType<EventBus>,
default: (): EventBus => createEventBus(),
},
columnView: {
type: Boolean,
@@ -65,8 +64,8 @@ export default Vue.extend({
},
verticalSpacing: {
type: String,
required: false,
validator: (value: string): boolean => ['xs', 's', 'm', 'm', 'l', 'xl'].includes(value),
default: '',
validator: (value: string): boolean => ['', 'xs', 's', 'm', 'm', 'l', 'xl'].includes(value),
},
},
data() {
@@ -77,19 +76,19 @@ export default Vue.extend({
};
},
mounted() {
(this.inputs as IFormInput[]).forEach((input) => {
this.inputs.forEach((input) => {
if (input.hasOwnProperty('initialValue')) {
Vue.set(this.values, input.name, input.initialValue);
this.$set(this.values, input.name, input.initialValue);
}
});
if (this.eventBus) {
this.eventBus.on('submit', this.onSubmit); // eslint-disable-line @typescript-eslint/unbound-method
this.eventBus.on('submit', () => this.onSubmit());
}
},
computed: {
filteredInputs(): IFormInput[] {
return (this.inputs as IFormInput[]).filter((input) =>
return this.inputs.filter((input) =>
typeof input.shouldDisplay === 'function' ? input.shouldDisplay(this.values) : true,
);
},
@@ -107,15 +106,16 @@ export default Vue.extend({
onInput(name: string, value: unknown) {
this.values = {
...this.values,
[name]: value, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
[name]: value,
};
this.$emit('input', { name, value }); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
this.$emit('input', { name, value });
},
onValidate(name: string, valid: boolean) {
Vue.set(this.validity, name, valid);
this.$set(this.validity, name, valid);
},
onSubmit() {
this.showValidationWarnings = true;
if (this.isReadyToSubmit) {
const toSubmit = this.filteredInputs.reduce<{ [key: string]: unknown }>((accu, input) => {
if (this.values[input.name]) {