@bedrock-layout/solid 0.9.0 → 0.11.1
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/columns.d.ts +31 -0
- package/lib/index.cjs.js +90 -24
- package/lib/index.d.ts +2 -0
- package/lib/index.m.js +204 -70
- package/lib/index.umd.js +88 -22
- package/lib/masonry-grid.d.ts +3 -0
- package/lib/spacing-constants.d.ts +1 -1
- package/lib/toPx.d.ts +4 -0
- package/package.json +2 -2
package/lib/columns.d.ts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Component, JSX } from "solid-js";
|
|
2
|
+
import { SpacingOptions } from "./spacing-constants";
|
|
3
|
+
import { StackProps } from "./stack";
|
|
4
|
+
interface ColumnsBaseProps {
|
|
5
|
+
gutter?: SpacingOptions;
|
|
6
|
+
columns?: number;
|
|
7
|
+
dense?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface ColumnsProps extends StackProps, ColumnsBaseProps {
|
|
10
|
+
switchAt?: number | string;
|
|
11
|
+
as?: Component | keyof JSX.IntrinsicElements;
|
|
12
|
+
ref?: (ref: HTMLElement) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const Columns: Component<ColumnsProps>;
|
|
15
|
+
export interface ColumnProps {
|
|
16
|
+
colSpan?: number;
|
|
17
|
+
offsetStart?: number;
|
|
18
|
+
offsetEnd?: number;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* ColumnsProps passed twice to make propTypes work.
|
|
22
|
+
*
|
|
23
|
+
* span is remaped to colSpan due to span being an attribute that gets
|
|
24
|
+
* passed to the underlying element. This can cause issues with Grid layout.
|
|
25
|
+
*
|
|
26
|
+
* In a future breaking change, colSpan should be the public API.
|
|
27
|
+
* */
|
|
28
|
+
export declare const Column: ((props: ColumnProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
29
|
+
className: (props: ColumnProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
30
|
+
};
|
|
31
|
+
export {};
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var X=Object.defineProperty,H=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))j.call(t,n)&&M(e,n,t[n]);if(b)for(var n of b(t))I.call(t,n)&&M(e,n,t[n]);return e},w=(e,t)=>H(e,F(t));var P=(e,t)=>{var n={};for(var r in e)j.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&b)for(var r of b(e))t.indexOf(r)<0&&I.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var o=require("solid-styled-components"),p=require("@bedrock-layout/register-resize-callback"),s=require("solid-js");function R(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const k={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function G(e){return e.reduce((t,[n,r])=>w(g({},t),{[n]:r}),{})}const u=(e,t)=>{var i,l;const n=(l=(i=t==null?void 0:t.space)!=null?i:t==null?void 0:t.spacing)!=null?l:k,a=G(Object.entries(n).map(([d,f])=>[d,typeof f=="number"?`${f}px`:f]))[e];return R(a)?a:void 0};function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=o.styled.div`
|
|
2
2
|
@property --maxWidth {
|
|
3
3
|
syntax: "<length-percentage>";
|
|
4
4
|
inherits: false;
|
|
5
5
|
initial-value: 100%;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
--maxWidth: ${e=>
|
|
8
|
+
--maxWidth: ${e=>N(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -17,16 +17,16 @@
|
|
|
17
17
|
|
|
18
18
|
max-inline-size: var(--maxWidth, 100%);
|
|
19
19
|
|
|
20
|
-
${e=>e.centerChildren?
|
|
20
|
+
${e=>e.centerChildren?o.css`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
align-items: center;
|
|
24
24
|
`:""}
|
|
25
25
|
|
|
26
|
-
${e=>e.centerText?
|
|
26
|
+
${e=>e.centerText?o.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function q(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const Q=o.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
42
|
+
--basis: ${e=>q(e.basis)};
|
|
43
43
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function E(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[n,r]=s.createSignal(!1),[a,c]=s.createSignal();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=a();if(i==null)return;const l=p.registerCallback(i,d=>{var m,x;const f=(x=(m=d.borderBoxSize)==null?void 0:m.inlineSize)!=null?x:d.contentRect.width;if(f>0){const S=t===void 0?f<=e:f>=e&&f<=t;r(S)}});s.onCleanup(l)}),[n,c]}function U(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function J(e){return Array.isArray(e)?e.join("/"):e}function K(e){return U(e)?J(e):void 0}const Y=o.styled.div`
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
display: block;
|
|
59
59
|
inline-size: 100%;
|
|
60
60
|
position: relative;
|
|
61
61
|
overflow: hidden;
|
|
62
62
|
|
|
63
|
-
${e=>{const t=
|
|
63
|
+
${e=>{const t=K(e.ratio);return t?o.css`
|
|
64
64
|
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
object-fit: cover;
|
|
89
89
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,O=o.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -116,7 +116,16 @@
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
119
|
+
`,y=96;function L(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function h(e,t){if(!e)return null;const n=t!=null?t:document.body,r=(e!=null?e:"px").trim().toLowerCase();switch(r){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return Z(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return y;case"cm":return y/2.54;case"mm":return y/25.4;case"pt":return y/72;case"pc":return y/6;case"px":return 1;default:{const[a,c]=L(r);if(isNaN(a))return null;if(!c)return a;const i=h(c,t);return typeof i=="number"?a*i:null}}}function C(e,t){var a;const[n,r]=L(getComputedStyle(e).getPropertyValue(t));return n*((a=h(r,e))!=null?a:1)}function Z(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=C(n,"height")/128;return t.removeChild(n),r}const ee=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,te=o.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,ne=e=>{const[t,n]=s.createSignal(1),[r,a]=s.createSignal(),c=o.useTheme();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=r();if(i==null)return;const l=p.registerCallback(i,({target:d})=>{var z;n(1);const f=e.gutter&&(z=u(e.gutter,c))!=null?z:"1px",m=ee?h(f,d):null,x=Math.max(m!=null?m:1,1),[S]=Array.from(d.children),W=1+Math.min(d.scrollHeight,S.scrollHeight),D=Math.ceil(W/x);n(D)});s.onCleanup(l)}),React.createElement(te,{style:`--rows: ${t()}`,ref:a},e.children)},re=o.styled(O)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,ie=e=>{const t=s.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(a=>React.createElement(ne,{gutter:e.gutter},a));return React.createElement(re,g({},e),r)},v={start:"flex-start",end:"flex-end",center:"center"},$=w(g({},v),{stretch:"stretch"}),V=o.styled.div`
|
|
120
129
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
@@ -128,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"&&v[e.justify]?v[e.justify]:v.start};
|
|
132
141
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"
|
|
134
|
-
`;function
|
|
142
|
+
align-items: ${e=>typeof e.align!="undefined"&&$[e.align]?$[e.align]:$.start};
|
|
143
|
+
`;function ae(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ce=o.styled(V)`
|
|
135
144
|
@property --switchAt {
|
|
136
145
|
syntax: "<length-percentage>";
|
|
137
146
|
inherits: true;
|
|
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=>ae(e.switchAt)?`
|
|
144
154
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
155
|
flex-wrap: wrap;
|
|
146
156
|
> * {
|
|
@@ -150,10 +160,10 @@
|
|
|
150
160
|
);
|
|
151
161
|
}
|
|
152
162
|
`:""}
|
|
153
|
-
`,
|
|
163
|
+
`,B=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),oe=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function se(e){return t=>{const n=u(t,e);return n!=null?n:"0px"}}function le(e,t){var c;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((c=e==null?void 0:e.spacing)!=null?c:k));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(i=>n.has(i)):t&&Object.keys(t).every(i=>B.has(i))&&Object.values(t).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=se(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[l,d])=>B.has(l)?i+oe(l,a(d)):i,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(i=>a(i)).join(" ")};`:""}const ue=o.styled.div`
|
|
154
164
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
165
|
+
${e=>le(e.theme,e.padding)}
|
|
166
|
+
`,de=o.styled.div`
|
|
157
167
|
box-sizing: border-box;
|
|
158
168
|
> * {
|
|
159
169
|
margin: 0;
|
|
@@ -168,7 +178,7 @@
|
|
|
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
|
+
`,A=o.styled("div")`
|
|
172
182
|
@property --gutter {
|
|
173
183
|
syntax: "<length-percentage>";
|
|
174
184
|
inherits: false;
|
|
@@ -189,7 +199,7 @@
|
|
|
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"},fe=o.styled.div`
|
|
193
203
|
box-sizing: border-box;
|
|
194
204
|
> * {
|
|
195
205
|
margin: 0;
|
|
@@ -199,8 +209,8 @@
|
|
|
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
|
+
`,ge=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(fe,g({as:e.as,ref:c,fraction:e.fraction},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))};function me(e){return typeof e=="number"?`${e}px`:e&&R(e)?e:"100vh"}const ye=o.styled.div`
|
|
204
214
|
@property --gutter {
|
|
205
215
|
syntax: "<length-percentage>";
|
|
206
216
|
inherits: false;
|
|
@@ -215,7 +225,7 @@
|
|
|
215
225
|
|
|
216
226
|
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
227
|
|
|
218
|
-
--minHeight: ${e=>
|
|
228
|
+
--minHeight: ${e=>me(e.minHeight)};
|
|
219
229
|
|
|
220
230
|
> * {
|
|
221
231
|
margin: 0;
|
|
@@ -240,4 +250,60 @@
|
|
|
240
250
|
}
|
|
241
251
|
`:""};
|
|
242
252
|
}
|
|
243
|
-
`,
|
|
253
|
+
`,he=e=>{const c=e,{top:t,bottom:n,children:r}=c,a=P(c,["top","bottom","children"]);return React.createElement(ye,g({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},xe=o.styled.div`
|
|
254
|
+
@property --gutter {
|
|
255
|
+
syntax: "<length-percentage>";
|
|
256
|
+
inherits: false;
|
|
257
|
+
initial-value: 0;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@property --columns {
|
|
261
|
+
syntax: "<number>";
|
|
262
|
+
inherits: true;
|
|
263
|
+
initial-value: 1;
|
|
264
|
+
}
|
|
265
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
|
|
266
|
+
|
|
267
|
+
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
268
|
+
|
|
269
|
+
box-sizing: border-box;
|
|
270
|
+
> * {
|
|
271
|
+
margin: 0;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
display: grid;
|
|
275
|
+
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
276
|
+
gap: var(--gutter, 0px);
|
|
277
|
+
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
278
|
+
`,be=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(xe,g({as:e.as,ref:c,columns:e.columns},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))},ve=e=>typeof e=="number"?e:1,pe=o.styled.div`
|
|
279
|
+
@property --span {
|
|
280
|
+
syntax: "<number>";
|
|
281
|
+
inherits: true;
|
|
282
|
+
initial-value: 1;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
--span: ${e=>ve(e.colSpan)};
|
|
286
|
+
|
|
287
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
288
|
+
|
|
289
|
+
${e=>e.offsetStart||e.offsetEnd?`
|
|
290
|
+
display: contents;
|
|
291
|
+
> * {
|
|
292
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
293
|
+
}
|
|
294
|
+
`:""}
|
|
295
|
+
|
|
296
|
+
${e=>e.offsetStart&&e.offsetStart>0?`
|
|
297
|
+
&::before {
|
|
298
|
+
content: "";
|
|
299
|
+
grid-column: span min(${e.offsetStart}, var(--columns, 1));
|
|
300
|
+
}
|
|
301
|
+
`:""}
|
|
302
|
+
|
|
303
|
+
${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
304
|
+
&::after {
|
|
305
|
+
content: "";
|
|
306
|
+
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
307
|
+
}
|
|
308
|
+
`:""}
|
|
309
|
+
`;exports.Center=_;exports.Column=pe;exports.ColumnDrop=Q;exports.Columns=be;exports.Cover=he;exports.Frame=Y;exports.Grid=O;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=ie;exports.PadBox=ue;exports.Reel=de;exports.Split=ge;exports.Stack=A;exports.checkIsCSSLength=R;exports.createContainerQuery=E;exports.getSpacingValue=u;exports.spacing=k;
|
package/lib/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from "./column-drop";
|
|
|
4
4
|
export * from "./create-container-query";
|
|
5
5
|
export * from "./frame";
|
|
6
6
|
export * from "./grid";
|
|
7
|
+
export * from "./masonry-grid";
|
|
7
8
|
export * from "./inline-cluster";
|
|
8
9
|
export * from "./inline";
|
|
9
10
|
export * from "./padbox";
|
|
@@ -11,3 +12,4 @@ export * from "./reel";
|
|
|
11
12
|
export * from "./split";
|
|
12
13
|
export * from "./stack";
|
|
13
14
|
export * from "./cover";
|
|
15
|
+
export * from "./columns";
|
package/lib/index.m.js
CHANGED
|
@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { styled, css } from "solid-styled-components";
|
|
32
|
+
import { styled, css, useTheme } from "solid-styled-components";
|
|
33
33
|
import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
|
|
34
|
-
import { createSignal, onMount, createEffect, onCleanup, Switch, Match } from "solid-js";
|
|
34
|
+
import { createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
|
|
35
35
|
function checkIsCSSLength(str) {
|
|
36
36
|
if (typeof str !== "string")
|
|
37
37
|
return false;
|
|
@@ -256,6 +256,118 @@ const Grid = styled("div")`
|
|
|
256
256
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
257
257
|
);
|
|
258
258
|
`;
|
|
259
|
+
const PIXELS_PER_INCH = 96;
|
|
260
|
+
function parseUnit(str) {
|
|
261
|
+
var _a;
|
|
262
|
+
str = String(str);
|
|
263
|
+
const num = parseFloat(str);
|
|
264
|
+
const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
|
|
265
|
+
return [num, unit];
|
|
266
|
+
}
|
|
267
|
+
function toPX(str, element) {
|
|
268
|
+
if (!str)
|
|
269
|
+
return null;
|
|
270
|
+
const elementOrBody = element != null ? element : document.body;
|
|
271
|
+
const safeStr = (str != null ? str : "px").trim().toLowerCase();
|
|
272
|
+
switch (safeStr) {
|
|
273
|
+
case "vmin":
|
|
274
|
+
case "vmax":
|
|
275
|
+
case "vh":
|
|
276
|
+
case "vw":
|
|
277
|
+
case "%":
|
|
278
|
+
return null;
|
|
279
|
+
case "ch":
|
|
280
|
+
case "ex":
|
|
281
|
+
return getSizeBrutal(safeStr, elementOrBody);
|
|
282
|
+
case "em":
|
|
283
|
+
return getPropertyInPX(elementOrBody, "font-size");
|
|
284
|
+
case "rem":
|
|
285
|
+
return getPropertyInPX(document.body, "font-size");
|
|
286
|
+
case "in":
|
|
287
|
+
return PIXELS_PER_INCH;
|
|
288
|
+
case "cm":
|
|
289
|
+
return PIXELS_PER_INCH / 2.54;
|
|
290
|
+
case "mm":
|
|
291
|
+
return PIXELS_PER_INCH / 25.4;
|
|
292
|
+
case "pt":
|
|
293
|
+
return PIXELS_PER_INCH / 72;
|
|
294
|
+
case "pc":
|
|
295
|
+
return PIXELS_PER_INCH / 6;
|
|
296
|
+
case "px":
|
|
297
|
+
return 1;
|
|
298
|
+
default: {
|
|
299
|
+
const [value, units] = parseUnit(safeStr);
|
|
300
|
+
if (isNaN(value))
|
|
301
|
+
return null;
|
|
302
|
+
if (!units)
|
|
303
|
+
return value;
|
|
304
|
+
const px = toPX(units, element);
|
|
305
|
+
return typeof px === "number" ? value * px : null;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
function getPropertyInPX(element, prop) {
|
|
310
|
+
var _a;
|
|
311
|
+
const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
|
|
312
|
+
return value * ((_a = toPX(units, element)) != null ? _a : 1);
|
|
313
|
+
}
|
|
314
|
+
function getSizeBrutal(unit, element) {
|
|
315
|
+
const testDIV = document.createElement("div");
|
|
316
|
+
testDIV.style["height"] = "128" + unit;
|
|
317
|
+
element.appendChild(testDIV);
|
|
318
|
+
const size = getPropertyInPX(testDIV, "height") / 128;
|
|
319
|
+
element.removeChild(testDIV);
|
|
320
|
+
return size;
|
|
321
|
+
}
|
|
322
|
+
const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
|
|
323
|
+
const RowSpanner = styled.div`
|
|
324
|
+
grid-row: span var(--rows, 1);
|
|
325
|
+
|
|
326
|
+
> * {
|
|
327
|
+
display: block;
|
|
328
|
+
height: 100%;
|
|
329
|
+
}
|
|
330
|
+
`;
|
|
331
|
+
const Resizer = (props) => {
|
|
332
|
+
const [rowSpan, setRowSpan] = createSignal(1);
|
|
333
|
+
const [node, nodeRef] = createSignal();
|
|
334
|
+
const theme = useTheme();
|
|
335
|
+
onMount(() => {
|
|
336
|
+
init();
|
|
337
|
+
});
|
|
338
|
+
createEffect(() => {
|
|
339
|
+
const ref = node();
|
|
340
|
+
if (ref === void 0 || ref === null)
|
|
341
|
+
return;
|
|
342
|
+
const cleanup = registerCallback(ref, ({ target }) => {
|
|
343
|
+
var _a;
|
|
344
|
+
setRowSpan(1);
|
|
345
|
+
const gapString = props.gutter ? (_a = getSpacingValue(props.gutter, theme)) != null ? _a : "1px" : "1px";
|
|
346
|
+
const maybeGap = isBrowser ? toPX(gapString, target) : null;
|
|
347
|
+
const gap = Math.max(maybeGap != null ? maybeGap : 1, 1);
|
|
348
|
+
const [child] = Array.from(target.children);
|
|
349
|
+
const height = 1 + Math.min(target.scrollHeight, child.scrollHeight);
|
|
350
|
+
const rowHeight = Math.ceil(height / gap);
|
|
351
|
+
setRowSpan(rowHeight);
|
|
352
|
+
});
|
|
353
|
+
onCleanup(cleanup);
|
|
354
|
+
});
|
|
355
|
+
return /* @__PURE__ */ React.createElement(RowSpanner, {
|
|
356
|
+
style: `--rows: ${rowSpan()}`,
|
|
357
|
+
ref: nodeRef
|
|
358
|
+
}, props.children);
|
|
359
|
+
};
|
|
360
|
+
const MasonryGridWrapper = styled(Grid)`
|
|
361
|
+
grid-template-rows: 1px;
|
|
362
|
+
`;
|
|
363
|
+
const MasonryGrid = (props) => {
|
|
364
|
+
const childrenMemo = children(() => props.children);
|
|
365
|
+
const emptyResolvedChildren = [];
|
|
366
|
+
const wrappedChildren = emptyResolvedChildren.concat(childrenMemo()).filter(Boolean).map((child) => /* @__PURE__ */ React.createElement(Resizer, {
|
|
367
|
+
gutter: props.gutter
|
|
368
|
+
}, child));
|
|
369
|
+
return /* @__PURE__ */ React.createElement(MasonryGridWrapper, __spreadValues({}, props), wrappedChildren);
|
|
370
|
+
};
|
|
259
371
|
const justifyMap = {
|
|
260
372
|
start: "flex-start",
|
|
261
373
|
end: "flex-end",
|
|
@@ -298,8 +410,9 @@ const Inline = styled(InlineCluster)`
|
|
|
298
410
|
inherits: true;
|
|
299
411
|
initial-value: 0;
|
|
300
412
|
}
|
|
413
|
+
|
|
301
414
|
flex-wrap: nowrap;
|
|
302
|
-
${(props) => props.stretch === "all" ?
|
|
415
|
+
${(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
416
|
|
|
304
417
|
${(props) => shouldUseSwitch(props.switchAt) ? `
|
|
305
418
|
--switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};
|
|
@@ -454,7 +567,6 @@ const SplitBase = styled.div`
|
|
|
454
567
|
const Split = (props) => {
|
|
455
568
|
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
456
569
|
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
457
|
-
console.log(widthToSwitchAt);
|
|
458
570
|
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
459
571
|
const combineRef = (ref) => {
|
|
460
572
|
var _a;
|
|
@@ -474,70 +586,6 @@ const Split = (props) => {
|
|
|
474
586
|
ref: combineRef
|
|
475
587
|
}, props))));
|
|
476
588
|
};
|
|
477
|
-
function parseUnit(str) {
|
|
478
|
-
var _a;
|
|
479
|
-
str = String(str);
|
|
480
|
-
const num = parseFloat(str);
|
|
481
|
-
const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
|
|
482
|
-
return [num, unit];
|
|
483
|
-
}
|
|
484
|
-
function getPropertyInPX(element, prop) {
|
|
485
|
-
var _a;
|
|
486
|
-
const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
|
|
487
|
-
return value * ((_a = toPX(units, element)) != null ? _a : 1);
|
|
488
|
-
}
|
|
489
|
-
function getSizeBrutal(unit, element) {
|
|
490
|
-
const testDIV = document.createElement("div");
|
|
491
|
-
testDIV.style["height"] = "128" + unit;
|
|
492
|
-
element.appendChild(testDIV);
|
|
493
|
-
const size = getPropertyInPX(testDIV, "height") / 128;
|
|
494
|
-
element.removeChild(testDIV);
|
|
495
|
-
return size;
|
|
496
|
-
}
|
|
497
|
-
function toPX(str, element) {
|
|
498
|
-
if (!str)
|
|
499
|
-
return null;
|
|
500
|
-
const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
|
|
501
|
-
const PIXELS_PER_INCH = isBrowser ? getSizeBrutal("in", document.body) : 96;
|
|
502
|
-
const elementOrBody = element != null ? element : document.body;
|
|
503
|
-
const safeStr = (str != null ? str : "px").trim().toLowerCase();
|
|
504
|
-
switch (safeStr) {
|
|
505
|
-
case "vmin":
|
|
506
|
-
case "vmax":
|
|
507
|
-
case "vh":
|
|
508
|
-
case "vw":
|
|
509
|
-
case "%":
|
|
510
|
-
return null;
|
|
511
|
-
case "ch":
|
|
512
|
-
case "ex":
|
|
513
|
-
return getSizeBrutal(safeStr, elementOrBody);
|
|
514
|
-
case "em":
|
|
515
|
-
return getPropertyInPX(elementOrBody, "font-size");
|
|
516
|
-
case "rem":
|
|
517
|
-
return getPropertyInPX(document.body, "font-size");
|
|
518
|
-
case "in":
|
|
519
|
-
return PIXELS_PER_INCH;
|
|
520
|
-
case "cm":
|
|
521
|
-
return PIXELS_PER_INCH / 2.54;
|
|
522
|
-
case "mm":
|
|
523
|
-
return PIXELS_PER_INCH / 25.4;
|
|
524
|
-
case "pt":
|
|
525
|
-
return PIXELS_PER_INCH / 72;
|
|
526
|
-
case "pc":
|
|
527
|
-
return PIXELS_PER_INCH / 6;
|
|
528
|
-
case "px":
|
|
529
|
-
return 1;
|
|
530
|
-
default: {
|
|
531
|
-
const [value, units] = parseUnit(safeStr);
|
|
532
|
-
if (isNaN(value))
|
|
533
|
-
return null;
|
|
534
|
-
if (!units)
|
|
535
|
-
return value;
|
|
536
|
-
const px = toPX(units, element);
|
|
537
|
-
return typeof px === "number" ? value * px : null;
|
|
538
|
-
}
|
|
539
|
-
}
|
|
540
|
-
}
|
|
541
589
|
function getSafeMinHeight(minHeight) {
|
|
542
590
|
if (typeof minHeight === "number")
|
|
543
591
|
return `${minHeight}px`;
|
|
@@ -588,9 +636,95 @@ const CoverWrapper = styled.div`
|
|
|
588
636
|
}
|
|
589
637
|
`;
|
|
590
638
|
const Cover = (props) => {
|
|
591
|
-
const _a = props, { top, bottom, children } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
639
|
+
const _a = props, { top, bottom, children: children2 } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
592
640
|
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
593
641
|
"data-bedrock-cover-centered": true
|
|
594
642
|
}, props.children), props.bottom);
|
|
595
643
|
};
|
|
596
|
-
|
|
644
|
+
const ColumnsBase = styled.div`
|
|
645
|
+
@property --gutter {
|
|
646
|
+
syntax: "<length-percentage>";
|
|
647
|
+
inherits: false;
|
|
648
|
+
initial-value: 0;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
@property --columns {
|
|
652
|
+
syntax: "<number>";
|
|
653
|
+
inherits: true;
|
|
654
|
+
initial-value: 1;
|
|
655
|
+
}
|
|
656
|
+
--gutter: ${(props) => {
|
|
657
|
+
var _a;
|
|
658
|
+
return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
|
|
659
|
+
}};
|
|
660
|
+
|
|
661
|
+
--columns: ${(props) => props.columns && props.columns > 0 ? props.columns : 1};
|
|
662
|
+
|
|
663
|
+
box-sizing: border-box;
|
|
664
|
+
> * {
|
|
665
|
+
margin: 0;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
display: grid;
|
|
669
|
+
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
670
|
+
gap: var(--gutter, 0px);
|
|
671
|
+
grid-auto-flow: row ${({ dense = false }) => dense === true ? "dense" : ""};
|
|
672
|
+
`;
|
|
673
|
+
const Columns = (props) => {
|
|
674
|
+
const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
|
|
675
|
+
const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
|
|
676
|
+
const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
|
|
677
|
+
const combineRef = (ref) => {
|
|
678
|
+
var _a;
|
|
679
|
+
nodeRef(ref);
|
|
680
|
+
(_a = props.ref) == null ? void 0 : _a.call(props, ref);
|
|
681
|
+
};
|
|
682
|
+
return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
|
|
683
|
+
when: shouldSwitch() === false
|
|
684
|
+
}, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadValues({
|
|
685
|
+
as: props.as,
|
|
686
|
+
ref: combineRef,
|
|
687
|
+
columns: props.columns
|
|
688
|
+
}, props))), /* @__PURE__ */ React.createElement(Match, {
|
|
689
|
+
when: shouldSwitch() === true
|
|
690
|
+
}, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
|
|
691
|
+
as: props.as,
|
|
692
|
+
ref: combineRef
|
|
693
|
+
}, props))));
|
|
694
|
+
};
|
|
695
|
+
const safeSpan = (span) => {
|
|
696
|
+
return typeof span === "number" ? span : 1;
|
|
697
|
+
};
|
|
698
|
+
const Column = styled.div`
|
|
699
|
+
@property --span {
|
|
700
|
+
syntax: "<number>";
|
|
701
|
+
inherits: true;
|
|
702
|
+
initial-value: 1;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
--span: ${(props) => safeSpan(props.colSpan)};
|
|
706
|
+
|
|
707
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
708
|
+
|
|
709
|
+
${(props) => props.offsetStart || props.offsetEnd ? `
|
|
710
|
+
display: contents;
|
|
711
|
+
> * {
|
|
712
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
713
|
+
}
|
|
714
|
+
` : ""}
|
|
715
|
+
|
|
716
|
+
${(props) => props.offsetStart && props.offsetStart > 0 ? `
|
|
717
|
+
&::before {
|
|
718
|
+
content: "";
|
|
719
|
+
grid-column: span min(${props.offsetStart}, var(--columns, 1));
|
|
720
|
+
}
|
|
721
|
+
` : ""}
|
|
722
|
+
|
|
723
|
+
${(props) => props.offsetEnd && props.offsetEnd > 0 ? `
|
|
724
|
+
&::after {
|
|
725
|
+
content: "";
|
|
726
|
+
grid-column: span min(${props.offsetEnd}, var(--columns, 1));
|
|
727
|
+
}
|
|
728
|
+
` : ""}
|
|
729
|
+
`;
|
|
730
|
+
export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, MasonryGrid, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };
|
package/lib/index.umd.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
1
|
+
var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var O=(n,r,l)=>r in n?ve(n,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[r]=l,h=(n,r)=>{for(var l in r||(r={}))L.call(r,l)&&O(n,l,r[l]);if($)for(var l of $(r))V.call(r,l)&&O(n,l,r[l]);return n},M=(n,r)=>we(n,$e(r));var W=(n,r)=>{var l={};for(var c in n)L.call(n,c)&&r.indexOf(c)<0&&(l[c]=n[c]);if(n!=null&&$)for(var c of $(n))r.indexOf(c)<0&&V.call(n,c)&&(l[c]=n[c]);return l};(function(n,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("solid-styled-components"),require("@bedrock-layout/register-resize-callback"),require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components","@bedrock-layout/register-resize-callback","solid-js"],r):(n=typeof globalThis!="undefined"?globalThis:n||self,r(n.solid={},n.solidStyledComponents,n.registerResizeCallback,n.solidJs))})(this,function(n,r,l,c){"use strict";function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const S={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function D(e){return e.reduce((t,[i,o])=>M(h({},t),{[i]:o}),{})}const g=(e,t)=>{var a,f;const i=(f=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?f:S,s=D(Object.entries(i).map(([d,m])=>[d,typeof m=="number"?`${m}px`:m]))[e];return p(s)?s:void 0};function X(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const H=r.styled.div`
|
|
2
2
|
@property --maxWidth {
|
|
3
3
|
syntax: "<length-percentage>";
|
|
4
4
|
inherits: false;
|
|
5
5
|
initial-value: 100%;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
--maxWidth: ${e=>
|
|
8
|
+
--maxWidth: ${e=>X(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -26,7 +26,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
26
26
|
${e=>e.centerText?r.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function F(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const G=r.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,7 +39,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
42
|
+
--basis: ${e=>F(e.basis)};
|
|
43
43
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
@@ -53,14 +53,14 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function R(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[i,o]=c.createSignal(!1),[s,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=s();if(a==null)return;const f=l.registerCallback(a,d=>{var y,w;const m=(w=(y=d.borderBoxSize)==null?void 0:y.inlineSize)!=null?w:d.contentRect.width;if(m>0){const z=t===void 0?m<=e:m>=e&&m<=t;o(z)}});c.onCleanup(f)}),[i,u]}function N(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function _(e){return Array.isArray(e)?e.join("/"):e}function q(e){return N(e)?_(e):void 0}const Q=r.styled.div`
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
display: block;
|
|
59
59
|
inline-size: 100%;
|
|
60
60
|
position: relative;
|
|
61
61
|
overflow: hidden;
|
|
62
62
|
|
|
63
|
-
${e=>{const t=
|
|
63
|
+
${e=>{const t=q(e.ratio);return t?r.css`
|
|
64
64
|
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
@@ -88,7 +88,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
88
88
|
object-fit: cover;
|
|
89
89
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,j=r.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -116,7 +116,16 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
119
|
+
`,x=96;function C(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function b(e,t){if(!e)return null;const i=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return U(o,i);case"em":return k(i,"font-size");case"rem":return k(document.body,"font-size");case"in":return x;case"cm":return x/2.54;case"mm":return x/25.4;case"pt":return x/72;case"pc":return x/6;case"px":return 1;default:{const[s,u]=C(o);if(isNaN(s))return null;if(!u)return s;const a=b(u,t);return typeof a=="number"?s*a:null}}}function k(e,t){var s;const[i,o]=C(getComputedStyle(e).getPropertyValue(t));return i*((s=b(o,e))!=null?s:1)}function U(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=k(i,"height")/128;return t.removeChild(i),o}const K=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Y=r.styled.div`
|
|
120
|
+
grid-row: span var(--rows, 1);
|
|
121
|
+
|
|
122
|
+
> * {
|
|
123
|
+
display: block;
|
|
124
|
+
height: 100%;
|
|
125
|
+
}
|
|
126
|
+
`,Z=e=>{const[t,i]=c.createSignal(1),[o,s]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=o();if(a==null)return;const f=l.registerCallback(a,({target:d})=>{var B;i(1);const m=e.gutter&&(B=g(e.gutter,u))!=null?B:"1px",y=K?b(m,d):null,w=Math.max(y!=null?y:1,1),[z]=Array.from(d.children),xe=1+Math.min(d.scrollHeight,z.scrollHeight),be=Math.ceil(xe/w);i(be)});c.onCleanup(f)}),React.createElement(Y,{style:`--rows: ${t()}`,ref:s},e.children)},J=r.styled(j)`
|
|
127
|
+
grid-template-rows: 1px;
|
|
128
|
+
`,ee=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(s=>React.createElement(Z,{gutter:e.gutter},s));return React.createElement(J,h({},e),o)},v={start:"flex-start",end:"flex-end",center:"center"},E=M(h({},v),{stretch:"stretch"}),I=r.styled.div`
|
|
120
129
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
130
|
|
|
122
131
|
box-sizing: border-box;
|
|
@@ -128,19 +137,20 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
128
137
|
flex-wrap: wrap;
|
|
129
138
|
gap: var(--gutter, 0px);
|
|
130
139
|
|
|
131
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
140
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&v[e.justify]?v[e.justify]:v.start};
|
|
132
141
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"&&
|
|
134
|
-
`;function
|
|
142
|
+
align-items: ${e=>typeof e.align!="undefined"&&E[e.align]?E[e.align]:E.start};
|
|
143
|
+
`;function te(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ne=r.styled(I)`
|
|
135
144
|
@property --switchAt {
|
|
136
145
|
syntax: "<length-percentage>";
|
|
137
146
|
inherits: true;
|
|
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=>te(e.switchAt)?`
|
|
144
154
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
155
|
flex-wrap: wrap;
|
|
146
156
|
> * {
|
|
@@ -150,10 +160,10 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
150
160
|
);
|
|
151
161
|
}
|
|
152
162
|
`:""}
|
|
153
|
-
`,
|
|
163
|
+
`,P=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),re=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function ie(e){return t=>{const i=g(t,e);return i!=null?i:"0px"}}function ae(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const i=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:S));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>i.has(a)):t&&Object.keys(t).every(a=>P.has(a))&&Object.values(t).every(a=>i.has(a)))()||console.error("Invalid padding Type");const s=ie(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[f,d])=>P.has(f)?a+re(f,s(d)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>s(a)).join(" ")};`:""}const ce=r.styled.div`
|
|
154
164
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
165
|
+
${e=>ae(e.theme,e.padding)}
|
|
166
|
+
`,oe=r.styled.div`
|
|
157
167
|
box-sizing: border-box;
|
|
158
168
|
> * {
|
|
159
169
|
margin: 0;
|
|
@@ -168,7 +178,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=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
|
+
`,A=r.styled("div")`
|
|
172
182
|
@property --gutter {
|
|
173
183
|
syntax: "<length-percentage>";
|
|
174
184
|
inherits: false;
|
|
@@ -189,7 +199,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=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"},se=r.styled.div`
|
|
193
203
|
box-sizing: border-box;
|
|
194
204
|
> * {
|
|
195
205
|
margin: 0;
|
|
@@ -199,8 +209,8 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
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
|
+
`,le=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(se,h({as:e.as,ref:u,fraction:e.fraction},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))};function ue(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const fe=r.styled.div`
|
|
204
214
|
@property --gutter {
|
|
205
215
|
syntax: "<length-percentage>";
|
|
206
216
|
inherits: false;
|
|
@@ -215,7 +225,7 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
215
225
|
|
|
216
226
|
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
217
227
|
|
|
218
|
-
--minHeight: ${e=>
|
|
228
|
+
--minHeight: ${e=>ue(e.minHeight)};
|
|
219
229
|
|
|
220
230
|
> * {
|
|
221
231
|
margin: 0;
|
|
@@ -240,4 +250,60 @@ var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnProp
|
|
|
240
250
|
}
|
|
241
251
|
`:""};
|
|
242
252
|
}
|
|
243
|
-
`,
|
|
253
|
+
`,ge=e=>{const u=e,{top:t,bottom:i,children:o}=u,s=W(u,["top","bottom","children"]);return React.createElement(fe,h({},s),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},de=r.styled.div`
|
|
254
|
+
@property --gutter {
|
|
255
|
+
syntax: "<length-percentage>";
|
|
256
|
+
inherits: false;
|
|
257
|
+
initial-value: 0;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@property --columns {
|
|
261
|
+
syntax: "<number>";
|
|
262
|
+
inherits: true;
|
|
263
|
+
initial-value: 1;
|
|
264
|
+
}
|
|
265
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
|
|
266
|
+
|
|
267
|
+
--columns: ${e=>e.columns&&e.columns>0?e.columns:1};
|
|
268
|
+
|
|
269
|
+
box-sizing: border-box;
|
|
270
|
+
> * {
|
|
271
|
+
margin: 0;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
display: grid;
|
|
275
|
+
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
276
|
+
gap: var(--gutter, 0px);
|
|
277
|
+
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
278
|
+
`,me=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(de,h({as:e.as,ref:u,columns:e.columns},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))},he=e=>typeof e=="number"?e:1,ye=r.styled.div`
|
|
279
|
+
@property --span {
|
|
280
|
+
syntax: "<number>";
|
|
281
|
+
inherits: true;
|
|
282
|
+
initial-value: 1;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
--span: ${e=>he(e.colSpan)};
|
|
286
|
+
|
|
287
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
288
|
+
|
|
289
|
+
${e=>e.offsetStart||e.offsetEnd?`
|
|
290
|
+
display: contents;
|
|
291
|
+
> * {
|
|
292
|
+
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
293
|
+
}
|
|
294
|
+
`:""}
|
|
295
|
+
|
|
296
|
+
${e=>e.offsetStart&&e.offsetStart>0?`
|
|
297
|
+
&::before {
|
|
298
|
+
content: "";
|
|
299
|
+
grid-column: span min(${e.offsetStart}, var(--columns, 1));
|
|
300
|
+
}
|
|
301
|
+
`:""}
|
|
302
|
+
|
|
303
|
+
${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
304
|
+
&::after {
|
|
305
|
+
content: "";
|
|
306
|
+
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
307
|
+
}
|
|
308
|
+
`:""}
|
|
309
|
+
`;n.Center=H,n.Column=ye,n.ColumnDrop=G,n.Columns=me,n.Cover=ge,n.Frame=Q,n.Grid=j,n.Inline=ne,n.InlineCluster=I,n.MasonryGrid=ee,n.PadBox=ce,n.Reel=oe,n.Split=le,n.Stack=A,n.checkIsCSSLength=p,n.createContainerQuery=R,n.getSpacingValue=g,n.spacing=S,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DefaultTheme } from "solid-styled-components";
|
|
1
|
+
import type { DefaultTheme } from "solid-styled-components";
|
|
2
2
|
declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
|
|
3
3
|
declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
|
|
4
4
|
declare type NonEmptyString = `${AllCharacter}${string}`;
|
package/lib/toPx.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.1",
|
|
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": "369e7e9cd75c55400dfc6879d75ed96d9036ab22"
|
|
66
66
|
}
|