Spaces:
Running
Running
File size: 2,944 Bytes
7e66729 a95192f 7e66729 a95192f 7e66729 a95192f 7e66729 a95192f fdb1821 a95192f fdb1821 a95192f fdb1821 a95192f fdb1821 a95192f 7e66729 a95192f 7e66729 a95192f 7e66729 fdb1821 7e66729 2cb2b62 7e66729 a95192f 2cb2b62 a95192f 7e66729 a95192f 7e66729 a95192f 2cb2b62 a95192f 2cb2b62 a95192f 2cb2b62 a95192f 2cb2b62 a95192f 2cb2b62 a95192f 7e66729 2a54d13 97fe9d3 2a54d13 7e66729 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <template>
<v-card class="composer-card mt-3" rounded="xl" elevation="0">
<v-card-text class="pa-4">
<v-textarea
:model-value="input"
label="¿Cómo te sientes hoy?"
placeholder="Ej: hoy me siento ansioso pero con ganas de algo diferente..."
auto-grow
rows="2"
variant="outlined"
color="primary"
hide-details
:disabled="loading"
@update:model-value="$emit('update:input', $event)"
@keydown.enter.exact.prevent="$emit('analyze')"
/>
<div class="composer-row mt-3">
<v-select
:model-value="estrategia"
:items="strategyItems"
item-title="title"
item-value="value"
label="Estrategia"
variant="outlined"
color="primary"
density="comfortable"
hide-details
class="strategy-select"
:disabled="loading"
@update:model-value="$emit('update:estrategia', $event)"
/>
<v-btn
color="primary"
variant="flat"
:loading="loading"
:disabled="loading"
prepend-icon="mdi-brain"
rounded="lg"
class="analyze-btn"
@click="$emit('analyze')"
>
Analizar
</v-btn>
</div>
</v-card-text>
</v-card>
</template>
<script setup>
const strategyItems = [
{ title: "Básica", value: "v1" },
{ title: "Avanzada", value: "v2" },
{ title: "Experimental", value: "v3" },
];
defineProps({
input: { type: String, default: "" },
loading: { type: Boolean, default: false },
estrategia: { type: String, default: "v1" },
});
defineEmits(["update:input", "analyze", "update:estrategia"]);
</script>
<style scoped>
.composer-card {
border: 1.5px solid var(--vs-border);
background: var(--vs-panel);
backdrop-filter: blur(var(--vs-glass-blur)) saturate(120%);
-webkit-backdrop-filter: blur(var(--vs-glass-blur)) saturate(120%);
box-shadow: var(--vs-card-shadow);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.composer-card:focus-within {
border-color: rgba(102, 126, 234, 0.45);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}
.composer-row {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
.strategy-select { max-width: 160px; }
.analyze-btn {
font-weight: 600;
transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.analyze-btn:hover:not(:disabled) {
box-shadow: 0 6px 18px rgba(102, 126, 234, 0.35);
transform: translateY(-1px);
}
:deep(.v-field__input) {
color: var(--vs-text) !important;
font-size: 0.94rem;
}
@media (max-width: 960px) {
.composer-card {
flex-shrink: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
}
}
</style>
|