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

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

@@ -1,8 +1,8 @@
 <template>
-	<div @keydown.stop :class="parameterInputClasses">
-		<expression-edit
-			:dialogVisible="expressionEditDialogVisible"
-			:modelValue="
+	<div :class="parameterInputClasses" @keydown.stop>
+		<ExpressionEdit
+			:dialog-visible="expressionEditDialogVisible"
+			:model-value="
 				isResourceLocatorParameter && typeof modelValue !== 'string'
 					? modelValue
 						? modelValue.value
@@ -11,25 +11,25 @@
 			"
 			:parameter="parameter"
 			:path="path"
-			:eventSource="eventSource || 'ndv'"
-			:isReadOnly="isReadOnly"
-			:redactValues="shouldRedactValue"
+			:event-source="eventSource || 'ndv'"
+			:is-read-only="isReadOnly"
+			:redact-values="shouldRedactValue"
 			@closeDialog="closeExpressionEditDialog"
 			@update:modelValue="expressionUpdated"
-		></expression-edit>
+		></ExpressionEdit>
 		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
-			<resource-locator
+			<ResourceLocator
 				v-if="isResourceLocatorParameter"
 				ref="resourceLocator"
 				:parameter="parameter"
-				:modelValue="modelValue"
-				:dependentParametersValues="dependentParametersValues"
-				:displayTitle="displayTitle"
-				:expressionDisplayValue="expressionDisplayValue"
-				:expressionComputedValue="expressionEvaluated"
-				:isValueExpression="isValueExpression"
-				:isReadOnly="isReadOnly"
-				:parameterIssues="getIssues"
+				:model-value="modelValue"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isValueExpression"
+				:is-read-only="isReadOnly"
+				:parameter-issues="getIssues"
 				:droppable="droppable"
 				:node="node"
 				:path="path"
@@ -42,10 +42,11 @@
 			/>
 			<ExpressionParameterInput
 				v-else-if="isValueExpression || forceShowExpression"
-				:modelValue="expressionDisplayValue"
+				:model-value="expressionDisplayValue"
+				ref="inputField"
 				:title="displayTitle"
-				:isReadOnly="isReadOnly"
-				:isSingleLine="isSingleLine"
+				:is-read-only="isReadOnly"
+				:is-single-line="isSingleLine"
 				:path="path"
 				:additional-expression-data="additionalExpressionData"
 				:class="{ 'ph-no-capture': shouldRedactValue }"
@@ -53,7 +54,6 @@
 				@modalOpenerClick="openExpressionEditorModal"
 				@focus="setFocus"
 				@blur="onBlur"
-				ref="inputField"
 			/>
 			<div
 				v-else-if="
@@ -63,7 +63,7 @@
 			>
 				<el-dialog
 					v-if="codeEditDialogVisible"
-					:modelValue="true"
+					:model-value="true"
 					append-to-body
 					:close-on-click-modal="false"
 					width="80%"
@@ -73,94 +73,94 @@
 					:before-close="closeCodeEditDialog"
 				>
 					<div class="ignore-key-press">
-						<code-node-editor
-							:modelValue="modelValue"
-							:defaultValue="parameter.default"
+						<CodeNodeEditor
+							:model-value="modelValue"
+							:default-value="parameter.default"
 							:language="editorLanguage"
-							:isReadOnly="isReadOnly"
+							:is-read-only="isReadOnly"
 							@update:modelValue="expressionUpdated"
 						/>
 					</div>
 				</el-dialog>
 
-				<text-edit
-					:dialogVisible="textEditDialogVisible"
-					:modelValue="modelValue"
+				<TextEdit
+					:dialog-visible="textEditDialogVisible"
+					:model-value="modelValue"
 					:parameter="parameter"
 					:path="path"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					@closeDialog="closeTextEditDialog"
 					@update:modelValue="expressionUpdated"
-				></text-edit>
+				></TextEdit>
 
-				<code-node-editor
+				<CodeNodeEditor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode(node)"
 					:mode="node.parameters.mode"
-					:modelValue="modelValue"
-					:defaultValue="parameter.default"
+					:model-value="modelValue"
+					:default-value="parameter.default"
 					:language="editorLanguage"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
-					:aiButtonEnabled="settingsStore.isCloudDeployment"
+					:ai-button-enabled="settingsStore.isCloudDeployment"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<html-editor
+				<HtmlEditor
 					v-else-if="editorType === 'htmlEditor'"
-					:modelValue="modelValue"
-					:isReadOnly="isReadOnly"
+					:model-value="modelValue"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
-					:disableExpressionColoring="!isHtmlNode(node)"
-					:disableExpressionCompletions="!isHtmlNode(node)"
+					:disable-expression-coloring="!isHtmlNode(node)"
+					:disable-expression-completions="!isHtmlNode(node)"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<sql-editor
+				<SqlEditor
 					v-else-if="editorType === 'sqlEditor'"
