@liteforge/table 0.1.1 → 0.2.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.
Files changed (6) hide show
  1. package/css/styles.css +351 -0
  2. package/dist/styles.d.ts +0 -13
  3. package/dist/styles.d.ts.map +1 -1
  4. package/dist/styles.js +7 -366
  5. package/dist/styles.js.map +1 -1
  6. package/package.json +7 -3
package/css/styles.css ADDED
@@ -0,0 +1,351 @@
1
+ /* ─── CSS Variables (Customizable) ─────────────────────────── */
2
+ /* Default values reference @liteforge/theme semantic tokens. */
3
+
4
+ :root {
5
+ --lf-table-bg: var(--lf-color-surface, #ffffff);
6
+ --lf-table-border: var(--lf-color-border, #e2e8f0);
7
+ --lf-table-border-radius: var(--lf-radius-lg, 8px);
8
+ --lf-table-header-bg: var(--lf-color-bg-subtle, #f8fafc);
9
+ --lf-table-header-color: var(--lf-color-text, #374151);
10
+ --lf-table-header-font-weight: var(--lf-font-semibold, 600);
11
+ --lf-table-row-bg: var(--lf-color-surface, #ffffff);
12
+ --lf-table-row-bg-hover: var(--lf-color-bg-muted, #f1f5f9);
13
+ --lf-table-row-bg-selected: var(--lf-color-accent-subtle, #eff6ff);
14
+ --lf-table-row-bg-striped: var(--lf-color-bg-subtle, #f8fafc);
15
+ --lf-table-cell-padding: 12px 16px;
16
+ --lf-table-cell-color: var(--lf-color-text, #1e293b);
17
+ --lf-table-cell-font-size: var(--lf-text-base, 14px);
18
+ --lf-table-sort-icon-color: var(--lf-color-text-subtle, #94a3b8);
19
+ --lf-table-sort-icon-active: var(--lf-color-accent, #3b82f6);
20
+ --lf-table-pagination-bg: var(--lf-color-bg-subtle, #f8fafc);
21
+ --lf-table-pagination-btn: var(--lf-color-accent, #3b82f6);
22
+ --lf-table-search-border: var(--lf-color-border-strong, #d1d5db);
23
+ --lf-table-search-focus: var(--lf-color-accent, #3b82f6);
24
+ }
25
+
26
+ /* Dark mode: selected row uses opaque surface instead of transparent accent-subtle */
27
+ .dark,
28
+ [data-theme="dark"] {
29
+ --lf-table-row-bg-selected: var(--lf-color-border-strong, #45475a);
30
+ }
31
+
32
+ @media (prefers-color-scheme: dark) {
33
+ :root:not([data-theme="light"]) {
34
+ --lf-table-row-bg-selected: var(--lf-color-border-strong, #45475a);
35
+ }
36
+ }
37
+
38
+ /* ─── Root Container ───────────────────────────────────────── */
39
+
40
+ .lf-table {
41
+ background: var(--lf-table-bg);
42
+ border: 1px solid var(--lf-table-border);
43
+ border-radius: var(--lf-table-border-radius);
44
+ overflow: hidden;
45
+ font-family: var(--lf-font-sans, system-ui, -apple-system, sans-serif);
46
+ }
47
+
48
+ /* ─── Search ───────────────────────────────────────────────── */
49
+
50
+ .lf-table-search {
51
+ padding: 12px 16px;
52
+ border-bottom: 1px solid var(--lf-table-border);
53
+ }
54
+
55
+ .lf-table-search-input {
56
+ width: 100%;
57
+ padding: 8px 12px;
58
+ border: 1px solid var(--lf-table-search-border);
59
+ border-radius: var(--lf-radius-md, 6px);
60
+ font-size: var(--lf-text-base, 14px);
61
+ background: var(--lf-table-bg);
62
+ color: var(--lf-table-cell-color);
63
+ outline: none;
64
+ box-sizing: border-box;
65
+ transition: border-color var(--lf-transition-base, 0.2s), box-shadow var(--lf-transition-base, 0.2s);
66
+ }
67
+
68
+ .lf-table-search-input:focus {
69
+ border-color: var(--lf-table-search-focus);
70
+ box-shadow: 0 0 0 3px var(--lf-color-accent-subtle, rgba(59, 130, 246, 0.1));
71
+ }
72
+
73
+ /* ─── Column Toggle ────────────────────────────────────────── */
74
+
75
+ .lf-table-column-toggle {
76
+ position: relative;
77
+ padding: 8px 16px;
78
+ border-bottom: 1px solid var(--lf-table-border);
79
+ }
80
+
81
+ .lf-table-column-toggle-btn {
82
+ padding: 6px 12px;
83
+ border: 1px solid var(--lf-table-border);
84
+ border-radius: var(--lf-radius-sm, 4px);
85
+ background: var(--lf-table-row-bg);
86
+ color: var(--lf-table-cell-color);
87
+ cursor: pointer;
88
+ font-size: 13px;
89
+ }
90
+
91
+ .lf-table-column-toggle-btn:hover {
92
+ background: var(--lf-table-row-bg-hover);
93
+ }
94
+
95
+ .lf-table-column-toggle-dropdown {
96
+ position: absolute;
97
+ top: 100%;
98
+ left: 16px;
99
+ background: var(--lf-table-row-bg);
100
+ border: 1px solid var(--lf-table-border);
101
+ border-radius: var(--lf-radius-md, 6px);
102
+ padding: 8px 0;
103
+ z-index: var(--lf-z-dropdown, 1000);
104
+ box-shadow: var(--lf-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
105
+ min-width: 150px;
106
+ }
107
+
108
+ .lf-table-column-toggle-item {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 8px;
112
+ padding: 6px 12px;
113
+ cursor: pointer;
114
+ font-size: 13px;
115
+ }
116
+
117
+ .lf-table-column-toggle-item:hover {
118
+ background: var(--lf-table-row-bg-hover);
119
+ }
120
+
121
+ /* ─── Filters ──────────────────────────────────────────────── */
122
+
123
+ .lf-table-filters {
124
+ display: flex;
125
+ flex-wrap: wrap;
126
+ gap: 12px;
127
+ padding: 12px 16px;
128
+ border-bottom: 1px solid var(--lf-table-border);
129
+ background: var(--lf-table-header-bg);
130
+ }
131
+
132
+ .lf-table-filter-item {
133
+ display: flex;
134
+ flex-direction: column;
135
+ gap: 4px;
136
+ }
137
+
138
+ .lf-table-filter-item label {
139
+ font-size: 11px;
140
+ font-weight: 500;
141
+ color: var(--lf-table-header-color);
142
+ text-transform: uppercase;
143
+ letter-spacing: 0.5px;
144
+ }
145
+
146
+ .lf-table-filter-item input,
147
+ .lf-table-filter-item select {
148
+ padding: 6px 10px;
149
+ border: 1px solid var(--lf-table-search-border);
150
+ border-radius: var(--lf-radius-sm, 4px);
151
+ font-size: 13px;
152
+ min-width: 120px;
153
+ background: var(--lf-table-bg);
154
+ color: var(--lf-table-cell-color);
155
+ outline: none;
156
+ transition: border-color var(--lf-transition-base, 0.2s), box-shadow var(--lf-transition-base, 0.2s);
157
+ }
158
+
159
+ .lf-table-filter-item input:focus,
160
+ .lf-table-filter-item select:focus {
161
+ border-color: var(--lf-table-search-focus);
162
+ box-shadow: 0 0 0 3px var(--lf-color-accent-subtle, rgba(59,130,246,0.1));
163
+ }
164
+
165
+ /* Custom select arrow — replaces native OS chevron */
166
+ .lf-table-filter-item select {
167
+ appearance: none;
168
+ -webkit-appearance: none;
169
+ padding-right: 28px;
170
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
171
+ background-repeat: no-repeat;
172
+ background-position: right 8px center;
173
+ cursor: pointer;
174
+ }
175
+
176
+ /* Pagination page-size select — same treatment */
177
+ .lf-table-pagination-sizes {
178
+ appearance: none;
179
+ -webkit-appearance: none;
180
+ padding-right: 28px;
181
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
182
+ background-repeat: no-repeat;
183
+ background-position: right 8px center;
184
+ cursor: pointer;
185
+ outline: none;
186
+ }
187
+
188
+ .lf-table-pagination-sizes:focus {
189
+ border-color: var(--lf-table-search-focus);
190
+ box-shadow: 0 0 0 3px var(--lf-color-accent-subtle, rgba(59,130,246,0.1));
191
+ }
192
+
193
+ /* ─── Table Container (Scroll) ─────────────────────────────── */
194
+
195
+ .lf-table-container {
196
+ overflow-x: auto;
197
+ }
198
+
199
+ /* ─── Table Element ────────────────────────────────────────── */
200
+
201
+ .lf-table-element {
202
+ width: 100%;
203
+ border-collapse: collapse;
204
+ }
205
+
206
+ /* ─── Header ───────────────────────────────────────────────── */
207
+
208
+ .lf-table-header {
209
+ background: var(--lf-table-header-bg);
210
+ }
211
+
212
+ .lf-table-header-row {
213
+ border-bottom: 1px solid var(--lf-table-border);
214
+ }
215
+
216
+ .lf-table-header-cell {
217
+ padding: var(--lf-table-cell-padding);
218
+ text-align: left;
219
+ font-size: var(--lf-table-cell-font-size);
220
+ font-weight: var(--lf-table-header-font-weight);
221
+ color: var(--lf-table-header-color);
222
+ white-space: nowrap;
223
+ user-select: none;
224
+ }
225
+
226
+ .lf-table-header-cell--sortable {
227
+ cursor: pointer;
228
+ }
229
+
230
+ .lf-table-header-cell--sortable:hover {
231
+ background: rgba(0,0,0,0.03);
232
+ }
233
+
234
+ .lf-table-header-cell--select {
235
+ width: 40px;
236
+ text-align: center;
237
+ }
238
+
239
+ .lf-table-sort-icon {
240
+ color: var(--lf-table-sort-icon-color);
241
+ margin-left: 4px;
242
+ font-size: 12px;
243
+ }
244
+
245
+ .lf-table-header-cell--sorted-asc .lf-table-sort-icon,
246
+ .lf-table-header-cell--sorted-desc .lf-table-sort-icon {
247
+ color: var(--lf-table-sort-icon-active);
248
+ }
249
+
250
+ /* ─── Body ─────────────────────────────────────────────────── */
251
+
252
+ .lf-table-body {
253
+ background: var(--lf-table-row-bg);
254
+ }
255
+
256
+ .lf-table-row {
257
+ border-bottom: 1px solid var(--lf-table-border);
258
+ transition: background-color var(--lf-transition-fast, 0.15s);
259
+ }
260
+
261
+ .lf-table-row:last-child {
262
+ border-bottom: none;
263
+ }
264
+
265
+ .lf-table-row:hover {
266
+ background: var(--lf-table-row-bg-hover);
267
+ }
268
+
269
+ .lf-table-row--odd {
270
+ background: var(--lf-table-row-bg-striped);
271
+ }
272
+
273
+ .lf-table-row--odd:hover {
274
+ background: var(--lf-table-row-bg-hover);
275
+ }
276
+
277
+ .lf-table-row--selected {
278
+ background: var(--lf-table-row-bg-selected) !important;
279
+ }
280
+
281
+ .lf-table-cell {
282
+ padding: var(--lf-table-cell-padding);
283
+ font-size: var(--lf-table-cell-font-size);
284
+ color: var(--lf-table-cell-color);
285
+ }
286
+
287
+ .lf-table-cell--select {
288
+ width: 40px;
289
+ text-align: center;
290
+ }
291
+
292
+ /* ─── Empty State ──────────────────────────────────────────── */
293
+
294
+ .lf-table-empty {
295
+ padding: 40px;
296
+ text-align: center;
297
+ color: var(--lf-color-text-subtle, #9ca3af);
298
+ font-size: var(--lf-text-base, 14px);
299
+ }
300
+
301
+ /* ─── Pagination ───────────────────────────────────────────── */
302
+
303
+ .lf-table-pagination {
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: space-between;
307
+ gap: 16px;
308
+ padding: 12px 16px;
309
+ background: var(--lf-table-pagination-bg);
310
+ border-top: 1px solid var(--lf-table-border);
311
+ font-size: 13px;
312
+ }
313
+
314
+ .lf-table-pagination-info {
315
+ color: var(--lf-color-text-muted, #6b7280);
316
+ }
317
+
318
+ .lf-table-pagination-controls {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 12px;
322
+ }
323
+
324
+ .lf-table-pagination-controls button {
325
+ padding: 6px 12px;
326
+ border: 1px solid var(--lf-table-border);
327
+ border-radius: var(--lf-radius-sm, 4px);
328
+ background: var(--lf-table-row-bg);
329
+ color: var(--lf-table-cell-color);
330
+ cursor: pointer;
331
+ font-size: 13px;
332
+ transition: background-color var(--lf-transition-fast, 0.15s);
333
+ }
334
+
335
+ .lf-table-pagination-controls button:hover:not(:disabled) {
336
+ background: var(--lf-table-row-bg-hover);
337
+ }
338
+
339
+ .lf-table-pagination-controls button:disabled {
340
+ opacity: 0.5;
341
+ cursor: not-allowed;
342
+ }
343
+
344
+ .lf-table-pagination-sizes {
345
+ padding: 6px 10px;
346
+ border: 1px solid var(--lf-table-border);
347
+ border-radius: var(--lf-radius-sm, 4px);
348
+ font-size: 13px;
349
+ background: var(--lf-table-row-bg);
350
+ color: var(--lf-table-cell-color);
351
+ }
package/dist/styles.d.ts CHANGED
@@ -1,16 +1,3 @@
1
- /**
2
- * @liteforge/table - Default CSS Theme
3
- *
4
- * Minimal, clean default styles using CSS variables.
5
- * Injected once when the first table renders (unless unstyled: true).
6
- */
7
- /**
8
- * Inject default styles into the document head.
9
- * Called automatically when the first table is created (unless unstyled: true).
10
- */
11
1
  export declare function injectDefaultStyles(): void;
12
- /**
13
- * Reset styles injection flag (for testing)
14
- */
15
2
  export declare function resetStylesInjection(): void;
16
3
  //# sourceMappingURL=styles.d.ts.map
package/dist/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AA8VH;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAU1C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAM3C"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,wBAAgB,mBAAmB,IAAI,IAAI,CAS1C;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C"}
package/dist/styles.js CHANGED
@@ -1,378 +1,19 @@
1
- /**
2
- * @liteforge/table - Default CSS Theme
3
- *
4
- * Minimal, clean default styles using CSS variables.
5
- * Injected once when the first table renders (unless unstyled: true).
6
- */
1
+ import stylesUrl from '../css/styles.css?url';
7
2
  let stylesInjected = false;
8
- const DEFAULT_STYLES = `
9
- /* ─── CSS Variables (Customizable) ─────────────────────────── */
10
-
11
- :root {
12
- --lf-table-bg: #ffffff;
13
- --lf-table-border: #e2e8f0;
14
- --lf-table-border-radius: 8px;
15
- --lf-table-header-bg: #f8fafc;
16
- --lf-table-header-color: #374151;
17
- --lf-table-header-font-weight: 600;
18
- --lf-table-row-bg: #ffffff;
19
- --lf-table-row-bg-hover: #f1f5f9;
20
- --lf-table-row-bg-selected: #eff6ff;
21
- --lf-table-row-bg-striped: #f8fafc;
22
- --lf-table-cell-padding: 12px 16px;
23
- --lf-table-cell-color: #1e293b;
24
- --lf-table-cell-font-size: 14px;
25
- --lf-table-sort-icon-color: #94a3b8;
26
- --lf-table-sort-icon-active: #3b82f6;
27
- --lf-table-pagination-bg: #f8fafc;
28
- --lf-table-pagination-btn: #3b82f6;
29
- --lf-table-search-border: #d1d5db;
30
- --lf-table-search-focus: #3b82f6;
31
- }
32
-
33
- /* ─── Root Container ───────────────────────────────────────── */
34
-
35
- .lf-table {
36
- background: var(--lf-table-bg);
37
- border: 1px solid var(--lf-table-border);
38
- border-radius: var(--lf-table-border-radius);
39
- overflow: hidden;
40
- font-family: system-ui, -apple-system, sans-serif;
41
- }
42
-
43
- /* ─── Search ───────────────────────────────────────────────── */
44
-
45
- .lf-table-search {
46
- padding: 12px 16px;
47
- border-bottom: 1px solid var(--lf-table-border);
48
- }
49
-
50
- .lf-table-search-input {
51
- width: 100%;
52
- padding: 8px 12px;
53
- border: 1px solid var(--lf-table-search-border);
54
- border-radius: 6px;
55
- font-size: 14px;
56
- outline: none;
57
- transition: border-color 0.2s, box-shadow 0.2s;
58
- }
59
-
60
- .lf-table-search-input:focus {
61
- border-color: var(--lf-table-search-focus);
62
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
63
- }
64
-
65
- /* ─── Column Toggle ────────────────────────────────────────── */
66
-
67
- .lf-table-column-toggle {
68
- position: relative;
69
- padding: 8px 16px;
70
- border-bottom: 1px solid var(--lf-table-border);
71
- }
72
-
73
- .lf-table-column-toggle-btn {
74
- padding: 6px 12px;
75
- border: 1px solid var(--lf-table-border);
76
- border-radius: 4px;
77
- background: var(--lf-table-row-bg);
78
- color: var(--lf-table-cell-color);
79
- cursor: pointer;
80
- font-size: 13px;
81
- }
82
-
83
- .lf-table-column-toggle-btn:hover {
84
- background: var(--lf-table-row-bg-hover);
85
- }
86
-
87
- .lf-table-column-toggle-dropdown {
88
- position: absolute;
89
- top: 100%;
90
- left: 16px;
91
- background: var(--lf-table-row-bg);
92
- border: 1px solid var(--lf-table-border);
93
- border-radius: 6px;
94
- padding: 8px 0;
95
- z-index: 1000;
96
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
97
- min-width: 150px;
98
- }
99
-
100
- .lf-table-column-toggle-item {
101
- display: flex;
102
- align-items: center;
103
- gap: 8px;
104
- padding: 6px 12px;
105
- cursor: pointer;
106
- font-size: 13px;
107
- }
108
-
109
- .lf-table-column-toggle-item:hover {
110
- background: var(--lf-table-row-bg-hover);
111
- }
112
-
113
- /* ─── Filters ──────────────────────────────────────────────── */
114
-
115
- .lf-table-filters {
116
- display: flex;
117
- flex-wrap: wrap;
118
- gap: 12px;
119
- padding: 12px 16px;
120
- border-bottom: 1px solid var(--lf-table-border);
121
- background: var(--lf-table-header-bg);
122
- }
123
-
124
- .lf-table-filter-item {
125
- display: flex;
126
- flex-direction: column;
127
- gap: 4px;
128
- }
129
-
130
- .lf-table-filter-item label {
131
- font-size: 11px;
132
- font-weight: 500;
133
- color: var(--lf-table-header-color);
134
- text-transform: uppercase;
135
- letter-spacing: 0.5px;
136
- }
137
-
138
- .lf-table-filter-item input,
139
- .lf-table-filter-item select {
140
- padding: 6px 10px;
141
- border: 1px solid var(--lf-table-search-border);
142
- border-radius: 4px;
143
- font-size: 13px;
144
- min-width: 120px;
145
- }
146
-
147
- /* ─── Table Container (Scroll) ─────────────────────────────── */
148
-
149
- .lf-table-container {
150
- overflow-x: auto;
151
- }
152
-
153
- /* ─── Table Element ────────────────────────────────────────── */
154
-
155
- .lf-table-element {
156
- width: 100%;
157
- border-collapse: collapse;
158
- }
159
-
160
- /* ─── Header ───────────────────────────────────────────────── */
161
-
162
- .lf-table-header {
163
- background: var(--lf-table-header-bg);
164
- }
165
-
166
- .lf-table-header-row {
167
- border-bottom: 1px solid var(--lf-table-border);
168
- }
169
-
170
- .lf-table-header-cell {
171
- padding: var(--lf-table-cell-padding);
172
- text-align: left;
173
- font-size: var(--lf-table-cell-font-size);
174
- font-weight: var(--lf-table-header-font-weight);
175
- color: var(--lf-table-header-color);
176
- white-space: nowrap;
177
- user-select: none;
178
- }
179
-
180
- .lf-table-header-cell--sortable {
181
- cursor: pointer;
182
- }
183
-
184
- .lf-table-header-cell--sortable:hover {
185
- background: rgba(0,0,0,0.03);
186
- }
187
-
188
- .lf-table-header-cell--select {
189
- width: 40px;
190
- text-align: center;
191
- }
192
-
193
- .lf-table-sort-icon {
194
- color: var(--lf-table-sort-icon-color);
195
- margin-left: 4px;
196
- font-size: 12px;
197
- }
198
-
199
- .lf-table-header-cell--sorted-asc .lf-table-sort-icon,
200
- .lf-table-header-cell--sorted-desc .lf-table-sort-icon {
201
- color: var(--lf-table-sort-icon-active);
202
- }
203
-
204
- /* ─── Body ─────────────────────────────────────────────────── */
205
-
206
- .lf-table-body {
207
- background: var(--lf-table-row-bg);
208
- }
209
-
210
- .lf-table-row {
211
- border-bottom: 1px solid var(--lf-table-border);
212
- transition: background-color 0.15s;
213
- }
214
-
215
- .lf-table-row:last-child {
216
- border-bottom: none;
217
- }
218
-
219
- .lf-table-row:hover {
220
- background: var(--lf-table-row-bg-hover);
221
- }
222
-
223
- .lf-table-row--odd {
224
- background: var(--lf-table-row-bg-striped);
225
- }
226
-
227
- .lf-table-row--odd:hover {
228
- background: var(--lf-table-row-bg-hover);
229
- }
230
-
231
- .lf-table-row--selected {
232
- background: var(--lf-table-row-bg-selected) !important;
233
- }
234
-
235
- .lf-table-cell {
236
- padding: var(--lf-table-cell-padding);
237
- font-size: var(--lf-table-cell-font-size);
238
- color: var(--lf-table-cell-color);
239
- }
240
-
241
- .lf-table-cell--select {
242
- width: 40px;
243
- text-align: center;
244
- }
245
-
246
- /* ─── Empty State ──────────────────────────────────────────── */
247
-
248
- .lf-table-empty {
249
- padding: 40px;
250
- text-align: center;
251
- color: #9ca3af;
252
- font-size: 14px;
253
- }
254
-
255
- /* ─── Pagination ───────────────────────────────────────────── */
256
-
257
- .lf-table-pagination {
258
- display: flex;
259
- align-items: center;
260
- justify-content: space-between;
261
- gap: 16px;
262
- padding: 12px 16px;
263
- background: var(--lf-table-pagination-bg);
264
- border-top: 1px solid var(--lf-table-border);
265
- font-size: 13px;
266
- }
267
-
268
- .lf-table-pagination-info {
269
- color: #6b7280;
270
- }
271
-
272
- .lf-table-pagination-controls {
273
- display: flex;
274
- align-items: center;
275
- gap: 12px;
276
- }
277
-
278
- .lf-table-pagination-controls button {
279
- padding: 6px 12px;
280
- border: 1px solid var(--lf-table-border);
281
- border-radius: 4px;
282
- background: var(--lf-table-row-bg);
283
- color: var(--lf-table-cell-color);
284
- cursor: pointer;
285
- font-size: 13px;
286
- transition: background-color 0.15s;
287
- }
288
-
289
- .lf-table-pagination-controls button:hover:not(:disabled) {
290
- background: var(--lf-table-row-bg-hover);
291
- }
292
-
293
- .lf-table-pagination-controls button:disabled {
294
- opacity: 0.5;
295
- cursor: not-allowed;
296
- }
297
-
298
- .lf-table-pagination-sizes {
299
- padding: 6px 10px;
300
- border: 1px solid var(--lf-table-border);
301
- border-radius: 4px;
302
- font-size: 13px;
303
- background: var(--lf-table-row-bg);
304
- color: var(--lf-table-cell-color);
305
- }
306
-
307
- /* ─── Dark Mode Support ────────────────────────────────────── */
308
-
309
- .dark {
310
- --lf-table-bg: #1e1e2e;
311
- --lf-table-border: #313244;
312
- --lf-table-header-bg: #181825;
313
- --lf-table-header-color: #cdd6f4;
314
- --lf-table-row-bg: #1e1e2e;
315
- --lf-table-row-bg-hover: #313244;
316
- --lf-table-row-bg-selected: #45475a;
317
- --lf-table-row-bg-striped: #181825;
318
- --lf-table-cell-color: #cdd6f4;
319
- --lf-table-pagination-bg: #181825;
320
- --lf-table-search-border: #45475a;
321
- }
322
-
323
- [data-theme="dark"] {
324
- --lf-table-bg: #1e1e2e;
325
- --lf-table-border: #313244;
326
- --lf-table-header-bg: #181825;
327
- --lf-table-header-color: #cdd6f4;
328
- --lf-table-row-bg: #1e1e2e;
329
- --lf-table-row-bg-hover: #313244;
330
- --lf-table-row-bg-selected: #45475a;
331
- --lf-table-row-bg-striped: #181825;
332
- --lf-table-cell-color: #cdd6f4;
333
- --lf-table-pagination-bg: #181825;
334
- --lf-table-search-border: #45475a;
335
- }
336
-
337
- @media (prefers-color-scheme: dark) {
338
- :root {
339
- --lf-table-bg: #1e1e2e;
340
- --lf-table-border: #313244;
341
- --lf-table-header-bg: #181825;
342
- --lf-table-header-color: #cdd6f4;
343
- --lf-table-row-bg: #1e1e2e;
344
- --lf-table-row-bg-hover: #313244;
345
- --lf-table-row-bg-selected: #45475a;
346
- --lf-table-row-bg-striped: #181825;
347
- --lf-table-cell-color: #cdd6f4;
348
- --lf-table-pagination-bg: #181825;
349
- --lf-table-search-border: #45475a;
350
- }
351
- }
352
- `;
353
- /**
354
- * Inject default styles into the document head.
355
- * Called automatically when the first table is created (unless unstyled: true).
356
- */
357
3
  export function injectDefaultStyles() {
358
4
  if (stylesInjected)
359
5
  return;
360
6
  if (typeof document === 'undefined')
361
7
  return; // SSR safety
362
- const style = document.createElement('style');
363
- style.id = 'lf-table-styles';
364
- style.textContent = DEFAULT_STYLES;
365
- document.head.appendChild(style);
8
+ const link = document.createElement('link');
9
+ link.rel = 'stylesheet';
10
+ link.href = stylesUrl;
11
+ link.setAttribute('data-lf-table', '');
12
+ document.head.appendChild(link);
366
13
  stylesInjected = true;
367
14
  }
368
- /**
369
- * Reset styles injection flag (for testing)
370
- */
371
15
  export function resetStylesInjection() {
372
16
  stylesInjected = false;
373
- const existing = document.getElementById('lf-table-styles');
374
- if (existing) {
375
- existing.remove();
376
- }
17
+ document.querySelector('link[data-lf-table]')?.remove();
377
18
  }
378
19
  //# sourceMappingURL=styles.js.map
package/dist/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,IAAI,cAAc,GAAG,KAAK,CAAA;AAE1B,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwVtB,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IACjC,IAAI,cAAc;QAAE,OAAM;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM,CAAC,aAAa;IAEzD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,EAAE,GAAG,iBAAiB,CAAA;IAC5B,KAAK,CAAC,WAAW,GAAG,cAAc,CAAA;IAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAEhC,cAAc,GAAG,IAAI,CAAA;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,cAAc,GAAG,KAAK,CAAA;IACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,IAAI,cAAc,GAAG,KAAK,CAAC;AAE3B,MAAM,UAAU,mBAAmB;IACjC,IAAI,cAAc;QAAE,OAAO;IAC3B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,CAAC,aAAa;IAC1D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC;IACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACtB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,cAAc,GAAG,KAAK,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;AAC1D,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liteforge/table",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Reactive data table with sorting, filtering, pagination, column visibility, and row selection.",
5
5
  "author": "SchildW3rk <contact@schildw3rk.dev>",
6
6
  "license": "MIT",
@@ -32,14 +32,18 @@
32
32
  ".": {
33
33
  "types": "./dist/index.d.ts",
34
34
  "import": "./dist/index.js"
35
- }
35
+ },
36
+ "./styles": "./css/styles.css"
36
37
  },
37
38
  "files": [
38
39
  "dist",
40
+ "css",
39
41
  "README.md",
40
42
  "LICENSE"
41
43
  ],
42
- "sideEffects": false,
44
+ "sideEffects": [
45
+ "css/*.css"
46
+ ],
43
47
  "engines": {
44
48
  "node": ">=18"
45
49
  },