From f23686240a14e82c53226a5d8fd3f876f66c7ac7 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 17 May 2024 14:35:15 +0300
Subject: [PATCH 1/7] fix: fix various design system type errors

---
 .../components/N8nColorPicker/ColorPicker.vue |  9 ++++--
 .../src/components/N8nFormInput/FormInput.vue | 17 ++++++-----
 .../src/components/N8nFormInput/validators.ts |  6 ++--
 .../components/N8nFormInputs/FormInputs.vue   |  2 +-
 .../src/components/N8nInput/Input.vue         | 22 ++++++++++++--
 .../components/N8nInputNumber/InputNumber.vue | 20 +++++++++++--
 .../src/components/N8nLink/Link.vue           |  4 ++-
 .../src/components/N8nNodeIcon/NodeIcon.vue   |  9 ++++--
 .../src/components/N8nRoute/Route.vue         |  6 ++--
 .../src/components/N8nSelect/Select.vue       | 15 ++++++----
 .../N8nUsersList/UsersList.stories.ts         |  6 ++--
 .../src/components/N8nUsersList/UsersList.vue | 11 +++++--
 packages/design-system/src/types/datatable.ts |  4 +--
 packages/design-system/src/types/form.ts      |  6 +++-
 packages/design-system/tsconfig.json          |  2 +-
 .../editor-ui/src/views/SettingsUsersView.vue | 29 +++++++++++++++----
 16 files changed, 121 insertions(+), 47 deletions(-)

diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index 0754fcc87b93a..0c97c43577daf 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -23,6 +23,8 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
 	showAlpha: false,
 	colorFormat: 'hex',
 	popperClass: '',
+	predefine: undefined,
+	modelValue: undefined,
 	showInput: true,
 	name: uid('color-picker'),
 });
@@ -30,7 +32,7 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
 const color = ref(props.modelValue);
 
 const colorPickerProps = computed(() => {
-	const { showInput, ...rest } = props;
+	const { showInput, modelValue, size, ...rest } = props;
 	return rest;
 });
 
@@ -50,6 +52,8 @@ const model = computed({
 	},
 });
 
+const resolvedSize = computed(() => props.size as '' | 'small' | 'large' | 'default' | undefined);
+
 const onChange = (value: string) => {
 	emit('change', value);
 };
