1.0.0 - init

2025-06-30 12:57:22 +08:00
parent 18d291f415
commit 7a5b28a364
10 changed files with 147 additions and 32 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,6 @@
  "vetur.validation.style": false,
  "files.exclude": {
    "**/node_modules": true,
-    "**/dist": true,
    "**/.git": true
  }
 }
--- a/README.en.md
+++ b/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).
--- a/demo/App.vue
+++ b/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 TaskDrawer from '../src/components/TaskDrawer.vue'
-import MilestoneDialog from '../src/components/MilestoneDialog.vue'
+//import GanttChart from '../src/components/GanttChart.vue'
+//import TaskDrawer from '../src/components/TaskDrawer.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 type { Task } from '../src/models/Task'
+//import { useMessage } from '../src/composables/useMessage'
+//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 }
  )
 }

--- a/demo/version-history.json
+++ b/demo/version-history.json
@@ -70,7 +70,7 @@
    "notes": ["按钮样式统一管理"]
  },
  {
-    "version": "beta 1.0.0",
+    "version": "1.0.0",
    "date": "2025-06-29",
    "notes": [
      "GanttChart接口增强",
--- a/index.html
+++ b/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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,8 +1,49 @@
 {
  "name": "jordium-gantt-vue3",
-  "private": true,
-  "version": "1.0.0-beta",
+  "version": "1.0.0",
  "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",
--- a/src/components/Timeline.vue
+++ b/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)
 }

--- a/src/index.ts
+++ b/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'
--- a/vite.config.lib.ts
+++ b/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: {
      // 确保外部化处理那些你不想打包进库的依赖