-					:modelValue="modelValue"
+					:model-value="modelValue"
 					:dialect="getArgument('sqlDialect')"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<code-node-editor
+				<CodeNodeEditor
 					v-else-if="editorType === 'json' && !isExecuteWorkflowNode(node)"
 					:mode="node.parameters.mode"
-					:modelValue="modelValue"
-					:defaultValue="parameter.default"
+					:model-value="modelValue"
+					:default-value="parameter.default"
 					:language="editorLanguage"
-					:isReadOnly="isReadOnly"
-					:aiButtonEnabled="false"
-					@update:modelValue="valueChangedDebounced"
+					:is-read-only="isReadOnly"
+					:ai-button-enabled="false"
 					:rows="getArgument('rows')"
+					@update:modelValue="valueChangedDebounced"
 				/>
 
 				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
-					<code-node-editor
+					<CodeNodeEditor
 						v-if="!codeEditDialogVisible"
-						:modelValue="modelValue"
+						:model-value="modelValue"
 						:language="editorLanguage"
-						:isReadOnly="true"
+						:is-read-only="true"
 						:rows="getArgument('rows')"
 					/>
 				</div>
 
 				<n8n-input
 					v-else
-					v-model="tempValue"
 					ref="inputField"
+					v-model="tempValue"
 					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
 					:size="inputSize"
 					:type="getStringInputType"
 					:rows="getArgument('rows')"
 					:disabled="isReadOnly"
+					:title="displayTitle"
+					:placeholder="getPlaceholder()"
 					@update:modelValue="valueChanged($event) && onUpdateTextInput($event)"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
-					:title="displayTitle"
-					:placeholder="getPlaceholder()"
 				>
 					<template #suffix>
 						<n8n-icon
@@ -184,35 +184,35 @@
 				<el-color-picker
 					size="small"
 					class="color-picker"
-					:modelValue="displayValue"
+					:model-value="displayValue"
 					:disabled="isReadOnly"
+					:title="displayTitle"
+					:show-alpha="getArgument('showAlpha')"
 					@focus="setFocus"
 					@blur="onBlur"
 					@update:modelValue="valueChanged"
-					:title="displayTitle"
-					:show-alpha="getArgument('showAlpha')"
 				/>
 				<n8n-input
 					v-model="tempValue"
 					:size="inputSize"
 					type="text"
 					:disabled="isReadOnly"
+					:title="displayTitle"
 					@update:modelValue="valueChanged"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
-					:title="displayTitle"
 				/>
 			</div>
 
 			<el-date-picker
 				v-else-if="parameter.type === 'dateTime'"
-				v-model="tempValue"
 				ref="inputField"
+				v-model="tempValue"
 				type="datetime"
-				valueFormat="YYYY-MM-DDTHH:mm:ss"
+				value-format="YYYY-MM-DDTHH:mm:ss"
 				:size="inputSize"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				:placeholder="
@@ -232,47 +232,47 @@
 				v-else-if="parameter.type === 'number'"
 				ref="inputField"
 				:size="inputSize"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:controls="false"
 				:max="getArgument('maxValue')"
 				:min="getArgument('minValue')"
 				:precision="getArgument('numberPrecision')"
 				:disabled="isReadOnly"
 				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:title="displayTitle"
+				:placeholder="parameter.placeholder"
 				@update:modelValue="onUpdateTextInput"
 				@focus="setFocus"
 				@blur="onBlur"
 				@keydown.stop
-				:title="displayTitle"
-				:placeholder="parameter.placeholder"
 			/>
 
-			<credentials-select
+			<CredentialsSelect
 				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
 				ref="inputField"
 				:parameter="parameter"
 				:node="node"
-				:activeCredentialType="activeCredentialType"
-				:inputSize="inputSize"
-				:displayValue="displayValue"
-				:isReadOnly="isReadOnly"
-				:displayTitle="displayTitle"
+				:active-credential-type="activeCredentialType"
+				:input-size="inputSize"
+				:display-value="displayValue"
+				:is-read-only="isReadOnly"
+				:display-title="displayTitle"
 				@credentialSelected="credentialSelected"
 				@update:modelValue="valueChanged"
 				@setFocus="setFocus"
 				@onBlur="onBlur"
 			>
 				<template #issues-and-options>
-					<parameter-issues :issues="getIssues" />
+					<ParameterIssues :issues="getIssues" />
 				</template>
-			</credentials-select>
+			</CredentialsSelect>
 
 			<n8n-select
 				v-else-if="parameter.type === 'options'"
 				ref="inputField"
 				:size="inputSize"
 				filterable
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:placeholder="
 					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
 				"
@@ -286,8 +286,8 @@
 			>
 				<n8n-option
 					v-for="option in parameterOptions"
-					:value="option.value"
 					:key="option.value"
+					:value="option.value"
 					:label="getOptionsOptionDisplayName(option)"
 				>
 					<div class="list-option">
