@bedrock-layout/solid 0.11.5 → 0.11.8
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/README.md +6 -6
- package/lib/index.cjs.js +30 -30
- package/lib/index.m.js +7 -21
- package/lib/index.umd.js +29 -29
- package/lib/reel.d.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
# `@bedrock-layout/
|
|
1
|
+
# `@bedrock-layout/solid`
|
|
2
2
|
|
|
3
|
-
All the primitives and
|
|
3
|
+
All the layout primitives and solid primitives in a single package.
|
|
4
4
|
|
|
5
|
-
Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
|
|
5
|
+
Full docs at: [solid.bedrock-layout.dev](https://solid.bedrock-layout.dev/)
|
|
6
6
|
|
|
7
7
|
## How to install
|
|
8
8
|
|
|
9
|
-
`npm install @bedrock-layout/
|
|
9
|
+
`npm install @bedrock-layout/solid`
|
|
10
10
|
|
|
11
11
|
or
|
|
12
12
|
|
|
13
|
-
`yarn add @bedrock-laylock/
|
|
13
|
+
`yarn add @bedrock-laylock/solid`
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
17
|
## Usage
|
|
18
18
|
|
|
19
19
|
```javascript
|
|
20
|
-
import { Stack, Inline, Split, Cover, Frame } from '@bedrock-layout/
|
|
20
|
+
import { Stack, Inline, Split, Cover, Frame } from '@bedrock-layout/solid';
|
|
21
21
|
|
|
22
22
|
export function Hero() {
|
|
23
23
|
return (
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var L=Object.defineProperty,D=Object.defineProperties;var X=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))H.call(t,n)&&M(e,n,t[n]);if(z)for(var n of z(t))F.call(t,n)&&M(e,n,t[n]);return e},m=(e,t)=>D(e,X(t));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var s=require("solid-styled-components"),b=require("@bedrock-layout/register-resize-callback"),o=require("solid-js");function C(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 A={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])=>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:A,i=G(Object.entries(n).map(([u,g])=>[u,typeof g=="number"?`${g}px`:g]))[e];return C(i)?i:void 0};function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=s.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?`
|
|
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?`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function q(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}const Q=s.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=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
@@ -54,14 +54,14 @@
|
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
justify-content: center;
|
|
56
56
|
gap: var(--gutter, 0px);
|
|
57
|
-
`;function
|
|
57
|
+
`;function S(e){throw new Error(e)}function U(e){typeof e!="number"&&!Array.isArray(e)&&S("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&S("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&S(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function R(e,t){U(e);const[n,r]=o.createSignal(!1),[i,c]=o.createSignal();return o.onMount(()=>{b.init()}),o.createEffect(()=>{if(i()===void 0||i()===null)return;t&&t(i());const a=b.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 v=Array.isArray(e)?u>=e[0]&&u<=e[1]:u<=e;r(v)}});o.onCleanup(a)}),[n,c]}function J(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 K(e){return Array.isArray(e)?e.join("/"):e}function Y(e){return J(e)?K(e):void 0}const Z=s.styled.div`
|
|
58
58
|
box-sizing: border-box;
|
|
59
59
|
display: block;
|
|
60
60
|
inline-size: 100%;
|
|
61
61
|
position: relative;
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
|
|
64
|
-
${e=>{const t=
|
|
64
|
+
${e=>{const t=Y(e.ratio);return t?s.css`
|
|
65
65
|
aspect-ratio: ${t};
|
|
66
66
|
`:""}};
|
|
67
67
|
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
object-fit: cover;
|
|
90
90
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
91
91
|
}
|
|
92
|
-
`,
|
|
92
|
+
`,P=s.styled("div")`
|
|
93
93
|
@property --gutter {
|
|
94
94
|
syntax: "<length-percentage>";
|
|
95
95
|
inherits: false;
|
|
@@ -117,16 +117,16 @@
|
|
|
117
117
|
auto-fit,
|
|
118
118
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
119
119
|
);
|
|
120
|
-
`,x=96;function
|
|
120
|
+
`,x=96;function W(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 ee(r,n);case"em":return w(n,"font-size");case"rem":return w(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[i,c]=W(r);if(isNaN(i))return null;if(!c)return i;const a=h(c,t);return typeof a=="number"?i*a:null}}}function w(e,t){var i;const[n,r]=W(getComputedStyle(e).getPropertyValue(t));return n*((i=h(r,e))!=null?i:1)}function ee(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=w(n,"height")/128;return t.removeChild(n),r}const te=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,ne=s.styled.div`
|
|
121
121
|
grid-row: span var(--rows, 1);
|
|
122
122
|
|
|
123
123
|
> * {
|
|
124
124
|
display: block;
|
|
125
125
|
height: 100%;
|
|
126
126
|
}
|
|
127
|
-
`,
|
|
127
|
+
`,re=e=>{const[t,n]=o.createSignal(1),[r,i]=o.createSignal(),c=s.useTheme();return o.onMount(()=>{b.init()}),o.createEffect(()=>{const a=r();if(a==null)return;const l=b.registerCallback(a,({target:u})=>{var E;n(1);const g=e.gutter&&(E=d(e.gutter,c))!=null?E:"1px",y=te?h(g,u):null,v=Math.max(y!=null?y:1,1),[B]=Array.from(u.children),O=1+Math.min(u.scrollHeight,B.scrollHeight),V=Math.ceil(O/v);n(V)});o.onCleanup(l)}),React.createElement(ne,{style:`--rows: ${t()}`,ref:i},e.children)},ie=s.styled(P)`
|
|
128
128
|
grid-template-rows: 1px;
|
|
129
|
-
`,
|
|
129
|
+
`,ae=e=>{const t=o.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(i=>React.createElement(re,{gutter:e.gutter},i));return React.createElement(ie,f({},e),r)},p={start:"flex-start",end:"flex-end",center:"center"},$=m(f({},p),{stretch:"stretch"}),T=s.styled.div`
|
|
130
130
|
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
131
131
|
|
|
132
132
|
box-sizing: border-box;
|
|
@@ -138,10 +138,10 @@
|
|
|
138
138
|
flex-wrap: wrap;
|
|
139
139
|
gap: var(--gutter, 0px);
|
|
140
140
|
|
|
141
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
141
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&p[e.justify]?p[e.justify]:p.start};
|
|
142
142
|
|
|
143
|
-
align-items: ${e=>typeof e.align!="undefined"
|
|
144
|
-
`;function
|
|
143
|
+
align-items: ${e=>typeof e.align!="undefined"&&$[e.align]?$[e.align]:$.start};
|
|
144
|
+
`;function oe(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const se=s.styled(T)`
|
|
145
145
|
@property --switchAt {
|
|
146
146
|
syntax: "<length-percentage>";
|
|
147
147
|
inherits: true;
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
flex: 1;
|
|
160
160
|
}`:""}
|
|
161
161
|
|
|
162
|
-
${e=>
|
|
162
|
+
${e=>oe(e.switchAt)?`
|
|
163
163
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
164
164
|
flex-wrap: wrap;
|
|
165
165
|
> * {
|
|
@@ -169,10 +169,10 @@
|
|
|
169
169
|
);
|
|
170
170
|
}
|
|
171
171
|
`:""}
|
|
172
|
-
`,
|
|
172
|
+
`,j=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),ce=(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 le(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function ue(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:A));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>n.has(a)):t&&Object.keys(t).every(a=>j.has(a))&&Object.values(t).every(a=>n.has(a)))()||console.error("Invalid padding Type");const i=le(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[l,u])=>j.has(l)?a+ce(l,i(u)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>i(a)).join(" ")};`:""}const de=s.styled.div`
|
|
173
173
|
box-sizing: border-box;
|
|
174
|
-
${e=>
|
|
175
|
-
`,
|
|
174
|
+
${e=>ue(e.theme,e.padding)}
|
|
175
|
+
`,fe=s.styled.div`
|
|
176
176
|
box-sizing: border-box;
|
|
177
177
|
> * {
|
|
178
178
|
margin: 0;
|
|
@@ -186,15 +186,15 @@
|
|
|
186
186
|
|
|
187
187
|
overflow-x: scroll;
|
|
188
188
|
|
|
189
|
-
scroll-snap-type: ${
|
|
190
|
-
`,
|
|
189
|
+
scroll-snap-type: ${e=>{switch(e.snapType){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
|
|
190
|
+
`,k=s.styled("div")`
|
|
191
191
|
@property --gutter {
|
|
192
192
|
syntax: "<length-percentage>";
|
|
193
193
|
inherits: false;
|
|
194
194
|
initial-value: 0;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
--gutter: ${e=>{var t;return
|
|
197
|
+
--gutter: ${e=>{var t,n;return(n=d((t=e.gutter)!=null?t:"none",e.theme))!=null?n:"0px"}};
|
|
198
198
|
box-sizing: border-box;
|
|
199
199
|
> * {
|
|
200
200
|
margin: 0;
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
& > [data-bedrock-column] {
|
|
209
209
|
grid-column: span 1 / auto;
|
|
210
210
|
}
|
|
211
|
-
`,
|
|
211
|
+
`,I={"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"},ge=s.styled.div`
|
|
212
212
|
box-sizing: border-box;
|
|
213
213
|
> * {
|
|
214
214
|
margin: 0;
|
|
@@ -218,8 +218,8 @@
|
|
|
218
218
|
|
|
219
219
|
display: grid;
|
|
220
220
|
gap: var(--gutter, 0px);
|
|
221
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
222
|
-
`,
|
|
221
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=I[e])!=null?t:I["1/2"]}}};
|
|
222
|
+
`,me=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=R(n,e.ref);return React.createElement(o.Switch,null,React.createElement(o.Match,{when:r()===!1},React.createElement(ge,m(f({fraction:e.fraction},e),{ref:i}))),React.createElement(o.Match,{when:r()===!0},React.createElement(k,m(f({},e),{ref:i}))))};function ye(e){return typeof e=="number"?`${e}px`:e&&C(e)?e:"100vh"}const xe=s.styled.div`
|
|
223
223
|
@property --gutter {
|
|
224
224
|
syntax: "<length-percentage>";
|
|
225
225
|
inherits: false;
|
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
|
|
235
235
|
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
236
236
|
|
|
237
|
-
--minHeight: ${e=>
|
|
237
|
+
--minHeight: ${e=>ye(e.minHeight)};
|
|
238
238
|
|
|
239
239
|
> * {
|
|
240
240
|
margin: 0;
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
}
|
|
260
260
|
`:""};
|
|
261
261
|
}
|
|
262
|
-
`,
|
|
262
|
+
`,he=e=>React.createElement(xe,f({},e),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom),pe=s.styled.div`
|
|
263
263
|
@property --gutter {
|
|
264
264
|
syntax: "<length-percentage>";
|
|
265
265
|
inherits: false;
|
|
@@ -284,14 +284,14 @@
|
|
|
284
284
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
285
285
|
gap: var(--gutter, 0px);
|
|
286
286
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
287
|
-
`,
|
|
287
|
+
`,be=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=R(n),c=a=>{var l;i(a),(l=e.ref)==null||l.call(e,a)};return React.createElement(o.Switch,null,React.createElement(o.Match,{when:r()===!1},React.createElement(pe,m(f({},e),{ref:c}))),React.createElement(o.Match,{when:r()===!0},React.createElement(k,m(f({},e),{ref:c}))))},ve=e=>typeof e=="number"?e:1,Se=s.styled.div`
|
|
288
288
|
@property --span {
|
|
289
289
|
syntax: "<number>";
|
|
290
290
|
inherits: true;
|
|
291
291
|
initial-value: 1;
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
--span: ${e=>
|
|
294
|
+
--span: ${e=>ve(e.colSpan)};
|
|
295
295
|
|
|
296
296
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
297
297
|
|
|
@@ -315,4 +315,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
315
315
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
316
316
|
}
|
|
317
317
|
`:""}
|
|
318
|
-
`;exports.Center=
|
|
318
|
+
`;exports.Center=_;exports.Column=Se;exports.ColumnDrop=Q;exports.Columns=be;exports.Cover=he;exports.Frame=Z;exports.Grid=P;exports.Inline=se;exports.InlineCluster=T;exports.MasonryGrid=ae;exports.PadBox=de;exports.Reel=fe;exports.Split=me;exports.Stack=k;exports.checkIsCSSLength=C;exports.createContainerQuery=R;exports.getSpacingValue=d;exports.spacing=A;
|
package/lib/index.m.js
CHANGED
|
@@ -17,18 +17,6 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
20
|
import { styled, css, useTheme } from "solid-styled-components";
|
|
33
21
|
import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
|
|
34
22
|
import { createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
|
|
@@ -95,13 +83,13 @@ const Center = styled.div`
|
|
|
95
83
|
|
|
96
84
|
max-inline-size: var(--maxWidth, 100%);
|
|
97
85
|
|
|
98
|
-
${(props) => props.centerChildren ?
|
|
86
|
+
${(props) => props.centerChildren ? `
|
|
99
87
|
display: flex;
|
|
100
88
|
flex-direction: column;
|
|
101
89
|
align-items: center;
|
|
102
90
|
` : ""}
|
|
103
91
|
|
|
104
|
-
${(props) => props.centerText ?
|
|
92
|
+
${(props) => props.centerText ? `
|
|
105
93
|
text-align: center;
|
|
106
94
|
` : ""}
|
|
107
95
|
`;
|
|
@@ -167,7 +155,6 @@ function createContainerQuery(width, maybeRef) {
|
|
|
167
155
|
init();
|
|
168
156
|
});
|
|
169
157
|
createEffect(() => {
|
|
170
|
-
node();
|
|
171
158
|
if (node() === void 0 || node() === null)
|
|
172
159
|
return;
|
|
173
160
|
if (maybeRef) {
|
|
@@ -520,8 +507,8 @@ const Reel = styled.div`
|
|
|
520
507
|
|
|
521
508
|
overflow-x: scroll;
|
|
522
509
|
|
|
523
|
-
scroll-snap-type: ${(
|
|
524
|
-
switch (snapType) {
|
|
510
|
+
scroll-snap-type: ${(props) => {
|
|
511
|
+
switch (props.snapType) {
|
|
525
512
|
case "none": {
|
|
526
513
|
return "none";
|
|
527
514
|
}
|
|
@@ -545,8 +532,8 @@ const Stack = styled("div")`
|
|
|
545
532
|
}
|
|
546
533
|
|
|
547
534
|
--gutter: ${(props) => {
|
|
548
|
-
var _a;
|
|
549
|
-
return
|
|
535
|
+
var _a, _b;
|
|
536
|
+
return (_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", props.theme)) != null ? _b : "0px";
|
|
550
537
|
}};
|
|
551
538
|
box-sizing: border-box;
|
|
552
539
|
> * {
|
|
@@ -655,8 +642,7 @@ const CoverWrapper = styled.div`
|
|
|
655
642
|
}
|
|
656
643
|
`;
|
|
657
644
|
const Cover = (props) => {
|
|
658
|
-
|
|
659
|
-
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
645
|
+
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, props), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
660
646
|
"data-bedrock-cover-centered": true
|
|
661
647
|
}, props.children), props.bottom);
|
|
662
648
|
};
|
package/lib/index.umd.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
1
|
+
var be=Object.defineProperty,ve=Object.defineProperties;var pe=Object.getOwnPropertyDescriptors;var W=Object.getOwnPropertySymbols;var $e=Object.prototype.hasOwnProperty,we=Object.prototype.propertyIsEnumerable;var B=(r,i,l)=>i in r?be(r,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[i]=l,m=(r,i)=>{for(var l in i||(i={}))$e.call(i,l)&&B(r,l,i[l]);if(W)for(var l of W(i))we.call(i,l)&&B(r,l,i[l]);return r},h=(r,i)=>ve(r,pe(i));(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(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"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r.solid={},r.solidStyledComponents,r.registerResizeCallback,r.solidJs))})(this,function(r,i,l,s){"use strict";function $(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 w={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 O(e){return e.reduce((t,[n,a])=>h(m({},t),{[n]:a}),{})}const d=(e,t)=>{var o,f;const n=(f=(o=t==null?void 0:t.space)!=null?o:t==null?void 0:t.spacing)!=null?f:w,c=O(Object.entries(n).map(([g,y])=>[g,typeof y=="number"?`${y}px`:y]))[e];return $(c)?c:void 0};function V(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const L=i.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=>V(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -17,16 +17,16 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
17
17
|
|
|
18
18
|
max-inline-size: var(--maxWidth, 100%);
|
|
19
19
|
|
|
20
|
-
${e=>e.centerChildren
|
|
20
|
+
${e=>e.centerChildren?`
|
|
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?`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function D(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}const X=i.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,7 +39,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
42
|
+
--basis: ${e=>D(e.basis)};
|
|
43
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;
|
|
@@ -54,14 +54,14 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
justify-content: center;
|
|
56
56
|
gap: var(--gutter, 0px);
|
|
57
|
-
`;function
|
|
57
|
+
`;function S(e){throw new Error(e)}function H(e){typeof e!="number"&&!Array.isArray(e)&&S("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&S("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&S(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function A(e,t){H(e);const[n,a]=s.createSignal(!1),[c,u]=s.createSignal();return s.onMount(()=>{l.init()}),s.createEffect(()=>{if(c()===void 0||c()===null)return;t&&t(c());const o=l.registerCallback(c(),f=>{var y,x;const g=(x=(y=f.borderBoxSize)==null?void 0:y.inlineSize)!=null?x:f.contentRect.width;if(g>0){const z=Array.isArray(e)?g>=e[0]&&g<=e[1]:g<=e;a(z)}});s.onCleanup(o)}),[n,u]}function F(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 G(e){return Array.isArray(e)?e.join("/"):e}function N(e){return F(e)?G(e):void 0}const _=i.styled.div`
|
|
58
58
|
box-sizing: border-box;
|
|
59
59
|
display: block;
|
|
60
60
|
inline-size: 100%;
|
|
61
61
|
position: relative;
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
|
|
64
|
-
${e=>{const t=
|
|
64
|
+
${e=>{const t=N(e.ratio);return t?i.css`
|
|
65
65
|
aspect-ratio: ${t};
|
|
66
66
|
`:""}};
|
|
67
67
|
|
|
@@ -89,7 +89,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
89
89
|
object-fit: cover;
|
|
90
90
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
91
91
|
}
|
|
92
|
-
`,
|
|
92
|
+
`,j=i.styled("div")`
|
|
93
93
|
@property --gutter {
|
|
94
94
|
syntax: "<length-percentage>";
|
|
95
95
|
inherits: false;
|
|
@@ -117,16 +117,16 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
117
117
|
auto-fit,
|
|
118
118
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
119
119
|
);
|
|
120
|
-
`,b=96;function
|
|
120
|
+
`,b=96;function M(e){var a;e=String(e);const t=parseFloat(e),[,n]=(a=e.match(/[\d.\-+]*\s*(.*)/))!=null?a:["",""];return[t,n]}function v(e,t){if(!e)return null;const n=t!=null?t:document.body,a=(e!=null?e:"px").trim().toLowerCase();switch(a){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return q(a,n);case"em":return k(n,"font-size");case"rem":return k(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[c,u]=M(a);if(isNaN(c))return null;if(!u)return c;const o=v(u,t);return typeof o=="number"?c*o:null}}}function k(e,t){var c;const[n,a]=M(getComputedStyle(e).getPropertyValue(t));return n*((c=v(a,e))!=null?c:1)}function q(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const a=k(n,"height")/128;return t.removeChild(n),a}const Q=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,U=i.styled.div`
|
|
121
121
|
grid-row: span var(--rows, 1);
|
|
122
122
|
|
|
123
123
|
> * {
|
|
124
124
|
display: block;
|
|
125
125
|
height: 100%;
|
|
126
126
|
}
|
|
127
|
-
`,
|
|
127
|
+
`,K=e=>{const[t,n]=s.createSignal(1),[a,c]=s.createSignal(),u=i.useTheme();return s.onMount(()=>{l.init()}),s.createEffect(()=>{const o=a();if(o==null)return;const f=l.registerCallback(o,({target:g})=>{var T;n(1);const y=e.gutter&&(T=d(e.gutter,u))!=null?T:"1px",x=Q?v(y,g):null,z=Math.max(x!=null?x:1,1),[ye]=Array.from(g.children),he=1+Math.min(g.scrollHeight,ye.scrollHeight),xe=Math.ceil(he/z);n(xe)});s.onCleanup(f)}),React.createElement(U,{style:`--rows: ${t()}`,ref:c},e.children)},Y=i.styled(j)`
|
|
128
128
|
grid-template-rows: 1px;
|
|
129
|
-
`,
|
|
129
|
+
`,Z=e=>{const t=s.children(()=>e.children),a=[].concat(t()).filter(Boolean).map(c=>React.createElement(K,{gutter:e.gutter},c));return React.createElement(Y,m({},e),a)},p={start:"flex-start",end:"flex-end",center:"center"},R=h(m({},p),{stretch:"stretch"}),C=i.styled.div`
|
|
130
130
|
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
131
131
|
|
|
132
132
|
box-sizing: border-box;
|
|
@@ -140,8 +140,8 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
140
140
|
|
|
141
141
|
justify-content: ${e=>typeof e.justify!="undefined"&&p[e.justify]?p[e.justify]:p.start};
|
|
142
142
|
|
|
143
|
-
align-items: ${e=>typeof e.align!="undefined"&&
|
|
144
|
-
`;function
|
|
143
|
+
align-items: ${e=>typeof e.align!="undefined"&&R[e.align]?R[e.align]:R.start};
|
|
144
|
+
`;function J(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ee=i.styled(C)`
|
|
145
145
|
@property --switchAt {
|
|
146
146
|
syntax: "<length-percentage>";
|
|
147
147
|
inherits: true;
|
|
@@ -159,7 +159,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
159
159
|
flex: 1;
|
|
160
160
|
}`:""}
|
|
161
161
|
|
|
162
|
-
${e=>
|
|
162
|
+
${e=>J(e.switchAt)?`
|
|
163
163
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
164
164
|
flex-wrap: wrap;
|
|
165
165
|
> * {
|
|
@@ -169,10 +169,10 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
169
169
|
);
|
|
170
170
|
}
|
|
171
171
|
`:""}
|
|
172
|
-
`,
|
|
172
|
+
`,I=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),te=(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 ne(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function re(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 n=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:w));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(o=>n.has(o)):t&&Object.keys(t).every(o=>I.has(o))&&Object.values(t).every(o=>n.has(o)))()||console.error("Invalid padding Type");const c=ne(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((o,[f,g])=>I.has(f)?o+te(f,c(g)):o,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(o=>c(o)).join(" ")};`:""}const ie=i.styled.div`
|
|
173
173
|
box-sizing: border-box;
|
|
174
|
-
${e=>
|
|
175
|
-
`,
|
|
174
|
+
${e=>re(e.theme,e.padding)}
|
|
175
|
+
`,ae=i.styled.div`
|
|
176
176
|
box-sizing: border-box;
|
|
177
177
|
> * {
|
|
178
178
|
margin: 0;
|
|
@@ -186,15 +186,15 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
186
186
|
|
|
187
187
|
overflow-x: scroll;
|
|
188
188
|
|
|
189
|
-
scroll-snap-type: ${
|
|
190
|
-
`,
|
|
189
|
+
scroll-snap-type: ${e=>{switch(e.snapType){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
|
|
190
|
+
`,E=i.styled("div")`
|
|
191
191
|
@property --gutter {
|
|
192
192
|
syntax: "<length-percentage>";
|
|
193
193
|
inherits: false;
|
|
194
194
|
initial-value: 0;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
--gutter: ${e=>{var t;return
|
|
197
|
+
--gutter: ${e=>{var t,n;return(n=d((t=e.gutter)!=null?t:"none",e.theme))!=null?n:"0px"}};
|
|
198
198
|
box-sizing: border-box;
|
|
199
199
|
> * {
|
|
200
200
|
margin: 0;
|
|
@@ -208,7 +208,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
208
208
|
& > [data-bedrock-column] {
|
|
209
209
|
grid-column: span 1 / auto;
|
|
210
210
|
}
|
|
211
|
-
`,
|
|
211
|
+
`,P={"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"},ce=i.styled.div`
|
|
212
212
|
box-sizing: border-box;
|
|
213
213
|
> * {
|
|
214
214
|
margin: 0;
|
|
@@ -218,8 +218,8 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
218
218
|
|
|
219
219
|
display: grid;
|
|
220
220
|
gap: var(--gutter, 0px);
|
|
221
|
-
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=
|
|
222
|
-
`,
|
|
221
|
+
grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=P[e])!=null?t:P["1/2"]}}};
|
|
222
|
+
`,oe=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[a,c]=A(n,e.ref);return React.createElement(s.Switch,null,React.createElement(s.Match,{when:a()===!1},React.createElement(ce,h(m({fraction:e.fraction},e),{ref:c}))),React.createElement(s.Match,{when:a()===!0},React.createElement(E,h(m({},e),{ref:c}))))};function se(e){return typeof e=="number"?`${e}px`:e&&$(e)?e:"100vh"}const le=i.styled.div`
|
|
223
223
|
@property --gutter {
|
|
224
224
|
syntax: "<length-percentage>";
|
|
225
225
|
inherits: false;
|
|
@@ -234,7 +234,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
234
234
|
|
|
235
235
|
--gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
|
|
236
236
|
|
|
237
|
-
--minHeight: ${e=>
|
|
237
|
+
--minHeight: ${e=>se(e.minHeight)};
|
|
238
238
|
|
|
239
239
|
> * {
|
|
240
240
|
margin: 0;
|
|
@@ -259,7 +259,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
259
259
|
}
|
|
260
260
|
`:""};
|
|
261
261
|
}
|
|
262
|
-
`,
|
|
262
|
+
`,ue=e=>React.createElement(le,m({},e),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom),fe=i.styled.div`
|
|
263
263
|
@property --gutter {
|
|
264
264
|
syntax: "<length-percentage>";
|
|
265
265
|
inherits: false;
|
|
@@ -284,14 +284,14 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
284
284
|
grid-template-columns: repeat(var(--columns, 1), 1fr);
|
|
285
285
|
gap: var(--gutter, 0px);
|
|
286
286
|
grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
|
|
287
|
-
`,
|
|
287
|
+
`,ge=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[a,c]=A(n),u=o=>{var f;c(o),(f=e.ref)==null||f.call(e,o)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:a()===!1},React.createElement(fe,h(m({},e),{ref:u}))),React.createElement(s.Match,{when:a()===!0},React.createElement(E,h(m({},e),{ref:u}))))},de=e=>typeof e=="number"?e:1,me=i.styled.div`
|
|
288
288
|
@property --span {
|
|
289
289
|
syntax: "<number>";
|
|
290
290
|
inherits: true;
|
|
291
291
|
initial-value: 1;
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
--span: ${e=>
|
|
294
|
+
--span: ${e=>de(e.colSpan)};
|
|
295
295
|
|
|
296
296
|
grid-column: span min(var(--span, 1), var(--columns, 1));
|
|
297
297
|
|
|
@@ -315,4 +315,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
|
|
|
315
315
|
grid-column: span min(${e.offsetEnd}, var(--columns, 1));
|
|
316
316
|
}
|
|
317
317
|
`:""}
|
|
318
|
-
`;
|
|
318
|
+
`;r.Center=L,r.Column=me,r.ColumnDrop=X,r.Columns=ge,r.Cover=ue,r.Frame=_,r.Grid=j,r.Inline=ee,r.InlineCluster=C,r.MasonryGrid=Z,r.PadBox=ie,r.Reel=ae,r.Split=oe,r.Stack=E,r.checkIsCSSLength=$,r.createContainerQuery=A,r.getSpacingValue=d,r.spacing=w,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/lib/reel.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SpacingOptions } from "./spacing-constants";
|
|
2
2
|
export interface ReelProps {
|
|
3
3
|
snapType?: "none" | "proximity" | "mandatory";
|
|
4
|
-
gutter
|
|
4
|
+
gutter?: SpacingOptions;
|
|
5
5
|
}
|
|
6
6
|
export declare const Reel: ((props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
|
|
7
7
|
className: (props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.8",
|
|
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": "c0f909ede8640d9eb57e0a0039be375cb1e43cdc"
|
|
66
66
|
}
|