refactor(editor): Standardize components sections order (no-changelog) (

#10540)
n8n-io · Aug 24, 2024 · 609bc4d · 609bc4d
1 parent 4d48f90
commit 609bc4d
Show file tree

Hide file tree

Showing 215 changed files with 11,224 additions and 11,213 deletions.
diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
@@ -66,6 +66,12 @@ module.exports = {
 				useAttrs: 'attrs',
 			},
 		],
+		'vue/block-order': [
+			'error',
+			{
+				order: ['script', 'template', 'style'],
+			},
+		],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',

diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -1,3 +1,29 @@
+<script lang="ts" setup>
+import N8nButton from '../N8nButton';
+import N8nHeading from '../N8nHeading';
+import N8nText from '../N8nText';
+import N8nCallout, { type CalloutTheme } from '../N8nCallout';
+import type { ButtonType } from 'n8n-design-system/types/button';
+import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
+
+interface ActionBoxProps {
+	emoji: string;
+	heading: string;
+	buttonText: string;
+	buttonType: ButtonType;
+	buttonDisabled?: boolean;
+	description: string;
+	calloutText?: string;
+	calloutTheme?: CalloutTheme;
+	calloutIcon?: string;
+}
+
+defineOptions({ name: 'N8nActionBox' });
+withDefaults(defineProps<ActionBoxProps>(), {
+	calloutTheme: 'info',
+});
+</script>
+
 <template>
 	<div :class="['n8n-action-box', $style.container]" data-test-id="action-box">
 		<div v-if="emoji" :class="$style.emoji">
