@lowdefy/layout 5.5.1 → 6.0.0
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/dist/Area.js +2 -0
- package/dist/grid.css +87 -0
- package/package.json +8 -8
package/dist/Area.js
CHANGED
|
@@ -37,10 +37,12 @@ const Area = ({ area = {}, areaKey, children, id, layout, className, style })=>{
|
|
|
37
37
|
layout
|
|
38
38
|
});
|
|
39
39
|
const gapStyle = deriveAreaStyle(derivedArea);
|
|
40
|
+
const isColumn = (derivedArea.direction ?? '').startsWith('column');
|
|
40
41
|
return /*#__PURE__*/ React.createElement("div", {
|
|
41
42
|
id: id,
|
|
42
43
|
className: [
|
|
43
44
|
'lf-row',
|
|
45
|
+
isColumn && 'lf-row-column',
|
|
44
46
|
className
|
|
45
47
|
].filter(Boolean).join(' '),
|
|
46
48
|
style: {
|
package/dist/grid.css
CHANGED
|
@@ -14,6 +14,75 @@
|
|
|
14
14
|
limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
+
/*
|
|
18
|
+
Layout inputs must NOT inherit.
|
|
19
|
+
|
|
20
|
+
grid.css reads each of these custom properties through a var(…, fallback) chain
|
|
21
|
+
so a block falls through to its own less-specific value — e.g.
|
|
22
|
+
--lf-span-lg → --lf-span-md → --lf-span, and --lf-gap-x-md → … → --lf-gap-x → 0.
|
|
23
|
+
Left unregistered, custom properties inherit by default, so a nested row/column
|
|
24
|
+
with no value of its own picks up an ANCESTOR's value instead of falling through:
|
|
25
|
+
a row's gap leaks as row-gap into every nested row, and a column's breakpoint
|
|
26
|
+
span leaks into nested columns.
|
|
27
|
+
|
|
28
|
+
Registering them with inherits:false stops the cascade. The universal syntax
|
|
29
|
+
("*") with no initial-value preserves the "guaranteed-invalid when unset"
|
|
30
|
+
behaviour, so the existing var() fallback chains still resolve exactly as before
|
|
31
|
+
(universal syntax is not type-checked, so calc() usage is unchanged too).
|
|
32
|
+
|
|
33
|
+
--_gap is intentionally left unregistered: it is derived per-row and must inherit
|
|
34
|
+
from the row down to its columns for the flex-basis gap math.
|
|
35
|
+
*/
|
|
36
|
+
@property --lf-span { syntax: "*"; inherits: false; }
|
|
37
|
+
@property --lf-span-sm { syntax: "*"; inherits: false; }
|
|
38
|
+
@property --lf-span-md { syntax: "*"; inherits: false; }
|
|
39
|
+
@property --lf-span-lg { syntax: "*"; inherits: false; }
|
|
40
|
+
@property --lf-span-xl { syntax: "*"; inherits: false; }
|
|
41
|
+
@property --lf-span-2xl { syntax: "*"; inherits: false; }
|
|
42
|
+
@property --lf-display { syntax: "*"; inherits: false; }
|
|
43
|
+
@property --lf-display-sm { syntax: "*"; inherits: false; }
|
|
44
|
+
@property --lf-display-md { syntax: "*"; inherits: false; }
|
|
45
|
+
@property --lf-display-lg { syntax: "*"; inherits: false; }
|
|
46
|
+
@property --lf-display-xl { syntax: "*"; inherits: false; }
|
|
47
|
+
@property --lf-display-2xl { syntax: "*"; inherits: false; }
|
|
48
|
+
@property --lf-offset { syntax: "*"; inherits: false; }
|
|
49
|
+
@property --lf-offset-sm { syntax: "*"; inherits: false; }
|
|
50
|
+
@property --lf-offset-md { syntax: "*"; inherits: false; }
|
|
51
|
+
@property --lf-offset-lg { syntax: "*"; inherits: false; }
|
|
52
|
+
@property --lf-offset-xl { syntax: "*"; inherits: false; }
|
|
53
|
+
@property --lf-offset-2xl { syntax: "*"; inherits: false; }
|
|
54
|
+
@property --lf-order { syntax: "*"; inherits: false; }
|
|
55
|
+
@property --lf-order-sm { syntax: "*"; inherits: false; }
|
|
56
|
+
@property --lf-order-md { syntax: "*"; inherits: false; }
|
|
57
|
+
@property --lf-order-lg { syntax: "*"; inherits: false; }
|
|
58
|
+
@property --lf-order-xl { syntax: "*"; inherits: false; }
|
|
59
|
+
@property --lf-order-2xl { syntax: "*"; inherits: false; }
|
|
60
|
+
@property --lf-push { syntax: "*"; inherits: false; }
|
|
61
|
+
@property --lf-push-sm { syntax: "*"; inherits: false; }
|
|
62
|
+
@property --lf-push-md { syntax: "*"; inherits: false; }
|
|
63
|
+
@property --lf-push-lg { syntax: "*"; inherits: false; }
|
|
64
|
+
@property --lf-push-xl { syntax: "*"; inherits: false; }
|
|
65
|
+
@property --lf-push-2xl { syntax: "*"; inherits: false; }
|
|
66
|
+
@property --lf-pull { syntax: "*"; inherits: false; }
|
|
67
|
+
@property --lf-pull-sm { syntax: "*"; inherits: false; }
|
|
68
|
+
@property --lf-pull-md { syntax: "*"; inherits: false; }
|
|
69
|
+
@property --lf-pull-lg { syntax: "*"; inherits: false; }
|
|
70
|
+
@property --lf-pull-xl { syntax: "*"; inherits: false; }
|
|
71
|
+
@property --lf-pull-2xl { syntax: "*"; inherits: false; }
|
|
72
|
+
@property --lf-gap-x { syntax: "*"; inherits: false; }
|
|
73
|
+
@property --lf-gap-x-sm { syntax: "*"; inherits: false; }
|
|
74
|
+
@property --lf-gap-x-md { syntax: "*"; inherits: false; }
|
|
75
|
+
@property --lf-gap-x-lg { syntax: "*"; inherits: false; }
|
|
76
|
+
@property --lf-gap-x-xl { syntax: "*"; inherits: false; }
|
|
77
|
+
@property --lf-gap-x-2xl { syntax: "*"; inherits: false; }
|
|
78
|
+
@property --lf-gap-y { syntax: "*"; inherits: false; }
|
|
79
|
+
@property --lf-gap-y-sm { syntax: "*"; inherits: false; }
|
|
80
|
+
@property --lf-gap-y-md { syntax: "*"; inherits: false; }
|
|
81
|
+
@property --lf-gap-y-lg { syntax: "*"; inherits: false; }
|
|
82
|
+
@property --lf-gap-y-xl { syntax: "*"; inherits: false; }
|
|
83
|
+
@property --lf-gap-y-2xl { syntax: "*"; inherits: false; }
|
|
84
|
+
|
|
85
|
+
|
|
17
86
|
@layer components {
|
|
18
87
|
/* =====================================================
|
|
19
88
|
Row (Area)
|
|
@@ -110,6 +179,24 @@
|
|
|
110
179
|
order: var(--lf-order, 0);
|
|
111
180
|
}
|
|
112
181
|
|
|
182
|
+
/* =====================================================
|
|
183
|
+
Column-direction areas
|
|
184
|
+
|
|
185
|
+
The span flex-basis formula sizes the MAIN axis, which in
|
|
186
|
+
a column-direction area is vertical. A percentage basis
|
|
187
|
+
against the area's indefinite height resolves to content
|
|
188
|
+
size, so it happens to render correctly — but as soon as
|
|
189
|
+
the height becomes definite (an explicit height, or a
|
|
190
|
+
DOM-cloning rasterizer like html-to-image inlining
|
|
191
|
+
computed px heights) basis 100% overflows the area and
|
|
192
|
+
wrap spills blocks into a new column. Blocks in column
|
|
193
|
+
areas size their height by content; span still constrains
|
|
194
|
+
width via max-width.
|
|
195
|
+
===================================================== */
|
|
196
|
+
.lf-row-column > .lf-col {
|
|
197
|
+
flex-basis: auto;
|
|
198
|
+
}
|
|
199
|
+
|
|
113
200
|
/* Push/pull: only apply positioning when class is present */
|
|
114
201
|
.lf-col-push {
|
|
115
202
|
position: relative;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -34,21 +34,21 @@
|
|
|
34
34
|
"dist/*"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@lowdefy/block-utils": "
|
|
38
|
-
"@lowdefy/helpers": "
|
|
37
|
+
"@lowdefy/block-utils": "6.0.0",
|
|
38
|
+
"@lowdefy/helpers": "6.0.0",
|
|
39
39
|
"react": "18.2.0",
|
|
40
40
|
"react-dom": "18.2.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@jest/globals": "28.1.3",
|
|
44
|
-
"@lowdefy/block-dev": "
|
|
45
|
-
"@lowdefy/jest-yaml-transform": "
|
|
46
|
-
"@swc/cli": "0.8.
|
|
47
|
-
"@swc/core": "1.15.
|
|
44
|
+
"@lowdefy/block-dev": "6.0.0",
|
|
45
|
+
"@lowdefy/jest-yaml-transform": "6.0.0",
|
|
46
|
+
"@swc/cli": "0.8.1",
|
|
47
|
+
"@swc/core": "1.15.32",
|
|
48
48
|
"@swc/jest": "0.2.39",
|
|
49
49
|
"@testing-library/dom": "8.19.1",
|
|
50
50
|
"@testing-library/react": "13.4.0",
|
|
51
|
-
"@testing-library/user-event": "14.
|
|
51
|
+
"@testing-library/user-event": "14.6.1",
|
|
52
52
|
"copyfiles": "2.4.1",
|
|
53
53
|
"jest": "28.1.3",
|
|
54
54
|
"jest-environment-jsdom": "28.1.3",
|