diff --git a/.vscode/settings.json b/.vscode/settings.json index a088abe..4c7d66e 100644 --- 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 } } diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..c0a70f6 --- /dev/null +++ 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 + + + +``` + +## 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). diff --git a/demo/App.vue b/demo/App.vue index 45a6232..d8ed555 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -1,15 +1,17 @@ - - diff --git a/package-lock.json b/package-lock.json index 512ebf1..9b2f1d1 100644 --- 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", diff --git a/package.json b/package.json index bb96396..9113a9c 100644 --- 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", diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index d9c6626..619aa15 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -768,7 +768,9 @@ const handleTimelineScroll = (event: Event) => { // 设置滚动状态 isScrolling.value = true - target.classList.add('scrolling') + 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 - target.classList.remove('scrolling') + if (target && 'classList' in target && typeof target.classList.remove === 'function') { + target.classList.remove('scrolling') + } }, 500) } diff --git a/src/index.ts b/src/index.ts index a80cc42..148a17c 100644 --- 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' diff --git a/vite.config.lib.ts b/vite.config.lib.ts index 8e0aa94..da388cc 100644 --- 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: { // 确保外部化处理那些你不想打包进库的依赖