josedario87
d13d804b77
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-* * danger ahora usa var(--coffee-uva) para métricas de café Uva * info ahora usa var(--coffee-mojado) para métricas de café Mojado * warning ahora usa var(--coffee-oreado) para métricas de café Oreado * Usar color-mix para crear transparencias en bordes (30%) - TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva) * Total Uva Ingresada, Pagada y en Depósito con color dinámico * Bordes con 30% de opacidad usando color-mix - TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva) - TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones * 6 cards con diferentes tonalidades de verde usando color-mix * Mezclas con white para crear variaciones más claras * Una mezcla con cyan (#20d5ff) para variación distintiva Los valores numéricos de cada tipo de café ahora reflejan dinámicamente los colores del tema seleccionado, mejorando la identidad visual.
41 lines
1.6 KiB
Vue
41 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all"
|
|
:class="[variantClasses, props.class]"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">{{ label }}</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ value }}</span>
|
|
<span v-if="unit" class="text-sm font-bold opacity-70">{{ unit }}</span>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
label: string
|
|
value: string | number
|
|
unit?: string
|
|
variant?: 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'default'
|
|
})
|
|
|
|
const variantClasses = computed(() => {
|
|
const variants = {
|
|
default: 'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]',
|
|
primary: 'bg-[var(--brand-surface)] border-[var(--brand-primary-strong)] text-[var(--brand-primary)]',
|
|
success: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--brand-success),transparent_70%)] text-[var(--brand-success)]',
|
|
danger: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-uva),transparent_70%)] text-[var(--coffee-uva)]',
|
|
warning: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-oreado),transparent_70%)] text-[var(--coffee-oreado)]',
|
|
info: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-mojado),transparent_70%)] text-[var(--coffee-mojado)]'
|
|
}
|
|
return variants[props.variant]
|
|
})
|
|
</script> |