@bedrock-layout/solid 0.10.0 → 0.11.2
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/create-container-query.d.ts +1 -1
- package/lib/index.cjs.js +45 -35
- package/lib/index.d.ts +1 -0
- package/lib/index.m.js +154 -100
- package/lib/index.umd.js +43 -33
- package/lib/masonry-grid.d.ts +3 -0
- package/lib/spacing-constants.d.ts +1 -1
- package/lib/split.d.ts +2 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { Accessor, Setter } from "solid-js";
|
|
2
|
-
export declare function createContainerQuery<T extends Element>(width
|
|
2
|
+
export declare function createContainerQuery<T extends Element>(width: number | [number, number], maybeRef?: (ref: T) => void): [Accessor<boolean>, Setter<T | undefined>];
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var H=Object.defineProperty,F=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))I.call(t,n)&&M(e,n,t[n]);if(p)for(var n of p(t))j.call(t,n)&&M(e,n,t[n]);return e},m=(e,t)=>F(e,G(t));var P=(e,t)=>{var n={};for(var r in e)I.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&p)for(var r of p(e))t.indexOf(r)<0&&j.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var o=require("solid-styled-components"),v=require("@bedrock-layout/register-resize-callback"),s=require("solid-js");function A(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 R={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 N(e){return e.reduce((t,[n,r])=>m(f({},t),{[n]:r}),{})}const d=(e,t)=>{var a,l;const n=(l=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?l:R,i=N(Object.entries(n).map(([u,g])=>[u,typeof g=="number"?`${g}px`:g]))[e];return A(i)?i:void 0};function _(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const q=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=>_(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 U=o.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
43
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
42
|
+
--basis: ${e=>Q(e.basis)};
|
|
43
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
46
46
|
> * {
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function $(e){throw new Error(e)}function J(e){typeof e!="number"&&!Array.isArray(e)&&$("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<1)&&$("width value(s) must be greater than 0"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&$(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){J(e);const[n,r]=s.createSignal(!1),[i,c]=s.createSignal();return s.onMount(()=>{v.init()}),s.createEffect(()=>{if(i(),i()===void 0||i()===null)return;t&&t(i());const a=v.registerCallback(i(),l=>{var g,y;const u=(y=(g=l.borderBoxSize)==null?void 0:g.inlineSize)!=null?y:l.contentRect.width;if(u>0){const S=Array.isArray(e)?u>=e[0]&&u<=e[1]:u<=e;r(S)}});s.onCleanup(a)}),[n,c]}function K(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 Y(e){return Array.isArray(e)?e.join("/"):e}function Z(e){return K(e)?Y(e):void 0}const ee=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=Z(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
|
+
`,T=o.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
initial-value: 639px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
104
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
105
105
|
--minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
|
|
106
106
|
|
|
107
107
|
box-sizing: border-box;
|
|
@@ -116,8 +116,17 @@
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,x={
|
|
120
|
-
|
|
119
|
+
`,h=96;function O(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function x(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 te(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return h;case"cm":return h/2.54;case"mm":return h/25.4;case"pt":return h/72;case"pc":return h/6;case"px":return 1;default:{const[i,c]=O(r);if(isNaN(i))return null;if(!c)return i;const a=x(c,t);return typeof a=="number"?i*a:null}}}function C(e,t){var i;const[n,r]=O(getComputedStyle(e).getPropertyValue(t));return n*((i=x(r,e))!=null?i:1)}function te(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 ne=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,re=o.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,ie=e=>{const[t,n]=s.createSignal(1),[r,i]=s.createSignal(),c=o.useTheme();return s.onMount(()=>{v.init()}),s.createEffect(()=>{const a=r();if(a==null)return;const l=v.registerCallback(a,({target:u})=>{var z;n(1);const g=e.gutter&&(z=d(e.gutter,c))!=null?z:"1px",y=ne?x(g,u):null,S=Math.max(y!=null?y:1,1),[L]=Array.from(u.children),D=1+Math.min(u.scrollHeight,L.scrollHeight),X=Math.ceil(D/S);n(X)});s.onCleanup(l)}),React.createElement(re,{style:`--rows: ${t()}`,ref:i},e.children)},ae=o.styled(T)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,oe=e=>{const t=s.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(i=>React.createElement(ie,{gutter:e.gutter},i));return React.createElement(ae,f({},e),r)},b={start:"flex-start",end:"flex-end",center:"center"},w=m(f({},b),{stretch:"stretch"}),V=o.styled.div`
|
|
129
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
123
132
|
> * {
|
|
@@ -128,19 +137,20 @@
|
|
|
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"&&b[e.justify]?b[e.justify]:b.start};
|
|
132
141
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"&&
|
|
134
|
-
`;function
|
|
142
|
+
align-items: ${e=>typeof e.align!="undefined"&&w[e.align]?w[e.align]:w.start};
|
|
143
|
+
`;function se(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;
|
|
138
147
|
initial-value: 0;
|
|
139
148
|
}
|
|
149
|
+
|
|
140
150
|
flex-wrap: nowrap;
|
|
141
|
-
${e=>e.stretch==="all"?"> * { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"
|
|
151
|
+
${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
152
|
|
|
143
|
-
${e=>
|
|
153
|
+
${e=>se(e.switchAt)?`
|
|
144
154
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
155
|
flex-wrap: wrap;
|
|
146
156
|
> * {
|
|
@@ -150,17 +160,17 @@
|
|
|
150
160
|
);
|
|
151
161
|
}
|
|
152
162
|
`:""}
|
|
153
|
-
`,
|
|
163
|
+
`,W=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),le=(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 ue(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function de(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:R));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>n.has(a)):t&&Object.keys(t).every(a=>W.has(a))&&Object.values(t).every(a=>n.has(a)))()||console.error("Invalid padding Type");const i=ue(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[l,u])=>W.has(l)?a+le(l,i(u)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>i(a)).join(" ")};`:""}const fe=o.styled.div`
|
|
154
164
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
165
|
+
${e=>de(e.theme,e.padding)}
|
|
166
|
+
`,ge=o.styled.div`
|
|
157
167
|
box-sizing: border-box;
|
|
158
168
|
> * {
|
|
159
169
|
margin: 0;
|
|
160
170
|
scroll-snap-align: start;
|
|
161
171
|
}
|
|
162
172
|
|
|
163
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
173
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
164
174
|
|
|
165
175
|
display: flex;
|
|
166
176
|
gap: var(--gutter, 0px);
|
|
@@ -168,14 +178,14 @@
|
|
|
168
178
|
overflow-x: scroll;
|
|
169
179
|
|
|
170
180
|
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
|
-
`,
|
|
181
|
+
`,E=o.styled("div")`
|
|
172
182
|
@property --gutter {
|
|
173
183
|
syntax: "<length-percentage>";
|
|
174
184
|
inherits: false;
|
|
175
185
|
initial-value: 0;
|
|
176
186
|
}
|
|
177
187
|
|
|
178
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
188
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
179
189
|
box-sizing: border-box;
|
|
180
190
|
> * {
|
|
181
191
|
margin: 0;
|
|
@@ -189,18 +199,18 @@
|
|
|
189
199
|
& > [data-bedrock-column] {
|
|
190
200
|
grid-column: span 1 / auto;
|
|
191
201
|
}
|
|
192
|
-
`,
|
|
202
|
+
`,B={"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"},me=o.styled.div`
|
|
193
203
|
box-sizing: border-box;
|
|
194
204
|
> * {
|
|
195
205
|
margin: 0;
|
|
196
206
|
}
|
|
197
207
|
|
|
198
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
208
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
199
209
|
|
|
200
210
|
display: grid;
|
|
201
211
|
gap: var(--gutter, 0px);
|
|
202
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
203
|
-
`,
|
|
212
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=B[e])!=null?t:B["1/2"]}}};
|
|
213
|
+
`,ye=e=>{const t=typeof e.switchAt=="string"?x(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n,e.ref);return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(me,m(f({fraction:e.fraction},e),{ref:i}))),React.createElement(s.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:i}))))};function he(e){return typeof e=="number"?`${e}px`:e&&A(e)?e:"100vh"}const xe=o.styled.div`
|
|
204
214
|
@property --gutter {
|
|
205
215
|
syntax: "<length-percentage>";
|
|
206
216
|
inherits: false;
|
|
@@ -213,9 +223,9 @@
|
|
|
213
223
|
initial-value: 100vh;
|
|
214
224
|
}
|
|
215
225
|
|
|
216
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
226
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
227
|
|
|
218
|
-
--minHeight: ${e=>
|
|
228
|
+
--minHeight: ${e=>he(e.minHeight)};
|
|
219
229
|
|
|
220
230
|
> * {
|
|
221
231
|
margin: 0;
|
|
@@ -240,7 +250,7 @@
|
|
|
240
250
|
}
|
|
241
251
|
`:""};
|
|
242
252
|
}
|
|
243
|
-
`,
|
|
253
|
+
`,pe=e=>{const c=e,{top:t,bottom:n,children:r}=c,i=P(c,["top","bottom","children"]);return React.createElement(xe,f({},i),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},be=o.styled.div`
|
|
244
254
|
@property --gutter {
|
|
245
255
|
syntax: "<length-percentage>";
|
|
246
256
|
inherits: false;
|
|
@@ -252,7 +262,7 @@
|
|
|
252
262
|
inherits: true;
|
|
253
263
|
initial-value: 1;
|
|
254
264
|
}
|
|
255
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
265
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
256
266
|
|
|
257
267
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
258
268
|
|
|
@@ -265,14 +275,14 @@
|
|
|
265
275
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
266
276
|
gap: var(--gutter, 0px);
|
|
267
277
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
268
|
-
`,
|
|
278
|
+
`,ve=e=>{const t=typeof e.switchAt=="string"?x(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n),c=a=>{var l;i(a),(l=e.ref)==null||l.call(e,a)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(be,m(f({},e),{ref:c}))),React.createElement(s.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:c}))))},Se=e=>typeof e=="number"?e:1,$e=o.styled.div`
|
|
269
279
|
@property --span {
|
|
270
280
|
syntax: "<number>";
|
|
271
281
|
inherits: true;
|
|
272
282
|
initial-value: 1;
|
|
273
283
|
}
|
|
274
284
|
|
|
275
|
-
--span: ${e=>
|
|
285
|
+
--span: ${e=>Se(e.colSpan)};
|
|
276
286
|
|
|
277
287
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
278
288
|
|
|
@@ -296,4 +306,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
296
306
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
297
307
|
}
|
|
298
308
|
`:""}
|
|
299
|
-
`;exports.Center=
|
|
309
|
+
`;exports.Center=q;exports.Column=$e;exports.ColumnDrop=U;exports.Columns=ve;exports.Cover=pe;exports.Frame=ee;exports.Grid=T;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=oe;exports.PadBox=fe;exports.Reel=ge;exports.Split=ye;exports.Stack=E;exports.checkIsCSSLength=A;exports.createContainerQuery=k;exports.getSpacingValue=d;exports.spacing=R;
|
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;
|
|
@@ -143,24 +143,40 @@ const ColumnDrop = styled("div")`
|
|
|
143
143
|
flex-wrap: wrap;
|
|
144
144
|
gap: var(--gutter, 0px);
|
|
145
145
|
`;
|
|
146
|
-
function
|
|
147
|
-
|
|
148
|
-
|
|
146
|
+
function fail(msg) {
|
|
147
|
+
throw new Error(msg);
|
|
148
|
+
}
|
|
149
|
+
function assertIsValidWidth(width) {
|
|
150
|
+
if (typeof width !== "number" && !Array.isArray(width)) {
|
|
151
|
+
fail("width must be a number or an array of two numbers");
|
|
152
|
+
}
|
|
153
|
+
if (Array().concat(width).some((w) => w < 1)) {
|
|
154
|
+
fail("width value(s) must be greater than 0");
|
|
155
|
+
}
|
|
156
|
+
const isInvalidArray = Array.isArray(width) && (width.length !== 2 || width[0] > width[1]);
|
|
157
|
+
if (isInvalidArray) {
|
|
158
|
+
fail(`The second width value, ${width[1]}, is not larger than ${width[0]}. Please provide a value greater than first width value`);
|
|
149
159
|
}
|
|
160
|
+
}
|
|
161
|
+
function createContainerQuery(width, maybeRef) {
|
|
162
|
+
assertIsValidWidth(width);
|
|
150
163
|
const [matches, setMatch] = createSignal(false);
|
|
151
164
|
const [node, nodeRef] = createSignal();
|
|
152
165
|
onMount(() => {
|
|
153
166
|
init();
|
|
154
167
|
});
|
|
155
168
|
createEffect(() => {
|
|
156
|
-
|
|
157
|
-
if (
|
|
169
|
+
node();
|
|
170
|
+
if (node() === void 0 || node() === null)
|
|
158
171
|
return;
|
|
159
|
-
|
|
172
|
+
if (maybeRef) {
|
|
173
|
+
maybeRef(node());
|
|
174
|
+
}
|
|
175
|
+
const cleanup = registerCallback(node(), (entry) => {
|
|
160
176
|
var _a, _b;
|
|
161
177
|
const nodeWidth = (_b = (_a = entry.borderBoxSize) == null ? void 0 : _a.inlineSize) != null ? _b : entry.contentRect.width;
|
|
162
178
|
if (nodeWidth > 0) {
|
|
163
|
-
const newMatch =
|
|
179
|
+
const newMatch = Array.isArray(width) ? nodeWidth >= width[0] && nodeWidth <= width[1] : nodeWidth <= width;
|
|
164
180
|
setMatch(newMatch);
|
|
165
181
|
}
|
|
166
182
|
});
|
|
@@ -256,6 +272,118 @@ const Grid = styled("div")`
|
|
|
256
272
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
257
273
|
);
|
|
258
274
|
`;
|
|
275
|
+
const PIXELS_PER_INCH = 96;
|
|
276
|
+
function parseUnit(str) {
|
|
277
|
+
var _a;
|
|
278
|
+
str = String(str);
|
|
279
|
+
const num = parseFloat(str);
|
|
280
|
+
const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
|
|
281
|
+
return [num, unit];
|
|
282
|
+
}
|
|
283
|
+
function toPX(str, element) {
|
|
284
|
+
if (!str)
|
|
285
|
+
return null;
|
|
286
|
+
const elementOrBody = element != null ? element : document.body;
|
|
287
|
+
const safeStr = (str != null ? str : "px").trim().toLowerCase();
|
|
288
|
+
switch (safeStr) {
|
|
289
|
+
case "vmin":
|
|
290
|
+
case "vmax":
|
|
291
|
+
case "vh":
|
|
292
|
+
case "vw":
|
|
293
|
+
case "%":
|
|
294
|
+
return null;
|
|
295
|
+
case "ch":
|
|
296
|
+
case "ex":
|
|
297
|
+
return getSizeBrutal(safeStr, elementOrBody);
|
|
298
|
+
case "em":
|
|
299
|
+
return getPropertyInPX(elementOrBody, "font-size");
|
|
300
|
+
case "rem":
|
|
301
|
+
return getPropertyInPX(document.body, "font-size");
|
|
302
|
+
case "in":
|
|
303
|
+
return PIXELS_PER_INCH;
|
|
304
|
+
case "cm":
|
|
305
|
+
return PIXELS_PER_INCH / 2.54;
|
|
306
|
+
case "mm":
|
|
307
|
+
return PIXELS_PER_INCH / 25.4;
|
|
308
|
+
case "pt":
|
|
309
|
+
return PIXELS_PER_INCH / 72;
|
|
310
|
+
case "pc":
|
|
311
|
+
return PIXELS_PER_INCH / 6;
|
|
312
|
+
case "px":
|
|
313
|
+
return 1;
|
|
314
|
+
default: {
|
|
315
|
+
const [value, units] = parseUnit(safeStr);
|
|
316
|
+
if (isNaN(value))
|
|
317
|
+
return null;
|
|
318
|
+
if (!units)
|
|
319
|
+
return value;
|
|
320
|
+
const px = toPX(units, element);
|
|
321
|
+
return typeof px === "number" ? value * px : null;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
function getPropertyInPX(element, prop) {
|
|
326
|
+
var _a;
|
|
327
|
+
const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
|
|
328
|
+
return value * ((_a = toPX(units, element)) != null ? _a : 1);
|
|
329
|
+
}
|
|
330
|
+
function getSizeBrutal(unit, element) {
|
|
331
|
+
const testDIV = document.createElement("div");
|
|
332
|
+
testDIV.style["height"] = "128" + unit;
|
|
333
|
+
element.appendChild(testDIV);
|
|
334
|
+
const size = getPropertyInPX(testDIV, "height") / 128;
|
|
335
|
+
element.removeChild(testDIV);
|
|
336
|
+
return size;
|
|
337
|
+
}
|
|
338
|
+
const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
|
|
339
|
+
const RowSpanner = styled.div`
|
|
340
|
+
grid-row: span var(--rows, 1);
|
|
341
|
+
|
|
342
|
+
> * {
|
|
343
|
+
display: block;
|
|
344
|
+
height: 100%;
|
|
345
|
+
}
|
|
346
|
+
`;
|
|
347
|
+
const Resizer = (props) => {
|
|
348
|
+
const [rowSpan, setRowSpan] = createSignal(1);
|
|
349
|
+
const [node, nodeRef] = createSignal();
|
|
350
|
+
const theme = useTheme();
|
|
351
|
+
onMount(() => {
|
|
352
|
+
init();
|
|
353
|
+
});
|
|
354
|
+
createEffect(() => {
|
|
355
|
+
const ref = node();
|
|
356
|
+
if (ref === void 0 || ref === null)
|
|
357
|
+
return;
|
|
358
|
+
const cleanup = registerCallback(ref, ({ target }) => {
|
|
359
|
+
var _a;
|
|
360
|
+
setRowSpan(1);
|
|
361
|
+
const gapString = props.gutter ? (_a = getSpacingValue(props.gutter, theme)) != null ? _a : "1px" : "1px";
|
|
362
|
+
const maybeGap = isBrowser ? toPX(gapString, target) : null;
|
|
363
|
+
const gap = Math.max(maybeGap != null ? maybeGap : 1, 1);
|
|
364
|
+
const [child] = Array.from(target.children);
|
|
365
|
+
const height = 1 + Math.min(target.scrollHeight, child.scrollHeight);
|
|
366
|
+
const rowHeight = Math.ceil(height / gap);
|
|
367
|
+
setRowSpan(rowHeight);
|
|
368
|
+
});
|
|
369
|
+
onCleanup(cleanup);
|
|
370
|
+
});
|
|
371
|
+
return /* @__PURE__ */ React.createElement(RowSpanner, {
|
|
372
|
+
style: `--rows: ${rowSpan()}`,
|
|
373
|
+
ref: nodeRef
|
|
374
|
+
}, props.children);
|
|
375
|
+
};
|
|
376
|
+
const MasonryGridWrapper = styled(Grid)`
|
|
377
|
+
grid-template-rows: 1px;
|
|
378
|
+
`;
|
|
379
|
+
const MasonryGrid = (props) => {
|
|
380
|
+
const childrenMemo = children(() => props.children);
|
|
381
|
+
const emptyResolvedChildren = [];
|
|
382
|
+
const wrappedChildren = emptyResolvedChildren.concat(childrenMemo()).filter(Boolean).map((child) => /* @__PURE__ */ React.createElement(Resizer, {
|
|
383
|
+
gutter: props.gutter
|
|
384
|
+
}, child));
|
|
385
|
+
return /* @__PURE__ */ React.createElement(MasonryGridWrapper, __spreadValues({}, props), wrappedChildren);
|
|
386
|
+
};
|
|
259
387
|
const justifyMap = {
|
|
260
388
|
start: "flex-start",
|
|
261
389
|
end: "flex-end",
|
|
@@ -298,8 +426,9 @@ const Inline = styled(InlineCluster)`
|
|
|
298
426
|
inherits: true;
|
|
299
427
|
initial-value: 0;
|
|
300
428
|
}
|
|
429
|
+
|
|
301
430
|
flex-wrap: nowrap;
|
|
302
|
-
${(props) => props.stretch === "all" ?
|
|
431
|
+
${(props) => props.stretch === "all" ? `& > * { flex: 1 }` : props.stretch === "start" ? `& > :first-child { flex: 1 }` : props.stretch === "end" ? `& > :last-child { flex: 1 }` : typeof props.stretch === "number" ? `& > :nth-child(${props.stretch + 1}) { flex: 1 }` : ""}
|
|
303
432
|
|
|
304
433
|
${(props) => shouldUseSwitch(props.switchAt) ? `
|
|
305
434
|
--switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};
|
|
@@ -424,69 +553,6 @@ const Stack = styled("div")`
|
|
|
424
553
|
grid-column: span 1 / auto;
|
|
425
554
|
}
|
|
426
555
|
`;
|
|
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
556
|
const fractions = {
|
|
491
557
|
"1/4": "1fr 3fr",
|
|
492
558
|
"1/3": "1fr 2fr",
|
|
@@ -517,25 +583,18 @@ const SplitBase = styled.div`
|
|
|
517
583
|
const Split = (props) => {
|
|
518
584
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
519
585
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
520
|
-
|
|
521
|
-
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
522
|
-
const combineRef = (ref) => {
|
|
523
|
-
var _a;
|
|
524
|
-
nodeRef(ref);
|
|
525
|
-
(_a = props.ref) == null ? void 0 : _a.call(props, ref);
|
|
526
|
-
};
|
|
586
|
+
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt, props.ref);
|
|
527
587
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
528
588
|
when: shouldSwitch() === false
|
|
529
|
-
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadValues({
|
|
530
|
-
as: props.as,
|
|
531
|
-
ref: combineRef,
|
|
589
|
+
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadProps(__spreadValues({
|
|
532
590
|
fraction: props.fraction
|
|
533
|
-
}, props)
|
|
591
|
+
}, props), {
|
|
592
|
+
ref: nodeRef
|
|
593
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
534
594
|
when: shouldSwitch() === true
|
|
535
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
}, props))));
|
|
595
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
596
|
+
ref: nodeRef
|
|
597
|
+
}))));
|
|
539
598
|
};
|
|
540
599
|
function getSafeMinHeight(minHeight) {
|
|
541
600
|
if (typeof minHeight === "number")
|
|
@@ -587,7 +646,7 @@ const CoverWrapper = styled.div`
|
|
|
587
646
|
}
|
|
588
647
|
`;
|
|
589
648
|
const Cover = (props) => {
|
|
590
|
-
const _a = props, { top, bottom, children } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
649
|
+
const _a = props, { top, bottom, children: children2 } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
591
650
|
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
592
651
|
"data-bedrock-cover-centered": true
|
|
593
652
|
}, props.children), props.bottom);
|
|
@@ -623,9 +682,7 @@ const ColumnsBase = styled.div`
|
|
|
623
682
|
`;
|
|
624
683
|
const Columns = (props) => {
|
|
625
684
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
626
|
-
console.log(maybePx);
|
|
627
685
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
628
|
-
console.log(widthToSwitchAt);
|
|
629
686
|
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
630
687
|
const combineRef = (ref) => {
|
|
631
688
|
var _a;
|
|
@@ -634,16 +691,13 @@ const Columns = (props) => {
|
|
|
634
691
|
};
|
|
635
692
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
636
693
|
when: shouldSwitch() === false
|
|
637
|
-
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadValues({
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
columns: props.columns
|
|
641
|
-
}, props))), /* @__PURE__ */ React.createElement(Match, {
|
|
694
|
+
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadProps(__spreadValues({}, props), {
|
|
695
|
+
ref: combineRef
|
|
696
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
642
697
|
when: shouldSwitch() === true
|
|
643
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
644
|
-
as: props.as,
|
|
698
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
645
699
|
ref: combineRef
|
|
646
|
-
}
|
|
700
|
+
}))));
|
|
647
701
|
};
|
|
648
702
|
const safeSpan = (span) => {
|
|
649
703
|
return typeof span === "number" ? span : 1;
|
|
@@ -680,4 +734,4 @@ ${(props) => props.offsetEnd && props.offsetEnd > 0 ? `
|
|
|
680
734
|
}
|
|
681
735
|
` : ""}
|
|
682
736
|
`;
|
|
683
|
-
export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };
|
|
737
|
+
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 $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var B=(n,r,l)=>r in n?$e(n,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[r]=l,m=(n,r)=>{for(var l in r||(r={}))O.call(r,l)&&B(n,l,r[l]);if($)for(var l of $(r))V.call(r,l)&&B(n,l,r[l]);return n},y=(n,r)=>we(n,Se(r));var L=(n,r)=>{var l={};for(var c in n)O.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 w(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])=>y(m({},t),{[i]:o}),{})}const d=(e,t)=>{var s,f;const i=(f=(s=t==null?void 0:t.space)!=null?s:t==null?void 0:t.spacing)!=null?f:S,a=D(Object.entries(i).map(([g,h])=>[g,typeof h=="number"?`${h}px`:h]))[e];return w(a)?a: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,8 +39,8 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
43
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
42
|
+
--basis: ${e=>F(e.basis)};
|
|
43
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
46
46
|
> * {
|
|
@@ -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 A(e){throw new Error(e)}function N(e){typeof e!="number"&&!Array.isArray(e)&&A("width must be a number or an array of two numbers"),Array().concat(e).some(i=>i<1)&&A("width value(s) must be greater than 0"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&A(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){N(e);const[i,o]=c.createSignal(!1),[a,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{if(a(),a()===void 0||a()===null)return;t&&t(a());const s=l.registerCallback(a(),f=>{var h,x;const g=(x=(h=f.borderBoxSize)==null?void 0:h.inlineSize)!=null?x:f.contentRect.width;if(g>0){const M=Array.isArray(e)?g>=e[0]&&g<=e[1]:g<=e;o(M)}});c.onCleanup(s)}),[i,u]}function _(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 q(e){return Array.isArray(e)?e.join("/"):e}function Q(e){return _(e)?q(e):void 0}const U=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;
|
|
@@ -101,7 +101,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
101
101
|
initial-value: 639px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
104
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
105
105
|
--minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
|
|
106
106
|
|
|
107
107
|
box-sizing: border-box;
|
|
@@ -116,8 +116,17 @@ 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
|
-
`,
|
|
120
|
-
|
|
119
|
+
`,b=96;function I(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function v(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 K(o,i);case"em":return R(i,"font-size");case"rem":return R(document.body,"font-size");case"in":return b;case"cm":return b/2.54;case"mm":return b/25.4;case"pt":return b/72;case"pc":return b/6;case"px":return 1;default:{const[a,u]=I(o);if(isNaN(a))return null;if(!u)return a;const s=v(u,t);return typeof s=="number"?a*s:null}}}function R(e,t){var a;const[i,o]=I(getComputedStyle(e).getPropertyValue(t));return i*((a=v(o,e))!=null?a:1)}function K(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=R(i,"height")/128;return t.removeChild(i),o}const Y=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Z=r.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,J=e=>{const[t,i]=c.createSignal(1),[o,a]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const s=o();if(s==null)return;const f=l.registerCallback(s,({target:g})=>{var W;i(1);const h=e.gutter&&(W=d(e.gutter,u))!=null?W:"1px",x=Y?v(h,g):null,M=Math.max(x!=null?x:1,1),[be]=Array.from(g.children),ve=1+Math.min(g.scrollHeight,be.scrollHeight),pe=Math.ceil(ve/M);i(pe)});c.onCleanup(f)}),React.createElement(Z,{style:`--rows: ${t()}`,ref:a},e.children)},ee=r.styled(j)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,te=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(a=>React.createElement(J,{gutter:e.gutter},a));return React.createElement(ee,m({},e),o)},p={start:"flex-start",end:"flex-end",center:"center"},E=y(m({},p),{stretch:"stretch"}),C=r.styled.div`
|
|
129
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
123
132
|
> * {
|
|
@@ -128,19 +137,20 @@ 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"&&p[e.justify]?p[e.justify]:p.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 ne(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const re=r.styled(C)`
|
|
135
144
|
@property --switchAt {
|
|
136
145
|
syntax: "<length-percentage>";
|
|
137
146
|
inherits: true;
|
|
138
147
|
initial-value: 0;
|
|
139
148
|
}
|
|
149
|
+
|
|
140
150
|
flex-wrap: nowrap;
|
|
141
|
-
${e=>e.stretch==="all"?"> * { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"
|
|
151
|
+
${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
152
|
|
|
143
|
-
${e=>
|
|
153
|
+
${e=>ne(e.switchAt)?`
|
|
144
154
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
155
|
flex-wrap: wrap;
|
|
146
156
|
> * {
|
|
@@ -150,17 +160,17 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
150
160
|
);
|
|
151
161
|
}
|
|
152
162
|
`:""}
|
|
153
|
-
`,
|
|
163
|
+
`,P=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),ie=(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 ae(e){return t=>{const i=d(t,e);return i!=null?i:"0px"}}function ce(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(s=>i.has(s)):t&&Object.keys(t).every(s=>P.has(s))&&Object.values(t).every(s=>i.has(s)))()||console.error("Invalid padding Type");const a=ae(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((s,[f,g])=>P.has(f)?s+ie(f,a(g)):s,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(s=>a(s)).join(" ")};`:""}const oe=r.styled.div`
|
|
154
164
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
165
|
+
${e=>ce(e.theme,e.padding)}
|
|
166
|
+
`,se=r.styled.div`
|
|
157
167
|
box-sizing: border-box;
|
|
158
168
|
> * {
|
|
159
169
|
margin: 0;
|
|
160
170
|
scroll-snap-align: start;
|
|
161
171
|
}
|
|
162
172
|
|
|
163
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
173
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
164
174
|
|
|
165
175
|
display: flex;
|
|
166
176
|
gap: var(--gutter, 0px);
|
|
@@ -168,14 +178,14 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
168
178
|
overflow-x: scroll;
|
|
169
179
|
|
|
170
180
|
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
|
-
`,
|
|
181
|
+
`,z=r.styled("div")`
|
|
172
182
|
@property --gutter {
|
|
173
183
|
syntax: "<length-percentage>";
|
|
174
184
|
inherits: false;
|
|
175
185
|
initial-value: 0;
|
|
176
186
|
}
|
|
177
187
|
|
|
178
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
188
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
179
189
|
box-sizing: border-box;
|
|
180
190
|
> * {
|
|
181
191
|
margin: 0;
|
|
@@ -189,18 +199,18 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
189
199
|
& > [data-bedrock-column] {
|
|
190
200
|
grid-column: span 1 / auto;
|
|
191
201
|
}
|
|
192
|
-
`,
|
|
202
|
+
`,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"},le=r.styled.div`
|
|
193
203
|
box-sizing: border-box;
|
|
194
204
|
> * {
|
|
195
205
|
margin: 0;
|
|
196
206
|
}
|
|
197
207
|
|
|
198
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
208
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
199
209
|
|
|
200
210
|
display: grid;
|
|
201
211
|
gap: var(--gutter, 0px);
|
|
202
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
203
|
-
`,
|
|
212
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
|
|
213
|
+
`,ue=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,a]=k(i,e.ref);return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(le,y(m({fraction:e.fraction},e),{ref:a}))),React.createElement(c.Match,{when:o()===!0},React.createElement(z,y(m({},e),{ref:a}))))};function fe(e){return typeof e=="number"?`${e}px`:e&&w(e)?e:"100vh"}const ge=r.styled.div`
|
|
204
214
|
@property --gutter {
|
|
205
215
|
syntax: "<length-percentage>";
|
|
206
216
|
inherits: false;
|
|
@@ -213,9 +223,9 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
213
223
|
initial-value: 100vh;
|
|
214
224
|
}
|
|
215
225
|
|
|
216
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
226
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
227
|
|
|
218
|
-
--minHeight: ${e=>
|
|
228
|
+
--minHeight: ${e=>fe(e.minHeight)};
|
|
219
229
|
|
|
220
230
|
> * {
|
|
221
231
|
margin: 0;
|
|
@@ -240,7 +250,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
240
250
|
}
|
|
241
251
|
`:""};
|
|
242
252
|
}
|
|
243
|
-
`,
|
|
253
|
+
`,de=e=>{const u=e,{top:t,bottom:i,children:o}=u,a=L(u,["top","bottom","children"]);return React.createElement(ge,m({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},me=r.styled.div`
|
|
244
254
|
@property --gutter {
|
|
245
255
|
syntax: "<length-percentage>";
|
|
246
256
|
inherits: false;
|
|
@@ -252,7 +262,7 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
252
262
|
inherits: true;
|
|
253
263
|
initial-value: 1;
|
|
254
264
|
}
|
|
255
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
265
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
256
266
|
|
|
257
267
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
258
268
|
|
|
@@ -265,14 +275,14 @@ var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnProp
|
|
|
265
275
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
266
276
|
gap: var(--gutter, 0px);
|
|
267
277
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
268
|
-
`,
|
|
278
|
+
`,he=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,a]=k(i),u=s=>{var f;a(s),(f=e.ref)==null||f.call(e,s)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(me,y(m({},e),{ref:u}))),React.createElement(c.Match,{when:o()===!0},React.createElement(z,y(m({},e),{ref:u}))))},ye=e=>typeof e=="number"?e:1,xe=r.styled.div`
|
|
269
279
|
@property --span {
|
|
270
280
|
syntax: "<number>";
|
|
271
281
|
inherits: true;
|
|
272
282
|
initial-value: 1;
|
|
273
283
|
}
|
|
274
284
|
|
|
275
|
-
--span: ${e=>
|
|
285
|
+
--span: ${e=>ye(e.colSpan)};
|
|
276
286
|
|
|
277
287
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
278
288
|
|
|
@@ -296,4 +306,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
296
306
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
297
307
|
}
|
|
298
308
|
`:""}
|
|
299
|
-
`;n.Center=
|
|
309
|
+
`;n.Center=H,n.Column=xe,n.ColumnDrop=G,n.Columns=he,n.Cover=de,n.Frame=U,n.Grid=j,n.Inline=re,n.InlineCluster=C,n.MasonryGrid=te,n.PadBox=oe,n.Reel=se,n.Split=ue,n.Stack=z,n.checkIsCSSLength=w,n.createContainerQuery=k,n.getSpacingValue=d,n.spacing=S,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"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/lib/split.d.ts
CHANGED
|
@@ -6,10 +6,11 @@ interface SplitBaseProps {
|
|
|
6
6
|
gutter?: SpacingOptions;
|
|
7
7
|
fraction?: FractionTypes;
|
|
8
8
|
}
|
|
9
|
+
declare type RefFunction = (ref: HTMLElement) => void;
|
|
9
10
|
export interface SplitProps extends StackProps, SplitBaseProps {
|
|
10
11
|
switchAt?: number | CSSLength;
|
|
11
12
|
as?: Component | keyof JSX.IntrinsicElements;
|
|
12
|
-
ref?:
|
|
13
|
+
ref?: RefFunction;
|
|
13
14
|
}
|
|
14
15
|
export declare const Split: Component<SplitProps>;
|
|
15
16
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.2",
|
|
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": "08838917ec582dd6347cb73327d66514da013ca9"
|
|
66
66
|
}
|