feat: Replace Vue.extend with defineComponent in design system (no-changelog)

packages/design-system/package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "clean": "rimraf dist .turbo",
     "build": "vite build",
-    "typecheck": "vue-tsc --emitDeclarationOnly",
+    "typecheck": "vue-tsc --declaration --emitDeclarationOnly",
     "test": "vitest run --coverage",
     "test:dev": "vitest",
     "build:storybook": "storybook build",

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -49,7 +49,7 @@ import {
 } from 'element-ui';
 import N8nIcon from '../N8nIcon';
 
-interface IActionDropdownItem {
+export interface IActionDropdownItem {
 	id: string;
 	label: string;
 	icon?: string;

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -9,7 +9,7 @@
 			@visible-change="onVisibleChange"
 		>
 			<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
-				<component :is="$options.components.N8nIcon" icon="ellipsis-v" :size="iconSize" />
+				<n8n-icon icon="ellipsis-v" :size="iconSize" />
 			</span>
 
 			<template #dropdown>
@@ -22,9 +22,8 @@
 					>
 						{{ action.label }}
 						<div :class="$style.iconContainer">
-							<component
+							<n8n-icon
 								v-if="action.type === 'external-link'"
-								:is="$options.components.N8nIcon"
 								icon="external-link-alt"
 								size="xsmall"
 								color="text-base"
@@ -46,7 +45,7 @@ import {
 } from 'element-ui';
 import N8nIcon from '../N8nIcon';
 
-interface Action {
+export interface Action {
 	label: string;
 	value: string;
 	disabled: boolean;

packages/design-system/src/components/N8nButton/Button.vue

@@ -81,11 +81,11 @@ export default defineComponent({
 		N8nIcon,
 	},
 	computed: {
-		ariaBusy(): string {
-			return this.loading ? 'true' : 'false';
+		ariaBusy(): 'true' | undefined {
+			return this.loading ? 'true' : undefined;
 		},
-		ariaDisabled(): string {
-			return this.disabled ? 'true' : 'false';
+		ariaDisabled(): 'true' | undefined {
+			return this.disabled ? 'true' : undefined;
 		},
 		classes(): string {
 			return (

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass(row)">
+				<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass()">
 					<td v-for="column in columns" :key="column.id">
 						<component v-if="column.render" :is="column.render" :row="row" :column="column" />
 						<span v-else>{{ getTdValue(row, column) }}</span>

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

@@ -56,6 +56,7 @@ export default defineComponent({
 	props: {
 		title: {
 			type: String,
+			default: '',
 		},
 		inputs: {
 			type: Array,
@@ -75,9 +76,11 @@ export default defineComponent({
 		},
 		redirectText: {
 			type: String,
+			default: '',
 		},
 		redirectLink: {
 			type: String,
+			default: '',
 		},
 	},
 	data() {

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

@@ -92,7 +92,7 @@ import N8nSelect from '../N8nSelect';
 import N8nOption from '../N8nOption';
 import N8nInputLabel from '../N8nInputLabel';
 import N8nCheckbox from '../N8nCheckbox';
-import ElSwitch from 'element-ui/lib/switch';
+import { Switch as ElSwitch } from 'element-ui';
 
 import { getValidationError, VALIDATORS } from './validators';
 import { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../types';

packages/design-system/src/components/N8nFormInput/validators.ts

@@ -3,106 +3,120 @@ import { IValidator, RuleGroup, Validatable } from '../../types';
 export const emailRegex =
 	/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
-export const VALIDATORS: { [key: string]: IValidator | RuleGroup } = {
-	REQUIRED: {
-		validate: (value: Validatable) => {
-			if (typeof value === 'string' && !!value.trim()) {
-				return false;
-			}
+export const requiredValidator: IValidator<{}> = {
+	validate: (value: Validatable) => {
+		if (typeof value === 'string' && !!value.trim()) {
+			return false;
+		}
 
-			if (typeof value === 'number' || typeof value === 'boolean') {
-				return false;
-			}
+		if (typeof value === 'number' || typeof value === 'boolean') {
+			return false;
+		}
+
+		return {
+			messageKey: 'formInput.validator.fieldRequired',
+		};
+	},
+};
 
+export const minLengthValidator: IValidator<{ minimum: number }> = {
+	validate: (value: Validatable, config: { minimum: number }) => {
+		if (typeof value === 'string' && value.length < config.minimum) {
 			return {
-				messageKey: 'formInput.validator.fieldRequired',
+				messageKey: 'formInput.validator.minCharactersRequired',
+				options: config,
 			};
-		},
+		}
+
+		return false;
 	},
-	MIN_LENGTH: {
-		validate: (value: Validatable, config: { minimum: number }) => {
-			if (typeof value === 'string' && value.length < config.minimum) {
-				return {
-					messageKey: 'formInput.validator.minCharactersRequired',
-					options: config,
-				};
-			}
+};
 
-			return false;
-		},
+export const maxLengthValidator: IValidator<{ maximum: number }> = {
+	validate: (value: Validatable, config: { maximum: number }) => {
+		if (typeof value === 'string' && value.length > config.maximum) {
+			return {
+				messageKey: 'formInput.validator.maxCharactersRequired',
+				options: config,
+			};
+		}
+
+		return false;
 	},
-	MAX_LENGTH: {
-		validate: (value: Validatable, config: { maximum: number }) => {
-			if (typeof value === 'string' && value.length > config.maximum) {
-				return {
-					messageKey: 'formInput.validator.maxCharactersRequired',
-					options: config,
-				};
-			}
+};
 
+export const containsNumberValidator: IValidator<{ minimum: number }> = {
+	validate: (value: Validatable, config: { minimum: number }) => {
+		if (typeof value !== 'string') {
 			return false;
-		},
+		}
+
+		const numberCount = (value.match(/\d/g) || []).length;
+		if (numberCount < config.minimum) {
+			return {
+				messageKey: 'formInput.validator.numbersRequired',
+				options: config,
+			};
+		}
+
+		return false;
 	},
-	CONTAINS_NUMBER: {
-		validate: (value: Validatable, config: { minimum: number }) => {
-			if (typeof value !== 'string') {
-				return false;
-			}
+};
 
-			const numberCount = (value.match(/\d/g) || []).length;
-			if (numberCount < config.minimum) {
-				return {
-					messageKey: 'formInput.validator.numbersRequired',
-					options: config,
-				};
-			}
+export const emailValidator: IValidator<{}> = {
+	validate: (value: Validatable) => {
+		if (!emailRegex.test(String(value).trim().toLowerCase())) {
+			return {
+				messageKey: 'formInput.validator.validEmailRequired',
+			};
+		}
 
-			return false;
-		},
+		return false;
 	},
-	VALID_EMAIL: {
-		validate: (value: Validatable) => {
-			if (!emailRegex.test(String(value).trim().toLowerCase())) {
-				return {
-					messageKey: 'formInput.validator.validEmailRequired',
-				};
-			}
+};
 
+export const containsUpperCaseValidator: IValidator<{ minimum: number }> = {
+	validate: (value: Validatable, config: { minimum: number }) => {
+		if (typeof value !== 'string') {
 			return false;
-		},
-	},
-	CONTAINS_UPPERCASE: {
-		validate: (value: Validatable, config: { minimum: number }) => {
-			if (typeof value !== 'string') {
-				return false;
-			}
+		}
 
-			const uppercaseCount = (value.match(/[A-Z]/g) || []).length;
-			if (uppercaseCount < config.minimum) {
-				return {
-					messageKey: 'formInput.validator.uppercaseCharsRequired',
-					options: config,
-				};
-			}
+		const uppercaseCount = (value.match(/[A-Z]/g) || []).length;
+		if (uppercaseCount < config.minimum) {
+			return {
+				messageKey: 'formInput.validator.uppercaseCharsRequired',
+				options: config,
+			};
+		}
 
-			return false;
-		},
+		return false;
 	},
-	DEFAULT_PASSWORD_RULES: {
-		rules: [
-			{
-				rules: [
-					{ name: 'MIN_LENGTH', config: { minimum: 8 } },
-					{ name: 'CONTAINS_NUMBER', config: { minimum: 1 } },
-					{ name: 'CONTAINS_UPPERCASE', config: { minimum: 1 } },
-				],
-				defaultError: {
-					messageKey: 'formInput.validator.defaultPasswordRequirements',
-				},
+};
+
+export const defaultPasswordRules: RuleGroup = {
+	rules: [
+		{
+			rules: [
+				{ name: 'MIN_LENGTH', config: { minimum: 8 } },
+				{ name: 'CONTAINS_NUMBER', config: { minimum: 1 } },
+				{ name: 'CONTAINS_UPPERCASE', config: { minimum: 1 } },
+			],
+			defaultError: {
+				messageKey: 'formInput.validator.defaultPasswordRequirements',
 			},
-			{ name: 'MAX_LENGTH', config: { maximum: 64 } },
-		],
-	},
+		},
+		{ name: 'MAX_LENGTH', config: { maximum: 64 } },
+	],
+};
+
+export const VALIDATORS = {
+	REQUIRED: requiredValidator,
+	MIN_LENGTH: minLengthValidator,
+	MAX_LENGTH: maxLengthValidator,
+	CONTAINS_NUMBER: containsNumberValidator,
+	VALID_EMAIL: emailValidator,
+	CONTAINS_UPPERCASE: containsUpperCaseValidator,
+	DEFAULT_PASSWORD_RULES: defaultPasswordRules,
 };
 
 export const getValidationError = <T extends Validatable, C>(

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

@@ -82,7 +82,7 @@ export default defineComponent({
 		});
 
 		if (this.eventBus) {
-			this.eventBus.on('submit', this.onSubmit); // eslint-disable-line @typescript-eslint/unbound-method
+			this.eventBus.on('submit', this.onSubmit);
 		}
 	},
 	computed: {
@@ -105,9 +105,9 @@ export default defineComponent({
 		onInput(name: string, value: unknown) {
 			this.values = {
 				...this.values,
-				[name]: value, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+				[name]: value,
 			};
-			this.$emit('input', { name, value }); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+			this.$emit('input', { name, value });
 		},
 		onValidate(name: string, valid: boolean) {
 			this.$set(this.validity, name, valid);

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -43,10 +43,12 @@ import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
 import { defineComponent, PropType } from 'vue';
 
-interface IAccordionItem {
+export interface IAccordionItem {
 	id: string;
 	label: string;
 	icon: string;
+	iconColor?: string;
+	tooltip?: string;
 }
 
 export default defineComponent({

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -49,12 +49,12 @@ const DEFAULT_OPTIONS_TASKLISTS = {
 	labelAfter: true,
 } as const;
 
-interface IImage {
+export interface IImage {
 	id: string;
 	url: string;
 }
 
-interface Options {
+export interface Options {
 	markdown: typeof DEFAULT_OPTIONS_MARKDOWN;
 	linkAttributes: typeof DEFAULT_OPTIONS_LINK_ATTRIBUTES;
 	tasklists: typeof DEFAULT_OPTIONS_TASKLISTS;
@@ -163,7 +163,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onClick(event: MouseEvent): void {
+		onClick(event: MouseEvent) {
 			let clickedLink = null;
 
 			if (event.target instanceof HTMLAnchorElement) {