refactor: Migrate FormInputs to composition API (no-changelog) (#9756)

packages/design-system/src/components/N8nFormBox/FormBox.vue

@@ -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 onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e);
-const onSubmit = (e: { [key: string]: string }) => $emit('submit', e);
+const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e);
 const onButtonClick = () => formBus.emit('submit');
 const onSecondaryButtonClick = (event: Event) => $emit('secondaryClick', event);
 </script>

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -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;