vue-gantt-absolute

Librería de diagrama de Gantt libre (MIT) para Vue 3 composition API

Estado: MVP v0.2 — pensada para crecer con la comunidad.

📖 Documentación y playground: https://cristianabsoluto.com/componentes/vue-gantt-absolute

Instalación

npm install vue-gantt-absolute

Uso

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart, type GanttTask } from 'vue-gantt-absolute'
import 'vue-gantt-absolute/style.css'

const tasks = ref<GanttTask[]>([
  { id: 1, name: 'Investigación', start: '2026-07-01', end: '2026-07-04' },
  { id: 2, name: 'Diseño', start: '2026-07-03', end: '2026-07-08' }
])
</script>

<template>
  <GanttChart :tasks="tasks" @update:tasks="tasks = $event" />
</template>

Props

| Prop | Tipo | Default | Descripción | |-------------------------|-------------------------------|----------|-------------------------------------------| | tasks | GanttTask[] | — (requerido) | Lista de tareas (ver campos abajo) | | dayWidth | number | 44 | Ancho en px de cada columna de día | | rowHeight | number | 40 | Alto en px de cada fila | | leftWidth | number | 400 | Ancho inicial del panel izquierdo (redimensionable arrastrando el borde, y colapsable con el botón ‹/›) | | startDateColumnWidth | number | 110 | Ancho de la columna "Start Date" | | progressColumnWidth | number | 90 | Ancho de la columna "Progress" | | durationColumnWidth | number | 90 | Ancho de la columna "Duration" | | height | string | 'auto' | Alto total visible del componente. 'auto' ajusta al contenido; pasa un valor fijo (ej. '400px') para forzar scroll interno | | holidays | string[] | [] | Fechas (YYYY-MM-DD) a sombrear como feriado, además de sábados/domingos | | labels | GanttLabels | {} | Textos de los headers del panel izquierdo, para i18n: { taskName?, startDate?, progress?, duration? } | | showPlanned | boolean | true | Muestra/oculta la franja de baseline (plannedStart/plannedEnd) y la línea "Planned" del tooltip | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | 'auto' respeta prefers-color-scheme del sistema; 'light'/'dark' fuerza el tema |

Campos de GanttTask

| Campo | Tipo | Descripción | |-----------------|--------------------------|----------------------------------------------------| | id | string \| number | Identificador único | | name | string | Nombre mostrado en el panel izquierdo y la barra | | start | string (YYYY-MM-DD) | Fecha de inicio | | end | string (YYYY-MM-DD) | Fecha de fin (igual a start para un milestone) | | dependsOn? | (string \| number)[] | Ids de tareas predecesoras (dibuja flechas) | | parentId? | string \| number | Id de la tarea padre (jerarquía colapsable) | | progress? | number (0–100) | Porcentaje de avance mostrado dentro de la barra y de la columna "Progress" | | milestone? | boolean | Si es true, se dibuja como rombo en vez de barra | | plannedStart? | string (YYYY-MM-DD) | Fecha de inicio planificada (baseline); requiere showPlanned | | plannedEnd? | string (YYYY-MM-DD) | Fecha de fin planificada (baseline); requiere showPlanned | | color? | string (CSS color) | Color de la barra/rombo de esta tarea; si se omite usa el acento por defecto (--vga-accent) |

Eventos

• update:tasks — se emite al soltar una barra arrastrada o redimensionada, con las tareas actualizadas.
• update:leftWidth — se emite al soltar el handle de resize del panel izquierdo, con el nuevo ancho en px (útil para v-model:left-width).

Qué incluye este MVP

• Grilla de días calculada automáticamente según el rango de tareas, con fila de meses arriba
• Barras posicionadas por fecha, con color personalizable por tarea (color)
• Arrastre horizontal de barras (mover fechas) con PointerEvent + setPointerCapture
• Redimensionar barras arrastrando el borde izquierdo o derecho (cambia start/end respetando 1 día mínimo)
• Scroll vertical sincronizado entre lista de tareas y timeline
• Flechas de dependencia entre tareas (dependsOn), con overlay SVG que se recalcula al arrastrar o redimensionar
• Jerarquía padre/hijo colapsable (parentId) con indentado y toggle ▼/▶
• Línea vertical marcando el día de hoy
• Sombreado de fines de semana y feriados (holidays)
• Panel izquierdo con columnas Task Name / Start Date / Progress / Duration, redimensionable (drag) y colapsable
• Barra de progreso interna (progress), también visible como relleno en la columna "Progress"
• Baseline: franja de "planificado vs. actual" (plannedStart/plannedEnd), togglable con showPlanned
• Hitos/milestones (milestone: true) dibujados como rombo, arrastrables
• Tooltip al pasar el mouse por una barra o hito, con fechas actuales y planificadas
• Dark mode automático (prefers-color-scheme) o forzado vía prop theme
• Labels configurables (i18n) vía prop labels

Qué falta (próximas versiones)

• Niveles de zoom (semana/mes)
• Edición inline del nombre de tarea
• Auto-cálculo de fechas del padre en base a sus hijos (roll-up)

Desarrollo local

npm install
npm run dev      # levanta el playground en http://localhost:5173
npm run build    # genera dist/ como librería (ESM + UMD + tipos)

Licencia

MIT — libre para usar, modificar y distribuir. Si te resulta útil, las donaciones son bienvenidas: paypal.me/cristianabsoluto.