@elliemae/ds-grid 2.4.2-rc.9 → 2.4.3-rc.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/cjs/utils/styles.js +77 -32
- package/esm/utils/styles.js +77 -28
- package/package.json +2 -2
package/cjs/utils/styles.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
6
5
|
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
6
|
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
7
|
require('core-js/modules/esnext.iterator.for-each.js');
|
|
@@ -10,12 +9,8 @@ require('core-js/modules/esnext.async-iterator.map.js');
|
|
|
10
9
|
require('core-js/modules/esnext.iterator.map.js');
|
|
11
10
|
var dsSystem = require('@elliemae/ds-system');
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
16
|
-
|
|
17
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
18
|
-
const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n ", "\n"])), _ref => {
|
|
12
|
+
const manageSpan = dsSystem.css`
|
|
13
|
+
${_ref => {
|
|
19
14
|
let {
|
|
20
15
|
isSpanParent,
|
|
21
16
|
span,
|
|
@@ -24,10 +19,12 @@ const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTem
|
|
|
24
19
|
if (!isSpanParent) return '';
|
|
25
20
|
|
|
26
21
|
if (typeof span === 'number') {
|
|
27
|
-
return
|
|
22
|
+
return `
|
|
23
|
+
-ms-grid-column: auto / span ${span};
|
|
24
|
+
grid-column: auto / span ${span};`;
|
|
28
25
|
}
|
|
29
26
|
|
|
30
|
-
if (typeof span !== 'object') return
|
|
27
|
+
if (typeof span !== 'object') return ``; // Span object
|
|
31
28
|
|
|
32
29
|
let data = '';
|
|
33
30
|
Object.keys(theme.media).forEach(key => {
|
|
@@ -37,15 +34,23 @@ const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTem
|
|
|
37
34
|
|
|
38
35
|
if (!!spanValue && theme.breakpoints[theKey]) {
|
|
39
36
|
if (theKey === 'small') {
|
|
40
|
-
data +=
|
|
37
|
+
data += `
|
|
38
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
39
|
+
grid-column: auto / span ${spanValue};
|
|
40
|
+
`;
|
|
41
41
|
} else {
|
|
42
|
-
data +=
|
|
42
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
43
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
44
|
+
grid-column: auto / span ${spanValue};
|
|
45
|
+
}`;
|
|
43
46
|
}
|
|
44
47
|
}
|
|
45
48
|
});
|
|
46
49
|
return data;
|
|
47
|
-
}
|
|
48
|
-
|
|
50
|
+
}}
|
|
51
|
+
`;
|
|
52
|
+
const manageCols = dsSystem.css`
|
|
53
|
+
${_ref2 => {
|
|
49
54
|
let {
|
|
50
55
|
cols,
|
|
51
56
|
theme,
|
|
@@ -60,18 +65,30 @@ const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedT
|
|
|
60
65
|
|
|
61
66
|
if (!!colValue && Array.isArray(colValue)) {
|
|
62
67
|
const mtg = dsSystem.mapTemplateGrid(colValue).join(' ');
|
|
63
|
-
const mtgs = dsSystem.mapTemplateGrid(colValue).map(c =>
|
|
68
|
+
const mtgs = dsSystem.mapTemplateGrid(colValue).map(c => `minmax(0, ${c})`).join(' ');
|
|
64
69
|
|
|
65
70
|
if (theKey === 'small') {
|
|
66
|
-
data +=
|
|
71
|
+
data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
72
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
73
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
74
|
+
grid-template-columns: ${mtgs || 'auto'};`;
|
|
67
75
|
} else {
|
|
68
|
-
data +=
|
|
76
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
77
|
+
-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
78
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
79
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
80
|
+
grid-template-columns: ${mtgs || 'auto'};
|
|
81
|
+
}`;
|
|
69
82
|
}
|
|
70
83
|
} else if (!!colValue && isSpanParent) {
|
|
71
84
|
if (theKey === 'small') {
|
|
72
|
-
data +=
|
|
85
|
+
data += `-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
86
|
+
grid-template-columns: repeat(${colValue}, 1fr);`;
|
|
73
87
|
} else {
|
|
74
|
-
data +=
|
|
88
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
89
|
+
-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
90
|
+
grid-template-columns: repeat(${colValue}, 1fr);
|
|
91
|
+
}`;
|
|
75
92
|
}
|
|
76
93
|
}
|
|
77
94
|
});
|
|
@@ -80,17 +97,25 @@ const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedT
|
|
|
80
97
|
|
|
81
98
|
if (Array.isArray(cols)) {
|
|
82
99
|
const mtg = dsSystem.mapTemplateGrid(cols).join(' ');
|
|
83
|
-
const mtgs = dsSystem.mapTemplateGrid(cols).map(c =>
|
|
84
|
-
return
|
|
100
|
+
const mtgs = dsSystem.mapTemplateGrid(cols).map(c => `minmax(0, ${c})`).join(' ');
|
|
101
|
+
return `
|
|
102
|
+
-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
103
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
104
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
105
|
+
grid-template-columns: ${mtgs || 'auto'};`;
|
|
85
106
|
}
|
|
86
107
|
|
|
87
108
|
if (isSpanParent) {
|
|
88
|
-
return
|
|
109
|
+
return `
|
|
110
|
+
-ms-grid-columns: repeat(${cols}, 1fr);
|
|
111
|
+
grid-template-columns: repeat(${cols}, 1fr);`;
|
|
89
112
|
}
|
|
90
113
|
|
|
91
114
|
return '';
|
|
92
|
-
}
|
|
93
|
-
|
|
115
|
+
}}
|
|
116
|
+
`;
|
|
117
|
+
const manageRows = dsSystem.css`
|
|
118
|
+
${_ref3 => {
|
|
94
119
|
let {
|
|
95
120
|
rows,
|
|
96
121
|
theme,
|
|
@@ -105,18 +130,30 @@ const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedT
|
|
|
105
130
|
|
|
106
131
|
if (rowValue && Array.isArray(rowValue)) {
|
|
107
132
|
const mtg = dsSystem.mapTemplateGrid(rowValue).join(' ');
|
|
108
|
-
const mtgs = dsSystem.mapTemplateGrid(rowValue).map(c =>
|
|
133
|
+
const mtgs = dsSystem.mapTemplateGrid(rowValue).map(c => `minmax(0, ${c})`).join(' ');
|
|
109
134
|
|
|
110
135
|
if (key === 'small') {
|
|
111
|
-
data +=
|
|
136
|
+
data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
137
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
138
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
139
|
+
grid-template-rows: ${mtgs || 'auto'};`;
|
|
112
140
|
} else {
|
|
113
|
-
data +=
|
|
141
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
142
|
+
-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
143
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
144
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
145
|
+
grid-template-rows: ${mtgs || 'auto'};
|
|
146
|
+
}`;
|
|
114
147
|
}
|
|
115
148
|
} else if (!!rowValue && isSpanParent) {
|
|
116
149
|
if (theKey === 'small') {
|
|
117
|
-
data +=
|
|
150
|
+
data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
151
|
+
grid-template-rows: repeat(${rowValue}, 1fr);`;
|
|
118
152
|
} else {
|
|
119
|
-
data +=
|
|
153
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
154
|
+
-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
155
|
+
grid-template-rows: repeat(${rowValue}, 1fr);
|
|
156
|
+
}`;
|
|
120
157
|
}
|
|
121
158
|
}
|
|
122
159
|
});
|
|
@@ -125,16 +162,24 @@ const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedT
|
|
|
125
162
|
|
|
126
163
|
if (Array.isArray(rows)) {
|
|
127
164
|
const mtg = dsSystem.mapTemplateGrid(rows).join(' ');
|
|
128
|
-
const mtgs = dsSystem.mapTemplateGrid(rows).map(c =>
|
|
129
|
-
return
|
|
165
|
+
const mtgs = dsSystem.mapTemplateGrid(rows).map(c => `minmax(0, ${c})`).join(' ');
|
|
166
|
+
return `
|
|
167
|
+
-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
168
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
169
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
170
|
+
grid-template-rows: ${mtgs || 'auto'};
|
|
171
|
+
`;
|
|
130
172
|
}
|
|
131
173
|
|
|
132
174
|
if (isSpanParent) {
|
|
133
|
-
return
|
|
175
|
+
return `
|
|
176
|
+
-ms-grid-rows: repeat(${rows}, 1fr);
|
|
177
|
+
grid-template-rows: repeat(${rows}, 1fr);`;
|
|
134
178
|
}
|
|
135
179
|
|
|
136
180
|
return '';
|
|
137
|
-
}
|
|
181
|
+
}}
|
|
182
|
+
`;
|
|
138
183
|
|
|
139
184
|
exports.manageCols = manageCols;
|
|
140
185
|
exports.manageRows = manageRows;
|
package/esm/utils/styles.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
|
|
2
1
|
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
3
2
|
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
3
|
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
@@ -6,8 +5,8 @@ import 'core-js/modules/esnext.async-iterator.map.js';
|
|
|
6
5
|
import 'core-js/modules/esnext.iterator.map.js';
|
|
7
6
|
import { css, mapTemplateGrid } from '@elliemae/ds-system';
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const manageSpan = css`
|
|
9
|
+
${_ref => {
|
|
11
10
|
let {
|
|
12
11
|
isSpanParent,
|
|
13
12
|
span,
|
|
@@ -16,10 +15,12 @@ const manageSpan = css(_templateObject || (_templateObject = _taggedTemplateLite
|
|
|
16
15
|
if (!isSpanParent) return '';
|
|
17
16
|
|
|
18
17
|
if (typeof span === 'number') {
|
|
19
|
-
return
|
|
18
|
+
return `
|
|
19
|
+
-ms-grid-column: auto / span ${span};
|
|
20
|
+
grid-column: auto / span ${span};`;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
if (typeof span !== 'object') return
|
|
23
|
+
if (typeof span !== 'object') return ``; // Span object
|
|
23
24
|
|
|
24
25
|
let data = '';
|
|
25
26
|
Object.keys(theme.media).forEach(key => {
|
|
@@ -29,15 +30,23 @@ const manageSpan = css(_templateObject || (_templateObject = _taggedTemplateLite
|
|
|
29
30
|
|
|
30
31
|
if (!!spanValue && theme.breakpoints[theKey]) {
|
|
31
32
|
if (theKey === 'small') {
|
|
32
|
-
data +=
|
|
33
|
+
data += `
|
|
34
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
35
|
+
grid-column: auto / span ${spanValue};
|
|
36
|
+
`;
|
|
33
37
|
} else {
|
|
34
|
-
data +=
|
|
38
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
39
|
+
-ms-grid-column: auto / span ${spanValue};
|
|
40
|
+
grid-column: auto / span ${spanValue};
|
|
41
|
+
}`;
|
|
35
42
|
}
|
|
36
43
|
}
|
|
37
44
|
});
|
|
38
45
|
return data;
|
|
39
|
-
}
|
|
40
|
-
|
|
46
|
+
}}
|
|
47
|
+
`;
|
|
48
|
+
const manageCols = css`
|
|
49
|
+
${_ref2 => {
|
|
41
50
|
let {
|
|
42
51
|
cols,
|
|
43
52
|
theme,
|
|
@@ -52,18 +61,30 @@ const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
|
|
|
52
61
|
|
|
53
62
|
if (!!colValue && Array.isArray(colValue)) {
|
|
54
63
|
const mtg = mapTemplateGrid(colValue).join(' ');
|
|
55
|
-
const mtgs = mapTemplateGrid(colValue).map(c =>
|
|
64
|
+
const mtgs = mapTemplateGrid(colValue).map(c => `minmax(0, ${c})`).join(' ');
|
|
56
65
|
|
|
57
66
|
if (theKey === 'small') {
|
|
58
|
-
data +=
|
|
67
|
+
data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
68
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
69
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
70
|
+
grid-template-columns: ${mtgs || 'auto'};`;
|
|
59
71
|
} else {
|
|
60
|
-
data +=
|
|
72
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
73
|
+
-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
74
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
75
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
76
|
+
grid-template-columns: ${mtgs || 'auto'};
|
|
77
|
+
}`;
|
|
61
78
|
}
|
|
62
79
|
} else if (!!colValue && isSpanParent) {
|
|
63
80
|
if (theKey === 'small') {
|
|
64
|
-
data +=
|
|
81
|
+
data += `-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
82
|
+
grid-template-columns: repeat(${colValue}, 1fr);`;
|
|
65
83
|
} else {
|
|
66
|
-
data +=
|
|
84
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
85
|
+
-ms-grid-columns: repeat(${colValue}, 1fr);
|
|
86
|
+
grid-template-columns: repeat(${colValue}, 1fr);
|
|
87
|
+
}`;
|
|
67
88
|
}
|
|
68
89
|
}
|
|
69
90
|
});
|
|
@@ -72,17 +93,25 @@ const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
|
|
|
72
93
|
|
|
73
94
|
if (Array.isArray(cols)) {
|
|
74
95
|
const mtg = mapTemplateGrid(cols).join(' ');
|
|
75
|
-
const mtgs = mapTemplateGrid(cols).map(c =>
|
|
76
|
-
return
|
|
96
|
+
const mtgs = mapTemplateGrid(cols).map(c => `minmax(0, ${c})`).join(' ');
|
|
97
|
+
return `
|
|
98
|
+
-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
|
|
99
|
+
grid-template-columns: ${mtg || 'auto'};
|
|
100
|
+
-ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
|
|
101
|
+
grid-template-columns: ${mtgs || 'auto'};`;
|
|
77
102
|
}
|
|
78
103
|
|
|
79
104
|
if (isSpanParent) {
|
|
80
|
-
return
|
|
105
|
+
return `
|
|
106
|
+
-ms-grid-columns: repeat(${cols}, 1fr);
|
|
107
|
+
grid-template-columns: repeat(${cols}, 1fr);`;
|
|
81
108
|
}
|
|
82
109
|
|
|
83
110
|
return '';
|
|
84
|
-
}
|
|
85
|
-
|
|
111
|
+
}}
|
|
112
|
+
`;
|
|
113
|
+
const manageRows = css`
|
|
114
|
+
${_ref3 => {
|
|
86
115
|
let {
|
|
87
116
|
rows,
|
|
88
117
|
theme,
|
|
@@ -97,18 +126,30 @@ const manageRows = css(_templateObject3 || (_templateObject3 = _taggedTemplateLi
|
|
|
97
126
|
|
|
98
127
|
if (rowValue && Array.isArray(rowValue)) {
|
|
99
128
|
const mtg = mapTemplateGrid(rowValue).join(' ');
|
|
100
|
-
const mtgs = mapTemplateGrid(rowValue).map(c =>
|
|
129
|
+
const mtgs = mapTemplateGrid(rowValue).map(c => `minmax(0, ${c})`).join(' ');
|
|
101
130
|
|
|
102
131
|
if (key === 'small') {
|
|
103
|
-
data +=
|
|
132
|
+
data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
133
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
134
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
135
|
+
grid-template-rows: ${mtgs || 'auto'};`;
|
|
104
136
|
} else {
|
|
105
|
-
data +=
|
|
137
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
138
|
+
-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
139
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
140
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
141
|
+
grid-template-rows: ${mtgs || 'auto'};
|
|
142
|
+
}`;
|
|
106
143
|
}
|
|
107
144
|
} else if (!!rowValue && isSpanParent) {
|
|
108
145
|
if (theKey === 'small') {
|
|
109
|
-
data +=
|
|
146
|
+
data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
147
|
+
grid-template-rows: repeat(${rowValue}, 1fr);`;
|
|
110
148
|
} else {
|
|
111
|
-
data +=
|
|
149
|
+
data += `@media (min-width: ${theme.breakpoints[theKey]}) {
|
|
150
|
+
-ms-grid-rows: repeat(${rowValue}, 1fr);
|
|
151
|
+
grid-template-rows: repeat(${rowValue}, 1fr);
|
|
152
|
+
}`;
|
|
112
153
|
}
|
|
113
154
|
}
|
|
114
155
|
});
|
|
@@ -117,15 +158,23 @@ const manageRows = css(_templateObject3 || (_templateObject3 = _taggedTemplateLi
|
|
|
117
158
|
|
|
118
159
|
if (Array.isArray(rows)) {
|
|
119
160
|
const mtg = mapTemplateGrid(rows).join(' ');
|
|
120
|
-
const mtgs = mapTemplateGrid(rows).map(c =>
|
|
121
|
-
return
|
|
161
|
+
const mtgs = mapTemplateGrid(rows).map(c => `minmax(0, ${c})`).join(' ');
|
|
162
|
+
return `
|
|
163
|
+
-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};
|
|
164
|
+
grid-template-rows: ${mtg || 'auto'};
|
|
165
|
+
-ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};
|
|
166
|
+
grid-template-rows: ${mtgs || 'auto'};
|
|
167
|
+
`;
|
|
122
168
|
}
|
|
123
169
|
|
|
124
170
|
if (isSpanParent) {
|
|
125
|
-
return
|
|
171
|
+
return `
|
|
172
|
+
-ms-grid-rows: repeat(${rows}, 1fr);
|
|
173
|
+
grid-template-rows: repeat(${rows}, 1fr);`;
|
|
126
174
|
}
|
|
127
175
|
|
|
128
176
|
return '';
|
|
129
|
-
}
|
|
177
|
+
}}
|
|
178
|
+
`;
|
|
130
179
|
|
|
131
180
|
export { manageCols, manageRows, manageSpan };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-grid",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.3-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Grid",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"build": "node ../../scripts/build/build.js"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@elliemae/ds-system": "2.4.
|
|
59
|
+
"@elliemae/ds-system": "2.4.3-rc.1",
|
|
60
60
|
"@xstyled/styled-components": "~3.1.1",
|
|
61
61
|
"react-desc": "~4.1.3"
|
|
62
62
|
},
|