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

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -1,52 +1,52 @@
 <template>
-	<n8n-checkbox
+	<N8nCheckbox
 		v-if="type === 'checkbox'"
 		v-bind="$props"
+		ref="inputRef"
 		@update:modelValue="onUpdateModelValue"
 		@focus="onFocus"
-		ref="inputRef"
 	/>
-	<n8n-input-label
+	<N8nInputLabel
 		v-else-if="type === 'toggle'"
-		:inputName="name"
+		:input-name="name"
 		:label="label"
-		:tooltipText="tooltipText"
+		:tooltip-text="tooltipText"
 		:required="required && showRequiredAsterisk"
 	>
 		<template #content>
 			{{ tooltipText }}
 		</template>
-		<el-switch
-			:modelValue="modelValue"
+		<ElSwitch
+			:model-value="modelValue"
 			:active-color="activeColor"
 			:inactive-color="inactiveColor"
 			@update:modelValue="onUpdateModelValue"
-		></el-switch>
-	</n8n-input-label>
-	<n8n-input-label
+		></ElSwitch>
+	</N8nInputLabel>
+	<N8nInputLabel
 		v-else
-		:inputName="name"
+		:input-name="name"
 		:label="label"
-		:tooltipText="tooltipText"
+		:tooltip-text="tooltipText"
 		:required="required && showRequiredAsterisk"
 	>
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot" />
-			<n8n-select
-				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+			<N8nSelect
 				v-else-if="type === 'select' || type === 'multi-select'"
-				:modelValue="modelValue"
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+				:model-value="modelValue"
 				:placeholder="placeholder"
 				:multiple="type === 'multi-select'"
+				ref="inputRef"
 				:disabled="disabled"
+				:name="name"
+				:teleported="teleported"
 				@update:modelValue="onUpdateModelValue"
 				@focus="onFocus"
 				@blur="onBlur"
-				:name="name"
-				:teleported="teleported"
-				ref="inputRef"
 			>
-				<n8n-option
+				<N8nOption
 					v-for="option in options || []"
 					:key="option.value"
 					:value="option.value"
@@ -54,38 +54,38 @@
 					:disabled="!!option.disabled"
 					size="small"
 				/>
-			</n8n-select>
-			<n8n-input
+			</N8nSelect>
+			<N8nInput
 				v-else
 				:name="name"
+				ref="inputRef"
 				:type="type"
 				:placeholder="placeholder"
-				:modelValue="modelValue"
+				:model-value="modelValue"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
 				:disabled="disabled"
 				@update:modelValue="onUpdateModelValue"
 				@blur="onBlur"
 				@focus="onFocus"
-				ref="inputRef"
 			/>
 		</div>
-		<div :class="$style.errors" v-if="showErrors">
+		<div v-if="showErrors" :class="$style.errors">
 			<span v-text="validationError" />
 			<n8n-link
 				v-if="documentationUrl && documentationText"
 				:to="documentationUrl"
-				:newWindow="true"
+				:new-window="true"
 				size="small"
 				theme="danger"
 			>
 				{{ documentationText }}
 			</n8n-link>
 		</div>
-		<div :class="$style.infoText" v-else-if="infoText">
+		<div v-else-if="infoText" :class="$style.infoText">
 			<span size="small" v-text="infoText" />
 		</div>
-	</n8n-input-label>
+	</N8nInputLabel>
 </template>
 
 <script lang="ts" setup>