gantt-lib 0.75.1 → 0.77.0

package/dist/styles.css

@@ -1911,10 +1911,23 @@
   --gantt-resourceTimeline-row-header-width: var(--gantt-resource-row-header-width, 240px);
   --gantt-resourceTimeline-lane-height: var(--gantt-resource-lane-height, 40px);
   --gantt-resourceTimeline-bar-radius: var(--gantt-resource-bar-radius, 4px);
+  --gantt-resource-item-duration-chip-bg: rgba(255, 255, 255, 0.22);
+  --gantt-resource-item-title-font-size: 0.75rem;
+  --gantt-resource-item-title-font-weight: 700;
+  --gantt-resource-item-subtitle-font-size: 0.6875rem;
+  --gantt-resource-item-subtitle-opacity: 0.85;
+  --gantt-resource-item-content-gap: 2px;
+  --gantt-resource-item-main-gap: 6px;
   width: 100%;
 }
 .gantt-resourceTimeline-scrollContainer {
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  touch-action: pan-x;
+}
+.gantt-resourceTimeline-scrollContainer[data-allow-vertical-pan=true] {
+  overflow-y: auto;
+  touch-action: pan-x pan-y;
 }
 .gantt-resourceTimeline-scrollContent {
   display: flex;
@@ -1936,8 +1949,9 @@
 }
 .gantt-resourceTimeline-resourceHeader {
   display: flex;
-  align-items: center;
-  padding: 0 12px;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px 0;
   box-sizing: border-box;
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   color: #1f2937;
@@ -1946,10 +1960,27 @@
   background: var(--gantt-cell-background, #ffffff);
 }
 .gantt-resourceTimeline-resourceName {
+  min-width: 0;
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.gantt-resourceTimeline-conflictBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #fee2e2;
+  color: #b91c1c;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 18px;
+}
 .gantt-resourceTimeline-chartSurface {
   position: relative;
   flex: 1;
@@ -1982,6 +2013,43 @@
   cursor: grab;
   user-select: none;
 }
+.gantt-resourceTimeline-weekendOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  background-image:
+    repeating-linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.26) 0,
+      rgba(255, 255, 255, 0.26) 2px,
+      transparent 2px,
+      transparent 5px);
+  mix-blend-mode: screen;
+}
+.gantt-resourceTimeline-conflictOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-color: rgba(239, 68, 68, 1);
+}
+.gantt-resourceTimeline-resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  width: 12px;
+  cursor: ew-resize;
+}
+.gantt-resourceTimeline-resizeHandleStart {
+  left: 0;
+}
+.gantt-resourceTimeline-resizeHandleEnd {
+  right: 0;
+}
 .gantt-resourceTimeline-itemDragging {
   z-index: 5;
   cursor: grabbing;
@@ -1992,34 +2060,60 @@
   cursor: default;
 }
 .gantt-resourceTimeline-itemInner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  position: relative;
+  z-index: 2;
   width: 100%;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   pointer-events: auto;
 }
+.gantt-resourceTimeline-defaultItemContent {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--gantt-resource-item-content-gap);
+  line-height: 1.1;
+}
+.gantt-resourceTimeline-defaultItemMain {
+  display: flex;
+  align-items: center;
+  gap: var(--gantt-resource-item-main-gap);
+  min-width: 0;
+}
+.gantt-resourceTimeline-itemDurationChip,
 .gantt-resourceTimeline-itemTitle,
-.gantt-resourceTimeline-itemSubtitle,
-.gantt-resourceTimeline-itemDates {
+.gantt-resourceTimeline-itemSubtitle {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
-  line-height: 1;
+}
+.gantt-resourceTimeline-itemDurationChip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 16px;
+  height: 16px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--gantt-resource-item-duration-chip-bg);
+  color: inherit;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 14px;
 }
 .gantt-resourceTimeline-itemTitle {
-  font-weight: 600;
+  font-size: var(--gantt-resource-item-title-font-size);
+  font-weight: var(--gantt-resource-item-title-font-weight);
 }
 .gantt-resourceTimeline-itemSubtitle {
-  opacity: 0.85;
-}
-.gantt-resourceTimeline-itemDates {
-  margin-left: auto;
-  opacity: 0.9;
+  font-size: var(--gantt-resource-item-subtitle-font-size);
+  opacity: var(--gantt-resource-item-subtitle-opacity);
 }
 
 /* src/components/GanttChart/GanttChart.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.75.1",
+  "version": "0.77.0",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {