65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
<template>
|
|
<div class="comment-input">
|
|
<emoji-bar @add-emoji="addEmoji" />
|
|
<textarea
|
|
:value="text"
|
|
data-cy="comment-textarea"
|
|
class="comment-input__textarea"
|
|
placeholder="Kommentar erfassen"
|
|
v-auto-grow
|
|
@input="updateValue($event.target.value)"
|
|
/>
|
|
<a
|
|
data-cy="submit-comment"
|
|
class="button button--primary"
|
|
@click="submit()"
|
|
>Kommentar teilen</a
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import EmojiBar from '@/components/ui/EmojiBar.vue';
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
components: {
|
|
EmojiBar,
|
|
},
|
|
data() {
|
|
return {
|
|
text: this.value,
|
|
};
|
|
},
|
|
methods: {
|
|
updateValue(text) {
|
|
this.text = text;
|
|
},
|
|
addEmoji(emoji) {
|
|
this.text = this.text + emoji;
|
|
},
|
|
submit() {
|
|
this.$emit('submit', this.text);
|
|
this.text = '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.comment-input {
|
|
@include form-with-border;
|
|
|
|
&__textarea {
|
|
@include borderless-textarea;
|
|
}
|
|
}
|
|
</style>
|