mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-16 01:24:05 -08:00
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
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="onClickOutside"
|
|
/>
|
|
</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);
|
|
},
|
|
onClickOutside(e: Event) {
|
|
if (e.type === 'click') {
|
|
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>
|