@exmg/exm-grid 1.2.3 → 1.2.4
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/.rollup.cache/root/repo/packages/exm-grid/dist/styles/exm-grid-styles-css.js +7 -5
- package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-base.d.ts +2 -1
- package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-base.js +2 -1
- package/dist/styles/exm-grid-styles-css.js +7 -5
- package/dist/table/exm-grid-base.d.ts +2 -1
- package/dist/table/exm-grid-base.js +2 -1
- package/package.json +4 -4
|
@@ -4,12 +4,9 @@ export const gridOutlineStyles = css `
|
|
|
4
4
|
--exm-theme-table-surface: var(--md-sys-color-background);
|
|
5
5
|
--exm-theme-table-toolbar-background-color: var(--md-sys-color-background);
|
|
6
6
|
--exm-table-th-background-color: var(--md-sys-color-background);
|
|
7
|
-
|
|
7
|
+
--exm-table-tr-alternate-background-color: var(--exm-table-row-alternate-background-color, #cbc9d420);
|
|
8
|
+
border: 1px solid var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));
|
|
8
9
|
border-radius: 1rem;
|
|
9
|
-
|
|
10
|
-
tr:nth-child(odd) {
|
|
11
|
-
background-color: #cbc9d429;
|
|
12
|
-
}
|
|
13
10
|
}
|
|
14
11
|
`;
|
|
15
12
|
export const style = css `
|
|
@@ -61,6 +58,7 @@ export const style = css `
|
|
|
61
58
|
--exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);
|
|
62
59
|
--exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);
|
|
63
60
|
--exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute);
|
|
61
|
+
--exm-table-tr-alternate-background-color: transparent;
|
|
64
62
|
}
|
|
65
63
|
|
|
66
64
|
::slotted([slot='pagination']) {
|
|
@@ -180,6 +178,10 @@ export const style = css `
|
|
|
180
178
|
text-transform: var(--mdc-typography-body2-text-transform, inherit);
|
|
181
179
|
}
|
|
182
180
|
|
|
181
|
+
table tbody tr:nth-child(odd) {
|
|
182
|
+
background-color: var(--exm-table-tr-alternate-background-color, transparent);
|
|
183
|
+
}
|
|
184
|
+
|
|
183
185
|
td {
|
|
184
186
|
height: var(--exm-table-td-height);
|
|
185
187
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
2
|
-
import '@exmg/exm-sortable/exm-sortable.js';
|
|
3
2
|
import { SORT_DIRECTION } from './types/exm-grid-types.js';
|
|
3
|
+
import '@exmg/exm-sortable/exm-sortable.js';
|
|
4
4
|
type GenericPropertyValues<T, V = unknown> = Map<T, V>;
|
|
5
5
|
type Props = Exclude<keyof ExmGridBase, number | symbol>;
|
|
6
6
|
type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
@@ -18,6 +18,7 @@ type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
|
18
18
|
* `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
|
|
19
19
|
* `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
|
|
20
20
|
* `--exm-table-row-selected-color` | selected row text color | `#02182b;`
|
|
21
|
+
* `--exm-table-row-alternate-background-color` | alternate row background color | `#cbc9d420;`
|
|
21
22
|
* `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
|
|
22
23
|
* `--exm-table-row-hover-color` | row hover text color | `#02182b;`
|
|
23
24
|
* `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
|
|
@@ -3,12 +3,12 @@ import { html } from 'lit';
|
|
|
3
3
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
4
4
|
import { property, state } from 'lit/decorators.js';
|
|
5
5
|
import { cache } from 'lit/directives/cache.js';
|
|
6
|
-
import '@exmg/exm-sortable/exm-sortable.js';
|
|
7
6
|
import { ExmRowSelectable } from './featrues/exm-row-selectable.js';
|
|
8
7
|
import { ExmQuerySelectors } from './utils/exm-query-selectors.js';
|
|
9
8
|
import { ExmRowExpandable } from './featrues/exm-row-expandable.js';
|
|
10
9
|
import { ExmColumnSortable } from './featrues/exm-column-sortable.js';
|
|
11
10
|
import { ExmRowSortable } from './featrues/exm-row-sortable.js';
|
|
11
|
+
import '@exmg/exm-sortable/exm-sortable.js';
|
|
12
12
|
/**
|
|
13
13
|
* ### Styling
|
|
14
14
|
* The following custom properties and mixins are available for styling:
|
|
@@ -23,6 +23,7 @@ import { ExmRowSortable } from './featrues/exm-row-sortable.js';
|
|
|
23
23
|
* `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
|
|
24
24
|
* `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
|
|
25
25
|
* `--exm-table-row-selected-color` | selected row text color | `#02182b;`
|
|
26
|
+
* `--exm-table-row-alternate-background-color` | alternate row background color | `#cbc9d420;`
|
|
26
27
|
* `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
|
|
27
28
|
* `--exm-table-row-hover-color` | row hover text color | `#02182b;`
|
|
28
29
|
* `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
|
|
@@ -5,12 +5,9 @@ const gridOutlineStyles = css `
|
|
|
5
5
|
--exm-theme-table-surface: var(--md-sys-color-background);
|
|
6
6
|
--exm-theme-table-toolbar-background-color: var(--md-sys-color-background);
|
|
7
7
|
--exm-table-th-background-color: var(--md-sys-color-background);
|
|
8
|
-
|
|
8
|
+
--exm-table-tr-alternate-background-color: var(--exm-table-row-alternate-background-color, #cbc9d420);
|
|
9
|
+
border: 1px solid var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));
|
|
9
10
|
border-radius: 1rem;
|
|
10
|
-
|
|
11
|
-
tr:nth-child(odd) {
|
|
12
|
-
background-color: #cbc9d429;
|
|
13
|
-
}
|
|
14
11
|
}
|
|
15
12
|
`;
|
|
16
13
|
const style = css `
|
|
@@ -62,6 +59,7 @@ const style = css `
|
|
|
62
59
|
--exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);
|
|
63
60
|
--exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);
|
|
64
61
|
--exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute);
|
|
62
|
+
--exm-table-tr-alternate-background-color: transparent;
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
::slotted([slot='pagination']) {
|
|
@@ -181,6 +179,10 @@ const style = css `
|
|
|
181
179
|
text-transform: var(--mdc-typography-body2-text-transform, inherit);
|
|
182
180
|
}
|
|
183
181
|
|
|
182
|
+
table tbody tr:nth-child(odd) {
|
|
183
|
+
background-color: var(--exm-table-tr-alternate-background-color, transparent);
|
|
184
|
+
}
|
|
185
|
+
|
|
184
186
|
td {
|
|
185
187
|
height: var(--exm-table-td-height);
|
|
186
188
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
2
|
-
import '@exmg/exm-sortable/exm-sortable.js';
|
|
3
2
|
import { SORT_DIRECTION } from './types/exm-grid-types.js';
|
|
3
|
+
import '@exmg/exm-sortable/exm-sortable.js';
|
|
4
4
|
type GenericPropertyValues<T, V = unknown> = Map<T, V>;
|
|
5
5
|
type Props = Exclude<keyof ExmGridBase, number | symbol>;
|
|
6
6
|
type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
@@ -18,6 +18,7 @@ type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
|
18
18
|
* `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
|
|
19
19
|
* `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
|
|
20
20
|
* `--exm-table-row-selected-color` | selected row text color | `#02182b;`
|
|
21
|
+
* `--exm-table-row-alternate-background-color` | alternate row background color | `#cbc9d420;`
|
|
21
22
|
* `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
|
|
22
23
|
* `--exm-table-row-hover-color` | row hover text color | `#02182b;`
|
|
23
24
|
* `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
|
|
@@ -3,12 +3,12 @@ import { html } from 'lit';
|
|
|
3
3
|
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
4
4
|
import { property, state } from 'lit/decorators.js';
|
|
5
5
|
import { cache } from 'lit/directives/cache.js';
|
|
6
|
-
import '@exmg/exm-sortable/exm-sortable.js';
|
|
7
6
|
import { ExmRowSelectable } from './featrues/exm-row-selectable.js';
|
|
8
7
|
import { ExmQuerySelectors } from './utils/exm-query-selectors.js';
|
|
9
8
|
import { ExmRowExpandable } from './featrues/exm-row-expandable.js';
|
|
10
9
|
import { ExmColumnSortable } from './featrues/exm-column-sortable.js';
|
|
11
10
|
import { ExmRowSortable } from './featrues/exm-row-sortable.js';
|
|
11
|
+
import '@exmg/exm-sortable/exm-sortable.js';
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* ### Styling
|
|
@@ -24,6 +24,7 @@ import { ExmRowSortable } from './featrues/exm-row-sortable.js';
|
|
|
24
24
|
* `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
|
|
25
25
|
* `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
|
|
26
26
|
* `--exm-table-row-selected-color` | selected row text color | `#02182b;`
|
|
27
|
+
* `--exm-table-row-alternate-background-color` | alternate row background color | `#cbc9d420;`
|
|
27
28
|
* `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
|
|
28
29
|
* `--exm-table-row-hover-color` | row hover text color | `#02182b;`
|
|
29
30
|
* `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@exmg/exm-grid",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "exmg grid element",
|
|
6
6
|
"contributors": [
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"directory": "packages/exm-grid"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@exmg/exm-search": "^1.2.
|
|
43
|
-
"@exmg/exm-sortable": "^1.2.
|
|
42
|
+
"@exmg/exm-search": "^1.2.4",
|
|
43
|
+
"@exmg/exm-sortable": "^1.2.4"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@exmg/lit-base": "^3.0.0",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "7d2d8b74ef0b3f65870699ed2aa8e1ff54d8809d"
|
|
58
58
|
}
|