@ganttloom/gantt-core 0.4.0 → 0.4.3
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.
- package/dist/index.cjs +300 -89
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +300 -89
- package/dist/index.js.map +1 -1
- package/dist/styles.css +112 -5
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
font-family: var(--gantt-font-family, sans-serif);
|
|
31
31
|
font-size: var(--gantt-font-size, 12px);
|
|
32
32
|
border: 1px solid var(--gantt-grid-color);
|
|
33
|
+
border-radius: 8px;
|
|
34
|
+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
33
35
|
box-sizing: border-box;
|
|
34
36
|
overflow: hidden;
|
|
35
37
|
}
|
|
@@ -53,7 +55,9 @@
|
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
57
|
|
|
56
|
-
.gantt-root[data-gantt-theme="dark"]
|
|
58
|
+
.gantt-root[data-gantt-theme="dark"],
|
|
59
|
+
[data-theme="dark"] .gantt-root:not([data-gantt-theme="light"]),
|
|
60
|
+
.dark .gantt-root:not([data-gantt-theme="light"]) {
|
|
57
61
|
--gantt-background-color: #181c24;
|
|
58
62
|
--gantt-text-color: #e5e7eb;
|
|
59
63
|
--gantt-grid-color: #2d3341;
|
|
@@ -80,26 +84,90 @@
|
|
|
80
84
|
background: var(--gantt-background-color, #ffffff);
|
|
81
85
|
}
|
|
82
86
|
|
|
87
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-grid-panel,
|
|
88
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-timeline-scroll {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.gantt-time-header-cell {
|
|
94
|
+
position: absolute;
|
|
95
|
+
top: 0;
|
|
96
|
+
height: 100%;
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
font-size: var(--gantt-font-size, 12px);
|
|
101
|
+
color: var(--gantt-text-muted-color, #6b7280);
|
|
102
|
+
border-right: 1px solid var(--gantt-grid-color, #e5e7eb);
|
|
103
|
+
box-sizing: border-box;
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
text-overflow: clip;
|
|
107
|
+
}
|
|
108
|
+
|
|
83
109
|
.gantt-grid-header-row {
|
|
84
110
|
display: flex;
|
|
85
111
|
align-items: center;
|
|
86
112
|
position: sticky;
|
|
87
113
|
top: 0;
|
|
88
|
-
background: var(--gantt-
|
|
114
|
+
background: var(--gantt-grid-color, #e5e7eb);
|
|
89
115
|
border-bottom: 1px solid var(--gantt-grid-color, #e5e7eb);
|
|
116
|
+
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.05);
|
|
90
117
|
font-weight: 600;
|
|
91
118
|
z-index: 2;
|
|
92
119
|
}
|
|
93
120
|
|
|
94
|
-
.gantt-grid-header-
|
|
121
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-grid-header-row,
|
|
122
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-timeline-header {
|
|
123
|
+
order: 2;
|
|
124
|
+
top: auto;
|
|
125
|
+
bottom: 0;
|
|
126
|
+
border-bottom: none;
|
|
127
|
+
border-top: 1px solid var(--gantt-grid-color, #e5e7eb);
|
|
128
|
+
box-shadow: 0 -2px 4px -1px rgb(0 0 0 / 0.05);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-grid-body,
|
|
132
|
+
.gantt-root[data-gantt-header-position="bottom"] .gantt-svg {
|
|
133
|
+
order: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.gantt-root[data-gantt-header-position="none"] .gantt-grid-header-row,
|
|
137
|
+
.gantt-root[data-gantt-header-position="none"] .gantt-timeline-header {
|
|
138
|
+
display: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.gantt-grid-header-cell {
|
|
142
|
+
padding: 0 12px;
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
flex: 0 0 auto;
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
text-align: center;
|
|
149
|
+
min-width: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
95
152
|
.gantt-grid-cell {
|
|
96
153
|
padding: 0 8px;
|
|
97
154
|
white-space: nowrap;
|
|
155
|
+
flex: 0 0 auto;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
min-width: 0;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.gantt-cell-text {
|
|
162
|
+
display: -webkit-box;
|
|
163
|
+
-webkit-line-clamp: 2;
|
|
164
|
+
-webkit-box-orient: vertical;
|
|
98
165
|
overflow: hidden;
|
|
99
166
|
text-overflow: ellipsis;
|
|
167
|
+
white-space: normal;
|
|
168
|
+
overflow-wrap: break-word;
|
|
169
|
+
min-width: 0;
|
|
100
170
|
flex: 1 1 auto;
|
|
101
|
-
display: flex;
|
|
102
|
-
align-items: center;
|
|
103
171
|
}
|
|
104
172
|
|
|
105
173
|
.gantt-grid-header-cell-sortable {
|
|
@@ -111,6 +179,11 @@
|
|
|
111
179
|
font-size: 0.85em;
|
|
112
180
|
}
|
|
113
181
|
|
|
182
|
+
.gantt-col-resize-handle:hover {
|
|
183
|
+
background-color: var(--gantt-bar-color, #3b82f6);
|
|
184
|
+
opacity: 0.5;
|
|
185
|
+
}
|
|
186
|
+
|
|
114
187
|
.gantt-grid-body {
|
|
115
188
|
position: relative;
|
|
116
189
|
}
|
|
@@ -125,6 +198,7 @@
|
|
|
125
198
|
|
|
126
199
|
.gantt-grid-row:hover {
|
|
127
200
|
background: color-mix(in srgb, var(--gantt-grid-color, #e5e7eb) 40%, transparent);
|
|
201
|
+
transition: background-color 0.15s ease;
|
|
128
202
|
}
|
|
129
203
|
|
|
130
204
|
.gantt-indent {
|
|
@@ -152,6 +226,32 @@
|
|
|
152
226
|
box-sizing: border-box;
|
|
153
227
|
}
|
|
154
228
|
|
|
229
|
+
.gantt-add-child {
|
|
230
|
+
background: none;
|
|
231
|
+
border: none;
|
|
232
|
+
color: var(--gantt-linkColor, #94a3b8);
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
padding: 0 4px;
|
|
235
|
+
margin-left: 4px;
|
|
236
|
+
font-size: 14px;
|
|
237
|
+
line-height: 1;
|
|
238
|
+
display: inline-flex;
|
|
239
|
+
align-items: center;
|
|
240
|
+
justify-content: center;
|
|
241
|
+
border-radius: 4px;
|
|
242
|
+
opacity: 0;
|
|
243
|
+
transition: opacity 0.15s, background-color 0.15s, color 0.15s;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.gantt-add-child:hover {
|
|
247
|
+
background-color: var(--gantt-grid-color);
|
|
248
|
+
color: var(--gantt-text-color);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.gantt-grid-row:hover .gantt-add-child {
|
|
252
|
+
opacity: 1;
|
|
253
|
+
}
|
|
254
|
+
|
|
155
255
|
.gantt-timeline-scroll {
|
|
156
256
|
flex: 1 1 auto;
|
|
157
257
|
overflow: auto;
|
|
@@ -167,6 +267,9 @@
|
|
|
167
267
|
top: 0;
|
|
168
268
|
z-index: 2;
|
|
169
269
|
background: var(--gantt-background-color, #ffffff);
|
|
270
|
+
border-bottom: 1px solid var(--gantt-grid-color, #e5e7eb);
|
|
271
|
+
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.05);
|
|
272
|
+
box-sizing: border-box;
|
|
170
273
|
}
|
|
171
274
|
|
|
172
275
|
.gantt-header-svg {
|
|
@@ -216,3 +319,7 @@
|
|
|
216
319
|
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
|
217
320
|
opacity: 0.85;
|
|
218
321
|
}
|
|
322
|
+
|
|
323
|
+
.gantt-readonly .gantt-add-child {
|
|
324
|
+
display: none !important;
|
|
325
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ganttloom/gantt-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Framework-agnostic, fully customizable Gantt chart engine: grouping, drag-drop, dependency linking, expand/collapse, theming.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|