@dxos/lit-grid 0.8.1-main.ba2dec9 → 0.8.1-staging.391c573

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/dx-grid.pcss +92 -83
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/lit-grid",
3
- "version": "0.8.1-main.ba2dec9",
3
+ "version": "0.8.1-staging.391c573",
4
4
  "description": "A grid Web Component using Lit",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,6 +39,6 @@
39
39
  "lit": "^3.2.0"
40
40
  },
41
41
  "devDependencies": {
42
- "@dxos/test-utils": "0.8.1-main.ba2dec9"
42
+ "@dxos/test-utils": "0.8.1-staging.391c573"
43
43
  }
44
44
  }
package/src/dx-grid.pcss CHANGED
@@ -1,108 +1,117 @@
1
1
  @import './dx-grid-axis-resize-handle.pcss';
2
2
  @import './dx-grid-multiselect-cell.pcss';
3
3
 
4
- dx-grid {
5
- display: contents;
6
- --dx-grid-gap: 1px;
7
- --dx-plane-gap: 1px;
8
- }
4
+ @layer dx-components {
5
+ dx-grid {
6
+ display: contents;
7
+ --dx-grid-gap: 1px;
8
+ --dx-plane-gap: 1px;
9
+ }
9
10
 
10
- .dx-grid {
11
- display: grid;
12
- gap: var(--dx-plane-gap);
13
- grid-template-columns: min-content 1fr min-content;
14
- grid-template-rows: min-content 1fr min-content;
15
- font-variant-numeric: tabular-nums;
11
+ .dx-grid {
12
+ display: grid;
13
+ gap: var(--dx-plane-gap);
14
+ grid-template-columns: min-content 1fr min-content;
15
+ grid-template-rows: min-content 1fr min-content;
16
+ font-variant-numeric: tabular-nums;
16
17
 
17
- inline-size: 100%;
18
- block-size: 100%;
19
- max-inline-size: 100dvw;
20
- max-block-size: 100dvh;
18
+ inline-size: 100%;
19
+ block-size: 100%;
20
+ max-inline-size: 100dvw;
21
+ max-block-size: 100dvh;
21
22
 
22
- touch-action: none;
23
- user-select: none;
23
+ touch-action: none;
24
+ user-select: none;
24
25
 
25
- background: var(--dx-grid-lines, var(--dx-gridLine));
26
- }
26
+ background: var(--dx-grid-lines, var(--dx-gridLine));
27
+ }
27
28
 
28
- .dx-grid__plane--frozen-row,
29
- .dx-grid__plane--frozen-col,
30
- .dx-grid__plane--fixed,
31
- .dx-grid__plane--grid {
32
- overflow: hidden;
33
- position: relative;
34
- display: grid;
35
- &:focus-visible {
36
- outline: none;
29
+ .dx-grid__plane--frozen-row,
30
+ .dx-grid__plane--frozen-col,
31
+ .dx-grid__plane--fixed,
32
+ .dx-grid__plane--grid {
33
+ overflow: hidden;
34
+ position: relative;
35
+ display: grid;
36
+
37
+ &:focus-visible {
38
+ outline: none;
39
+ }
40
+
41
+ &:focus-visible::after {
42
+ content: "";
43
+ position: absolute;
44
+ inset: 0;
45
+ pointer-events: none;
46
+ border: 1px solid var(--dx-accentSurface);
47
+ }
37
48
  }
38
- &:focus-visible::after {
39
- content: "";
40
- position: absolute;
41
- inset: 0;
42
- pointer-events: none;
43
- border: 1px solid var(--dx-accentSurface);
49
+
50
+ .dx-grid__plane--fixed,
51
+ .dx-grid__plane--frozen-row__content,
52
+ .dx-grid__plane--frozen-col__content,
53
+ .dx-grid__plane--grid__content {
54
+ display: grid;
55
+ gap: var(--dx-grid-gap);
44
56
  }
45
- }
46
57
 
47
- .dx-grid__plane--fixed,
48
- .dx-grid__plane--frozen-row__content,
49
- .dx-grid__plane--frozen-col__content,
50
- .dx-grid__plane--grid__content {
51
- display: grid;
52
- gap: var(--dx-grid-gap);
53
- }
58
+ .dx-grid {
59
+ [role='gridcell'], [role='columnheader'], [role='rowheader'] {
60
+ position: relative;
61
+ background: var(--dx-grid-base, var(--dx-baseSurface));
62
+ /** This must match CellEditor styling in `CellEditor.tsx`. */
63
+ padding: 2px 4px;
64
+ box-sizing: border-box;
65
+ border: 1px solid transparent;
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
68
+ white-space: nowrap;
69
+ cursor: pointer;
54
70
 
55
- .dx-grid {
56
- [role='gridcell'], [role='columnheader'], [role='rowheader'] {
57
- position: relative;
58
- background: var(--dx-grid-base, var(--dx-baseSurface));
59
- /** This must match CellEditor styling in `CellEditor.tsx`. */
60
- padding: 2px 4px;
61
- box-sizing: border-box;
62
- cursor: pointer;
63
- border: 1px solid transparent;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- white-space: nowrap;
67
- &:focus:not([aria-readonly='true']), &:focus-visible {
68
- z-index: 2;
69
- border-color: var(--dx-accentSurface);
70
- outline: none;
71
- &:not([aria-readonly='true']) {
71
+ &[aria-readonly='true']{
72
72
  cursor: text;
73
73
  }
74
+
75
+ &:focus:not([aria-readonly='true']), &:focus-visible {
76
+ z-index: 2;
77
+ border-color: var(--dx-accentSurface);
78
+ outline: none;
79
+ }
80
+
81
+ &.dx-grid__cell--commented {
82
+ background: var(--dx-grid-commented, var(--dx-gridCommented));
83
+ }
74
84
  }
75
- &.dx-grid__cell--commented {
76
- background: var(--dx-grid-commented, var(--dx-gridCommented));
85
+
86
+ &[data-grid-select] {
87
+ [role='gridcell'], [role='columnheader'], [role='rowheader'] {
88
+ &[aria-selected] {
89
+ background: var(--dx-gridSelectionOverlay);
90
+ }
91
+ }
77
92
  }
78
93
  }
79
- &[data-grid-select] {
94
+
95
+ .dx-grid-host:focus-within .dx-grid:not(:focus-within) {
80
96
  [role='gridcell'], [role='columnheader'], [role='rowheader'] {
81
- &[aria-selected] {
82
- background: var(--dx-gridSelectionOverlay);
97
+ &[data-dx-active]:not([aria-readonly='true']) {
98
+ border-color: var(--dx-accentSurface);
83
99
  }
84
100
  }
85
101
  }
86
- }
87
102
 
88
- .dx-grid-host:focus-within .dx-grid:not(:focus-within) {
89
- [role='gridcell'], [role='columnheader'], [role='rowheader'] {
90
- &[data-dx-active]:not([aria-readonly='true']) {
91
- border-color: var(--dx-accentSurface);
92
- }
93
- }
94
- }
103
+ /* TODO(thure): Finish implementation. */
104
+ .dx-grid-layer--presentation {
105
+ pointer-events: none;
106
+ position: absolute;
107
+ inset: 0;
108
+ display: grid;
109
+ gap: var(--dx-grid-gap);
110
+ background: rgba(255, 0, 0, .1);
95
111
 
96
- /* TODO(thure): Finish implementation. */
97
- .dx-grid-layer--presentation {
98
- pointer-events: none;
99
- position: absolute;
100
- inset: 0;
101
- display: grid;
102
- gap: var(--dx-grid-gap);
103
- background: rgba(255, 0, 0, .1);
104
- & .dx-grid-layer--presentation__cell {
105
- background: rgba(0, 255, 0, .1);
112
+ & .dx-grid-layer--presentation__cell {
113
+ background: rgba(0, 255, 0, .1);
114
+ }
106
115
  }
107
116
  }
108
117
 
@@ -117,4 +126,4 @@ dx-grid {
117
126
  clip: rect(0, 0, 0, 0);
118
127
  white-space: nowrap;
119
128
  border-width: 0;
120
- }
129
+ }