fix(editor): Fix design system typecheck errors (no-changelog)

packages/design-system/src/components/N8nColorPicker/ColorPicker.vue

@@ -23,14 +23,16 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
 	showAlpha: false,
 	colorFormat: 'hex',
 	popperClass: '',
+	predefine: undefined,
+	modelValue: undefined,
 	showInput: true,
 	name: uid('color-picker'),
 });
 
 const color = ref(props.modelValue);
 
 const colorPickerProps = computed(() => {
-	const { showInput, ...rest } = props;
+	const { showInput, modelValue, size, ...rest } = props;
 	return rest;
 });
 
@@ -40,6 +42,8 @@ const emit = defineEmits<{
 	(event: 'active-change', value: string): void;
 }>();
 
+const resolvedSize = computed(() => props.size as '' | 'small' | 'large' | 'default' | undefined);
+
 const onChange = (value: string) => {
 	emit('change', value);
 };
@@ -61,7 +65,7 @@ const onColorSelect = (value: string) => {
 	<span :class="['n8n-color-picker', $style.component]">
 		<ElColorPicker
 			v-bind="colorPickerProps"
-			size="default"
+			:size="resolvedSize"
 			@change="onChange"
 			@active-change="onActiveChange"
 			@update:model-value="onColorSelect"
@@ -70,7 +74,7 @@ const onColorSelect = (value: string) => {
 			v-if="showInput"
 			:class="$style.input"
 			:disabled="props.disabled"
-			:size="props.size"
+			:size="size"
 			:model-value="color"
 			:name="name"
 			type="text"

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"
+				:type="type as InputTypePropType"
 				:placeholder="placeholder"
-				:model-value="modelValue"
+				:model-value="modelValue as InputModelValuePropType"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
 				:disabled="disabled"
@@ -99,7 +102,18 @@
 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';
 
@@ -120,10 +134,10 @@
 	validators?: { [key: string]: IValidator | RuleGroup };
 	maxlength?: number;
 	options?: Array<{ value: string | number; label: string; disabled?: boolean }>;
-	autocomplete?: string;
+	autocomplete?: InputAutocompletePropType;
 	name?: string;
 	focusInitially?: boolean;
-	labelSize?: 'small' | 'medium';
+	labelSize?: 'small' | 'medium' | 'large';
 	disabled?: boolean;
 	activeLabel?: string;
 	activeColor?: string;
@@ -206,7 +220,7 @@
 	$emit('blur');
 }
 
-function onUpdateModelValue(value: FormState) {
+function onUpdateModelValue(value: Validatable) {
 	state.isTyping = true;
 	$emit('update:modelValue', value);
 }
@@ -225,9 +239,9 @@
 	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;
 		}
 	}

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,

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),
 		},

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" />
@@ -27,6 +34,7 @@
 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;
@@ -40,12 +48,13 @@
 	maxlength?: number;
 	title?: string;
 	name?: string;
-	autocomplete?: 'off' | 'autocomplete';
+	autocomplete?: InputAutocompletePropType;
 }
 
 defineOptions({ name: 'N8nInput' });
 const props = withDefaults(defineProps<InputProps>(), {
 	modelValue: '',
+	type: 'text',
 	size: 'large',
 	placeholder: '',
 	disabled: false,
@@ -58,7 +67,15 @@
 	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[] = [];

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>

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',

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>

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

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') {

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,
 });
 

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>