@@ -312,7 +312,7 @@
 				:size="inputSize"
 				filterable
 				multiple
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:loading="remoteParameterOptionsLoading"
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"
@@ -324,8 +324,8 @@
 			>
 				<n8n-option
 					v-for="option in parameterOptions"
-					:value="option.value"
 					:key="option.value"
+					:value="option.value"
 					:label="getOptionsOptionDisplayName(option)"
 				>
 					<div class="list-option">
@@ -343,22 +343,22 @@
 			<n8n-input
 				v-else-if="parameter.type === 'boolean' && droppable"
 				:size="inputSize"
-				:modelValue="JSON.stringify(displayValue)"
+				:model-value="JSON.stringify(displayValue)"
 				:disabled="isReadOnly"
 				:title="displayTitle"
 			/>
 			<el-switch
 				v-else-if="parameter.type === 'boolean'"
-				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
 				ref="inputField"
+				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
 				active-color="#13ce66"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:disabled="isReadOnly"
 				@update:modelValue="valueChanged"
 			/>
 		</div>
 
-		<parameter-issues
+		<ParameterIssues
 			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
 			:issues="getIssues"
 		/>
@@ -428,8 +428,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
 export default defineComponent({
-	name: 'parameter-input',
-	mixins: [workflowHelpers, debounceHelper],
+	name: 'ParameterInput',
 	components: {
 		CodeNodeEditor,
 		HtmlEditor,
@@ -441,6 +440,7 @@ export default defineComponent({
 		ResourceLocator,
 		TextEdit,
 	},
+	mixins: [workflowHelpers, debounceHelper],
 	props: {
 		additionalExpressionData: {
 			type: Object as PropType<IDataObject>,
@@ -877,6 +877,58 @@ export default defineComponent({
 			return this.getStringInputType === 'password' || this.isForCredential;
 		},
 	},
+	async updated() {
+		await this.$nextTick();
+		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
+
+		if (remoteParameterOptions.length > 0) {
+			void this.externalHooks.run('parameterInput.updated', { remoteParameterOptions });
+		}
+	},
+	mounted() {
+		this.eventBus.on('optionSelected', this.optionSelected);
+
+		this.tempValue = this.displayValue as string;
+		if (this.node !== null) {
+			this.nodeName = this.node.name;
+		}
+
+		if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
+			this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
+		}
+
+		if (
+			this.parameter.type === 'color' &&
+			this.getArgument('showAlpha') === true &&
+			this.displayValue !== null &&
+			this.displayValue.toString().charAt(0) !== '#'
+		) {
+			const newValue = this.rgbaToHex(this.displayValue as string);
+			if (newValue !== null) {
+				this.tempValue = newValue;
+			}
+		}
+
+		if (this.hasRemoteMethod && this.node !== null) {
+			// Make sure to load the parameter options
+			// directly and whenever the credentials change
+			this.$watch(
+				() => this.node?.credentials,
+				() => {
+					void this.loadRemoteParameterOptions();
+				},
+				{ immediate: true },
+			);
+		}
+
+		void this.externalHooks.run('parameterInput.mount', {
+			parameter: this.parameter,
+			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
+		});
+	},
+	beforeUnmount() {
+		this.eventBus.off('optionSelected', this.optionSelected);
+	},
 	methods: {
 		isRemoteParameterOption(option: INodePropertyOptions) {
 			return this.remoteParameterOptionsKeys.includes(option.name);
@@ -1221,58 +1273,6 @@ export default defineComponent({
 			}
 		},
 	},
-	async updated() {
-		await this.$nextTick();
-		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
-
-		if (remoteParameterOptions.length > 0) {
-			void this.externalHooks.run('parameterInput.updated', { remoteParameterOptions });
-		}
-	},
-	mounted() {
-		this.eventBus.on('optionSelected', this.optionSelected);
-
-		this.tempValue = this.displayValue as string;
-		if (this.node !== null) {
-			this.nodeName = this.node.name;
-		}
-
-		if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
-			this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
-		}
-
-		if (
-			this.parameter.type === 'color' &&
-			this.getArgument('showAlpha') === true &&
-			this.displayValue !== null &&
-			this.displayValue.toString().charAt(0) !== '#'
-		) {
-			const newValue = this.rgbaToHex(this.displayValue as string);
-			if (newValue !== null) {
-				this.tempValue = newValue;
-			}
-		}
-
-		if (this.hasRemoteMethod && this.node !== null) {
-			// Make sure to load the parameter options
-			// directly and whenever the credentials change
-			this.$watch(
-				() => this.node?.credentials,
-				() => {
-					void this.loadRemoteParameterOptions();
-				},
-				{ immediate: true },
-			);
-		}
-
-		void this.externalHooks.run('parameterInput.mount', {
-			parameter: this.parameter,
-			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
-		});
-	},
-	beforeUnmount() {
-		this.eventBus.off('optionSelected', this.optionSelected);
-	},
 });
 </script>