@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.
@@ -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
- border: 1px solid var(--md-sys-color-outline-variant);
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
- border: 1px solid var(--md-sys-color-outline-variant);
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",
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.3",
43
- "@exmg/exm-sortable": "^1.2.3"
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": "88d4a421d86cfdb2493aa3a54098e92a38e46b51"
57
+ "gitHead": "7d2d8b74ef0b3f65870699ed2aa8e1ff54d8809d"
58
58
  }