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

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

<script lang="ts">
import Vue from "vue";
import ExpandableInputBase from "./ExpandableInputBase.vue";

export default Vue.extend({
	components: { ExpandableInputBase },
	name: "ExpandableInputEdit",
	props: ['value', 'placeholder', 'maxlength', 'autofocus', 'eventBus'],
	mounted() {
		// autofocus on input element is not reliable
		if (this.$props.autofocus && this.$refs.input) {
			this.focus();
		}

		if (this.$props.eventBus) {
			this.$props.eventBus.$on('focus', () => {
				this.focus();
			});
		}
	},
	methods: {
		focus() {
			if (this.$refs.input) {
				(this.$refs.input as HTMLInputElement).focus();
			}
		},
		onInput() {
			this.$emit('input', (this.$refs.input as HTMLInputElement).value);
		},
		onEnter() {
			this.$emit('enter', (this.$refs.input as HTMLInputElement).value);
		},
		onBlur() {
			this.$emit('blur', (this.$refs.input as HTMLInputElement).value);
		},
		onEscape() {
			this.$emit('esc');
		},
	},
});
</script>

<style lang="scss" scoped>
.el-input input.el-input__inner {
	border: 1px solid $--color-primary !important;
}
</style>