@bedrock-layout/solid 0.10.0 → 0.11.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/lib/index.cjs.js +35 -26
- package/lib/index.d.ts +1 -0
- package/lib/index.m.js +116 -70
- package/lib/index.umd.js +33 -24
- package/lib/masonry-grid.d.ts +3 -0
- package/lib/spacing-constants.d.ts +1 -1
- package/package.json +2 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var X=Object.defineProperty,H=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))j.call(t,n)&&M(e,n,t[n]);if(b)for(var n of b(t))I.call(t,n)&&M(e,n,t[n]);return e},w=(e,t)=>H(e,F(t));var P=(e,t)=>{var n={};for(var r in e)j.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&b)for(var r of b(e))t.indexOf(r)<0&&I.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var o=require("solid-styled-components"),p=require("@bedrock-layout/register-resize-callback"),s=require("solid-js");function R(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const k={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function G(e){return e.reduce((t,[n,r])=>w(g({},t),{[n]:r}),{})}const u=(e,t)=>{var i,l;const n=(l=(i=t==null?void 0:t.space)!=null?i:t==null?void 0:t.spacing)!=null?l:k,a=G(Object.entries(n).map(([d,f])=>[d,typeof f=="number"?`${f}px`:f]))[e];return R(a)?a:void 0};function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=o.styled.div`
|
|
2
2
|
@property --maxWidth {
|
|
3
3
|
syntax: "<length-percentage>";
|
|
4
4
|
inherits: false;
|
|
5
5
|
initial-value: 100%;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
--maxWidth: ${e=>
|
|
8
|
+
--maxWidth: ${e=>N(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -17,16 +17,16 @@
|
|
|
17
17
|
|
|
18
18
|
max-inline-size: var(--maxWidth, 100%);
|
|
19
19
|
|
|
20
|
-
${e=>e.centerChildren?
|
|
20
|
+
${e=>e.centerChildren?o.css`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
align-items: center;
|
|
24
24
|
`:""}
|
|
25
25
|
|
|
26
|
-
${e=>e.centerText?
|
|
26
|
+
${e=>e.centerText?o.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function q(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const Q=o.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
42
|
+
--basis: ${e=>q(e.basis)};
|
|
43
43
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function E(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[n,r]=s.createSignal(!1),[a,c]=s.createSignal();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=a();if(i==null)return;const l=p.registerCallback(i,d=>{var m,x;const f=(x=(m=d.borderBoxSize)==null?void 0:m.inlineSize)!=null?x:d.contentRect.width;if(f>0){const S=t===void 0?f<=e:f>=e&&f<=t;r(S)}});s.onCleanup(l)}),[n,c]}function U(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function J(e){return Array.isArray(e)?e.join("/"):e}function K(e){return U(e)?J(e):void 0}const Y=o.styled.div`
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
display: block;
|
|
59
59
|
inline-size: 100%;
|
|
60
60
|
position: relative;
|
|
61
61
|
overflow: hidden;
|
|
62
62
|
|
|
63
|
-
${e=>{const t=
|
|
63
|
+
${e=>{const t=K(e.ratio);return t?o.css`
|
|
64
64
|
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
object-fit: cover;
|
|
89
89
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,O=o.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -116,7 +116,16 @@
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
119
|
+
`,y=96;function L(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function h(e,t){if(!e)return null;const n=t!=null?t:document.body,r=(e!=null?e:"px").trim().toLowerCase();switch(r){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return Z(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return y;case"cm":return y/2.54;case"mm":return y/25.4;case"pt":return y/72;case"pc":return y/6;case"px":return 1;default:{const[a,c]=L(r);if(isNaN(a))return null;if(!c)return a;const i=h(c,t);return typeof i=="number"?a*i:null}}}function C(e,t){var a;const[n,r]=L(getComputedStyle(e).getPropertyValue(t));return n*((a=h(r,e))!=null?a:1)}function Z(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=C(n,"height")/128;return t.removeChild(n),r}const ee=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,te=o.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,ne=e=>{const[t,n]=s.createSignal(1),[r,a]=s.createSignal(),c=o.useTheme();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=r();if(i==null)return;const l=p.registerCallback(i,({target:d})=>{var z;n(1);const f=e.gutter&&(z=u(e.gutter,c))!=null?z:"1px",m=ee?h(f,d):null,x=Math.max(m!=null?m:1,1),[S]=Array.from(d.children),W=1+Math.min(d.scrollHeight,S.scrollHeight),D=Math.ceil(W/x);n(D)});s.onCleanup(l)}),React.createElement(te,{style:`--rows: ${t()}`,ref:a},e.children)},re=o.styled(O)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,ie=e=>{const t=s.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(a=>React.createElement(ne,{gutter:e.gutter},a));return React.createElement(re,g({},e),r)},v={start:"flex-start",end:"flex-end",center:"center"},$=w(g({},v),{stretch:"stretch"}),V=o.styled.div`
|
|
120
129
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
@@ -128,10 +137,10 @@
|
|
|
128
137
|
flex-wrap: wrap;
|
|
129
138
|
gap: var(--gutter, 0px);
|
|
130
139
|
|
|
131
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
140
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&v[e.justify]?v[e.justify]:v.start};
|
|
132
141
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"
|
|
134
|
-
`;function
|
|
142
|
+
align-items: ${e=>typeof e.align!="undefined"&&$[e.align]?$[e.align]:$.start};
|
|
143
|
+
`;function ae(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ce=o.styled(V)`
|
|
135
144
|
@property --switchAt {
|
|
136
145
|
syntax: "<length-percentage>";
|
|
137
146
|
inherits: true;
|
|
@@ -140,7 +149,7 @@
|
|
|
140
149
|
flex-wrap: nowrap;
|
|
141
150
|
${e=>e.stretch==="all"?"> * { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
|
|
142
151
|
|
|
143
|
-
${e=>
|
|
152
|
+
${e=>ae(e.switchAt)?`
|
|
144
153
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
154
|
flex-wrap: wrap;
|
|
146
155
|
> * {
|
|
@@ -150,10 +159,10 @@
|
|
|
150
159
|
);
|
|
151
160
|
}
|
|
152
161
|
`:""}
|
|
153
|
-
`,
|
|
162
|
+
`,B=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),oe=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function se(e){return t=>{const n=u(t,e);return n!=null?n:"0px"}}function le(e,t){var c;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((c=e==null?void 0:e.spacing)!=null?c:k));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(i=>n.has(i)):t&&Object.keys(t).every(i=>B.has(i))&&Object.values(t).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=se(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[l,d])=>B.has(l)?i+oe(l,a(d)):i,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(i=>a(i)).join(" ")};`:""}const ue=o.styled.div`
|
|
154
163
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
164
|
+
${e=>le(e.theme,e.padding)}
|
|
165
|
+
`,de=o.styled.div`
|
|
157
166
|
box-sizing: border-box;
|
|
158
167
|
> * {
|
|
159
168
|
margin: 0;
|
|
@@ -168,7 +177,7 @@
|
|
|
168
177
|
overflow-x: scroll;
|
|
169
178
|
|
|
170
179
|
scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
|
|
171
|
-
`,
|
|
180
|
+
`,A=o.styled("div")`
|
|
172
181
|
@property --gutter {
|
|
173
182
|
syntax: "<length-percentage>";
|
|
174
183
|
inherits: false;
|
|
@@ -189,7 +198,7 @@
|
|
|
189
198
|
& > [data-bedrock-column] {
|
|
190
199
|
grid-column: span 1 / auto;
|
|
191
200
|
}
|
|
192
|
-
`,
|
|
201
|
+
`,T={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},fe=o.styled.div`
|
|
193
202
|
box-sizing: border-box;
|
|
194
203
|
> * {
|
|
195
204
|
margin: 0;
|
|
@@ -199,8 +208,8 @@
|
|
|
199
208
|
|
|
200
209
|
display: grid;
|
|
201
210
|
gap: var(--gutter, 0px);
|
|
202
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
203
|
-
`,
|
|
211
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
|
|
212
|
+
`,ge=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(fe,g({as:e.as,ref:c,fraction:e.fraction},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))};function me(e){return typeof e=="number"?`${e}px`:e&&R(e)?e:"100vh"}const ye=o.styled.div`
|
|
204
213
|
@property --gutter {
|
|
205
214
|
syntax: "<length-percentage>";
|
|
206
215
|
inherits: false;
|
|
@@ -215,7 +224,7 @@
|
|
|
215
224
|
|
|
216
225
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
226
|
|
|
218
|
-
--minHeight: ${e=>
|
|
227
|
+
--minHeight: ${e=>me(e.minHeight)};
|
|
219
228
|
|
|
220
229
|
> * {
|
|
221
230
|
margin: 0;
|
|
@@ -240,7 +249,7 @@
|
|
|
240
249
|
}
|
|
241
250
|
`:""};
|
|
242
251
|
}
|
|
243
|
-
`,
|
|
252
|
+
`,he=e=>{const c=e,{top:t,bottom:n,children:r}=c,a=P(c,["top","bottom","children"]);return React.createElement(ye,g({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},xe=o.styled.div`
|
|
244
253
|
@property --gutter {
|
|
245
254
|
syntax: "<length-percentage>";
|
|
246
255
|
inherits: false;
|
|
@@ -265,14 +274,14 @@
|
|
|
265
274
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
266
275
|
gap: var(--gutter, 0px);
|
|
267
276
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
268
|
-
`,
|
|
277
|
+
`,be=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(xe,g({as:e.as,ref:c,columns:e.columns},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))},ve=e=>typeof e=="number"?e:1,pe=o.styled.div`
|
|
269
278
|
@property --span {
|
|
270
279
|
syntax: "<number>";
|
|
271
280
|
inherits: true;
|
|
272
281
|
initial-value: 1;
|
|
273
282
|
}
|
|
274
283
|
|
|
275
|
-
--span: ${e=>
|
|
284
|
+
--span: ${e=>ve(e.colSpan)};
|
|
276
285
|
|
|
277
286
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
278
287
|
|
|
@@ -296,4 +305,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
296
305
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
297
306
|
}
|
|
298
307
|
`:""}
|
|
299
|
-
`;exports.Center=
|
|
308
|
+
`;exports.Center=_;exports.Column=pe;exports.ColumnDrop=Q;exports.Columns=be;exports.Cover=he;exports.Frame=Y;exports.Grid=O;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=ie;exports.PadBox=ue;exports.Reel=de;exports.Split=ge;exports.Stack=A;exports.checkIsCSSLength=R;exports.createContainerQuery=E;exports.getSpacingValue=u;exports.spacing=k;
|
package/lib/index.d.ts
CHANGED
package/lib/index.m.js
CHANGED
|
@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { styled, css } from "solid-styled-components";
|
|
32
|
+
import { styled, css, useTheme } from "solid-styled-components";
|
|
33
33
|
import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
|
|
34
|
-
import { createSignal, onMount, createEffect, onCleanup, Switch, Match } from "solid-js";
|
|
34
|
+
import { createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
|
|
35
35
|
function checkIsCSSLength(str) {
|
|
36
36
|
if (typeof str !== "string")
|
|
37
37
|
return false;
|
|
@@ -256,6 +256,118 @@ const Grid = styled("div")`
|
|
|
256
256
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
257
257
|
);
|
|
258
258
|
`;
|
|
259
|
+
const PIXELS_PER_INCH = 96;
|
|
260
|
+
function parseUnit(str) {
|
|
261
|
+
var _a;
|
|
262
|
+
str = String(str);
|
|
263
|
+
const num = parseFloat(str);
|
|
264
|
+
const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
|
|
265
|
+
return [num, unit];
|
|
266
|
+
}
|
|
267
|
+
function toPX(str, element) {
|
|
268
|
+
if (!str)
|
|
269
|
+
return null;
|
|
270
|
+
const elementOrBody = element != null ? element : document.body;
|
|
271
|
+
const safeStr = (str != null ? str : "px").trim().toLowerCase();
|
|
272
|
+
switch (safeStr) {
|
|
273
|
+
case "vmin":
|
|
274
|
+
case "vmax":
|
|
275
|
+
case "vh":
|
|
276
|
+
case "vw":
|
|
277
|
+
case "%":
|
|
278
|
+
return null;
|
|
279
|
+
case "ch":
|
|
280
|
+
case "ex":
|
|
281
|
+
return getSizeBrutal(safeStr, elementOrBody);
|
|
282
|
+
case "em":
|
|
283
|
+
return getPropertyInPX(elementOrBody, "font-size");
|
|
284
|
+
case "rem":
|
|
285
|
+
return getPropertyInPX(document.body, "font-size");
|
|
286
|
+
case "in":
|
|
287
|
+
return PIXELS_PER_INCH;
|
|
288
|
+
case "cm":
|
|
289
|
+
return PIXELS_PER_INCH / 2.54;
|
|
290
|
+
case "mm":
|
|
291
|
+
return PIXELS_PER_INCH / 25.4;
|
|
292
|
+
case "pt":
|
|
293
|
+
return PIXELS_PER_INCH / 72;
|
|
294
|
+
case "pc":
|
|
295
|
+
return PIXELS_PER_INCH / 6;
|
|
296
|
+
case "px":
|
|
297
|
+
return 1;
|
|
298
|
+
default: {
|
|
299
|
+
const [value, units] = parseUnit(safeStr);
|
|
300
|
+
if (isNaN(value))
|
|
301
|
+
return null;
|
|
302
|
+
if (!units)
|
|
303
|
+
return value;
|
|
304
|
+
const px = toPX(units, element);
|
|
305
|
+
return typeof px === "number" ? value * px : null;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
function getPropertyInPX(element, prop) {
|
|
310
|
+
var _a;
|
|
311
|
+
const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
|
|
312
|
+
return value * ((_a = toPX(units, element)) != null ? _a : 1);
|
|
313
|
+
}
|
|
314
|
+
function getSizeBrutal(unit, element) {
|
|
315
|
+
const testDIV = document.createElement("div");
|
|
316
|
+
testDIV.style["height"] = "128" + unit;
|
|
317
|
+
element.appendChild(testDIV);
|
|
318
|
+
const size = getPropertyInPX(testDIV, "height") / 128;
|
|
319
|
+
element.removeChild(testDIV);
|
|
320
|
+
return size;
|
|
321
|
+
}
|
|
322
|
+
const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
|
|
323
|
+
const RowSpanner = styled.div`
|
|
324
|
+
grid-row: span var(--rows, 1);
|
|
325
|
+
|
|
326
|
+
> * {
|
|
327
|
+
display: block;
|
|
328
|
+
height: 100%;
|
|
329
|
+
}
|
|
330
|
+
`;
|
|
331
|
+
const Resizer = (props) => {
|
|
332
|
+
const [rowSpan, setRowSpan] = createSignal(1);
|
|
333
|
+
const [node, nodeRef] = createSignal();
|
|
334
|
+
const theme = useTheme();
|
|
335
|
+
onMount(() => {
|
|
336
|
+
init();
|
|
337
|
+
});
|
|
338
|
+
createEffect(() => {
|
|
339
|
+
const ref = node();
|
|
340
|
+
if (ref === void 0 || ref === null)
|
|
341
|
+
return;
|
|
342
|
+
const cleanup = registerCallback(ref, ({ target }) => {
|
|
343
|
+
var _a;
|
|
344
|
+
setRowSpan(1);
|
|
345
|
+
const gapString = props.gutter ? (_a = getSpacingValue(props.gutter, theme)) != null ? _a : "1px" : "1px";
|
|
346
|
+
const maybeGap = isBrowser ? toPX(gapString, target) : null;
|
|
347
|
+
const gap = Math.max(maybeGap != null ? maybeGap : 1, 1);
|
|
348
|
+
const [child] = Array.from(target.children);
|
|
349
|
+
const height = 1 + Math.min(target.scrollHeight, child.scrollHeight);
|
|
350
|
+
const rowHeight = Math.ceil(height / gap);
|
|
351
|
+
setRowSpan(rowHeight);
|
|
352
|
+
});
|
|
353
|
+
onCleanup(cleanup);
|
|
354
|
+
});
|
|
355
|
+
return /* @__PURE__ */ React.createElement(RowSpanner, {
|
|
356
|
+
style: `--rows: ${rowSpan()}`,
|
|
357
|
+
ref: nodeRef
|
|
358
|
+
}, props.children);
|
|
359
|
+
};
|
|
360
|
+
const MasonryGridWrapper = styled(Grid)`
|
|
361
|
+
grid-template-rows: 1px;
|
|
362
|
+
`;
|
|
363
|
+
const MasonryGrid = (props) => {
|
|
364
|
+
const childrenMemo = children(() => props.children);
|
|
365
|
+
const emptyResolvedChildren = [];
|
|
366
|
+
const wrappedChildren = emptyResolvedChildren.concat(childrenMemo()).filter(Boolean).map((child) => /* @__PURE__ */ React.createElement(Resizer, {
|
|
367
|
+
gutter: props.gutter
|
|
368
|
+
}, child));
|
|
369
|
+
return /* @__PURE__ */ React.createElement(MasonryGridWrapper, __spreadValues({}, props), wrappedChildren);
|
|
370
|
+
};
|
|
259
371
|
const justifyMap = {
|
|
260
372
|
start: "flex-start",
|
|
261
373
|
end: "flex-end",
|
|
@@ -424,69 +536,6 @@ const Stack = styled("div")`
|
|
|
424
536
|
grid-column: span 1 / auto;
|
|
425
537
|
}
|
|
426
538
|
`;
|
|
427
|
-
const PIXELS_PER_INCH = 96;
|
|
428
|
-
function parseUnit(str) {
|
|
429
|
-
var _a;
|
|
430
|
-
str = String(str);
|
|
431
|
-
const num = parseFloat(str);
|
|
432
|
-
const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
|
|
433
|
-
return [num, unit];
|
|
434
|
-
}
|
|
435
|
-
function toPX(str, element) {
|
|
436
|
-
if (!str)
|
|
437
|
-
return null;
|
|
438
|
-
const elementOrBody = element != null ? element : document.body;
|
|
439
|
-
const safeStr = (str != null ? str : "px").trim().toLowerCase();
|
|
440
|
-
switch (safeStr) {
|
|
441
|
-
case "vmin":
|
|
442
|
-
case "vmax":
|
|
443
|
-
case "vh":
|
|
444
|
-
case "vw":
|
|
445
|
-
case "%":
|
|
446
|
-
return null;
|
|
447
|
-
case "ch":
|
|
448
|
-
case "ex":
|
|
449
|
-
return getSizeBrutal(safeStr, elementOrBody);
|
|
450
|
-
case "em":
|
|
451
|
-
return getPropertyInPX(elementOrBody, "font-size");
|
|
452
|
-
case "rem":
|
|
453
|
-
return getPropertyInPX(document.body, "font-size");
|
|
454
|
-
case "in":
|
|
455
|
-
return PIXELS_PER_INCH;
|
|
456
|
-
case "cm":
|
|
457
|
-
return PIXELS_PER_INCH / 2.54;
|
|
458
|
-
case "mm":
|
|
459
|
-
return PIXELS_PER_INCH / 25.4;
|
|
460
|
-
case "pt":
|
|
461
|
-
return PIXELS_PER_INCH / 72;
|
|
462
|
-
case "pc":
|
|
463
|
-
return PIXELS_PER_INCH / 6;
|
|
464
|
-
case "px":
|
|
465
|
-
return 1;
|
|
466
|
-
default: {
|
|
467
|
-
const [value, units] = parseUnit(safeStr);
|
|
468
|
-
if (isNaN(value))
|
|
469
|
-
return null;
|
|
470
|
-
if (!units)
|
|
471
|
-
return value;
|
|
472
|
-
const px = toPX(units, element);
|
|
473
|
-
return typeof px === "number" ? value * px : null;
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
}
|
|
477
|
-
function getPropertyInPX(element, prop) {
|
|
478
|
-
var _a;
|
|
479
|
-
const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
|
|
480
|
-
return value * ((_a = toPX(units, element)) != null ? _a : 1);
|
|
481
|
-
}
|
|
482
|
-
function getSizeBrutal(unit, element) {
|
|
483
|
-
const testDIV = document.createElement("div");
|
|
484
|
-
testDIV.style["height"] = "128" + unit;
|
|
485
|
-
element.appendChild(testDIV);
|
|
486
|
-
const size = getPropertyInPX(testDIV, "height") / 128;
|
|
487
|
-
element.removeChild(testDIV);
|
|
488
|
-
return size;
|
|
489
|
-
}
|
|
490
539
|
const fractions = {
|
|
491
540
|
"1/4": "1fr 3fr",
|
|
492
541
|
"1/3": "1fr 2fr",
|
|
@@ -517,7 +566,6 @@ const SplitBase = styled.div`
|
|
|
517
566
|
const Split = (props) => {
|
|
518
567
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
519
568
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
520
|
-
console.log(widthToSwitchAt);
|
|
521
569
|
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
522
570
|
const combineRef = (ref) => {
|
|
523
571
|
var _a;
|
|
@@ -587,7 +635,7 @@ const CoverWrapper = styled.div`
|
|
|
587
635
|
}
|
|
588
636
|
`;
|
|
589
637
|
const Cover = (props) => {
|
|
590
|
-
const _a = props, { top, bottom, children } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
638
|
+
const _a = props, { top, bottom, children: children2 } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
591
639
|
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
592
640
|
"data-bedrock-cover-centered": true
|
|
593
641
|
}, props.children), props.bottom);
|
|
@@ -623,9 +671,7 @@ const ColumnsBase = styled.div`
|
|
|
623
671
|
`;
|
|
624
672
|
const Columns = (props) => {
|
|
625
673
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
626
|
-
console.log(maybePx);
|
|
627
674
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
628
|
-
console.log(widthToSwitchAt);
|
|
629
675
|
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
630
676
|
const combineRef = (ref) => {
|
|
631
677
|
var _a;
|
|
@@ -680,4 +726,4 @@ ${(props) => props.offsetEnd && props.offsetEnd > 0 ? `
|
|
|
680
726
|
}
|
|
681
727
|
` : ""}
|
|
682
728
|
`;
|
|
683
|
-
export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };
|
|
729
|
+
export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, MasonryGrid, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };
|
package/lib/index.umd.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
1
|
+
var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var O=(n,r,l)=>r in n?ve(n,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[r]=l,h=(n,r)=>{for(var l in r||(r={}))L.call(r,l)&&O(n,l,r[l]);if($)for(var l of $(r))V.call(r,l)&&O(n,l,r[l]);return n},M=(n,r)=>we(n,$e(r));var W=(n,r)=>{var l={};for(var c in n)L.call(n,c)&&r.indexOf(c)<0&&(l[c]=n[c]);if(n!=null&&$)for(var c of $(n))r.indexOf(c)<0&&V.call(n,c)&&(l[c]=n[c]);return l};(function(n,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("solid-styled-components"),require("@bedrock-layout/register-resize-callback"),require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components","@bedrock-layout/register-resize-callback","solid-js"],r):(n=typeof globalThis!="undefined"?globalThis:n||self,r(n.solid={},n.solidStyledComponents,n.registerResizeCallback,n.solidJs))})(this,function(n,r,l,c){"use strict";function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const S={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function D(e){return e.reduce((t,[i,o])=>M(h({},t),{[i]:o}),{})}const g=(e,t)=>{var a,f;const i=(f=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?f:S,s=D(Object.entries(i).map(([d,m])=>[d,typeof m=="number"?`${m}px`:m]))[e];return p(s)?s:void 0};function X(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const H=r.styled.div`
|
|
2
2
|
@property --maxWidth {
|
|
3
3
|
syntax: "<length-percentage>";
|
|
4
4
|
inherits: false;
|
|
5
5
|
initial-value: 100%;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
--maxWidth: ${e=>
|
|
8
|
+
--maxWidth: ${e=>X(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -26,7 +26,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
26
26
|
${e=>e.centerText?r.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function F(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const G=r.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,7 +39,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
42
|
+
--basis: ${e=>F(e.basis)};
|
|
43
43
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
@@ -53,14 +53,14 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function R(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[i,o]=c.createSignal(!1),[s,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=s();if(a==null)return;const f=l.registerCallback(a,d=>{var y,w;const m=(w=(y=d.borderBoxSize)==null?void 0:y.inlineSize)!=null?w:d.contentRect.width;if(m>0){const z=t===void 0?m<=e:m>=e&&m<=t;o(z)}});c.onCleanup(f)}),[i,u]}function N(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function _(e){return Array.isArray(e)?e.join("/"):e}function q(e){return N(e)?_(e):void 0}const Q=r.styled.div`
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
display: block;
|
|
59
59
|
inline-size: 100%;
|
|
60
60
|
position: relative;
|
|
61
61
|
overflow: hidden;
|
|
62
62
|
|
|
63
|
-
${e=>{const t=
|
|
63
|
+
${e=>{const t=q(e.ratio);return t?r.css`
|
|
64
64
|
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
@@ -88,7 +88,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
88
88
|
object-fit: cover;
|
|
89
89
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,j=r.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -116,7 +116,16 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,x={
|
|
119
|
+
`,x=96;function C(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function b(e,t){if(!e)return null;const i=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return U(o,i);case"em":return k(i,"font-size");case"rem":return k(document.body,"font-size");case"in":return x;case"cm":return x/2.54;case"mm":return x/25.4;case"pt":return x/72;case"pc":return x/6;case"px":return 1;default:{const[s,u]=C(o);if(isNaN(s))return null;if(!u)return s;const a=b(u,t);return typeof a=="number"?s*a:null}}}function k(e,t){var s;const[i,o]=C(getComputedStyle(e).getPropertyValue(t));return i*((s=b(o,e))!=null?s:1)}function U(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=k(i,"height")/128;return t.removeChild(i),o}const K=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Y=r.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,Z=e=>{const[t,i]=c.createSignal(1),[o,s]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=o();if(a==null)return;const f=l.registerCallback(a,({target:d})=>{var B;i(1);const m=e.gutter&&(B=g(e.gutter,u))!=null?B:"1px",y=K?b(m,d):null,w=Math.max(y!=null?y:1,1),[z]=Array.from(d.children),xe=1+Math.min(d.scrollHeight,z.scrollHeight),be=Math.ceil(xe/w);i(be)});c.onCleanup(f)}),React.createElement(Y,{style:`--rows: ${t()}`,ref:s},e.children)},J=r.styled(j)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,ee=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(s=>React.createElement(Z,{gutter:e.gutter},s));return React.createElement(J,h({},e),o)},v={start:"flex-start",end:"flex-end",center:"center"},E=M(h({},v),{stretch:"stretch"}),I=r.styled.div`
|
|
120
129
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
@@ -128,10 +137,10 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
128
137
|
flex-wrap: wrap;
|
|
129
138
|
gap: var(--gutter, 0px);
|
|
130
139
|
|
|
131
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
140
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&v[e.justify]?v[e.justify]:v.start};
|
|
132
141
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"&&
|
|
134
|
-
`;function
|
|
142
|
+
align-items: ${e=>typeof e.align!="undefined"&&E[e.align]?E[e.align]:E.start};
|
|
143
|
+
`;function te(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ne=r.styled(I)`
|
|
135
144
|
@property --switchAt {
|
|
136
145
|
syntax: "<length-percentage>";
|
|
137
146
|
inherits: true;
|
|
@@ -140,7 +149,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
140
149
|
flex-wrap: nowrap;
|
|
141
150
|
${e=>e.stretch==="all"?"> * { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
|
|
142
151
|
|
|
143
|
-
${e=>
|
|
152
|
+
${e=>te(e.switchAt)?`
|
|
144
153
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
154
|
flex-wrap: wrap;
|
|
146
155
|
> * {
|
|
@@ -150,10 +159,10 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
150
159
|
);
|
|
151
160
|
}
|
|
152
161
|
`:""}
|
|
153
|
-
`,
|
|
162
|
+
`,P=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),re=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function ie(e){return t=>{const i=g(t,e);return i!=null?i:"0px"}}function ae(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const i=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:S));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>i.has(a)):t&&Object.keys(t).every(a=>P.has(a))&&Object.values(t).every(a=>i.has(a)))()||console.error("Invalid padding Type");const s=ie(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[f,d])=>P.has(f)?a+re(f,s(d)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>s(a)).join(" ")};`:""}const ce=r.styled.div`
|
|
154
163
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
164
|
+
${e=>ae(e.theme,e.padding)}
|
|
165
|
+
`,oe=r.styled.div`
|
|
157
166
|
box-sizing: border-box;
|
|
158
167
|
> * {
|
|
159
168
|
margin: 0;
|
|
@@ -168,7 +177,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
168
177
|
overflow-x: scroll;
|
|
169
178
|
|
|
170
179
|
scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
|
|
171
|
-
`,
|
|
180
|
+
`,A=r.styled("div")`
|
|
172
181
|
@property --gutter {
|
|
173
182
|
syntax: "<length-percentage>";
|
|
174
183
|
inherits: false;
|
|
@@ -189,7 +198,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
189
198
|
& > [data-bedrock-column] {
|
|
190
199
|
grid-column: span 1 / auto;
|
|
191
200
|
}
|
|
192
|
-
`,
|
|
201
|
+
`,T={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},se=r.styled.div`
|
|
193
202
|
box-sizing: border-box;
|
|
194
203
|
> * {
|
|
195
204
|
margin: 0;
|
|
@@ -199,8 +208,8 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
199
208
|
|
|
200
209
|
display: grid;
|
|
201
210
|
gap: var(--gutter, 0px);
|
|
202
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
203
|
-
`,
|
|
211
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
|
|
212
|
+
`,le=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(se,h({as:e.as,ref:u,fraction:e.fraction},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))};function ue(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const fe=r.styled.div`
|
|
204
213
|
@property --gutter {
|
|
205
214
|
syntax: "<length-percentage>";
|
|
206
215
|
inherits: false;
|
|
@@ -215,7 +224,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
215
224
|
|
|
216
225
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
226
|
|
|
218
|
-
--minHeight: ${e=>
|
|
227
|
+
--minHeight: ${e=>ue(e.minHeight)};
|
|
219
228
|
|
|
220
229
|
> * {
|
|
221
230
|
margin: 0;
|
|
@@ -240,7 +249,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
240
249
|
}
|
|
241
250
|
`:""};
|
|
242
251
|
}
|
|
243
|
-
`,
|
|
252
|
+
`,ge=e=>{const u=e,{top:t,bottom:i,children:o}=u,s=W(u,["top","bottom","children"]);return React.createElement(fe,h({},s),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},de=r.styled.div`
|
|
244
253
|
@property --gutter {
|
|
245
254
|
syntax: "<length-percentage>";
|
|
246
255
|
inherits: false;
|
|
@@ -265,14 +274,14 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
265
274
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
266
275
|
gap: var(--gutter, 0px);
|
|
267
276
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
268
|
-
`,
|
|
277
|
+
`,me=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(de,h({as:e.as,ref:u,columns:e.columns},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))},he=e=>typeof e=="number"?e:1,ye=r.styled.div`
|
|
269
278
|
@property --span {
|
|
270
279
|
syntax: "<number>";
|
|
271
280
|
inherits: true;
|
|
272
281
|
initial-value: 1;
|
|
273
282
|
}
|
|
274
283
|
|
|
275
|
-
--span: ${e=>
|
|
284
|
+
--span: ${e=>he(e.colSpan)};
|
|
276
285
|
|
|
277
286
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
278
287
|
|
|
@@ -296,4 +305,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
296
305
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
297
306
|
}
|
|
298
307
|
`:""}
|
|
299
|
-
`;n.Center=
|
|
308
|
+
`;n.Center=H,n.Column=ye,n.ColumnDrop=G,n.Columns=me,n.Cover=ge,n.Frame=Q,n.Grid=j,n.Inline=ne,n.InlineCluster=I,n.MasonryGrid=ee,n.PadBox=ce,n.Reel=oe,n.Split=le,n.Stack=A,n.checkIsCSSLength=p,n.createContainerQuery=R,n.getSpacingValue=g,n.spacing=S,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DefaultTheme } from "solid-styled-components";
|
|
1
|
+
import type { DefaultTheme } from "solid-styled-components";
|
|
2
2
|
declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
|
|
3
3
|
declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
|
|
4
4
|
declare type NonEmptyString = `${AllCharacter}${string}`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "solid.js port of bedrock-layout primitives",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"private": false,
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"bugs": {
|
|
63
63
|
"url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "53a63be6fd53636f40b532537925eb1b1282b376"
|
|
66
66
|
}
|