refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)

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

@@ -1,5 +1,5 @@
 <template>
-	<div @keydown.stop class="fixed-collection-parameter">
+	<div class="fixed-collection-parameter" @keydown.stop>
 		<div v-if="getProperties.length === 0" class="no-items-exist">
 			<n8n-text size="small">{{
 				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
@@ -27,7 +27,7 @@
 					<div
 						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
 					>
-						<div class="delete-option" v-if="!isReadOnly">
+						<div v-if="!isReadOnly" class="delete-option">
 							<n8n-icon-button
 								type="tertiary"
 								text
@@ -56,12 +56,12 @@
 							></n8n-icon-button>
 						</div>
 						<Suspense>
-							<parameter-input-list
+							<ParameterInputList
 								:parameters="property.values"
-								:nodeValues="nodeValues"
+								:node-values="nodeValues"
 								:path="getPropertyPath(property.name, index)"
-								:hideDelete="true"
-								:isReadOnly="isReadOnly"
+								:hide-delete="true"
+								:is-read-only="isReadOnly"
 								@valueChanged="valueChanged"
 							/>
 						</Suspense>
@@ -70,7 +70,7 @@
 			</div>
 			<div v-else class="parameter-item">
 				<div class="parameter-item-wrapper">
-					<div class="delete-option" v-if="!isReadOnly">
+					<div v-if="!isReadOnly" class="delete-option">
 						<n8n-icon-button
 							type="tertiary"
 							text
@@ -80,34 +80,34 @@
 							@click="deleteOption(property.name)"
 						></n8n-icon-button>
 					</div>
-					<parameter-input-list
+					<ParameterInputList
 						:parameters="property.values"
-						:nodeValues="nodeValues"
+						:node-values="nodeValues"
 						:path="getPropertyPath(property.name)"
-						:isReadOnly="isReadOnly"
+						:is-read-only="isReadOnly"
 						class="parameter-item"
+						:hide-delete="true"
 						@valueChanged="valueChanged"
-						:hideDelete="true"
 					/>
 				</div>
 			</div>
 		</div>
 
-		<div class="controls" v-if="parameterOptions.length > 0 && !isReadOnly">
+		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
 			<n8n-button
 				v-if="parameter.options.length === 1"
 				type="tertiary"
 				block
-				@click="optionSelected(parameter.options[0].name)"
 				:label="getPlaceholderText"
+				@click="optionSelected(parameter.options[0].name)"
 			/>
 			<div v-else class="add-option">
 				<n8n-select
 					v-model="selectedOption"
 					:placeholder="getPlaceholderText"
 					size="small"
-					@update:modelValue="optionSelected"
 					filterable
+					@update:modelValue="optionSelected"
 				>
 					<n8n-option
 						v-for="item in parameterOptions"
@@ -140,6 +140,9 @@ const ParameterInputList = defineAsyncComponent(async () => import('./ParameterI
 
 export default defineComponent({
 	name: 'FixedCollectionParameter',
+	components: {
+		ParameterInputList,
+	},
 	props: {
 		nodeValues: {
 			type: Object as PropType<Record<string, INodeParameters[]>>,
@@ -162,26 +165,12 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	components: {
-		ParameterInputList,
-	},
 	data() {
 		return {
 			selectedOption: undefined,
 			mutableValues: {} as Record<string, INodeParameters[]>,
 		};
 	},
-	watch: {
-		values: {
-			handler(newValues: Record<string, INodeParameters[]>) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
-	},
 	computed: {
 		getPlaceholderText(): string {
 			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
@@ -218,6 +207,17 @@ export default defineComponent({
 			return !!this.parameter.typeOptions?.sortable;
 		},
 	},
+	watch: {
+		values: {
+			handler(newValues: Record<string, INodeParameters[]>) {
+				this.mutableValues = deepCopy(newValues);
+			},
+			deep: true,
+		},
+	},
+	created() {
+		this.mutableValues = deepCopy(this.values);
+	},
 	methods: {
 		deleteOption(optionName: string, index?: number) {
 			const currentOptionsOfSameType = this.mutableValues[optionName];