refactor: Refactor input components to composition API (no-changelog) (…

…n8n-io#9744)

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

@@ -21,72 +21,49 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useToast } from '@/composables/useToast';
-import { i18n } from '@/plugins/i18n';
+<script setup lang="ts">
 import { useClipboard } from '@/composables/useClipboard';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
 
-export default defineComponent({
-	props: {
-		label: {
-			type: String,
-		},
-		hint: {
-			type: String,
-		},
-		value: {
-			type: String,
-		},
-		copyButtonText: {
-			type: String,
-			default(): string {
-				return i18n.baseText('generic.copy');
-			},
-		},
-		toastTitle: {
-			type: String,
-			default(): string {
-				return i18n.baseText('generic.copiedToClipboard');
-			},
-		},
-		toastMessage: {
-			type: String,
-		},
-		collapse: {
-			type: Boolean,
-			default: false,
-		},
-		size: {
-			type: String,
-			default: 'large',
-		},
-		redactValue: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const clipboard = useClipboard();
-
-		return {
-			clipboard,
-			...useToast(),
-		};
-	},
-	methods: {
-		copy(): void {
-			this.$emit('copy');
-			void this.clipboard.copy(this.value ?? '');
+type Props = {
+	label?: string;
+	hint?: string;
+	value?: string;
+	copyButtonText: string;
+	toastTitle?: string;
+	toastMessage?: string;
+	size?: 'medium' | 'large';
+	collapse?: boolean;
+	redactValue?: boolean;
+};
 
-			this.showMessage({
-				title: this.toastTitle,
-				message: this.toastMessage,
-				type: 'success',
-			});
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	value: '',
+	placeholder: '',
+	label: '',
+	hint: '',
+	size: 'medium',
+	copyButtonText: useI18n().baseText('generic.copy'),
+	toastTitle: useI18n().baseText('generic.copiedToClipboard'),
 });
+const emit = defineEmits<{
+	(event: 'copy'): void;
+}>();
+
+const clipboard = useClipboard();
+const { showMessage } = useToast();
+
+function copy() {
+	emit('copy');
+	void clipboard.copy(props.value ?? '');
+
+	showMessage({
+		title: props.toastTitle,
+		message: props.toastMessage,
+		type: 'success',
+	});
+}
 </script>
 
 <style lang="scss" module>

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -144,7 +144,12 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 
-import type { ICredentialType, INodeProperties, INodeTypeDescription } from 'n8n-workflow';
+import type {
+	ICredentialDataDecryptedObject,
+	ICredentialType,
+	INodeProperties,
+	INodeTypeDescription,
+} from 'n8n-workflow';
 import { getAppNameFromCredType, isCommunityPackageName } from '@/utils/nodeTypesUtils';
 
 import Banner from '../Banner.vue';
@@ -161,7 +166,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import type { ICredentialsResponse } from '@/Interface';
+import type { ICredentialsResponse, IUpdateInformation } from '@/Interface';
 import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
 import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
@@ -190,7 +195,10 @@ export default defineComponent({
 			type: Array as PropType<string[]>,
 			default: () => [],
 		},
-		credentialData: {},
+		credentialData: {
+			type: Object as PropType<ICredentialDataDecryptedObject>,
+			required: true,
+		},
 		credentialId: {
 			type: String,
 			default: '',
@@ -351,7 +359,7 @@ export default defineComponent({
 		getCredentialOptions(type: string): ICredentialsResponse[] {
 			return this.credentialsStore.allUsableCredentialsByType[type];
 		},
-		onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
+		onDataChange(event: IUpdateInformation): void {
 			this.$emit('update', event);
 		},
 		onDocumentationUrlClick(): void {

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -12,52 +12,52 @@
 			<ParameterInputExpanded
 				v-else
 				:parameter="parameter"
-				:value="credentialData[parameter.name]"
+				:value="credentialDataValues[parameter.name]"
 				:documentation-url="documentationUrl"
 				:show-validation-warnings="showValidationWarnings"
-				:label="label"
+				:label="{ size: 'medium' }"
 				event-source="credentials"
 				@update="valueChanged"
 			/>
 		</form>
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { IParameterLabel } from 'n8n-workflow';
+<script setup lang="ts">
+import type {
+	ICredentialDataDecryptedObject,
+	INodeProperties,
+	NodeParameterValueType,
+} from 'n8n-workflow';
 import type { IUpdateInformation } from '@/Interface';
 import ParameterInputExpanded from '../ParameterInputExpanded.vue';
+import { computed } from 'vue';
 
-export default defineComponent({
-	name: 'CredentialsInput',
-	components: {
-		ParameterInputExpanded,
-	},
-	props: [
-		'credentialProperties',
-		'credentialData', // ICredentialsDecryptedResponse
-		'documentationUrl',
-		'showValidationWarnings',
-	],
-	data(): { label: IParameterLabel } {
-		return {
-			label: {
-				size: 'medium',
-			},
-		};
-	},
-	methods: {
-		valueChanged(parameterData: IUpdateInformation) {
-			const name = parameterData.name.split('.').pop();
+type Props = {
+	credentialProperties: INodeProperties[];
+	credentialData: ICredentialDataDecryptedObject;
+	documentationUrl: string;
+	showValidationWarnings?: boolean;
+};
 
-			this.$emit('update', {
-				name,
-				value: parameterData.value,
-			});
-		},
-	},
-});
+const props = defineProps<Props>();
+
+const credentialDataValues = computed(
+	() => props.credentialData as Record<string, NodeParameterValueType>,
+);
+
+const emit = defineEmits<{
+	(event: 'update', value: IUpdateInformation): void;
+}>();
+
+function valueChanged(parameterData: IUpdateInformation) {
+	const name = parameterData.name.split('.').pop() ?? parameterData.name;
+
+	emit('update', {
+		name,
+		value: parameterData.value,
+	});
+}
 </script>
 
 <style lang="scss" module>

packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue

@@ -5,23 +5,24 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-	name: 'ExpandableInputBase',
-	props: ['modelValue', 'placeholder', 'staticSize'],
-	computed: {
-		hiddenValue() {
-			let value = (this.modelValue as string).replace(/\s/g, '.'); // force input to expand on space chars
-			if (!value) {
-				// @ts-ignore
-				value = this.placeholder;
-			}
+type Props = {
+	modelValue: string;
+	placeholder?: string;
+	staticSize?: boolean;
+};
 
-			return `${value}`; // adjust for padding
-		},
-	},
+const props = withDefaults(defineProps<Props>(), { staticSize: false, placeholder: '' });
+
+const hiddenValue = computed(() => {
+	let value = props.modelValue.replace(/\s/g, '.'); // force input to expand on space chars
+	if (!value) {
+		value = props.placeholder;
+	}
+
+	return `${value}`; // adjust for padding
 });
 </script>