josedario87
63c7043664
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Implementa funcionalidad de copia en tres secciones del Informe: 📋 Funcionalidades agregadas: 1. Lista de Ingresos - Copiar Texto: Formato WhatsApp con emojis y legible - Copiar JSON: Formato estructurado para sistemas 2. Top 10 Clientes - Copiar Texto: Ranking formateado con métricas - Copiar JSON: Array de objetos con datos completos 3. Serie Temporal Acumulada - Copiar Texto: Evolución temporal con emojis - Copiar JSON: Datos completos para análisis ✨ Características: - Botones con iconos (i-lucide-copy y i-lucide-code) - Disabled cuando no hay datos disponibles - Alertas de confirmación al copiar - Formato texto optimizado para WhatsApp - Incluye metadata: rango de fechas y timestamp Uso: - Copiar Texto → Compartir en WhatsApp/Telegram - Copiar JSON → Integración con otros sistemas
41 lines
1.3 KiB
Vue
41 lines
1.3 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-green-600/30 text-green-400',
|
|
danger: 'bg-[var(--brand-surface)] border-red-600/30 text-red-400',
|
|
warning: 'bg-[var(--brand-surface)] border-yellow-600/30 text-yellow-400',
|
|
info: 'bg-[var(--brand-surface)] border-cyan-600/30 text-cyan-400'
|
|
}
|
|
return variants[props.variant]
|
|
})
|
|
</script> |