90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
interface Emits {
|
|
(e: 'send', message: string): void
|
|
}
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const message = ref('')
|
|
const isSubmitting = ref(false)
|
|
|
|
const handleSubmit = () => {
|
|
if (message.value.trim() === '') return
|
|
|
|
emit('send', message.value)
|
|
message.value = ''
|
|
}
|
|
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
|
e.preventDefault()
|
|
handleSubmit()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="message-composer mt-3">
|
|
<form @submit.prevent="handleSubmit">
|
|
|
|
<div class="d-flex align-items-stretch gap-2">
|
|
<textarea
|
|
v-model="message"
|
|
class="form-control chat-textarea m-0"
|
|
placeholder="Scrivi aggiornamento o domanda"
|
|
:disabled="isSubmitting"
|
|
@keydown="handleKeydown"
|
|
></textarea>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary btn-square flex-shrink-0"
|
|
:disabled="isSubmitting || message.trim() === ''"
|
|
title="Invia"
|
|
>
|
|
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
<BIIcon v-else color="white" name="it-arrow-right" size="sm"/>
|
|
</button>
|
|
</div>
|
|
|
|
<small class="text-muted d-block mt-2">
|
|
`Ctrl` + `Invio` per inviare.
|
|
</small>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.message-composer {
|
|
border-top: 1px solid #d9e3ee;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.chat-textarea {
|
|
resize: none !important;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
overflow-y: auto;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.chat-textarea:focus {
|
|
border-color: #06c;
|
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
|
|
}
|
|
|
|
.btn-square {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|