Fix: Agregar placeholder dinamico y mejorar reactividad de archivos
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m9s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m9s
- Placeholder muestra cantidad de archivos seleccionados - Usar filter() en removeFile para mantener reactividad - Remover console.logs de debug
This commit is contained in:
@@ -112,7 +112,7 @@
|
||||
<div class="flex-1">
|
||||
<UTextarea
|
||||
v-model="message"
|
||||
placeholder="Escribe un mensaje..."
|
||||
:placeholder="inputPlaceholder"
|
||||
:rows="1"
|
||||
autoresize
|
||||
:maxrows="5"
|
||||
@@ -201,6 +201,14 @@ const hasContent = computed(() => {
|
||||
return message.value.trim().length > 0 || selectedFiles.value.length > 0
|
||||
})
|
||||
|
||||
const inputPlaceholder = computed(() => {
|
||||
if (selectedFiles.value.length > 0) {
|
||||
const count = selectedFiles.value.length
|
||||
return `${count} archivo${count > 1 ? 's' : ''} seleccionado${count > 1 ? 's' : ''} - Presiona enviar`
|
||||
}
|
||||
return 'Escribe un mensaje...'
|
||||
})
|
||||
|
||||
// Attachment menu
|
||||
const attachmentMenuItems = [
|
||||
[{
|
||||
@@ -227,23 +235,19 @@ const attachmentMenuItems = [
|
||||
|
||||
// Methods
|
||||
const handleFileSelect = (event: Event, type: string) => {
|
||||
console.log('handleFileSelect called', type, event)
|
||||
const input = event.target as HTMLInputElement
|
||||
console.log('input.files:', input.files)
|
||||
if (input.files) {
|
||||
if (input.files && input.files.length > 0) {
|
||||
addFiles(Array.from(input.files))
|
||||
input.value = '' // Reset input
|
||||
}
|
||||
}
|
||||
|
||||
const addFiles = (files: File[]) => {
|
||||
console.log('addFiles called with:', files)
|
||||
// Limit to 10 files
|
||||
const remaining = 10 - selectedFiles.value.length
|
||||
const toAdd = files.slice(0, remaining)
|
||||
// Use spread operator to trigger reactivity
|
||||
selectedFiles.value = [...selectedFiles.value, ...toAdd]
|
||||
console.log('selectedFiles after adding:', selectedFiles.value)
|
||||
}
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
@@ -254,7 +258,8 @@ const handleDrop = (event: DragEvent) => {
|
||||
}
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
selectedFiles.value.splice(index, 1)
|
||||
// Use filter to maintain reactivity
|
||||
selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index)
|
||||
}
|
||||
|
||||
const handleSend = () => {
|
||||
|
||||
Reference in New Issue
Block a user