@bimetal/gantt-vue-components

The default Vue 3 Gantt chart for BIMETAL — a thin binding over the canonical @bimetal/gantt-headless controller. Every interaction decision (drag snapping, dependency validity, scale/ticks, input parsing, the critical-path diagnostic) lives in the controller; this package owns only the DOM: hit-testing pointer drags, normalising keys, and rendering.

Features

• Real drag — move a bar, resize either edge, drag the progress dot, or pull a dependency link from the connector. No nudge buttons.
• Keyboard a11y — focus a bar, ←/→ to move, Shift+←/→ to resize, Enter to edit, Delete to remove.
• Zoom hour → quarter; a controller-derived date header (pxPerUnit/ticks come from the controller — the renderer never defines its own scale).
• Milestones (a point in time — kind: 'milestone' + at, rendered as diamonds), a today marker, and dependency arrows (FS/SS/FF/SF + lag) with a critical-path highlight.
• Task grid (Vorgang/Start/Ende/Tage/%) with hierarchy, collapse, indent and row reorder; a task dialog (title/start/end/%), undo toast, light/dark.

Event-sourced: the whole chart is one aggregate, every change is an event, and undo + full history come for free.

Usage

<script setup lang="ts">
import { Gantt } from '@bimetal/gantt-vue-components';
import { createGanttStore } from '@bimetal/gantt-data';
import '@bimetal/gantt-vue-components/styles';

const store = createGanttStore();
// …seed the chart…
</script>

<template>
  <Gantt :store="store" chart-id="chart-1" />
</template>

License

Apache-2.0