@rozie-ui/data-table-lit 0.1.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.
- package/LICENSE +21 -0
- package/README.md +498 -0
- package/dist/index.cjs +5631 -0
- package/dist/index.d.cts +1120 -0
- package/dist/index.d.mts +1120 -0
- package/dist/index.mjs +5615 -0
- package/package.json +96 -0
- package/src/Column.ts +159 -0
- package/src/DataTable.ts +5473 -0
- package/src/DetailPanel.ts +53 -0
- package/src/EditorCheckbox.ts +67 -0
- package/src/EditorDate.ts +94 -0
- package/src/EditorNumber.ts +95 -0
- package/src/EditorSelect.ts +99 -0
- package/src/EditorText.ts +92 -0
- package/src/FilterNumberRange.ts +89 -0
- package/src/FilterSelect.ts +68 -0
- package/src/FilterText.ts +85 -0
- package/src/GroupBar.ts +206 -0
- package/src/Popover.ts +446 -0
- package/src/index.ts +13 -0
- package/src/internal/middleware.ts +54 -0
- package/src/themes/base.css +102 -0
- package/src/themes/bootstrap.css +37 -0
- package/src/themes/material.css +35 -0
- package/src/themes/shadcn.css +41 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @rozie-ui/data-table — Material Design 3 bridge.
|
|
3
|
+
*
|
|
4
|
+
* Maps the public `--rozie-data-table-*` tokens onto the MD3 system color roles
|
|
5
|
+
* (`--md-sys-color-*`) emitted by material-web / @material/material-color-utilities
|
|
6
|
+
* theme builders. Falls back to the baseline M3 light palette when those vars are
|
|
7
|
+
* absent, so it renders correctly even without a generated theme.
|
|
8
|
+
*
|
|
9
|
+
* Import this AFTER base.css (base.css wires the public tokens onto the internal
|
|
10
|
+
* `--rdt-*` the component reads):
|
|
11
|
+
*
|
|
12
|
+
* import '@rozie-ui/data-table-react/themes/base.css';
|
|
13
|
+
* import '@rozie-ui/data-table-react/themes/material.css';
|
|
14
|
+
*/
|
|
15
|
+
.rozie-data-table-wrap,
|
|
16
|
+
.rozie-data-table {
|
|
17
|
+
--rozie-data-table-fg: var(--md-sys-color-on-surface, #1d1b20);
|
|
18
|
+
--rozie-data-table-accent: var(--md-sys-color-primary, #6750a4);
|
|
19
|
+
--rozie-data-table-border-color: var(--md-sys-color-outline-variant, #cac4d0);
|
|
20
|
+
--rozie-data-table-control-border-color: var(--md-sys-color-outline, #79747e);
|
|
21
|
+
--rozie-data-table-radius: 4px;
|
|
22
|
+
|
|
23
|
+
--rozie-data-table-header-bg: var(--md-sys-color-surface-container-highest, #e6e0e9);
|
|
24
|
+
--rozie-data-table-header-weight: 500;
|
|
25
|
+
|
|
26
|
+
--rozie-data-table-resize-grip-color: var(--md-sys-color-outline-variant, #cac4d0);
|
|
27
|
+
--rozie-data-table-resize-grip-active: var(--md-sys-color-primary, #6750a4);
|
|
28
|
+
|
|
29
|
+
--rozie-data-table-pin-active-bg: var(--md-sys-color-secondary-container, #e8def8);
|
|
30
|
+
|
|
31
|
+
--rozie-data-table-menu-bg: var(--md-sys-color-surface-container, #f3edf7);
|
|
32
|
+
--rozie-data-table-menu-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
|
|
33
|
+
|
|
34
|
+
--rozie-data-table-select-accent: var(--md-sys-color-primary, #6750a4);
|
|
35
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @rozie-ui/data-table — shadcn/ui (Radix) bridge.
|
|
3
|
+
*
|
|
4
|
+
* Maps the public `--rozie-data-table-*` tokens onto the shadcn/ui CSS variables
|
|
5
|
+
* defined on `:root` / `.dark` (the classic HSL-channel convention:
|
|
6
|
+
* `--background: 0 0% 100%` consumed as `hsl(var(--background))`). Because it
|
|
7
|
+
* reads those vars live, the table automatically follows light/dark theme
|
|
8
|
+
* switches and accent changes.
|
|
9
|
+
*
|
|
10
|
+
* import '@rozie-ui/data-table-react/themes/shadcn.css';
|
|
11
|
+
*
|
|
12
|
+
* Import this AFTER base.css (base.css wires the public tokens onto the internal
|
|
13
|
+
* `--rdt-*` the component reads; this file only remaps the public tokens):
|
|
14
|
+
*
|
|
15
|
+
* import '@rozie-ui/data-table-react/themes/base.css';
|
|
16
|
+
* import '@rozie-ui/data-table-react/themes/shadcn.css';
|
|
17
|
+
*
|
|
18
|
+
* If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
|
|
19
|
+
* oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
|
|
20
|
+
*/
|
|
21
|
+
.rozie-data-table-wrap,
|
|
22
|
+
.rozie-data-table {
|
|
23
|
+
--rozie-data-table-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));
|
|
24
|
+
--rozie-data-table-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
|
|
25
|
+
--rozie-data-table-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
|
|
26
|
+
--rozie-data-table-control-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
|
|
27
|
+
--rozie-data-table-radius: var(--radius, 0.5rem);
|
|
28
|
+
|
|
29
|
+
--rozie-data-table-header-bg: hsl(var(--muted, 210 40% 96.1%));
|
|
30
|
+
--rozie-data-table-header-weight: 600;
|
|
31
|
+
|
|
32
|
+
--rozie-data-table-resize-grip-color: hsl(var(--border, 214.3 31.8% 91.4%));
|
|
33
|
+
--rozie-data-table-resize-grip-active: hsl(var(--primary, 222.2 47.4% 11.2%));
|
|
34
|
+
|
|
35
|
+
--rozie-data-table-pin-active-bg: hsl(var(--accent, 210 40% 96.1%));
|
|
36
|
+
|
|
37
|
+
--rozie-data-table-menu-bg: hsl(var(--popover, 0 0% 100%));
|
|
38
|
+
--rozie-data-table-menu-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
|
|
39
|
+
|
|
40
|
+
--rozie-data-table-select-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
|
|
41
|
+
}
|