jordium-gantt-vue3 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +204 -44
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,79 +1,239 @@
1
1
  # jordium-gantt-vue3
2
2
 
3
- A modern, flexible, and feature-rich Gantt chart component library for Vue 3, designed for project management, task scheduling, milestone tracking, and timeline visualization. This plugin provides a highly interactive and customizable Gantt chart experience, supporting drag-and-drop, theme switching, and internationalization.
3
+ [![npm version](https://badge.fury.io/js/jordium-gantt-vue3.svg)](https://www.npmjs.com/package/jordium-gantt-vue3)
4
+ [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
5
+ [![Vue 3](https://img.shields.io/badge/vue-3.x-green.svg)](https://vuejs.org/)
6
+ [![TypeScript](https://img.shields.io/badge/typescript-5.x-blue.svg)](https://www.typescriptlang.org/)
4
7
 
5
- ## Installation
8
+ A modern, flexible, and feature-rich Gantt chart component library for Vue 3. Built with TypeScript, supporting drag-and-drop, milestone management, task relationships, theme switching, and internationalization.
6
9
 
7
- Install via npm or yarn:
10
+ ## ✨ Features
11
+
12
+ - 🎯 **Task Management**: Create, edit, delete tasks with full CRUD support
13
+ - 📅 **Timeline View**: Interactive timeline with drag-and-drop functionality
14
+ - 🎯 **Milestone Support**: Add and manage project milestones
15
+ - 🔗 **Task Dependencies**: Support for predecessor relationships
16
+ - 🎨 **Dual Themes**: Light and dark mode with smooth transitions
17
+ - 🌍 **Internationalization**: Built-in Chinese and English support
18
+ - 📱 **Responsive Design**: Works seamlessly on desktop and mobile
19
+ - 🔧 **Highly Customizable**: Rich API and event system
20
+ - 💎 **TypeScript Support**: Full type safety for better development experience
21
+
22
+ ## 📦 Installation
8
23
 
9
24
  ```bash
10
25
  npm install jordium-gantt-vue3
11
26
  # or
12
27
  yarn add jordium-gantt-vue3
28
+ # or
29
+ pnpm add jordium-gantt-vue3
13
30
  ```
14
31
 
15
- ## API Reference
32
+ ## 🚀 Quick Start
16
33
 
17
- ### Props
34
+ ```vue
35
+ <script setup lang="ts">
36
+ import { ref } from 'vue'
37
+ import { GanttChart } from 'jordium-gantt-vue3'
38
+ import 'jordium-gantt-vue3/dist/style.css'
18
39
 
19
- | Prop | Type | Description |
20
- | ----------------- | ------------------- | ------------------------------------------- |
21
- | tasks | Task[] | Task data array |
22
- | milestones | Task[] | Milestone data array |
23
- | startDate | Date \| string | Timeline start date |
24
- | endDate | Date \| string | Timeline end date |
25
- | useDefaultDrawer | boolean | Use built-in task drawer |
26
- | onTaskDoubleClick | function | Task double-click handler |
27
- | onTaskDelete | function | Task delete handler |
28
- | onMilestoneSave | function | Milestone save handler |
29
- | editComponent | Component | Custom task edit component |
40
+ const tasks = ref([
41
+ {
42
+ id: 1,
43
+ name: 'Project Kickoff',
44
+ startDate: '2025-01-01',
45
+ endDate: '2025-01-15',
46
+ progress: 80,
47
+ assignee: 'John Doe'
48
+ },
49
+ {
50
+ id: 2,
51
+ name: 'Requirements Analysis',
52
+ startDate: '2025-01-16',
53
+ endDate: '2025-01-30',
54
+ progress: 60,
55
+ assignee: 'Jane Smith',
56
+ predecessor: '1'
57
+ }
58
+ ])
59
+
60
+ const milestones = ref([
61
+ {
62
+ id: 1,
63
+ name: 'Project Milestone',
64
+ startDate: '2025-01-31',
65
+ type: 'milestone'
66
+ }
67
+ ])
68
+ </script>
69
+
70
+ <template>
71
+ <div style="height: 600px;">
72
+ <GanttChart
73
+ :tasks="tasks"
74
+ :milestones="milestones"
75
+ />
76
+ </div>
77
+ </template>
78
+ ```
79
+
80
+ ## 🔧 API Reference
81
+
82
+ ### Core Properties
83
+
84
+ | Property | Type | Default | Description |
85
+ |----------|------|---------|-------------|
86
+ | `tasks` | `Task[]` | `[]` | Task data array |
87
+ | `milestones` | `Task[]` | `[]` | Milestone data array |
88
+ | `useDefaultDrawer` | `boolean` | `true` | Use default edit drawer |
89
+ | `showToolbar` | `boolean` | `true` | Show toolbar |
90
+ | `toolbarConfig` | `ToolbarConfig` | `{}` | Toolbar configuration |
91
+ | `localeMessages` | `object` | - | Custom locale messages |
92
+
93
+ ### Event Callbacks
94
+
95
+ | Property | Type | Description |
96
+ |----------|------|-------------|
97
+ | `onTaskDoubleClick` | `(task: Task) => void` | Task double-click callback |
98
+ | `onTaskDelete` | `(task: Task) => void` | Task delete callback |
99
+ | `onTaskUpdate` | `(task: Task) => void` | Task update callback |
100
+ | `onTaskAdd` | `(task: Task) => void` | Task add callback |
101
+ | `onMilestoneSave` | `(milestone: Task) => void` | Milestone save callback |
102
+ | `onMilestoneDelete` | `(id: number) => void` | Milestone delete callback |
103
+ | `onLanguageChange` | `(lang: string) => void` | Language change callback |
104
+ | `onThemeChange` | `(isDark: boolean) => void` | Theme change callback |
30
105
 
31
106
  ### Events
32
107
 
33
- | Event | Payload | Description |
34
- | ----------------------- | --------------- | ------------------------------------------ |
35
- | @taskbar-drag-end | Task | Task bar drag end |
36
- | @taskbar-resize-end | Task | Task bar resize end |
37
- | @milestone-drag-end | Milestone | Milestone drag end |
38
- | @task-updated | Task | Task updated |
39
- | @task-added | Task | Task added |
40
- | @task-deleted | Task | Task deleted |
41
- | @milestone-data-updated | Milestone | Milestone updated |
42
- | @milestone-deleted | number | Milestone deleted (id) |
108
+ | Event | Parameters | Description |
109
+ |-------|------------|-------------|
110
+ | `@taskbar-drag-end` | `task: Task` | Task drag ended |
111
+ | `@taskbar-resize-end` | `task: Task` | Task resize ended |
112
+ | `@milestone-drag-end` | `milestone: Task` | Milestone drag ended |
113
+
114
+ ### Task Data Structure
115
+
116
+ ```typescript
117
+ interface Task {
118
+ id: number // Unique task identifier
119
+ name: string // Task name
120
+ predecessor?: string // Predecessor task ID
121
+ assignee?: string // Assignee
122
+ startDate?: string // Start date (YYYY-MM-DD format)
123
+ endDate?: string // End date (YYYY-MM-DD format)
124
+ progress?: number // Completion progress (0-100)
125
+ estimatedHours?: number // Estimated hours
126
+ actualHours?: number // Actual hours
127
+ parentId?: number // Parent task ID
128
+ children?: Task[] // Child tasks array (supports nested structure)
129
+ collapsed?: boolean // Whether child tasks are collapsed
130
+ isParent?: boolean // Whether it's a parent task
131
+ type?: string // Task type (task/story/bug/milestone)
132
+ description?: string // Task description
133
+ icon?: string // Task icon
134
+ level?: number // Task level
135
+ }
136
+ ```
137
+ ### TimelineConfig Data Structure
138
+
139
+ ```typescript
140
+ interface TimelineConfig {
141
+ startDate: Date // Timeline start date
142
+ endDate: Date // Timeline end date
143
+ zoomLevel: number // Zoom level
144
+ }
145
+ ```
43
146
 
44
- ### Theming
147
+ ### ToolbarConfig Data Structure
148
+
149
+ ```typescript
150
+ interface ToolbarConfig {
151
+ showAddTask?: boolean // Show add task button
152
+ showAddMilestone?: boolean // Show add milestone button
153
+ showTodayLocate?: boolean // Show locate today button
154
+ showExportCsv?: boolean // Show export CSV button
155
+ showExportPdf?: boolean // Show export PDF button
156
+ showLanguage?: boolean // Show language switch button
157
+ showTheme?: boolean // Show theme switch button
158
+ showFullscreen?: boolean // Show fullscreen toggle button
159
+ }
160
+ ```
45
161
 
46
- - Supports light/dark mode via `isDark` prop or global theme variables.
47
- - Customize colors via CSS variables in `theme-variables.css`.
162
+ ## 🎨 Advanced Usage
48
163
 
49
- ## Usage Example
164
+ ### Custom Event Handling
50
165
 
51
166
  ```vue
52
- <script setup>
167
+ <script setup lang="ts">
53
168
  import { GanttChart } from 'jordium-gantt-vue3'
54
- import 'jordium-gantt-vue3/dist/style.css'
55
169
 
56
- const tasks = [
57
- // ...your task data
58
- ]
170
+ const handleTaskDoubleClick = (task) => {
171
+ console.log('Task clicked:', task)
172
+ // Open custom edit dialog
173
+ }
174
+
175
+ const handleTaskDragEnd = (task) => {
176
+ console.log('Task moved:', task)
177
+ // Save changes to backend
178
+ }
179
+
180
+ const toolbarConfig = {
181
+ showAddTask: true,
182
+ showTheme: true,
183
+ showLanguage: true,
184
+ showExportCsv: true
185
+ }
186
+ </script>
187
+
188
+ <template>
189
+ <GanttChart
190
+ :tasks="tasks"
191
+ :milestones="milestones"
192
+ :toolbar-config="toolbarConfig"
193
+ :on-task-double-click="handleTaskDoubleClick"
194
+ @taskbar-drag-end="handleTaskDragEnd"
195
+ />
196
+ </template>
197
+ ```
198
+
199
+ ### Internationalization
200
+
201
+ ```vue
202
+ <script setup>
203
+ const customLocaleMessages = {
204
+ taskName: 'Custom Task Name',
205
+ addTask: 'Custom Add Task'
206
+ }
59
207
  </script>
60
208
 
61
209
  <template>
62
- <GanttChart :tasks="tasks" />
210
+ <GanttChart
211
+ :locale-messages="customLocaleMessages"
212
+ :on-language-change="(lang) => console.log('Language:', lang)"
213
+ />
63
214
  </template>
64
215
  ```
65
216
 
66
- ## Source Code & Demo
217
+ ## 📚 Documentation & Resources
218
+
219
+ - 📖 **Full Documentation**: [GitHub Repository](https://github.com/nelson820125/jordium-gantt-vue3)
220
+ - 📋 **Changelog**: [CHANGELOG.md](https://github.com/nelson820125/jordium-gantt-vue3/blob/main/CHANGELOG.md)
221
+ - 🐛 **Issues**: [GitHub Issues](https://github.com/nelson820125/jordium-gantt-vue3/issues)
222
+
223
+ ## 🤝 Contributing
224
+
225
+ We welcome contributions! Please see our [Contributing Guide](https://github.com/nelson820125/jordium-gantt-vue3/blob/main/CONTRIBUTING.md) for details.
226
+
227
+ ## 📄 License
67
228
 
68
- - Full source code and demo examples are available on GitHub:
69
- - [jordium-gantt-vue3 GitHub Repository](https://github.com/nelson820125/jordium-gantt-vue3)
229
+ [MIT License](https://opensource.org/licenses/MIT) © 2025 Jordium.com
70
230
 
71
- ## Author & Contribution
231
+ ## 📧 Support
72
232
 
73
- - Author: Jordium.com (Email: nelson820125@gmail.com / ning.li@jordium.com)
74
- - Feel free to submit issues or pull requests on GitHub.
75
- - Contributions, suggestions, and feedback are welcome!
233
+ - 📬 **GitHub Issues**: [Report bugs or request features](https://github.com/nelson820125/jordium-gantt-vue3/issues)
234
+ - 📧 **Email**: ning.li@jordium.com / nelson820125@gmail.com
235
+ - 💼 **Business**: For enterprise support and custom development
76
236
 
77
237
  ---
78
238
 
79
- For more details, see the [README](./README.md).
239
+ > 💡 If this project helps you, please give it a ⭐ Star on GitHub!
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jordium-gantt-vue3",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "A modern, flexible, and feature-rich Gantt chart component library for Vue 3",
5
5
  "main": "dist/jordium-gantt-vue3.cjs.js",
6
6
  "module": "dist/jordium-gantt-vue3.es.js",
@@ -36,6 +36,6 @@
36
36
  "vue": "^3.5.13"
37
37
  },
38
38
  "keywords": ["vue", "vue3", "typescript", "es6", "vite", "gantt", "GanttChart", "component", "library", "modern", "project management", "task management", "timeline", "scheduling"],
39
- "author": "ning.li@jordium,.com",
39
+ "author": "ning.li@jordium.com",
40
40
  "license": "MIT"
41
41
  }