@guiexpert/table 1.0.6 → 1.0.8

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