@bedrock-layout/solid 0.11.7 → 0.11.10
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/cover.d.ts +3 -1
- package/lib/index.cjs.js +27 -27
- package/lib/index.m.js +5 -19
- package/lib/index.umd.js +26 -26
- package/lib/masonry-grid.d.ts +4 -2
- package/lib/padbox.d.ts +7 -2
- package/package.json +13 -3
package/lib/cover.d.ts
CHANGED
|
@@ -11,5 +11,7 @@ export interface CoverProps extends CoverWrapperProps {
|
|
|
11
11
|
bottom?: JSXElement;
|
|
12
12
|
as?: Component | keyof JSX.IntrinsicElements;
|
|
13
13
|
}
|
|
14
|
-
export declare const Cover: Component<CoverProps
|
|
14
|
+
export declare const Cover: Component<CoverProps & {
|
|
15
|
+
children?: JSXElement;
|
|
16
|
+
}>;
|
|
15
17
|
export {};
|
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
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
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?`
|
|
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;
|
|
@@ -187,14 +187,14 @@
|
|
|
187
187
|
overflow-x: scroll;
|
|
188
188
|
|
|
189
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
|
-
`,
|
|
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,19 +17,7 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
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
|
-
import { styled, css, useTheme } from "solid-styled-components";
|
|
20
|
+
import { styled, 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";
|
|
35
23
|
function checkIsCSSLength(str) {
|
|
@@ -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) {
|
|
@@ -206,7 +193,7 @@ const Frame = styled.div`
|
|
|
206
193
|
${(props) => {
|
|
207
194
|
const maybeRatio = getSafeRatio(props.ratio);
|
|
208
195
|
if (maybeRatio) {
|
|
209
|
-
return
|
|
196
|
+
return `
|
|
210
197
|
aspect-ratio: ${maybeRatio};
|
|
211
198
|
`;
|
|
212
199
|
}
|
|
@@ -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
|
+
(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";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 $(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
|
|
|
@@ -26,7 +26,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
26
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?`
|
|
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;
|
|
@@ -187,14 +187,14 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
|
|
|
187
187
|
overflow-x: scroll;
|
|
188
188
|
|
|
189
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
|
-
`,
|
|
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/masonry-grid.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import { Component } from "solid-js";
|
|
1
|
+
import { Component, JSXElement } from "solid-js";
|
|
2
2
|
import { GridProps } from "./grid";
|
|
3
|
-
export declare const MasonryGrid: Component<GridProps
|
|
3
|
+
export declare const MasonryGrid: Component<GridProps & {
|
|
4
|
+
children?: JSXElement;
|
|
5
|
+
}>;
|
package/lib/padbox.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { JSXElement } from "solid-js";
|
|
1
2
|
import { SpacingOptions } from "./spacing-constants";
|
|
2
3
|
declare type PaddingObj = {
|
|
3
4
|
left: SpacingOptions;
|
|
@@ -20,7 +21,11 @@ declare type PaddingTypes = SpacingOptions | PaddingObj | [SpacingOptions] | [Sp
|
|
|
20
21
|
export interface PadBoxProps {
|
|
21
22
|
padding: PaddingTypes;
|
|
22
23
|
}
|
|
23
|
-
export declare const PadBox: ((props: PadBoxProps &
|
|
24
|
-
|
|
24
|
+
export declare const PadBox: ((props: PadBoxProps & {
|
|
25
|
+
as?: string | number | symbol | ((props: unknown) => JSXElement) | undefined;
|
|
26
|
+
} & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
|
|
27
|
+
className: (props: PadBoxProps & {
|
|
28
|
+
as?: string | number | symbol | ((props: unknown) => JSXElement) | undefined;
|
|
29
|
+
} & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
25
30
|
};
|
|
26
31
|
export {};
|
package/package.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.11.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.11.10",
|
|
4
|
+
"description": "Solid Foundational Layout Primitives for your Solid-js App",
|
|
5
|
+
"info": "Solid Bedrock Layout is a Solid.js port of the Bedrock Layout primitives written for react. Bedrock primitives are built to allow you to compose them together to create your own custom layouts. Many 'complex' layouts can be created by composing Bedrock Layout Primitives",
|
|
5
6
|
"sideEffects": false,
|
|
6
7
|
"private": false,
|
|
7
8
|
"publishConfig": {
|
|
8
9
|
"access": "public"
|
|
9
10
|
},
|
|
10
11
|
"keywords": [
|
|
12
|
+
"solidhack",
|
|
13
|
+
"best_ecosystem",
|
|
11
14
|
"primitives",
|
|
12
15
|
"layout",
|
|
13
16
|
"bedrock",
|
|
@@ -17,6 +20,13 @@
|
|
|
17
20
|
"solid"
|
|
18
21
|
],
|
|
19
22
|
"author": "Jarvis1010 <travis.mair@gmail.com>",
|
|
23
|
+
"contributors": [
|
|
24
|
+
{
|
|
25
|
+
"name": "Travis Waith-Mair",
|
|
26
|
+
"email": "travis.mair@gmail.com",
|
|
27
|
+
"url": "https://github.com/Jarvis1010"
|
|
28
|
+
}
|
|
29
|
+
],
|
|
20
30
|
"homepage": "https://github.com/Bedrock-Layouts/Solid-Bedrock",
|
|
21
31
|
"license": "MIT",
|
|
22
32
|
"unpkg": "lib/index.umd.js",
|
|
@@ -62,5 +72,5 @@
|
|
|
62
72
|
"bugs": {
|
|
63
73
|
"url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
|
|
64
74
|
},
|
|
65
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "6b5d1e9440493f42fde8d02feb9f0b4a2a7bce14"
|
|
66
76
|
}
|