refactor(editor): Standardize how we use defineEmits in components using the composition API (no-changelog) (#9934)

packages/@n8n_io/eslint-config/frontend.js

@@ -16,12 +16,7 @@ module.exports = {
 
 	overrides: [
 		{
-			files: [
+			files: ['**/*.test.ts', '**/test/**/*.ts', '**/__tests__/**/*.ts', '**/*.stories.ts'],
-				'**/*.test.ts',
-				'**/test/**/*.ts',
-				'**/__tests__/**/*.ts',
-				'**/*.stories.ts',
-			],
 			rules: {
 				'import/no-extraneous-dependencies': 'off',
 			},
@@ -60,6 +55,7 @@ module.exports = {
 		'vue/prop-name-casing': ['error', 'camelCase'],
 		'vue/attribute-hyphenation': ['error', 'always'],
 		'import/no-extraneous-dependencies': 'warn',
+		'vue/define-emits-declaration': ['error', 'type-literal'],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',

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

@@ -102,8 +102,8 @@ const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
 };
 
 const $emit = defineEmits<{
-	(event: 'select', action: string): void;
+	select: [action: string];
-	(event: 'visibleChange', open: boolean): void;
+	visibleChange: [open: boolean];
 }>();
 const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
 

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

@@ -69,8 +69,8 @@ withDefaults(defineProps<ActionToggleProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'action', value: string): void;
+	action: [value: string];
-	(event: 'visible-change', value: boolean): void;
+	'visible-change': [value: boolean];
 }>();
 const onCommand = (value: string) => $emit('action', value);
 const onVisibleChange = (value: boolean) => $emit('visible-change', value);

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

@@ -45,10 +45,11 @@ withDefaults(defineProps<CheckboxProps>(), {
 	labelSize: 'medium',
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
-	(event: 'update:modelValue', value: CheckboxValueType): void;
+	'update:modelValue': [value: CheckboxValueType];
 }>();
-const onUpdateModelValue = (value: CheckboxValueType) => $emit('update:modelValue', value);
+
+const onUpdateModelValue = (value: CheckboxValueType) => emit('update:modelValue', value);
 
 const checkbox = ref<InstanceType<typeof ElCheckbox>>();
 const onLabelClick = () => {

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

@@ -36,9 +36,9 @@ const colorPickerProps = computed(() => {
 });
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string | null): void;
+	'update:modelValue': [value: string | null];
-	(event: 'change', value: string | null): void;
+	change: [value: string | null];
-	(event: 'active-change', value: string | null): void;
+	'active-change': [value: string | null];
 }>();
 
 const onChange = (value: string | null) => {

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

@@ -85,8 +85,8 @@ const props = withDefaults(defineProps<DatatableProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'update:currentPage', value: number): void;
+	'update:currentPage': [value: number];
-	(event: 'update:rowsPerPage', value: number): void;
+	'update:rowsPerPage': [value: number];
 }>();
 
 const { t } = useI18n();

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

@@ -69,9 +69,9 @@ withDefaults(defineProps<FormBoxProps>(), {
 
 const formBus = createEventBus();
 const $emit = defineEmits<{
-	(event: 'submit', value: { [key: string]: Value }): void;
+	submit: [value: { [key: string]: Value }];
-	(event: 'update', value: { name: string; value: Value }): void;
+	update: [value: { name: string; value: Value }];
-	(event: 'secondaryClick', value: Event): void;
+	secondaryClick: [value: Event];
 }>();
 
 const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e);

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

@@ -158,11 +158,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'validate', shouldValidate: boolean): void;
+	validate: [shouldValidate: boolean];
-	(event: 'update:modelValue', value: Validatable): void;
+	'update:modelValue': [value: Validatable];
-	(event: 'focus'): void;
+	focus: [];
-	(event: 'blur'): void;
+	blur: [];
-	(event: 'enter'): void;
+	enter: [];
 }>();
 
 const state = reactive({

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

@@ -27,10 +27,10 @@ const props = withDefaults(defineProps<FormInputsProps>(), {
 });
 
 const emit = defineEmits<{
-	(name: 'update', _: { name: string; value: Value }): boolean;
+	update: [value: { name: string; value: Value }];
-	(name: 'update:modelValue', value: Record<string, Value>): boolean;
+	'update:modelValue': [value: Record<string, Value>];
-	(name: 'submit', value: Record<string, Value>): boolean;
+	submit: [value: Record<string, Value>];
-	(name: 'ready', value: boolean): boolean;
+	ready: [value: boolean];
 }>();
 
 const showValidationWarnings = ref(false);

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

@@ -69,8 +69,8 @@ const props = withDefaults(defineProps<InfoAccordionProps>(), {
 	eventBus: () => createEventBus(),
 });
 const $emit = defineEmits<{
-	(name: 'click:body', e: MouseEvent): void;
+	'click:body': [e: MouseEvent];
-	(name: 'tooltipClick', item: string, e: MouseEvent): void;
+	tooltipClick: [item: string, e: MouseEvent];
 }>();
 
 const expanded = ref(false);

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

@@ -156,8 +156,8 @@ const htmlContent = computed(() => {
 });
 
 const $emit = defineEmits<{
-	(event: 'markdown-click', link: string, e: MouseEvent): void;
+	'markdown-click': [link: string, e: MouseEvent];
-	(event: 'update-content', content: string): void;
+	'update-content': [content: string];
 }>();
 
 const onClick = (event: MouseEvent) => {

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -83,8 +83,8 @@ const props = withDefaults(defineProps<MenuProps>(), {
 const $route = useRoute();
 
 const $emit = defineEmits<{
-	(event: 'select', itemId: string): void;
+	select: [itemId: string];
-	(event: 'update:modelValue', itemId: string): void;
+	'update:modelValue': [itemId: string];
 }>();
 
 const activeTab = ref(props.modelValue);

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -18,7 +18,7 @@ export interface Props {
 defineProps<Props>();
 
 defineEmits<{
-	(event: 'tooltipClick', $e: MouseEvent): void;
+	tooltipClick: [e: MouseEvent];
 }>();
 
 const { t } = useI18n();

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

@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<NoticeProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'action', key: string): void;
+	action: [key: string];
 }>();
 
 const $style = useCssModule();

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

@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'update:modelValue', value: string, e: MouseEvent): void;
+	'update:modelValue': [value: string, e: MouseEvent];
 }>();
 
 const onClick = (

packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue

@@ -80,9 +80,9 @@ export interface ResizeData {
 }
 
 const $emit = defineEmits<{
-	(event: 'resizestart'): void;
+	resizestart: [];
-	(event: 'resize', value: ResizeData): void;
+	resize: [value: ResizeData];
-	(event: 'resizeend'): void;
+	resizeend: [];
 }>();
 
 const enabledDirections = computed((): Direction[] => {

packages/design-system/src/components/N8nSticky/Sticky.vue

@@ -94,13 +94,13 @@ const props = withDefaults(defineProps<StickyProps>(), {
 	backgroundColor: 1,
 });
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
-	(event: 'edit', editing: boolean): void;
+	edit: [editing: boolean];
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
-	(event: 'markdown-click', link: string, e: Event): void;
+	'markdown-click': [link: string, e: Event];
-	(event: 'resize', values: ResizeData): void;
+	resize: [values: ResizeData];
-	(event: 'resizestart'): void;
+	resizestart: [];
-	(event: 'resizeend'): void;
+	resizeend: [];
 }>();
 
 const { t } = useI18n();
@@ -137,33 +137,33 @@ watch(
 );
 
 const onDoubleClick = () => {
-	if (!props.readOnly) $emit('edit', true);
+	if (!props.readOnly) emit('edit', true);
 };
 
 const onInputBlur = () => {
-	if (!isResizing.value) $emit('edit', false);
+	if (!isResizing.value) emit('edit', false);
 };
 
 const onUpdateModelValue = (value: string) => {
-	$emit('update:modelValue', value);
+	emit('update:modelValue', value);
 };
 
 const onMarkdownClick = (link: string, event: Event) => {
-	$emit('markdown-click', link, event);
+	emit('markdown-click', link, event);
 };
 
 const onResize = (values: ResizeData) => {
-	$emit('resize', values);
+	emit('resize', values);
 };
 
 const onResizeStart = () => {
 	isResizing.value = true;
-	$emit('resizestart');
+	emit('resizestart');
 };
 
 const onResizeEnd = () => {
 	isResizing.value = false;
-	$emit('resizeend');
+	emit('resizeend');
 };
 
 const onInputScroll = (event: WheelEvent) => {

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -111,8 +111,8 @@ onUnmounted(() => {
 });
 
 const $emit = defineEmits<{
-	(event: 'tooltipClick', tab: string, e: MouseEvent): void;
+	tooltipClick: [tab: string, e: MouseEvent];
-	(event: 'update:modelValue', tab: string): void;
+	'update:modelValue': [tab: string];
 }>();
 
 const handleTooltipClick = (tab: string, event: MouseEvent) => $emit('tooltipClick', tab, event);

packages/design-system/src/components/N8nTags/Tags.vue

@@ -43,8 +43,8 @@ const props = withDefaults(defineProps<TagsProp>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'expand', value: boolean): void;
+	expand: [value: boolean];
-	(event: 'click:tag', tagId: string, e: MouseEvent): void;
+	'click:tag': [tagId: string, e: MouseEvent];
 }>();
 
 const { t } = useI18n();

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -55,8 +55,8 @@ const props = withDefaults(defineProps<UserSelectProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'blur'): void;
+	blur: [];
-	(event: 'focus'): void;
+	focus: [];
 }>();
 
 const { t } = useI18n();

packages/design-system/src/components/N8nUsersList/UsersList.vue

@@ -105,11 +105,11 @@ const getActions = (user: IUser): UserAction[] => {
 	return props.actions.filter((action) => (action.guard ?? defaultGuard)(user));
 };
 
-const $emit = defineEmits<{
+const emit = defineEmits<{
-	(event: 'action', _: { action: string; userId: string }): void;
+	action: [value: { action: string; userId: string }];
 }>();
 const onUserAction = (user: IUser, action: string) =>
-	$emit('action', {
+	emit('action', {
 		action,
 		userId: user.id,
 	});

packages/editor-ui/src/components/AIAssistantChat/NextStepPopup.vue

@@ -8,7 +8,7 @@ const aiStore = useAIStore();
 const locale = useI18n();
 const telemetry = useTelemetry();
 
-const emit = defineEmits<{ (event: 'optionSelected', option: string): void }>();
+const emit = defineEmits<{ optionSelected: [option: string] }>();
 
 const aiAssistantChatOpen = computed(() => aiStore.assistantChatOpen);
 

packages/editor-ui/src/components/AIAssistantChat/QuickReplies.vue

@@ -10,7 +10,7 @@ type QuickReply = {
 const locale = useI18n();
 
 const emit = defineEmits<{
-	(event: 'replySelected', value: QuickReply): void;
+	replySelected: [value: QuickReply];
 }>();
 
 defineProps<{

packages/editor-ui/src/components/AssignmentCollection/Assignment.vue

@@ -26,8 +26,8 @@ const props = defineProps<Props>();
 const assignment = ref<AssignmentValue>(props.modelValue);
 
 const emit = defineEmits<{
-	(event: 'update:model-value', value: AssignmentValue): void;
+	'update:model-value': [value: AssignmentValue];
-	(event: 'remove'): void;
+	remove: [];
 }>();
 
 const ndvStore = useNDVStore();

packages/editor-ui/src/components/AssignmentCollection/AssignmentCollection.vue

@@ -27,10 +27,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), { isReadOnly: false });
 
 const emit = defineEmits<{
-	(
+	valueChanged: [value: { name: string; node: string; value: AssignmentCollectionValue }];
-		event: 'valueChanged',
-		value: { name: string; node: string; value: AssignmentCollectionValue },
-	): void;
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/AssignmentCollection/TypeSelect.vue

@@ -12,7 +12,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'update:model-value', type: string): void;
+	'update:model-value': [type: string];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/BinaryDataDisplay.vue

@@ -31,7 +31,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(event: 'close'): void;
+	close: [];
 }>();
 
 const nodeHelpers = useNodeHelpers();

packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue

@@ -28,10 +28,10 @@ import {
 } from '@/constants';
 
 const emit = defineEmits<{
-	(e: 'submit', code: string): void;
+	submit: [code: string];
-	(e: 'replaceCode', code: string): void;
+	replaceCode: [code: string];
-	(e: 'startedLoading'): void;
+	startedLoading: [];
-	(e: 'finishedLoading'): void;
+	finishedLoading: [];
 }>();
 
 const props = defineProps<{

packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -94,7 +94,7 @@ const props = withDefaults(defineProps<Props>(), {
 	rows: 4,
 });
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
 }>();
 
 const message = useMessage();

packages/editor-ui/src/components/CollectionParameter.vue

@@ -76,8 +76,9 @@ export interface Props {
 	isReadOnly?: boolean;
 }
 const emit = defineEmits<{
-	(event: 'valueChanged', value: IUpdateInformation): void;
+	valueChanged: [value: IUpdateInformation];
 }>();
+
 const props = defineProps<Props>();
 const ndvStore = useNDVStore();
 const i18n = useI18n();

packages/editor-ui/src/components/ContextMenu/ContextMenu.vue

@@ -7,7 +7,7 @@ import { watch, ref } from 'vue';
 const contextMenu = useContextMenu();
 const { position, isOpen, actions, target } = contextMenu;
 const dropdown = ref<InstanceType<typeof N8nActionDropdown>>();
-const emit = defineEmits<{ (event: 'action', action: ContextMenuAction, nodes: INode[]): void }>();
+const emit = defineEmits<{ action: [action: ContextMenuAction, nodes: INode[]] }>();
 
 watch(
 	isOpen,

packages/editor-ui/src/components/CopyInput.vue

@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
 	toastTitle: useI18n().baseText('generic.copiedToClipboard'),
 });
 const emit = defineEmits<{
-	(event: 'copy'): void;
+	copy: [];
 }>();
 
 const clipboard = useClipboard();

packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue

@@ -22,7 +22,7 @@ export interface Props {
 }
 
 const emit = defineEmits<{
-	(event: 'authTypeChanged', value: string): void;
+	authTypeChanged: [value: string];
 }>();
 
 const nodeTypesStore = useNodeTypesStore();

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -215,11 +215,11 @@ const props = withDefaults(defineProps<Props>(), {
 	credentialPermissions: () => ({}) as PermissionsMap<CredentialScope>,
 });
 const emit = defineEmits<{
-	(event: 'update', value: IUpdateInformation): void;
+	update: [value: IUpdateInformation];
-	(event: 'authTypeChanged', value: string): void;
+	authTypeChanged: [value: string];
-	(event: 'scrollToTop'): void;
+	scrollToTop: [];
-	(event: 'retest'): void;
+	retest: [];
-	(event: 'oauth'): void;
+	oauth: [];
 }>();
 
 const credentialsStore = useCredentialsStore();

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -47,7 +47,7 @@ const credentialDataValues = computed(
 );
 
 const emit = defineEmits<{
-	(event: 'update', value: IUpdateInformation): void;
+	update: [value: IUpdateInformation];
 }>();
 
 function valueChanged(parameterData: IUpdateInformation) {

packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue

@@ -14,9 +14,9 @@ const props = defineProps<{
 }>();
 
 const $emit = defineEmits<{
-	(event: 'credentialSelected', credentialId: string): void;
+	credentialSelected: [credentialId: string];
-	(event: 'credentialDeselected'): void;
+	credentialDeselected: [];
-	(event: 'credentialModalOpened'): void;
+	credentialModalOpened: [];
 }>();
 
 const uiStore = useUIStore();

packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue

@@ -13,8 +13,8 @@ const props = defineProps<{
 }>();
 
 const $emit = defineEmits<{
-	(event: 'credentialSelected', credentialId: string): void;
+	credentialSelected: [credentialId: string];
-	(event: 'newCredential'): void;
+	newCredential: [];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/Draggable.vue

@@ -30,10 +30,11 @@ type Props = {
 };
 
 const props = withDefaults(defineProps<Props>(), { tag: 'div', disabled: false });
+
 const emit = defineEmits<{
-	(event: 'drag', value: XYPosition): void;
+	drag: [value: XYPosition];
-	(event: 'dragstart', value: HTMLElement): void;
+	dragstart: [value: HTMLElement];
-	(event: 'dragend', value: HTMLElement): void;
+	dragend: [value: HTMLElement];
 }>();
 
 const isDragging = ref(false);

packages/editor-ui/src/components/DraggableTarget.vue

@@ -24,8 +24,9 @@ const props = withDefaults(defineProps<Props>(), {
 	stickyOffset: () => [0, 0],
 	stickyOrigin: 'top-left',
 });
+
 const emit = defineEmits<{
-	(event: 'drop', value: string): void;
+	drop: [value: string];
 }>();
 
 const hovering = ref(false);

packages/editor-ui/src/components/DropArea/DropArea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DraggableTarget from '@/components/DraggableTarget.vue';
 
-const emit = defineEmits<{ (event: 'drop', value: string): void }>();
+const emit = defineEmits<{ drop: [value: string] }>();
 
 const onDrop = (value: string) => {
 	emit('drop', value);

packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue

@@ -30,10 +30,10 @@ type Props = {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
-	(event: 'enter', value: string): void;
+	enter: [value: string];
-	(event: 'blur', value: string): void;
+	blur: [value: string];
-	(event: 'esc'): void;
+	esc: [];
 }>();
 
 const inputRef = ref<HTMLInputElement>();

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue

@@ -37,9 +37,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'change', value: { value: string; segments: Segment[] }): void;
+	change: [value: { value: string; segments: Segment[] }];
-	(event: 'focus'): void;
+	focus: [];
-	(event: 'close'): void;
+	close: [];
 }>();
 
 const root = ref<HTMLElement>();

packages/editor-ui/src/components/ExpressionParameterInput.vue

@@ -39,10 +39,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'modal-opener-click'): void;
+	'modal-opener-click': [];
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
-	(event: 'focus'): void;
+	focus: [];
-	(event: 'blur'): void;
+	blur: [];
 }>();
 
 const telemetry = useTelemetry();

packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue

@@ -7,7 +7,7 @@ import { computed, onMounted, ref } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 
 const emit = defineEmits<{
-	(e: 'change', value: boolean): void;
+	change: [value: boolean];
 }>();
 
 const props = withDefaults(

packages/editor-ui/src/components/Feedback.vue

@@ -2,7 +2,7 @@
 import { useI18n } from '@/composables/useI18n';
 
 const emit = defineEmits<{
-	(e: 'update:modelValue', feedback: 'positive' | 'negative'): void;
+	'update:modelValue': [feedback: 'positive' | 'negative'];
 }>();
 
 defineProps<{

packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue

@@ -11,7 +11,7 @@ interface Props {
 defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'combinatorChange', value: FilterTypeCombinator): void;
+	combinatorChange: [value: FilterTypeCombinator];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/FilterConditions/Condition.vue

@@ -43,8 +43,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update', value: FilterConditionValue): void;
+	update: [value: FilterConditionValue];
-	(event: 'remove'): void;
+	remove: [];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/FilterConditions/FilterConditions.vue

@@ -35,7 +35,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), { readOnly: false });
 
 const emit = defineEmits<{
-	(event: 'valueChanged', value: { name: string; node: string; value: FilterValue }): void;
+	valueChanged: [value: { name: string; node: string; value: FilterValue }];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue

@@ -18,7 +18,7 @@ const shouldRenderItems = ref(false);
 const submenu = ref('none');
 
 const emit = defineEmits<{
-	(event: 'operatorChange', value: string): void;
+	operatorChange: [value: string];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue

@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
 }>();
 
 const htmlEditor = ref<HTMLElement>();

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -39,9 +39,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update:model-value', value: { value: string; segments: Segment[] }): void;
+	'update:model-value': [value: { value: string; segments: Segment[] }];
-	(event: 'update:selection', value: { state: EditorState; selection: SelectionRange }): void;
+	'update:selection': [value: { state: EditorState; selection: SelectionRange }];
-	(event: 'focus'): void;
+	focus: [];
 }>();
 
 const ndvStore = useNDVStore();

packages/editor-ui/src/components/InlineNameEdit.vue

@@ -44,7 +44,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
 }>();
 
 const isNameEdit = ref(false);

packages/editor-ui/src/components/InlineTextEdit.vue

@@ -46,8 +46,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(event: 'toggle'): void;
+	toggle: [];
-	(event: 'submit', payload: { name: string; onSubmit: (updated: boolean) => void }): void;
+	submit: [payload: { name: string; onSubmit: (updated: boolean) => void }];
 }>();
 
 const isDisabled = ref(props.disabled);

packages/editor-ui/src/components/InputNodeSelect.vue

@@ -17,7 +17,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/JsEditor/JsEditor.vue

@@ -41,7 +41,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
 }>();
 
 onMounted(() => {

packages/editor-ui/src/components/JsonEditor/JsonEditor.vue

@@ -41,7 +41,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
 }>();
 
 const jsonEditorRef = ref<HTMLDivElement>();

packages/editor-ui/src/components/MainHeader/TabBar.vue

@@ -29,7 +29,7 @@ withDefaults(
 );
 
 const emit = defineEmits<{
-	(key: 'update:modelValue', tab: MAIN_HEADER_TABS, event: MouseEvent): void;
+	'update:modelValue': [tab: MAIN_HEADER_TABS, event: MouseEvent];
 }>();
 
 function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {

packages/editor-ui/src/components/NDVFloatingNodes.vue

@@ -57,7 +57,7 @@ const workflowsStore = useWorkflowsStore();
 const nodeTypesStore = useNodeTypesStore();
 const workflow = workflowsStore.getCurrentWorkflow();
 const emit = defineEmits<{
-	(key: 'switchSelectedNode', nodeName: string): void;
+	switchSelectedNode: [nodeName: string];
 }>();
 
 interface NodeConfig {

packages/editor-ui/src/components/NDVSubConnections.vue

@@ -140,8 +140,8 @@ const nodeTypesStore = useNodeTypesStore();
 const nodeHelpers = useNodeHelpers();
 const { debounce } = useDebounce();
 const emit = defineEmits<{
-	(event: 'switchSelectedNode', nodeName: string): void;
+	switchSelectedNode: [nodeName: string];
-	(event: 'openConnectionNodeCreator', nodeName: string, connectionType: ConnectionTypes): void;
+	openConnectionNodeCreator: [nodeName: string, connectionType: ConnectionTypes];
 }>();
 
 interface NodeConfig {

packages/editor-ui/src/components/Node/NodeCreation.vue

@@ -27,8 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'addNodes', value: AddedNodesAndConnections): void;
+	addNodes: [value: AddedNodesAndConnections];
-	(event: 'toggleNodeCreator', value: ToggleNodeCreatorOptions): void;
+	toggleNodeCreator: [value: ToggleNodeCreatorOptions];
 }>();
 
 const state = reactive({

packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -30,7 +30,7 @@ import type { IDataObject } from 'n8n-workflow';
 import { useTelemetry } from '@/composables/useTelemetry';
 
 const emit = defineEmits<{
-	(event: 'nodeTypeSelected', _: [actionKey: string, nodeName: string] | [nodeName: string]): void;
+	nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
 }>();
 const telemetry = useTelemetry();
 

packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue

@@ -32,7 +32,7 @@ export interface Props {
 }
 
 const emit = defineEmits<{
-	(event: 'nodeTypeSelected', nodeTypes: string[]): void;
+	nodeTypeSelected: [nodeTypes: string[]];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -49,8 +49,8 @@ const props = defineProps<Props>();
 const { resetViewStacks } = useViewStacks();
 const { registerKeyHook } = useKeyboardNavigation();
 const emit = defineEmits<{
-	(event: 'closeNodeCreator'): void;
+	closeNodeCreator: [];
-	(event: 'nodeTypeSelected', value: string[]): void;
+	nodeTypeSelected: [value: string[]];
 }>();
 const uiStore = useUIStore();
 const aiStore = useAIStore();

packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue

@@ -38,7 +38,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
+	'update:modelValue': [value: string];
 }>();
 
 const state = reactive({

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -176,16 +176,12 @@ import { useI18n } from '@/composables/useI18n';
 import { storeToRefs } from 'pinia';
 
 const emit = defineEmits<{
-	(value: 'saveKeyboardShortcut', event: KeyboardEvent): void;
+	saveKeyboardShortcut: [event: KeyboardEvent];
-	(value: 'valueChanged', parameterData: IUpdateInformation): void;
+	valueChanged: [parameterData: IUpdateInformation];
-	(value: 'switchSelectedNode', nodeTypeName: string): void;
+	switchSelectedNode: [nodeTypeName: string];
-	(
+	openConnectionNodeCreator: [nodeTypeName: string, connectionType: NodeConnectionType];
-		value: 'openConnectionNodeCreator',
+	redrawNode: [nodeName: string];
-		nodeTypeName: string,
+	stopExecution: [];
-		connectionType: NodeConnectionType,
-	): void;
-	(value: 'redrawNode', nodeName: string): void;
-	(value: 'stopExecution'): void;
 }>();
 
 const props = withDefaults(

packages/editor-ui/src/components/NodeIcon.vue

@@ -57,7 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'click'): void;
+	click: [];
 }>();
 
 const rootStore = useRootStore();

packages/editor-ui/src/components/NodeSettingsTabs.vue

@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
 	pushRef: '',
 });
 const emit = defineEmits<{
-	(event: 'update:model-value', tab: Tab): void;
+	'update:model-value': [tab: Tab];
 }>();
 
 const externalHooks = useExternalHooks();

packages/editor-ui/src/components/NodeTitle.vue

@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
 	readOnly: false,
 });
 const emit = defineEmits<{
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
 }>();
 const editName = ref(false);
 const newName = ref('');

packages/editor-ui/src/components/ParameterInput.vue

@@ -569,11 +569,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'focus'): void;
+	focus: [];
-	(event: 'blur'): void;
+	blur: [];
-	(event: 'drop', expression: string): void;
+	drop: [expression: string];
-	(event: 'textInput', update: IUpdateInformation): void;
+	textInput: [update: IUpdateInformation];
-	(event: 'update', update: IUpdateInformation): void;
+	update: [update: IUpdateInformation];
 }>();
 
 const externalHooks = useExternalHooks();

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -84,7 +84,7 @@ const props = withDefaults(defineProps<Props>(), {
 	label: () => ({ size: 'small' }),
 });
 const emit = defineEmits<{
-	(event: 'update', value: IUpdateInformation): void;
+	update: [value: IUpdateInformation];
 }>();
 
 const focused = ref(false);

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -121,8 +121,8 @@ const props = withDefaults(defineProps<Props>(), {
 	label: () => ({ size: 'small' }),
 });
 const emit = defineEmits<{
-	(event: 'blur'): void;
+	blur: [];
-	(event: 'update', value: IUpdateInformation): void;
+	update: [value: IUpdateInformation];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/ParameterInputList.vue

@@ -212,9 +212,9 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), { path: '', hiddenIssuesInputs: () => [] });
 const emit = defineEmits<{
-	(event: 'activate'): void;
+	activate: [];
-	(event: 'valueChanged', value: IUpdateInformation): void;
+	valueChanged: [value: IUpdateInformation];
-	(event: 'parameterBlur', value: string): void;
+	parameterBlur: [value: string];
 }>();
 
 const nodeTypesStore = useNodeTypesStore();

