josedario87
dd57ee1fb3
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s
Implementación completa de vista detallada para muestras: Componentes nuevos: - ResumenMuestraExpandido: Vista no compacta con valores claramente visibles - ModalResumenExpandido: Modal reutilizable para mostrar vista expandida Integraciones: - Calculadora SCAA: Usa vista expandida en paso 3 - Página de sesión: * Long press en móvil (500ms) en header del accordion * Botón expandir en desktop cerca del título * Vibración háptica en móvil al activar Características: - Grid responsivo de intensidades afectivas - Puntajes destacados (Σ y SCAA) con colores según valor - Visualización clara de penalizaciones - Diseño adaptativo móvil/desktop
73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<UModal
|
|
v-model:open="isOpen"
|
|
:ui="{
|
|
overlay: 'modal-overlay',
|
|
content: 'cata-bg cata-outline-box max-w-3xl',
|
|
header: 'cata-bg',
|
|
body: 'cata-bg p-0',
|
|
footer: 'cata-bg',
|
|
title: 'cata-text'
|
|
}"
|
|
>
|
|
<!-- Trigger (slot por defecto) -->
|
|
<slot />
|
|
|
|
<!-- Título personalizado -->
|
|
<template #title>
|
|
<span class="cata-text">Resumen Detallado</span>
|
|
</template>
|
|
|
|
<!-- Contenido del modal -->
|
|
<template #body>
|
|
<CataResumenMuestraExpandido :muestra="muestra" />
|
|
</template>
|
|
|
|
<!-- Footer con botón -->
|
|
<template #footer>
|
|
<div class="flex justify-end w-full">
|
|
<button
|
|
class="cata-button px-4 py-2"
|
|
@click="cerrar"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Muestra } from '~/types/catacion'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
muestra: Muestra
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
|
|
// Estado del modal
|
|
const isOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value),
|
|
})
|
|
|
|
const cerrar = () => {
|
|
isOpen.value = false
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.modal-overlay {
|
|
background-color: var(--cata-bg) !important;
|
|
opacity: 0.95 !important;
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
</style>
|