n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-08-16 16:40:30 +03:00
Code Issues Projects Releases Wiki Activity

refactor(editor): Rename $emits to emits where we use defineEmits (no-changelog) (#9959)

Browse Source
This commit is contained in:
Ricardo Espinoza 2024-07-06 13:54:36 -04:00 committed by GitHub
parent d1821eba92
commit 1ae64ec4fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 71 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/@n8n_io/eslint-config/frontend.js
View File

@ -56,6 +56,16 @@ module.exports = {
'vue/attribute-hyphenation': ['error', 'always'], 'vue/attribute-hyphenation': ['error', 'always'],
'import/no-extraneous-dependencies': 'warn', 'import/no-extraneous-dependencies': 'warn',
'vue/define-emits-declaration': ['error', 'type-literal'], 'vue/define-emits-declaration': ['error', 'type-literal'],
'vue/require-macro-variable-name': [
'error',
{
defineProps: 'props',
defineEmits: 'emit',
defineSlots: 'slots',
useSlots: 'slots',
useAttrs: 'attrs',
},
],
// TODO: fix these // TODO: fix these
'@typescript-eslint/no-unsafe-call': 'off', '@typescript-eslint/no-unsafe-call': 'off',

10
packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View File

@ -88,8 +88,8 @@ const props = withDefaults(defineProps<ActionDropdownProps>(), {
teleported: true, teleported: true,
}); });
const $attrs = useAttrs(); const attrs = useAttrs();
const testIdPrefix = $attrs['data-test-id']; const testIdPrefix = attrs['data-test-id'];
const $style = useCssModule(); const $style = useCssModule();
const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => { const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
@ -101,7 +101,7 @@ const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
}; };
}; };
const $emit = defineEmits<{ const emit = defineEmits<{
select: [action: string]; select: [action: string];
visibleChange: [open: boolean]; visibleChange: [open: boolean];
}>(); }>();
@ -111,8 +111,8 @@ const popperClass = computed(
() => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`, () => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`,
); );
const onSelect = (action: string) => $emit('select', action); const onSelect = (action: string) => emit('select', action);
const onVisibleChange = (open: boolean) => $emit('visibleChange', open); const onVisibleChange = (open: boolean) => emit('visibleChange', open);
const onButtonBlur = (event: FocusEvent) => { const onButtonBlur = (event: FocusEvent) => {
// Hide dropdown when clicking outside of current document // Hide dropdown when clicking outside of current document

6
packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
View File

@ -68,12 +68,12 @@ withDefaults(defineProps<ActionToggleProps>(), {
iconOrientation: 'vertical', iconOrientation: 'vertical',
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
action: [value: string]; action: [value: string];
'visible-change': [value: boolean]; 'visible-change': [value: boolean];
}>(); }>();
const onCommand = (value: string) => $emit('action', value); const onCommand = (value: string) => emit('action', value);
const onVisibleChange = (value: boolean) => $emit('visible-change', value); const onVisibleChange = (value: boolean) => emit('visible-change', value);
</script> </script>
<style lang="scss" module> <style lang="scss" module>

4
packages/design-system/src/components/N8nButton/Button.vue
View File

@ -8,7 +8,7 @@
:href="href" :href="href"
aria-live="polite" aria-live="polite"
v-bind="{ v-bind="{
...$attrs, ...attrs,
...(props.nativeType ? { type: props.nativeType } : {}), ...(props.nativeType ? { type: props.nativeType } : {}),
}" }"
> >
@ -29,7 +29,7 @@ import N8nSpinner from '../N8nSpinner';
import type { ButtonProps } from 'n8n-design-system/types/button'; import type { ButtonProps } from 'n8n-design-system/types/button';
const $style = useCssModule(); const $style = useCssModule();
const $attrs = useAttrs(); const attrs = useAttrs();
defineOptions({ name: 'N8nButton' }); defineOptions({ name: 'N8nButton' });
const props = withDefaults(defineProps<ButtonProps>(), { const props = withDefaults(defineProps<ButtonProps>(), {

6
packages/design-system/src/components/N8nDatatable/Datatable.vue
View File

@ -84,7 +84,7 @@ const props = withDefaults(defineProps<DatatableProps>(), {
rowsPerPage: 10, rowsPerPage: 10,
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
'update:currentPage': [value: number]; 'update:currentPage': [value: number];
'update:rowsPerPage': [value: number]; 'update:rowsPerPage': [value: number];
}>(); }>();
@ -115,11 +115,11 @@ const classes = computed(() => ({
})); }));
function onUpdateCurrentPage(value: number) { function onUpdateCurrentPage(value: number) {
$emit('update:currentPage', value); emit('update:currentPage', value);
} }
function onRowsPerPageChange(value: number) { function onRowsPerPageChange(value: number) {
$emit('update:rowsPerPage', value); emit('update:rowsPerPage', value);
const maxPage = Math.ceil(totalRows.value / value); const maxPage = Math.ceil(totalRows.value / value);
if (maxPage < props.currentPage) { if (maxPage < props.currentPage) {

8
packages/design-system/src/components/N8nFormBox/FormBox.vue
View File

@ -68,16 +68,16 @@ withDefaults(defineProps<FormBoxProps>(), {
}); });
const formBus = createEventBus(); const formBus = createEventBus();
const $emit = defineEmits<{ const emit = defineEmits<{
submit: [value: { [key: string]: Value }]; submit: [value: { [key: string]: Value }];
update: [value: { name: string; value: Value }]; update: [value: { name: string; value: Value }];
secondaryClick: [value: Event]; secondaryClick: [value: Event];
}>(); }>();
const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e); const onUpdateModelValue = (e: { name: string; value: Value }) => emit('update', e);
const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e); const onSubmit = (e: { [key: string]: Value }) => emit('submit', e);
const onButtonClick = () => formBus.emit('submit'); const onButtonClick = () => formBus.emit('submit');
const onSecondaryButtonClick = (event: Event) => $emit('secondaryClick', event); const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
</script> </script>
<style lang="scss" module> <style lang="scss" module>

14
packages/design-system/src/components/N8nFormInput/FormInput.vue
View File

@ -157,7 +157,7 @@ const props = withDefaults(defineProps<Props>(), {
tagSize: 'small', tagSize: 'small',
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
validate: [shouldValidate: boolean]; validate: [shouldValidate: boolean];
'update:modelValue': [value: Validatable]; 'update:modelValue': [value: Validatable];
focus: []; focus: [];
@ -217,22 +217,22 @@ function getInputValidationError(): ReturnType<IValidator['validate']> {
function onBlur() { function onBlur() {
state.hasBlurred = true; state.hasBlurred = true;
state.isTyping = false; state.isTyping = false;
$emit('blur'); emit('blur');
} }
function onUpdateModelValue(value: Validatable) { function onUpdateModelValue(value: Validatable) {
state.isTyping = true; state.isTyping = true;
$emit('update:modelValue', value); emit('update:modelValue', value);
} }
function onFocus() { function onFocus() {
$emit('focus'); emit('focus');
} }
function onEnter(event: Event) { function onEnter(event: Event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
$emit('enter'); emit('enter');
} }
const validationError = computed<string | null>(() => { const validationError = computed<string | null>(() => {
@ -258,14 +258,14 @@ const showErrors = computed(
); );
onMounted(() => { onMounted(() => {
$emit('validate', !validationError.value); emit('validate', !validationError.value);
if (props.focusInitially && inputRef.value) inputRef.value.focus(); if (props.focusInitially && inputRef.value) inputRef.value.focus();
}); });
watch( watch(
() => validationError.value, () => validationError.value,
(error) => $emit('validate', !error), (error) => emit('validate', !error),
); );
defineExpose({ inputRef }); defineExpose({ inputRef });

6
packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
View File

@ -68,7 +68,7 @@ const props = withDefaults(defineProps<InfoAccordionProps>(), {
initiallyExpanded: false, initiallyExpanded: false,
eventBus: () => createEventBus(), eventBus: () => createEventBus(),
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
'click:body': [e: MouseEvent]; 'click:body': [e: MouseEvent];
tooltipClick: [item: string, e: MouseEvent]; tooltipClick: [item: string, e: MouseEvent];
}>(); }>();
@ -85,9 +85,9 @@ const toggle = () => {
expanded.value = !expanded.value; expanded.value = !expanded.value;
}; };
const onClick = (e: MouseEvent) => $emit('click:body', e); const onClick = (e: MouseEvent) => emit('click:body', e);
const onTooltipClick = (item: string, event: MouseEvent) => $emit('tooltipClick', item, event); const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick', item, event);
</script> </script>
<style lang="scss" module> <style lang="scss" module>

6
packages/design-system/src/components/N8nMarkdown/Markdown.vue
View File

@ -155,7 +155,7 @@ const htmlContent = computed(() => {
return safeHtml; return safeHtml;
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
'markdown-click': [link: string, e: MouseEvent]; 'markdown-click': [link: string, e: MouseEvent];
'update-content': [content: string]; 'update-content': [content: string];
}>(); }>();
@ -174,7 +174,7 @@ const onClick = (event: MouseEvent) => {
} }
} }
if (clickedLink) { if (clickedLink) {
$emit('markdown-click', clickedLink?.href, event); emit('markdown-click', clickedLink?.href, event);
} }
}; };
@ -209,7 +209,7 @@ const onCheckboxChange = (index: number) => {
// We are using index to connect the checkbox with the corresponding line in the markdown // We are using index to connect the checkbox with the corresponding line in the markdown
const newContent = toggleCheckbox(currentContent, index); const newContent = toggleCheckbox(currentContent, index);
$emit('update-content', newContent); emit('update-content', newContent);
}; };
</script> </script>

8
packages/design-system/src/components/N8nMenu/Menu.vue
View File

@ -82,7 +82,7 @@ const props = withDefaults(defineProps<MenuProps>(), {
}); });
const $route = useRoute(); const $route = useRoute();
const $emit = defineEmits<{ const emit = defineEmits<{
select: [itemId: string]; select: [itemId: string];
'update:modelValue': [itemId: string]; 'update:modelValue': [itemId: string];
}>(); }>();
@ -112,7 +112,7 @@ onMounted(() => {
activeTab.value = props.items.length > 0 ? props.items[0].id : ''; activeTab.value = props.items.length > 0 ? props.items[0].id : '';
} }
$emit('update:modelValue', activeTab.value); emit('update:modelValue', activeTab.value);
}); });
const onSelect = (item: IMenuItem): void => { const onSelect = (item: IMenuItem): void => {
@ -120,8 +120,8 @@ const onSelect = (item: IMenuItem): void => {
activeTab.value = item.id; activeTab.value = item.id;
} }
$emit('select', item.id); emit('select', item.id);
$emit('update:modelValue', item.id); emit('update:modelValue', item.id);
}; };
</script> </script>

