refactor(editor): migrate FormInput to Composition API (#4406)

♻️ Refactor N8nFormInput to use composition API and make labels accesible

packages/design-system/src/components/N8nFormInput/FormInput.stories.js

@@ -19,7 +19,9 @@ const Template = (args, { argTypes }) => ({
 	components: {
 		N8nFormInput,
 	},
-	template: '<n8n-form-input v-bind="$props" v-model="val" @input="onInput" @change="onChange" @focus="onFocus" />',
+	template: `
+		<n8n-form-input v-bind="$props" v-model="val" @input="onInput" @change="onChange" @focus="onFocus" />
+	`,
 	methods,
 	data() {
 		return {

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -4,11 +4,11 @@
 		v-bind="$props"
 		@input="onInput"
 		@focus="onFocus"
-		ref="input"
-	></n8n-checkbox>
-	<n8n-input-label v-else :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
+		ref="inputRef"
+	/>
+	<n8n-input-label v-else :inputName="name" :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
-			<slot v-if="hasDefaultSlot"></slot>
+			<slot v-if="hasDefaultSlot" />
 			<n8n-select
 				v-else-if="type === 'select' || type === 'multi-select'"
 				:value="value"
@@ -17,7 +17,8 @@
 				@change="onInput"
 				@focus="onFocus"
 				@blur="onBlur"
-				ref="input"
+				:name="name"
+				ref="inputRef"
 			>
 				<n8n-option
 					v-for="option in (options || [])"
@@ -28,6 +29,7 @@
 			</n8n-select>
 			<n8n-input
 				v-else
+				:name="name"
 				:type="type"
 				:placeholder="placeholder"
 				:value="value"
@@ -36,11 +38,11 @@
 				@input="onInput"
 				@blur="onBlur"
 				@focus="onFocus"
-				ref="input"
+				ref="inputRef"
 			/>
 		</div>
 		<div :class="$style.errors" v-if="showErrors">
-			<span>{{ validationError }}</span>
+			<span v-text="validationError" />
 			<n8n-link
 				v-if="documentationUrl && documentationText"
 				:to="documentationUrl"
@@ -52,13 +54,14 @@
 			</n8n-link>
 		</div>
 		<div :class="$style.infoText" v-else-if="infoText">
-			<span size="small">{{ infoText }}</span>
+			<span size="small" v-text="infoText" />
 		</div>
 	</n8n-input-label>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
+<script lang="ts" setup>
+import { computed, reactive, onMounted, ref, watch, useSlots } from 'vue';
+
 import N8nInput from '../N8nInput';
 import N8nSelect from '../N8nSelect';
 import N8nOption from '../N8nOption';
@@ -68,185 +71,137 @@ import N8nCheckbox from '../N8nCheckbox';
 import { getValidationError, VALIDATORS } from './validators';
 import { Rule, RuleGroup, IValidator } from "../../types";
 
-import Locale from '../../mixins/locale';
-import mixins from 'vue-typed-mixins';
+import { t } from '../../locale';
 
-export default mixins(Locale).extend({
-	name: 'n8n-form-input',
-	components: {
-		N8nInput,
-		N8nInputLabel,
-		N8nOption,
-		N8nSelect,
-		N8nCheckbox,
-	},
-	data() {
-		return {
-			hasBlurred: false,
-			isTyping: false,
-		};
-	},
-	props: {
-		value: {
-		},
-		label: {
-			type: String,
-		},
-		infoText: {
-			type: String,
-		},
-		required: {
-			type: Boolean,
-		},
-		showRequiredAsterisk: {
-			type: Boolean,
-			default: true,
-		},
-		type: {
-			type: String,
-			default: 'text',
-		},
-		placeholder: {
-			type: String,
-		},
-		tooltipText: {
-			type: String,
-		},
-		showValidationWarnings: {
-			type: Boolean,
-		},
-		validateOnBlur: {
-			type: Boolean,
-			default: true,
-		},
-		documentationUrl: {
-			type: String,
-		},
-		documentationText: {
-			type: String,
-			default: 'Open docs',
-		},
-		validationRules: {
-			type: Array,
-		},
-		validators: {
-			type: Object,
-		},
-		maxlength: {
-			type: Number,
-		},
-		options: {
-			type: Array,
-		},
-		autocomplete: {
-			type: String,
-		},
-		focusInitially: {
-			type: Boolean,
-		},
-		labelSize: {
-			type: String,
-			default: 'medium',
-			validator: (value: string): boolean =>
-				['small', 'medium'].includes(value),
-		},
-	},
-	mounted() {
-		this.$emit('validate', !this.validationError);
+export interface Props {
+  value: any;
+	label: string;
+	infoText?: string;
+	required?: boolean;
+	showRequiredAsterisk?: boolean;
+	type?: string;
+	placeholder?: string;
+	tooltipText?: string;
+	showValidationWarnings?: boolean;
+	validateOnBlur?: boolean;
+	documentationUrl?: string;
+	documentationText?: string;
+	validationRules?: Array<Rule | RuleGroup>;
+	validators?: {[key: string]: IValidator | RuleGroup};
+	maxlength?: number;
+	options?: Array<{value: string | number, label: string}>;
+	autocomplete?: string;
+	name?: string;
+	focusInitially?: boolean;
+	labelSize?: 'small' | 'medium';
+}
 
-		if (this.focusInitially && this.$refs.input) {
-			(this.$refs.input as HTMLTextAreaElement).focus();
-		}
-	},
-	computed: {
-		validationError(): string | null {
-			const error = this.getValidationError();
-			if (error) {
-				return this.t(error.messageKey, error.options);
-			}
-
-			return null;
-		},
-		hasDefaultSlot(): boolean {
-			return !!this.$slots.default;
-		},
-		showErrors(): boolean {
-			return (
-				!!this.validationError &&
-				((this.validateOnBlur && this.hasBlurred && !this.isTyping) || this.showValidationWarnings)
-			);
-		},
-	},
-	methods: {
-		getValidationError(): ReturnType<IValidator['validate']>  {
-			const rules = (this.validationRules || []) as Array<Rule | RuleGroup>;
-			const validators = {
-				...VALIDATORS,
-				...(this.validators || {}),
-			} as { [key: string]: IValidator | RuleGroup };
-
-			if (this.required) {
-				const error = getValidationError(this.value, validators, validators.REQUIRED as IValidator);
-				if (error) {
-					return error;
-				}
-			}
-
-			for (let i = 0; i < rules.length; i++) {
-				if (rules[i].hasOwnProperty('name')) {
-					const rule = rules[i] as Rule;
-					if (validators[rule.name]) {
-						const error = getValidationError(
-							this.value,
-							validators,
-							validators[rule.name] as IValidator,
-							rule.config,
-						);
-						if (error) {
-							return error;
-						}
-					}
-				}
-
-				if (rules[i].hasOwnProperty('rules')) {
-					const rule = rules[i] as RuleGroup;
-					const error = getValidationError(
-						this.value,
-						validators,
-						rule,
-					);
-					if (error) {
-						return error;
-					}
-				}
-			}
-
-			return null;
-		},
-		onBlur() {
-			this.hasBlurred = true;
-			this.isTyping = false;
-			this.$emit('blur');
-		},
-		onInput(value: any) {
-			this.isTyping = true;
-			this.$emit('input', value);
-		},
-		onFocus() {
-			this.$emit('focus');
-		},
-		onEnter(event: Event) {
-			event.stopPropagation();
-			event.preventDefault();
-			this.$emit('enter');
-		},
-	},
-	watch: {
-		validationError(newValue: string | null, oldValue: string | null) {
-			this.$emit('validate', !newValue);
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	documentationText: 'Open docs',
+	labelSize: 'medium',
+	type: 'text',
+	showRequiredAsterisk: true,
+	validateOnBlur: true,
 });
+
+const emit = defineEmits<{
+	(event: 'validate', shouldValidate: boolean): void,
+	(event: 'input', value: any): void,
+	(event: 'focus'): void,
+	(event: 'blur'): void,
+	(event: 'enter'): void,
+}>();
+
+const state = reactive({
+	hasBlurred: false,
+	isTyping: false,
+});
+
+const slots = useSlots();
+
+const inputRef = ref<HTMLTextAreaElement | null>(null);
+
+function getInputValidationError(): ReturnType<IValidator['validate']>  {
+	const rules = props.validationRules || [];
+	const validators = {
+		...VALIDATORS,
+		...(props.validators || {}),
+	} as { [key: string]: IValidator | RuleGroup };
+
+	if (props.required) {
+		const error = getValidationError(props.value, validators, validators.REQUIRED as IValidator);
+		if (error) return error;
+	}
+
+	for (let i = 0; i < rules.length; i++) {
+		if (rules[i].hasOwnProperty('name')) {
+			const rule = rules[i] as Rule;
+			if (validators[rule.name]) {
+				const error = getValidationError(
+					props.value,
+					validators,
+					validators[rule.name] as IValidator,
+					rule.config,
+				);
+				if (error) return error;
+			}
+		}
+
+		if (rules[i].hasOwnProperty('rules')) {
+			const rule = rules[i] as RuleGroup;
+			const error = getValidationError(
+				props.value,
+				validators,
+				rule,
+			);
+			if (error) return error;
+		}
+	}
+
+	return null;
+}
+
+function onBlur() {
+	state.hasBlurred = true;
+	state.isTyping = false;
+	emit('blur');
+}
+
+function onInput(value: any) {
+	state.isTyping = true;
+	emit('input', value);
+}
+
+function onFocus() {
+	emit('focus');
+}
+
+function onEnter(event: Event) {
+	event.stopPropagation();
+	event.preventDefault();
+	emit('enter');
+}
+
+const validationError = computed<string | null>(() => {
+	const error = getInputValidationError();
+
+	return error ? t(error.messageKey, error.options) : null;
+});
+
+const hasDefaultSlot = computed(() => !!slots.default);
+
+const showErrors = computed(() => (
+	!!validationError.value &&
+		((props.validateOnBlur && state.hasBlurred && !state.isTyping) || props.showValidationWarnings)
+));
+
+onMounted(() => {
+	if (props.focusInitially && inputRef.value) inputRef.value.focus();
+});
+
+watch(() => validationError.value, (error) => emit('validate', !error));
+
+defineExpose({ inputRef });
 </script>
 
 <style lang="scss" module>

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

@@ -14,6 +14,7 @@
 					<n8n-form-input
 						v-else
 						v-bind="input.properties"
+						:name="input.name"
 						:value="values[input.name]"
 						:showValidationWarnings="showValidationWarnings"
 						@input="(value) => onInput(input.name, value)"

packages/design-system/src/components/N8nInput/Input.vue

@@ -6,6 +6,7 @@
 		:autoComplete="autocomplete"
 		ref="innerInput"
 		v-on="$listeners"
+		:name="name"
 	>
 		<template #prepend>
 			<slot name="prepend" />
@@ -66,6 +67,9 @@ export default Vue.extend({
 		title: {
 			type: String,
 		},
+		name: {
+			type: String,
+		},
 		autocomplete: {
 			type: String,
 			default: 'off',

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -1,12 +1,16 @@
 <template>
 	<div :class="$style.container">
-		<div v-if="label || $slots.options" :class="{
-				'n8n-input-label': true,
-				[this.$style.heading]: !!label,
-				[this.$style.underline]: underline,
-				[this.$style[this.size]]: true,
+		<label
+			v-if="label || $slots.options"
+			:for="inputName"
+			:class="{
+				[$style.inputLabel]: true,
+				[$style.heading]: !!label,
+				[$style.underline]: underline,
+				[$style[size]]: true,
 				[$style.overflow]: !!$slots.options,
-			}">
+			}"
+		>
 			<div :class="$style.title" v-if="label">
 				<n8n-text :bold="bold" :size="size" :compact="!underline && !$slots.options" :color="color">
 					{{ label }}
@@ -16,15 +20,15 @@
 			<span :class="[$style.infoIcon, showTooltip ? $style.visible: $style.hidden]" v-if="tooltipText && label">
 				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
 					<n8n-icon icon="question-circle" size="small" />
-					<div slot="content" v-html="addTargetBlank(tooltipText)"></div>
+					<div slot="content" v-html="addTargetBlank(tooltipText)" />
 				</n8n-tooltip>
 			</span>
-			<div v-if="$slots.options && label" :class="{[$style.overlay]: true, [$style.visible]: showOptions}"><div></div></div>
+			<div v-if="$slots.options && label" :class="{[$style.overlay]: true, [$style.visible]: showOptions}" />
 			<div v-if="$slots.options" :class="{[$style.options]: true, [$style.visible]: showOptions}">
-				<slot name="options"></slot>
+				<slot name="options"/>
 			</div>
-		</div>
-		<slot></slot>
+		</label>
+		<slot />
 	</div>
 </template>
 
@@ -54,6 +58,9 @@ export default Vue.extend({
 		tooltipText: {
 			type: String,
 		},
+		inputName: {
+			type: String,
+		},
 		required: {
 			type: Boolean,
 		},
@@ -88,7 +95,9 @@ export default Vue.extend({
 	display: flex;
 	flex-direction: column;
 }
-
+.inputLabel {
+	display: block;
+}
 .container:hover,.inputLabel:hover {
 	.infoIcon {
 		opacity: 1;