sper mejoras de UI
This commit is contained in:
@@ -10,6 +10,17 @@
|
||||
|
||||
<template #right>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
@click="mostrarConfiguracion = !mostrarConfiguracion"
|
||||
size="xs"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
icon="i-lucide-palette"
|
||||
:class="{ 'bg-[#c08040]/20 text-[#c08040]': mostrarConfiguracion }"
|
||||
>
|
||||
Configurar estilos
|
||||
</UButton>
|
||||
<div class="w-px h-4 bg-[var(--brand-border)]" />
|
||||
<USwitch
|
||||
v-model="pageSections.heatmap"
|
||||
size="xs"
|
||||
@@ -113,6 +124,188 @@
|
||||
</UCard>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Configuración de Estilos -->
|
||||
<UModal v-model:open="mostrarConfiguracion">
|
||||
<UCard class="brand-card">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-palette" class="size-5 text-[#c08040]" />
|
||||
<h3 id="modal-title" class="text-base font-semibold text-[var(--brand-text)]">Configuración de Estilos</h3>
|
||||
</div>
|
||||
<UButton
|
||||
@click="resetearConfiguracion"
|
||||
size="xs"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
>
|
||||
Resetear
|
||||
</UButton>
|
||||
</div>
|
||||
<p id="modal-description" class="sr-only">
|
||||
Personaliza los colores, dimensiones y opacidad de las gráficas
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Sección: Colores de Cosechas -->
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
||||
<UIcon name="i-lucide-droplets" class="size-4" />
|
||||
Colores de Cosechas (por año)
|
||||
</h4>
|
||||
<p class="text-xs text-[var(--brand-text-muted)] mb-3">
|
||||
Los colores son fijos para cada cosecha, sin importar el orden en que se seleccionen
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div
|
||||
v-for="(cosecha, index) in cosechasDisponibles"
|
||||
:key="`color-${cosecha.id}`"
|
||||
class="flex items-center gap-3 p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]"
|
||||
>
|
||||
<label class="text-xs text-[var(--brand-text-muted)] flex-1">
|
||||
{{ cosecha.label }}
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
v-model="estilosGraficas.coloresCosechas[index]"
|
||||
class="w-10 h-8 rounded cursor-pointer border border-[var(--brand-border)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección: Dimensiones -->
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
||||
<UIcon name="i-lucide-ruler" class="size-4" />
|
||||
Dimensiones
|
||||
</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Ancho de celda (Heatmap) -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs text-[var(--brand-text-muted)]">
|
||||
Ancho de celda (Heatmap)
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="estilosGraficas.anchoCelda"
|
||||
min="40"
|
||||
max="150"
|
||||
step="10"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
||||
{{ estilosGraficas.anchoCelda }}px
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alto de celda (Heatmap) -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs text-[var(--brand-text-muted)]">
|
||||
Alto de celda (Heatmap)
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="estilosGraficas.altoCelda"
|
||||
min="4"
|
||||
max="20"
|
||||
step="1"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
||||
{{ estilosGraficas.altoCelda }}px
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ancho máximo de barra -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs text-[var(--brand-text-muted)]">
|
||||
Ancho máximo de barra
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="estilosGraficas.anchoMaxBarra"
|
||||
min="150"
|
||||
max="500"
|
||||
step="25"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
||||
{{ estilosGraficas.anchoMaxBarra }}px
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alto de barra -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs text-[var(--brand-text-muted)]">
|
||||
Alto de barra
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="estilosGraficas.altoBarra"
|
||||
min="6"
|
||||
max="24"
|
||||
step="2"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
||||
{{ estilosGraficas.altoBarra }}px
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección: Opacidad -->
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3 flex items-center gap-2">
|
||||
<UIcon name="i-lucide-sun-dim" class="size-4" />
|
||||
Opacidad
|
||||
</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs text-[var(--brand-text-muted)]">
|
||||
Opacidad de celdas vacías (Heatmap)
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="estilosGraficas.opacidadVacias"
|
||||
min="0"
|
||||
max="0.3"
|
||||
step="0.05"
|
||||
class="flex-1"
|
||||
/>
|
||||
<span class="text-xs text-[var(--brand-text)] w-12 text-right">
|
||||
{{ (estilosGraficas.opacidadVacias * 100).toFixed(0) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton
|
||||
@click="mostrarConfiguracion = false"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
>
|
||||
Cerrar
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -133,6 +326,62 @@ const pageSections = ref({
|
||||
porTipo: false
|
||||
})
|
||||
|
||||
// Estado del modal de configuración
|
||||
const mostrarConfiguracion = ref(false)
|
||||
|
||||
// Configuración de estilos por defecto
|
||||
const estilosGraficasDefault = {
|
||||
coloresCosechas: [
|
||||
'#c08040', // Cosecha 20-21
|
||||
'#d99a56', // Cosecha 21-22
|
||||
'#8b6f47', // Cosecha 22-23
|
||||
'#a0826e', // Cosecha 23-24
|
||||
'#b89968', // Cosecha 24-25
|
||||
'#f0c07c' // Cosecha 25-26
|
||||
],
|
||||
anchoCelda: 80,
|
||||
altoCelda: 6,
|
||||
anchoMaxBarra: 300,
|
||||
altoBarra: 8,
|
||||
opacidadVacias: 0.05
|
||||
}
|
||||
|
||||
// Cargar configuración desde cookies
|
||||
function cargarConfiguracionDesdeCookies() {
|
||||
const cookie = useCookie('estilos-graficas', {
|
||||
maxAge: 60 * 60 * 24 * 365, // 1 año
|
||||
sameSite: 'lax'
|
||||
})
|
||||
|
||||
if (cookie.value) {
|
||||
try {
|
||||
return { ...estilosGraficasDefault, ...cookie.value }
|
||||
} catch (e) {
|
||||
console.error('Error al cargar configuración desde cookies:', e)
|
||||
return { ...estilosGraficasDefault }
|
||||
}
|
||||
}
|
||||
|
||||
return { ...estilosGraficasDefault }
|
||||
}
|
||||
|
||||
// Configuración reactiva de estilos
|
||||
const estilosGraficas = ref(cargarConfiguracionDesdeCookies())
|
||||
|
||||
// Guardar en cookies cuando cambie la configuración
|
||||
watch(estilosGraficas, (newValue) => {
|
||||
const cookie = useCookie('estilos-graficas', {
|
||||
maxAge: 60 * 60 * 24 * 365, // 1 año
|
||||
sameSite: 'lax'
|
||||
})
|
||||
cookie.value = newValue
|
||||
}, { deep: true })
|
||||
|
||||
// Función para resetear la configuración
|
||||
function resetearConfiguracion() {
|
||||
estilosGraficas.value = { ...estilosGraficasDefault }
|
||||
}
|
||||
|
||||
// Definición de cosechas disponibles
|
||||
const cosechasDisponibles = [
|
||||
{ id: 'cosecha-20-21', label: 'Cosecha 20-21', periodo: 'Sep 2020 - Sep 2021', fechaInicio: '2020-09-25', fechaFin: '2021-09-24' },
|
||||
@@ -156,6 +405,7 @@ const ingresos = computed(() => ingresosStore.allRecords as IngresoRecord[])
|
||||
const loading = computed(() => ingresosStore.isLoading)
|
||||
const error = computed(() => ingresosStore.error)
|
||||
|
||||
// Exportar cosechas para los componentes
|
||||
// Exportar cosechas y configuración para los componentes
|
||||
provide('cosechasDisponibles', cosechasDisponibles)
|
||||
provide('estilosGraficas', estilosGraficas)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user