@bedrock-layout/solid 0.11.1 → 0.11.4
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 +44 -36
- package/lib/index.m.js +45 -30
- package/lib/index.umd.js +38 -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<0)&&$("width value(s) must be 0 or greater"),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,10 +137,10 @@
|
|
|
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;
|
|
@@ -148,9 +148,17 @@
|
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
flex-wrap: nowrap;
|
|
151
|
-
${e=>e.stretch==="all"
|
|
152
|
-
|
|
153
|
-
|
|
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)?`
|
|
154
162
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
155
163
|
flex-wrap: wrap;
|
|
156
164
|
> * {
|
|
@@ -160,17 +168,17 @@
|
|
|
160
168
|
);
|
|
161
169
|
}
|
|
162
170
|
`:""}
|
|
163
|
-
`,
|
|
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`
|
|
164
172
|
box-sizing: border-box;
|
|
165
|
-
${e=>
|
|
166
|
-
`,
|
|
173
|
+
${e=>de(e.theme,e.padding)}
|
|
174
|
+
`,ge=o.styled.div`
|
|
167
175
|
box-sizing: border-box;
|
|
168
176
|
> * {
|
|
169
177
|
margin: 0;
|
|
170
178
|
scroll-snap-align: start;
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
--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"}};
|
|
174
182
|
|
|
175
183
|
display: flex;
|
|
176
184
|
gap: var(--gutter, 0px);
|
|
@@ -178,14 +186,14 @@
|
|
|
178
186
|
overflow-x: scroll;
|
|
179
187
|
|
|
180
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"}}};
|
|
181
|
-
`,
|
|
189
|
+
`,E=o.styled("div")`
|
|
182
190
|
@property --gutter {
|
|
183
191
|
syntax: "<length-percentage>";
|
|
184
192
|
inherits: false;
|
|
185
193
|
initial-value: 0;
|
|
186
194
|
}
|
|
187
195
|
|
|
188
|
-
--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"}};
|
|
189
197
|
box-sizing: border-box;
|
|
190
198
|
> * {
|
|
191
199
|
margin: 0;
|
|
@@ -199,18 +207,18 @@
|
|
|
199
207
|
& > [data-bedrock-column] {
|
|
200
208
|
grid-column: span 1 / auto;
|
|
201
209
|
}
|
|
202
|
-
`,
|
|
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`
|
|
203
211
|
box-sizing: border-box;
|
|
204
212
|
> * {
|
|
205
213
|
margin: 0;
|
|
206
214
|
}
|
|
207
215
|
|
|
208
|
-
--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"}};
|
|
209
217
|
|
|
210
218
|
display: grid;
|
|
211
219
|
gap: var(--gutter, 0px);
|
|
212
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
213
|
-
`,
|
|
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`
|
|
214
222
|
@property --gutter {
|
|
215
223
|
syntax: "<length-percentage>";
|
|
216
224
|
inherits: false;
|
|
@@ -223,9 +231,9 @@
|
|
|
223
231
|
initial-value: 100vh;
|
|
224
232
|
}
|
|
225
233
|
|
|
226
|
-
--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"}};
|
|
227
235
|
|
|
228
|
-
--minHeight: ${e=>
|
|
236
|
+
--minHeight: ${e=>he(e.minHeight)};
|
|
229
237
|
|
|
230
238
|
> * {
|
|
231
239
|
margin: 0;
|
|
@@ -250,7 +258,7 @@
|
|
|
250
258
|
}
|
|
251
259
|
`:""};
|
|
252
260
|
}
|
|
253
|
-
`,
|
|
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`
|
|
254
262
|
@property --gutter {
|
|
255
263
|
syntax: "<length-percentage>";
|
|
256
264
|
inherits: false;
|
|
@@ -262,7 +270,7 @@
|
|
|
262
270
|
inherits: true;
|
|
263
271
|
initial-value: 1;
|
|
264
272
|
}
|
|
265
|
-
--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"}};
|
|
266
274
|
|
|
267
275
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
268
276
|
|
|
@@ -275,14 +283,14 @@
|
|
|
275
283
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
276
284
|
gap: var(--gutter, 0px);
|
|
277
285
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
278
|
-
`,
|
|
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`
|
|
279
287
|
@property --span {
|
|
280
288
|
syntax: "<number>";
|
|
281
289
|
inherits: true;
|
|
282
290
|
initial-value: 1;
|
|
283
291
|
}
|
|
284
292
|
|
|
285
|
-
--span: ${e=>
|
|
293
|
+
--span: ${e=>Se(e.colSpan)};
|
|
286
294
|
|
|
287
295
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
288
296
|
|
|
@@ -306,4 +314,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
306
314
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
307
315
|
}
|
|
308
316
|
`:""}
|
|
309
|
-
`;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 < 0)) {
|
|
154
|
+
fail("width value(s) must be 0 or greater");
|
|
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
|
});
|
|
@@ -412,7 +428,15 @@ const Inline = styled(InlineCluster)`
|
|
|
412
428
|
}
|
|
413
429
|
|
|
414
430
|
flex-wrap: nowrap;
|
|
415
|
-
${(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
|
+
}` : ""}
|
|
416
440
|
|
|
417
441
|
${(props) => shouldUseSwitch(props.switchAt) ? `
|
|
418
442
|
--switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};
|
|
@@ -567,24 +591,18 @@ const SplitBase = styled.div`
|
|
|
567
591
|
const Split = (props) => {
|
|
568
592
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
569
593
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
570
|
-
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
571
|
-
const combineRef = (ref) => {
|
|
572
|
-
var _a;
|
|
573
|
-
nodeRef(ref);
|
|
574
|
-
(_a = props.ref) == null ? void 0 : _a.call(props, ref);
|
|
575
|
-
};
|
|
594
|
+
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt, props.ref);
|
|
576
595
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
577
596
|
when: shouldSwitch() === false
|
|
578
|
-
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadValues({
|
|
579
|
-
as: props.as,
|
|
580
|
-
ref: combineRef,
|
|
597
|
+
}, /* @__PURE__ */ React.createElement(SplitBase, __spreadProps(__spreadValues({
|
|
581
598
|
fraction: props.fraction
|
|
582
|
-
}, props)
|
|
599
|
+
}, props), {
|
|
600
|
+
ref: nodeRef
|
|
601
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
583
602
|
when: shouldSwitch() === true
|
|
584
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
}, props))));
|
|
603
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
604
|
+
ref: nodeRef
|
|
605
|
+
}))));
|
|
588
606
|
};
|
|
589
607
|
function getSafeMinHeight(minHeight) {
|
|
590
608
|
if (typeof minHeight === "number")
|
|
@@ -681,16 +699,13 @@ const Columns = (props) => {
|
|
|
681
699
|
};
|
|
682
700
|
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
683
701
|
when: shouldSwitch() === false
|
|
684
|
-
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadValues({
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
columns: props.columns
|
|
688
|
-
}, props))), /* @__PURE__ */ React.createElement(Match, {
|
|
702
|
+
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadProps(__spreadValues({}, props), {
|
|
703
|
+
ref: combineRef
|
|
704
|
+
}))), /* @__PURE__ */ React.createElement(Match, {
|
|
689
705
|
when: shouldSwitch() === true
|
|
690
|
-
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
691
|
-
as: props.as,
|
|
706
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
|
|
692
707
|
ref: combineRef
|
|
693
|
-
}
|
|
708
|
+
}))));
|
|
694
709
|
};
|
|
695
710
|
const safeSpan = (span) => {
|
|
696
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<0)&&A("width value(s) must be 0 or greater"),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,10 +137,10 @@ 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;
|
|
@@ -148,9 +148,17 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
flex-wrap: nowrap;
|
|
151
|
-
${e=>e.stretch==="all"
|
|
152
|
-
|
|
153
|
-
|
|
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)?`
|
|
154
162
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
155
163
|
flex-wrap: wrap;
|
|
156
164
|
> * {
|
|
@@ -160,17 +168,17 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
160
168
|
);
|
|
161
169
|
}
|
|
162
170
|
`:""}
|
|
163
|
-
`,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`
|
|
164
172
|
box-sizing: border-box;
|
|
165
|
-
${e=>
|
|
166
|
-
`,
|
|
173
|
+
${e=>ce(e.theme,e.padding)}
|
|
174
|
+
`,se=r.styled.div`
|
|
167
175
|
box-sizing: border-box;
|
|
168
176
|
> * {
|
|
169
177
|
margin: 0;
|
|
170
178
|
scroll-snap-align: start;
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
--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"}};
|
|
174
182
|
|
|
175
183
|
display: flex;
|
|
176
184
|
gap: var(--gutter, 0px);
|
|
@@ -178,14 +186,14 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
178
186
|
overflow-x: scroll;
|
|
179
187
|
|
|
180
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"}}};
|
|
181
|
-
`,
|
|
189
|
+
`,z=r.styled("div")`
|
|
182
190
|
@property --gutter {
|
|
183
191
|
syntax: "<length-percentage>";
|
|
184
192
|
inherits: false;
|
|
185
193
|
initial-value: 0;
|
|
186
194
|
}
|
|
187
195
|
|
|
188
|
-
--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"}};
|
|
189
197
|
box-sizing: border-box;
|
|
190
198
|
> * {
|
|
191
199
|
margin: 0;
|
|
@@ -199,18 +207,18 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
199
207
|
& > [data-bedrock-column] {
|
|
200
208
|
grid-column: span 1 / auto;
|
|
201
209
|
}
|
|
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"},
|
|
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`
|
|
203
211
|
box-sizing: border-box;
|
|
204
212
|
> * {
|
|
205
213
|
margin: 0;
|
|
206
214
|
}
|
|
207
215
|
|
|
208
|
-
--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"}};
|
|
209
217
|
|
|
210
218
|
display: grid;
|
|
211
219
|
gap: var(--gutter, 0px);
|
|
212
220
|
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
|
|
213
|
-
`,
|
|
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`
|
|
214
222
|
@property --gutter {
|
|
215
223
|
syntax: "<length-percentage>";
|
|
216
224
|
inherits: false;
|
|
@@ -223,9 +231,9 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
223
231
|
initial-value: 100vh;
|
|
224
232
|
}
|
|
225
233
|
|
|
226
|
-
--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"}};
|
|
227
235
|
|
|
228
|
-
--minHeight: ${e=>
|
|
236
|
+
--minHeight: ${e=>fe(e.minHeight)};
|
|
229
237
|
|
|
230
238
|
> * {
|
|
231
239
|
margin: 0;
|
|
@@ -250,7 +258,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
250
258
|
}
|
|
251
259
|
`:""};
|
|
252
260
|
}
|
|
253
|
-
`,
|
|
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`
|
|
254
262
|
@property --gutter {
|
|
255
263
|
syntax: "<length-percentage>";
|
|
256
264
|
inherits: false;
|
|
@@ -262,7 +270,7 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
262
270
|
inherits: true;
|
|
263
271
|
initial-value: 1;
|
|
264
272
|
}
|
|
265
|
-
--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"}};
|
|
266
274
|
|
|
267
275
|
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
268
276
|
|
|
@@ -275,14 +283,14 @@ var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnProp
|
|
|
275
283
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
276
284
|
gap: var(--gutter, 0px);
|
|
277
285
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
278
|
-
`,
|
|
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`
|
|
279
287
|
@property --span {
|
|
280
288
|
syntax: "<number>";
|
|
281
289
|
inherits: true;
|
|
282
290
|
initial-value: 1;
|
|
283
291
|
}
|
|
284
292
|
|
|
285
|
-
--span: ${e=>
|
|
293
|
+
--span: ${e=>ye(e.colSpan)};
|
|
286
294
|
|
|
287
295
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
288
296
|
|
|
@@ -306,4 +314,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
306
314
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
307
315
|
}
|
|
308
316
|
`:""}
|
|
309
|
-
`;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.4",
|
|
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": "25bfd5f7fdd19a97807fd747089cf5cf7798f5be"
|
|
66
66
|
}
|