@guiexpert/table 1.0.5 → 1.0.7

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 (5) hide show
  1. package/css/table-classes.css +36 -0
  2. package/css/table-color-classes.css +90 -0
  3. package/css/table-color-vars.css +141 -0
  4. package/css/table-tree.css +53 -0
  5. package/package.json +1 -1
package/css/table-classes.css ADDED
@@ -0,0 +1,36 @@
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
+ }
package/css/table-color-classes.css ADDED
@@ -0,0 +1,90 @@
1
+
2
+
3
+ .ge-table { background-color: var(--ge-table-bg); }
4
+
5
+ .ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
6
+ .ge-table-header-center { background-color: var(--ge-table-header-center-bg); }
7
+ .ge-table-header-east { background-color: var(--ge-table-header-east-bg); }
8
+ .ge-table-header-west { color: var(--ge-table-header-west-text); }
9
+ .ge-table-header-center { color: var(--ge-table-header-center-text); }
10
+ .ge-table-header-east { color: var(--ge-table-header-east-text); }
11
+
12
+ .ge-table-header-west-horizontal-border { background-color: var(--ge-table-header-west-horizontal-border); }
13
+ .ge-table-header-west-vertical-border { background-color: var(--ge-table-header-west-vertical-border); }
14
+ .ge-table-header-center-horizontal-border { background-color: var(--ge-table-header-center-horizontal-border); }
15
+ .ge-table-header-center-vertical-border { background-color: var(--ge-table-header-center-vertical-border); }
16
+ .ge-table-header-east-horizontal-border { background-color: var(--ge-table-header-east-horizontal-border); }
17
+ .ge-table-header-east-vertical-border { background-color: var(--ge-table-header-east-vertical-border); }
18
+
19
+
20
+ .ge-table-body-west { background-color: var(--ge-table-body-west-bg); }
21
+ .ge-table-body-center { background-color: var(--ge-table-body-center-bg); }
22
+ .ge-table-body-east { background-color: var(--ge-table-body-east-bg); }
23
+ .ge-table-body-west { color: var(--ge-table-body-west-text); }
24
+ .ge-table-body-center { color: var(--ge-table-body-center-text); }
25
+ .ge-table-body-east { color: var(--ge-table-body-east-text); }
26
+
27
+ .ge-table-body-west-horizontal-border { background-color: var(--ge-table-body-west-horizontal-border); }
28
+ .ge-table-body-west-vertical-border { background-color: var(--ge-table-body-west-vertical-border); }
29
+ .ge-table-body-center-horizontal-border { background-color: var(--ge-table-body-center-horizontal-border); }
30
+ .ge-table-body-center-vertical-border { background-color: var(--ge-table-body-center-vertical-border); }
31
+ .ge-table-body-east-horizontal-border { background-color: var(--ge-table-body-east-horizontal-border); }
32
+ .ge-table-body-east-vertical-border { background-color: var(--ge-table-body-east-vertical-border); }
33
+
34
+ .ge-table-body-west-selected-range { background-color: var(--ge-table-body-west-selected-range-bg); }
35
+ .ge-table-body-center-selected-range { background-color: var(--ge-table-body-center-selected-range-bg); }
36
+ .ge-table-body-east-selected-range { background-color: var(--ge-table-body-east-selected-range-bg); }
37
+ .ge-table-body-west-selected-range { color: var(--ge-table-body-west-selected-range-text); }
38
+ .ge-table-body-center-selected-range { color: var(--ge-table-body-center-selected-range-text); }
39
+ .ge-table-body-east-selected-range { color: var(--ge-table-body-east-selected-range-text); }
40
+
41
+
42
+
43
+
44
+
45
+
46
+ .ge-table-footer-west { background-color: var(--ge-table-footer-west-bg); }
47
+ .ge-table-footer-center { background-color: var(--ge-table-footer-center-bg); }
48
+ .ge-table-footer-east { background-color: var(--ge-table-footer-east-bg); }
49
+
50
+ .ge-table-footer-west { color: var(--ge-table-footer-west-text); }
51
+ .ge-table-footer-center { color: var(--ge-table-footer-center-text); }
52
+ .ge-table-footer-east { color: var(--ge-table-footer-east-text); }
53
+
54
+ .ge-table-footer-west-horizontal-border { background-color: var(--ge-table-footer-west-horizontal-border); }
55
+ .ge-table-footer-west-vertical-border { background-color: var(--ge-table-footer-west-vertical-border); }
56
+ .ge-table-footer-center-horizontal-border { background-color: var(--ge-table-footer-center-horizontal-border); }
57
+ .ge-table-footer-center-vertical-border { background-color: var(--ge-table-footer-center-vertical-border); }
58
+ .ge-table-footer-east-horizontal-border { background-color: var(--ge-table-footer-east-horizontal-border); }
59
+ .ge-table-footer-east-vertical-border { background-color: var(--ge-table-footer-east-vertical-border); }
60
+
61
+
62
+
63
+
64
+ .ge-table-border { background-color: var(--ge-table-border); }
65
+ .ge-table-row-odd {background-color: var(--ge-table-row-odd-bg); }
66
+ .ge-table-row-even {background-color: var(--ge-table-row-even-bg); }
67
+ .ge-table-column-odd {background-color: var(--ge-table-column-odd-bg); }
68
+ .ge-table-column-even {background-color: var(--ge-table-column-even-bg); }
69
+
70
+ .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
71
+ .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
72
+
73
+ .ge-table-focus-border { background-color: var(--ge-table-focus-border); }
74
+ .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
75
+ .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
76
+ .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
77
+ .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone); }
78
+ .ge-table-color-tree-arrow-collapsed-color { background-color: var(--ge-table-color-tree-arrow-collapsed-color); }
79
+ .ge-table-color-error { color: var(--ge-table-color-error-text); }
80
+ .ge-table-tree-arrow-collapsed { color: var(--ge-table-tree-arrow-collapsed-color);}
81
+ .ge-table-column-resize-handle:hover { background-color: var(--ge-table-column-resize-handle-border) }
82
+
83
+ .ge-table-drop-zone { background-color: var(--ge-table-drop-zone-bg); }
84
+ .ge-table-dragged-col-div { background-color: var(--ge-table-dragged-col-div-bg); }
85
+
86
+ /*TODO geht das überhaupt?*/
87
+ .ge-table-cell-editor-input,
88
+ .ge-table-cell-editor-input:focus-within {
89
+ border: none;
90
+ }
package/css/table-color-vars.css ADDED
@@ -0,0 +1,141 @@
1
+ html,
2
+ :root [data-theme= "light"] {
3
+ --ge-table-bg: #fff;
4
+ --ge-table-header-west-bg: var(--ge-table-header-center-bg);
5
+ --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
6
+ --ge-table-header-east-bg: var(--ge-table-header-center-bg);
7
+ --ge-table-header-west-text: var(--ge-table-header-center-text);
8
+ --ge-table-header-center-text: #000;
9
+ --ge-table-header-east-text: var(--ge-table-header-center-text);
10
+
11
+ --ge-table-header-west-horizontal-border: var(--ge-table-header-center-horizontal-border);
12
+ --ge-table-header-west-vertical-border: var(--ge-table-header-center-vertical-border);
13
+ --ge-table-header-center-horizontal-border: #ddd;
14
+ --ge-table-header-center-vertical-border: #ccc;
15
+ --ge-table-header-east-horizontal-border: var(--ge-table-header-center-horizontal-border);
16
+ --ge-table-header-east-vertical-border: var(--ge-table-header-center-vertical-border);
17
+
18
+
19
+ --ge-table-body-west-bg: var(--ge-table-header-center-bg);
20
+ --ge-table-body-center-bg: rgba(255,255,255, 0.5);
21
+ --ge-table-body-east-bg: var(--ge-table-header-center-bg);
22
+
23
+ --ge-table-body-west-text: var(--ge-table-header-center-text);
24
+ --ge-table-body-center-text: var(--ge-table-header-center-text);
25
+ --ge-table-body-east-text: var(--ge-table-header-center-text);
26
+
27
+ --ge-table-body-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
28
+ --ge-table-body-west-vertical-border: var(--ge-table-header-west-vertical-border);
29
+ --ge-table-body-center-horizontal-border: #bbb;
30
+ --ge-table-body-center-vertical-border: #ddd;
31
+ --ge-table-body-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
32
+ --ge-table-body-east-vertical-border: var(--ge-table-header-east-vertical-border);;
33
+
34
+
35
+ --ge-table-footer-west-bg: var(--ge-table-header-center-bg);
36
+ --ge-table-footer-center-bg: var(--ge-table-header-center-bg);
37
+ --ge-table-footer-east-bg: var(--ge-table-header-center-bg);
38
+
39
+ --ge-table-footer-west-text: var(--ge-table-header-center-text);
40
+ --ge-table-footer-center-text: var(--ge-table-header-center-text);
41
+ --ge-table-footer-east-text: var(--ge-table-header-center-text);
42
+
43
+ --ge-table-footer-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
44
+ --ge-table-footer-west-vertical-border: var(--ge-table-header-west-vertical-border);
45
+ --ge-table-footer-center-horizontal-border: var(--ge-table-header-center-horizontal-border);
46
+ --ge-table-footer-center-vertical-border: var(--ge-table-header-center-vertical-border);
47
+ --ge-table-footer-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
48
+ --ge-table-footer-east-vertical-border: var(--ge-table-header-east-vertical-border);
49
+
50
+
51
+ --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
52
+ --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
53
+ --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
54
+ --ge-table-body-west-selected-range-text: #000;
55
+ --ge-table-body-center-selected-range-text: #000;
56
+ --ge-table-body-east-selected-range-text: #000;
57
+
58
+
59
+ --ge-table-border : #ccc;
60
+
61
+ --ge-table-row-odd-bg: transparent;
62
+ --ge-table-row-even-bg: transparent;
63
+ --ge-table-column-odd-bg: transparent;
64
+ --ge-table-column-even-bg: transparent;
65
+
66
+ --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
67
+ --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
68
+ --ge-table-focus-border: rgb(0, 255, 255);
69
+
70
+ --ge-table-color-error-text: #e00034;
71
+ --ge-table-tree-arrow-collapsed-color: #e00034;
72
+ --ge-table-column-resize-handle-border: rgb(0, 255, 255);
73
+
74
+ --ge-table-dragged-col-div-bg: lightcyan;
75
+ --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
76
+ }
77
+
78
+
79
+
80
+
81
+ :root [data-theme= "dark"] {
82
+ --ge-table-bg: #000;
83
+ --ge-table-header-west-bg: oklch(0% 0 0);
84
+ --ge-table-header-center-bg: oklch(0% 0 0);
85
+ --ge-table-header-east-bg: oklch(0% 0 0);
86
+ --ge-table-header-west-text: oklch(100% 0 0);
87
+ --ge-table-header-center-text: oklch(100% 0 0);
88
+ --ge-table-header-east-text: oklch(100% 0 0);
89
+ --ge-table-header-west-horizontal-border: oklch(30% 0 0);
90
+ --ge-table-header-west-vertical-border: oklch(32% 0 0);
91
+ --ge-table-header-center-horizontal-border: oklch(30% 0 0);
92
+ --ge-table-header-center-vertical-border: oklch(32% 0 0);
93
+ --ge-table-header-east-horizontal-border: oklch(30% 0 0);
94
+ --ge-table-header-east-vertical-border: oklch(32% 0 0);
95
+ --ge-table-body-west-bg: oklch(0% 0 0);
96
+ --ge-table-body-center-bg: oklch(0% 0 0);
97
+ --ge-table-body-east-bg: oklch(0% 0 0);
98
+ --ge-table-body-west-text: oklch(100% 0 0);
99
+ --ge-table-body-center-text: oklch(100% 0 0);
100
+ --ge-table-body-east-text: oklch(100% 0 0);
101
+ --ge-table-body-west-horizontal-border: oklch(30% 0 0);
102
+ --ge-table-body-west-vertical-border: oklch(32% 0 0);
103
+ --ge-table-body-center-horizontal-border: oklch(30% 0 0);
104
+ --ge-table-body-center-vertical-border: oklch(32% 0 0);
105
+ --ge-table-body-east-horizontal-border: oklch(30% 0 0);
106
+ --ge-table-body-east-vertical-border: oklch(32% 0 0);
107
+ --ge-table-footer-west-bg: oklch(0% 0 0);
108
+ --ge-table-footer-center-bg: oklch(0% 0 0);
109
+ --ge-table-footer-east-bg: oklch(0% 0 0);
110
+ --ge-table-footer-west-text: var(--ge-table-header-center-text);;
111
+ --ge-table-footer-center-text: var(--ge-table-header-center-text);;
112
+ --ge-table-footer-east-text: var(--ge-table-header-center-text);;
113
+ --ge-table-footer-west-horizontal-border: oklch(30% 0 0);
114
+ --ge-table-footer-west-vertical-border: oklch(32% 0 0);
115
+ --ge-table-footer-center-horizontal-border: oklch(30% 0 0);
116
+ --ge-table-footer-center-vertical-border: oklch(32% 0 0);
117
+ --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
118
+ --ge-table-footer-east-vertical-border: oklch(32% 0 0);
119
+ --ge-table-border: oklch(32% 0 0);
120
+ --ge-table-row-odd-bg: oklch(0% 0 0);
121
+ --ge-table-row-even-bg: oklch(0% 0 0);
122
+ --ge-table-column-odd-bg: oklch(0% 0 0);
123
+ --ge-table-column-even-bg: oklch(0% 0 0);
124
+ --ge-table-hover-column-bg: oklch(0% 0 0);
125
+ --ge-table-hover-row-bg: oklch(0% 0 0);
126
+ --ge-table-focus-border: rgb(0, 255, 255);;
127
+ --ge-table-color-error-text: #ffa8b5;
128
+ --ge-table-tree-arrow-collapsed-color: #ffa8b5;
129
+ --ge-table-column-resize-handle-border: rgb(0, 255, 255);;
130
+ --ge-table-dragged-col-div-bg: oklch(0% 0 0);
131
+ --ge-table-drop-zone-bg: oklch(0% 0 0);
132
+
133
+
134
+
135
+ --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
136
+ --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
137
+ --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
138
+ --ge-table-body-west-selected-range-text: #000;
139
+ --ge-table-body-center-selected-range-text: #000;
140
+ --ge-table-body-east-selected-range-text: #000;
141
+ }
package/css/table-tree.css ADDED
@@ -0,0 +1,53 @@
1
+ /* Tree table */
2
+
3
+ .ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
4
+ text-align: left;
5
+ }
6
+
7
+ .ge-table-tree-cell .ge-table-label-div {
8
+ padding-left: 0;
9
+ padding-right: 10px;
10
+ display: inline;
11
+ }
12
+
13
+
14
+ .ge-table-col-tree {
15
+ text-align: left;
16
+ }
17
+
18
+ .ge-padding-property-checkbox {
19
+ padding-left: 0;
20
+ }
21
+
22
+ .ge-table-col-tree.ge-table-tree-deep-0 {
23
+ padding-left: 16px;
24
+ }
25
+
26
+ .ge-table-col-tree.ge-table-tree-deep-1 {
27
+ padding-left: 36px;
28
+ }
29
+
30
+ .ge-table-col-tree.ge-table-tree-deep-2 {
31
+ padding-left: 56px;
32
+ }
33
+
34
+ .ge-table-col-tree.ge-table-tree-deep-3 {
35
+ padding-left: 76px;
36
+ }
37
+
38
+ .ge-table-col-tree.ge-table-tree-deep-4 {
39
+ padding-left: 96px;
40
+ }
41
+
42
+ .ge-table-col-tree.ge-table-tree-deep-5 {
43
+ padding-left: 116px;
44
+ }
45
+
46
+ .ge-table-col-tree.ge-table-tree-deep-5 {
47
+ padding-left: 136px;
48
+ }
49
+
50
+ .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
51
+ display: grid;
52
+ grid-template-columns: 16px 1fr;
53
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guiexpert/table",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "peerDependencies": {},
5
5
  "dependencies": {
6
6
  "tslib": "^2.3.0"