@guiexpert/table 1.0.7 → 1.0.9

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/css/main.css ADDED
@@ -0,0 +1,338 @@
1
+ .ge-table {
2
+ display: block;
3
+ margin: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ }
7
+
8
+ .ge-table-col-div {
9
+ text-align: center;
10
+ line-height: 2.5;
11
+ user-select: none;
12
+ }
13
+
14
+ .ge-table-label-div {
15
+ padding: 0;
16
+ display: block;
17
+ text-overflow: ellipsis;
18
+ overflow: hidden;
19
+ }
20
+
21
+
22
+ .ge-table-label-div .ge-table-label {
23
+ padding-left: 10px;
24
+ padding-right: 10px;
25
+ }
26
+
27
+ .ge-table-text-align-left {
28
+ text-align: left;
29
+ }
30
+
31
+ .ge-table-text-align-right {
32
+ text-align: right;
33
+ }
34
+
35
+ .ge-table-text-align-center {
36
+ text-align: center;
37
+ }
38
+
39
+ /* Row checkbox */
40
+ .ge-table-row-checkbox-div {
41
+ padding-left: 14px;
42
+ }
43
+
44
+
45
+ .ge-table { background-color: var(--ge-table-bg); }
46
+
47
+ .ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
48
+ .ge-table-header-center { background-color: var(--ge-table-header-center-bg); }
49
+ .ge-table-header-east { background-color: var(--ge-table-header-east-bg); }
50
+ .ge-table-header-west { color: var(--ge-table-header-west-text); }
51
+ .ge-table-header-center { color: var(--ge-table-header-center-text); }
52
+ .ge-table-header-east { color: var(--ge-table-header-east-text); }
53
+
54
+ .ge-table-header-west-horizontal-border { background-color: var(--ge-table-header-west-horizontal-border); }
55
+ .ge-table-header-west-vertical-border { background-color: var(--ge-table-header-west-vertical-border); }
56
+ .ge-table-header-center-horizontal-border { background-color: var(--ge-table-header-center-horizontal-border); }
57
+ .ge-table-header-center-vertical-border { background-color: var(--ge-table-header-center-vertical-border); }
58
+ .ge-table-header-east-horizontal-border { background-color: var(--ge-table-header-east-horizontal-border); }
59
+ .ge-table-header-east-vertical-border { background-color: var(--ge-table-header-east-vertical-border); }
60
+
61
+
62
+ .ge-table-body-west { background-color: var(--ge-table-body-west-bg); }
63
+ .ge-table-body-center { background-color: var(--ge-table-body-center-bg); }
64
+ .ge-table-body-east { background-color: var(--ge-table-body-east-bg); }
65
+ .ge-table-body-west { color: var(--ge-table-body-west-text); }
66
+ .ge-table-body-center { color: var(--ge-table-body-center-text); }
67
+ .ge-table-body-east { color: var(--ge-table-body-east-text); }
68
+
69
+ .ge-table-body-west-horizontal-border { background-color: var(--ge-table-body-west-horizontal-border); }
70
+ .ge-table-body-west-vertical-border { background-color: var(--ge-table-body-west-vertical-border); }
71
+ .ge-table-body-center-horizontal-border { background-color: var(--ge-table-body-center-horizontal-border); }
72
+ .ge-table-body-center-vertical-border { background-color: var(--ge-table-body-center-vertical-border); }
73
+ .ge-table-body-east-horizontal-border { background-color: var(--ge-table-body-east-horizontal-border); }
74
+ .ge-table-body-east-vertical-border { background-color: var(--ge-table-body-east-vertical-border); }
75
+
76
+ .ge-table-body-west-selected-range { background-color: var(--ge-table-body-west-selected-range-bg); }
77
+ .ge-table-body-center-selected-range { background-color: var(--ge-table-body-center-selected-range-bg); }
78
+ .ge-table-body-east-selected-range { background-color: var(--ge-table-body-east-selected-range-bg); }
79
+ .ge-table-body-west-selected-range { color: var(--ge-table-body-west-selected-range-text); }
80
+ .ge-table-body-center-selected-range { color: var(--ge-table-body-center-selected-range-text); }
81
+ .ge-table-body-east-selected-range { color: var(--ge-table-body-east-selected-range-text); }
82
+
83
+
84
+
85
+
86
+
87
+
88
+ .ge-table-footer-west { background-color: var(--ge-table-footer-west-bg); }
89
+ .ge-table-footer-center { background-color: var(--ge-table-footer-center-bg); }
90
+ .ge-table-footer-east { background-color: var(--ge-table-footer-east-bg); }
91
+
92
+ .ge-table-footer-west { color: var(--ge-table-footer-west-text); }
93
+ .ge-table-footer-center { color: var(--ge-table-footer-center-text); }
94
+ .ge-table-footer-east { color: var(--ge-table-footer-east-text); }
95
+
96
+ .ge-table-footer-west-horizontal-border { background-color: var(--ge-table-footer-west-horizontal-border); }
97
+ .ge-table-footer-west-vertical-border { background-color: var(--ge-table-footer-west-vertical-border); }
98
+ .ge-table-footer-center-horizontal-border { background-color: var(--ge-table-footer-center-horizontal-border); }
99
+ .ge-table-footer-center-vertical-border { background-color: var(--ge-table-footer-center-vertical-border); }
100
+ .ge-table-footer-east-horizontal-border { background-color: var(--ge-table-footer-east-horizontal-border); }
101
+ .ge-table-footer-east-vertical-border { background-color: var(--ge-table-footer-east-vertical-border); }
102
+
103
+
104
+
105
+
106
+ .ge-table-border { background-color: var(--ge-table-border); }
107
+ .ge-table-row-odd {background-color: var(--ge-table-row-odd-bg); }
108
+ .ge-table-row-even {background-color: var(--ge-table-row-even-bg); }
109
+ .ge-table-column-odd {background-color: var(--ge-table-column-odd-bg); }
110
+ .ge-table-column-even {background-color: var(--ge-table-column-even-bg); }
111
+
112
+ .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
113
+ .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
114
+
115
+ .ge-table-focus-border { background-color: var(--ge-table-focus-border); }
116
+ .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
117
+ .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
118
+ .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
119
+ .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone); }
120
+ .ge-table-color-tree-arrow-collapsed-color { background-color: var(--ge-table-color-tree-arrow-collapsed-color); }
121
+ .ge-table-color-error { color: var(--ge-table-color-error-text); }
122
+ .ge-table-tree-arrow-collapsed { color: var(--ge-table-tree-arrow-collapsed-color);}
123
+ .ge-table-column-resize-handle:hover { background-color: var(--ge-table-column-resize-handle-border) }
124
+
125
+ .ge-table-drop-zone { background-color: var(--ge-table-drop-zone-bg); }
126
+ .ge-table-dragged-col-div { background-color: var(--ge-table-dragged-col-div-bg); }
127
+
128
+ /*TODO geht das überhaupt?*/
129
+ .ge-table-cell-editor-input,
130
+ .ge-table-cell-editor-input:focus-within {
131
+ border: none;
132
+ }
133
+ html,
134
+ :root [data-theme= "light"] {
135
+ --ge-table-bg: #fff;
136
+ --ge-table-header-west-bg: var(--ge-table-header-center-bg);
137
+ --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
138
+ --ge-table-header-east-bg: var(--ge-table-header-center-bg);
139
+ --ge-table-header-west-text: var(--ge-table-header-center-text);
140
+ --ge-table-header-center-text: #000;
141
+ --ge-table-header-east-text: var(--ge-table-header-center-text);
142
+
143
+ --ge-table-header-west-horizontal-border: var(--ge-table-header-center-horizontal-border);
144
+ --ge-table-header-west-vertical-border: var(--ge-table-header-center-vertical-border);
145
+ --ge-table-header-center-horizontal-border: #ddd;
146
+ --ge-table-header-center-vertical-border: #ccc;
147
+ --ge-table-header-east-horizontal-border: var(--ge-table-header-center-horizontal-border);
148
+ --ge-table-header-east-vertical-border: var(--ge-table-header-center-vertical-border);
149
+
150
+
151
+ --ge-table-body-west-bg: var(--ge-table-header-center-bg);
152
+ --ge-table-body-center-bg: rgba(255,255,255, 0.5);
153
+ --ge-table-body-east-bg: var(--ge-table-header-center-bg);
154
+
155
+ --ge-table-body-west-text: var(--ge-table-header-center-text);
156
+ --ge-table-body-center-text: var(--ge-table-header-center-text);
157
+ --ge-table-body-east-text: var(--ge-table-header-center-text);
158
+
159
+ --ge-table-body-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
160
+ --ge-table-body-west-vertical-border: var(--ge-table-header-west-vertical-border);
161
+ --ge-table-body-center-horizontal-border: #bbb;
162
+ --ge-table-body-center-vertical-border: #ddd;
163
+ --ge-table-body-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
164
+ --ge-table-body-east-vertical-border: var(--ge-table-header-east-vertical-border);;
165
+
166
+
167
+ --ge-table-footer-west-bg: var(--ge-table-header-center-bg);
168
+ --ge-table-footer-center-bg: var(--ge-table-header-center-bg);
169
+ --ge-table-footer-east-bg: var(--ge-table-header-center-bg);
170
+
171
+ --ge-table-footer-west-text: var(--ge-table-header-center-text);
172
+ --ge-table-footer-center-text: var(--ge-table-header-center-text);
173
+ --ge-table-footer-east-text: var(--ge-table-header-center-text);
174
+
175
+ --ge-table-footer-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
176
+ --ge-table-footer-west-vertical-border: var(--ge-table-header-west-vertical-border);
177
+ --ge-table-footer-center-horizontal-border: var(--ge-table-header-center-horizontal-border);
178
+ --ge-table-footer-center-vertical-border: var(--ge-table-header-center-vertical-border);
179
+ --ge-table-footer-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
180
+ --ge-table-footer-east-vertical-border: var(--ge-table-header-east-vertical-border);
181
+
182
+
183
+ --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
184
+ --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
185
+ --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
186
+ --ge-table-body-west-selected-range-text: #000;
187
+ --ge-table-body-center-selected-range-text: #000;
188
+ --ge-table-body-east-selected-range-text: #000;
189
+
190
+
191
+ --ge-table-border : #ccc;
192
+
193
+ --ge-table-row-odd-bg: transparent;
194
+ --ge-table-row-even-bg: transparent;
195
+ --ge-table-column-odd-bg: transparent;
196
+ --ge-table-column-even-bg: transparent;
197
+
198
+ --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
199
+ --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
200
+ --ge-table-focus-border: rgb(0, 255, 255);
201
+
202
+ --ge-table-color-error-text: #e00034;
203
+ --ge-table-tree-arrow-collapsed-color: #e00034;
204
+ --ge-table-column-resize-handle-border: rgb(0, 255, 255);
205
+
206
+ --ge-table-dragged-col-div-bg: lightcyan;
207
+ --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
208
+
209
+ --ge-table-color-col-resize-handle-hover-bg: cyan;
210
+ --ge-table-color-dragged-col-div-bg: #fafafa;
211
+ --ge-table-color-drop-zone-bg: #fafafa;
212
+ --ge-table-color-drop-zone: #fafafa;
213
+ --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
214
+ }
215
+
216
+
217
+
218
+
219
+ :root [data-theme= "dark"] {
220
+ --ge-table-bg: #000;
221
+ --ge-table-header-west-bg: oklch(0% 0 0);
222
+ --ge-table-header-center-bg: oklch(0% 0 0);
223
+ --ge-table-header-east-bg: oklch(0% 0 0);
224
+ --ge-table-header-west-text: oklch(100% 0 0);
225
+ --ge-table-header-center-text: oklch(100% 0 0);
226
+ --ge-table-header-east-text: oklch(100% 0 0);
227
+ --ge-table-header-west-horizontal-border: oklch(30% 0 0);
228
+ --ge-table-header-west-vertical-border: oklch(32% 0 0);
229
+ --ge-table-header-center-horizontal-border: oklch(30% 0 0);
230
+ --ge-table-header-center-vertical-border: oklch(32% 0 0);
231
+ --ge-table-header-east-horizontal-border: oklch(30% 0 0);
232
+ --ge-table-header-east-vertical-border: oklch(32% 0 0);
233
+ --ge-table-body-west-bg: oklch(0% 0 0);
234
+ --ge-table-body-center-bg: oklch(0% 0 0);
235
+ --ge-table-body-east-bg: oklch(0% 0 0);
236
+ --ge-table-body-west-text: oklch(100% 0 0);
237
+ --ge-table-body-center-text: oklch(100% 0 0);
238
+ --ge-table-body-east-text: oklch(100% 0 0);
239
+ --ge-table-body-west-horizontal-border: oklch(30% 0 0);
240
+ --ge-table-body-west-vertical-border: oklch(32% 0 0);
241
+ --ge-table-body-center-horizontal-border: oklch(30% 0 0);
242
+ --ge-table-body-center-vertical-border: oklch(32% 0 0);
243
+ --ge-table-body-east-horizontal-border: oklch(30% 0 0);
244
+ --ge-table-body-east-vertical-border: oklch(32% 0 0);
245
+ --ge-table-footer-west-bg: oklch(0% 0 0);
246
+ --ge-table-footer-center-bg: oklch(0% 0 0);
247
+ --ge-table-footer-east-bg: oklch(0% 0 0);
248
+ --ge-table-footer-west-text: var(--ge-table-header-center-text);;
249
+ --ge-table-footer-center-text: var(--ge-table-header-center-text);;
250
+ --ge-table-footer-east-text: var(--ge-table-header-center-text);;
251
+ --ge-table-footer-west-horizontal-border: oklch(30% 0 0);
252
+ --ge-table-footer-west-vertical-border: oklch(32% 0 0);
253
+ --ge-table-footer-center-horizontal-border: oklch(30% 0 0);
254
+ --ge-table-footer-center-vertical-border: oklch(32% 0 0);
255
+ --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
256
+ --ge-table-footer-east-vertical-border: oklch(32% 0 0);
257
+ --ge-table-border: oklch(32% 0 0);
258
+ --ge-table-row-odd-bg: oklch(0% 0 0);
259
+ --ge-table-row-even-bg: oklch(0% 0 0);
260
+ --ge-table-column-odd-bg: oklch(0% 0 0);
261
+ --ge-table-column-even-bg: oklch(0% 0 0);
262
+ --ge-table-hover-column-bg: oklch(0% 0 0);
263
+ --ge-table-hover-row-bg: oklch(0% 0 0);
264
+ --ge-table-focus-border: rgb(0, 255, 255);;
265
+ --ge-table-color-error-text: #ffa8b5;
266
+ --ge-table-tree-arrow-collapsed-color: #ffa8b5;
267
+ --ge-table-column-resize-handle-border: rgb(0, 255, 255);;
268
+ --ge-table-dragged-col-div-bg: oklch(0% 0 0);
269
+ --ge-table-drop-zone-bg: oklch(0% 0 0);
270
+
271
+
272
+
273
+ --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
274
+ --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
275
+ --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
276
+ --ge-table-body-west-selected-range-text: #000;
277
+ --ge-table-body-center-selected-range-text: #000;
278
+ --ge-table-body-east-selected-range-text: #000;
279
+
280
+ --ge-table-color-col-resize-handle-hover-bg: cyan;
281
+ --ge-table-color-dragged-col-div-bg: #fafafa;
282
+ --ge-table-color-drop-zone-bg: #fafafa;
283
+ --ge-table-color-drop-zone: #fafafa;
284
+ --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
285
+ }
286
+ /* Tree table */
287
+
288
+ .ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
289
+ text-align: left;
290
+ }
291
+
292
+ .ge-table-tree-cell .ge-table-label-div {
293
+ padding-left: 0;
294
+ padding-right: 10px;
295
+ display: inline;
296
+ }
297
+
298
+
299
+ .ge-table-col-tree {
300
+ text-align: left;
301
+ }
302
+
303
+ .ge-padding-property-checkbox {
304
+ padding-left: 0;
305
+ }
306
+
307
+ .ge-table-col-tree.ge-table-tree-deep-0 {
308
+ padding-left: 16px;
309
+ }
310
+
311
+ .ge-table-col-tree.ge-table-tree-deep-1 {
312
+ padding-left: 36px;
313
+ }
314
+
315
+ .ge-table-col-tree.ge-table-tree-deep-2 {
316
+ padding-left: 56px;
317
+ }
318
+
319
+ .ge-table-col-tree.ge-table-tree-deep-3 {
320
+ padding-left: 76px;
321
+ }
322
+
323
+ .ge-table-col-tree.ge-table-tree-deep-4 {
324
+ padding-left: 96px;
325
+ }
326
+
327
+ .ge-table-col-tree.ge-table-tree-deep-5 {
328
+ padding-left: 116px;
329
+ }
330
+
331
+ .ge-table-col-tree.ge-table-tree-deep-5 {
332
+ padding-left: 136px;
333
+ }
334
+
335
+ .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
336
+ display: grid;
337
+ grid-template-columns: 16px 1fr;
338
+ }
@@ -1,3 +1,9 @@
1
+ .ge-table {
2
+ display: block;
3
+ margin: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ }
1
7
 
2
8
  .ge-table-col-div {
3
9
  text-align: center;
@@ -73,6 +73,12 @@ html,
73
73
 
74
74
  --ge-table-dragged-col-div-bg: lightcyan;
75
75
  --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
76
+
77
+ --ge-table-color-col-resize-handle-hover-bg: cyan;
78
+ --ge-table-color-dragged-col-div-bg: #fafafa;
79
+ --ge-table-color-drop-zone-bg: #fafafa;
80
+ --ge-table-color-drop-zone: #fafafa;
81
+ --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
76
82
  }
77
83
 
78
84
 
@@ -138,4 +144,10 @@ html,
138
144
  --ge-table-body-west-selected-range-text: #000;
139
145
  --ge-table-body-center-selected-range-text: #000;
140
146
  --ge-table-body-east-selected-range-text: #000;
147
+
148
+ --ge-table-color-col-resize-handle-hover-bg: cyan;
149
+ --ge-table-color-dragged-col-div-bg: #fafafa;
150
+ --ge-table-color-drop-zone-bg: #fafafa;
151
+ --ge-table-color-drop-zone: #fafafa;
152
+ --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
141
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guiexpert/table",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "peerDependencies": {},
5
5
  "dependencies": {
6
6
  "tslib": "^2.3.0"