neo.mjs 4.1.0 → 4.1.1
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/examples/grid/covid/GridContainer.mjs +113 -0
- package/examples/grid/covid/GridContainerController.mjs +62 -0
- package/examples/grid/covid/MainContainer.mjs +36 -0
- package/examples/grid/covid/Model.mjs +65 -0
- package/examples/grid/covid/Store.mjs +35 -0
- package/examples/grid/covid/Util.mjs +165 -0
- package/examples/grid/covid/app.mjs +6 -0
- package/examples/grid/covid/index.html +11 -0
- package/examples/grid/covid/neo-config.json +8 -0
- package/package.json +3 -3
- package/resources/scss/src/examples/grid/covid/GridContainer.scss +21 -0
- package/resources/scss/src/grid/Container.scss +5 -33
- package/resources/scss/src/grid/View.scss +73 -1
- package/resources/scss/src/grid/header/Button.scss +61 -7
- package/resources/scss/src/grid/header/Toolbar.scss +4 -2
- package/resources/scss/src/table/View.scss +2 -2
- package/resources/scss/theme-dark/grid/Container.scss +17 -0
- package/resources/scss/theme-dark/grid/View.scss +29 -0
- package/resources/scss/theme-dark/grid/_all.scss +3 -0
- package/resources/scss/theme-dark/grid/header/Button.scss +15 -0
- package/resources/scss/theme-dark/grid/header/Toolbar.scss +0 -0
- package/resources/scss/theme-dark/grid/header/_all.scss +2 -0
- package/resources/scss/theme-light/grid/Container.scss +17 -0
- package/resources/scss/theme-light/grid/View.scss +29 -0
- package/resources/scss/theme-light/grid/_all.scss +3 -0
- package/resources/scss/theme-light/grid/header/Button.scss +15 -0
- package/resources/scss/theme-light/grid/header/Toolbar.scss +0 -0
- package/resources/scss/theme-light/grid/header/_all.scss +2 -0
- package/src/grid/Container.mjs +252 -83
- package/src/grid/View.mjs +206 -11
- package/src/grid/header/Button.mjs +127 -2
- package/src/grid/header/Toolbar.mjs +42 -54
- package/src/selection/grid/CellColumnModel.mjs +122 -0
- package/src/selection/grid/CellColumnRowModel.mjs +122 -0
- package/src/selection/grid/CellModel.mjs +184 -0
- package/src/selection/grid/CellRowModel.mjs +164 -0
- package/src/selection/grid/ColumnModel.mjs +185 -0
- package/src/selection/grid/RowModel.mjs +188 -0
- package/src/selection/table/RowModel.mjs +26 -32
- package/src/table/Container.mjs +9 -13
- package/src/table/header/Toolbar.mjs +1 -1
|
@@ -1,3 +1,75 @@
|
|
|
1
1
|
.neo-grid-view {
|
|
2
|
+
.neo-center {
|
|
3
|
+
justify-content: center;
|
|
4
|
+
}
|
|
2
5
|
|
|
3
|
-
|
|
6
|
+
.neo-right {
|
|
7
|
+
justify-content: right;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.neo-grid-row {
|
|
11
|
+
&:hover {
|
|
12
|
+
.neo-grid-cell {
|
|
13
|
+
background-color: v(grid-cell-background-color-hover);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// selection.RowModel
|
|
18
|
+
&.neo-selected {
|
|
19
|
+
.neo-grid-cell {
|
|
20
|
+
background-color: v(grid-rowmodel-selected-cell-background-color);
|
|
21
|
+
color : v(grid-rowmodel-selected-cell-color);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// selection.CellModel
|
|
26
|
+
.neo-grid-cell {
|
|
27
|
+
&.neo-selected {
|
|
28
|
+
background-color: v(grid-cellmodel-selected-cell-background-color) !important;
|
|
29
|
+
color : v(grid-cellmodel-selected-cell-color) !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&.selected-column-cell {
|
|
33
|
+
background-color: v(grid-cellmodel-selected-column-cell-background-color);
|
|
34
|
+
color : v(grid-cellmodel-selected-column-cell-color);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.neo-selection-cellrowmodel,
|
|
41
|
+
.neo-selection-cellcolumnrowmodel{
|
|
42
|
+
.neo-grid-row {
|
|
43
|
+
&.neo-selected {
|
|
44
|
+
.neo-grid-cell {
|
|
45
|
+
background-color: v(grid-cellrowmodel-selected-row-cell-background-color);
|
|
46
|
+
color : v(grid-cellrowmodel-selected-row-cell-color);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.neo-grid-cell {
|
|
51
|
+
&.neo-selected {
|
|
52
|
+
background-color: v(grid-cellrowmodel-selected-cell-background-color);
|
|
53
|
+
color : v(grid-cellrowmodel-selected-cell-color);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.neo-selection-cellcolumnmodel,
|
|
60
|
+
.neo-selection-cellcolumnrowmodel,
|
|
61
|
+
.neo-selection-cellmodel,
|
|
62
|
+
.neo-selection-cellrowmodel,
|
|
63
|
+
.neo-selection-columnmodel,
|
|
64
|
+
.neo-selection-rowmodel {
|
|
65
|
+
.neo-grid-row {
|
|
66
|
+
&:focus {
|
|
67
|
+
outline: 0;
|
|
68
|
+
}
|
|
69
|
+
.neo-grid-cell {
|
|
70
|
+
&:focus {
|
|
71
|
+
outline: 0;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -1,16 +1,70 @@
|
|
|
1
1
|
.neo-grid-header-button {
|
|
2
|
-
|
|
2
|
+
align-items : center;
|
|
3
|
+
background-color: v(grid-header-button-background-color);
|
|
4
|
+
background-image: v(grid-header-button-background-image);
|
|
3
5
|
border-width : 0;
|
|
4
|
-
|
|
5
|
-
color : #bbb;
|
|
6
|
+
color : v(grid-header-button-color);
|
|
6
7
|
cursor : pointer;
|
|
8
|
+
display : flex;
|
|
9
|
+
flex-direction : row;
|
|
10
|
+
flex-shrink : 0;
|
|
7
11
|
font-size : 13px;
|
|
8
12
|
font-weight : 600;
|
|
13
|
+
height : 29px; // Webkit => Safari can not handle 100%
|
|
14
|
+
justify-content : flex-end;
|
|
9
15
|
margin : 0;
|
|
10
16
|
padding : 7px 10px 6px;
|
|
11
|
-
text-align : left;
|
|
12
17
|
white-space : nowrap;
|
|
13
|
-
width : 100%;
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
&:not(:last-child) {
|
|
20
|
+
border-right: 1px solid v(grid-container-border-color);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.neo-drag-over {
|
|
24
|
+
background-image: linear-gradient(green, darkgreen);;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.neo-sort-asc, &.neo-sort-desc {
|
|
28
|
+
.neo-button-glyph {
|
|
29
|
+
opacity: 1;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&.neo-sort-hidden {
|
|
34
|
+
.neo-button-glyph {
|
|
35
|
+
opacity: 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.neo-sort-desc {
|
|
40
|
+
.neo-button-glyph {
|
|
41
|
+
transform: rotate(180deg);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:focus {
|
|
46
|
+
outline : 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.icon-right {
|
|
50
|
+
flex-direction: row-reverse;
|
|
51
|
+
|
|
52
|
+
.neo-button-glyph {
|
|
53
|
+
margin: 0 0 0 6px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.neo-button-glyph {
|
|
58
|
+
color : v(grid-header-button-glyph-color);
|
|
59
|
+
font-size : 12px;
|
|
60
|
+
margin : 0 6px 0 0;
|
|
61
|
+
opacity : 0;
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
transition : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
64
|
+
will-change : opacity, transform;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.neo-button-text {
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
.neo-selection-cellcolumnmodel,
|
|
60
60
|
.neo-selection-cellcolumnrowmodel,
|
|
61
61
|
.neo-selection-cellmodel,
|
|
62
|
-
.neo-selection-columnmodel,
|
|
63
62
|
.neo-selection-cellrowmodel,
|
|
63
|
+
.neo-selection-columnmodel,
|
|
64
64
|
.neo-selection-rowmodel {
|
|
65
65
|
.neo-table-row {
|
|
66
66
|
&:focus {
|
|
@@ -72,4 +72,4 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
}
|
|
75
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-container-border-color' : #2b2b2b,
|
|
3
|
+
'grid-container-cell-background-color' : #3c3f41,
|
|
4
|
+
'grid-container-cell-background-color-even': #323232,
|
|
5
|
+
'grid-container-color' : #bbb,
|
|
6
|
+
'grid-container-header-cell-border-bottom' : 2px solid #2b2b2b
|
|
7
|
+
));
|
|
8
|
+
|
|
9
|
+
@if $useCssVars == true {
|
|
10
|
+
:root .neo-theme-dark { // .neo-grid-container
|
|
11
|
+
--grid-container-border-color : #{neo(grid-container-border-color)};
|
|
12
|
+
--grid-container-cell-background-color : #{neo(grid-container-cell-background-color)};
|
|
13
|
+
--grid-container-cell-background-color-even: #{neo(grid-container-cell-background-color-even)};
|
|
14
|
+
--grid-container-color : #{neo(grid-container-color)};
|
|
15
|
+
--grid-container-header-cell-border-bottom : #{neo(grid-container-header-cell-border-bottom)};
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-cell-background-color-hover' : #54595c,
|
|
3
|
+
'grid-cellmodel-selected-cell-background-color' : #64B5F6,
|
|
4
|
+
'grid-cellmodel-selected-cell-color' : #2b2b2b,
|
|
5
|
+
'grid-cellmodel-selected-column-cell-background-color': #4f558a,
|
|
6
|
+
'grid-cellmodel-selected-column-cell-color' : #bbb,
|
|
7
|
+
'grid-cellrowmodel-selected-cell-background-color' : #64B5F6,
|
|
8
|
+
'grid-cellrowmodel-selected-cell-color' : #2b2b2b,
|
|
9
|
+
'grid-cellrowmodel-selected-row-cell-background-color': #4f558a,
|
|
10
|
+
'grid-cellrowmodel-selected-row-cell-color' : #bbb,
|
|
11
|
+
'grid-rowmodel-selected-cell-background-color' : #64B5F6,
|
|
12
|
+
'grid-rowmodel-selected-cell-color' : #2b2b2b
|
|
13
|
+
));
|
|
14
|
+
|
|
15
|
+
@if $useCssVars == true {
|
|
16
|
+
:root .neo-theme-dark { // .neo-grid-view
|
|
17
|
+
--grid-cell-background-color-hover : #{neo(grid-cell-background-color-hover)};
|
|
18
|
+
--grid-cellmodel-selected-cell-background-color : #{neo(grid-cellmodel-selected-cell-background-color)};
|
|
19
|
+
--grid-cellmodel-selected-cell-color : #{neo(grid-cellmodel-selected-cell-color)};
|
|
20
|
+
--grid-cellmodel-selected-column-cell-background-color: #{neo(grid-cellmodel-selected-column-cell-background-color)};
|
|
21
|
+
--grid-cellmodel-selected-column-cell-color : #{neo(grid-cellmodel-selected-column-cell-color)};
|
|
22
|
+
--grid-cellrowmodel-selected-cell-background-color : #{neo(grid-cellrowmodel-selected-cell-background-color)};
|
|
23
|
+
--grid-cellrowmodel-selected-cell-color : #{neo(grid-cellrowmodel-selected-cell-color)};
|
|
24
|
+
--grid-cellrowmodel-selected-row-cell-background-color: #{neo(grid-cellrowmodel-selected-row-cell-background-color)};
|
|
25
|
+
--grid-cellrowmodel-selected-row-cell-color : #{neo(grid-cellrowmodel-selected-row-cell-color)};
|
|
26
|
+
--grid-rowmodel-selected-cell-background-color : #{neo(grid-rowmodel-selected-cell-background-color)};
|
|
27
|
+
--grid-rowmodel-selected-cell-color : #{neo(grid-rowmodel-selected-cell-color)};
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-header-button-background-color': #323232,
|
|
3
|
+
'grid-header-button-background-image': linear-gradient(#3c3f41, #323232),
|
|
4
|
+
'grid-header-button-color' : #bbb,
|
|
5
|
+
'grid-header-button-glyph-color' : #bbb
|
|
6
|
+
));
|
|
7
|
+
|
|
8
|
+
@if $useCssVars == true {
|
|
9
|
+
:root .neo-theme-dark { // .neo-grid-header
|
|
10
|
+
--grid-header-button-background-color: #{neo(grid-header-button-background-color)};
|
|
11
|
+
--grid-header-button-background-image: #{neo(grid-header-button-background-image)};
|
|
12
|
+
--grid-header-button-color : #{neo(grid-header-button-color)};
|
|
13
|
+
--grid-header-button-glyph-color : #{neo(grid-header-button-glyph-color)};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-container-border-color' : #ddd,
|
|
3
|
+
'grid-container-cell-background-color' : #fff,
|
|
4
|
+
'grid-container-cell-background-color-even': #f2f2f2,
|
|
5
|
+
'grid-container-color' : #666,
|
|
6
|
+
'grid-container-header-cell-border-bottom' : 1px solid #ddd
|
|
7
|
+
));
|
|
8
|
+
|
|
9
|
+
@if $useCssVars == true {
|
|
10
|
+
:root .neo-theme-light { // .neo-grid-container
|
|
11
|
+
--grid-container-border-color : #{neo(grid-container-border-color)};
|
|
12
|
+
--grid-container-cell-background-color : #{neo(grid-container-cell-background-color)};
|
|
13
|
+
--grid-container-cell-background-color-even: #{neo(grid-container-cell-background-color-even)};
|
|
14
|
+
--grid-container-color : #{neo(grid-container-color)};
|
|
15
|
+
--grid-container-header-cell-border-bottom : #{neo(grid-container-header-cell-border-bottom)};
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-cell-background-color-hover' : lighten(#33343d, 70%),
|
|
3
|
+
'grid-cellmodel-selected-cell-background-color' : lighten(#64B5F6, 22%),
|
|
4
|
+
'grid-cellmodel-selected-cell-color' : #2b2b2b,
|
|
5
|
+
'grid-cellmodel-selected-column-cell-background-color': lighten(#4f558a, 52%),
|
|
6
|
+
'grid-cellmodel-selected-column-cell-color' : #2b2b2b,
|
|
7
|
+
'grid-cellrowmodel-selected-cell-background-color' : lighten(#64B5F6, 22%),
|
|
8
|
+
'grid-cellrowmodel-selected-cell-color' : #2b2b2b,
|
|
9
|
+
'grid-cellrowmodel-selected-row-cell-background-color': lighten(#4f558a, 52%),
|
|
10
|
+
'grid-cellrowmodel-selected-row-cell-color' : #2b2b2b,
|
|
11
|
+
'grid-rowmodel-selected-cell-background-color' : lighten(#64B5F6, 22%),
|
|
12
|
+
'grid-rowmodel-selected-cell-color' : #2b2b2b
|
|
13
|
+
));
|
|
14
|
+
|
|
15
|
+
@if $useCssVars == true {
|
|
16
|
+
:root .neo-theme-light { // .neo-grid-view
|
|
17
|
+
--grid-cell-background-color-hover : #{neo(grid-cell-background-color-hover)};
|
|
18
|
+
--grid-cellmodel-selected-cell-background-color : #{neo(grid-cellmodel-selected-cell-background-color)};
|
|
19
|
+
--grid-cellmodel-selected-cell-color : #{neo(grid-cellmodel-selected-cell-color)};
|
|
20
|
+
--grid-cellmodel-selected-column-cell-background-color: #{neo(grid-cellmodel-selected-column-cell-background-color)};
|
|
21
|
+
--grid-cellmodel-selected-column-cell-color : #{neo(grid-cellmodel-selected-column-cell-color)};
|
|
22
|
+
--grid-cellrowmodel-selected-cell-background-color : #{neo(grid-cellrowmodel-selected-cell-background-color)};
|
|
23
|
+
--grid-cellrowmodel-selected-cell-color : #{neo(grid-cellrowmodel-selected-cell-color)};
|
|
24
|
+
--grid-cellrowmodel-selected-row-cell-background-color: #{neo(grid-cellrowmodel-selected-row-cell-background-color)};
|
|
25
|
+
--grid-cellrowmodel-selected-row-cell-color : #{neo(grid-cellrowmodel-selected-row-cell-color)};
|
|
26
|
+
--grid-rowmodel-selected-cell-background-color : #{neo(grid-rowmodel-selected-cell-background-color)};
|
|
27
|
+
--grid-rowmodel-selected-cell-color : #{neo(grid-rowmodel-selected-cell-color)};
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'grid-header-button-background-color': #5d83a7,
|
|
3
|
+
'grid-header-button-background-image': none,
|
|
4
|
+
'grid-header-button-color' : #fff,
|
|
5
|
+
'grid-header-button-glyph-color' : #fff
|
|
6
|
+
));
|
|
7
|
+
|
|
8
|
+
@if $useCssVars == true {
|
|
9
|
+
:root .neo-theme-light { // .neo-grid-header-button
|
|
10
|
+
--grid-header-button-background-color: #{neo(grid-header-button-background-color)};
|
|
11
|
+
--grid-header-button-background-image: #{neo(grid-header-button-background-image)};
|
|
12
|
+
--grid-header-button-color : #{neo(grid-header-button-color)};
|
|
13
|
+
--grid-header-button-glyph-color : #{neo(grid-header-button-glyph-color)};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
File without changes
|