1.0.0 - init

.vscode/settings.json

@@ -9,7 +9,6 @@
   "vetur.validation.style": false,
   "files.exclude": {
     "**/node_modules": true,
-    "**/dist": true,
     "**/.git": true
   }
 }

README.en.md

@@ -0,0 +1,79 @@
+# jordium-gantt-vue3
+
+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.
+
+## Installation
+
+Install via npm or yarn:
+
+```bash
+npm install jordium-gantt-vue3
+# or
+yarn add jordium-gantt-vue3
+```
+
+## API Reference
+
+### Props
+
+| Prop              | Type                | Description                                 |
+| ----------------- | ------------------- | ------------------------------------------- |
+| tasks             | Task[]              | Task data array                             |
+| milestones        | Task[]              | Milestone data array                        |
+| startDate         | Date \| string      | Timeline start date                         |
+| endDate           | Date \| string      | Timeline end date                           |
+| useDefaultDrawer  | boolean             | Use built-in task drawer                    |
+| onTaskDoubleClick | function            | Task double-click handler                   |
+| onTaskDelete      | function            | Task delete handler                         |
+| onMilestoneSave   | function            | Milestone save handler                      |
+| editComponent     | Component           | Custom task edit component                  |
+
+### Events
+
+| Event                   | Payload         | Description                                |
+| ----------------------- | --------------- | ------------------------------------------ |
+| @taskbar-drag-end       | Task            | Task bar drag end                          |
+| @taskbar-resize-end     | Task            | Task bar resize end                        |
+| @milestone-drag-end     | Milestone       | Milestone drag end                         |
+| @task-updated           | Task            | Task updated                               |
+| @task-added             | Task            | Task added                                 |
+| @task-deleted           | Task            | Task deleted                               |
+| @milestone-data-updated | Milestone       | Milestone updated                          |
+| @milestone-deleted      | number          | Milestone deleted (id)                     |
+
+### Theming
+
+- Supports light/dark mode via `isDark` prop or global theme variables.
+- Customize colors via CSS variables in `theme-variables.css`.
+
+## Usage Example
+
+```vue
+<script setup>
+import { GanttChart } from 'jordium-gantt-vue3'
+import 'jordium-gantt-vue3/dist/style.css'
+
+const tasks = [
+  // ...your task data
+]
+</script>
+
+<template>
+  <GanttChart :tasks="tasks" />
+</template>
+```
+
+## Source Code & Demo
+
+- Full source code and demo examples are available on GitHub:
+  - [jordium-gantt-vue3 GitHub Repository](https://github.com/nelson820125/jordium-gantt-vue3)
+
+## Author & Contribution
+
+- Author: Jordium.com (Email: nelson820125@gmail.com / ning.li@jordium.com)
+- Feel free to submit issues or pull requests on GitHub.
+- Contributions, suggestions, and feedback are welcome!
+
+---
+
+For more details, see the [README](./README.md).

demo/App.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
-import GanttChart from '../src/components/GanttChart.vue'
+//import GanttChart from '../src/components/GanttChart.vue'
-import TaskDrawer from '../src/components/TaskDrawer.vue'
+//import TaskDrawer from '../src/components/TaskDrawer.vue'
-import MilestoneDialog from '../src/components/MilestoneDialog.vue'
+//import MilestoneDialog from '../src/components/MilestoneDialog.vue'
 import demoData from './data.json'
 import packageInfo from '../package.json'
 // 导入主题变量
-import '../src/styles/theme-variables.css'
+//import '../src/styles/theme-variables.css'
 import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
-import { useMessage } from '../src/composables/useMessage'
+//import { useMessage } from '../src/composables/useMessage'
-import type { Task } from '../src/models/Task'
+//import type { Task } from '../src/models/Task'
+import { GanttChart, TaskDrawer, MilestoneDialog, useMessage, Task } from 'jordium-gantt-vue3'
+import 'jordium-gantt-vue3/dist/jordium-gantt-vue3.css'
 
 const { showMessage } = useMessage()
 
@@ -113,14 +115,14 @@ const handleMilestoneDelete = async (milestoneId: number) => {
     window.dispatchEvent(
       new CustomEvent('milestone-deleted', {
         detail: { milestoneId },
-      }),
+      })
     )
 
     // 触发强制更新事件，确保Timeline重新渲染
     window.dispatchEvent(
       new CustomEvent('milestone-data-changed', {
         detail: { milestones: milestones.value },
-      }),
+      })
     )
   }
 
@@ -252,7 +254,7 @@ const handleTaskAdd = (newTask: Task) => {
     const maxId = Math.max(
       ...tasks.value.map(t => t.id || 0),
       ...milestones.value.map(m => m.id || 0),
-      0,
+      0
     )
     newTask.id = maxId + 1
   }
