alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.4.6 - bugfix

Browse Source
This commit is contained in:
LINING-PC\lining
2025-12-09 13:39:48 +08:00
parent 7d81f44778
commit 39367a7810
12 changed files with 600 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README-EN.md
+107 -8
View File
@@ -23,7 +23,8 @@
<p align="center">
<a href="./README.md">中文</a> |
<a href="./README-EN.md">English</a>
<a href="./README-EN.md">English</a> |
<a href="./CHANGELOG.md">Release Notes</a>
</p>
<p align="center">A modern Vue 3 Gantt chart component library providing complete solutions for project management and task scheduling</p>
@@ -188,8 +189,9 @@ npm run dev
| `useDefaultDrawer` | `boolean` | `true` | Whether to use the built-in task edit drawer (TaskDrawer) |
| `useDefaultMilestoneDialog` | `boolean` | `true` | Whether to use the built-in milestone edit dialog (MilestoneDialog) |
| `autoSortByStartDate` | `boolean` | `false` | Whether to automatically sort tasks by start date |
| `allowDragAndResize` | `boolean` | `true` | Whether to allow dragging and resizing tasks/milestones |
| `enableTaskRowMove` | `boolean` | `false` | Whether to alloww dragging and dropping TaskRow
| `allowDragAndResize` | `boolean` | `true` | Whether to allow dragging and resizing tasks/milestones |
| `enableTaskRowMove` | `boolean` | `false` | Whether to allow dragging and dropping TaskRow |
| `assigneeOptions` | `Array<{ key?: string \| number; value: string \| number; label: string }>` | `[]` | Assignee dropdown options in task edit drawer |
#### Configuration Object Props
@@ -251,7 +253,7 @@ For complete event documentation, see:
```vue
<template>
<div style="height: 600px;">
<GanttChart :tasks="tasks" />
<GanttChart :tasks="tasks" :assignee-options="assigneeOptions" />
</div>
</template>
@@ -269,6 +271,12 @@ const tasks = ref([
progress: 100,
},
])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
</script>
```
@@ -277,7 +285,7 @@ const tasks = ref([
```vue
<template>
<div style="height: 600px;">
<GanttChart :tasks="tasks" :milestones="milestones" />
<GanttChart :tasks="tasks" :milestones="milestones" :assignee-options="assigneeOptions" />
</div>
</template>
@@ -305,6 +313,12 @@ const milestones = ref([
icon: 'diamond',
},
])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
</script>
```
@@ -325,6 +339,7 @@ const milestones = ref([
:tasks="tasks"
:milestones="milestones"
:show-toolbar="false"
:assignee-options="assigneeOptions"
@task-added="handleTaskAdded"
@milestone-saved="handleMilestoneSaved"
/>
@@ -340,6 +355,12 @@ import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
const tasks = ref([])
const milestones = ref([])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
const addTask = () => {
const newTask = {
id: Date.now(),
@@ -387,7 +408,8 @@ Tasks are the core elements of the Gantt chart. The component provides complete
| `endDate` | `string` | - | - | End date, format: 'YYYY-MM-DD' or 'YYYY-MM-DD HH:mm' |
| `progress` | `number` | - | `0` | Task progress, range 0-100 |
| `predecessor` | `number[]` | - | - | Array of predecessor task IDs, standard format: `[1, 2, 3]`<br/>**Compatible formats**: Also supports string `'1,2,3'` or string array `['1', '2', '3']`, component will auto-parse |
| `assignee` | `string` | - | - | Task assignee |
| `assignee` | `string` | - | - | Task assignee, used as the value binding for the assignee dropdown menu |
| `assigneeName` | `string` | - | - | Task assignee name, automatically obtained from the label in the bound `assigneeOptions` dataset; for custom display, you can set it in the `task-added` callback event of GanttChart |
| `avatar` | `string` | - | - | Avatar URL of task assignee |
| `estimatedHours` | `number` | - | - | Estimated hours |
| `actualHours` | `number` | - | - | Actual hours |
@@ -426,7 +448,8 @@ Tasks are the core elements of the Gantt chart. The component provides complete
| `taskBarConfig` | `TaskBarConfig` | `{}` | Task bar style configuration, see [TaskBarConfig Configuration](#taskbarconfig-configuration) |
| `taskListConfig` | `TaskListConfig` | `undefined` | Task list configuration, see [TaskListConfig Configuration](#tasklistconfig-configuration) |
| `autoSortByStartDate` | `boolean` | `false` | Whether to automatically sort tasks by start date |
| `enableTaskRowMove` | `boolean` | `false` | Whether to alloww dragging and dropping TaskRow
| `enableTaskRowMove` | `boolean` | `false` | Whether to alloww dragging and dropping TaskRow |
| `assigneeOptions` | `Array<{ key?: string \| number; value: string \| number; label: string }>` | `[]` | Assignee dropdown options in task edit drawer |
**Configuration Notes**:
@@ -467,6 +490,7 @@ Tasks are the core elements of the Gantt chart. The component provides complete
<div style="height: 600px;">
<GanttChart
:tasks="tasks"
:assignee-options="assigneeOptions"
@add-task="handleAddTask"
@task-added="handleTaskAdded"
@task-updated="handleTaskUpdated"
@@ -504,6 +528,12 @@ const tasks = ref<Task[]>([
},
])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
// Toolbar "Add Task" button click event
const handleAddTask = () => {
console.log('Preparing to add task...')
@@ -556,6 +586,7 @@ Tasks can configure predecessors via the `predecessor` field, and the component
<template>
<GanttChart
:tasks="tasks"
:assignee-options="assigneeOptions"
@predecessor-added="handlePredecessorAdded"
@successor-added="handleSuccessorAdded"
/>
@@ -618,6 +649,12 @@ const tasks = ref<Task[]>([
},
])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
// Triggered when adding predecessor via context menu
const handlePredecessorAdded = (event: { targetTask: Task; newTask: Task }) => {
console.log(`Task [${event.targetTask.name}] added predecessor [${event.newTask.name}]`)
@@ -671,6 +708,7 @@ Suitable for scenarios requiring complete custom control bar:
:show-toolbar="false"
:use-default-drawer="true"
:use-default-milestone-dialog="true"
:assignee-options="assigneeOptions"
@add-task="handleAddTask"
@add-milestone="handleAddMilestone"
@task-added="handleTaskAdded"
@@ -686,6 +724,12 @@ import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
const tasks = ref([])
const milestones = ref([])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
// Custom button triggers event (component will respond and open built-in editor)
const triggerAddTask = () => {
// Directly trigger component's add-task event
@@ -729,6 +773,7 @@ Allow users to adjust task hierarchy and order by dragging TaskRow:
<GanttChart
:tasks="tasks"
:enable-task-row-move="true"
:assignee-options="assigneeOptions"
@task-row-moved="handleTaskRowMoved"
/>
</div>
@@ -765,6 +810,12 @@ const tasks = ref<Task[]>([
},
])
const assigneeOptions = ref([
{ value: 'alice', label: 'Alice' },
{ value: 'bob', label: 'Bob' },
{ value: 'charlie', label: 'Charlie' },
])
// Task row drag completed event (optional)
const handleTaskRowMoved = async (payload: {
draggedTask: Task
@@ -1248,6 +1299,54 @@ const handleDelete = () => {
This section details the configuration options and extension capabilities of the GanttChart component, including Component Configuration, Theme & Internationalization, and Custom Extensions.
### Task Type Definition
Task type (`type` field) is used to distinguish different types of tasks, and the component internally executes different logic based on the type.
#### Built-in Task Types
| Type | Description | Default |
| ------- | ------------- | ------- |
| `story` | User Story | - |
| `task` | Regular Task | ✅ |
| `bug` | Bug/Issue | - |
#### Feature Differences
Different task types have different functional characteristics in the component:
| Feature | story | task | bug |
| -------------------- | ----- | ---- | --- |
| Can be parent task | ✅ | ✅ | ❌ |
| Can be predecessor | ❌ | ✅ | ❌ |
| Timer support | ❌ | ✅ | ✅ |
| Auto parent task | ✅ | ❌ | ❌ |
| Special delete hint | ✅ | ❌ | ❌ |
#### Important Notes
> ⚠️ **Important**
>
> 1. Task type values are used for internal component logic, **do not modify** these enum values arbitrarily
> 2. When customizing TaskDrawer, you must maintain these three enum values: `story`, `task`, `bug`
> 3. For additional business labels, use custom property fields such as: `customType`, `category`, `label`, etc.
**Example: Using Custom Labels**
```typescript
const tasks = ref([
{
id: 1,
name: 'Requirements Analysis',
type: 'task', // Keep built-in component type
customType: 'requirement', // Custom business type
category: 'analysis', // Custom category
startDate: '2025-01-01',
endDate: '2025-01-10',
},
])
```
### Component Configuration
#### ToolbarConfig (Toolbar Configuration)
@@ -2199,5 +2298,5 @@ View the complete [Contributors list](./CONTRIBUTORS.md)。
---
<p align="center">
<sub>If this project helps you, please give it a ⭐️ to support it!</sub>
If this project helps you, please give it a ⭐️ to support it!
</p>