DEV Community

Nelson Li
Nelson Li

Posted on

Jordium GanttChart v1.7.1: Making a Gantt Component Truly Controllable in Vue 3

#webdev #programming #vue #gantt

Jordium GanttChart is a Vue 3–based Gantt chart component designed for project management, APS scheduling, and complex admin systems.

With v1.7.1, the focus shifts from “feature completeness” to something more important in real systems:

How do you design a complex UI component that is fully controllable by the host application?

What Changed in v1.7.1

  • Core Gantt behaviors are now externally controllable
  • Clear separation between state (Props) and actions (Expose API)
  • Context menus refactored into declarative Vue components
  • Internal structure simplified for long-term maintainability
  • Dependency upgrades and security fixes

1. State-Driven Control via Props

The GanttChart component now supports the following props:

locale
theme
timeScale
fullscreen
expandAll
Enter fullscreen mode Exit fullscreen mode

This allows the host application to manage:

  • Global language switching
  • Light / dark theme control
  • Time scale changes (hour / day / month / year)
  • Fullscreen toggling
  • Expand / collapse of task hierarchies

👉 The Gantt chart no longer owns these states internally—it reacts to the system state instead.

2. Action-Driven Control via defineExpose

For interaction-heavy scenarios, v1.7.1 exposes an imperative API using defineExpose.

Internationalization

setLocale()
currentLocale
Enter fullscreen mode Exit fullscreen mode

Theme & Time Scale

setTheme()
currentTheme

setTimeScale()
zoomIn()
zoomOut()
currentScale
Enter fullscreen mode Exit fullscreen mode

Fullscreen Control

toggleFullscreen()
enterFullscreen()
exitFullscreen()
isFullscreen
Enter fullscreen mode Exit fullscreen mode

Expand / Collapse Tasks

toggleExpandAll()
expandAll()
collapseAll()
isExpandAll
Enter fullscreen mode Exit fullscreen mode

Scroll & Focus Helpers

scrollToToday()
scrollToTask(taskId)
scrollToDate(date)
Enter fullscreen mode Exit fullscreen mode

Design principle:

Props control state.
Exposed methods control behavior.

This keeps APIs predictable and composable.

3. Declarative Context Menus

Task list and task bar context menus are now implemented as Vue components instead of configuration objects:

  • TaskListContextMenu
  • TaskBarContextMenu

Features include:

  • Full slot support for menu customization

  • Simple enable / disable flags:

    • enable-task-list-context-menu
    • enable-task-bar-context-menu

This improves:

  • Readability
  • Reusability
  • Integration with business logic

4. Internal Refactoring for Maintainability

The TaskList module was split into smaller subcomponents:

  • Reduced file size
  • Clearer responsibilities
  • Better foundation for future features like virtual scrolling

These changes don’t alter behavior, but they matter for long-term evolution.

5. Dependency & Security Updates

Upgraded and patched:

  • happy-dom
  • jspdf
  • vitest

Why This Release Matters

In real-world enterprise systems:

  • UI state is often managed globally
  • Complex components must be orchestrated, not isolated
  • Declarative + imperative APIs need a clear boundary

Jordium GanttChart v1.7.1 formalizes that boundary.

Project Links

🔗 GitHub:
https://github.com/nelson820125/jordium-gantt-vue3

🔗 Demo:
https://nelson820125.github.io/jordium-gantt-vue3/

Video

👉 YouTube

Final Thoughts

This release marks a transition from a “feature-rich widget” to a system-ready component.

If you’re building:

  • Project management tools
  • Manufacturing or APS scheduling systems
  • Complex Vue 3 dashboards

I’d love to hear how you’re designing controllable UI components in your own projects.

Top comments (0)