packages/editor-ui/src/components/ParameterInputWrapper.vue

@@ -101,11 +101,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'focus'): void;
+	focus: [];
-	(event: 'blur'): void;
+	blur: [];
-	(event: 'drop', value: string): void;
+	drop: [value: string];
-	(event: 'update', value: IUpdateInformation): void;
+	update: [value: IUpdateInformation];
-	(event: 'textInput', value: IUpdateInformation): void;
+	textInput: [value: IUpdateInformation];
 }>();
 
 const router = useRouter();

packages/editor-ui/src/components/Projects/ProjectDeleteDialog.vue

@@ -12,7 +12,7 @@ type Props = {
 const props = defineProps<Props>();
 const visible = defineModel<boolean>();
 const emit = defineEmits<{
-	(e: 'confirmDelete', value?: string): void;
+	confirmDelete: [value?: string];
 }>();
 
 const locale = useI18n();

packages/editor-ui/src/components/Projects/ProjectSharing.vue

@@ -22,8 +22,8 @@ const model = defineModel<(ProjectSharingData | null) | ProjectSharingData[]>({
 	required: true,
 });
 const emit = defineEmits<{
-	(event: 'projectAdded', value: ProjectSharingData): void;
+	projectAdded: [value: ProjectSharingData];
-	(event: 'projectRemoved', value: ProjectSharingData): void;
+	projectRemoved: [value: ProjectSharingData];
 }>();
 
 const selectedProject = ref(Array.isArray(model.value) ? '' : model.value?.id ?? '');

packages/editor-ui/src/components/ResourceMapper/MappingFields.vue

@@ -50,10 +50,10 @@ const {
 } = useNodeSpecificationValues(props.parameter.typeOptions);
 
 const emit = defineEmits<{
-	(event: 'fieldValueChanged', value: IUpdateInformation): void;
+	fieldValueChanged: [value: IUpdateInformation];
-	(event: 'removeField', field: string): void;
+	removeField: [field: string];
-	(event: 'addField', field: string): void;
+	addField: [field: string];
-	(event: 'refreshFieldList'): void;
+	refreshFieldList: [];
 }>();
 
 const ndvStore = useNDVStore();

packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue

@@ -44,8 +44,8 @@ const mappingModeOptions = [
 ];
 
 const emit = defineEmits<{
-	(event: 'modeChanged', value: string): void;
+	modeChanged: [value: string];
-	(event: 'retryFetch'): void;
+	retryFetch: [];
 }>();
 
 const selected = ref(props.initialValue);

packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue

@@ -53,8 +53,8 @@ watch(
 );
 
 const emit = defineEmits<{
-	(event: 'matchingColumnsChanged', value: string[]): void;
+	matchingColumnsChanged: [value: string[]];
-	(event: 'refreshFieldList'): void;
+	refreshFieldList: [];
 }>();
 
 const availableMatchingFields = computed<ResourceMapperField[]>(() => {

packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'valueChanged', value: IUpdateInformation): void;
+	valueChanged: [value: IUpdateInformation];
 }>();
 
 const state = reactive({

packages/editor-ui/src/components/RunDataPinButton.vue

@@ -18,7 +18,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'togglePinData'): void;
+	togglePinData: [];
 }>();
 
 const visible = computed(() =>

packages/editor-ui/src/components/RunDataSchema.vue

@@ -67,7 +67,7 @@ const { getNodeInputData } = useNodeHelpers();
 const { debounce } = useDebounce();
 
 const emit = defineEmits<{
-	(event: 'clear:search'): void;
+	'clear:search': [];
 }>();
 
 const nodeSchema = computed(() =>

packages/editor-ui/src/components/RunDataSearch.vue

@@ -16,8 +16,8 @@ const OPEN_WIDTH = '204px';
 const OPEN_MIN_WIDTH = '120px';
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: Props['modelValue']): void;
+	'update:modelValue': [value: Props['modelValue']];
-	(event: 'focus'): void;
+	focus: [];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {

packages/editor-ui/src/components/SqlEditor/SqlEditor.vue

@@ -77,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update:model-value', value: string): void;
+	'update:model-value': [value: string];
 }>();
 
 const sqlEditor = ref<HTMLElement>();

packages/editor-ui/src/components/VariablesRow.vue

@@ -18,10 +18,10 @@ const settingsStore = useSettingsStore();
 const usersStore = useUsersStore();
 
 const emit = defineEmits<{
-	(event: 'save', data: IResource): void;
+	save: [data: IResource];
-	(event: 'cancel', data: IResource): void;
+	cancel: [data: IResource];
-	(event: 'edit', data: IResource): void;
+	edit: [data: IResource];
-	(event: 'delete', data: IResource): void;
+	delete: [data: IResource];
 }>();
 
 const props = withDefaults(

packages/editor-ui/src/components/WorkflowCard.vue

@@ -56,8 +56,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(event: 'expand:tags'): void;
+	'expand:tags': [];
-	(event: 'click:tag', tagId: string, e: PointerEvent): void;
+	'click:tag': [tagId: string, e: PointerEvent];
 }>();
 
 const toast = useToast();

packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue

@@ -21,14 +21,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(
+	action: [
-		event: 'action',
 		value: {
 			action: WorkflowHistoryActionTypes[number];
 			id: WorkflowVersionId;
 			data: { formattedCreatedAt: string };
 		},
-	): void;
+	];
 }>();
 
 const workflowVersionPreview = computed<IWorkflowDb | undefined>(() => {

packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue

@@ -22,17 +22,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(
+	action: [
-		event: 'action',
 		value: {
 			action: WorkflowHistoryActionTypes[number];
 			id: WorkflowVersionId;
 			data: { formattedCreatedAt: string };
 		},
-	): void;
+	];
-	(event: 'preview', value: { event: MouseEvent; id: WorkflowVersionId }): void;
+	preview: [value: { event: MouseEvent; id: WorkflowVersionId }];
-	(event: 'loadMore', value: WorkflowHistoryRequestParams): void;
+	loadMore: [value: WorkflowHistoryRequestParams];
-	(event: 'upgrade'): void;
+	upgrade: [];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue

@@ -16,16 +16,15 @@ const props = defineProps<{
 	isActive: boolean;
 }>();
 const emit = defineEmits<{
-	(
+	action: [
-		event: 'action',
 		value: {
 			action: WorkflowHistoryActionTypes[number];
 			id: WorkflowVersionId;
 			data: { formattedCreatedAt: string };
 		},
-	): void;
+	];
-	(event: 'preview', value: { event: MouseEvent; id: WorkflowVersionId }): void;
+	preview: [value: { event: MouseEvent; id: WorkflowVersionId }];
-	(event: 'mounted', value: { index: number; offsetTop: number; isActive: boolean }): void;
+	mounted: [value: { index: number; offsetTop: number; isActive: boolean }];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/WorkflowPreview.vue

@@ -53,7 +53,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(event: 'close'): void;
+	close: [];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/banners/BaseBanner.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'close'): void;
+	close: [];
 }>();
 
 const hasTrailingContent = computed(() => {

packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue

@@ -5,7 +5,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
 
 defineEmits<{
-	(key: 'click', event: MouseEvent): void;
+	click: [event: MouseEvent];
 }>();
 
 const uiStore = useUIStore();

packages/editor-ui/src/components/executions/ExecutionsFilter.vue

@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<ExecutionFilterProps>(), {
 	teleported: true,
 });
 const emit = defineEmits<{
-	(event: 'filterChanged', value: ExecutionFilterType): void;
+	filterChanged: [value: ExecutionFilterType];
 }>();
 const debouncedEmit = debounce(emit, {
 	debounceTime: 500,

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -26,8 +26,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(event: 'update:filters', value: ExecutionFilterType): void;
+	'update:filters': [value: ExecutionFilterType];
-	(event: 'execution:stop'): void;
+	'execution:stop': [];
 }>();
 
 const i18n = useI18n();

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue

@@ -12,9 +12,11 @@ import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 type Command = 'retrySaved' | 'retryOriginal' | 'delete';
 
 const emit = defineEmits<{
-	(event: 'stop', data: ExecutionSummary): void;
+	stop: [data: ExecutionSummary];
-	(event: 'select', data: ExecutionSummary): void;
+	select: [data: ExecutionSummary];
-	(event: Command, data: ExecutionSummary): void;
+	retrySaved: [data: ExecutionSummary];
+	retryOriginal: [data: ExecutionSummary];
+	delete: [data: ExecutionSummary];
 }>();
 
 const props = withDefaults(
@@ -148,6 +150,7 @@ function onSelect() {
 }
 
 async function handleActionItemClick(commandData: Command) {
+	//@ts-ignore todo: fix this type
 	emit(commandData, props.execution);
 }
 </script>

packages/editor-ui/src/views/MfaView.vue

@@ -116,9 +116,9 @@ const i18 = useI18n();
 // ---------------------------------------------------------------------------
 
 const emit = defineEmits<{
-	(event: 'onFormChanged', formField: string): void;
+	onFormChanged: [formField: string];
-	(event: 'onBackClick', formField: string): void;
+	onBackClick: [formField: string];
-	(event: 'submit', form: { token: string; recoveryCode: string }): void;
+	submit: [{ token: string; recoveryCode: string }];
 }>();
 
 // #endregion

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue

@@ -28,11 +28,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(
+	credentialSelected: [event: { credentialUsageKey: TemplateCredentialKey; credentialId: string }];
-		e: 'credentialSelected',
+	credentialDeselected: [event: { credentialUsageKey: TemplateCredentialKey }];
-		event: { credentialUsageKey: TemplateCredentialKey; credentialId: string },
-	): void;
-	(e: 'credentialDeselected', event: { credentialUsageKey: TemplateCredentialKey }): void;
 }>();
 
 // Stores