@@ -68,6 +72,7 @@ const onActiveChange = (value: string) => {
 		<ElColorPicker
 			v-model="model"
 			v-bind="colorPickerProps"
+			:size="resolvedSize"
 			@change="onChange"
 			@active-change="onActiveChange"
 		/>
@@ -75,7 +80,7 @@ const onActiveChange = (value: string) => {
 			v-if="showInput"
 			:class="$style.input"
 			:disabled="props.disabled"
-			:size="props.size"
+			:size="size"
 			:model-value="color"
 			:name="name"
 			type="text"
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index 87f0732b51282..e802048a6a881 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -59,9 +59,9 @@
 				v-else
 				ref="inputRef"
 				:name="name"
-				:type="type"
+				:type="type as InputType"
 				:placeholder="placeholder"
-				:model-value="modelValue"
+				:model-value="modelValue as InputModelValue"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
 				:disabled="disabled"
@@ -103,6 +103,9 @@ import type { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../
 
 import { t } from '../../locale';
 
+type InputModelValue = string | number | undefined;
+type InputType = 'number' | 'text' | 'email' | 'password' | 'textarea' | undefined;
+
 export interface Props {
 	modelValue: Validatable;
 	label: string;
@@ -120,10 +123,10 @@ export interface Props {
 	validators?: { [key: string]: IValidator | RuleGroup };
 	maxlength?: number;
 	options?: Array<{ value: string | number; label: string; disabled?: boolean }>;
-	autocomplete?: string;
+	autocomplete?: 'off' | 'autocomplete';
 	name?: string;
 	focusInitially?: boolean;
-	labelSize?: 'small' | 'medium';
+	labelSize?: 'small' | 'medium' | 'large';
 	disabled?: boolean;
 	activeLabel?: string;
 	activeColor?: string;
@@ -225,9 +228,9 @@ const validationError = computed<string | null>(() => {
 	const error = getInputValidationError();
 
 	if (error) {
-		if (error.messageKey) {
-			return t(error.messageKey, error.options);
-		} else {
+		if ('messageKey' in error) {
+			return t(error.messageKey, error.options as object);
+		} else if ('message' in error) {
 			return error.message;
 		}
 	}
diff --git a/packages/design-system/src/components/N8nFormInput/validators.ts b/packages/design-system/src/components/N8nFormInput/validators.ts
index 855c3ba6a2050..990e6b083ba53 100644
--- a/packages/design-system/src/components/N8nFormInput/validators.ts
+++ b/packages/design-system/src/components/N8nFormInput/validators.ts
@@ -20,7 +20,7 @@ export const requiredValidator: IValidator<{}> = {
 };
 
 export const minLengthValidator: IValidator<{ minimum: number }> = {
-	validate: (value: Validatable, config: { minimum: number }) => {
+	validate: (value: Validatable, config) => {
 		if (typeof value === 'string' && value.length < config.minimum) {
 			return {
 				messageKey: 'formInput.validator.minCharactersRequired',
@@ -76,7 +76,7 @@ export const emailValidator: IValidator<{}> = {
 };
 
 export const containsUpperCaseValidator: IValidator<{ minimum: number }> = {
-	validate: (value: Validatable, config: { minimum: number }) => {
+	validate: (value: Validatable, config) => {
 		if (typeof value !== 'string') {
 			return false;
 		}
@@ -94,7 +94,7 @@ export const containsUpperCaseValidator: IValidator<{ minimum: number }> = {
 };
 
 export const matchRegex: IValidator<{ regex: RegExp; message: string }> = {
-	validate: (value: Validatable, config: { regex: RegExp; message: string }) => {
+	validate: (value: Validatable, config) => {
 		if (!config.regex.test(`${value as string}`)) {
 			return {
 				message: config.message,
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index 3060646dd56ea..293b78e854e55 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 			default: true,
 		},
 		tagSize: {
-			type: String,
+			type: String as PropType<'small' | 'medium'>,
 			default: 'small',
 			validator: (value: string): boolean => ['small', 'medium'].includes(value),
 		},
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index d5419d23178c9..3fbe7bd3553d1 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -1,11 +1,18 @@
 <template>
 	<ElInput
 		ref="innerInput"
-		:size="computedSize"
+		:model-value="modelValue"
+		:size="resolvedSize"
 		:class="['n8n-input', ...classes]"
 		:autocomplete="autocomplete"
 		:name="name"
-		v-bind="{ ...$props, ...$attrs }"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:readonly="readonly"
+		:clearable="clearable"
+		:rows="rows"
+		:title="title"
+		v-bind="$attrs"
 	>
 		<template v-if="$slots.prepend" #prepend>
 			<slot name="prepend" />
@@ -46,6 +53,7 @@ interface InputProps {
 defineOptions({ name: 'N8nInput' });
 const props = withDefaults(defineProps<InputProps>(), {
 	modelValue: '',
+	type: 'text',
 	size: 'large',
 	placeholder: '',
 	disabled: false,
@@ -58,7 +66,15 @@ const props = withDefaults(defineProps<InputProps>(), {
 	autocomplete: 'off',
 });
 
-const computedSize = computed(() => (props.size === 'xlarge' ? undefined : props.size));
+const resolvedSize = computed(
+	() =>
+		(props.size === 'xlarge' ? undefined : props.size) as
+			| ''
+			| 'small'
+			| 'large'
+			| 'default'
+			| undefined,
+);
 
 const classes = computed(() => {
 	const applied: string[] = [];
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
index 19303c40c31a1..c86474bc6a392 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { InputSize } from '@/types';
 import { ElInputNumber } from 'element-plus';
+import { computed } from 'vue';
 
 type InputNumberProps = {
 	size?: InputSize;
@@ -10,9 +11,24 @@ type InputNumberProps = {
 	precision?: number;
 };
 
-defineProps<InputNumberProps>();
+const props = withDefaults(defineProps<InputNumberProps>(), {
+	size: undefined,
+	step: 1,
+	precision: 0,
+	min: -Infinity,
+	max: Infinity,
+});
+
+const resolvedSize = computed(() => props.size as '' | 'small' | 'large' | 'default' | undefined);
 </script>
 
 <template>
-	<ElInputNumber v-bind="{ ...$props, ...$attrs }" />
+	<ElInputNumber
+		:size="resolvedSize"
+		:min="min"
+		:max="max"
+		:step="step"
+		:precision="precision"
+		v-bind="$attrs"
+	/>
 </template>
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 3c06d2cf36720..1134291e45efd 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -17,7 +17,7 @@ import type { TextSize } from '@/types/text';
 const THEME = ['primary', 'danger', 'text', 'secondary'] as const;
 
 interface LinkProps {
-	to?: RouteLocationRaw;
+	to?: RouteLocationRaw | string;
 	size?: TextSize;
 	newWindow?: boolean;
 	bold?: boolean;
@@ -27,6 +27,8 @@ interface LinkProps {
 
 defineOptions({ name: 'N8nLink' });
 withDefaults(defineProps<LinkProps>(), {
+	to: undefined,
+	size: undefined,
 	bold: false,
 	underline: false,
 	theme: 'primary',
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index 42cc805609525..b5dc993973faa 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -13,7 +13,12 @@
 				<template #content>{{ nodeTypeName }}</template>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="name" :class="$style.iconFa" :style="fontStyleData" />
+					<FontAwesomeIcon
+						v-else
+						:icon="name as string"
+						:class="$style.iconFa"
+						:style="fontStyleData"
+					/>
 				</div>
 				<div v-else :class="$style.nodeIconPlaceholder">
 					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
@@ -22,7 +27,7 @@
 			<template v-else>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="name" :style="fontStyleData" />
+					<FontAwesomeIcon :icon="name as string" :style="fontStyleData" />
 					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
 						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
 					</div>
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 397cff9940d09..756f6273132bd 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -1,8 +1,8 @@
 <template>
-	<router-link v-if="useRouterLink" :to="to" v-bind="$attrs">
+	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
 		<slot></slot>
 	</router-link>
-	<a v-else :href="to" :target="openNewWindow ? '_blank' : '_self'" v-bind="$attrs">
+	<a v-else :href="to as string" :target="openNewWindow ? '_blank' : '_self'" v-bind="$attrs">
 		<slot></slot>
 	</a>
 </template>
@@ -12,7 +12,7 @@ import { computed } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
 interface RouteProps {
-	to?: RouteLocationRaw;
+	to?: RouteLocationRaw | string;
 	newWindow?: boolean;
 }
 
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index adf37aee22826..84f2c52cf27bb 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -86,13 +86,16 @@ export default defineComponent({
 	},
 	computed: {
 		listeners() {
-			return Object.entries(this.$attrs).reduce<Record<string, () => {}>>((acc, [key, value]) => {
-				if (/^on[A-Z]/.test(key)) {
-					acc[key] = value;
-				}
+			return Object.entries(this.$attrs).reduce<Record<string, (...args: unknown[]) => {}>>(
+				(acc, [key, value]) => {
+					if (/^on[A-Z]/.test(key)) {
+						acc[key] = value as (...args: unknown[]) => {};
+					}
 
-				return acc;
-			}, {});
+					return acc;
+				},
+				{},
+			);
 		},
 		computedSize(): InnerSelectRef['$props']['size'] {
 			if (this.size === 'medium') {
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
index 69eccc85fe706..0ee668266f561 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
@@ -13,8 +13,7 @@ export default {
 };
 
 const methods = {
-	onReinvite: action('reinvite'),
-	onDelete: action('delete'),
+	action: ({ action: actionName }: { action: string; userId: string }) => action(actionName),
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
@@ -23,8 +22,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nUsersList,
 	},
-	template:
-		'<n8n-users-list v-bind="args" :actions="actions" @reinvite="onReinvite" @delete="onDelete" />',
+	template: '<n8n-users-list v-bind="args" :actions="actions" @action="action" />',
 	methods,
 });
 
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue
index 961c9ed57073b..e6e15e48e1821 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue
@@ -52,6 +52,7 @@ interface UsersListProps {
 
 const props = withDefaults(defineProps<UsersListProps>(), {
 	readonly: false,
+	currentUserId: '',
 	users: () => [],
 	actions: () => [],
 	isSamlLoginEnabled: false,
@@ -101,11 +102,15 @@ const defaultGuard = () => true;
 const getActions = (user: IUser): UserAction[] => {
 	if (user.isOwner) return [];
 
-	return props.actions.filter((action) => (action.guard || defaultGuard)(user));
+	return props.actions.filter((action) => (action.guard ?? defaultGuard)(user));
 };
 
-const $emit = defineEmits(['*']);
-const onUserAction = (user: IUser, action: string) => $emit(action, user.id);
+const $emit = defineEmits(['action']);
+const onUserAction = (user: IUser, action: string) =>
+	$emit('action', {
+		action,
+		userId: user.id,
+	});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/design-system/src/types/datatable.ts b/packages/design-system/src/types/datatable.ts
index 8a31c2b1d7079..816ab3c3020c7 100644
--- a/packages/design-system/src/types/datatable.ts
+++ b/packages/design-system/src/types/datatable.ts
@@ -1,4 +1,4 @@
-import type { VNode } from 'vue';
+import type { Component, VNode } from 'vue';
 
 export type DatatableRowDataType = string | number | boolean | null | undefined;
 
@@ -14,5 +14,5 @@ export interface DatatableColumn {
 	label: string;
 	classes?: string[];
 	width?: string;
-	render?: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
+	render?: Component | ((row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType);
 }
diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts
index ab359bd6def81..c84e8de436b7c 100644
--- a/packages/design-system/src/types/form.ts
+++ b/packages/design-system/src/types/form.ts
@@ -11,7 +11,11 @@ export type IValidator<T = unknown> = {
 	validate: (
 		value: Validatable,
 		config: T,
-	) => false | { messageKey: string; message?: string; options?: unknown } | null;
+	) =>
+		| false
+		| { message: string; options?: unknown }
+		| { messageKey: string; options?: unknown }
+		| null;
 };
 
 export type FormState = {
diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
index 8758dcf817cf5..c963febbb8450 100644
--- a/packages/design-system/tsconfig.json
+++ b/packages/design-system/tsconfig.json
@@ -11,7 +11,7 @@
 		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
 		"types": ["vitest/globals"],
-		"typeRoots": ["@testing-library", "@types", "../../node_modules"],
+		"typeRoots": ["./node_modules/@testing-library", "./node_modules/@types", "../../node_modules", "../../node_modules/@types"],
 		"paths": {
 			"@/*": ["src/*"]
 		},
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 178a3906f3bee..4b7d03d6f2a51 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -55,12 +55,7 @@
 				:users="usersStore.allUsers"
 				:current-user-id="usersStore.currentUserId"
 				:is-saml-login-enabled="ssoStore.isSamlLoginEnabled"
-				@delete="onDelete"
-				@reinvite="onReinvite"
-				@copy-invite-link="onCopyInviteLink"
-				@copy-password-reset-link="onCopyPasswordResetLink"
-				@allow-s-s-o-manual-login="onAllowSSOManualLogin"
-				@disallow-s-s-o-manual-login="onDisallowSSOManualLogin"
+				@action="onUsersListAction"
 			>
 				<template #actions="{ user }">
 					<n8n-select
@@ -192,6 +187,28 @@ export default defineComponent({
 		}
 	},
 	methods: {
+		async onUsersListAction({ action, userId }: { action: string; userId: string }) {
+			switch (action) {
+				case 'delete':
+					await this.onDelete(userId);
+					break;
+				case 'reinvite':
+					await this.onReinvite(userId);
+					break;
+				case 'copyInviteLink':
+					await this.onCopyInviteLink(userId);
+					break;
+				case 'copyPasswordResetLink':
+					await this.onCopyPasswordResetLink(userId);
+					break;
+				case 'allowSSOManualLogin':
+					await this.onAllowSSOManualLogin(userId);
+					break;
+				case 'disallowSSOManualLogin':
+					await this.onDisallowSSOManualLogin(userId);
+					break;
+			}
+		},
 		redirectToSetup() {
 			void this.$router.push({ name: VIEWS.SETUP });
 		},

From 9ec2ef8e091821fff16321f6bf527696ca6ea15c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 17 May 2024 15:08:23 +0300
Subject: [PATCH 2/7] fix: fix remaining design-system errors

---
 .../src/components/N8nFormInput/FormInput.vue | 31 +++++++++++++------
 .../src/components/N8nInput/Input.vue         |  3 +-
 packages/design-system/src/types/form.ts      | 21 ++++++++-----
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index e802048a6a881..f459d2888367c 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -1,8 +1,11 @@
 <template>
 	<N8nCheckbox
 		v-if="type === 'checkbox'"
-		v-bind="$props"
 		ref="inputRef"
+		:label="label"
+		:disabled="disabled"
+		:label-size="labelSize as CheckboxLabelSizePropType"
+		:model-value="modelValue as CheckboxModelValuePropType"
 		@update:model-value="onUpdateModelValue"
 		@focus="onFocus"
 	/>
@@ -17,7 +20,7 @@
 			{{ tooltipText }}
 		</template>
 		<ElSwitch
-			:model-value="modelValue"
+			:model-value="modelValue as SwitchModelValuePropType"
 			:active-color="activeColor"
 			:inactive-color="inactiveColor"
 			@update:model-value="onUpdateModelValue"
@@ -59,9 +62,9 @@
 				v-else
 				ref="inputRef"
 				:name="name"
-				:type="type as InputType"
+				:type="type as InputTypePropType"
 				:placeholder="placeholder"
-				:model-value="modelValue as InputModelValue"
+				:model-value="modelValue as InputModelValuePropType"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
 				:disabled="disabled"
@@ -99,13 +102,21 @@ import N8nCheckbox from '../N8nCheckbox';
 import { ElSwitch } from 'element-plus';
 
 import { getValidationError, VALIDATORS } from './validators';
-import type { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../types';
+import {
+	Rule,
+	RuleGroup,
+	IValidator,
+	Validatable,
+	InputModelValuePropType,
+	InputTypePropType,
+	SwitchModelValuePropType,
+	CheckboxModelValuePropType,
+	CheckboxLabelSizePropType,
+	InputAutocompletePropType,
+} from '../../types';
 
 import { t } from '../../locale';
 
-type InputModelValue = string | number | undefined;
-type InputType = 'number' | 'text' | 'email' | 'password' | 'textarea' | undefined;
-
 export interface Props {
 	modelValue: Validatable;
 	label: string;
@@ -123,7 +134,7 @@ export interface Props {
 	validators?: { [key: string]: IValidator | RuleGroup };
 	maxlength?: number;
 	options?: Array<{ value: string | number; label: string; disabled?: boolean }>;
-	autocomplete?: 'off' | 'autocomplete';
+	autocomplete?: InputAutocompletePropType;
 	name?: string;
 	focusInitially?: boolean;
 	labelSize?: 'small' | 'medium' | 'large';
@@ -209,7 +220,7 @@ function onBlur() {
 	$emit('blur');
 }
 
-function onUpdateModelValue(value: FormState) {
+function onUpdateModelValue(value: Validatable) {
 	state.isTyping = true;
 	$emit('update:modelValue', value);
 }
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 3fbe7bd3553d1..be74d430fabaa 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -34,6 +34,7 @@ import { computed, ref } from 'vue';
 import { ElInput } from 'element-plus';
 import { uid } from '../../utils';
 import type { InputSize, InputType } from '@/types/input';
+import { InputAutocompletePropType } from '@/types';
 
 interface InputProps {
 	modelValue?: string | number;
@@ -47,7 +48,7 @@ interface InputProps {
 	maxlength?: number;
 	title?: string;
 	name?: string;
-	autocomplete?: 'off' | 'autocomplete';
+	autocomplete?: InputAutocompletePropType;
 }
 
 defineOptions({ name: 'N8nInput' });
diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts
index c84e8de436b7c..786fdb418838a 100644
--- a/packages/design-system/src/types/form.ts
+++ b/packages/design-system/src/types/form.ts
@@ -49,13 +49,7 @@ export type IFormInput = {
 		infoText?: string;
 		placeholder?: string;
 		options?: Array<{ label: string; value: string; disabled?: boolean }>;
-		autocomplete?:
-			| 'off'
-			| 'new-password'
-			| 'current-password'
-			| 'given-name'
-			| 'family-name'
-			| 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+		autocomplete?: InputAutocompletePropType;
 		capitalize?: boolean;
 		focusInitially?: boolean;
 		disabled?: boolean;
@@ -76,3 +70,16 @@ export type IFormBoxConfig = {
 	redirectLink?: string;
 	redirectText?: string;
 };
+
+export type CheckboxLabelSizePropType = 'small' | 'medium' | undefined;
+export type CheckboxModelValuePropType = boolean | undefined;
+export type SwitchModelValuePropType = boolean | undefined;
+export type InputModelValuePropType = string | number | undefined;
+export type InputTypePropType = 'number' | 'text' | 'email' | 'password' | 'textarea' | undefined;
+export type InputAutocompletePropType =
+	| 'off'
+	| 'new-password'
+	| 'current-password'
+	| 'given-name'
+	| 'family-name'
+	| 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

From 72913120dae4efc0493945ccaf3be5cc80404745 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 21 May 2024 13:27:54 +0300
Subject: [PATCH 3/7] fix: address PR feedback

---
 .../src/components/N8nColorPicker/ColorPicker.vue      |  3 ++-
 .../src/components/N8nFormInput/FormInput.vue          |  2 +-
 .../design-system/src/components/N8nInput/Input.vue    | 10 ++--------
 .../src/components/N8nInputNumber/InputNumber.vue      |  4 ++--
 .../src/components/N8nNodeIcon/NodeIcon.vue            |  9 ++-------
 .../design-system/src/components/N8nRoute/Route.vue    |  2 +-
 .../design-system/src/components/N8nSelect/Select.vue  |  5 +++--
 packages/design-system/src/types/form.ts               |  1 +
 packages/design-system/src/utils/index.ts              |  1 +
 packages/design-system/src/utils/typeguards.ts         |  6 ++++++
 10 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 packages/design-system/src/utils/typeguards.ts

diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index a4fda20790c92..84ad2c5b4ca66 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { uid } from '../../utils';
 import { ElColorPicker } from 'element-plus';
 import N8nInput from '../N8nInput';
+import type { ElementPlusSizePropType } from '@/types';
 
 export type ColorPickerProps = {
 	disabled?: boolean;
@@ -42,7 +43,7 @@ const emit = defineEmits<{
 	(event: 'active-change', value: string): void;
 }>();
 
-const resolvedSize = computed(() => props.size as '' | 'small' | 'large' | 'default' | undefined);
+const resolvedSize = computed(() => props.size as ElementPlusSizePropType);
 
 const onChange = (value: string) => {
 	emit('change', value);
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index f459d2888367c..b6bff9c14493a 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -102,7 +102,7 @@ import N8nCheckbox from '../N8nCheckbox';
 import { ElSwitch } from 'element-plus';
 
 import { getValidationError, VALIDATORS } from './validators';
-import {
+import type {
 	Rule,
 	RuleGroup,
 	IValidator,
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index be74d430fabaa..5af9447ef561f 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -34,7 +34,7 @@ import { computed, ref } from 'vue';
 import { ElInput } from 'element-plus';
 import { uid } from '../../utils';
 import type { InputSize, InputType } from '@/types/input';
-import { InputAutocompletePropType } from '@/types';
+import type { ElementPlusSizePropType, InputAutocompletePropType } from '@/types';
 
 interface InputProps {
 	modelValue?: string | number;
@@ -68,13 +68,7 @@ const props = withDefaults(defineProps<InputProps>(), {
 });
 
 const resolvedSize = computed(
-	() =>
-		(props.size === 'xlarge' ? undefined : props.size) as
-			| ''
-			| 'small'
-			| 'large'
-			| 'default'
-			| undefined,
+	() => (props.size === 'xlarge' ? undefined : props.size) as ElementPlusSizePropType,
 );
 
 const classes = computed(() => {
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
index c86474bc6a392..be4e4d4263fe4 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { InputSize } from '@/types';
+import type { ElementPlusSizePropType, InputSize } from '@/types';
 import { ElInputNumber } from 'element-plus';
 import { computed } from 'vue';
 
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
 	max: Infinity,
 });
 
-const resolvedSize = computed(() => props.size as '' | 'small' | 'large' | 'default' | undefined);
+const resolvedSize = computed(() => props.size as ElementPlusSizePropType);
 </script>
 
 <template>
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index b5dc993973faa..86fa08b8b5796 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -13,12 +13,7 @@
 				<template #content>{{ nodeTypeName }}</template>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon
-						v-else
-						:icon="name as string"
-						:class="$style.iconFa"
-						:style="fontStyleData"
-					/>
+					<FontAwesomeIcon v-else :icon="`${name}`" :class="$style.iconFa" :style="fontStyleData" />
 				</div>
 				<div v-else :class="$style.nodeIconPlaceholder">
 					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
@@ -27,7 +22,7 @@
 			<template v-else>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon :icon="name as string" :style="fontStyleData" />
+					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
 					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
 						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
 					</div>
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 756f6273132bd..2643cb51f64db 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -2,7 +2,7 @@
 	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
 		<slot></slot>
 	</router-link>
-	<a v-else :href="to as string" :target="openNewWindow ? '_blank' : '_self'" v-bind="$attrs">
+	<a v-else :href="`${to}`" :target="openNewWindow ? '_blank' : '_self'" v-bind="$attrs">
 		<slot></slot>
 	</a>
 </template>
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index 84f2c52cf27bb..c206f5d82aa78 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -32,6 +32,7 @@
 import { ElSelect } from 'element-plus';
 import { type PropType, defineComponent } from 'vue';
 import type { SelectSize } from '@/types';
+import { isEventBindingElementAttribute } from '@/utils';
 
 type InnerSelectRef = InstanceType<typeof ElSelect>;
 
@@ -88,8 +89,8 @@ export default defineComponent({
 		listeners() {
 			return Object.entries(this.$attrs).reduce<Record<string, (...args: unknown[]) => {}>>(
 				(acc, [key, value]) => {
-					if (/^on[A-Z]/.test(key)) {
-						acc[key] = value as (...args: unknown[]) => {};
+					if (isEventBindingElementAttribute(value, key)) {
+						acc[key] = value;
 					}
 
 					return acc;
diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts
index 786fdb418838a..0ab3ec5b01697 100644
--- a/packages/design-system/src/types/form.ts
+++ b/packages/design-system/src/types/form.ts
@@ -83,3 +83,4 @@ export type InputAutocompletePropType =
 	| 'given-name'
 	| 'family-name'
 	| 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+export type ElementPlusSizePropType = '' | 'small' | 'large' | 'default' | undefined;
diff --git a/packages/design-system/src/utils/index.ts b/packages/design-system/src/utils/index.ts
index fd3f0010e1cd4..cdc1b91597fa1 100644
--- a/packages/design-system/src/utils/index.ts
+++ b/packages/design-system/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './event-bus';
 export * from './markdown';
+export * from './typeguards';
 export * from './uid';
 export * from './valueByPath';
diff --git a/packages/design-system/src/utils/typeguards.ts b/packages/design-system/src/utils/typeguards.ts
new file mode 100644
index 0000000000000..30196c4c71ace
--- /dev/null
+++ b/packages/design-system/src/utils/typeguards.ts
@@ -0,0 +1,6 @@
+export function isEventBindingElementAttribute(
+	attribute: unknown,
+	attributeName: string,
+): attribute is (...args: unknown[]) => {} {
+	return /^on[A-Z]/.test(attributeName) && typeof attribute === 'function';
+}

From f592c5b7b6e820bf09f0e28081affdf5266cbdfd Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 21 May 2024 13:31:46 +0300
Subject: [PATCH 4/7] fix: fix import

---
 packages/design-system/src/components/N8nSelect/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index c206f5d82aa78..9c89206e9c2e5 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -32,7 +32,7 @@
 import { ElSelect } from 'element-plus';
 import { type PropType, defineComponent } from 'vue';
 import type { SelectSize } from '@/types';
-import { isEventBindingElementAttribute } from '@/utils';
+import { isEventBindingElementAttribute } from '../../utils';
 
 type InnerSelectRef = InstanceType<typeof ElSelect>;
 

From c9d6d3dc9b40f3247dc8a76c041faba787ad21a0 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 21 May 2024 14:22:16 +0300
Subject: [PATCH 5/7] fix: update snapshots

---
 .../src/components/N8nColorPicker/ColorPicker.vue              | 2 +-
 .../__tests__/__snapshots__/ColorPicker.spec.ts.snap           | 3 +--
 .../N8nInput/__tests__/__snapshots__/Input.spec.ts.snap        | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index 84ad2c5b4ca66..74a5c7391bfa0 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -20,7 +20,7 @@ export type ColorPickerProps = {
 defineOptions({ name: 'N8nColorPicker' });
 const props = withDefaults(defineProps<ColorPickerProps>(), {
 	disabled: false,
-	size: 'medium',
+	size: 'default',
 	showAlpha: false,
 	colorFormat: 'hex',
 	popperClass: '',
diff --git a/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
index 98c92ea40df5a..bc8bdfc5d4cba 100644
--- a/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
+++ b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
@@ -64,7 +64,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
     <!--teleport end-->
     
     <div
-      class="el-input el-input--medium n8n-input input input"
+      class="el-input el-input--default n8n-input input input"
       data-v-dab78bb8=""
     >
       <!-- input -->
@@ -79,7 +79,6 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
         <input
           autocomplete="off"
           class="el-input__inner"
-          maxlength="Infinity"
           name="color-picker"
           placeholder=""
           rows="2"
diff --git a/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap b/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
index c31cd8185e3e7..d79fd088d91bc 100644
--- a/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
+++ b/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`N8nInput > should render correctly 1`] = `
   <!--v-if-->
   <div class="el-input__wrapper">
     <!-- prefix slot -->
-    <!--v-if--><input class="el-input__inner" name="input" rows="2" maxlength="Infinity" title="" type="text" autocomplete="off" tabindex="0" placeholder=""><!-- suffix slot -->
+    <!--v-if--><input class="el-input__inner" name="input" rows="2" title="" type="text" autocomplete="off" tabindex="0" placeholder=""><!-- suffix slot -->
     <!--v-if-->
   </div><!-- append slot -->
   <!--v-if-->

From 969a835944ac0e384a6af40a1f02d44d7f9ac04d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 21 May 2024 16:25:37 +0300
Subject: [PATCH 6/7] fix: fix bugs introduced through typing

---
 packages/design-system/src/components/N8nInput/Input.vue | 1 +
 packages/design-system/src/components/N8nRoute/Route.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 5af9447ef561f..5de8253d22694 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -2,6 +2,7 @@
 	<ElInput
 		ref="innerInput"
 		:model-value="modelValue"
+		:type="type"
 		:size="resolvedSize"
 		:class="['n8n-input', ...classes]"
 		:autocomplete="autocomplete"
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 2643cb51f64db..4501582a84496 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -2,7 +2,12 @@
 	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
 		<slot></slot>
 	</router-link>
-	<a v-else :href="`${to}`" :target="openNewWindow ? '_blank' : '_self'" v-bind="$attrs">
+	<a
+		v-else
+		:href="to ? `${to}` : undefined"
+		:target="openNewWindow ? '_blank' : '_self'"
+		v-bind="$attrs"
+	>
 		<slot></slot>
 	</a>
 </template>

From bb9874d512cf7f4d18ac128f0bee98ab8038f319 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 21 May 2024 18:10:34 +0300
Subject: [PATCH 7/7] fix: make typeguard more permissive

---
 packages/design-system/src/utils/typeguards.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/utils/typeguards.ts b/packages/design-system/src/utils/typeguards.ts
index 30196c4c71ace..0cf3543c5f565 100644
--- a/packages/design-system/src/utils/typeguards.ts
+++ b/packages/design-system/src/utils/typeguards.ts
@@ -1,6 +1,6 @@
 export function isEventBindingElementAttribute(
-	attribute: unknown,
+	_attributeValue: unknown,
 	attributeName: string,
-): attribute is (...args: unknown[]) => {} {
-	return /^on[A-Z]/.test(attributeName) && typeof attribute === 'function';
+): _attributeValue is (...args: unknown[]) => {} {
+	return /^on[A-Z]/.test(attributeName);
 }