4
packages/design-system/src/components/N8nNotice/Notice.vue
View File

@ -35,7 +35,7 @@ const props = withDefaults(defineProps<NoticeProps>(), {
fullContent: '', fullContent: '',
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
action: [key: string]; action: [key: string];
}>(); }>();
@ -75,7 +75,7 @@ const onClick = (event: MouseEvent) => {
} else if (canTruncate.value && anchorKey === 'toggle-expand') { } else if (canTruncate.value && anchorKey === 'toggle-expand') {
showFullContent.value = !showFullContent.value; showFullContent.value = !showFullContent.value;
} else { } else {
$emit('action', anchorKey); emit('action', anchorKey);
} }
} }
}; };

4
packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
View File

@ -38,7 +38,7 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
size: 'medium', size: 'medium',
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
'update:modelValue': [value: string, e: MouseEvent]; 'update:modelValue': [value: string, e: MouseEvent];
}>(); }>();
@ -49,7 +49,7 @@ const onClick = (
if (props.disabled || option.disabled) { if (props.disabled || option.disabled) {
return; return;
} }
$emit('update:modelValue', option.value, event); emit('update:modelValue', option.value, event);
}; };
</script> </script>

8
packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
View File

@ -79,7 +79,7 @@ export interface ResizeData {
direction: Direction; direction: Direction;
} }
const $emit = defineEmits<{ const emit = defineEmits<{
resizestart: []; resizestart: [];
resize: [value: ResizeData]; resize: [value: ResizeData];
resizeend: []; resizeend: [];
@ -141,7 +141,7 @@ const mouseMove = (event: MouseEvent) => {
const y = event.y; const y = event.y;
const direction = state.dir.value as Direction; const direction = state.dir.value as Direction;
$emit('resize', { height, width, dX, dY, x, y, direction }); emit('resize', { height, width, dX, dY, x, y, direction });
state.dHeight.value = dHeight; state.dHeight.value = dHeight;
state.dWidth.value = dWidth; state.dWidth.value = dWidth;
}; };
@ -149,7 +149,7 @@ const mouseMove = (event: MouseEvent) => {
const mouseUp = (event: MouseEvent) => { const mouseUp = (event: MouseEvent) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
$emit('resizeend'); emit('resizeend');
window.removeEventListener('mousemove', mouseMove); window.removeEventListener('mousemove', mouseMove);
window.removeEventListener('mouseup', mouseUp); window.removeEventListener('mouseup', mouseUp);
document.body.style.cursor = 'unset'; document.body.style.cursor = 'unset';
@ -176,7 +176,7 @@ const resizerMove = (event: MouseEvent) => {
window.addEventListener('mousemove', mouseMove); window.addEventListener('mousemove', mouseMove);
window.addEventListener('mouseup', mouseUp); window.addEventListener('mouseup', mouseUp);
$emit('resizestart'); emit('resizestart');
}; };
</script> </script>

6
packages/design-system/src/components/N8nTabs/Tabs.vue
View File

@ -110,13 +110,13 @@ onUnmounted(() => {
resizeObserver?.disconnect(); resizeObserver?.disconnect();
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
tooltipClick: [tab: string, e: MouseEvent]; tooltipClick: [tab: string, e: MouseEvent];
'update:modelValue': [tab: string]; 'update:modelValue': [tab: string];
}>(); }>();
const handleTooltipClick = (tab: string, event: MouseEvent) => $emit('tooltipClick', tab, event); const handleTooltipClick = (tab: string, event: MouseEvent) => emit('tooltipClick', tab, event);
const handleTabClick = (tab: string) => $emit('update:modelValue', tab); const handleTabClick = (tab: string) => emit('update:modelValue', tab);
const scroll = (left: number) => { const scroll = (left: number) => {
const container = tabs.value; const container = tabs.value;

6
packages/design-system/src/components/N8nTags/Tags.vue
View File

@ -4,7 +4,7 @@
v-for="tag in visibleTags" v-for="tag in visibleTags"
:key="tag.id" :key="tag.id"
:text="tag.name" :text="tag.name"
@click="$emit('click:tag', tag.id, $event)" @click="emit('click:tag', tag.id, $event)"
/> />
<N8nLink <N8nLink
v-if="truncate && !showAll && hiddenTagsLength > 0" v-if="truncate && !showAll && hiddenTagsLength > 0"
@ -42,7 +42,7 @@ const props = withDefaults(defineProps<TagsProp>(), {
truncateAt: 3, truncateAt: 3,
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
expand: [value: boolean]; expand: [value: boolean];
'click:tag': [tagId: string, e: MouseEvent]; 'click:tag': [tagId: string, e: MouseEvent];
}>(); }>();
@ -63,7 +63,7 @@ const hiddenTagsLength = computed((): number => props.tags.length - props.trunca
const onExpand = () => { const onExpand = () => {
showAll.value = true; showAll.value = true;
$emit('expand', true); emit('expand', true);
}; };
</script> </script>

6
packages/design-system/src/components/N8nUserSelect/UserSelect.vue
View File

@ -54,7 +54,7 @@ const props = withDefaults(defineProps<UserSelectProps>(), {
currentUserId: '', currentUserId: '',
}); });
const $emit = defineEmits<{ const emit = defineEmits<{
blur: []; blur: [];
focus: []; focus: [];
}>(); }>();
@ -105,8 +105,8 @@ const setFilter = (value: string) => {
filter.value = value; filter.value = value;
}; };
const onBlur = () => $emit('blur'); const onBlur = () => emit('blur');
const onFocus = () => $emit('focus'); const onFocus = () => emit('focus');
const getLabel = (user: IUser) => const getLabel = (user: IUser) =>
!user.fullName ? user.email : `${user.fullName} (${user.email})`; !user.fullName ? user.email : `${user.fullName} (${user.email})`;

14
packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
View File

@ -13,7 +13,7 @@ const props = defineProps<{
selectedCredentialId: string | null; selectedCredentialId: string | null;
}>(); }>();
const $emit = defineEmits<{ const emit = defineEmits<{
credentialSelected: [credentialId: string]; credentialSelected: [credentialId: string];
credentialDeselected: []; credentialDeselected: [];
credentialModalOpened: []; credentialModalOpened: [];
@ -38,18 +38,18 @@ const credentialOptions = computed(() => {
}); });
const onCredentialSelected = (credentialId: string) => { const onCredentialSelected = (credentialId: string) => {
$emit('credentialSelected', credentialId); emit('credentialSelected', credentialId);
}; };
const createNewCredential = () => { const createNewCredential = () => {
uiStore.openNewCredential(props.credentialType, true); uiStore.openNewCredential(props.credentialType, true);
wasModalOpenedFromHere.value = true; wasModalOpenedFromHere.value = true;
$emit('credentialModalOpened'); emit('credentialModalOpened');
}; };
const editCredential = () => { const editCredential = () => {
assert(props.selectedCredentialId); assert(props.selectedCredentialId);
uiStore.openExistingCredential(props.selectedCredentialId); uiStore.openExistingCredential(props.selectedCredentialId);
wasModalOpenedFromHere.value = true; wasModalOpenedFromHere.value = true;
$emit('credentialModalOpened'); emit('credentialModalOpened');
}; };
listenForCredentialChanges({ listenForCredentialChanges({
@ -59,7 +59,7 @@ listenForCredentialChanges({
return; return;
} }
$emit('credentialSelected', credential.id); emit('credentialSelected', credential.id);
}, },
onCredentialDeleted: (deletedCredentialId) => { onCredentialDeleted: (deletedCredentialId) => {
if (!wasModalOpenedFromHere.value) { if (!wasModalOpenedFromHere.value) {
@ -74,9 +74,9 @@ listenForCredentialChanges({
.map((credential) => credential.id) .map((credential) => credential.id)
.filter((id) => id !== deletedCredentialId); .filter((id) => id !== deletedCredentialId);
if (optionsWoDeleted.length > 0) { if (optionsWoDeleted.length > 0) {
$emit('credentialSelected', optionsWoDeleted[0]); emit('credentialSelected', optionsWoDeleted[0]);
} else { } else {
$emit('credentialDeselected'); emit('credentialDeselected');
} }
}, },
}); });

6
packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
View File

@ -12,7 +12,7 @@ const props = defineProps<{
selectedCredentialId: string | null; selectedCredentialId: string | null;
}>(); }>();
const $emit = defineEmits<{ const emit = defineEmits<{
credentialSelected: [credentialId: string]; credentialSelected: [credentialId: string];
newCredential: []; newCredential: [];
}>(); }>();
@ -23,9 +23,9 @@ const NEW_CREDENTIALS_TEXT = `- ${i18n.baseText('nodeCredentials.createNew')} -`
const onCredentialSelected = (credentialId: string) => { const onCredentialSelected = (credentialId: string) => {
if (credentialId === NEW_CREDENTIALS_TEXT) { if (credentialId === NEW_CREDENTIALS_TEXT) {
$emit('newCredential'); emit('newCredential');
} else { } else {
$emit('credentialSelected', credentialId); emit('credentialSelected', credentialId);
} }
}; };
</script> </script>