gantt-lib 0.91.0 → 0.100.0

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/styles.css CHANGED
@@ -355,7 +355,7 @@
355
355
  --gantt-parent-bar-radius: 8px;
356
356
  --gantt-parent-ear-depth: 6px;
357
357
  --gantt-parent-ear-width: 8px;
358
- --gantt-parent-row-bg: #eeedfb;
358
+ --gantt-parent-row-bg: #f1f5f9;
359
359
  --gantt-divider-grid-color: #d4bceb;
360
360
  --gantt-hierarchy-line-color: #bebcbf;
361
361
  }
@@ -378,6 +378,7 @@
378
378
  .gantt-tsh-monthRow {
379
379
  display: flex;
380
380
  border-bottom: var(--gantt-day-line-width, 1px) solid var(--gantt-day-line-color, #f3f4f6);
381
+ box-sizing: border-box;
381
382
  align-items: center;
382
383
  }
383
384
  .gantt-tsh-monthCell {
@@ -794,6 +795,7 @@
794
795
  top: 0;
795
796
  z-index: 15;
796
797
  background-color: var(--gantt-cell-background, #ffffff);
798
+ --gantt-row-content-lines: 1;
797
799
  display: flex;
798
800
  flex-direction: column;
799
801
  flex-shrink: 0;
@@ -867,6 +869,7 @@
867
869
  .gantt-tl-row {
868
870
  --gantt-tl-name-actions-bg: var(--gantt-cell-background, #ffffff);
869
871
  display: flex;
872
+ flex: 0 0 auto;
870
873
  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
871
874
  box-sizing: border-box;
872
875
  cursor: pointer;
@@ -887,8 +890,7 @@
887
890
  box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
888
891
  }
889
892
  .gantt-tl-row-selected {
890
- --gantt-tl-name-actions-bg: #ebedef;
891
- box-shadow: inset 0 0 0 9999px rgba(17, 24, 39, 0.08);
893
+ --gantt-tl-name-actions-bg: inherit;
892
894
  }
893
895
  .gantt-tl-row-dependency-selected {
894
896
  --gantt-tl-name-actions-bg: #e8effe;
@@ -911,6 +913,15 @@
911
913
  }
912
914
  .gantt-tl-row-parent {
913
915
  font-weight: 600;
916
+ --gantt-tl-name-actions-bg: inherit;
917
+ }
918
+ .gantt-container-tableMatrix .gantt-tl-row-level-0.gantt-tl-row-parent {
919
+ --gantt-tl-name-actions-bg: var(--gantt-row-fill-level-0, #e2e8f0);
920
+ background-color: var(--gantt-row-fill-level-0, #e2e8f0);
921
+ }
922
+ .gantt-tl-row-total {
923
+ --gantt-tl-name-actions-bg: inherit;
924
+ font-weight: 700;
914
925
  }
915
926
  .gantt-tl-row-parent .gantt-datepicker-trigger {
916
927
  font-weight: 600;
@@ -1001,10 +1012,6 @@
1001
1012
  .gantt-tl-row-dragging .gantt-tl-drag-handle {
1002
1013
  visibility: visible;
1003
1014
  }
1004
- .gantt-tl-cell-number:hover .gantt-tl-num-label,
1005
- .gantt-tl-cell-number:focus-within .gantt-tl-num-label {
1006
- visibility: hidden;
1007
- }
1008
1015
  .gantt-tl-num-label {
1009
1016
  font-size: 0.75rem;
1010
1017
  opacity: 0.45;
@@ -1147,7 +1154,7 @@
1147
1154
  .gantt-tl-name-trigger-text {
1148
1155
  display: -webkit-box;
1149
1156
  -webkit-box-orient: vertical;
1150
- -webkit-line-clamp: 2;
1157
+ -webkit-line-clamp: var(--gantt-row-content-lines, 1);
1151
1158
  overflow: hidden;
1152
1159
  white-space: normal;
1153
1160
  word-break: break-word;
@@ -2102,6 +2109,67 @@
2102
2109
  white-space: nowrap;
2103
2110
  text-overflow: ellipsis;
2104
2111
  }
2112
+ .gantt-tl-cell-custom {
2113
+ padding: 0 8px;
2114
+ position: relative;
2115
+ outline: none;
2116
+ }
2117
+ .gantt-tl-cell-custom[data-custom-column-editing=true] {
2118
+ padding: 0;
2119
+ }
2120
+ .gantt-tl-cell-custom[data-custom-column-active=true] {
2121
+ box-shadow: inset 0 0 0 2px #2563eb;
2122
+ z-index: 1;
2123
+ }
2124
+ .gantt-tl-cell-custom[data-custom-column-active=true][data-custom-column-editing=true] {
2125
+ box-shadow: none;
2126
+ }
2127
+ .gantt-tl-cell-align-left {
2128
+ justify-content: flex-start;
2129
+ text-align: left;
2130
+ }
2131
+ .gantt-tl-cell-align-center {
2132
+ justify-content: center;
2133
+ text-align: center;
2134
+ }
2135
+ .gantt-tl-cell-align-right {
2136
+ justify-content: flex-end;
2137
+ text-align: right;
2138
+ }
2139
+ .gantt-tl-cell-custom-editor {
2140
+ width: 100%;
2141
+ height: 100%;
2142
+ display: flex;
2143
+ align-items: center;
2144
+ align-self: stretch;
2145
+ }
2146
+ .gantt-tl-cell-custom-content {
2147
+ width: 100%;
2148
+ height: 100%;
2149
+ display: flex;
2150
+ align-items: center;
2151
+ justify-content: inherit;
2152
+ min-width: 0;
2153
+ }
2154
+ .gantt-tl-inline-editor-input {
2155
+ width: 100%;
2156
+ height: 100%;
2157
+ min-height: 100%;
2158
+ border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
2159
+ border-radius: 0;
2160
+ background: #ffffff;
2161
+ padding: 0 8px;
2162
+ font-size: 0.8125rem;
2163
+ line-height: 1;
2164
+ font-family: inherit;
2165
+ color: #0f172a;
2166
+ box-shadow: none;
2167
+ }
2168
+ .gantt-tl-inline-editor-input:focus {
2169
+ outline: none;
2170
+ border-color: #3b82f6;
2171
+ box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
2172
+ }
2105
2173
  .gantt-tl-add-btn:hover {
2106
2174
  background: var(--gantt-hover-bg, rgba(0, 0, 0, 0.04));
2107
2175
  color: var(--gantt-text-color, #374151);
@@ -2955,6 +3023,115 @@
2955
3023
  opacity: var(--gantt-resource-item-subtitle-opacity);
2956
3024
  }
2957
3025
 
3026
+ /* src/components/TableMatrix/TableMatrix.css */
3027
+ .gantt-mx-root {
3028
+ min-width: 100%;
3029
+ background: var(--gantt-cell-background, #ffffff);
3030
+ }
3031
+ .gantt-mx-header {
3032
+ position: sticky;
3033
+ top: 0;
3034
+ z-index: 2;
3035
+ background: var(--gantt-cell-background, #ffffff);
3036
+ border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
3037
+ box-sizing: border-box;
3038
+ }
3039
+ .gantt-mx-headerRow,
3040
+ .gantt-mx-row {
3041
+ display: grid;
3042
+ box-sizing: border-box;
3043
+ }
3044
+ .gantt-mx-headerGroupRow {
3045
+ border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
3046
+ }
3047
+ .gantt-mx-body {
3048
+ position: relative;
3049
+ }
3050
+ .gantt-mx-headerCell,
3051
+ .gantt-mx-groupCell,
3052
+ .gantt-mx-cell {
3053
+ display: flex;
3054
+ align-items: center;
3055
+ min-width: 0;
3056
+ padding: 0 12px;
3057
+ border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
3058
+ box-sizing: border-box;
3059
+ }
3060
+ .gantt-mx-headerCell:last-child,
3061
+ .gantt-mx-groupCell:last-child,
3062
+ .gantt-mx-cell:last-child {
3063
+ border-right: 0;
3064
+ }
3065
+ .gantt-mx-groupCell {
3066
+ position: relative;
3067
+ justify-content: center;
3068
+ font-size: 12px;
3069
+ font-weight: 700;
3070
+ color: #475569;
3071
+ text-transform: uppercase;
3072
+ letter-spacing: 0.04em;
3073
+ background: var(--gantt-cell-background, #ffffff);
3074
+ border-right: 0;
3075
+ }
3076
+ .gantt-mx-groupCell:not(:last-child) {
3077
+ border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
3078
+ }
3079
+ .gantt-mx-headerCell {
3080
+ justify-content: center;
3081
+ font-size: 12px;
3082
+ font-weight: 600;
3083
+ color: #64748b;
3084
+ background: var(--gantt-cell-background, #ffffff);
3085
+ }
3086
+ .gantt-mx-row {
3087
+ position: absolute;
3088
+ left: 0;
3089
+ right: 0;
3090
+ border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
3091
+ overflow: hidden;
3092
+ }
3093
+ .gantt-mx-row.gantt-mx-row-parent {
3094
+ font-weight: 600;
3095
+ }
3096
+ .gantt-mx-row.gantt-mx-row-level-0.gantt-mx-row-parent {
3097
+ background: var(--gantt-row-fill-level-0, #e2e8f0);
3098
+ }
3099
+ .gantt-mx-row.gantt-mx-row-total {
3100
+ font-weight: 700;
3101
+ }
3102
+ .gantt-mx-row.gantt-mx-row-highlighted {
3103
+ background-color: rgba(250, 204, 21, 0.24);
3104
+ }
3105
+ .gantt-mx-row.gantt-mx-row-hovered {
3106
+ box-shadow: inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
3107
+ }
3108
+ .gantt-mx-row.gantt-mx-row-highlighted.gantt-mx-row-hovered {
3109
+ box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
3110
+ }
3111
+ .gantt-mx-cell {
3112
+ font-size: 13px;
3113
+ color: #111827;
3114
+ background: inherit;
3115
+ }
3116
+ .gantt-mx-cell-clickable {
3117
+ cursor: pointer;
3118
+ }
3119
+ .gantt-mx-cell-clickable:hover {
3120
+ box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.06);
3121
+ }
3122
+ .gantt-mx-cellAlign-left {
3123
+ justify-content: flex-start;
3124
+ text-align: left;
3125
+ }
3126
+ .gantt-mx-cellAlign-center {
3127
+ justify-content: center;
3128
+ text-align: center;
3129
+ }
3130
+ .gantt-mx-cellAlign-right {
3131
+ justify-content: flex-end;
3132
+ text-align: right;
3133
+ }
3134
+
2958
3135
  /* src/components/GanttChart/GanttChart.css */
2959
3136
  .gantt-container {
2960
3137
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gantt-lib",
3
- "version": "0.91.0",
3
+ "version": "0.100.0",
4
4
  "description": "Lightweight React Gantt chart component library",
5
5
  "license": "MIT",
6
6
  "repository": {