Fix all type errors in design system

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

@@ -35,8 +35,9 @@ import ElDropdown from 'element-ui/lib/dropdown';
 import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
 import ElDropdownItem from 'element-ui/lib/dropdown-item';
 import N8nIcon from '../N8nIcon';
+import Vue from 'vue';
 
-export default {
+export default Vue.extend({
 	name: 'n8n-action-toggle',
 	components: {
 		ElDropdown,
@@ -79,7 +80,7 @@ export default {
 			this.$emit('visible-change', value);
 		},
 	},
-};
+});
 </script>
 
 <style lang="scss" module>

packages/design-system/src/components/N8nAvatar/Avatar.vue

@@ -53,7 +53,7 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		getColors(colors): string[] {
+		getColors(colors: string[]): string[] {
 			const style = getComputedStyle(document.body);
 			return colors.map((color: string) => style.getPropertyValue(color));
 		},

packages/design-system/src/components/N8nCallout/Callout.vue

@@ -21,7 +21,7 @@ import Vue from 'vue';
 import N8nIcon from '../N8nIcon';
 import N8nText from '../N8nText';
 
-const CALLOUT_DEFAULT_ICONS = {
+const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
 	info: 'info-circle',
 	success: 'check-circle',
 	warning: 'exclamation-triangle',

packages/design-system/src/components/N8nCheckbox/Checkbox.vue

@@ -56,8 +56,8 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onChange(e) {
-			this.$emit("input", e);
+		onChange(event: Event) {
+			this.$emit("input", event);
 		},
 	}
 });

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

@@ -112,8 +112,8 @@ export default Vue.extend({
 		onButtonClick() {
 			this.formBus.$emit('submit');
 		},
-		onSecondaryButtonClick(e) {
-			this.$emit('secondaryClick', e);
+		onSecondaryButtonClick(event: Event) {
+			this.$emit('secondaryClick', event);
 		},
 	},
 });

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

