mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
refactor: Migrate FormInputs to composition API (no-changelog) (#9756)
This commit is contained in:
Tomi Turtiainen
GitHub
parent
ed2ad6c7ba
commit
f49e79cc0b
|
|
@ -56,6 +56,8 @@ interface FormBoxProps {
|
|||
redirectLink?: string;
|
||||
}
|
||||
|
||||
type Value = string | number | boolean | null | undefined;
|
||||
|
||||
defineOptions({ name: 'N8nFormBox' });
|
||||
withDefaults(defineProps<FormBoxProps>(), {
|
||||
title: '',
|
||||
|
|
@ -68,8 +70,8 @@ withDefaults(defineProps<FormBoxProps>(), {
|
|||
const formBus = createEventBus();
|
||||
const $emit = defineEmits(['submit', 'update', 'secondaryClick']);
|
||||
|
||||
const onUpdateModelValue = (e: { name: string; value: string }) => $emit('update', e);
|
||||
const onSubmit = (e: { [key: string]: string }) => $emit('submit', e);
|
||||
const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e);
|
||||
const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e);
|
||||
const onButtonClick = () => formBus.emit('submit');
|
||||
const onSecondaryButtonClick = (event: Event) => $emit('secondaryClick', event);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,99 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import N8nFormInput from '../N8nFormInput';
|
||||
import type { IFormInput } from '../../types';
|
||||
import ResizeObserver from '../ResizeObserver';
|
||||
import type { EventBus } from '../../utils';
|
||||
import { createEventBus } from '../../utils';
|
||||
|
||||
export type FormInputsProps = {
|
||||
inputs?: IFormInput[];
|
||||
eventBus?: EventBus;
|
||||
columnView?: boolean;
|
||||
verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
||||
teleported?: boolean;
|
||||
tagSize?: 'small' | 'medium';
|
||||
};
|
||||
|
||||
type Value = string | number | boolean | null | undefined;
|
||||
|
||||
const props = withDefaults(defineProps<FormInputsProps>(), {
|
||||
inputs: () => [],
|
||||
eventBus: createEventBus,
|
||||
columnView: false,
|
||||
verticalSpacing: '',
|
||||
teleported: true,
|
||||
tagSize: 'small',
|
||||
});
|
||||
|
||||
const emit = defineEmits({
|
||||
update: (_: { name: string; value: Value }) => true,
|
||||
'update:modelValue': (_: Record<string, Value>) => true,
|
||||
submit: (_: Record<string, Value>) => true,
|
||||
ready: (_: boolean) => true,
|
||||
});
|
||||
|
||||
const showValidationWarnings = ref(false);
|
||||
const values = reactive<Record<string, Value>>({});
|
||||
const validity = ref<Record<string, boolean>>({});
|
||||
|
||||
const filteredInputs = computed(() => {
|
||||
return props.inputs.filter((input) =>
|
||||
typeof input.shouldDisplay === 'function' ? input.shouldDisplay(values) : true,
|
||||
);
|
||||
});
|
||||
|
||||
const isReadyToSubmit = computed(() => {
|
||||
return Object.values(validity.value).every((valid) => !!valid);
|
||||
});
|
||||
|
||||
watch(isReadyToSubmit, (ready) => {
|
||||
emit('ready', ready);
|
||||
});
|
||||
|
||||
function onUpdateModelValue(name: string, value: Value) {
|
||||
values[name] = value;
|
||||
emit('update', { name, value });
|
||||
emit('update:modelValue', values);
|
||||
}
|
||||
|
||||
function onValidate(name: string, isValid: boolean) {
|
||||
validity.value = {
|
||||
...validity.value,
|
||||
[name]: isValid,
|
||||
};
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
showValidationWarnings.value = true;
|
||||
|
||||
if (!isReadyToSubmit.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toSubmit = filteredInputs.value.reduce<Record<string, Value>>((valuesToSubmit, input) => {
|
||||
if (values[input.name]) {
|
||||
valuesToSubmit[input.name] = values[input.name];
|
||||
}
|
||||
return valuesToSubmit;
|
||||
}, {});
|
||||
|
||||
emit('submit', toSubmit);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
for (const input of props.inputs) {
|
||||
if ('initialValue' in input) {
|
||||
values[input.name] = input.initialValue;
|
||||
}
|
||||
}
|
||||
|
||||
if (props.eventBus) {
|
||||
props.eventBus.on('submit', onSubmit);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]">
|
||||
<template #default="{ bp }">
|
||||
|
|
@ -27,7 +123,7 @@
|
|||
:show-validation-warnings="showValidationWarnings"
|
||||
:teleported="teleported"
|
||||
:tag-size="tagSize"
|
||||
@update:model-value="(value) => onUpdateModelValue(input.name, value)"
|
||||
@update:model-value="(value) => onUpdateModelValue(input.name, value as Value)"
|
||||
@validate="(value) => onValidate(input.name, value)"
|
||||
@enter="onSubmit"
|
||||
/>
|
||||
|
|
@ -37,126 +133,6 @@
|
|||
</ResizeObserver>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import N8nFormInput from '../N8nFormInput';
|
||||
import type { IFormInput, Validatable } from '../../types';
|
||||
import ResizeObserver from '../ResizeObserver';
|
||||
import type { EventBus } from '../../utils';
|
||||
import { createEventBus } from '../../utils';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'N8nFormInputs',
|
||||
components: {
|
||||
N8nFormInput,
|
||||
ResizeObserver,
|
||||
},
|
||||
props: {
|
||||
inputs: {
|
||||
type: Array as PropType<IFormInput[]>,
|
||||
default: (): IFormInput[] => [],
|
||||
},
|
||||
eventBus: {
|
||||
type: Object as PropType<EventBus>,
|
||||
default: (): EventBus => createEventBus(),
|
||||
},
|
||||
columnView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
verticalSpacing: {
|
||||
type: String,
|
||||
default: '',
|
||||
validator: (value: string): boolean => ['', 'xs', 's', 'm', 'm', 'l', 'xl'].includes(value),
|
||||
},
|
||||
teleported: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
tagSize: {
|
||||
type: String as PropType<'small' | 'medium'>,
|
||||
default: 'small',
|
||||
validator: (value: string): boolean => ['small', 'medium'].includes(value),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showValidationWarnings: false,
|
||||
values: {} as { [key: string]: Validatable },
|
||||
validity: {} as { [key: string]: boolean },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredInputs(): IFormInput[] {
|
||||
return this.inputs.filter((input) =>
|
||||
typeof input.shouldDisplay === 'function' ? input.shouldDisplay(this.values) : true,
|
||||
);
|
||||
},
|
||||
isReadyToSubmit(): boolean {
|
||||
for (const key in this.validity) {
|
||||
if (!this.validity[key]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isReadyToSubmit(ready: boolean) {
|
||||
this.$emit('ready', ready);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.inputs.forEach((input) => {
|
||||
if (input.hasOwnProperty('initialValue')) {
|
||||
this.values = {
|
||||
...this.values,
|
||||
[input.name]: input.initialValue,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
if (this.eventBus) {
|
||||
this.eventBus.on('submit', () => this.onSubmit());
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdateModelValue(name: string, value: unknown) {
|
||||
this.values = {
|
||||
...this.values,
|
||||
[name]: value as Validatable,
|
||||
};
|
||||
this.$emit('update', { name, value });
|
||||
this.$emit('update:modelValue', this.values);
|
||||
},
|
||||
onValidate(name: string, valid: boolean) {
|
||||
this.validity = {
|
||||
...this.validity,
|
||||
[name]: valid,
|
||||
};
|
||||
},
|
||||
onSubmit() {
|
||||
this.showValidationWarnings = true;
|
||||
|
||||
if (this.isReadyToSubmit) {
|
||||
const toSubmit = this.filteredInputs.reduce(
|
||||
(accu, input) => {
|
||||
if (this.values[input.name]) {
|
||||
accu[input.name] = this.values[input.name];
|
||||
}
|
||||
return accu;
|
||||
},
|
||||
{} as { [key: string]: Validatable },
|
||||
);
|
||||
this.$emit('submit', toSubmit);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.grid {
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Reference in a new issue