@@ -41,32 +67,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import N8nButton from '../N8nButton';
-import N8nHeading from '../N8nHeading';
-import N8nText from '../N8nText';
-import N8nCallout, { type CalloutTheme } from '../N8nCallout';
-import type { ButtonType } from 'n8n-design-system/types/button';
-import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
-
-interface ActionBoxProps {
-	emoji: string;
-	heading: string;
-	buttonText: string;
-	buttonType: ButtonType;
-	buttonDisabled?: boolean;
-	description: string;
-	calloutText?: string;
-	calloutTheme?: CalloutTheme;
-	calloutIcon?: string;
-}
-
-defineOptions({ name: 'N8nActionBox' });
-withDefaults(defineProps<ActionBoxProps>(), {
-	calloutTheme: 'info',
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	border: 2px dashed var(--color-foreground-base);

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,57 +1,3 @@
-<template>
-	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<ElDropdown
-			ref="elementDropdown"
-			:placement="placement"
-			:trigger="trigger"
-			:popper-class="popperClass"
-			:teleported="teleported"
-			:disabled="disabled"
-			@command="onSelect"
-			@visible-change="onVisibleChange"
-		>
-			<slot v-if="$slots.activator" name="activator" />
-			<n8n-icon-button
-				v-else
-				type="tertiary"
-				text
-				:class="$style.activator"
-				:size="activatorSize"
-				:icon="activatorIcon"
-				@blur="onButtonBlur"
-			/>
-
-			<template #dropdown>
-				<ElDropdownMenu :class="$style.userActionsMenu">
-					<ElDropdownItem
-						v-for="item in items"
-						:key="item.id"
-						:command="item.id"
-						:disabled="item.disabled"
-						:divided="item.divided"
-						:class="$style.elementItem"
-					>
-						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
-							<span v-if="item.icon" :class="$style.icon">
-								<N8nIcon :icon="item.icon" :size="iconSize" />
-							</span>
-							<span :class="$style.label">
-								{{ item.label }}
-							</span>
-							<N8nKeyboardShortcut
-								v-if="item.shortcut"
-								v-bind="item.shortcut"
-								:class="$style.shortcut"
-							>
-							</N8nKeyboardShortcut>
-						</div>
-					</ElDropdownItem>
-				</ElDropdownMenu>
-			</template>
-		</ElDropdown>
-	</div>
-</template>
-
 <script lang="ts" setup>
 // This component is visually similar to the ActionToggle component
 // but it offers more options when it comes to dropdown items styling
@@ -129,6 +75,60 @@ const close = () => elementDropdown.value?.handleClose();
 defineExpose({ open, close });
 </script>
 
+<template>
+	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
+		<ElDropdown
+			ref="elementDropdown"
+			:placement="placement"
+			:trigger="trigger"
+			:popper-class="popperClass"
+			:teleported="teleported"
+			:disabled="disabled"
+			@command="onSelect"
+			@visible-change="onVisibleChange"
+		>
+			<slot v-if="$slots.activator" name="activator" />
+			<n8n-icon-button
+				v-else
+				type="tertiary"
+				text
+				:class="$style.activator"
+				:size="activatorSize"
+				:icon="activatorIcon"
+				@blur="onButtonBlur"
+			/>
+
+			<template #dropdown>
+				<ElDropdownMenu :class="$style.userActionsMenu">
+					<ElDropdownItem
+						v-for="item in items"
+						:key="item.id"
+						:command="item.id"
+						:disabled="item.disabled"
+						:divided="item.divided"
+						:class="$style.elementItem"
+					>
+						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
+							<span v-if="item.icon" :class="$style.icon">
+								<N8nIcon :icon="item.icon" :size="iconSize" />
+							</span>
+							<span :class="$style.label">
+								{{ item.label }}
+							</span>
+							<N8nKeyboardShortcut
+								v-if="item.shortcut"
+								v-bind="item.shortcut"
+								:class="$style.shortcut"
+							>
+							</N8nKeyboardShortcut>
+						</div>
+					</ElDropdownItem>
+				</ElDropdownMenu>
+			</template>
+		</ElDropdown>
+	</div>
+</template>
+
 <style lang="scss" module>
 :global(.el-dropdown__list) {
 	.userActionsMenu {

diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -1,3 +1,38 @@
+<script lang="ts" setup>
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
+import type { UserAction } from 'n8n-design-system/types';
+import N8nIcon from '../N8nIcon';
+import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
+
+const SIZE = ['mini', 'small', 'medium'] as const;
+const THEME = ['default', 'dark'] as const;
+
+interface ActionToggleProps {
+	actions?: UserAction[];
+	placement?: Placement;
+	size?: (typeof SIZE)[number];
+	iconSize?: IconSize;
+	theme?: (typeof THEME)[number];
+	iconOrientation?: IconOrientation;
+}
+
+defineOptions({ name: 'N8nActionToggle' });
+withDefaults(defineProps<ActionToggleProps>(), {
+	actions: () => [],
+	placement: 'bottom',
+	size: 'medium',
+	theme: 'default',
+	iconOrientation: 'vertical',
+});
+
+const emit = defineEmits<{
+	action: [value: string];
+	'visible-change': [value: boolean];
+}>();
+const onCommand = (value: string) => emit('action', value);
+const onVisibleChange = (value: boolean) => emit('visible-change', value);
+</script>
+
 <template>
 	<span :class="$style.container" data-test-id="action-toggle" @click.stop.prevent>
 		<ElDropdown
@@ -41,41 +76,6 @@
 	</span>
 </template>
 
-<script lang="ts" setup>
-import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
-import type { UserAction } from 'n8n-design-system/types';
-import N8nIcon from '../N8nIcon';
-import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
-
-const SIZE = ['mini', 'small', 'medium'] as const;
-const THEME = ['default', 'dark'] as const;
-
-interface ActionToggleProps {
-	actions?: UserAction[];
-	placement?: Placement;
-	size?: (typeof SIZE)[number];
-	iconSize?: IconSize;
-	theme?: (typeof THEME)[number];
-	iconOrientation?: IconOrientation;
-}
-
-defineOptions({ name: 'N8nActionToggle' });
-withDefaults(defineProps<ActionToggleProps>(), {
-	actions: () => [],
-	placement: 'bottom',
-	size: 'medium',
-	theme: 'default',
-	iconOrientation: 'vertical',
-});
-
-const emit = defineEmits<{
-	action: [value: string];
-	'visible-change': [value: boolean];
-}>();
-const onCommand = (value: string) => emit('action', value);
-const onVisibleChange = (value: boolean) => emit('visible-change', value);
-</script>
-
 <style lang="scss" module>
 .container > * {
 	line-height: 1;

diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue
@@ -1,28 +1,3 @@
-<template>
-	<div :class="alertBoxClassNames" role="alert">
-		<div :class="$style.content">
-			<span v-if="showIcon || $slots.icon" :class="$style.icon">
-				<N8nIcon v-if="showIcon" :icon="icon" />
-				<slot v-else-if="$slots.icon" name="icon" />
-			</span>
-			<div :class="$style.text">
-				<div v-if="$slots.title || title" :class="$style.title">
-					<slot name="title">{{ title }}</slot>
-				</div>
-				<div
-					v-if="$slots.default || description"
-					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
-				>
-					<slot>{{ description }}</slot>
-				</div>
-			</div>
-		</div>
-		<div v-if="$slots.aside" :class="$style.aside">
-			<slot name="aside" />
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -76,6 +51,31 @@ const alertBoxClassNames = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="alertBoxClassNames" role="alert">
+		<div :class="$style.content">
+			<span v-if="showIcon || $slots.icon" :class="$style.icon">
+				<N8nIcon v-if="showIcon" :icon="icon" />
+				<slot v-else-if="$slots.icon" name="icon" />
+			</span>
+			<div :class="$style.text">
+				<div v-if="$slots.title || title" :class="$style.title">
+					<slot name="title">{{ title }}</slot>
+				</div>
+				<div
+					v-if="$slots.default || description"
+					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
+				>
+					<slot>{{ description }}</slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.aside" :class="$style.aside">
+			<slot name="aside" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 @import '../../css/common/var.scss';
 

diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -1,19 +1,3 @@
-<template>
-	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
-		<Avatar
-			v-if="name"
-			:size="getSize(size)"
-			:name="name"
-			variant="marble"
-			:colors="getColors(colors)"
-		/>
-		<div v-else :class="[$style.empty, $style[size]]"></div>
-		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
-			{{ initials }}
-		</span>
-	</span>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import Avatar from 'vue-boring-avatars';
@@ -57,6 +41,22 @@ const sizes: { [size: string]: number } = {
 const getSize = (size: string): number => sizes[size];
 </script>
 
+<template>
+	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
+		<Avatar
+			v-if="name"
+			:size="getSize(size)"
+			:name="name"
+			variant="marble"
+			:colors="getColors(colors)"
+		/>
+		<div v-else :class="[$style.empty, $style[size]]"></div>
+		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
+			{{ initials }}
+		</span>
+	</span>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;