@@ -155,7 +155,7 @@ export default mixins(Locale).extend({
 		this.$emit('validate', !this.validationError);
 
 		if (this.focusInitially && this.$refs.input) {
-			this.$refs.input.focus();
+			(this.$refs.input as HTMLTextAreaElement).focus();
 		}
 	},
 	computed: {
@@ -186,7 +186,7 @@ export default mixins(Locale).extend({
 			} as { [key: string]: IValidator | RuleGroup };
 
 			if (this.required) {
-				const error = getValidationError(this.value, validators, validators.REQUIRED as Validator);
+				const error = getValidationError(this.value, validators, validators.REQUIRED as IValidator);
 				if (error) {
 					return error;
 				}
@@ -199,7 +199,7 @@ export default mixins(Locale).extend({
 						const error = getValidationError(
 							this.value,
 							validators,
-							validators[rule.name] as Validator,
+							validators[rule.name] as IValidator,
 							rule.config,
 						);
 						if (error) {
@@ -235,9 +235,9 @@ export default mixins(Locale).extend({
 		onFocus() {
 			this.$emit('focus');
 		},
-		onEnter(e) {
-			e.stopPropagation();
-			e.preventDefault();
+		onEnter(event: Event) {
+			event.stopPropagation();
+			event.preventDefault();
 			this.$emit('enter');
 		},
 	},

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

@@ -29,7 +29,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import N8nFormInput from '../N8nFormInput';
-import { IFormInputs } from '../../types';
+import type { IFormInput } from '../../types';
 import ResizeObserver from '../ResizeObserver';
 
 export default Vue.extend({
@@ -60,7 +60,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		(this.inputs as IFormInputs).forEach((input: IFormInput) => {
+		(this.inputs as IFormInput[]).forEach((input) => {
 			if (input.hasOwnProperty('initialValue')) {
 				Vue.set(this.values, input.name, input.initialValue);
 			}
@@ -72,7 +72,11 @@ export default Vue.extend({
 	},
 	computed: {
 		filteredInputs(): IFormInput[] {
-			return this.inputs.filter((input: IFormInput) => typeof input.shouldDisplay === 'function'? input.shouldDisplay(this.values): true);
+			return (this.inputs as IFormInput[]).filter(
+				(input) => typeof input.shouldDisplay === 'function'
+					? input.shouldDisplay(this.values)
+					: true
+			);
 		},
 		isReadyToSubmit(): boolean {
 			for (let key in this.validity) {
@@ -98,7 +102,7 @@ export default Vue.extend({
 		onSubmit() {
 			this.showValidationWarnings = true;
 			if (this.isReadyToSubmit) {
-				const toSubmit = this.filteredInputs.reduce((accu, input: IFormInput) => {
+				const toSubmit = (this.filteredInputs as IFormInput[]).reduce<{ [key: string]: unknown }>((accu, input) => {
 					if (this.values[input.name]) {
 						accu[input.name] = this.values[input.name];
 					}

packages/design-system/src/components/N8nHeading/Heading.vue

@@ -46,7 +46,7 @@ export default Vue.extend({
 
 			applied.push(this.bold? 'bold': 'regular');
 
-			return applied.map((c) => this.$style[c]);
+			return applied.map((c) => (this.$style as { [key: string]: string })[c]);
 		}
 	},
 });

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -58,10 +58,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
-		circle: {
-			type: Boolean,
-			default: true,
-		},
 	},
 });
 </script>

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

@@ -87,22 +87,43 @@ export default Vue.extend({
 	},
 	methods: {
 		focus() {
-			if (this.$refs.innerInput.$el) {
-				// @ts-ignore
-				(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
-			}
+			const innerInput = this.$refs.innerInput as Vue | undefined;
+
+			if (!innerInput) return;
+
+			const inputElement = innerInput.$el.querySelector(
+				this.type === 'textarea' ? 'textarea' : 'input',
+			);
+
+			if (!inputElement) return;
+
+			inputElement.focus();
 		},
 		blur() {
-			if (this.$refs.innerInput.$el) {
-				// @ts-ignore
-				(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).blur();
-			}
+			const innerInput = this.$refs.innerInput as Vue | undefined;
+
+			if (!innerInput) return;
+
+			const inputElement = innerInput.$el.querySelector(
+				this.type === 'textarea' ? 'textarea' : 'input',
+			);
+
+			if (!inputElement) return;
+
+			inputElement.blur();
 		},
 		select() {
-			if (this.$refs.innerInput.$el) {
-				// @ts-ignore
-				(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).select();
-			}
+			const innerInput = this.$refs.innerInput as Vue | undefined;
+
+			if (!innerInput) return;
+
+			const inputElement = innerInput.$el.querySelector(
+				this.type === 'textarea' ? 'textarea' : 'input',
+			);
+
+			if (!inputElement) return;
+
+			inputElement.select();
 		},
 	},
 });

packages/design-system/src/components/N8nLink/Link.vue

@@ -18,8 +18,6 @@ import Vue from 'vue';
 import N8nText from '../N8nText';
 import N8nRoute from '../N8nRoute';
 
-import Vue from 'vue';
-
 export default Vue.extend({
 	name: 'n8n-link',
 	props: {

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

@@ -28,7 +28,7 @@ const markdownLink = require('markdown-it-link-attributes');
 const markdownEmoji = require('markdown-it-emoji');
 const markdownTasklists = require('markdown-it-task-lists');
 
-import xss from 'xss';
+import xss, { friendlyAttrValue } from 'xss';
 import { escapeMarkdown } from '../../utils/markdown';
 
 const DEFAULT_OPTIONS_MARKDOWN = {
@@ -131,7 +131,7 @@ export default Vue.extend({
 					if (tag === 'img' && name === 'src') {
 						if (value.match(fileIdRegex)) {
 							const id = value.split('fileId:')[1];
-							return `src=${xss.friendlyAttrValue(imageUrls[id])}` || '';
+							return `src=${friendlyAttrValue(imageUrls[id])}` || '';
 						}
 						// Only allow http requests to supported image files from the `static` directory
 						const isImageFile = value.split('#')[0].match(/\.(jpeg|jpg|gif|png|webp)$/) !== null;
@@ -162,13 +162,14 @@ export default Vue.extend({
 		};
 	},
 	methods: {
-		onClick(event) {
+		onClick(event: MouseEvent) {
 			let clickedLink = null;
 
 			if(event.target instanceof HTMLAnchorElement) {
 				clickedLink = event.target;
 			}
-			if(event.target.matches('a *')) {
+
+			if(event.target instanceof HTMLElement && event.target.matches('a *')) {
 				const parentLink = event.target.closest('a');
 				if(parentLink) {
 					clickedLink = parentLink;

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -77,24 +77,27 @@ export default Vue.extend({
 				},
 			);
 		},
-		onClick(e) {
-			if (e.target.localName !== 'a') return;
+		onClick(event: MouseEvent) {
+			if (!(event.target instanceof HTMLElement)) return;
 
-			if (e.target.dataset && e.target.dataset.key) {
-				e.stopPropagation();
-				e.preventDefault();
+			if (event.target.localName !== 'a') return;
 
-				if (e.target.dataset.key === 'show-less') {
+			if (event.target.dataset && event.target.dataset.key) {
+				event.stopPropagation();
+				event.preventDefault();
+
+				if (event.target.dataset.key === 'show-less') {
 					this.showFullContent = false;
-				} else if (this.canTruncate && e.target.dataset.key === 'toggle-expand') {
+				} else if (this.canTruncate && event.target.dataset.key === 'toggle-expand') {
 					this.showFullContent = !this.showFullContent;
 				} else {
-					this.$emit('action', e.target.dataset.key);
+					this.$emit('action', event.target.dataset.key);
 				}
 			}
 		},
 	},
 });
+
 </script>
 
 <style lang="scss" module>

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -36,7 +36,7 @@ export default Vue.extend({
 		RadioButton,
 	},
 	methods: {
-		onClick(value) {
+		onClick(value: unknown) {
 			if (this.disabled) {
 				return;
 			}

packages/design-system/src/components/N8nSelect/Select.vue

@@ -112,21 +112,21 @@ export default Vue.extend({
 	},
 	methods: {
 		focus() {
-			const input = this.$refs.innerSelect;
-			if (input) {
-				input.focus();
+			const select = this.$refs.innerSelect as Vue & HTMLElement | undefined;
+			if (select) {
+				select.focus();
 			}
 		},
 		blur() {
-			const input = this.$refs.innerSelect;
-			if (input) {
-				input.blur();
+			const select = this.$refs.innerSelect as Vue & HTMLElement | undefined;
+			if (select) {
+				select.blur();
 			}
 		},
 		focusOnInput() {
-			const select = (this.$refs.innerSelect) as (Vue | undefined);
+			const select = this.$refs.innerSelect as Vue & HTMLElement | undefined;
 			if (select) {
-				const input = select.$refs.input;
+				const input = select.$refs.input as Vue & HTMLElement | undefined;
 				if (input) {
 					input.focus();
 				}