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

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

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.dataDisplay">
-		<table :class="$style.table" v-if="tableData.columns && tableData.columns.length === 0">
+		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
 			<tr>
 				<th :class="$style.emptyCell"></th>
 				<th :class="$style.tableRightMargin"></th>
@@ -21,7 +21,7 @@
 				<td :class="$style.tableRightMargin"></td>
 			</tr>
 		</table>
-		<table :class="$style.table" v-else>
+		<table v-else :class="$style.table">
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
@@ -32,7 +32,7 @@
 									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
 								</div>
 							</template>
-							<draggable
+							<Draggable
 								type="mapping"
 								:data="getExpression(column)"
 								:disabled="!mappingEnabled"
@@ -61,7 +61,7 @@
 										</div>
 									</div>
 								</template>
-							</draggable>
+							</Draggable>
 						</n8n-tooltip>
 					</th>
 					<th v-if="columnLimitExceeded" :class="$style.header">
@@ -90,14 +90,14 @@
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
-			<draggable
+			<Draggable
+				ref="draggable"
 				tag="tbody"
 				type="mapping"
-				targetDataKey="mappable"
+				target-data-key="mappable"
 				:disabled="!mappingEnabled"
 				@dragstart="onCellDragStart"
 				@dragend="onCellDragEnd"
-				ref="draggable"
 			>
 				<template #preview="{ canDrop, el }">
 					<MappingPill
@@ -116,9 +116,9 @@
 						:key="index2"
 						:data-row="index1"
 						:data-col="index2"
+						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
-						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 					>
 						<TextWithHighlights
 							v-if="isSimple(data)"
@@ -126,11 +126,9 @@
 							:search="search"
 							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
 						/>
-						<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
+						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
 							<template #label="{ label, path }">
 								<span
-									@mouseenter="() => onMouseEnterKey(path, index2)"
-									@mouseleave="onMouseLeaveKey"
 									:class="{
 										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
 										[$style.draggingKey]: isDraggingKey(path, index2),
@@ -141,6 +139,8 @@
 									:data-name="getCellPathName(path, index2)"
 									:data-value="getCellExpression(path, index2)"
 									:data-depth="path.length"
+									@mouseenter="() => onMouseEnterKey(path, index2)"
+									@mouseleave="onMouseLeaveKey"
 									>{{ label || $locale.baseText('runData.unnamedField') }}</span
 								>
 							</template>
@@ -156,7 +156,7 @@
 					<td v-if="columnLimitExceeded"></td>
 					<td :class="$style.tableRightMargin"></td>
 				</tr>
-			</draggable>
+			</Draggable>
 		</table>
 	</div>
 </template>
@@ -182,7 +182,7 @@ const MAX_COLUMNS_LIMIT = 40;
 type DraggableRef = InstanceType<typeof Draggable>;
 
 export default defineComponent({
-	name: 'run-data-table',
+	name: 'RunDataTable',
 	components: { Draggable, MappingPill, TextWithHighlights },
 	props: {
 		node: {