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

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;
-	(event: 'visibleChange', open: boolean): void;
+	select: [action: string];
+	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;
-	(event: 'visible-change', value: boolean): void;
+	action: [value: string];
+	'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<{
-	(event: 'update:modelValue', value: CheckboxValueType): void;
+const emit = defineEmits<{
+	'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;
-	(event: 'change', value: string | null): void;
-	(event: 'active-change', value: string | null): void;
+	'update:modelValue': [value: string | null];
+	change: [value: string | null];
+	'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;
-	(event: 'update:rowsPerPage', value: number): void;
+	'update:currentPage': [value: number];
+	'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;
-	(event: 'update', value: { name: string; value: Value }): void;
-	(event: 'secondaryClick', value: Event): void;
+	submit: [value: { [key: string]: Value }];
+	update: [value: { name: string; value: Value }];
+	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;
-	(event: 'update:modelValue', value: Validatable): void;
-	(event: 'focus'): void;
-	(event: 'blur'): void;
-	(event: 'enter'): void;
+	validate: [shouldValidate: boolean];
+	'update:modelValue': [value: Validatable];
+	focus: [];
+	blur: [];
+	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;
-	(name: 'update:modelValue', value: Record<string, Value>): boolean;
-	(name: 'submit', value: Record<string, Value>): boolean;
-	(name: 'ready', value: boolean): boolean;
+	update: [value: { name: string; value: Value }];
+	'update:modelValue': [value: Record<string, Value>];
+	submit: [value: Record<string, Value>];
+	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;
-	(name: 'tooltipClick', item: string, e: MouseEvent): void;
+	'click:body': [e: MouseEvent];
+	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;
-	(event: 'update-content', content: string): void;
+	'markdown-click': [link: string, e: MouseEvent];
+	'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;
-	(event: 'update:modelValue', itemId: string): void;
+	select: [itemId: string];
+	'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;
-	(event: 'resize', value: ResizeData): void;
-	(event: 'resizeend'): void;
+	resizestart: [];
+	resize: [value: ResizeData];
+	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<{
-	(event: 'edit', editing: boolean): void;
-	(event: 'update:modelValue', value: string): void;
-	(event: 'markdown-click', link: string, e: Event): void;
-	(event: 'resize', values: ResizeData): void;
-	(event: 'resizestart'): void;
-	(event: 'resizeend'): void;
+const emit = defineEmits<{
+	edit: [editing: boolean];
+	'update:modelValue': [value: string];
+	'markdown-click': [link: string, e: Event];
+	resize: [values: ResizeData];
+	resizestart: [];
+	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;
-	(event: 'update:modelValue', tab: string): void;
+	tooltipClick: [tab: string, e: MouseEvent];
+	'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;
-	(event: 'click:tag', tagId: string, e: MouseEvent): void;
+	expand: [value: boolean];
+	'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;
-	(event: 'focus'): void;
+	blur: [];
+	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<{
-	(event: 'action', _: { action: string; userId: string }): void;
+const emit = defineEmits<{
+	action: [value: { action: string; userId: string }];
 }>();
 const onUserAction = (user: IUser, action: string) =>
-	$emit('action', {
+	emit('action', {
 		action,
 		userId: user.id,
 	});