@bedrock-layout/solid 0.2.2 → 0.5.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/index.cjs.js +138 -1
- package/lib/index.d.ts +72 -1
- package/lib/index.m.js +1138 -3
- package/lib/index.umd.js +138 -1
- package/package.json +6 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1 +1,138 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";const e=()=>{};exports.Stack=e;
|
|
1
|
+
"use strict";var de=Object.defineProperty,he=Object.defineProperties;var pe=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var ye=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable;var z=(e,t,n)=>t in e?de(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,V=(e,t)=>{for(var n in t||(t={}))ye.call(t,n)&&z(e,n,t[n]);if(_)for(var n of _(t))me.call(t,n)&&z(e,n,t[n]);return e},q=(e,t)=>he(e,pe(t));Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";let xe={data:""},be=e=>typeof window=="object"?((e?e.querySelector("#_goober"):window._goober)||Object.assign((e||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:e||xe,we=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,Se=/\/\*[^]*?\*\/|\s\s+|\n/g,x=(e,t)=>{let n="",i="",r="";for(let s in e){let o=e[s];s[0]=="@"?s[1]=="i"?n=s+" "+o+";":i+=s[1]=="f"?x(o,s):s+"{"+x(o,s[1]=="k"?"":t)+"}":typeof o=="object"?i+=x(o,t?t.replace(/([^,])+/g,l=>s.replace(/(^:.*)|([^,])+/g,c=>/&/.test(c)?c.replace(/&/g,l):l?l+" "+c:c)):s):o!=null&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),r+=x.p?x.p(s,o):s+":"+o+";")}return n+(t&&r?t+"{"+r+"}":r)+i},A={},te=e=>{if(typeof e=="object"){let t="";for(let n in e)t+=n+te(e[n]);return t}return e},Ae=(e,t,n,i,r)=>{let s=te(e),o=A[s]||(A[s]=(l=>{let c=0,u=11;for(;c<l.length;)u=101*u+l.charCodeAt(c++)>>>0;return"go"+u})(s));if(!A[o]){let l=s!==e?e:(c=>{let u,f=[{}];for(;u=we.exec(c.replace(Se,""));)u[4]?f.shift():u[3]?f.unshift(f[0][u[3]]=f[0][u[3]]||{}):f[0][u[1]]=u[2];return f[0]})(e);A[o]=x(r?{["@keyframes "+o]:l}:l,n?"":"."+o)}return((l,c,u)=>{c.data.indexOf(l)==-1&&(c.data=u?l+c.data:c.data+l)})(A[o],t,i),o},Ce=(e,t,n)=>e.reduce((i,r,s)=>{let o=t[s];if(o&&o.call){let l=o(n),c=l&&l.props&&l.props.className||/^go/.test(l)&&l;o=c?"."+c:l&&typeof l=="object"?l.props?"":x(l,""):l===!1?"":l}return i+r+(o==null?"":o)},"");function b(e){let t=this||{},n=e.call?e(t.p):e;return Ae(n.unshift?n.raw?Ce(n,[].slice.call(arguments,1),t.p):n.reduce((i,r)=>Object.assign(i,r&&r.call?r(t.p):r),{}):n,be(t.target),t.g,t.o,t.k)}b.bind({g:1});b.bind({k:1});const $e=(e,t)=>e===t,ve=Symbol("solid-proxy"),U={equals:$e};let Ne=re;const T={},m=1,M=2,Ee={owned:null,cleanups:null,context:null,owner:null};var h=null;let v=null,a=null,C=null,g=null,y=null,F=0;function ke(e,t,n){const i=R(e,t,!0,m);N(i)}function $(e,t,n){const i=R(e,t,!1,m);N(i)}function X(e,t,n){n=n?Object.assign({},U,n):U;const i=R(e,t,!0,0);return i.pending=T,i.observers=null,i.observerSlots=null,i.comparator=n.equals||void 0,N(i),je.bind(i)}function Te(e){if(C)return e();let t;const n=C=[];try{t=e()}finally{C=null}return se(()=>{for(let i=0;i<n.length;i+=1){const r=n[i];if(r.pending!==T){const s=r.pending;r.pending=T,ne(r,s)}}},!1),t}function B(e){let t,n=a;return a=null,t=e(),a=n,t}function Pe(e){const t=Symbol("context");return{id:t,Provider:Me(t),defaultValue:e}}function Le(e){return ue(h,e.id)||e.defaultValue}function Oe(e){const t=X(e);return X(()=>D(t()))}function je(){const e=v;if(this.sources&&(this.state||e)){const t=g;g=null,this.state===m||e?N(this):W(this),g=t}if(a){const t=this.observers?this.observers.length:0;a.sources?(a.sources.push(this),a.sourceSlots.push(t)):(a.sources=[this],a.sourceSlots=[t]),this.observers?(this.observers.push(a),this.observerSlots.push(a.sources.length-1)):(this.observers=[a],this.observerSlots=[a.sources.length-1])}return this.value}function ne(e,t,n){if(e.comparator&&e.comparator(e.value,t))return t;if(C)return e.pending===T&&C.push(e),e.pending=t,t;let i=!1;return e.value=t,e.observers&&e.observers.length&&se(()=>{for(let r=0;r<e.observers.length;r+=1){const s=e.observers[r];i&&v.disposed.has(s),s.pure?g.push(s):y.push(s),s.observers&&(i&&!s.tState||!i&&!s.state)&&le(s),i||(s.state=m)}if(g.length>1e6)throw g=[],new Error},!1),t}function N(e){if(!e.fn)return;oe(e);const t=h,n=a,i=F;a=h=e,De(e,e.value,i),a=n,h=t}function De(e,t,n){let i;try{i=e.fn(t)}catch(r){ce(r)}(!e.updatedAt||e.updatedAt<=n)&&(e.observers&&e.observers.length?ne(e,i):e.value=i,e.updatedAt=n)}function R(e,t,n,i=m,r){const s={fn:e,state:i,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:h,context:null,pure:n};return h===null||h!==Ee&&(h.owned?h.owned.push(s):h.owned=[s]),s}function ie(e){const t=v;if(e.state!==m)return e.state=0;if(e.suspense&&B(e.suspense.inFallback))return e.suspense.effects.push(e);const n=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<F);)(e.state||t)&&n.push(e);for(let i=n.length-1;i>=0;i--)if(e=n[i],e.state===m||t)N(e);else if(e.state===M||t){const r=g;g=null,W(e,n[0]),g=r}}function se(e,t){if(g)return e();let n=!1;t||(g=[]),y?n=!0:y=[],F++;try{return e()}catch(i){ce(i)}finally{Ie(n)}}function Ie(e){g&&(re(g),g=null),!e&&(y.length?Te(()=>{Ne(y),y=null}):y=null)}function re(e){for(let t=0;t<e.length;t++)ie(e[t])}function W(e,t){e.state=0;const n=v;for(let i=0;i<e.sources.length;i+=1){const r=e.sources[i];r.sources&&(r.state===m||n?r!==t&&ie(r):(r.state===M||n)&&W(r,t))}}function le(e){const t=v;for(let n=0;n<e.observers.length;n+=1){const i=e.observers[n];(!i.state||t)&&(i.state=M,i.pure?g.push(i):y.push(i),i.observers&&le(i))}}function oe(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),i=e.sourceSlots.pop(),r=n.observers;if(r&&r.length){const s=r.pop(),o=n.observerSlots.pop();i<r.length&&(s.sourceSlots[o]=i,r[i]=s,n.observerSlots[i]=o)}}if(e.owned){for(t=0;t<e.owned.length;t++)oe(e.owned[t]);e.owned=null}if(e.cleanups){for(t=0;t<e.cleanups.length;t++)e.cleanups[t]();e.cleanups=null}e.state=0,e.context=null}function ce(e){throw e}function ue(e,t){return e&&(e.context&&e.context[t]!==void 0?e.context[t]:e.owner&&ue(e.owner,t))}function D(e){if(typeof e=="function"&&!e.length)return D(e());if(Array.isArray(e)){const t=[];for(let n=0;n<e.length;n++){const i=D(e[n]);Array.isArray(i)?t.push.apply(t,i):t.push(i)}return t}return e}function Me(e){return function(n){let i;return ke(()=>i=B(()=>(h.context={[e]:n.value},Oe(()=>n.children)))),i}}function k(){return!0}const fe={get(e,t,n){return t===ve?n:e.get(t)},has(e,t){return e.has(t)},set:k,deleteProperty:k,getOwnPropertyDescriptor(e,t){return{configurable:!0,enumerable:!0,get(){return e.get(t)},set:k,deleteProperty:k}},ownKeys(e){return e.keys()}};function j(e){return typeof e=="function"?e():e}function K(...e){return new Proxy({get(t){for(let n=e.length-1;n>=0;n--){const i=j(e[n])[t];if(i!==void 0)return i}},has(t){for(let n=e.length-1;n>=0;n--)if(t in j(e[n]))return!0;return!1},keys(){const t=[];for(let n=0;n<e.length;n++)t.push(...Object.keys(j(e[n])));return[...new Set(t)]}},fe)}function G(e,...t){const n=new Set(t.flat()),i=Object.getOwnPropertyDescriptors(e),r=t.map(s=>{const o={};for(let l=0;l<s.length;l++){const c=s[l];Object.defineProperty(o,c,i[c]?i[c]:{get(){return e[c]},set(){return!0}})}return o});return r.push(new Proxy({get(s){return n.has(s)?void 0:e[s]},has(s){return n.has(s)?!1:s in e},keys(){return Object.keys(e).filter(s=>!n.has(s))}},fe)),r}const Fe=["allowfullscreen","async","autofocus","autoplay","checked","controls","default","disabled","formnovalidate","hidden","indeterminate","ismap","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","seamless","selected"],Be=new Set(["className","value","readOnly","formNoValidate","isMap","noModule","playsInline",...Fe]),Re=new Set(["innerHTML","textContent","innerText","children"]),We={className:"class",htmlFor:"for"},H={class:"className",formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly"},_e=new Set(["beforeinput","click","dblclick","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),ze={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function Ve(e,t,n){let i=n.length,r=t.length,s=i,o=0,l=0,c=t[r-1].nextSibling,u=null;for(;o<r||l<s;){if(t[o]===n[l]){o++,l++;continue}for(;t[r-1]===n[s-1];)r--,s--;if(r===o){const f=s<i?l?n[l-1].nextSibling:n[s-l]:c;for(;l<s;)e.insertBefore(n[l++],f)}else if(s===l)for(;o<r;)(!u||!u.has(t[o]))&&t[o].remove(),o++;else if(t[o]===n[s-1]&&n[l]===t[r-1]){const f=t[--r].nextSibling;e.insertBefore(n[l++],t[o++].nextSibling),e.insertBefore(n[--s],f),t[r]=n[s]}else{if(!u){u=new Map;let d=l;for(;d<s;)u.set(n[d],d++)}const f=u.get(t[o]);if(f!=null)if(l<f&&f<s){let d=o,p=1,S;for(;++d<r&&d<s&&!((S=u.get(t[d]))==null||S!==f+p);)p++;if(p>f-l){const O=t[o];for(;l<f;)e.insertBefore(n[l++],O)}else e.replaceChild(n[l++],t[o++])}else o++;else t[o++].remove()}}}const Q="_$DX_DELEGATE";function qe(e,t=window.document){const n=t[Q]||(t[Q]=new Set);for(let i=0,r=e.length;i<r;i++){const s=e[i];n.has(s)||(n.add(s),t.addEventListener(s,Je))}}function Ue(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function Xe(e,t,n,i){i==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,i)}function Ke(e,t,n,i){i?Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n:Array.isArray(n)?e.addEventListener(t,r=>n[0](n[1],r)):e.addEventListener(t,n)}function Ge(e,t,n={}){const i=Object.keys(t||{}),r=Object.keys(n);let s,o;for(s=0,o=r.length;s<o;s++){const l=r[s];!l||l==="undefined"||t[l]||(Y(e,l,!1),delete n[l])}for(s=0,o=i.length;s<o;s++){const l=i[s],c=!!t[l];!l||l==="undefined"||n[l]===c||!c||(Y(e,l,!0),n[l]=c)}return n}function He(e,t,n={}){const i=e.style;if(t==null||typeof t=="string")return i.cssText=t;typeof n=="string"&&(n={});let r,s;for(s in n)t[s]==null&&i.removeProperty(s),delete n[s];for(s in t)r=t[s],r!==n[s]&&(i.setProperty(s,r),n[s]=r);return n}function Qe(e,t,n,i){typeof t=="function"?$(r=>J(e,t(),r,n,i)):J(e,t,void 0,n,i)}function Ye(e,t,n,i,r={}){for(const s in r)if(!(s in t)){if(s==="children")continue;Z(e,s,null,r[s],n)}for(const s in t){if(s==="children"){i||P(e,t.children);continue}const o=t[s];r[s]=Z(e,s,o,r[s],n)}}function Ze(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function Y(e,t,n){const i=t.trim().split(/\s+/);for(let r=0,s=i.length;r<s;r++)e.classList.toggle(i[r],n)}function Z(e,t,n,i,r){let s,o,l;if(t==="style")return He(e,n,i);if(t==="classList")return Ge(e,n,i);if(n===i)return i;if(t==="ref")n(e);else if(t.slice(0,3)==="on:")e.addEventListener(t.slice(3),n);else if(t.slice(0,10)==="oncapture:")e.addEventListener(t.slice(10),n,!0);else if(t.slice(0,2)==="on"){const c=t.slice(2).toLowerCase(),u=_e.has(c);Ke(e,c,n,u),u&&qe([c])}else if((l=Re.has(t))||!r&&(H[t]||(o=Be.has(t)))||(s=e.nodeName.includes("-")))s&&!o&&!l?e[Ze(t)]=n:e[H[t]||t]=n;else{const c=r&&t.indexOf(":")>-1&&ze[t.split(":")[0]];c?Xe(e,c,t,n):Ue(e,We[t]||t,n)}return n}function Je(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return n||document}});n!==null;){const i=n[t];if(i&&!n.disabled){const r=n[`${t}Data`];if(r!==void 0?i(r,e):i(e),e.cancelBubble)return}n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function J(e,t,n={},i,r){return!r&&"children"in t&&$(()=>n.children=P(e,t.children,n.children)),$(()=>Ye(e,t,i,!0,n)),n}function P(e,t,n,i,r){for(;typeof n=="function";)n=n();if(t===n)return n;const s=typeof t,o=i!==void 0;if(e=o&&n[0]&&n[0].parentNode||e,s==="string"||s==="number")if(s==="number"&&(t=t.toString()),o){let l=n[0];l&&l.nodeType===3?l.data=t:l=document.createTextNode(t),n=w(e,n,i,l)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t;else if(t==null||s==="boolean")n=w(e,n,i);else{if(s==="function")return $(()=>{let l=t();for(;typeof l=="function";)l=l();n=P(e,l,n,i)}),()=>n;if(Array.isArray(t)){const l=[];if(I(l,t,r))return $(()=>n=P(e,l,n,i,!0)),()=>n;if(l.length===0){if(n=w(e,n,i),o)return n}else Array.isArray(n)?n.length===0?ee(e,l,i):Ve(e,n,l):(n&&w(e),ee(e,l));n=l}else if(t instanceof Node){if(Array.isArray(n)){if(o)return n=w(e,n,i,t);w(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function I(e,t,n){let i=!1;for(let r=0,s=t.length;r<s;r++){let o=t[r],l;if(o instanceof Node)e.push(o);else if(!(o==null||o===!0||o===!1))if(Array.isArray(o))i=I(e,o)||i;else if((l=typeof o)=="string")e.push(document.createTextNode(o));else if(l==="function")if(n){for(;typeof o=="function";)o=o();i=I(e,Array.isArray(o)?o:[o])||i}else e.push(o),i=!0;else e.push(document.createTextNode(o.toString()))}return i}function ee(e,t,n){for(let i=0,r=t.length;i<r;i++)e.insertBefore(t[i],n)}function w(e,t,n,i){if(n===void 0)return e.textContent="";const r=i||document.createTextNode("");if(t.length){let s=!1;for(let o=t.length-1;o>=0;o--){const l=t[o];if(r!==l){const c=l.parentNode===e;!s&&!o?c?e.replaceChild(r,l):e.insertBefore(r,n):c&&l.remove()}else s=!0}}else e.insertBefore(r,n);return[r]}function et(e,...t){}const tt=!1,nt=Pe();function it(e){let t=this||{};return(...n)=>{const i=r=>{const s=Le(nt),o=K(r,{theme:s}),l=K(o,{get className(){const p=o.className,S="className"in o&&/^go[0-9]+/.test(p);let O=b.apply({target:t.target,o:S,p:o,g:t.g},n);return[p,O].filter(Boolean).join(" ")}}),[c,u]=G(l,["as"]),f=c.as||e;let d;if(typeof f=="function")d=f(u);else if(tt){const[p,S]=G(u,["children"]);d=et([`<${f} `,">",`</${f}>`],void 0,p.children||"")}else d=document.createElement(f),Qe(d,u);return d};return i.className=r=>B(()=>b.apply({target:t.target,p:r,g:t.g},n)),i}}const E=new Proxy(it,{get(e,t){return e(t)}});function ae(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 ge={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 st(e){return e.reduce((t,[n,i])=>q(V({},t),{[n]:i}),{})}const L=(e,t)=>{var o,l;const n=(l=(o=t==null?void 0:t.space)!=null?o:t==null?void 0:t.spacing)!=null?l:ge,r=st(Object.entries(n).map(([c,u])=>[c,typeof u=="number"?`${u}px`:u]))[e];return ae(r)?r:void 0},rt=E("div")`
|
|
2
|
+
@property --gutter {
|
|
3
|
+
syntax: "<length-percentage>";
|
|
4
|
+
inherits: false;
|
|
5
|
+
initial-value: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=L(e.gutter,e.theme))!=null?t:"0px"}};
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
> * {
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
|
|
16
|
+
gap: var(--gutter, 0px);
|
|
17
|
+
align-content: start;
|
|
18
|
+
|
|
19
|
+
& > [data-bedrock-column] {
|
|
20
|
+
grid-column: span 1 / auto;
|
|
21
|
+
}
|
|
22
|
+
`,lt=E("div")`
|
|
23
|
+
@property --gutter {
|
|
24
|
+
syntax: "<length-percentage>";
|
|
25
|
+
inherits: false;
|
|
26
|
+
initial-value: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@property --minItemWidth {
|
|
30
|
+
syntax: "<length-percentage>";
|
|
31
|
+
inherits: false;
|
|
32
|
+
initial-value: 639px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=L(e.gutter,e.theme))!=null?t:"0px"}};
|
|
36
|
+
--minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
|
|
37
|
+
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
> * {
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
display: grid;
|
|
44
|
+
gap: var(--gutter, 0px);
|
|
45
|
+
|
|
46
|
+
grid-template-columns: repeat(
|
|
47
|
+
auto-fit,
|
|
48
|
+
minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
|
|
49
|
+
);
|
|
50
|
+
`;function ot(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const ct=E("div")`
|
|
51
|
+
@property --maxWidth {
|
|
52
|
+
syntax: "<length-percentage>";
|
|
53
|
+
inherits: false;
|
|
54
|
+
initial-value: 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
--maxWidth: ${e=>ot(e.maxWidth)};
|
|
58
|
+
|
|
59
|
+
box-sizing: content-box;
|
|
60
|
+
|
|
61
|
+
margin-inline-start: auto;
|
|
62
|
+
margin-inline-end: auto;
|
|
63
|
+
margin-inline: auto;
|
|
64
|
+
|
|
65
|
+
max-inline-size: var(--maxWidth, 100%);
|
|
66
|
+
|
|
67
|
+
${e=>e.centerChildren?b`
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
align-items: center;
|
|
71
|
+
`:""}
|
|
72
|
+
|
|
73
|
+
${e=>e.centerText?b`
|
|
74
|
+
text-align: center;
|
|
75
|
+
`:""}
|
|
76
|
+
`;function ut(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const ft=E("div")`
|
|
77
|
+
@property --basis {
|
|
78
|
+
syntax: "<length-percentage>";
|
|
79
|
+
inherits: true;
|
|
80
|
+
initial-value: 100%;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@property --gutter {
|
|
84
|
+
syntax: "<length-percentage>";
|
|
85
|
+
inherits: false;
|
|
86
|
+
initial-value: 0px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
--basis: ${e=>ut(e.basis)};
|
|
90
|
+
--gutter: ${e=>{var t;return e.gutter&&(t=L(e.gutter,e.theme))!=null?t:"0px"}};
|
|
91
|
+
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
> * {
|
|
94
|
+
margin: 0;
|
|
95
|
+
flex-basis: var(--basis, 100%);
|
|
96
|
+
flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
|
|
97
|
+
flex-shrink: 1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-wrap: wrap;
|
|
102
|
+
gap: var(--gutter, 0px);
|
|
103
|
+
`;function at(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000}\/\d{1,1000}$/.test(e)}function gt(e){return Array.isArray(e)?e.join("/"):e}function dt(e){return at(e)?gt(e):void 0}const ht=E.div`
|
|
104
|
+
box-sizing: border-box;
|
|
105
|
+
display: block;
|
|
106
|
+
inline-size: 100%;
|
|
107
|
+
position: relative;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
|
|
110
|
+
${e=>{const t=dt(e.ratio);return t?b`
|
|
111
|
+
aspect-ratio: ${t};
|
|
112
|
+
`:""}};
|
|
113
|
+
|
|
114
|
+
> * {
|
|
115
|
+
position: absolute;
|
|
116
|
+
|
|
117
|
+
inset-block-start: 0;
|
|
118
|
+
inset-block-end: 0;
|
|
119
|
+
inset-inline-start: 0;
|
|
120
|
+
inset-inline-end: 0;
|
|
121
|
+
|
|
122
|
+
inset-block: 0;
|
|
123
|
+
inset-inline: 0;
|
|
124
|
+
|
|
125
|
+
display: flex;
|
|
126
|
+
justify-content: center;
|
|
127
|
+
align-items: center;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
> :is(img, video) {
|
|
131
|
+
inline-size: 100%;
|
|
132
|
+
block-size: 100%;
|
|
133
|
+
size: 100%;
|
|
134
|
+
|
|
135
|
+
object-fit: cover;
|
|
136
|
+
object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
|
|
137
|
+
}
|
|
138
|
+
`;exports.Center=ct;exports.ColumnDrop=ft;exports.Frame=ht;exports.Grid=lt;exports.Stack=rt;exports.checkIsCSSLength=ae;exports.getSpacingValue=L;exports.spacing=ge;
|
package/lib/index.d.ts
CHANGED
|
@@ -1 +1,72 @@
|
|
|
1
|
-
|
|
1
|
+
import type { JSX } from "solid-js/jsx-runtime";
|
|
2
|
+
import { DefaultTheme } from "solid-styled-components";
|
|
3
|
+
declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
|
|
4
|
+
declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
|
|
5
|
+
declare type NonEmptyString = `${AllCharacter}${string}`;
|
|
6
|
+
declare type CSSCustomProperties = `var(--${NonEmptyString})`;
|
|
7
|
+
declare type LengthUnit = "vmin" | "vmax" | "vh" | "vw" | "%" | "ch" | "ex" | "em" | "rem" | "in" | "cm" | "mm" | "pt" | "pc" | "px";
|
|
8
|
+
export declare type CSSLength = `${number}${LengthUnit}` | CSSCustomProperties;
|
|
9
|
+
export declare function checkIsCSSLength(str: string): str is CSSLength;
|
|
10
|
+
export interface Spacing {
|
|
11
|
+
none: CSSLength;
|
|
12
|
+
xxs: CSSLength;
|
|
13
|
+
xs: CSSLength;
|
|
14
|
+
sm: CSSLength;
|
|
15
|
+
md: CSSLength;
|
|
16
|
+
mdLg: CSSLength;
|
|
17
|
+
lg: CSSLength;
|
|
18
|
+
lgXl: CSSLength;
|
|
19
|
+
xl: CSSLength;
|
|
20
|
+
xlXXl: CSSLength;
|
|
21
|
+
xxl: CSSLength;
|
|
22
|
+
}
|
|
23
|
+
export declare const spacing: Spacing;
|
|
24
|
+
export declare type BaseTheme = Record<string, CSSLength | string | number>;
|
|
25
|
+
declare type ThemeOrDefaultSpace<T> = T extends {
|
|
26
|
+
space: BaseTheme;
|
|
27
|
+
} ? T["space"] : keyof Spacing;
|
|
28
|
+
declare type SpacingOptions = ThemeOrDefaultSpace<DefaultTheme>;
|
|
29
|
+
declare type MaybeValue = CSSLength | undefined;
|
|
30
|
+
declare type GetSpacingValue = (spacingKey: SpacingOptions, theme?: Partial<BaseTheme>) => MaybeValue;
|
|
31
|
+
export declare const getSpacingValue: GetSpacingValue;
|
|
32
|
+
export interface StackProps {
|
|
33
|
+
gutter?: SpacingOptions;
|
|
34
|
+
}
|
|
35
|
+
export declare const Stack: ((props: StackProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
36
|
+
className: (props: StackProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
37
|
+
};
|
|
38
|
+
declare type MinItemWidth = number | CSSLength;
|
|
39
|
+
export interface GridProps {
|
|
40
|
+
gutter?: SpacingOptions;
|
|
41
|
+
minItemWidth?: MinItemWidth;
|
|
42
|
+
}
|
|
43
|
+
export declare const Grid: ((props: GridProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
44
|
+
className: (props: GridProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
45
|
+
};
|
|
46
|
+
declare type MaxWidth = number | CSSLength;
|
|
47
|
+
export interface CenterProps {
|
|
48
|
+
maxWidth?: MaxWidth;
|
|
49
|
+
centerText?: boolean;
|
|
50
|
+
centerChildren?: boolean;
|
|
51
|
+
}
|
|
52
|
+
export declare const Center: ((props: CenterProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
53
|
+
className: (props: CenterProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
54
|
+
};
|
|
55
|
+
declare type Basis = CSSLength | number;
|
|
56
|
+
export interface ColumnDropProps {
|
|
57
|
+
gutter?: SpacingOptions;
|
|
58
|
+
basis?: Basis;
|
|
59
|
+
noStretchedColumns?: boolean;
|
|
60
|
+
}
|
|
61
|
+
export declare const ColumnDrop: ((props: ColumnDropProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
62
|
+
className: (props: ColumnDropProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
63
|
+
};
|
|
64
|
+
declare type Ratio = [number, number] | `${number}/${number}`;
|
|
65
|
+
export interface FrameProps {
|
|
66
|
+
ratio?: Ratio;
|
|
67
|
+
position?: string;
|
|
68
|
+
}
|
|
69
|
+
export declare const Frame: ((props: FrameProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
|
|
70
|
+
className: (props: FrameProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
|
|
71
|
+
};
|
|
72
|
+
export {};
|