@lee576/vue3-gantt 1.0.1 → 1.0.2

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 (8) hide show
  1. package/README.en-US.md +88 -1
  2. package/README.md +91 -14
  3. package/dist/vue3-gantt.css +1 -1
  4. package/dist/vue3-gantt.es.js +4846 -4395
  5. package/dist/vue3-gantt.es.js.map +1 -1
  6. package/dist/vue3-gantt.umd.js +81 -81
  7. package/dist/vue3-gantt.umd.js.map +1 -1
  8. package/package.json +1 -1
package/README.en-US.md CHANGED
@@ -100,8 +100,95 @@ import Gantt, {
100
100
  // Import styles
101
101
  import '@lee576/vue3-gantt/style.css';
102
102
  import { LinkType } from '@lee576/vue3-gantt';
103
+ ```
104
+
105
+ ### 2. Configure Container Height (Important!)
106
+
107
+ **The component requires an explicit container height to display properly**. Here are several recommended configuration methods:
108
+
109
+ #### Method 1: Using Viewport Height (Simplest)
110
+
111
+ ```vue
112
+ <template>
113
+ <div class="gantt-container">
114
+ <gantt
115
+ :styleConfig="styleConfig"
116
+ :dataConfig="dataConfig"
117
+ :eventConfig="eventConfig"
118
+ />
119
+ </div>
120
+ </template>
121
+
122
+ <style scoped>
123
+ .gantt-container {
124
+ height: 100vh; /* Use viewport height directly */
125
+ }
126
+ </style>
127
+ ```
128
+
129
+ #### Method 2: Using Percentage Height (Requires html/body Configuration)
130
+
131
+ ```vue
132
+ <template>
133
+ <div id="app">
134
+ <gantt
135
+ :styleConfig="styleConfig"
136
+ :dataConfig="dataConfig"
137
+ :eventConfig="eventConfig"
138
+ />
139
+ </div>
140
+ </template>
141
+
142
+ <style>
143
+ /* Global styles: Ensure html and body have height */
144
+ html, body {
145
+ height: 100%;
146
+ margin: 0;
147
+ padding: 0;
148
+ }
149
+
150
+ #app {
151
+ height: 100%; /* Now 100% works properly */
152
+ }
153
+ </style>
154
+ ```
155
+
156
+ #### Method 3: Using Fixed Pixel Value
157
+
158
+ ```vue
159
+ <style scoped>
160
+ .gantt-container {
161
+ height: 800px; /* Fixed height */
162
+ }
163
+ </style>
164
+ ```
165
+
166
+ #### Method 4: Using Flex Layout
167
+
168
+ ```vue
169
+ <template>
170
+ <div class="page-wrapper">
171
+ <div class="header">Header</div>
172
+ <div class="gantt-container">
173
+ <gantt ... />
174
+ </div>
175
+ </div>
176
+ </template>
177
+
178
+ <style scoped>
179
+ .page-wrapper {
180
+ display: flex;
181
+ flex-direction: column;
182
+ height: 100vh;
183
+ }
184
+
185
+ .gantt-container {
186
+ flex: 1; /* Auto-fill remaining space */
187
+ }
188
+ </style>
189
+ ```
103
190
 
104
- ### 2. Configure Component
191
+ ### 3. Configure Component
105
192
 
106
193
  ```vue
107
194
  <template>
package/README.md CHANGED
@@ -21,19 +21,9 @@
21
21
 
22
22
  ## 界面预览
23
23
 
24
- ```
25
- ┌─────────────────────────────────────────────────────────────────────────────┐
26
- │ Vue3 Gantt 专业组件 │
27
- ├─────────────────┬───────────────────────────────────────────────────────────┤
28
- │ 任务名称 │ 12/01 12/02 12/03 12/04 12/05 12/06 12/07 12/08 │
29
- ├─────────────────┼───────────────────────────────────────────────────────────┤
30
- │ 主任务1 - 项目规划│ ████████████████████████████████████████████ 85% │
31
- │ 子任务1.1 - 需求│ ████████████ 100% │
32
- │ 主任务2 - 开发阶段│ ████████████████████████████ 60% │
33
- │ 主任务3 - 测试阶段│ ████████████████ 45% │
34
- │ 主任务4 - 部署上线│ ████████ 30% │
35
- │ 主任务5 - 维护优化│ ████ 0% │
36
- └─────────────────┴───────────────────────────────────────────────────────────┘
24
+ <img width="1913" height="923" alt="image" src="https://github.com/user-attachments/assets/34562bf8-0709-44aa-a05d-6e970ea8b57f" />
25
+ <img width="1915" height="916" alt="image" src="https://github.com/user-attachments/assets/d6a60ba1-9f5b-479a-b402-68014ec7c935" />
26
+
37
27
  ```
38
28
 
39
29
  **主要特点：**
@@ -109,8 +99,95 @@ import Gantt, {
109
99
  // 引入样式文件
110
100
  import '@lee576/vue3-gantt/style.css';
111
101
  import { LinkType } from '@lee576/vue3-gantt';
102
+ ```
103
+
104
+ ### 2. 配置容器高度（重要！）
105
+
106
+ **组件必须有明确的容器高度才能正常显示**。以下是几种推荐的配置方式：
107
+
108
+ #### 方式 1：使用视口高度（最简单）
109
+
110
+ ```vue
111
+ <template>
112
+ <div class="gantt-container">
113
+ <gantt
114
+ :styleConfig="styleConfig"
115
+ :dataConfig="dataConfig"
116
+ :eventConfig="eventConfig"
117
+ />
118
+ </div>
119
+ </template>
120
+
121
+ <style scoped>
122
+ .gantt-container {
123
+ height: 100vh; /* 直接使用视口高度 */
124
+ }
125
+ </style>
126
+ ```
127
+
128
+ #### 方式 2：使用百分比高度（需要配置 html/body）
129
+
130
+ ```vue
131
+ <template>
132
+ <div id="app">
133
+ <gantt
134
+ :styleConfig="styleConfig"
135
+ :dataConfig="dataConfig"
136
+ :eventConfig="eventConfig"
137
+ />
138
+ </div>
139
+ </template>
140
+
141
+ <style>
142
+ /* 全局样式：确保 html 和 body 有高度 */
143
+ html, body {
144
+ height: 100%;
145
+ margin: 0;
146
+ padding: 0;
147
+ }
148
+
149
+ #app {
150
+ height: 100%; /* 现在 100% 就能正常工作了 */
151
+ }
152
+ </style>
153
+ ```
154
+
155
+ #### 方式 3：使用固定像素值
156
+
157
+ ```vue
158
+ <style scoped>
159
+ .gantt-container {
160
+ height: 800px; /* 固定高度 */
161
+ }
162
+ </style>
163
+ ```
164
+
165
+ #### 方式 4：使用 Flex 布局
166
+
167
+ ```vue
168
+ <template>
169
+ <div class="page-wrapper">
170
+ <div class="header">Header</div>
171
+ <div class="gantt-container">
172
+ <gantt ... />
173
+ </div>
174
+ </div>
175
+ </template>
176
+
177
+ <style scoped>
178
+ .page-wrapper {
179
+ display: flex;
180
+ flex-direction: column;
181
+ height: 100vh;
182
+ }
183
+
184
+ .gantt-container {
185
+ flex: 1; /* 自动填充剩余空间 */
186
+ }
187
+ </style>
188
+ ```
112
189
 
113
- ### 2. 配置组件
190
+ ### 3. 配置组件
114
191
 
115
192
  ```vue
116
193
  <template>