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

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

@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="sticky-wrapper"
 		:id="nodeId"
 		:ref="data.name"
+		class="sticky-wrapper"
 		:style="stickyPosition"
 		:data-name="data.name"
 		data-test-id="sticky"
@@ -16,25 +16,25 @@
 			}"
 			:style="stickySize"
 		>
-			<div class="select-sticky-background" v-show="isSelected" />
+			<div v-show="isSelected" class="select-sticky-background" />
 			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
 				class="sticky-box"
 				@click.left="mouseLeftClick"
 				@contextmenu="onContextMenu"
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
 			>
 				<n8n-sticky
-					:modelValue="node.parameters.content"
+					:id="node.id"
+					:model-value="node.parameters.content"
 					:height="node.parameters.height"
 					:width="node.parameters.width"
 					:scale="nodeViewScale"
-					:backgroundColor="node.parameters.color"
-					:id="node.id"
-					:readOnly="isReadOnly"
-					:defaultText="defaultText"
-					:editMode="isActive && !isReadOnly"
-					:gridSize="gridSize"
+					:background-color="node.parameters.color"
+					:read-only="isReadOnly"
+					:default-text="defaultText"
+					:edit-mode="isActive && !isReadOnly"
+					:grid-size="gridSize"
 					@edit="onEdit"
 					@resizestart="onResizeStart"
 					@resize="onResize"
@@ -76,11 +76,10 @@
 					</template>
 					<div class="content">
 						<div
-							class="color"
-							data-test-id="color"
 							v-for="(_, index) in Array.from({ length: 7 })"
 							:key="index"
-							v-on:click="changeColor(index + 1)"
+							class="color"
+							data-test-id="color"
 							:class="`sticky-color-${index + 1}`"
 							:style="{
 								'border-width': '1px',
@@ -93,6 +92,7 @@
 										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
 										: 'none',
 							}"
+							@click="changeColor(index + 1)"
 						></div>
 					</div>
 				</n8n-popover>
@@ -126,6 +126,14 @@ import { useContextMenu } from '@/composables/useContextMenu';
 export default defineComponent({
 	name: 'Sticky',
 	mixins: [nodeBase, workflowHelpers],
+	props: {
+		nodeViewScale: {
+			type: Number,
+		},
+		gridSize: {
+			type: Number,
+		},
+	},
 	setup() {
 		const colorPopoverTrigger = ref<HTMLDivElement>();
 		const forceActions = ref(false);
@@ -141,14 +149,6 @@ export default defineComponent({
 
 		return { colorPopoverTrigger, contextMenu, forceActions, setForceActions };
 	},
-	props: {
-		nodeViewScale: {
-			type: Number,
-		},
-		gridSize: {
-			type: Number,
-		},
-	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		defaultText(): string {