@omnigrid/style 0.0.0-stage → 0.1.1
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/LICENSE +21 -0
- package/README.md +25 -2
- package/dist/index.css +256 -0
- package/dist/index.js +1 -0
- package/package.json +26 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 KRZK Apps
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,26 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @omnigrid/style
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Shared CSS styles for OmniGrid. Provides base styles and CSS variables that all themes extend.
|
|
4
|
+
|
|
5
|
+
## What it provides
|
|
6
|
+
|
|
7
|
+
- `index.css` — base grid styles, CSS variables for theming, and default class names
|
|
8
|
+
- `index.js` — re-exports the CSS for `import` usage
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import "@omnigrid/style/index.css";
|
|
14
|
+
// or
|
|
15
|
+
import "@omnigrid/style";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Links
|
|
19
|
+
|
|
20
|
+
- **Source:** https://github.com/KRZK-Apps/omnigrid/tree/main/style
|
|
21
|
+
- **Demo:** https://omnigrid-demo.vercel.app/
|
|
22
|
+
- **Issues:** https://github.com/KRZK-Apps/omnigrid/issues
|
|
23
|
+
|
|
24
|
+
## License
|
|
25
|
+
|
|
26
|
+
MIT © KRZK Apps
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, sans-serif;
|
|
3
|
+
color: #182230;
|
|
4
|
+
background: #f4f7fb;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.dark {
|
|
8
|
+
color: #e8ebe9;
|
|
9
|
+
background: #1a1d1e;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
* {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
.omnigrid {
|
|
16
|
+
border-collapse: collapse;
|
|
17
|
+
border: 1px solid #d9e0ea;
|
|
18
|
+
scrollbar-gutter: stable;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
[role="cell"] {
|
|
22
|
+
align-items: center;
|
|
23
|
+
background: transparent;
|
|
24
|
+
border-bottom: 1px solid #d9e0ea;
|
|
25
|
+
border-right: 1px solid #d9e0ea;
|
|
26
|
+
display: flex;
|
|
27
|
+
padding: 0 12px;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dark [role="cell"] {
|
|
32
|
+
background: transparent;
|
|
33
|
+
border-bottom: 1px solid #3a3f40;
|
|
34
|
+
border-right: 1px solid #3a3f40;
|
|
35
|
+
color: #e8ebe9;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[role="cell"]:hover {
|
|
39
|
+
background: #eef5ff;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.dark [role="cell"]:hover {
|
|
43
|
+
background: #2a2f30;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.omnigrid-row:hover [role="cell"] {
|
|
47
|
+
background: #eef5ff !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dark .omnigrid-row:hover [role="cell"] {
|
|
51
|
+
background: #2a2f30 !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.omnigrid-no-row-hover [role="cell"]:hover {
|
|
55
|
+
background: unset;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.omnigrid-no-row-hover .omnigrid-row:hover [role="cell"] {
|
|
59
|
+
background: unset !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.omnigrid-row {
|
|
63
|
+
user-select: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.omnigrid {
|
|
67
|
+
background: #ffffff;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.dark .omnigrid {
|
|
71
|
+
background: #1a1d1e;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Pinned panes are opaque by default. Cells are transparent, so without a
|
|
75
|
+
background the scrollable columns sliding underneath the sticky panes would
|
|
76
|
+
be visible through them. Use the same background as the table. */
|
|
77
|
+
.omnigrid-pinned-left,
|
|
78
|
+
.omnigrid-pinned-right {
|
|
79
|
+
background: #ffffff;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.dark .omnigrid-pinned-left,
|
|
83
|
+
.dark .omnigrid-pinned-right {
|
|
84
|
+
background: #1a1d1e;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.omnigrid-header-row {
|
|
88
|
+
background: #e9eef5;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.dark .omnigrid-header-row {
|
|
92
|
+
background: #2a2f30;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
[role="columnheader"] {
|
|
96
|
+
background: #e9eef5;
|
|
97
|
+
border-bottom: 1px solid #c5cfdd;
|
|
98
|
+
border-right: 1px solid #c5cfdd;
|
|
99
|
+
color: #334155;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* The pinned panes intentionally have NO border: the pinned columns are
|
|
103
|
+
positioned so their pixels land exactly on the core-computed offsets, and
|
|
104
|
+
the pane boxes are sized to the full pinned width. Any border would shrink
|
|
105
|
+
the content box by its width (box-sizing: border-box) while the header-row
|
|
106
|
+
and rows-layer inside still span the full border-box width, making the layer
|
|
107
|
+
stick out 1px past the pane and creating a phantom horizontal scrollbar
|
|
108
|
+
(scrollWidth > clientWidth).
|
|
109
|
+
|
|
110
|
+
Separators between the pinned zones and the scrollable zone are drawn by
|
|
111
|
+
cell borders instead:
|
|
112
|
+
- left edge of the right-pinned block -> the FIRST right-pinned column
|
|
113
|
+
gets border-left (below). The scrollable area flex-grows, so the last
|
|
114
|
+
scrollable column does NOT touch the right pane; without this border the
|
|
115
|
+
block would have no left edge line.
|
|
116
|
+
- right edge of the left-pinned block -> the last left-pinned column
|
|
117
|
+
already carries border-right from the base [role="cell"] /
|
|
118
|
+
[role="columnheader"] rules, which sits exactly on the pane boundary.
|
|
119
|
+
A 1px border on a cell extends LEFT inside the pane and can never extend
|
|
120
|
+
the container's right edge, so it cannot produce a phantom scrollbar. */
|
|
121
|
+
|
|
122
|
+
.omnigrid-pinned-right [role="cell"]:first-child,
|
|
123
|
+
.omnigrid-pinned-right [role="columnheader"]:first-child {
|
|
124
|
+
border-left: 1px solid #d9e0ea;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.dark .omnigrid-pinned-right [role="cell"]:first-child,
|
|
128
|
+
.dark .omnigrid-pinned-right [role="columnheader"]:first-child {
|
|
129
|
+
border-left: 1px solid #3a3f40;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* ------------------------------------------------------------------ */
|
|
133
|
+
/* Slot Architecture */
|
|
134
|
+
/* ------------------------------------------------------------------ */
|
|
135
|
+
|
|
136
|
+
.omnigrid-layout {
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
min-width: 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.omnigrid-layout-body {
|
|
143
|
+
display: flex;
|
|
144
|
+
flex: 1 1 auto;
|
|
145
|
+
min-height: 0;
|
|
146
|
+
min-width: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.omnigrid-slot {
|
|
150
|
+
display: flex;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.omnigrid-slot-top,
|
|
154
|
+
.omnigrid-slot-bottom {
|
|
155
|
+
width: 100%;
|
|
156
|
+
padding: 4px 8px;
|
|
157
|
+
background: #f4f7fb;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.dark .omnigrid-slot-top,
|
|
161
|
+
.dark .omnigrid-slot-bottom {
|
|
162
|
+
background: #1a1d1e;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.omnigrid-slot-left,
|
|
166
|
+
.omnigrid-slot-right {
|
|
167
|
+
flex-shrink: 0;
|
|
168
|
+
padding: 0 8px;
|
|
169
|
+
background: #f4f7fb;
|
|
170
|
+
align-self: stretch;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.dark .omnigrid-slot-left,
|
|
174
|
+
.dark .omnigrid-slot-right {
|
|
175
|
+
background: #1a1d1e;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.omnigrid-slot-item-group {
|
|
179
|
+
display: flex;
|
|
180
|
+
gap: 8px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.omnigrid-slot-pos-center {
|
|
184
|
+
justify-content: center;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.omnigrid-slot-pos-end {
|
|
188
|
+
justify-content: flex-end;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.omnigrid-slot-item {
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Headless pager (PaginationPlugin). */
|
|
197
|
+
.omnigrid-pagination {
|
|
198
|
+
align-items: center;
|
|
199
|
+
display: flex;
|
|
200
|
+
gap: 8px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.omnigrid-pagination-btn {
|
|
204
|
+
background: #ffffff;
|
|
205
|
+
border: 1px solid #c5cfdd;
|
|
206
|
+
border-radius: 4px;
|
|
207
|
+
color: #334155;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
font-size: 12px;
|
|
210
|
+
line-height: 1.4;
|
|
211
|
+
padding: 3px 10px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.omnigrid-pagination-btn:disabled {
|
|
215
|
+
cursor: default;
|
|
216
|
+
opacity: 0.5;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.dark .omnigrid-pagination-btn {
|
|
220
|
+
background: #2a2f30;
|
|
221
|
+
border-color: #3a3f40;
|
|
222
|
+
color: #e8ebe9;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.dark [role="columnheader"] {
|
|
226
|
+
background: #2a2f30;
|
|
227
|
+
border-bottom: 1px solid #3a3f40;
|
|
228
|
+
border-right: 1px solid #3a3f40;
|
|
229
|
+
color: #e8ebe9;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.omnigrid-sort-indicator {
|
|
233
|
+
font-size: 10px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.omnigrid-header-label {
|
|
237
|
+
overflow: hidden;
|
|
238
|
+
text-overflow: ellipsis;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.omnigrid-header-tools {
|
|
242
|
+
align-items: center;
|
|
243
|
+
display: flex;
|
|
244
|
+
flex-shrink: 0;
|
|
245
|
+
gap: 6px;
|
|
246
|
+
margin-left: auto;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.omnigrid-header-cell[data-sortable="true"] {
|
|
250
|
+
cursor: pointer;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.omnigrid:not(:has(.omnigrid-pinned-right)) .omnigrid-scrollable [role="columnheader"]:last-child,
|
|
254
|
+
.omnigrid-pinned-right [role="columnheader"]:last-child {
|
|
255
|
+
border-right: 0;
|
|
256
|
+
}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.css";
|
package/package.json
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@omnigrid/style",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@omnigrid/style",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Shared styles for OmniGrid",
|
|
5
|
+
"keywords": ["omnigrid", "grid", "table", "styles", "css"],
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/KRZK-Apps/omnigrid.git",
|
|
9
|
+
"directory": "style"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/KRZK-Apps/omnigrid/tree/main/style#readme",
|
|
12
|
+
"bugs": { "url": "https://github.com/KRZK-Apps/omnigrid/issues" },
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"main": "dist/index.js",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"exports": {
|
|
19
|
+
".": "./dist/index.js",
|
|
20
|
+
"./index.css": "./dist/index.css"
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "node scripts/build.mjs",
|
|
24
|
+
"prepublishOnly": "npm run build"
|
|
25
|
+
}
|
|
26
|
+
}
|