@@ -383,7 +385,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
       `开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
       `结束: ${oldTask.endDate} → ${newTask.endDate}`,
     'info',
-    { closable: true },
+    { closable: true }
   )
 }
 function handleMilestoneDragEnd(newMilestone) {
@@ -393,7 +395,7 @@ function handleMilestoneDragEnd(newMilestone) {
     `里程碑【${newMilestone.name}】\n` +
       `开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
     'info',
-    { closable: true },
+    { closable: true }
   )
 }
 

demo/version-history.json

@@ -70,7 +70,7 @@
     "notes": ["按钮样式统一管理"]
   },
   {
-    "version": "beta 1.0.0",
+    "version": "1.0.0",
     "date": "2025-06-29",
     "notes": [
       "GanttChart接口增强",

index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jordium Gantt Vue3</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/main.ts"></script>
-  </body>
-</html>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "jordium-gantt-vue3",
-  "version": "0.9.0-alpha",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "jordium-gantt-vue3",
-      "version": "0.9.0-alpha",
+      "version": "1.0.0",
       "dependencies": {
         "date-fns": "^4.1.0",
         "html2canvas": "^1.4.1",

package.json

@@ -1,8 +1,49 @@
 {
   "name": "jordium-gantt-vue3",
-  "private": true,
+  "version": "1.0.0",
-  "version": "1.0.0-beta",
   "type": "module",
+  "main": "dist/jordium-gantt-vue3.cjs.js",
+  "module": "dist/jordium-gantt-vue3.es.js",
+  "types": "dist/jordium-gantt-vue3.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nelson820125/jordium-gantt-vue3"
+  },
+  "keywords": [
+    "gantt",
+    "vue",
+    "vue3",
+    "vue-component",
+    "vue-library",
+    "typescript",
+    "es6",
+    "javascript",
+    "vite",
+    "gantt-chart",
+    "task-scheduling",
+    "project-management",
+    "timeline",
+    "drag-and-drop",
+    "vue3-component",
+    "vue3-gantt",
+    "vue3-gantt-chart",
+    "vue3-project-management",
+    "vue3-timeline",
+    "vue3-task-scheduling",
+    "vue3-drag-and-drop",
+    "vue3-gantt-chart-component",
+    "vue3-gantt-chart-library",
+    "vue3-gantt-chart-plugin",
+    "vue3-gantt-chart-tool",
+    "vue3-gantt-chart-ui",
+    "project-management-tool"
+  ],
+  "description": "A Vue 3 Gantt chart component for project management, task scheduling, and timeline visualization. Built with TypeScript and Vite.",
+  "author": "Jordium.com (Email: lining820125@163.com/nelson820125@gmail.com/ning.li@jordium.com)",
   "scripts": {
     "dev": "vite",
     "dev:demo": "vite",

src/components/Timeline.vue

@@ -768,7 +768,9 @@ const handleTimelineScroll = (event: Event) => {
 
   // 设置滚动状态
   isScrolling.value = true
+  if (target && 'classList' in target && typeof target.classList.add === 'function') {
     target.classList.add('scrolling')
+  }
 
   // 清除之前的定时器
   if (scrollTimeout) {
@@ -778,7 +780,9 @@ const handleTimelineScroll = (event: Event) => {
   // 500ms后移除滚动状态
   scrollTimeout = setTimeout(() => {
     isScrolling.value = false
+    if (target && 'classList' in target && typeof target.classList.remove === 'function') {
       target.classList.remove('scrolling')
+    }
   }, 500)
 }
 

src/index.ts

@@ -5,8 +5,10 @@ export { default as Timeline } from './components/Timeline.vue'
 export { default as TaskBar } from './components/TaskBar.vue'
 export { default as TaskDrawer } from './components/TaskDrawer.vue'
 export { default as MilestonePoint } from './components/MilestonePoint.vue'
+export { default as MilestoneDialog } from './components/MilestoneDialog.vue'
 export { default as TaskRow } from './components/TaskRow.vue'
 export type { Task } from './models/classes/Task.ts' // 导出Task类型
+export { useMessage } from './composables/useMessage.ts' // 导出useMessage组合式函数
 
 // 导出样式文件
 import './styles/theme-variables.css'

vite.config.lib.ts

@@ -9,6 +9,7 @@ export default defineConfig({
       entry: './src/index.ts',
       name: 'JordiumGanttVue3',
       fileName: format => `jordium-gantt-vue3.${format}.js`,
+      formats: ['es', 'cjs'],
     },
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