@bedrock-layout/solid 0.7.2 → 0.8.0
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 +15 -0
- package/lib/index.cjs.js +71 -31
- package/lib/index.d.ts +1 -0
- package/lib/index.m.js +70 -3
- package/lib/index.umd.js +62 -22
- package/package.json +2 -2
package/lib/cover.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Component, JSX, JSXElement } from "solid-js";
|
|
2
|
+
import { CSSLength, SpacingOptions } from "./spacing-constants";
|
|
3
|
+
declare type MinHeight = CSSLength | number;
|
|
4
|
+
interface CoverWrapperProps {
|
|
5
|
+
gutter?: SpacingOptions;
|
|
6
|
+
minHeight?: MinHeight;
|
|
7
|
+
stretchContent?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface CoverProps extends CoverWrapperProps {
|
|
10
|
+
top?: JSXElement;
|
|
11
|
+
bottom?: JSXElement;
|
|
12
|
+
as?: Component | keyof JSX.IntrinsicElements;
|
|
13
|
+
}
|
|
14
|
+
export declare const Cover: Component<CoverProps>;
|
|
15
|
+
export {};
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var A=Object.defineProperty,j=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var h=(e,t,n)=>t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))v.call(t,n)&&h(e,n,t[n]);if(u)for(var n of u(t))$.call(t,n)&&h(e,n,t[n]);return e},y=(e,t)=>j(e,z(t));var S=(e,t)=>{var n={};for(var i in e)v.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(e!=null&&u)for(var i of u(e))t.indexOf(i)<0&&$.call(e,i)&&(n[i]=e[i]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("solid-styled-components");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 b={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 I(e){return e.reduce((t,[n,i])=>y(g({},t),{[n]:i}),{})}const s=(e,t)=>{var r,c;const n=(c=(r=t==null?void 0:t.space)!=null?r:t==null?void 0:t.spacing)!=null?c:b,o=I(Object.entries(n).map(([f,x])=>[f,typeof x=="number"?`${x}px`:x]))[e];return p(o)?o:void 0};function R(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const W=a.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: ${
|
|
8
|
+
--maxWidth: ${e=>R(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
|
-
${
|
|
20
|
+
${e=>e.centerChildren?a.css`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
align-items: center;
|
|
24
24
|
`:""}
|
|
25
25
|
|
|
26
|
-
${
|
|
26
|
+
${e=>e.centerText?a.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function E(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const M=a.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,29 +39,29 @@
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${
|
|
43
|
-
--gutter: ${
|
|
42
|
+
--basis: ${e=>E(e.basis)};
|
|
43
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
46
46
|
> * {
|
|
47
47
|
margin: 0;
|
|
48
48
|
flex-basis: var(--basis, 100%);
|
|
49
|
-
flex-grow: ${
|
|
49
|
+
flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
|
|
50
50
|
flex-shrink: 1;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function O(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 P(e){return Array.isArray(e)?e.join("/"):e}function D(e){return O(e)?P(e):void 0}const L=a.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
|
-
${
|
|
64
|
-
aspect-ratio: ${
|
|
63
|
+
${e=>{const t=D(e.ratio);return t?a.css`
|
|
64
|
+
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
67
67
|
> * {
|
|
@@ -86,9 +86,9 @@
|
|
|
86
86
|
size: 100%;
|
|
87
87
|
|
|
88
88
|
object-fit: cover;
|
|
89
|
-
object-position: ${
|
|
89
|
+
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,T=a.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -101,8 +101,8 @@
|
|
|
101
101
|
initial-value: 639px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
--gutter: ${
|
|
105
|
-
--minItemWidth: ${
|
|
104
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
105
|
+
--minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
|
|
106
106
|
|
|
107
107
|
box-sizing: border-box;
|
|
108
108
|
> * {
|
|
@@ -116,8 +116,8 @@
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
120
|
-
--gutter: ${
|
|
119
|
+
`,d={start:"flex-start",end:"flex-end",center:"center"},m=y(g({},d),{stretch:"stretch"}),C=a.styled.div`
|
|
120
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
121
|
|
|
122
122
|
box-sizing: border-box;
|
|
123
123
|
> * {
|
|
@@ -128,20 +128,20 @@
|
|
|
128
128
|
flex-wrap: wrap;
|
|
129
129
|
gap: var(--gutter, 0px);
|
|
130
130
|
|
|
131
|
-
justify-content: ${
|
|
131
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&d[e.justify]?d[e.justify]:d.start};
|
|
132
132
|
|
|
133
|
-
align-items: ${
|
|
134
|
-
`;function
|
|
133
|
+
align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
|
|
134
|
+
`;function V(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const B=a.styled(C)`
|
|
135
135
|
@property --switchAt {
|
|
136
136
|
syntax: "<length-percentage>";
|
|
137
137
|
inherits: true;
|
|
138
138
|
initial-value: 0;
|
|
139
139
|
}
|
|
140
140
|
flex-wrap: nowrap;
|
|
141
|
-
${
|
|
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"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
|
|
142
142
|
|
|
143
|
-
${
|
|
144
|
-
--switchAt: ${typeof
|
|
143
|
+
${e=>V(e.switchAt)?`
|
|
144
|
+
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
145
|
flex-wrap: wrap;
|
|
146
146
|
> * {
|
|
147
147
|
min-inline-size: fit-content;
|
|
@@ -150,32 +150,32 @@
|
|
|
150
150
|
);
|
|
151
151
|
}
|
|
152
152
|
`:""}
|
|
153
|
-
`,
|
|
153
|
+
`,k=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),F=(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 X(e){return t=>{const n=s(t,e);return n!=null?n:"0px"}}function w(e,t){var l;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((l=e==null?void 0:e.spacing)!=null?l:b));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(r=>n.has(r)):t&&Object.keys(t).every(r=>k.has(r))&&Object.values(t).every(r=>n.has(r)))()||console.error("Invalid padding Type");const o=X(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((r,[c,f])=>k.has(c)?r+F(c,o(f)):r,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(r=>o(r)).join(" ")};`:""}const G=a.styled.div`
|
|
154
154
|
box-sizing: border-box;
|
|
155
|
-
${
|
|
156
|
-
`,
|
|
155
|
+
${e=>(console.log(w(e.theme,e.padding)),w(e.theme,e.padding))}
|
|
156
|
+
`,_=a.styled.div`
|
|
157
157
|
box-sizing: border-box;
|
|
158
158
|
> * {
|
|
159
159
|
margin: 0;
|
|
160
160
|
scroll-snap-align: start;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
-
--gutter: ${
|
|
163
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
164
164
|
|
|
165
165
|
display: flex;
|
|
166
166
|
gap: var(--gutter, 0px);
|
|
167
167
|
|
|
168
168
|
overflow-x: scroll;
|
|
169
169
|
|
|
170
|
-
scroll-snap-type: ${({snapType:
|
|
171
|
-
`,
|
|
170
|
+
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
|
+
`,q=a.styled("div")`
|
|
172
172
|
@property --gutter {
|
|
173
173
|
syntax: "<length-percentage>";
|
|
174
174
|
inherits: false;
|
|
175
175
|
initial-value: 0;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
--gutter: ${
|
|
178
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
179
179
|
box-sizing: border-box;
|
|
180
180
|
> * {
|
|
181
181
|
margin: 0;
|
|
@@ -189,4 +189,44 @@
|
|
|
189
189
|
& > [data-bedrock-column] {
|
|
190
190
|
grid-column: span 1 / auto;
|
|
191
191
|
}
|
|
192
|
-
`;
|
|
192
|
+
`;function H(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const K=a.styled.div`
|
|
193
|
+
@property --gutter {
|
|
194
|
+
syntax: "<length-percentage>";
|
|
195
|
+
inherits: false;
|
|
196
|
+
initial-value: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@property --minHeight {
|
|
200
|
+
syntax: "<length-percentage>";
|
|
201
|
+
inherits: false;
|
|
202
|
+
initial-value: 100vh;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
|
|
206
|
+
|
|
207
|
+
--minHeight: ${e=>H(e.minHeight)};
|
|
208
|
+
|
|
209
|
+
> * {
|
|
210
|
+
margin: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
display: flex;
|
|
214
|
+
flex-direction: column;
|
|
215
|
+
gap: var(--gutter, 0px);
|
|
216
|
+
|
|
217
|
+
min-block-size: var(--minHeight, 100vh);
|
|
218
|
+
|
|
219
|
+
> [data-bedrock-cover-centered] {
|
|
220
|
+
margin-block-start: auto;
|
|
221
|
+
margin-block-end: auto;
|
|
222
|
+
|
|
223
|
+
${({stretchContent:e})=>e===!0?`
|
|
224
|
+
flex: 1;
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
> * {
|
|
228
|
+
flex: 1;
|
|
229
|
+
}
|
|
230
|
+
`:""};
|
|
231
|
+
}
|
|
232
|
+
`,N=e=>{const l=e,{top:t,bottom:n,children:i}=l,o=S(l,["top","bottom","children"]);return React.createElement(K,g({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};exports.Center=W;exports.ColumnDrop=M;exports.Cover=N;exports.Frame=L;exports.Grid=T;exports.Inline=B;exports.InlineCluster=C;exports.PadBox=G;exports.Reel=_;exports.Stack=q;exports.checkIsCSSLength=p;exports.getSpacingValue=s;exports.spacing=b;
|
package/lib/index.d.ts
CHANGED
package/lib/index.m.js
CHANGED
|
@@ -17,6 +17,18 @@ 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
|
+
};
|
|
20
32
|
import { styled, css } from "solid-styled-components";
|
|
21
33
|
function checkIsCSSLength(str) {
|
|
22
34
|
if (typeof str !== "string")
|
|
@@ -320,11 +332,11 @@ function paddingToString(theme, padding) {
|
|
|
320
332
|
console.error("Invalid padding Type");
|
|
321
333
|
}
|
|
322
334
|
const getPadding = paddingOrDefault(theme);
|
|
323
|
-
return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce((acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc, "") : padding ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")}
|
|
335
|
+
return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce((acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc, "") : padding !== void 0 ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")};` : "";
|
|
324
336
|
}
|
|
325
337
|
const PadBox = styled.div`
|
|
326
338
|
box-sizing: border-box;
|
|
327
|
-
${(props) => paddingToString(props.theme, props.padding)}
|
|
339
|
+
${(props) => (console.log(paddingToString(props.theme, props.padding)), paddingToString(props.theme, props.padding))}
|
|
328
340
|
`;
|
|
329
341
|
const Reel = styled.div`
|
|
330
342
|
box-sizing: border-box;
|
|
@@ -385,4 +397,59 @@ const Stack = styled("div")`
|
|
|
385
397
|
grid-column: span 1 / auto;
|
|
386
398
|
}
|
|
387
399
|
`;
|
|
388
|
-
|
|
400
|
+
function getSafeMinHeight(minHeight) {
|
|
401
|
+
if (typeof minHeight === "number")
|
|
402
|
+
return `${minHeight}px`;
|
|
403
|
+
return minHeight && checkIsCSSLength(minHeight) ? minHeight : "100vh";
|
|
404
|
+
}
|
|
405
|
+
const CoverWrapper = styled.div`
|
|
406
|
+
@property --gutter {
|
|
407
|
+
syntax: "<length-percentage>";
|
|
408
|
+
inherits: false;
|
|
409
|
+
initial-value: 0;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
@property --minHeight {
|
|
413
|
+
syntax: "<length-percentage>";
|
|
414
|
+
inherits: false;
|
|
415
|
+
initial-value: 100vh;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
--gutter: ${(props) => {
|
|
419
|
+
var _a;
|
|
420
|
+
return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
|
|
421
|
+
}};
|
|
422
|
+
|
|
423
|
+
--minHeight: ${(props) => getSafeMinHeight(props.minHeight)};
|
|
424
|
+
|
|
425
|
+
> * {
|
|
426
|
+
margin: 0;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
display: flex;
|
|
430
|
+
flex-direction: column;
|
|
431
|
+
gap: var(--gutter, 0px);
|
|
432
|
+
|
|
433
|
+
min-block-size: var(--minHeight, 100vh);
|
|
434
|
+
|
|
435
|
+
> [data-bedrock-cover-centered] {
|
|
436
|
+
margin-block-start: auto;
|
|
437
|
+
margin-block-end: auto;
|
|
438
|
+
|
|
439
|
+
${({ stretchContent }) => stretchContent === true ? `
|
|
440
|
+
flex: 1;
|
|
441
|
+
display: flex;
|
|
442
|
+
flex-direction: column;
|
|
443
|
+
> * {
|
|
444
|
+
flex: 1;
|
|
445
|
+
}
|
|
446
|
+
` : ""};
|
|
447
|
+
}
|
|
448
|
+
`;
|
|
449
|
+
const Cover = (props) => {
|
|
450
|
+
const _a = props, { top, bottom, children } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
|
|
451
|
+
return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
|
|
452
|
+
"data-bedrock-cover-centered": true
|
|
453
|
+
}, props.children), props.bottom);
|
|
454
|
+
};
|
|
455
|
+
export { Center, ColumnDrop, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Stack, checkIsCSSLength, getSpacingValue, spacing };
|
package/lib/index.umd.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
1
|
+
var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var S=(n,i,r)=>i in n?K(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r,y=(n,i)=>{for(var r in i||(i={}))w.call(i,r)&&S(n,r,i[r]);if(x)for(var r of x(i))A.call(i,r)&&S(n,r,i[r]);return n},p=(n,i)=>N(n,U(i));var j=(n,i)=>{var r={};for(var a in n)w.call(n,a)&&i.indexOf(a)<0&&(r[a]=n[a]);if(n!=null&&x)for(var a of x(n))i.indexOf(a)<0&&A.call(n,a)&&(r[a]=n[a]);return r};(function(n,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("solid-styled-components")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components"],i):(n=typeof globalThis!="undefined"?globalThis:n||self,i(n.solid={},n.solidStyledComponents))})(this,function(n,i){"use strict";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 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 z(e){return e.reduce((t,[l,d])=>p(y({},t),{[l]:d}),{})}const c=(e,t)=>{var s,g;const l=(g=(s=t==null?void 0:t.space)!=null?s:t==null?void 0:t.spacing)!=null?g:a,o=z(Object.entries(l).map(([h,b])=>[h,typeof b=="number"?`${b}px`:b]))[e];return r(o)?o:void 0};function I(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const R=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=>I(e.maxWidth)};
|
|
9
9
|
|
|
10
10
|
box-sizing: content-box;
|
|
11
11
|
|
|
@@ -26,7 +26,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
26
26
|
${e=>e.centerText?i.css`
|
|
27
27
|
text-align: center;
|
|
28
28
|
`:""}
|
|
29
|
-
`;function
|
|
29
|
+
`;function W(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const C=i.styled("div")`
|
|
30
30
|
@property --basis {
|
|
31
31
|
syntax: "<length-percentage>";
|
|
32
32
|
inherits: true;
|
|
@@ -39,8 +39,8 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
39
39
|
initial-value: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
--basis: ${e=>
|
|
43
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
42
|
+
--basis: ${e=>W(e.basis)};
|
|
43
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
44
44
|
|
|
45
45
|
box-sizing: border-box;
|
|
46
46
|
> * {
|
|
@@ -53,14 +53,14 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-wrap: wrap;
|
|
55
55
|
gap: var(--gutter, 0px);
|
|
56
|
-
`;function
|
|
56
|
+
`;function E(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 M(e){return Array.isArray(e)?e.join("/"):e}function O(e){return E(e)?M(e):void 0}const T=i.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=O(e.ratio);return t?i.css`
|
|
64
64
|
aspect-ratio: ${t};
|
|
65
65
|
`:""}};
|
|
66
66
|
|
|
@@ -88,7 +88,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
88
88
|
object-fit: cover;
|
|
89
89
|
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
90
90
|
}
|
|
91
|
-
`,
|
|
91
|
+
`,P=i.styled("div")`
|
|
92
92
|
@property --gutter {
|
|
93
93
|
syntax: "<length-percentage>";
|
|
94
94
|
inherits: false;
|
|
@@ -101,7 +101,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
101
101
|
initial-value: 639px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
104
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
105
105
|
--minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
|
|
106
106
|
|
|
107
107
|
box-sizing: border-box;
|
|
@@ -116,8 +116,8 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
116
116
|
auto-fit,
|
|
117
117
|
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
118
118
|
);
|
|
119
|
-
`,
|
|
120
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
119
|
+
`,f={start:"flex-start",end:"flex-end",center:"center"},m=p(y({},f),{stretch:"stretch"}),v=i.styled.div`
|
|
120
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
121
121
|
|
|
122
122
|
box-sizing: border-box;
|
|
123
123
|
> * {
|
|
@@ -128,10 +128,10 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
128
128
|
flex-wrap: wrap;
|
|
129
129
|
gap: var(--gutter, 0px);
|
|
130
130
|
|
|
131
|
-
justify-content: ${e=>typeof e.justify!="undefined"&&
|
|
131
|
+
justify-content: ${e=>typeof e.justify!="undefined"&&f[e.justify]?f[e.justify]:f.start};
|
|
132
132
|
|
|
133
|
-
align-items: ${e=>typeof e.align!="undefined"&&
|
|
134
|
-
`;function
|
|
133
|
+
align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
|
|
134
|
+
`;function D(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const L=i.styled(v)`
|
|
135
135
|
@property --switchAt {
|
|
136
136
|
syntax: "<length-percentage>";
|
|
137
137
|
inherits: true;
|
|
@@ -140,7 +140,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
140
140
|
flex-wrap: nowrap;
|
|
141
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"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
|
|
142
142
|
|
|
143
|
-
${e=>
|
|
143
|
+
${e=>D(e.switchAt)?`
|
|
144
144
|
--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
|
|
145
145
|
flex-wrap: wrap;
|
|
146
146
|
> * {
|
|
@@ -150,17 +150,17 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
150
150
|
);
|
|
151
151
|
}
|
|
152
152
|
`:""}
|
|
153
|
-
|
|
153
|
+
`,$=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),V=(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 B(e){return t=>{const l=c(t,e);return l!=null?l:"0px"}}function k(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 l=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:a));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(s=>l.has(s)):t&&Object.keys(t).every(s=>$.has(s))&&Object.values(t).every(s=>l.has(s)))()||console.error("Invalid padding Type");const o=B(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((s,[g,h])=>$.has(g)?s+V(g,o(h)):s,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(s=>o(s)).join(" ")};`:""}const F=i.styled.div`
|
|
154
154
|
box-sizing: border-box;
|
|
155
|
-
${e=>
|
|
156
|
-
`,
|
|
155
|
+
${e=>(console.log(k(e.theme,e.padding)),k(e.theme,e.padding))}
|
|
156
|
+
`,X=i.styled.div`
|
|
157
157
|
box-sizing: border-box;
|
|
158
158
|
> * {
|
|
159
159
|
margin: 0;
|
|
160
160
|
scroll-snap-align: start;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
163
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
164
164
|
|
|
165
165
|
display: flex;
|
|
166
166
|
gap: var(--gutter, 0px);
|
|
@@ -168,14 +168,14 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
168
168
|
overflow-x: scroll;
|
|
169
169
|
|
|
170
170
|
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
|
-
`,
|
|
171
|
+
`,G=i.styled("div")`
|
|
172
172
|
@property --gutter {
|
|
173
173
|
syntax: "<length-percentage>";
|
|
174
174
|
inherits: false;
|
|
175
175
|
initial-value: 0;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
--gutter: ${e=>{var t;return e.gutter&&(t=
|
|
178
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
179
179
|
box-sizing: border-box;
|
|
180
180
|
> * {
|
|
181
181
|
margin: 0;
|
|
@@ -189,4 +189,44 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
|
|
|
189
189
|
& > [data-bedrock-column] {
|
|
190
190
|
grid-column: span 1 / auto;
|
|
191
191
|
}
|
|
192
|
-
`;
|
|
192
|
+
`;function _(e){return typeof e=="number"?`${e}px`:e&&r(e)?e:"100vh"}const q=i.styled.div`
|
|
193
|
+
@property --gutter {
|
|
194
|
+
syntax: "<length-percentage>";
|
|
195
|
+
inherits: false;
|
|
196
|
+
initial-value: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@property --minHeight {
|
|
200
|
+
syntax: "<length-percentage>";
|
|
201
|
+
inherits: false;
|
|
202
|
+
initial-value: 100vh;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
|
|
206
|
+
|
|
207
|
+
--minHeight: ${e=>_(e.minHeight)};
|
|
208
|
+
|
|
209
|
+
> * {
|
|
210
|
+
margin: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
display: flex;
|
|
214
|
+
flex-direction: column;
|
|
215
|
+
gap: var(--gutter, 0px);
|
|
216
|
+
|
|
217
|
+
min-block-size: var(--minHeight, 100vh);
|
|
218
|
+
|
|
219
|
+
> [data-bedrock-cover-centered] {
|
|
220
|
+
margin-block-start: auto;
|
|
221
|
+
margin-block-end: auto;
|
|
222
|
+
|
|
223
|
+
${({stretchContent:e})=>e===!0?`
|
|
224
|
+
flex: 1;
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
> * {
|
|
228
|
+
flex: 1;
|
|
229
|
+
}
|
|
230
|
+
`:""};
|
|
231
|
+
}
|
|
232
|
+
`,H=e=>{const u=e,{top:t,bottom:l,children:d}=u,o=j(u,["top","bottom","children"]);return React.createElement(q,y({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};n.Center=R,n.ColumnDrop=C,n.Cover=H,n.Frame=T,n.Grid=P,n.Inline=L,n.InlineCluster=v,n.PadBox=F,n.Reel=X,n.Stack=G,n.checkIsCSSLength=r,n.getSpacingValue=c,n.spacing=a,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bedrock-layout/solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "solid.js port of bedrock-layout primitives",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"private": false,
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"bugs": {
|
|
60
60
|
"url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "6a87cc2d65eb589c4b6b2583e437f7d107033e51"
|
|
63
63
|
}
|