@bedrock-layout/solid 0.11.0 → 0.11.3
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 -36
- package/lib/index.m.js +46 -30
- package/lib/index.umd.js +39 -30
- 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
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
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,17 +116,17 @@
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
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
120
|
grid-row: span var(--rows, 1);
|
|
121
121
|
|
|
122
122
|
> * {
|
|
123
123
|
display: block;
|
|
124
124
|
height: 100%;
|
|
125
125
|
}
|
|
126
|
-
`,
|
|
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
127
|
grid-template-rows: 1px;
|
|
128
|
-
`,
|
|
129
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
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"}};
|
|
130
130
|
|
|
131
131
|
box-sizing: border-box;
|
|
132
132
|
> * {
|
|
@@ -137,19 +137,28 @@
|
|
|
137
137
|
flex-wrap: wrap;
|
|
138
138
|
gap: var(--gutter, 0px);
|
|
139
139
|
|
|
140
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
140
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&b[e.justify]?b[e.justify]:b.start};
|
|
141
141
|
|
|
142
|
-
align-items: ${e=>typeof e.align!="undefined"
|
|
143
|
-
`;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)`
|
|
144
144
|
@property --switchAt {
|
|
145
145
|
syntax: "<length-percentage>";
|
|
146
146
|
inherits: true;
|
|
147
147
|
initial-value: 0;
|
|
148
148
|
}
|
|
149
|
-
flex-wrap: nowrap;
|
|
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 }`:""}
|
|
151
149
|
|
|
152
|
-
|
|
150
|
+
flex-wrap: nowrap;
|
|
151
|
+
${e=>e.stretch==="all"?`& > * {
|
|
152
|
+
flex: 1;
|
|
153
|
+
}`:e.stretch==="start"?`& > :first-child {
|
|
154
|
+
flex: 1;
|
|
155
|
+
}`:e.stretch==="end"?`& > :last-child {
|
|
156
|
+
flex: 1;
|
|
157
|
+
}`:typeof e.stretch=="number"?`& > :nth-child(${e.stretch+1}) {
|
|
158
|
+
flex: 1;
|
|
159
|
+
}`:""}
|
|
160
|
+
|
|
161
|
+
${e=>se(e.switchAt)?`
|
|
153
162
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
154
163
|
flex-wrap: wrap;
|
|
155
164
|
> * {
|
|
@@ -159,17 +168,17 @@
|
|
|
159
168
|
);
|
|
160
169
|
}
|
|
161
170
|
`:""}
|
|
162
|
-
`,
|
|
171
|
+
`,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`
|
|
163
172
|
box-sizing: border-box;
|
|
164
|
-
${e=>
|
|
165
|
-
`,
|
|
173
|
+
${e=>de(e.theme,e.padding)}
|
|
174
|
+
`,ge=o.styled.div`
|
|
166
175
|
box-sizing: border-box;
|
|
167
176
|
> * {
|
|
168
177
|
margin: 0;
|
|
169
178
|
scroll-snap-align: start;
|
|
170
179
|
}
|
|
171
180
|
|
|
172
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
181
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
173
182
|
|
|
174
183
|
display: flex;
|
|
175
184
|
gap: var(--gutter, 0px);
|
|
@@ -177,14 +186,14 @@
|
|
|
177
186
|
overflow-x: scroll;
|
|
178
187
|
|
|
179
188
|
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"}}};
|
|
180
|
-
`,
|
|
189
|
+
`,E=o.styled("div")`
|
|
181
190
|
@property --gutter {
|
|
182
191
|
syntax: "<length-percentage>";
|
|
183
192
|
inherits: false;
|
|
184
193
|
initial-value: 0;
|
|
185
194
|
}
|
|
186
195
|
|
|
187
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
196
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
188
197
|
box-sizing: border-box;
|
|
189
198
|
> * {
|
|
190
199
|
margin: 0;
|
|
@@ -198,18 +207,18 @@
|
|
|
198
207
|
& > [data-bedrock-column] {
|
|
199
208
|
grid-column: span 1 / auto;
|
|
200
209
|
}
|
|
201
|
-
`,
|
|
210
|
+
`,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`
|
|
202
211
|
box-sizing: border-box;
|
|
203
212
|
> * {
|
|
204
213
|
margin: 0;
|
|
205
214
|
}
|
|
206
215
|
|
|
207
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
216
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
208
217
|
|
|
209
218
|
display: grid;
|
|
210
219
|
gap: var(--gutter, 0px);
|
|
211
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
212
|
-
`,
|
|
220
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=B[e])!=null?t:B["1/2"]}}};
|
|
221
|
+
`,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`
|
|
213
222
|
@property --gutter {
|
|
214
223
|
syntax: "<length-percentage>";
|
|
215
224
|
inherits: false;
|
|
@@ -222,9 +231,9 @@
|
|
|
222
231
|
initial-value: 100vh;
|
|
223
232
|
}
|
|
224
233
|
|
|
225
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
234
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
226
235
|
|
|
227
|
-
--minHeight: ${e=>
|
|
236
|
+
--minHeight: ${e=>he(e.minHeight)};
|
|
228
237
|
|
|
229
238
|
> * {
|
|
230
239
|
margin: 0;
|
|
@@ -249,7 +258,7 @@
|
|
|
249
258
|
}
|
|
250
259
|
`:""};
|
|
251
260
|
}
|
|
252
|
-
`,
|
|
261
|
+
`,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`
|
|
253
262
|
@property --gutter {
|
|
254
263
|
syntax: "<length-percentage>";
|
|
255
264
|
inherits: false;
|
|
@@ -261,7 +270,7 @@
|
|
|
261
270
|
inherits: true;
|
|
262
271
|
initial-value: 1;
|
|
263
272
|
}
|
|
264
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
273
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
265
274
|
|
|
266
275
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
267
276
|
|
|
@@ -274,14 +283,14 @@
|
|
|
274
283
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
275
284
|
gap: var(--gutter, 0px);
|
|
276
285
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
277
|
-
`,
|
|
286
|
+
`,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`
|
|
278
287
|
@property --span {
|
|
279
288
|
syntax: "<number>";
|
|
280
289
|
inherits: true;
|
|
281
290
|
initial-value: 1;
|
|
282
291
|
}
|
|
283
292
|
|
|
284
|
-
--span: ${e=>
|
|
293
|
+
--span: ${e=>Se(e.colSpan)};
|
|
285
294
|
|
|
286
295
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
287
296
|
|
|
@@ -305,4 +314,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
305
314
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
306
315
|
}
|
|
307
316
|
`:""}
|
|
308
|
-
`;exports.Center=
|
|
317
|
+
`;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.m.js
CHANGED
|
@@ -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
|
});
|
|
@@ -410,8 +426,17 @@ const Inline = styled(InlineCluster)`
|
|
|
410
426
|
inherits: true;
|
|
411
427
|
initial-value: 0;
|
|
412
428
|
}
|
|
429
|
+
|
|
413
430
|
flex-wrap: nowrap;
|
|
414
|
-
${(props) => props.stretch === "all" ?
|
|
431
|
+
${(props) => props.stretch === "all" ? `& > * {
|
|
432
|
+
flex: 1;
|
|
433
|
+
}` : props.stretch === "start" ? `& > :first-child {
|
|
434
|
+
flex: 1;
|
|
435
|
+
}` : props.stretch === "end" ? `& > :last-child {
|
|
436
|
+
flex: 1;
|
|
437
|
+
}` : typeof props.stretch === "number" ? `& > :nth-child(${props.stretch + 1}) {
|
|
438
|
+
flex: 1;
|
|
439
|
+
}` : ""}
|
|
415
440
|
|
|
416
441
|
${(props) => shouldUseSwitch(props.switchAt) ? `
|
|
417
442
|
--switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};
|
|
@@ -566,24 +591,18 @@ const SplitBase = styled.div`
|
|
|
566
591
|
const Split = (props) => {
|
|
567
592
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
568
593
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
569
|
-
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
570
|
-
const combineRef = (ref) => {
|
|
571
|
-
var _a;
|
|
572
|
-
nodeRef(ref);
|
|
573
|
-
(_a = props.ref) == null ? void 0 : _a.call(props, ref);
|
|
574
|
-
};
|
|
594
|
+
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt, props.ref);
|
|
575
595
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
576
596
|
when: shouldSwitch() === false
|
|
577
|
-
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadValues({
|
|
578
|
-
as: props.as,
|
|
579
|
-
ref: combineRef,
|
|
597
|
+
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadProps(__spreadValues({
|
|
580
598
|
fraction: props.fraction
|
|
581
|
-
}, props)
|
|
599
|
+
}, props), {
|
|
600
|
+
ref: nodeRef
|
|
601
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
582
602
|
when: shouldSwitch() === true
|
|
583
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
}, props))));
|
|
603
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
604
|
+
ref: nodeRef
|
|
605
|
+
}))));
|
|
587
606
|
};
|
|
588
607
|
function getSafeMinHeight(minHeight) {
|
|
589
608
|
if (typeof minHeight === "number")
|
|
@@ -680,16 +699,13 @@ const Columns = (props) => {
|
|
|
680
699
|
};
|
|
681
700
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
682
701
|
when: shouldSwitch() === false
|
|
683
|
-
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadValues({
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
columns: props.columns
|
|
687
|
-
}, props))), /* @__PURE__ */ React.createElement(Match, {
|
|
702
|
+
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadProps(__spreadValues({}, props), {
|
|
703
|
+
ref: combineRef
|
|
704
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
688
705
|
when: shouldSwitch() === true
|
|
689
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
690
|
-
as: props.as,
|
|
706
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
691
707
|
ref: combineRef
|
|
692
|
-
}
|
|
708
|
+
}))));
|
|
693
709
|
};
|
|
694
710
|
const safeSpan = (span) => {
|
|
695
711
|
return typeof span === "number" ? span : 1;
|
package/lib/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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;
|
|
@@ -40,7 +40,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
--basis: ${e=>F(e.basis)};
|
|
43
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
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 ve=Object.defineProperty,we=Object.defineProperties;var $e=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
|
|
|
@@ -101,7 +101,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=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,17 +116,17 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
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
120
|
grid-row: span var(--rows, 1);
|
|
121
121
|
|
|
122
122
|
> * {
|
|
123
123
|
display: block;
|
|
124
124
|
height: 100%;
|
|
125
125
|
}
|
|
126
|
-
`,
|
|
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
127
|
grid-template-rows: 1px;
|
|
128
|
-
`,
|
|
129
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
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"}};
|
|
130
130
|
|
|
131
131
|
box-sizing: border-box;
|
|
132
132
|
> * {
|
|
@@ -137,19 +137,28 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
137
137
|
flex-wrap: wrap;
|
|
138
138
|
gap: var(--gutter, 0px);
|
|
139
139
|
|
|
140
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
140
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&p[e.justify]?p[e.justify]:p.start};
|
|
141
141
|
|
|
142
142
|
align-items: ${e=>typeof e.align!="undefined"&&E[e.align]?E[e.align]:E.start};
|
|
143
|
-
`;function
|
|
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)`
|
|
144
144
|
@property --switchAt {
|
|
145
145
|
syntax: "<length-percentage>";
|
|
146
146
|
inherits: true;
|
|
147
147
|
initial-value: 0;
|
|
148
148
|
}
|
|
149
|
-
flex-wrap: nowrap;
|
|
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 }`:""}
|
|
151
149
|
|
|
152
|
-
|
|
150
|
+
flex-wrap: nowrap;
|
|
151
|
+
${e=>e.stretch==="all"?`& > * {
|
|
152
|
+
flex: 1;
|
|
153
|
+
}`:e.stretch==="start"?`& > :first-child {
|
|
154
|
+
flex: 1;
|
|
155
|
+
}`:e.stretch==="end"?`& > :last-child {
|
|
156
|
+
flex: 1;
|
|
157
|
+
}`:typeof e.stretch=="number"?`& > :nth-child(${e.stretch+1}) {
|
|
158
|
+
flex: 1;
|
|
159
|
+
}`:""}
|
|
160
|
+
|
|
161
|
+
${e=>ne(e.switchAt)?`
|
|
153
162
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
154
163
|
flex-wrap: wrap;
|
|
155
164
|
> * {
|
|
@@ -159,17 +168,17 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
159
168
|
);
|
|
160
169
|
}
|
|
161
170
|
`:""}
|
|
162
|
-
`,P=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),
|
|
171
|
+
`,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`
|
|
163
172
|
box-sizing: border-box;
|
|
164
|
-
${e=>
|
|
165
|
-
`,
|
|
173
|
+
${e=>ce(e.theme,e.padding)}
|
|
174
|
+
`,se=r.styled.div`
|
|
166
175
|
box-sizing: border-box;
|
|
167
176
|
> * {
|
|
168
177
|
margin: 0;
|
|
169
178
|
scroll-snap-align: start;
|
|
170
179
|
}
|
|
171
180
|
|
|
172
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
181
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
173
182
|
|
|
174
183
|
display: flex;
|
|
175
184
|
gap: var(--gutter, 0px);
|
|
@@ -177,14 +186,14 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
177
186
|
overflow-x: scroll;
|
|
178
187
|
|
|
179
188
|
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"}}};
|
|
180
|
-
`,
|
|
189
|
+
`,z=r.styled("div")`
|
|
181
190
|
@property --gutter {
|
|
182
191
|
syntax: "<length-percentage>";
|
|
183
192
|
inherits: false;
|
|
184
193
|
initial-value: 0;
|
|
185
194
|
}
|
|
186
195
|
|
|
187
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
196
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
188
197
|
box-sizing: border-box;
|
|
189
198
|
> * {
|
|
190
199
|
margin: 0;
|
|
@@ -198,18 +207,18 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
198
207
|
& > [data-bedrock-column] {
|
|
199
208
|
grid-column: span 1 / auto;
|
|
200
209
|
}
|
|
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"},
|
|
210
|
+
`,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`
|
|
202
211
|
box-sizing: border-box;
|
|
203
212
|
> * {
|
|
204
213
|
margin: 0;
|
|
205
214
|
}
|
|
206
215
|
|
|
207
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
216
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
208
217
|
|
|
209
218
|
display: grid;
|
|
210
219
|
gap: var(--gutter, 0px);
|
|
211
220
|
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
|
|
212
|
-
`,
|
|
221
|
+
`,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`
|
|
213
222
|
@property --gutter {
|
|
214
223
|
syntax: "<length-percentage>";
|
|
215
224
|
inherits: false;
|
|
@@ -222,9 +231,9 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
222
231
|
initial-value: 100vh;
|
|
223
232
|
}
|
|
224
233
|
|
|
225
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
234
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
226
235
|
|
|
227
|
-
--minHeight: ${e=>
|
|
236
|
+
--minHeight: ${e=>fe(e.minHeight)};
|
|
228
237
|
|
|
229
238
|
> * {
|
|
230
239
|
margin: 0;
|
|
@@ -249,7 +258,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
249
258
|
}
|
|
250
259
|
`:""};
|
|
251
260
|
}
|
|
252
|
-
`,
|
|
261
|
+
`,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`
|
|
253
262
|
@property --gutter {
|
|
254
263
|
syntax: "<length-percentage>";
|
|
255
264
|
inherits: false;
|
|
@@ -261,7 +270,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
261
270
|
inherits: true;
|
|
262
271
|
initial-value: 1;
|
|
263
272
|
}
|
|
264
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
273
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
265
274
|
|
|
266
275
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
267
276
|
|
|
@@ -274,14 +283,14 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
274
283
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
275
284
|
gap: var(--gutter, 0px);
|
|
276
285
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
277
|
-
`,
|
|
286
|
+
`,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`
|
|
278
287
|
@property --span {
|
|
279
288
|
syntax: "<number>";
|
|
280
289
|
inherits: true;
|
|
281
290
|
initial-value: 1;
|
|
282
291
|
}
|
|
283
292
|
|
|
284
|
-
--span: ${e=>
|
|
293
|
+
--span: ${e=>ye(e.colSpan)};
|
|
285
294
|
|
|
286
295
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
287
296
|
|
|
@@ -305,4 +314,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
305
314
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
306
315
|
}
|
|
307
316
|
`:""}
|
|
308
|
-
`;n.Center=H,n.Column=
|
|
317
|
+
`;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"}})});
|
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.11.
|
|
3
|
+
"version": "0.11.3",
|
|
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": "0df38d1d92e6809299d9e0a0e8d741add1e26dca"
|
|
66
66
|
}
|