n8n/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue

<template>
	<ExpandableInputBase :modelValue="modelValue" :placeholder="placeholder">
		<input
			class="el-input__inner"
			:value="modelValue"
			:placeholder="placeholder"
			:maxlength="maxlength"
			@input="onInput"
			@keydown.enter="onEnter"
			@keydown.esc="onEscape"
			ref="input"
			size="4"
			v-on-click-outside="onClickOutside"
		/>
	</ExpandableInputBase>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ExpandableInputBase from './ExpandableInputBase.vue';
import type { PropType } from 'vue';
import type { EventBus } from 'n8n-design-system';

export default defineComponent({
	name: 'ExpandableInputEdit',
	components: { ExpandableInputBase },
	props: {
		modelValue: {},
		placeholder: {},
		maxlength: {},
		autofocus: {},
		eventBus: {
			type: Object as PropType<EventBus>,
		},
	},
	mounted() {
		// autofocus on input element is not reliable
		if (this.autofocus && this.$refs.input) {
			this.focus();
		}
		this.eventBus?.on('focus', this.focus);
	},
	beforeUnmount() {
		this.eventBus?.off('focus', this.focus);
	},
	methods: {
		focus() {
			if (this.$refs.input) {
				(this.$refs.input as HTMLInputElement).focus();
			}
		},
		onInput() {
			this.$emit('update:modelValue', (this.$refs.input as HTMLInputElement).value);
		},
		onEnter() {
			this.$emit('enter', (this.$refs.input as HTMLInputElement).value);
		},
		onClickOutside(e: Event) {
			if (e.type === 'click') {
				this.$emit('blur', (this.$refs.input as HTMLInputElement).value);
			}
		},
		onEscape() {
			this.$emit('esc');
		},
	},
});
</script>