@axel669/windstorm 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ws-es5.js +29 -25
- package/dist/ws-esm.js +32 -28
- package/dist/ws-nc-es5.js +1 -1
- package/dist/ws-nc-esm.js +1 -1
- package/package.json +3 -10
- package/readme.md +119 -119
package/dist/ws-es5.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ws=function(e){"use strict";const t=Symbol("no match"),r=(e,r)=>{const o=r=>{const o=r.length;return()=>r===e.substr(F,o)?(F+=o,r):t},a=r=>()=>{const o=e.charAt(F);return!1!==r.test(o)?(F+=1,o):t};let n=null;const s=o("@"),i=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),b=o("{"),g=o("}"),f=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const e=F;let r=null,o=null;return(r=N())===t||(o=z())===t?(F=e,t):[r,o]},y=()=>{const r=F;let o=null,a=null;return(o=m())===t||(a=(()=>{const r=F,o=F;for(;x()!==t;);return F-o==0?t:e.slice(r,F)})())===t?(F=r,t):[o,a]},k=()=>{n="rules";let e=F,r=null;const o=[];let a=null;for(;(a=w())!==t;)o.push(a);if(r=o,N()===t)return F=e,t;return r.map((e=>e[1]))},z=()=>{let e=null;return(e=$())!==t||(e=A())!==t||(e=E())!==t||(e=L())!==t?e:t},$=()=>{n="rule$0";let e=F,r=null;if((r=S())===t)return F=e,t;return r},A=()=>{n="rule$1";let e=F,r=null;if((r=M())===t)return F=e,t;return r},E=()=>{n="rule$2";let e=F,r=null;if((r=V())===t)return F=e,t;return r},L=()=>{n="rule$3";let e=F,r=null;if((r=C())===t)return F=e,t;return r},S=()=>{n="variable";let r=F,o=null,a=null;if(s()===t)return F=r,t;if((o=q())===t)return F=r,t;if(i()===t)return F=r,t;if(N()===t)return F=r,t;if((a=(()=>{const r=F,o=F;for(;l()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;if(c()===t)return F=r,t;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},M=()=>{n="css";let r=F,o=null,a=null;if(d()===t)return F=r,t;if((o=q())===t)return F=r,t;if(i()===t)return F=r,t;if(N()===t)return F=r,t;if((a=(()=>{const r=F,o=F;for(;l()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;if(c()===t)return F=r,t;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},q=()=>{n="cssName";let r=F,o=null;if((o=(()=>{const r=F,o=F;for(;p()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;return o},V=()=>{n="subrule";let r=F,o=null,a=null;if(h()===t)return F=r,t;if(N()===t)return F=r,t;if((o=(()=>{const r=F,o=F;for(;u()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;if(b()===t)return F=r,t;if((a=k())===t)return F=r,t;if(g()===t)return F=r,t;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},C=()=>{n="macro";let r=F,o=null,a=null;if((o=(()=>{const r=F,o=F;for(;f()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;const s=(()=>{const e=F;let r=null,o=null,a=null;return(r=i())===t||(o=N())===t||(a=I())===t?(F=e,t):[r,o,a]})();if(a=s===t?null:s,c()===t)return F=r,t;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},I=()=>{let e=null;return(e=T())!==t||(e=j())!==t?e:t},T=()=>{n="macroValue$0";let e=null;const r=[];let o=null;for(;(o=y())!==t;)r.push(o);if(0===r.length)return t;e=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(e)},j=()=>{n="macroValue$1";let r=F,o=null;if((o=(()=>{const r=F,o=F;for(;l()!==t;);return F-o==0?t:e.slice(r,F)})())===t)return F=r,t;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},N=()=>{for(n="_";v()!==t;);};let F=0;const H=(()=>{n="$";let e=F,r=null;if((r=k())===t)return F=e,t;return r})();return F!==e.length?(console.log("last",n),console.log("@",F),console.log(e.slice(F-10,F+10)),new Error("End of input not found")):H},o=document.createElement("style");o.setAttribute("data-name","windstorm-generated"),o.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(o);const a=(e,...t)=>{const o=String.raw(e,...t);return n(r(o),{"&":[]},"&")},n=(e,t,r)=>{for(const o of e)i(o,t,r);return t},s=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),i=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${s(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${s(e.value)};`);if("macro"===e.type){const o=l[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,n]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...n.map((t=>s(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],n(e.rules,t,o)},l={},c=e=>(t,...r)=>l[e]=a(t,...r),d=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),p=(e,t="ws.custom")=>(r,...n)=>{const s=a(r,...n),i=d(s).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${i.join("\n")} }`;o.sheet.insertRule(l)};const h={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.0",fontVersion:"2",iconVersion:"3.34.0"},u={},b=async(e,t)=>{const r=u[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${h.origin}/icon/${t}.woff?v${h.iconVersion})`);u[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),b(e,t)},g=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&b(e,t)},f={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(g)}))},attributes(e){g(e.target)}};new MutationObserver((e=>e.forEach((e=>f[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const m=(...e)=>{for(const t of e)b(null,t)};c("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,c("area")`*grid-area: %arg;`,c("b")`*border: %arg;`,c("b.b")`*border-bottom: %arg;`,c("b.b.c")`*border-bottom-color: %arg;`,c("b.b.s")`*border-bottom-style: %arg;`,c("b.b.w")`*border-bottom-width: %arg;`,c("b.c")`*border-color: %arg;`,c("b.l")`*border-left: %arg;`,c("b.l.c")`*border-left-color: %arg;`,c("b.l.s")`*border-left-style: %arg;`,c("b.l.w")`*border-left-width: %arg;`,c("b.r")`*border-right: %arg;`,c("b.r.c")`*border-right-color: %arg;`,c("b.r.s")`*border-right-style: %arg;`,c("b.r.w")`*border-right-width: %arg;`,c("b.s")`*border-style: %arg;`,c("b.t")`*border-top: %arg;`,c("b.t.c")`*border-top-color: %arg;`,c("b.t.s")`*border-top-style: %arg;`,c("b.t.w")`*border-top-width: %arg;`,c("b.w")`*border-width: %arg;`,c("b.x")`*border-left: %arg; *border-right: %arg;`,c("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,c("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,c("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,c("b.y")`*border-top: %arg; *border-bottom: %arg;`,c("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,c("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,c("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,c("bg")`*background: %arg;`,c("bg.att")`*background-attachment: %arg;`,c("bg.c")`*background-color: %arg;`,c("bg.img")`*background-image: %arg;`,c("bg.pos")`*background-position: %arg;`,c("bg.rep")`*background-repeat: %arg;`,c("bg.sz")`*background-size: %arg;`,c("c")`*color: %arg;`,c("col")`*grid-column: %arg;`,c("cur")`*cursor: %arg;`,c("disp")`*display: %arg;`,c("fl.basis")`*flex-basis: %arg;`,c("fl.cross")`*align-items: %arg;`,c("fl.dir")`*flex-direction: %arg;`,c("fl.flow")`*flex-flow: %arg;`,c("fl.grow")`*flex-grow: %arg;`,c("fl.main")`*justify-content: %arg;`,c("fl.shrink")`*flex-shrink: %arg;`,c("fl.size")`*flex: %arg;`,c("fl.wr")`*flex-wrap: %arg;`,c("font")`*font-family: %arg;`,c("gap")`*gap: %arg;`,c("gap.col")`*column-gap: %arg;`,c("gap.row")`*row-gap: %arg;`,c("gr.areas")`*grid-template-areas: %arg;`,c("gr.cols")`*grid-template-columns: %arg;`,c("gr.cols.a")`*grid-auto-columns: %arg;`,c("gr.flow")`*grid-auto-flow: %arg;`,c("gr.rows")`*grid-template-rows: %arg;`,c("gr.rows.a")`*grid-auto-rows: %arg;`,c("h")`*height: %arg;`,c("h.max")`*max-height: %arg;`,c("h.min")`*min-height: %arg;`,c("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,c("inset.x")`*left: %arg; *right: %arg;`,c("inset.y")`*top: %arg; *bottom: %arg;`,c("m")`*margin: %arg;`,c("m.b")`*margin-bottom: %arg;`,c("m.l")`*margin-left: %arg;`,c("m.r")`*margin-right: %arg;`,c("m.t")`*margin-top: %arg;`,c("m.x")`*margin-left: %arg; *margin-right: %arg;`,c("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,c("o")`*opacity: %arg;`,c("outln")`*outline: %arg;`,c("over")`*overflow: %arg;`,c("over.x")`*overflow-x: %arg;`,c("over.y")`*overflow-y: %arg;`,c("p")`*padding: %arg;`,c("p.b")`*padding-bottom: %arg;`,c("p.l")`*padding-left: %arg;`,c("p.r")`*padding-right: %arg;`,c("p.t")`*padding-top: %arg;`,c("p.x")`*padding-left: %arg; *padding-right: %arg;`,c("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,c("pos")`*position: %arg;`,c("pos.abs")`*position: absolute;`,c("pos.fix")`*position: fixed;`,c("pos.rel")`*position: relative;`,c("pos.stick")`*position: sticky;`,c("r")`*border-radius: %arg;`,c("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,c("r.bl")`*border-bottom-left-radius: %arg;`,c("r.br")`*border-bottom-right-radius: %arg;`,c("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,c("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,c("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,c("r.tl")`*border-top-left-radius: %arg;`,c("r.tr")`*border-top-right-radius: %arg;`,c("row")`*grid-row: %arg;`,c("sel")`*user-select: %arg;`,c("self.cross")`*align-self: %arg;`,c("self.main")`*justify-self: %arg;`,c("sh.box")`*box-shadow: %arg;`,c("sh.text")`*text-shadow: %arg;`,c("t.a")`*text-align: %arg;`,c("t.br")`*word-break: %arg;`,c("t.c")`*color: %arg;`,c("t.deco")`*text-decoration: %arg;`,c("t.lh")`*line-height: %arg;`,c("t.over")`*text-overflow: %arg;`,c("t.st")`*font-style: %arg;`,c("t.sz")`*font-size: %arg;`,c("t.tf")`*text-transform: %arg;`,c("t.var")`*font-variant: %arg;`,c("t.wrap")`*word-wrap: %arg;`,c("t.ws")`*white-space: %arg;`,c("t.wt")`*font-weight: %arg;`,c("tf")`*transform: %arg;`,c("tf.o")`*transform-origin: %arg;`,c("tf.p")`*perspective: %arg;`,c("tr")`*transition: %arg;`,c("v.a")`*vertical-align: %arg;`,c("vis")`*visibility: %arg;`,c("w")`*width: %arg;`,c("w.max")`*max-width: %arg;`,c("w.min")`*min-width: %arg;`,c("x")`*left: %arg;`,c("-x")`*right: %arg;`,c("y")`*top: %arg;`,c("-y")`*bottom: %arg;`,c("z")`*z-index: %arg;`,c("fl.cn")`fl.cross: center; fl.main: center;`,c("fl.cn.cross")`fl.cross: center;`,c("fl.cn.main")`fl.main: center;`,c("flex")`disp: flex; fl.dir: %arg;`,c("grid")`disp: grid; gr.flow: %arg;`,c("hide")`disp: none;`,c("invis")`vis: hidden;`,c("sticky")`pos: sticky; y: 0px; z: +1;`,c("adorn")`disp: flex; fl.cn; p: 4px;`,c("pad.compact")`p: 0px 4px;`,c("variant.outline")`b.w: 1px;`,c("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,c("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,c("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,c("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,c("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,c("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,c("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const x=e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)},v={},w=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${w(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),y=h.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;c("#theme.base")`
|
|
1
|
+
var ws=function(e){"use strict";const t=Symbol("no match"),r=(e,r)=>{const o=r=>{const o=r.length;return()=>r===e.substr(N,o)?(N+=o,r):t},a=r=>()=>{const o=e.charAt(N);return!1!==r.test(o)?(N+=1,o):t};let n=null;const s=o("@"),i=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),f=o("}"),b=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const e=N;let r=null,o=null;return(r=j())===t||(o=z())===t?(N=e,t):[r,o]},y=()=>{const r=N;let o=null,a=null;return(o=m())===t||(a=(()=>{const r=N,o=N;for(;x()!==t;);return N-o==0?t:e.slice(r,N)})())===t?(N=r,t):[o,a]},k=()=>{n="rules";let e=N,r=null;const o=[];let a=null;for(;(a=w())!==t;)o.push(a);if(r=o,j()===t)return N=e,t;return r.map((e=>e[1]))},z=()=>{let e=null;return(e=$())!==t||(e=A())!==t||(e=E())!==t||(e=L())!==t?e:t},$=()=>{n="rule$0";let e=N,r=null;if((r=S())===t)return N=e,t;return r},A=()=>{n="rule$1";let e=N,r=null;if((r=M())===t)return N=e,t;return r},E=()=>{n="rule$2";let e=N,r=null;if((r=C())===t)return N=e,t;return r},L=()=>{n="rule$3";let e=N,r=null;if((r=V())===t)return N=e,t;return r},S=()=>{n="variable";let r=N,o=null,a=null;if(s()===t)return N=r,t;if((o=q())===t)return N=r,t;if(i()===t)return N=r,t;if(j()===t)return N=r,t;if((a=(()=>{const r=N,o=N;for(;l()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;if(c()===t)return N=r,t;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},M=()=>{n="css";let r=N,o=null,a=null;if(d()===t)return N=r,t;if((o=q())===t)return N=r,t;if(i()===t)return N=r,t;if(j()===t)return N=r,t;if((a=(()=>{const r=N,o=N;for(;l()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;if(c()===t)return N=r,t;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},q=()=>{n="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;return o},C=()=>{n="subrule";let r=N,o=null,a=null;if(h()===t)return N=r,t;if(j()===t)return N=r,t;if((o=(()=>{const r=N,o=N;for(;u()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;if(g()===t)return N=r,t;if((a=k())===t)return N=r,t;if(f()===t)return N=r,t;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},V=()=>{n="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;b()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;const s=(()=>{const e=N;let r=null,o=null,a=null;return(r=i())===t||(o=j())===t||(a=I())===t?(N=e,t):[r,o,a]})();if(a=s===t?null:s,c()===t)return N=r,t;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},I=()=>{let e=null;return(e=T())!==t||(e=P())!==t?e:t},T=()=>{n="macroValue$0";let e=null;const r=[];let o=null;for(;(o=y())!==t;)r.push(o);if(0===r.length)return t;e=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(e)},P=()=>{n="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==t;);return N-o==0?t:e.slice(r,N)})())===t)return N=r,t;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},j=()=>{for(n="_";v()!==t;);};let N=0;const H=(()=>{n="$";let e=N,r=null;if((r=k())===t)return N=e,t;return r})();return N!==e.length?(console.log("last",n),console.log("@",N),console.log(e.slice(N-10,N+10)),new Error("End of input not found")):H},o=document.createElement("style");o.setAttribute("data-name","windstorm-generated"),o.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(o);const a=(e,...t)=>{const o=String.raw(e,...t);return n(r(o),{"&":[]},"&")},n=(e,t,r)=>{for(const o of e)i(o,t,r);return t},s=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),i=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${s(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${s(e.value)};`);if("macro"===e.type){const o=l[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,n]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...n.map((t=>s(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],n(e.rules,t,o)},l={},c=e=>(t,...r)=>l[e]=a(t,...r),d=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),p=(e,t="ws.custom")=>(r,...n)=>{const s=a(r,...n),i=d(s).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${i.join("\n")} }`;o.sheet.insertRule(l)};const h={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},u={},g=async(e,t)=>{const r=u[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${h.origin}/icon/${t}.woff?v${h.iconVersion})`);u[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),g(e,t)},f=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&g(e,t)},b={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(f)}))},attributes(e){f(e.target)}};new MutationObserver((e=>e.forEach((e=>b[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const m=(...e)=>{for(const t of e)g(null,t)};c("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,c("area")`*grid-area: %arg;`,c("b")`*border: %arg;`,c("b.b")`*border-bottom: %arg;`,c("b.b.c")`*border-bottom-color: %arg;`,c("b.b.s")`*border-bottom-style: %arg;`,c("b.b.w")`*border-bottom-width: %arg;`,c("b.c")`*border-color: %arg;`,c("b.l")`*border-left: %arg;`,c("b.l.c")`*border-left-color: %arg;`,c("b.l.s")`*border-left-style: %arg;`,c("b.l.w")`*border-left-width: %arg;`,c("b.r")`*border-right: %arg;`,c("b.r.c")`*border-right-color: %arg;`,c("b.r.s")`*border-right-style: %arg;`,c("b.r.w")`*border-right-width: %arg;`,c("b.s")`*border-style: %arg;`,c("b.t")`*border-top: %arg;`,c("b.t.c")`*border-top-color: %arg;`,c("b.t.s")`*border-top-style: %arg;`,c("b.t.w")`*border-top-width: %arg;`,c("b.w")`*border-width: %arg;`,c("b.x")`*border-left: %arg; *border-right: %arg;`,c("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,c("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,c("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,c("b.y")`*border-top: %arg; *border-bottom: %arg;`,c("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,c("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,c("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,c("bg")`*background: %arg;`,c("bg.att")`*background-attachment: %arg;`,c("bg.c")`*background-color: %arg;`,c("bg.img")`*background-image: %arg;`,c("bg.pos")`*background-position: %arg;`,c("bg.rep")`*background-repeat: %arg;`,c("bg.sz")`*background-size: %arg;`,c("c")`*color: %arg;`,c("col")`*grid-column: %arg;`,c("cur")`*cursor: %arg;`,c("disp")`*display: %arg;`,c("fl.basis")`*flex-basis: %arg;`,c("fl.cross")`*align-items: %arg;`,c("fl.dir")`*flex-direction: %arg;`,c("fl.flow")`*flex-flow: %arg;`,c("fl.grow")`*flex-grow: %arg;`,c("fl.main")`*justify-content: %arg;`,c("fl.shrink")`*flex-shrink: %arg;`,c("fl.size")`*flex: %arg;`,c("fl.wr")`*flex-wrap: %arg;`,c("font")`*font-family: %arg;`,c("gap")`*gap: %arg;`,c("gap.col")`*column-gap: %arg;`,c("gap.row")`*row-gap: %arg;`,c("gr.areas")`*grid-template-areas: %arg;`,c("gr.cols")`*grid-template-columns: %arg;`,c("gr.cols.a")`*grid-auto-columns: %arg;`,c("gr.flow")`*grid-auto-flow: %arg;`,c("gr.rows")`*grid-template-rows: %arg;`,c("gr.rows.a")`*grid-auto-rows: %arg;`,c("h")`*height: %arg;`,c("h.max")`*max-height: %arg;`,c("h.min")`*min-height: %arg;`,c("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,c("inset.x")`*left: %arg; *right: %arg;`,c("inset.y")`*top: %arg; *bottom: %arg;`,c("m")`*margin: %arg;`,c("m.b")`*margin-bottom: %arg;`,c("m.l")`*margin-left: %arg;`,c("m.r")`*margin-right: %arg;`,c("m.t")`*margin-top: %arg;`,c("m.x")`*margin-left: %arg; *margin-right: %arg;`,c("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,c("o")`*opacity: %arg;`,c("outln")`*outline: %arg;`,c("over")`*overflow: %arg;`,c("over.x")`*overflow-x: %arg;`,c("over.y")`*overflow-y: %arg;`,c("p")`*padding: %arg;`,c("p.b")`*padding-bottom: %arg;`,c("p.l")`*padding-left: %arg;`,c("p.r")`*padding-right: %arg;`,c("p.t")`*padding-top: %arg;`,c("p.x")`*padding-left: %arg; *padding-right: %arg;`,c("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,c("pos")`*position: %arg;`,c("pos.abs")`*position: absolute;`,c("pos.fix")`*position: fixed;`,c("pos.rel")`*position: relative;`,c("pos.stick")`*position: sticky;`,c("r")`*border-radius: %arg;`,c("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,c("r.bl")`*border-bottom-left-radius: %arg;`,c("r.br")`*border-bottom-right-radius: %arg;`,c("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,c("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,c("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,c("r.tl")`*border-top-left-radius: %arg;`,c("r.tr")`*border-top-right-radius: %arg;`,c("row")`*grid-row: %arg;`,c("sel")`*user-select: %arg;`,c("self.cross")`*align-self: %arg;`,c("self.main")`*justify-self: %arg;`,c("sh.box")`*box-shadow: %arg;`,c("sh.text")`*text-shadow: %arg;`,c("t.a")`*text-align: %arg;`,c("t.br")`*word-break: %arg;`,c("t.c")`*color: %arg;`,c("t.deco")`*text-decoration: %arg;`,c("t.lh")`*line-height: %arg;`,c("t.over")`*text-overflow: %arg;`,c("t.st")`*font-style: %arg;`,c("t.sz")`*font-size: %arg;`,c("t.tf")`*text-transform: %arg;`,c("t.var")`*font-variant: %arg;`,c("t.wrap")`*word-wrap: %arg;`,c("t.ws")`*white-space: %arg;`,c("t.wt")`*font-weight: %arg;`,c("tf")`*transform: %arg;`,c("tf.o")`*transform-origin: %arg;`,c("tf.p")`*perspective: %arg;`,c("tr")`*transition: %arg;`,c("v.a")`*vertical-align: %arg;`,c("vis")`*visibility: %arg;`,c("w")`*width: %arg;`,c("w.max")`*max-width: %arg;`,c("w.min")`*min-width: %arg;`,c("x")`*left: %arg;`,c("-x")`*right: %arg;`,c("y")`*top: %arg;`,c("-y")`*bottom: %arg;`,c("z")`*z-index: %arg;`,c("fl.cn")`fl.cross: center; fl.main: center;`,c("fl.cn.cross")`fl.cross: center;`,c("fl.cn.main")`fl.main: center;`,c("flex")`disp: flex; fl.dir: %arg;`,c("grid")`disp: grid; gr.flow: %arg;`,c("hide")`disp: none;`,c("invis")`vis: hidden;`,c("sticky")`pos: sticky; y: 0px; z: +1;`,c("adorn")`disp: flex; fl.cn; p: 4px;`,c("pad.compact")`p: 0px 4px;`,c("variant.outline")`b.w: 1px;`,c("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,c("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,c("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,c("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,c("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,c("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,c("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const x=e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)},v={},w=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${w(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),y=h.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;c("#theme.base")`
|
|
2
2
|
font: @font;
|
|
3
3
|
|
|
4
4
|
@sub-pixel-offset: ${k?1:0}px;
|
|
@@ -563,7 +563,7 @@ var ws=function(e){"use strict";const t=Symbol("no match"),r=(e,r)=>{const o=r=>
|
|
|
563
563
|
<slot name="popover"></slot>
|
|
564
564
|
</ws-popover-position>
|
|
565
565
|
</ws-modal>
|
|
566
|
-
`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),this.#t.addEventListener("click",(e=>e.stopPropagation())),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const
|
|
566
|
+
`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),this.#t.addEventListener("click",(e=>e.stopPropagation())),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const C=z`
|
|
567
567
|
<style>
|
|
568
568
|
@keyframes busy-load {
|
|
569
569
|
from {
|
|
@@ -614,7 +614,7 @@ div::after {
|
|
|
614
614
|
</style>
|
|
615
615
|
|
|
616
616
|
<div></div>
|
|
617
|
-
`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(
|
|
617
|
+
`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(C()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value","")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer","")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min","")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max","")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy","")}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),p("ws-screen")`
|
|
618
618
|
@screen-width: min(720px, 100%);
|
|
619
619
|
@pad-x: auto;
|
|
620
620
|
@pad-y: auto;
|
|
@@ -641,7 +641,7 @@ div::after {
|
|
|
641
641
|
! & > :where(*) {
|
|
642
642
|
area: content;
|
|
643
643
|
}
|
|
644
|
-
`;const
|
|
644
|
+
`;const V="caret-down-filled";m(V),p("ws-option")`
|
|
645
645
|
${E("@layer-element","@layer-fill")}
|
|
646
646
|
|
|
647
647
|
disp: block;
|
|
@@ -682,7 +682,7 @@ div::after {
|
|
|
682
682
|
:host {
|
|
683
683
|
--color: var(--mono);
|
|
684
684
|
--modal-color: transparent;
|
|
685
|
-
--max-height:
|
|
685
|
+
--max-height: 250px;
|
|
686
686
|
--core-color: hsl(var(--color), var(--layer-border));
|
|
687
687
|
--alt-color: hsl(var(--color), var(--layer-surface));
|
|
688
688
|
display: inline-grid;
|
|
@@ -703,6 +703,7 @@ div::after {
|
|
|
703
703
|
box-sizing: border-box;
|
|
704
704
|
border: 1px solid var(--core-color);
|
|
705
705
|
border-radius: var(--base-radius);
|
|
706
|
+
color: hsl(var(--mono), var(--layer-text));
|
|
706
707
|
display: grid;
|
|
707
708
|
position: absolute;
|
|
708
709
|
max-height: var(--max-height);
|
|
@@ -711,31 +712,30 @@ div::after {
|
|
|
711
712
|
grid-template-columns: 1fr;
|
|
712
713
|
border-radius: var(--base-radius);
|
|
713
714
|
box-shadow: 0px 2px 4px var(--shadow-color);
|
|
714
|
-
/* visibility: none; */
|
|
715
715
|
opacity: 0;
|
|
716
716
|
transform: translateY(10px);
|
|
717
717
|
transition:
|
|
718
|
-
/* visibility var(--anim-time) linear, */
|
|
719
718
|
opacity var(--anim-time) linear,
|
|
720
719
|
transform var(--anim-time) linear
|
|
721
720
|
;
|
|
721
|
+
|
|
722
|
+
--sign: sign(var(--y) - 100vh + var(--opt-h));
|
|
723
|
+
--pos: calc(
|
|
724
|
+
var(--y)
|
|
725
|
+
- calc(
|
|
726
|
+
max(var(--sign), 0)* (var(--opt-h) - var(--h))
|
|
727
|
+
)
|
|
728
|
+
);
|
|
729
|
+
top: var(--pos);
|
|
730
|
+
left: var(--x);
|
|
731
|
+
width: var(--w);
|
|
732
|
+
transform-origin: top center;
|
|
722
733
|
}
|
|
723
734
|
:host([open]) ws-options {
|
|
724
735
|
transform: translateY(0);
|
|
725
736
|
opacity: 1;
|
|
726
737
|
visibility: visible;
|
|
727
738
|
}
|
|
728
|
-
ws-options {
|
|
729
|
-
top: calc(var(--y) + var(--h));
|
|
730
|
-
left: var(--x);
|
|
731
|
-
width: var(--w);
|
|
732
|
-
transform-origin: top center;
|
|
733
|
-
}
|
|
734
|
-
:host([direction="up"]) ws-options {
|
|
735
|
-
top: unset;
|
|
736
|
-
bottom: calc(100% - var(--y));
|
|
737
|
-
transform-origin: bottom center;
|
|
738
|
-
}
|
|
739
739
|
|
|
740
740
|
value-display {
|
|
741
741
|
display: grid;
|
|
@@ -756,10 +756,13 @@ div::after {
|
|
|
756
756
|
}
|
|
757
757
|
ws-sel-caret::before {
|
|
758
758
|
display: block;
|
|
759
|
-
font-family: ws-icon-${
|
|
759
|
+
font-family: ws-icon-${V};
|
|
760
760
|
content: attr(data-icon);
|
|
761
761
|
}
|
|
762
762
|
slot[name="selected"] {
|
|
763
|
+
display: none;
|
|
764
|
+
}
|
|
765
|
+
slot[name="display"] {
|
|
763
766
|
display: flex;
|
|
764
767
|
align-items: center;
|
|
765
768
|
}
|
|
@@ -781,7 +784,8 @@ div::after {
|
|
|
781
784
|
<slot name="selected">
|
|
782
785
|
<ws-selected>No Selection</ws-selected>
|
|
783
786
|
</slot>
|
|
784
|
-
<
|
|
787
|
+
<slot name="display"></slot>
|
|
788
|
+
<ws-sel-caret data-icon="${V}"></ws-sel-caret>
|
|
785
789
|
</value-display>
|
|
786
790
|
<ws-popover>
|
|
787
791
|
<slot slot="popover" name="options">
|
|
@@ -790,7 +794,7 @@ div::after {
|
|
|
790
794
|
</ws-options>
|
|
791
795
|
</slot>
|
|
792
796
|
</ws-popover>
|
|
793
|
-
`,T="ws-option";customElements.define(
|
|
797
|
+
`,T="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#n=-1;#s=null;#i=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(T)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===T)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===T&&!0===e.hasAttribute("selected")))??this.#s,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r)}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(I()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open")}connectedCallback(){this.display=document.createElement("ws-display"),this.display.slot="display",this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#i=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#i.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#n}set selectedIndex(e){this.#s?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#s=t[r]??null,this.#n=r,this.#s?.setAttribute("selected",""),this.#a=this.#s?.value??this.#s?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#s?.getAttribute("preview")??this.#s?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#s?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),p("table[data-ws]")`
|
|
794
798
|
@color: @primary;
|
|
795
799
|
|
|
796
800
|
*border-collapse: separate;
|
|
@@ -1002,8 +1006,8 @@ div::after {
|
|
|
1002
1006
|
! &[pos$="-right"] {
|
|
1003
1007
|
-x: 20px;
|
|
1004
1008
|
}
|
|
1005
|
-
`,m("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const
|
|
1006
|
-
${
|
|
1009
|
+
`,m("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const P='\n @color: var(--toggle-color, @primary);\n @size: 20px;\n\n @core-color: hsl(@color, @layer-element);\n\n pos: relative;\n w: @size;\n h: @size;\n appr: none;\n m: 0px;\n t.c: @core-color;\n v.a: middle;\n\n ! &::after {\n *content: "";\n pos: absolute;\n t.sz: calc(@size - 2px);\n *speak: none;\n t.st: normal;\n t.wt: 400;\n t.var: normal;\n t.tf: none;\n y: 50%;\n x: 50%;\n w: @size;\n h: @size;\n tf: translate(-50%, -50%);\n disp: flex;\n fl.cross: center;\n fl.main: center;\n over: hidden;\n }\n';p(":where(input[data-ws][type=checkbox]:not([switch]))")`
|
|
1010
|
+
${P}
|
|
1007
1011
|
|
|
1008
1012
|
! &::after {
|
|
1009
1013
|
font: ws-icon-square-dashed;
|
|
@@ -1014,7 +1018,7 @@ div::after {
|
|
|
1014
1018
|
*content: "square-check-filled";
|
|
1015
1019
|
}
|
|
1016
1020
|
`,p(":where(input[data-ws][type=radio])")`
|
|
1017
|
-
${
|
|
1021
|
+
${P}
|
|
1018
1022
|
|
|
1019
1023
|
! &::after {
|
|
1020
1024
|
font: ws-icon-circle;
|
|
@@ -1158,4 +1162,4 @@ div::after {
|
|
|
1158
1162
|
url(${h.origin}/font/roboto.woff2?v${h.version})
|
|
1159
1163
|
format("woff2")
|
|
1160
1164
|
;
|
|
1161
|
-
`;const
|
|
1165
|
+
`;const j=e=>{const t=(e=>{if(""===e||null===e)return;const t=d(a({raw:[e]})),r=x(t.join("\n"));if(v[r]=(v[r]??0)+1,v[r]>1)return r;const n=t.map((e=>e.replaceAll("&",`[data-wsid="${r}"]`)));return o.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,o.sheet.cssRules.length),r})(e.dataset?.ws??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)j(e)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))j(e);return e.component=p,e.localMacro=(e,...t)=>{const r=x(`${Date.now()}:${Math.random().toString(16)}`);return c(r)(e,...t)},e.macro=c,e.preloadIcons=m,e.version=y,e.x=w,e}({});
|
package/dist/ws-esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===t.substr(F,o)?(F+=o,r):e},a=r=>()=>{const o=t.charAt(F);return!1!==r.test(o)?(F+=1,o):e};let n=null;const s=o("@"),i=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),b=o("{"),g=o("}"),f=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=F;let r=null,o=null;return(r=N())===e||(o=z())===e?(F=t,e):[r,o]},y=()=>{const r=F;let o=null,a=null;return(o=m())===e||(a=(()=>{const r=F,o=F;for(;x()!==e;);return F-o==0?e:t.slice(r,F)})())===e?(F=r,e):[o,a]},k=()=>{n="rules";let t=F,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,N()===e)return F=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return(t=$())!==e||(t=A())!==e||(t=E())!==e||(t=L())!==e?t:e},$=()=>{n="rule$0";let t=F,r=null;if((r=S())===e)return F=t,e;return r},A=()=>{n="rule$1";let t=F,r=null;if((r=M())===e)return F=t,e;return r},E=()=>{n="rule$2";let t=F,r=null;if((r=V())===e)return F=t,e;return r},L=()=>{n="rule$3";let t=F,r=null;if((r=C())===e)return F=t,e;return r},S=()=>{n="variable";let r=F,o=null,a=null;if(s()===e)return F=r,e;if((o=q())===e)return F=r,e;if(i()===e)return F=r,e;if(N()===e)return F=r,e;if((a=(()=>{const r=F,o=F;for(;l()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;if(c()===e)return F=r,e;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},M=()=>{n="css";let r=F,o=null,a=null;if(d()===e)return F=r,e;if((o=q())===e)return F=r,e;if(i()===e)return F=r,e;if(N()===e)return F=r,e;if((a=(()=>{const r=F,o=F;for(;l()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;if(c()===e)return F=r,e;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},q=()=>{n="cssName";let r=F,o=null;if((o=(()=>{const r=F,o=F;for(;p()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;return o},V=()=>{n="subrule";let r=F,o=null,a=null;if(h()===e)return F=r,e;if(N()===e)return F=r,e;if((o=(()=>{const r=F,o=F;for(;u()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;if(b()===e)return F=r,e;if((a=k())===e)return F=r,e;if(g()===e)return F=r,e;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},C=()=>{n="macro";let r=F,o=null,a=null;if((o=(()=>{const r=F,o=F;for(;f()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;const s=(()=>{const t=F;let r=null,o=null,a=null;return(r=i())===e||(o=N())===e||(a=T())===e?(F=t,e):[r,o,a]})();if(a=s===e?null:s,c()===e)return F=r,e;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},T=()=>{let t=null;return(t=j())!==e||(t=I())!==e?t:e},j=()=>{n="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},I=()=>{n="macroValue$1";let r=F,o=null;if((o=(()=>{const r=F,o=F;for(;l()!==e;);return F-o==0?e:t.slice(r,F)})())===e)return F=r,e;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},N=()=>{for(n="_";v()!==e;);};let F=0;const H=(()=>{n="$";let t=F,r=null;if((r=k())===e)return F=t,e;return r})();return F!==t.length?(console.log("last",n),console.log("@",F),console.log(t.slice(F-10,F+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)s(o,t,r);return t},n=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),s=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${n(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${n(e.value)};`);if("macro"===e.type){const o=i[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,s]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...s.map((t=>n(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o)},i={},l=e=>(t,...r)=>i[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...n)=>{const s=o(a,...n),i=c(s).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${i.join("\n")} }`;r.sheet.insertRule(l)};const p={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.0",fontVersion:"2",iconVersion:"3.34.0"},h={},u=async(e,t)=>{const r=h[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${p.origin}/icon/${t}.woff?v${p.iconVersion})`);h[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),u(e,t)},b=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&u(e,t)},g={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(b)}))},attributes(e){b(e.target)}};new MutationObserver((e=>e.forEach((e=>g[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const f=(...e)=>{for(const t of e)u(null,t)};l("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,l("area")`*grid-area: %arg;`,l("b")`*border: %arg;`,l("b.b")`*border-bottom: %arg;`,l("b.b.c")`*border-bottom-color: %arg;`,l("b.b.s")`*border-bottom-style: %arg;`,l("b.b.w")`*border-bottom-width: %arg;`,l("b.c")`*border-color: %arg;`,l("b.l")`*border-left: %arg;`,l("b.l.c")`*border-left-color: %arg;`,l("b.l.s")`*border-left-style: %arg;`,l("b.l.w")`*border-left-width: %arg;`,l("b.r")`*border-right: %arg;`,l("b.r.c")`*border-right-color: %arg;`,l("b.r.s")`*border-right-style: %arg;`,l("b.r.w")`*border-right-width: %arg;`,l("b.s")`*border-style: %arg;`,l("b.t")`*border-top: %arg;`,l("b.t.c")`*border-top-color: %arg;`,l("b.t.s")`*border-top-style: %arg;`,l("b.t.w")`*border-top-width: %arg;`,l("b.w")`*border-width: %arg;`,l("b.x")`*border-left: %arg; *border-right: %arg;`,l("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,l("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,l("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,l("b.y")`*border-top: %arg; *border-bottom: %arg;`,l("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,l("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,l("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,l("bg")`*background: %arg;`,l("bg.att")`*background-attachment: %arg;`,l("bg.c")`*background-color: %arg;`,l("bg.img")`*background-image: %arg;`,l("bg.pos")`*background-position: %arg;`,l("bg.rep")`*background-repeat: %arg;`,l("bg.sz")`*background-size: %arg;`,l("c")`*color: %arg;`,l("col")`*grid-column: %arg;`,l("cur")`*cursor: %arg;`,l("disp")`*display: %arg;`,l("fl.basis")`*flex-basis: %arg;`,l("fl.cross")`*align-items: %arg;`,l("fl.dir")`*flex-direction: %arg;`,l("fl.flow")`*flex-flow: %arg;`,l("fl.grow")`*flex-grow: %arg;`,l("fl.main")`*justify-content: %arg;`,l("fl.shrink")`*flex-shrink: %arg;`,l("fl.size")`*flex: %arg;`,l("fl.wr")`*flex-wrap: %arg;`,l("font")`*font-family: %arg;`,l("gap")`*gap: %arg;`,l("gap.col")`*column-gap: %arg;`,l("gap.row")`*row-gap: %arg;`,l("gr.areas")`*grid-template-areas: %arg;`,l("gr.cols")`*grid-template-columns: %arg;`,l("gr.cols.a")`*grid-auto-columns: %arg;`,l("gr.flow")`*grid-auto-flow: %arg;`,l("gr.rows")`*grid-template-rows: %arg;`,l("gr.rows.a")`*grid-auto-rows: %arg;`,l("h")`*height: %arg;`,l("h.max")`*max-height: %arg;`,l("h.min")`*min-height: %arg;`,l("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,l("inset.x")`*left: %arg; *right: %arg;`,l("inset.y")`*top: %arg; *bottom: %arg;`,l("m")`*margin: %arg;`,l("m.b")`*margin-bottom: %arg;`,l("m.l")`*margin-left: %arg;`,l("m.r")`*margin-right: %arg;`,l("m.t")`*margin-top: %arg;`,l("m.x")`*margin-left: %arg; *margin-right: %arg;`,l("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,l("o")`*opacity: %arg;`,l("outln")`*outline: %arg;`,l("over")`*overflow: %arg;`,l("over.x")`*overflow-x: %arg;`,l("over.y")`*overflow-y: %arg;`,l("p")`*padding: %arg;`,l("p.b")`*padding-bottom: %arg;`,l("p.l")`*padding-left: %arg;`,l("p.r")`*padding-right: %arg;`,l("p.t")`*padding-top: %arg;`,l("p.x")`*padding-left: %arg; *padding-right: %arg;`,l("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,l("pos")`*position: %arg;`,l("pos.abs")`*position: absolute;`,l("pos.fix")`*position: fixed;`,l("pos.rel")`*position: relative;`,l("pos.stick")`*position: sticky;`,l("r")`*border-radius: %arg;`,l("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.bl")`*border-bottom-left-radius: %arg;`,l("r.br")`*border-bottom-right-radius: %arg;`,l("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,l("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,l("r.tl")`*border-top-left-radius: %arg;`,l("r.tr")`*border-top-right-radius: %arg;`,l("row")`*grid-row: %arg;`,l("sel")`*user-select: %arg;`,l("self.cross")`*align-self: %arg;`,l("self.main")`*justify-self: %arg;`,l("sh.box")`*box-shadow: %arg;`,l("sh.text")`*text-shadow: %arg;`,l("t.a")`*text-align: %arg;`,l("t.br")`*word-break: %arg;`,l("t.c")`*color: %arg;`,l("t.deco")`*text-decoration: %arg;`,l("t.lh")`*line-height: %arg;`,l("t.over")`*text-overflow: %arg;`,l("t.st")`*font-style: %arg;`,l("t.sz")`*font-size: %arg;`,l("t.tf")`*text-transform: %arg;`,l("t.var")`*font-variant: %arg;`,l("t.wrap")`*word-wrap: %arg;`,l("t.ws")`*white-space: %arg;`,l("t.wt")`*font-weight: %arg;`,l("tf")`*transform: %arg;`,l("tf.o")`*transform-origin: %arg;`,l("tf.p")`*perspective: %arg;`,l("tr")`*transition: %arg;`,l("v.a")`*vertical-align: %arg;`,l("vis")`*visibility: %arg;`,l("w")`*width: %arg;`,l("w.max")`*max-width: %arg;`,l("w.min")`*min-width: %arg;`,l("x")`*left: %arg;`,l("-x")`*right: %arg;`,l("y")`*top: %arg;`,l("-y")`*bottom: %arg;`,l("z")`*z-index: %arg;`,l("fl.cn")`fl.cross: center; fl.main: center;`,l("fl.cn.cross")`fl.cross: center;`,l("fl.cn.main")`fl.main: center;`,l("flex")`disp: flex; fl.dir: %arg;`,l("grid")`disp: grid; gr.flow: %arg;`,l("hide")`disp: none;`,l("invis")`vis: hidden;`,l("sticky")`pos: sticky; y: 0px; z: +1;`,l("adorn")`disp: flex; fl.cn; p: 4px;`,l("pad.compact")`p: 0px 4px;`,l("variant.outline")`b.w: 1px;`,l("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,l("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,l("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,l("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,l("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,l("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,l("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const m=e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)},x={},v=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${v(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),w=(e,...t)=>{const r=m(`${Date.now()}:${Math.random().toString(16)}`);return l(r)(e,...t)},y=p.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")`
|
|
1
|
+
const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===t.substr(N,o)?(N+=o,r):e},a=r=>()=>{const o=t.charAt(N);return!1!==r.test(o)?(N+=1,o):e};let n=null;const s=o("@"),i=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),b=o("}"),f=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=N;let r=null,o=null;return(r=j())===e||(o=z())===e?(N=t,e):[r,o]},y=()=>{const r=N;let o=null,a=null;return(o=m())===e||(a=(()=>{const r=N,o=N;for(;x()!==e;);return N-o==0?e:t.slice(r,N)})())===e?(N=r,e):[o,a]},k=()=>{n="rules";let t=N,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,j()===e)return N=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return(t=$())!==e||(t=A())!==e||(t=E())!==e||(t=L())!==e?t:e},$=()=>{n="rule$0";let t=N,r=null;if((r=S())===e)return N=t,e;return r},A=()=>{n="rule$1";let t=N,r=null;if((r=q())===e)return N=t,e;return r},E=()=>{n="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},L=()=>{n="rule$3";let t=N,r=null;if((r=V())===e)return N=t,e;return r},S=()=>{n="variable";let r=N,o=null,a=null;if(s()===e)return N=r,e;if((o=M())===e)return N=r,e;if(i()===e)return N=r,e;if(j()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},q=()=>{n="css";let r=N,o=null,a=null;if(d()===e)return N=r,e;if((o=M())===e)return N=r,e;if(i()===e)return N=r,e;if(j()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},M=()=>{n="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return o},C=()=>{n="subrule";let r=N,o=null,a=null;if(h()===e)return N=r,e;if(j()===e)return N=r,e;if((o=(()=>{const r=N,o=N;for(;u()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(g()===e)return N=r,e;if((a=k())===e)return N=r,e;if(b()===e)return N=r,e;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},V=()=>{n="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;f()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;const s=(()=>{const t=N;let r=null,o=null,a=null;return(r=i())===e||(o=j())===e||(a=T())===e?(N=t,e):[r,o,a]})();if(a=s===e?null:s,c()===e)return N=r,e;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},T=()=>{let t=null;return(t=I())!==e||(t=P())!==e?t:e},I=()=>{n="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},P=()=>{n="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},j=()=>{for(n="_";v()!==e;);};let N=0;const H=(()=>{n="$";let t=N,r=null;if((r=k())===e)return N=t,e;return r})();return N!==t.length?(console.log("last",n),console.log("@",N),console.log(t.slice(N-10,N+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)s(o,t,r);return t},n=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),s=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${n(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${n(e.value)};`);if("macro"===e.type){const o=i[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,s]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...s.map((t=>n(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o)},i={},l=e=>(t,...r)=>i[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...n)=>{const s=o(a,...n),i=c(s).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${i.join("\n")} }`;r.sheet.insertRule(l)};const p={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},h={},u=async(e,t)=>{const r=h[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${p.origin}/icon/${t}.woff?v${p.iconVersion})`);h[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),u(e,t)},g=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&u(e,t)},b={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(g)}))},attributes(e){g(e.target)}};new MutationObserver((e=>e.forEach((e=>b[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const f=(...e)=>{for(const t of e)u(null,t)};l("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,l("area")`*grid-area: %arg;`,l("b")`*border: %arg;`,l("b.b")`*border-bottom: %arg;`,l("b.b.c")`*border-bottom-color: %arg;`,l("b.b.s")`*border-bottom-style: %arg;`,l("b.b.w")`*border-bottom-width: %arg;`,l("b.c")`*border-color: %arg;`,l("b.l")`*border-left: %arg;`,l("b.l.c")`*border-left-color: %arg;`,l("b.l.s")`*border-left-style: %arg;`,l("b.l.w")`*border-left-width: %arg;`,l("b.r")`*border-right: %arg;`,l("b.r.c")`*border-right-color: %arg;`,l("b.r.s")`*border-right-style: %arg;`,l("b.r.w")`*border-right-width: %arg;`,l("b.s")`*border-style: %arg;`,l("b.t")`*border-top: %arg;`,l("b.t.c")`*border-top-color: %arg;`,l("b.t.s")`*border-top-style: %arg;`,l("b.t.w")`*border-top-width: %arg;`,l("b.w")`*border-width: %arg;`,l("b.x")`*border-left: %arg; *border-right: %arg;`,l("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,l("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,l("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,l("b.y")`*border-top: %arg; *border-bottom: %arg;`,l("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,l("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,l("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,l("bg")`*background: %arg;`,l("bg.att")`*background-attachment: %arg;`,l("bg.c")`*background-color: %arg;`,l("bg.img")`*background-image: %arg;`,l("bg.pos")`*background-position: %arg;`,l("bg.rep")`*background-repeat: %arg;`,l("bg.sz")`*background-size: %arg;`,l("c")`*color: %arg;`,l("col")`*grid-column: %arg;`,l("cur")`*cursor: %arg;`,l("disp")`*display: %arg;`,l("fl.basis")`*flex-basis: %arg;`,l("fl.cross")`*align-items: %arg;`,l("fl.dir")`*flex-direction: %arg;`,l("fl.flow")`*flex-flow: %arg;`,l("fl.grow")`*flex-grow: %arg;`,l("fl.main")`*justify-content: %arg;`,l("fl.shrink")`*flex-shrink: %arg;`,l("fl.size")`*flex: %arg;`,l("fl.wr")`*flex-wrap: %arg;`,l("font")`*font-family: %arg;`,l("gap")`*gap: %arg;`,l("gap.col")`*column-gap: %arg;`,l("gap.row")`*row-gap: %arg;`,l("gr.areas")`*grid-template-areas: %arg;`,l("gr.cols")`*grid-template-columns: %arg;`,l("gr.cols.a")`*grid-auto-columns: %arg;`,l("gr.flow")`*grid-auto-flow: %arg;`,l("gr.rows")`*grid-template-rows: %arg;`,l("gr.rows.a")`*grid-auto-rows: %arg;`,l("h")`*height: %arg;`,l("h.max")`*max-height: %arg;`,l("h.min")`*min-height: %arg;`,l("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,l("inset.x")`*left: %arg; *right: %arg;`,l("inset.y")`*top: %arg; *bottom: %arg;`,l("m")`*margin: %arg;`,l("m.b")`*margin-bottom: %arg;`,l("m.l")`*margin-left: %arg;`,l("m.r")`*margin-right: %arg;`,l("m.t")`*margin-top: %arg;`,l("m.x")`*margin-left: %arg; *margin-right: %arg;`,l("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,l("o")`*opacity: %arg;`,l("outln")`*outline: %arg;`,l("over")`*overflow: %arg;`,l("over.x")`*overflow-x: %arg;`,l("over.y")`*overflow-y: %arg;`,l("p")`*padding: %arg;`,l("p.b")`*padding-bottom: %arg;`,l("p.l")`*padding-left: %arg;`,l("p.r")`*padding-right: %arg;`,l("p.t")`*padding-top: %arg;`,l("p.x")`*padding-left: %arg; *padding-right: %arg;`,l("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,l("pos")`*position: %arg;`,l("pos.abs")`*position: absolute;`,l("pos.fix")`*position: fixed;`,l("pos.rel")`*position: relative;`,l("pos.stick")`*position: sticky;`,l("r")`*border-radius: %arg;`,l("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.bl")`*border-bottom-left-radius: %arg;`,l("r.br")`*border-bottom-right-radius: %arg;`,l("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,l("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,l("r.tl")`*border-top-left-radius: %arg;`,l("r.tr")`*border-top-right-radius: %arg;`,l("row")`*grid-row: %arg;`,l("sel")`*user-select: %arg;`,l("self.cross")`*align-self: %arg;`,l("self.main")`*justify-self: %arg;`,l("sh.box")`*box-shadow: %arg;`,l("sh.text")`*text-shadow: %arg;`,l("t.a")`*text-align: %arg;`,l("t.br")`*word-break: %arg;`,l("t.c")`*color: %arg;`,l("t.deco")`*text-decoration: %arg;`,l("t.lh")`*line-height: %arg;`,l("t.over")`*text-overflow: %arg;`,l("t.st")`*font-style: %arg;`,l("t.sz")`*font-size: %arg;`,l("t.tf")`*text-transform: %arg;`,l("t.var")`*font-variant: %arg;`,l("t.wrap")`*word-wrap: %arg;`,l("t.ws")`*white-space: %arg;`,l("t.wt")`*font-weight: %arg;`,l("tf")`*transform: %arg;`,l("tf.o")`*transform-origin: %arg;`,l("tf.p")`*perspective: %arg;`,l("tr")`*transition: %arg;`,l("v.a")`*vertical-align: %arg;`,l("vis")`*visibility: %arg;`,l("w")`*width: %arg;`,l("w.max")`*max-width: %arg;`,l("w.min")`*min-width: %arg;`,l("x")`*left: %arg;`,l("-x")`*right: %arg;`,l("y")`*top: %arg;`,l("-y")`*bottom: %arg;`,l("z")`*z-index: %arg;`,l("fl.cn")`fl.cross: center; fl.main: center;`,l("fl.cn.cross")`fl.cross: center;`,l("fl.cn.main")`fl.main: center;`,l("flex")`disp: flex; fl.dir: %arg;`,l("grid")`disp: grid; gr.flow: %arg;`,l("hide")`disp: none;`,l("invis")`vis: hidden;`,l("sticky")`pos: sticky; y: 0px; z: +1;`,l("adorn")`disp: flex; fl.cn; p: 4px;`,l("pad.compact")`p: 0px 4px;`,l("variant.outline")`b.w: 1px;`,l("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,l("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,l("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,l("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,l("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,l("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,l("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const m=e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)},x={},v=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${v(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),w=(e,...t)=>{const r=m(`${Date.now()}:${Math.random().toString(16)}`);return l(r)(e,...t)},y=p.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")`
|
|
2
2
|
font: @font;
|
|
3
3
|
|
|
4
4
|
@sub-pixel-offset: ${k?1:0}px;
|
|
@@ -494,7 +494,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
494
494
|
*pointer-events: none;
|
|
495
495
|
*filter: saturation(30%) brightness(0.7);
|
|
496
496
|
}
|
|
497
|
-
`;const
|
|
497
|
+
`;const q=z`
|
|
498
498
|
<style>
|
|
499
499
|
:host {
|
|
500
500
|
position: fixed;
|
|
@@ -524,7 +524,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
524
524
|
<ws-modal-overlay>
|
|
525
525
|
</ws-modal-overlay>
|
|
526
526
|
<slot></slot>
|
|
527
|
-
`;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(
|
|
527
|
+
`;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault(),!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),d("ws-paper")`
|
|
528
528
|
@color: @mono;
|
|
529
529
|
|
|
530
530
|
${E("@layer-surface","@layer-border")}
|
|
@@ -550,7 +550,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
550
550
|
*content: "";
|
|
551
551
|
area: footer;
|
|
552
552
|
}
|
|
553
|
-
`;const
|
|
553
|
+
`;const M=z`
|
|
554
554
|
<style>
|
|
555
555
|
:host {
|
|
556
556
|
--anim-time: 0ms;
|
|
@@ -563,7 +563,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
563
563
|
<slot name="popover"></slot>
|
|
564
564
|
</ws-popover-position>
|
|
565
565
|
</ws-modal>
|
|
566
|
-
`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(
|
|
566
|
+
`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(M()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),this.#t.addEventListener("click",(e=>e.stopPropagation())),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const C=z`
|
|
567
567
|
<style>
|
|
568
568
|
@keyframes busy-load {
|
|
569
569
|
from {
|
|
@@ -614,7 +614,7 @@ div::after {
|
|
|
614
614
|
</style>
|
|
615
615
|
|
|
616
616
|
<div></div>
|
|
617
|
-
`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(
|
|
617
|
+
`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(C()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value","")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer","")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min","")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max","")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy","")}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),d("ws-screen")`
|
|
618
618
|
@screen-width: min(720px, 100%);
|
|
619
619
|
@pad-x: auto;
|
|
620
620
|
@pad-y: auto;
|
|
@@ -641,7 +641,7 @@ div::after {
|
|
|
641
641
|
! & > :where(*) {
|
|
642
642
|
area: content;
|
|
643
643
|
}
|
|
644
|
-
`;const
|
|
644
|
+
`;const V="caret-down-filled";f(V),d("ws-option")`
|
|
645
645
|
${E("@layer-element","@layer-fill")}
|
|
646
646
|
|
|
647
647
|
disp: block;
|
|
@@ -682,7 +682,7 @@ div::after {
|
|
|
682
682
|
:host {
|
|
683
683
|
--color: var(--mono);
|
|
684
684
|
--modal-color: transparent;
|
|
685
|
-
--max-height:
|
|
685
|
+
--max-height: 250px;
|
|
686
686
|
--core-color: hsl(var(--color), var(--layer-border));
|
|
687
687
|
--alt-color: hsl(var(--color), var(--layer-surface));
|
|
688
688
|
display: inline-grid;
|
|
@@ -703,6 +703,7 @@ div::after {
|
|
|
703
703
|
box-sizing: border-box;
|
|
704
704
|
border: 1px solid var(--core-color);
|
|
705
705
|
border-radius: var(--base-radius);
|
|
706
|
+
color: hsl(var(--mono), var(--layer-text));
|
|
706
707
|
display: grid;
|
|
707
708
|
position: absolute;
|
|
708
709
|
max-height: var(--max-height);
|
|
@@ -711,31 +712,30 @@ div::after {
|
|
|
711
712
|
grid-template-columns: 1fr;
|
|
712
713
|
border-radius: var(--base-radius);
|
|
713
714
|
box-shadow: 0px 2px 4px var(--shadow-color);
|
|
714
|
-
/* visibility: none; */
|
|
715
715
|
opacity: 0;
|
|
716
716
|
transform: translateY(10px);
|
|
717
717
|
transition:
|
|
718
|
-
/* visibility var(--anim-time) linear, */
|
|
719
718
|
opacity var(--anim-time) linear,
|
|
720
719
|
transform var(--anim-time) linear
|
|
721
720
|
;
|
|
721
|
+
|
|
722
|
+
--sign: sign(var(--y) - 100vh + var(--opt-h));
|
|
723
|
+
--pos: calc(
|
|
724
|
+
var(--y)
|
|
725
|
+
- calc(
|
|
726
|
+
max(var(--sign), 0)* (var(--opt-h) - var(--h))
|
|
727
|
+
)
|
|
728
|
+
);
|
|
729
|
+
top: var(--pos);
|
|
730
|
+
left: var(--x);
|
|
731
|
+
width: var(--w);
|
|
732
|
+
transform-origin: top center;
|
|
722
733
|
}
|
|
723
734
|
:host([open]) ws-options {
|
|
724
735
|
transform: translateY(0);
|
|
725
736
|
opacity: 1;
|
|
726
737
|
visibility: visible;
|
|
727
738
|
}
|
|
728
|
-
ws-options {
|
|
729
|
-
top: calc(var(--y) + var(--h));
|
|
730
|
-
left: var(--x);
|
|
731
|
-
width: var(--w);
|
|
732
|
-
transform-origin: top center;
|
|
733
|
-
}
|
|
734
|
-
:host([direction="up"]) ws-options {
|
|
735
|
-
top: unset;
|
|
736
|
-
bottom: calc(100% - var(--y));
|
|
737
|
-
transform-origin: bottom center;
|
|
738
|
-
}
|
|
739
739
|
|
|
740
740
|
value-display {
|
|
741
741
|
display: grid;
|
|
@@ -756,10 +756,13 @@ div::after {
|
|
|
756
756
|
}
|
|
757
757
|
ws-sel-caret::before {
|
|
758
758
|
display: block;
|
|
759
|
-
font-family: ws-icon-${
|
|
759
|
+
font-family: ws-icon-${V};
|
|
760
760
|
content: attr(data-icon);
|
|
761
761
|
}
|
|
762
762
|
slot[name="selected"] {
|
|
763
|
+
display: none;
|
|
764
|
+
}
|
|
765
|
+
slot[name="display"] {
|
|
763
766
|
display: flex;
|
|
764
767
|
align-items: center;
|
|
765
768
|
}
|
|
@@ -781,7 +784,8 @@ div::after {
|
|
|
781
784
|
<slot name="selected">
|
|
782
785
|
<ws-selected>No Selection</ws-selected>
|
|
783
786
|
</slot>
|
|
784
|
-
<
|
|
787
|
+
<slot name="display"></slot>
|
|
788
|
+
<ws-sel-caret data-icon="${V}"></ws-sel-caret>
|
|
785
789
|
</value-display>
|
|
786
790
|
<ws-popover>
|
|
787
791
|
<slot slot="popover" name="options">
|
|
@@ -790,7 +794,7 @@ div::after {
|
|
|
790
794
|
</ws-options>
|
|
791
795
|
</slot>
|
|
792
796
|
</ws-popover>
|
|
793
|
-
`,
|
|
797
|
+
`,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#n=-1;#s=null;#i=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&!0===e.hasAttribute("selected")))??this.#s,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r)}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open")}connectedCallback(){this.display=document.createElement("ws-display"),this.display.slot="display",this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#i=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#i.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#n}set selectedIndex(e){this.#s?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#s=t[r]??null,this.#n=r,this.#s?.setAttribute("selected",""),this.#a=this.#s?.value??this.#s?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#s?.getAttribute("preview")??this.#s?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#s?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),d("table[data-ws]")`
|
|
794
798
|
@color: @primary;
|
|
795
799
|
|
|
796
800
|
*border-collapse: separate;
|
|
@@ -1002,8 +1006,8 @@ div::after {
|
|
|
1002
1006
|
! &[pos$="-right"] {
|
|
1003
1007
|
-x: 20px;
|
|
1004
1008
|
}
|
|
1005
|
-
`,f("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const
|
|
1006
|
-
${
|
|
1009
|
+
`,f("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const P='\n @color: var(--toggle-color, @primary);\n @size: 20px;\n\n @core-color: hsl(@color, @layer-element);\n\n pos: relative;\n w: @size;\n h: @size;\n appr: none;\n m: 0px;\n t.c: @core-color;\n v.a: middle;\n\n ! &::after {\n *content: "";\n pos: absolute;\n t.sz: calc(@size - 2px);\n *speak: none;\n t.st: normal;\n t.wt: 400;\n t.var: normal;\n t.tf: none;\n y: 50%;\n x: 50%;\n w: @size;\n h: @size;\n tf: translate(-50%, -50%);\n disp: flex;\n fl.cross: center;\n fl.main: center;\n over: hidden;\n }\n';d(":where(input[data-ws][type=checkbox]:not([switch]))")`
|
|
1010
|
+
${P}
|
|
1007
1011
|
|
|
1008
1012
|
! &::after {
|
|
1009
1013
|
font: ws-icon-square-dashed;
|
|
@@ -1014,7 +1018,7 @@ div::after {
|
|
|
1014
1018
|
*content: "square-check-filled";
|
|
1015
1019
|
}
|
|
1016
1020
|
`,d(":where(input[data-ws][type=radio])")`
|
|
1017
|
-
${
|
|
1021
|
+
${P}
|
|
1018
1022
|
|
|
1019
1023
|
! &::after {
|
|
1020
1024
|
font: ws-icon-circle;
|
|
@@ -1158,4 +1162,4 @@ div::after {
|
|
|
1158
1162
|
url(${p.origin}/font/roboto.woff2?v${p.version})
|
|
1159
1163
|
format("woff2")
|
|
1160
1164
|
;
|
|
1161
|
-
`;const
|
|
1165
|
+
`;const j=e=>{const t=(e=>{if(""===e||null===e)return;const t=c(o({raw:[e]})),a=m(t.join("\n"));if(x[a]=(x[a]??0)+1,x[a]>1)return a;const n=t.map((e=>e.replaceAll("&",`[data-wsid="${a}"]`)));return r.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,r.sheet.cssRules.length),a})(e.dataset?.ws??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)j(e)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))j(e);export{d as component,w as localMacro,l as macro,f as preloadIcons,y as version,v as x};
|
package/dist/ws-nc-es5.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var ws=function(r){"use strict";const t=Symbol("no match"),e=(r,e)=>{const o=e=>{const o=e.length;return()=>e===r.substr(R,o)?(R+=o,e):t},a=e=>()=>{const o=r.charAt(R);return!1!==e.test(o)?(R+=1,o):t};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const r=R;let e=null,o=null;return(e=q())===t||(o=z())===t?(R=r,t):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===t||(a=(()=>{const e=R,o=R;for(;w()!==t;);return R-o==0?t:r.slice(e,R)})())===t?(R=e,t):[o,a]},$=()=>{n="rules";let r=R,e=null;const o=[];let a=null;for(;(a=y())!==t;)o.push(a);if(e=o,q()===t)return R=r,t;return e.map((r=>r[1]))},z=()=>{let r=null;return(r=k())!==t||(r=j())!==t||(r=A())!==t||(r=S())!==t?r:t},k=()=>{n="rule$0";let r=R,e=null;if((e=E())===t)return R=r,t;return e},j=()=>{n="rule$1";let r=R,e=null;if((e=N())===t)return R=r,t;return e},A=()=>{n="rule$2";let r=R,e=null;if((e=M())===t)return R=r,t;return e},S=()=>{n="rule$3";let r=R,e=null;if((e=V())===t)return R=r,t;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return o},M=()=>{n="subrule";let e=R,o=null,a=null;if(d()===t)return R=e,t;if(q()===t)return R=e,t;if((o=(()=>{const e=R,o=R;for(;f()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(b()===t)return R=e,t;if((a=$())===t)return R=e,t;if(p()===t)return R=e,t;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},V=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;const l=(()=>{const r=R;let e=null,o=null,a=null;return(e=i())===t||(o=q())===t||(a=F())===t?(R=r,t):[e,o,a]})();if(a=l===t?null:l,g()===t)return R=e,t;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},F=()=>{let r=null;return(r=L())!==t||(r=_())!==t?r:t},L=()=>{n="macroValue$0";let r=null;const e=[];let o=null;for(;(o=v())!==t;)e.push(o);if(0===e.length)return t;r=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(r)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==t;);};let R=0;const C=(()=>{n="$";let r=R,e=null;if((e=$())===t)return R=r,t;return e})();return R!==r.length?(console.log("last",n),console.log("@",R),console.log(r.slice(R-10,R+10)),new Error("End of input not found")):C},o=document.createElement("style");o.setAttribute("data-name","windstorm-generated"),o.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(o);const a=(r,...t)=>{const o=String.raw(r,...t);return n(e(o),{"&":[]},"&")},n=(r,t,e)=>{for(const o of r)i(o,t,e);return t},l=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),i=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${l(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${l(r.value)};`);if("macro"===r.type){const o=s[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,n]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...n.map((t=>l(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],n(r.rules,t,o)},s={},g=r=>(t,...e)=>s[r]=a(t,...e),u=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]);const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.0",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});g("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,g("area")`*grid-area: %arg;`,g("b")`*border: %arg;`,g("b.b")`*border-bottom: %arg;`,g("b.b.c")`*border-bottom-color: %arg;`,g("b.b.s")`*border-bottom-style: %arg;`,g("b.b.w")`*border-bottom-width: %arg;`,g("b.c")`*border-color: %arg;`,g("b.l")`*border-left: %arg;`,g("b.l.c")`*border-left-color: %arg;`,g("b.l.s")`*border-left-style: %arg;`,g("b.l.w")`*border-left-width: %arg;`,g("b.r")`*border-right: %arg;`,g("b.r.c")`*border-right-color: %arg;`,g("b.r.s")`*border-right-style: %arg;`,g("b.r.w")`*border-right-width: %arg;`,g("b.s")`*border-style: %arg;`,g("b.t")`*border-top: %arg;`,g("b.t.c")`*border-top-color: %arg;`,g("b.t.s")`*border-top-style: %arg;`,g("b.t.w")`*border-top-width: %arg;`,g("b.w")`*border-width: %arg;`,g("b.x")`*border-left: %arg; *border-right: %arg;`,g("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,g("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,g("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,g("b.y")`*border-top: %arg; *border-bottom: %arg;`,g("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,g("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,g("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,g("bg")`*background: %arg;`,g("bg.att")`*background-attachment: %arg;`,g("bg.c")`*background-color: %arg;`,g("bg.img")`*background-image: %arg;`,g("bg.pos")`*background-position: %arg;`,g("bg.rep")`*background-repeat: %arg;`,g("bg.sz")`*background-size: %arg;`,g("c")`*color: %arg;`,g("col")`*grid-column: %arg;`,g("cur")`*cursor: %arg;`,g("disp")`*display: %arg;`,g("fl.basis")`*flex-basis: %arg;`,g("fl.cross")`*align-items: %arg;`,g("fl.dir")`*flex-direction: %arg;`,g("fl.flow")`*flex-flow: %arg;`,g("fl.grow")`*flex-grow: %arg;`,g("fl.main")`*justify-content: %arg;`,g("fl.shrink")`*flex-shrink: %arg;`,g("fl.size")`*flex: %arg;`,g("fl.wr")`*flex-wrap: %arg;`,g("font")`*font-family: %arg;`,g("gap")`*gap: %arg;`,g("gap.col")`*column-gap: %arg;`,g("gap.row")`*row-gap: %arg;`,g("gr.areas")`*grid-template-areas: %arg;`,g("gr.cols")`*grid-template-columns: %arg;`,g("gr.cols.a")`*grid-auto-columns: %arg;`,g("gr.flow")`*grid-auto-flow: %arg;`,g("gr.rows")`*grid-template-rows: %arg;`,g("gr.rows.a")`*grid-auto-rows: %arg;`,g("h")`*height: %arg;`,g("h.max")`*max-height: %arg;`,g("h.min")`*min-height: %arg;`,g("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,g("inset.x")`*left: %arg; *right: %arg;`,g("inset.y")`*top: %arg; *bottom: %arg;`,g("m")`*margin: %arg;`,g("m.b")`*margin-bottom: %arg;`,g("m.l")`*margin-left: %arg;`,g("m.r")`*margin-right: %arg;`,g("m.t")`*margin-top: %arg;`,g("m.x")`*margin-left: %arg; *margin-right: %arg;`,g("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,g("o")`*opacity: %arg;`,g("outln")`*outline: %arg;`,g("over")`*overflow: %arg;`,g("over.x")`*overflow-x: %arg;`,g("over.y")`*overflow-y: %arg;`,g("p")`*padding: %arg;`,g("p.b")`*padding-bottom: %arg;`,g("p.l")`*padding-left: %arg;`,g("p.r")`*padding-right: %arg;`,g("p.t")`*padding-top: %arg;`,g("p.x")`*padding-left: %arg; *padding-right: %arg;`,g("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,g("pos")`*position: %arg;`,g("pos.abs")`*position: absolute;`,g("pos.fix")`*position: fixed;`,g("pos.rel")`*position: relative;`,g("pos.stick")`*position: sticky;`,g("r")`*border-radius: %arg;`,g("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.bl")`*border-bottom-left-radius: %arg;`,g("r.br")`*border-bottom-right-radius: %arg;`,g("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,g("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,g("r.tl")`*border-top-left-radius: %arg;`,g("r.tr")`*border-top-right-radius: %arg;`,g("row")`*grid-row: %arg;`,g("sel")`*user-select: %arg;`,g("self.cross")`*align-self: %arg;`,g("self.main")`*justify-self: %arg;`,g("sh.box")`*box-shadow: %arg;`,g("sh.text")`*text-shadow: %arg;`,g("t.a")`*text-align: %arg;`,g("t.br")`*word-break: %arg;`,g("t.c")`*color: %arg;`,g("t.deco")`*text-decoration: %arg;`,g("t.lh")`*line-height: %arg;`,g("t.over")`*text-overflow: %arg;`,g("t.st")`*font-style: %arg;`,g("t.sz")`*font-size: %arg;`,g("t.tf")`*text-transform: %arg;`,g("t.var")`*font-variant: %arg;`,g("t.wrap")`*word-wrap: %arg;`,g("t.ws")`*white-space: %arg;`,g("t.wt")`*font-weight: %arg;`,g("tf")`*transform: %arg;`,g("tf.o")`*transform-origin: %arg;`,g("tf.p")`*perspective: %arg;`,g("tr")`*transition: %arg;`,g("v.a")`*vertical-align: %arg;`,g("vis")`*visibility: %arg;`,g("w")`*width: %arg;`,g("w.max")`*max-width: %arg;`,g("w.min")`*min-width: %arg;`,g("x")`*left: %arg;`,g("-x")`*right: %arg;`,g("y")`*top: %arg;`,g("-y")`*bottom: %arg;`,g("z")`*z-index: %arg;`,g("fl.cn")`fl.cross: center; fl.main: center;`,g("fl.cn.cross")`fl.cross: center;`,g("fl.cn.main")`fl.main: center;`,g("flex")`disp: flex; fl.dir: %arg;`,g("grid")`disp: grid; gr.flow: %arg;`,g("hide")`disp: none;`,g("invis")`vis: hidden;`,g("sticky")`pos: sticky; y: 0px; z: +1;`,g("adorn")`disp: flex; fl.cn; p: 4px;`,g("pad.compact")`p: 0px 4px;`,g("variant.outline")`b.w: 1px;`,g("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,g("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,g("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,g("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,g("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,g("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,g("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const m=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},h={},w=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${w(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),x=c.version,y=r=>{const t=(r=>{if(""===r||null===r)return;const t=u(a({raw:[r]})),e=m(t.join("\n"));if(h[e]=(h[e]??0)+1,h[e]>1)return e;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${e}"]`)));return o.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,o.sheet.cssRules.length),e})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)y(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))y(r);return r.component=(r,t="ws.custom")=>(e,...n)=>{const l=a(e,...n),i=u(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;o.sheet.insertRule(s)},r.localMacro=(r,...t)=>{const e=m(`${Date.now()}:${Math.random().toString(16)}`);return g(e)(r,...t)},r.macro=g,r.preloadIcons=(...r)=>{for(const t of r)f(null,t)},r.version=x,r.x=w,r}({});
|
|
1
|
+
var ws=function(r){"use strict";const t=Symbol("no match"),e=(r,e)=>{const o=e=>{const o=e.length;return()=>e===r.substr(R,o)?(R+=o,e):t},a=e=>()=>{const o=r.charAt(R);return!1!==e.test(o)?(R+=1,o):t};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const r=R;let e=null,o=null;return(e=q())===t||(o=z())===t?(R=r,t):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===t||(a=(()=>{const e=R,o=R;for(;w()!==t;);return R-o==0?t:r.slice(e,R)})())===t?(R=e,t):[o,a]},$=()=>{n="rules";let r=R,e=null;const o=[];let a=null;for(;(a=y())!==t;)o.push(a);if(e=o,q()===t)return R=r,t;return e.map((r=>r[1]))},z=()=>{let r=null;return(r=k())!==t||(r=j())!==t||(r=A())!==t||(r=S())!==t?r:t},k=()=>{n="rule$0";let r=R,e=null;if((e=E())===t)return R=r,t;return e},j=()=>{n="rule$1";let r=R,e=null;if((e=N())===t)return R=r,t;return e},A=()=>{n="rule$2";let r=R,e=null;if((e=M())===t)return R=r,t;return e},S=()=>{n="rule$3";let r=R,e=null;if((e=V())===t)return R=r,t;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return o},M=()=>{n="subrule";let e=R,o=null,a=null;if(d()===t)return R=e,t;if(q()===t)return R=e,t;if((o=(()=>{const e=R,o=R;for(;f()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(b()===t)return R=e,t;if((a=$())===t)return R=e,t;if(p()===t)return R=e,t;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},V=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;const l=(()=>{const r=R;let e=null,o=null,a=null;return(e=i())===t||(o=q())===t||(a=F())===t?(R=r,t):[e,o,a]})();if(a=l===t?null:l,g()===t)return R=e,t;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},F=()=>{let r=null;return(r=L())!==t||(r=_())!==t?r:t},L=()=>{n="macroValue$0";let r=null;const e=[];let o=null;for(;(o=v())!==t;)e.push(o);if(0===e.length)return t;r=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(r)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==t;);};let R=0;const C=(()=>{n="$";let r=R,e=null;if((e=$())===t)return R=r,t;return e})();return R!==r.length?(console.log("last",n),console.log("@",R),console.log(r.slice(R-10,R+10)),new Error("End of input not found")):C},o=document.createElement("style");o.setAttribute("data-name","windstorm-generated"),o.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(o);const a=(r,...t)=>{const o=String.raw(r,...t);return n(e(o),{"&":[]},"&")},n=(r,t,e)=>{for(const o of r)i(o,t,e);return t},l=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),i=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${l(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${l(r.value)};`);if("macro"===r.type){const o=s[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,n]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...n.map((t=>l(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],n(r.rules,t,o)},s={},g=r=>(t,...e)=>s[r]=a(t,...e),u=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]);const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});g("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,g("area")`*grid-area: %arg;`,g("b")`*border: %arg;`,g("b.b")`*border-bottom: %arg;`,g("b.b.c")`*border-bottom-color: %arg;`,g("b.b.s")`*border-bottom-style: %arg;`,g("b.b.w")`*border-bottom-width: %arg;`,g("b.c")`*border-color: %arg;`,g("b.l")`*border-left: %arg;`,g("b.l.c")`*border-left-color: %arg;`,g("b.l.s")`*border-left-style: %arg;`,g("b.l.w")`*border-left-width: %arg;`,g("b.r")`*border-right: %arg;`,g("b.r.c")`*border-right-color: %arg;`,g("b.r.s")`*border-right-style: %arg;`,g("b.r.w")`*border-right-width: %arg;`,g("b.s")`*border-style: %arg;`,g("b.t")`*border-top: %arg;`,g("b.t.c")`*border-top-color: %arg;`,g("b.t.s")`*border-top-style: %arg;`,g("b.t.w")`*border-top-width: %arg;`,g("b.w")`*border-width: %arg;`,g("b.x")`*border-left: %arg; *border-right: %arg;`,g("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,g("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,g("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,g("b.y")`*border-top: %arg; *border-bottom: %arg;`,g("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,g("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,g("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,g("bg")`*background: %arg;`,g("bg.att")`*background-attachment: %arg;`,g("bg.c")`*background-color: %arg;`,g("bg.img")`*background-image: %arg;`,g("bg.pos")`*background-position: %arg;`,g("bg.rep")`*background-repeat: %arg;`,g("bg.sz")`*background-size: %arg;`,g("c")`*color: %arg;`,g("col")`*grid-column: %arg;`,g("cur")`*cursor: %arg;`,g("disp")`*display: %arg;`,g("fl.basis")`*flex-basis: %arg;`,g("fl.cross")`*align-items: %arg;`,g("fl.dir")`*flex-direction: %arg;`,g("fl.flow")`*flex-flow: %arg;`,g("fl.grow")`*flex-grow: %arg;`,g("fl.main")`*justify-content: %arg;`,g("fl.shrink")`*flex-shrink: %arg;`,g("fl.size")`*flex: %arg;`,g("fl.wr")`*flex-wrap: %arg;`,g("font")`*font-family: %arg;`,g("gap")`*gap: %arg;`,g("gap.col")`*column-gap: %arg;`,g("gap.row")`*row-gap: %arg;`,g("gr.areas")`*grid-template-areas: %arg;`,g("gr.cols")`*grid-template-columns: %arg;`,g("gr.cols.a")`*grid-auto-columns: %arg;`,g("gr.flow")`*grid-auto-flow: %arg;`,g("gr.rows")`*grid-template-rows: %arg;`,g("gr.rows.a")`*grid-auto-rows: %arg;`,g("h")`*height: %arg;`,g("h.max")`*max-height: %arg;`,g("h.min")`*min-height: %arg;`,g("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,g("inset.x")`*left: %arg; *right: %arg;`,g("inset.y")`*top: %arg; *bottom: %arg;`,g("m")`*margin: %arg;`,g("m.b")`*margin-bottom: %arg;`,g("m.l")`*margin-left: %arg;`,g("m.r")`*margin-right: %arg;`,g("m.t")`*margin-top: %arg;`,g("m.x")`*margin-left: %arg; *margin-right: %arg;`,g("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,g("o")`*opacity: %arg;`,g("outln")`*outline: %arg;`,g("over")`*overflow: %arg;`,g("over.x")`*overflow-x: %arg;`,g("over.y")`*overflow-y: %arg;`,g("p")`*padding: %arg;`,g("p.b")`*padding-bottom: %arg;`,g("p.l")`*padding-left: %arg;`,g("p.r")`*padding-right: %arg;`,g("p.t")`*padding-top: %arg;`,g("p.x")`*padding-left: %arg; *padding-right: %arg;`,g("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,g("pos")`*position: %arg;`,g("pos.abs")`*position: absolute;`,g("pos.fix")`*position: fixed;`,g("pos.rel")`*position: relative;`,g("pos.stick")`*position: sticky;`,g("r")`*border-radius: %arg;`,g("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.bl")`*border-bottom-left-radius: %arg;`,g("r.br")`*border-bottom-right-radius: %arg;`,g("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,g("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,g("r.tl")`*border-top-left-radius: %arg;`,g("r.tr")`*border-top-right-radius: %arg;`,g("row")`*grid-row: %arg;`,g("sel")`*user-select: %arg;`,g("self.cross")`*align-self: %arg;`,g("self.main")`*justify-self: %arg;`,g("sh.box")`*box-shadow: %arg;`,g("sh.text")`*text-shadow: %arg;`,g("t.a")`*text-align: %arg;`,g("t.br")`*word-break: %arg;`,g("t.c")`*color: %arg;`,g("t.deco")`*text-decoration: %arg;`,g("t.lh")`*line-height: %arg;`,g("t.over")`*text-overflow: %arg;`,g("t.st")`*font-style: %arg;`,g("t.sz")`*font-size: %arg;`,g("t.tf")`*text-transform: %arg;`,g("t.var")`*font-variant: %arg;`,g("t.wrap")`*word-wrap: %arg;`,g("t.ws")`*white-space: %arg;`,g("t.wt")`*font-weight: %arg;`,g("tf")`*transform: %arg;`,g("tf.o")`*transform-origin: %arg;`,g("tf.p")`*perspective: %arg;`,g("tr")`*transition: %arg;`,g("v.a")`*vertical-align: %arg;`,g("vis")`*visibility: %arg;`,g("w")`*width: %arg;`,g("w.max")`*max-width: %arg;`,g("w.min")`*min-width: %arg;`,g("x")`*left: %arg;`,g("-x")`*right: %arg;`,g("y")`*top: %arg;`,g("-y")`*bottom: %arg;`,g("z")`*z-index: %arg;`,g("fl.cn")`fl.cross: center; fl.main: center;`,g("fl.cn.cross")`fl.cross: center;`,g("fl.cn.main")`fl.main: center;`,g("flex")`disp: flex; fl.dir: %arg;`,g("grid")`disp: grid; gr.flow: %arg;`,g("hide")`disp: none;`,g("invis")`vis: hidden;`,g("sticky")`pos: sticky; y: 0px; z: +1;`,g("adorn")`disp: flex; fl.cn; p: 4px;`,g("pad.compact")`p: 0px 4px;`,g("variant.outline")`b.w: 1px;`,g("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,g("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,g("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,g("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,g("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,g("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,g("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const m=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},h={},w=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${w(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),x=c.version,y=r=>{const t=(r=>{if(""===r||null===r)return;const t=u(a({raw:[r]})),e=m(t.join("\n"));if(h[e]=(h[e]??0)+1,h[e]>1)return e;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${e}"]`)));return o.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,o.sheet.cssRules.length),e})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)y(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))y(r);return r.component=(r,t="ws.custom")=>(e,...n)=>{const l=a(e,...n),i=u(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;o.sheet.insertRule(s)},r.localMacro=(r,...t)=>{const e=m(`${Date.now()}:${Math.random().toString(16)}`);return g(e)(r,...t)},r.macro=g,r.preloadIcons=(...r)=>{for(const t of r)f(null,t)},r.version=x,r.x=w,r}({});
|
package/dist/ws-nc-esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const r=Symbol("no match"),t=(t,e)=>{const o=e=>{const o=e.length;return()=>e===t.substr(R,o)?(R+=o,e):r},a=e=>()=>{const o=t.charAt(R);return!1!==e.test(o)?(R+=1,o):r};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const t=R;let e=null,o=null;return(e=q())===r||(o=z())===r?(R=t,r):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===r||(a=(()=>{const e=R,o=R;for(;w()!==r;);return R-o==0?r:t.slice(e,R)})())===r?(R=e,r):[o,a]},$=()=>{n="rules";let t=R,e=null;const o=[];let a=null;for(;(a=y())!==r;)o.push(a);if(e=o,q()===r)return R=t,r;return e.map((r=>r[1]))},z=()=>{let t=null;return(t=k())!==r||(t=j())!==r||(t=A())!==r||(t=S())!==r?t:r},k=()=>{n="rule$0";let t=R,e=null;if((e=E())===r)return R=t,r;return e},j=()=>{n="rule$1";let t=R,e=null;if((e=N())===r)return R=t,r;return e},A=()=>{n="rule$2";let t=R,e=null;if((e=V())===r)return R=t,r;return e},S=()=>{n="rule$3";let t=R,e=null;if((e=F())===r)return R=t,r;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return o},V=()=>{n="subrule";let e=R,o=null,a=null;if(d()===r)return R=e,r;if(q()===r)return R=e,r;if((o=(()=>{const e=R,o=R;for(;f()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(b()===r)return R=e,r;if((a=$())===r)return R=e,r;if(p()===r)return R=e,r;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},F=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;const l=(()=>{const t=R;let e=null,o=null,a=null;return(e=i())===r||(o=q())===r||(a=L())===r?(R=t,r):[e,o,a]})();if(a=l===r?null:l,g()===r)return R=e,r;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},L=()=>{let t=null;return(t=M())!==r||(t=_())!==r?t:r},M=()=>{n="macroValue$0";let t=null;const e=[];let o=null;for(;(o=v())!==r;)e.push(o);if(0===e.length)return r;t=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(t)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==r;);};let R=0;const C=(()=>{n="$";let t=R,e=null;if((e=$())===r)return R=t,r;return e})();return R!==t.length?(console.log("last",n),console.log("@",R),console.log(t.slice(R-10,R+10)),new Error("End of input not found")):C},e=document.createElement("style");e.setAttribute("data-name","windstorm-generated"),e.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(e);const o=(r,...e)=>{const o=String.raw(r,...e);return a(t(o),{"&":[]},"&")},a=(r,t,e)=>{for(const o of r)l(o,t,e);return t},n=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),l=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${n(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${n(r.value)};`);if("macro"===r.type){const o=i[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,l]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...l.map((t=>n(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],a(r.rules,t,o)},i={},s=r=>(t,...e)=>i[r]=o(t,...e),g=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]),u=(r,t="ws.custom")=>(a,...n)=>{const l=o(a,...n),i=g(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;e.sheet.insertRule(s)};const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.0",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const m=(...r)=>{for(const t of r)f(null,t)};s("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,s("area")`*grid-area: %arg;`,s("b")`*border: %arg;`,s("b.b")`*border-bottom: %arg;`,s("b.b.c")`*border-bottom-color: %arg;`,s("b.b.s")`*border-bottom-style: %arg;`,s("b.b.w")`*border-bottom-width: %arg;`,s("b.c")`*border-color: %arg;`,s("b.l")`*border-left: %arg;`,s("b.l.c")`*border-left-color: %arg;`,s("b.l.s")`*border-left-style: %arg;`,s("b.l.w")`*border-left-width: %arg;`,s("b.r")`*border-right: %arg;`,s("b.r.c")`*border-right-color: %arg;`,s("b.r.s")`*border-right-style: %arg;`,s("b.r.w")`*border-right-width: %arg;`,s("b.s")`*border-style: %arg;`,s("b.t")`*border-top: %arg;`,s("b.t.c")`*border-top-color: %arg;`,s("b.t.s")`*border-top-style: %arg;`,s("b.t.w")`*border-top-width: %arg;`,s("b.w")`*border-width: %arg;`,s("b.x")`*border-left: %arg; *border-right: %arg;`,s("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,s("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,s("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,s("b.y")`*border-top: %arg; *border-bottom: %arg;`,s("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,s("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,s("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,s("bg")`*background: %arg;`,s("bg.att")`*background-attachment: %arg;`,s("bg.c")`*background-color: %arg;`,s("bg.img")`*background-image: %arg;`,s("bg.pos")`*background-position: %arg;`,s("bg.rep")`*background-repeat: %arg;`,s("bg.sz")`*background-size: %arg;`,s("c")`*color: %arg;`,s("col")`*grid-column: %arg;`,s("cur")`*cursor: %arg;`,s("disp")`*display: %arg;`,s("fl.basis")`*flex-basis: %arg;`,s("fl.cross")`*align-items: %arg;`,s("fl.dir")`*flex-direction: %arg;`,s("fl.flow")`*flex-flow: %arg;`,s("fl.grow")`*flex-grow: %arg;`,s("fl.main")`*justify-content: %arg;`,s("fl.shrink")`*flex-shrink: %arg;`,s("fl.size")`*flex: %arg;`,s("fl.wr")`*flex-wrap: %arg;`,s("font")`*font-family: %arg;`,s("gap")`*gap: %arg;`,s("gap.col")`*column-gap: %arg;`,s("gap.row")`*row-gap: %arg;`,s("gr.areas")`*grid-template-areas: %arg;`,s("gr.cols")`*grid-template-columns: %arg;`,s("gr.cols.a")`*grid-auto-columns: %arg;`,s("gr.flow")`*grid-auto-flow: %arg;`,s("gr.rows")`*grid-template-rows: %arg;`,s("gr.rows.a")`*grid-auto-rows: %arg;`,s("h")`*height: %arg;`,s("h.max")`*max-height: %arg;`,s("h.min")`*min-height: %arg;`,s("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,s("inset.x")`*left: %arg; *right: %arg;`,s("inset.y")`*top: %arg; *bottom: %arg;`,s("m")`*margin: %arg;`,s("m.b")`*margin-bottom: %arg;`,s("m.l")`*margin-left: %arg;`,s("m.r")`*margin-right: %arg;`,s("m.t")`*margin-top: %arg;`,s("m.x")`*margin-left: %arg; *margin-right: %arg;`,s("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,s("o")`*opacity: %arg;`,s("outln")`*outline: %arg;`,s("over")`*overflow: %arg;`,s("over.x")`*overflow-x: %arg;`,s("over.y")`*overflow-y: %arg;`,s("p")`*padding: %arg;`,s("p.b")`*padding-bottom: %arg;`,s("p.l")`*padding-left: %arg;`,s("p.r")`*padding-right: %arg;`,s("p.t")`*padding-top: %arg;`,s("p.x")`*padding-left: %arg; *padding-right: %arg;`,s("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,s("pos")`*position: %arg;`,s("pos.abs")`*position: absolute;`,s("pos.fix")`*position: fixed;`,s("pos.rel")`*position: relative;`,s("pos.stick")`*position: sticky;`,s("r")`*border-radius: %arg;`,s("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.bl")`*border-bottom-left-radius: %arg;`,s("r.br")`*border-bottom-right-radius: %arg;`,s("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,s("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,s("r.tl")`*border-top-left-radius: %arg;`,s("r.tr")`*border-top-right-radius: %arg;`,s("row")`*grid-row: %arg;`,s("sel")`*user-select: %arg;`,s("self.cross")`*align-self: %arg;`,s("self.main")`*justify-self: %arg;`,s("sh.box")`*box-shadow: %arg;`,s("sh.text")`*text-shadow: %arg;`,s("t.a")`*text-align: %arg;`,s("t.br")`*word-break: %arg;`,s("t.c")`*color: %arg;`,s("t.deco")`*text-decoration: %arg;`,s("t.lh")`*line-height: %arg;`,s("t.over")`*text-overflow: %arg;`,s("t.st")`*font-style: %arg;`,s("t.sz")`*font-size: %arg;`,s("t.tf")`*text-transform: %arg;`,s("t.var")`*font-variant: %arg;`,s("t.wrap")`*word-wrap: %arg;`,s("t.ws")`*white-space: %arg;`,s("t.wt")`*font-weight: %arg;`,s("tf")`*transform: %arg;`,s("tf.o")`*transform-origin: %arg;`,s("tf.p")`*perspective: %arg;`,s("tr")`*transition: %arg;`,s("v.a")`*vertical-align: %arg;`,s("vis")`*visibility: %arg;`,s("w")`*width: %arg;`,s("w.max")`*max-width: %arg;`,s("w.min")`*min-width: %arg;`,s("x")`*left: %arg;`,s("-x")`*right: %arg;`,s("y")`*top: %arg;`,s("-y")`*bottom: %arg;`,s("z")`*z-index: %arg;`,s("fl.cn")`fl.cross: center; fl.main: center;`,s("fl.cn.cross")`fl.cross: center;`,s("fl.cn.main")`fl.main: center;`,s("flex")`disp: flex; fl.dir: %arg;`,s("grid")`disp: grid; gr.flow: %arg;`,s("hide")`disp: none;`,s("invis")`vis: hidden;`,s("sticky")`pos: sticky; y: 0px; z: +1;`,s("adorn")`disp: flex; fl.cn; p: 4px;`,s("pad.compact")`p: 0px 4px;`,s("variant.outline")`b.w: 1px;`,s("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,s("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,s("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,s("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,s("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,s("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,s("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const h=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},w={},x=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${x(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),y=(r,...t)=>{const e=h(`${Date.now()}:${Math.random().toString(16)}`);return s(e)(r,...t)},v=c.version,$=r=>{const t=(r=>{if(""===r||null===r)return;const t=g(o({raw:[r]})),a=h(t.join("\n"));if(w[a]=(w[a]??0)+1,w[a]>1)return a;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${a}"]`)));return e.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,e.sheet.cssRules.length),a})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)$(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))$(r);export{u as component,y as localMacro,s as macro,m as preloadIcons,v as version,x};
|
|
1
|
+
const r=Symbol("no match"),t=(t,e)=>{const o=e=>{const o=e.length;return()=>e===t.substr(R,o)?(R+=o,e):r},a=e=>()=>{const o=t.charAt(R);return!1!==e.test(o)?(R+=1,o):r};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const t=R;let e=null,o=null;return(e=q())===r||(o=z())===r?(R=t,r):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===r||(a=(()=>{const e=R,o=R;for(;w()!==r;);return R-o==0?r:t.slice(e,R)})())===r?(R=e,r):[o,a]},$=()=>{n="rules";let t=R,e=null;const o=[];let a=null;for(;(a=y())!==r;)o.push(a);if(e=o,q()===r)return R=t,r;return e.map((r=>r[1]))},z=()=>{let t=null;return(t=k())!==r||(t=j())!==r||(t=A())!==r||(t=S())!==r?t:r},k=()=>{n="rule$0";let t=R,e=null;if((e=E())===r)return R=t,r;return e},j=()=>{n="rule$1";let t=R,e=null;if((e=N())===r)return R=t,r;return e},A=()=>{n="rule$2";let t=R,e=null;if((e=V())===r)return R=t,r;return e},S=()=>{n="rule$3";let t=R,e=null;if((e=F())===r)return R=t,r;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return o},V=()=>{n="subrule";let e=R,o=null,a=null;if(d()===r)return R=e,r;if(q()===r)return R=e,r;if((o=(()=>{const e=R,o=R;for(;f()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(b()===r)return R=e,r;if((a=$())===r)return R=e,r;if(p()===r)return R=e,r;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},F=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;const l=(()=>{const t=R;let e=null,o=null,a=null;return(e=i())===r||(o=q())===r||(a=L())===r?(R=t,r):[e,o,a]})();if(a=l===r?null:l,g()===r)return R=e,r;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},L=()=>{let t=null;return(t=M())!==r||(t=_())!==r?t:r},M=()=>{n="macroValue$0";let t=null;const e=[];let o=null;for(;(o=v())!==r;)e.push(o);if(0===e.length)return r;t=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(t)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==r;);};let R=0;const C=(()=>{n="$";let t=R,e=null;if((e=$())===r)return R=t,r;return e})();return R!==t.length?(console.log("last",n),console.log("@",R),console.log(t.slice(R-10,R+10)),new Error("End of input not found")):C},e=document.createElement("style");e.setAttribute("data-name","windstorm-generated"),e.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(e);const o=(r,...e)=>{const o=String.raw(r,...e);return a(t(o),{"&":[]},"&")},a=(r,t,e)=>{for(const o of r)l(o,t,e);return t},n=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),l=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${n(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${n(r.value)};`);if("macro"===r.type){const o=i[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,l]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...l.map((t=>n(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],a(r.rules,t,o)},i={},s=r=>(t,...e)=>i[r]=o(t,...e),g=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]),u=(r,t="ws.custom")=>(a,...n)=>{const l=o(a,...n),i=g(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;e.sheet.insertRule(s)};const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const m=(...r)=>{for(const t of r)f(null,t)};s("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,s("area")`*grid-area: %arg;`,s("b")`*border: %arg;`,s("b.b")`*border-bottom: %arg;`,s("b.b.c")`*border-bottom-color: %arg;`,s("b.b.s")`*border-bottom-style: %arg;`,s("b.b.w")`*border-bottom-width: %arg;`,s("b.c")`*border-color: %arg;`,s("b.l")`*border-left: %arg;`,s("b.l.c")`*border-left-color: %arg;`,s("b.l.s")`*border-left-style: %arg;`,s("b.l.w")`*border-left-width: %arg;`,s("b.r")`*border-right: %arg;`,s("b.r.c")`*border-right-color: %arg;`,s("b.r.s")`*border-right-style: %arg;`,s("b.r.w")`*border-right-width: %arg;`,s("b.s")`*border-style: %arg;`,s("b.t")`*border-top: %arg;`,s("b.t.c")`*border-top-color: %arg;`,s("b.t.s")`*border-top-style: %arg;`,s("b.t.w")`*border-top-width: %arg;`,s("b.w")`*border-width: %arg;`,s("b.x")`*border-left: %arg; *border-right: %arg;`,s("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,s("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,s("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,s("b.y")`*border-top: %arg; *border-bottom: %arg;`,s("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,s("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,s("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,s("bg")`*background: %arg;`,s("bg.att")`*background-attachment: %arg;`,s("bg.c")`*background-color: %arg;`,s("bg.img")`*background-image: %arg;`,s("bg.pos")`*background-position: %arg;`,s("bg.rep")`*background-repeat: %arg;`,s("bg.sz")`*background-size: %arg;`,s("c")`*color: %arg;`,s("col")`*grid-column: %arg;`,s("cur")`*cursor: %arg;`,s("disp")`*display: %arg;`,s("fl.basis")`*flex-basis: %arg;`,s("fl.cross")`*align-items: %arg;`,s("fl.dir")`*flex-direction: %arg;`,s("fl.flow")`*flex-flow: %arg;`,s("fl.grow")`*flex-grow: %arg;`,s("fl.main")`*justify-content: %arg;`,s("fl.shrink")`*flex-shrink: %arg;`,s("fl.size")`*flex: %arg;`,s("fl.wr")`*flex-wrap: %arg;`,s("font")`*font-family: %arg;`,s("gap")`*gap: %arg;`,s("gap.col")`*column-gap: %arg;`,s("gap.row")`*row-gap: %arg;`,s("gr.areas")`*grid-template-areas: %arg;`,s("gr.cols")`*grid-template-columns: %arg;`,s("gr.cols.a")`*grid-auto-columns: %arg;`,s("gr.flow")`*grid-auto-flow: %arg;`,s("gr.rows")`*grid-template-rows: %arg;`,s("gr.rows.a")`*grid-auto-rows: %arg;`,s("h")`*height: %arg;`,s("h.max")`*max-height: %arg;`,s("h.min")`*min-height: %arg;`,s("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,s("inset.x")`*left: %arg; *right: %arg;`,s("inset.y")`*top: %arg; *bottom: %arg;`,s("m")`*margin: %arg;`,s("m.b")`*margin-bottom: %arg;`,s("m.l")`*margin-left: %arg;`,s("m.r")`*margin-right: %arg;`,s("m.t")`*margin-top: %arg;`,s("m.x")`*margin-left: %arg; *margin-right: %arg;`,s("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,s("o")`*opacity: %arg;`,s("outln")`*outline: %arg;`,s("over")`*overflow: %arg;`,s("over.x")`*overflow-x: %arg;`,s("over.y")`*overflow-y: %arg;`,s("p")`*padding: %arg;`,s("p.b")`*padding-bottom: %arg;`,s("p.l")`*padding-left: %arg;`,s("p.r")`*padding-right: %arg;`,s("p.t")`*padding-top: %arg;`,s("p.x")`*padding-left: %arg; *padding-right: %arg;`,s("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,s("pos")`*position: %arg;`,s("pos.abs")`*position: absolute;`,s("pos.fix")`*position: fixed;`,s("pos.rel")`*position: relative;`,s("pos.stick")`*position: sticky;`,s("r")`*border-radius: %arg;`,s("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.bl")`*border-bottom-left-radius: %arg;`,s("r.br")`*border-bottom-right-radius: %arg;`,s("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,s("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,s("r.tl")`*border-top-left-radius: %arg;`,s("r.tr")`*border-top-right-radius: %arg;`,s("row")`*grid-row: %arg;`,s("sel")`*user-select: %arg;`,s("self.cross")`*align-self: %arg;`,s("self.main")`*justify-self: %arg;`,s("sh.box")`*box-shadow: %arg;`,s("sh.text")`*text-shadow: %arg;`,s("t.a")`*text-align: %arg;`,s("t.br")`*word-break: %arg;`,s("t.c")`*color: %arg;`,s("t.deco")`*text-decoration: %arg;`,s("t.lh")`*line-height: %arg;`,s("t.over")`*text-overflow: %arg;`,s("t.st")`*font-style: %arg;`,s("t.sz")`*font-size: %arg;`,s("t.tf")`*text-transform: %arg;`,s("t.var")`*font-variant: %arg;`,s("t.wrap")`*word-wrap: %arg;`,s("t.ws")`*white-space: %arg;`,s("t.wt")`*font-weight: %arg;`,s("tf")`*transform: %arg;`,s("tf.o")`*transform-origin: %arg;`,s("tf.p")`*perspective: %arg;`,s("tr")`*transition: %arg;`,s("v.a")`*vertical-align: %arg;`,s("vis")`*visibility: %arg;`,s("w")`*width: %arg;`,s("w.max")`*max-width: %arg;`,s("w.min")`*min-width: %arg;`,s("x")`*left: %arg;`,s("-x")`*right: %arg;`,s("y")`*top: %arg;`,s("-y")`*bottom: %arg;`,s("z")`*z-index: %arg;`,s("fl.cn")`fl.cross: center; fl.main: center;`,s("fl.cn.cross")`fl.cross: center;`,s("fl.cn.main")`fl.main: center;`,s("flex")`disp: flex; fl.dir: %arg;`,s("grid")`disp: grid; gr.flow: %arg;`,s("hide")`disp: none;`,s("invis")`vis: hidden;`,s("sticky")`pos: sticky; y: 0px; z: +1;`,s("adorn")`disp: flex; fl.cn; p: 4px;`,s("pad.compact")`p: 0px 4px;`,s("variant.outline")`b.w: 1px;`,s("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,s("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,s("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,s("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,s("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,s("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,s("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const h=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},w={},x=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${x(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),y=(r,...t)=>{const e=h(`${Date.now()}:${Math.random().toString(16)}`);return s(e)(r,...t)},v=c.version,$=r=>{const t=(r=>{if(""===r||null===r)return;const t=g(o({raw:[r]})),a=h(t.join("\n"));if(w[a]=(w[a]??0)+1,w[a]>1)return a;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${a}"]`)));return e.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,e.sheet.cssRules.length),a})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)$(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))$(r);export{u as component,y as localMacro,s as macro,m as preloadIcons,v as version,x};
|
package/package.json
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axel669/windstorm",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"build": "rollup -c build-config/rollup.config.mjs"
|
|
8
|
-
"mkdocs": "ipsen",
|
|
9
|
-
"host": "wrangler pages dev test/preview --port 45067",
|
|
10
|
-
"host/docs": "wrangler pages dev site --port 45068",
|
|
11
|
-
"host/cdn": "wrangler pages dev cdn/artifacts --port 1337",
|
|
12
|
-
"host.debug": "wrangler pages dev test/debug --port=1338"
|
|
7
|
+
"build": "rollup -c build-config/rollup.config.mjs"
|
|
13
8
|
},
|
|
14
9
|
"keywords": [],
|
|
15
10
|
"author": "",
|
|
16
11
|
"license": "MIT",
|
|
17
12
|
"devDependencies": {
|
|
18
13
|
"@axel669/ipsen": "0.4.1",
|
|
14
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
19
15
|
"@rollup/plugin-terser": "^0.4.4",
|
|
20
16
|
"fs-jetpack": "^5.1.0",
|
|
21
17
|
"js-yaml": "^4.1.0",
|
|
@@ -39,8 +35,5 @@
|
|
|
39
35
|
"imports": {
|
|
40
36
|
"#lib/*": "./lib/*.js",
|
|
41
37
|
"#com/*": "./lib/components/*.js"
|
|
42
|
-
},
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"@rollup/plugin-node-resolve": "^16.0.1"
|
|
45
38
|
}
|
|
46
39
|
}
|
package/readme.md
CHANGED
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
# Windstorm
|
|
2
|
-
Windstorm is a library that allows element customization without needing to use
|
|
3
|
-
css directly and without predefining hundreds or thousands of css classes with
|
|
4
|
-
minor differences between a set of 20.
|
|
5
|
-
|
|
6
|
-
[Documentation Site](https://windstorm.axel669.net)
|
|
7
|
-
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
> Note: the version number is not necessary in the url, but is recommended.
|
|
11
|
-
> Including the version ensures that if updates are made to the library, any
|
|
12
|
-
> compatibility issues or bugs that get introduced won't affect existing pages,
|
|
13
|
-
> and also allows updates to be done when intended.
|
|
14
|
-
|
|
15
|
-
### CDN Link (global variable)
|
|
16
|
-
```html
|
|
17
|
-
<!-- lib + components -->
|
|
18
|
-
<script src="https://esm.sh/@axel669/windstorm@0.6.
|
|
19
|
-
<!-- lib, no components -->
|
|
20
|
-
<script src="https://esm.sh/@axel669/windstorm@0.6.
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
### CDN Link (module)
|
|
24
|
-
```js
|
|
25
|
-
// Only scanning, no functions
|
|
26
|
-
import "https://esm.sh/@axel669/windstorm@0.6.
|
|
27
|
-
// Import functions + scanning
|
|
28
|
-
import ws from "https://esm.sh/@axel669/windstorm@0.6.
|
|
29
|
-
|
|
30
|
-
ws.x({...stuff})
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Node Modules
|
|
34
|
-
```bash
|
|
35
|
-
npm add @axel669/windstorm
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Usage
|
|
39
|
-
Windstorm can be used as a standalone script added to the page, or included in a
|
|
40
|
-
bundle with other scripts/frameworks. Regardless of which form it's used in,
|
|
41
|
-
windstorm should be included in the body of the page before the content that it
|
|
42
|
-
will style in order to prevent FOUC. For static content, this means the script
|
|
43
|
-
tag that uses it should not be async or defered. For content generated by a
|
|
44
|
-
framework like React or Svelte, this should not be an issue as including
|
|
45
|
-
windstorm in the build bundle will allow it to run before the framework adds DOM
|
|
46
|
-
elements to the page.
|
|
47
|
-
|
|
48
|
-
Once added to the page, windstorm will scan all current elements, and any
|
|
49
|
-
elements added later for the `data-ws` attribute, and generate the necessary css
|
|
50
|
-
immediately. Component css is automatically added to the head as well, so no
|
|
51
|
-
extra work is needed to use any of the components. Components that transform
|
|
52
|
-
standard tags will only work if the tag has the `data-ws` on it (although the value
|
|
53
|
-
can be empty).
|
|
54
|
-
|
|
55
|
-
> Many of the windstorm components expect some css variables defined by the
|
|
56
|
-
> theme to be present, so a theme should always be applied to the body.
|
|
57
|
-
|
|
58
|
-
```html
|
|
59
|
-
<body data-ws="#theme.tron;">
|
|
60
|
-
<script src="https://esm.sh/@axel669/windstorm@0.6.
|
|
61
|
-
Static content here
|
|
62
|
-
</body>
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
> Any html elements that do not have the `data-ws` attribute are left alone,
|
|
66
|
-
> allowing windstorm to play nice with any other css lib (that I tried).
|
|
67
|
-
|
|
68
|
-
### data-ws Attribute
|
|
69
|
-
The `data-ws` attribute is what windstorm will scan to apply styles to elements.
|
|
70
|
-
The attribute is formatted similar to regular css but with some important
|
|
71
|
-
diffrences.
|
|
72
|
-
|
|
73
|
-
Instead of css properties and their values, macros are used and applied in the
|
|
74
|
-
order they are defined (and custom macros can be made). CSS can also be directly
|
|
75
|
-
applied in the case where a built-in macro doesn't exist or work the way you
|
|
76
|
-
need it to for the element. Macros can also contain macros inside them.
|
|
77
|
-
Media queries and nested-selectors can be used even while in the element
|
|
78
|
-
attribute. There is also a css variable shortcut that will either set the
|
|
79
|
-
variable value when used in the macro name position, or will expand to the
|
|
80
|
-
var syntax (without a default) when used in the value. Normal variable syntax
|
|
81
|
-
also works without any edits.
|
|
82
|
-
|
|
83
|
-
[Macros](./lib/macros.md)
|
|
84
|
-
|
|
85
|
-
| Macro Type | Syntax |
|
|
86
|
-
| --- | --- |
|
|
87
|
-
| Normal Macro | `<macro name>` |
|
|
88
|
-
| CSS | `*<css prop>` |
|
|
89
|
-
| CSS variable | `@<var name>` |
|
|
90
|
-
|
|
91
|
-
Macros can also have a single argument, or multiple arguments. Macros that use
|
|
92
|
-
a single argument will use that arg trimmed, and multi arg macros will have each
|
|
93
|
-
argument trimmed. More details on using the arguments is found in the Macros
|
|
94
|
-
page.
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
<macro>: <value>;
|
|
98
|
-
|
|
99
|
-
! <nested-selector> {
|
|
100
|
-
<macro>: <value>;
|
|
101
|
-
...
|
|
102
|
-
}
|
|
103
|
-
! | <media query> | {
|
|
104
|
-
<macro>: <value>;
|
|
105
|
-
...
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
```html
|
|
110
|
-
<!-- Sets the --color variable and width -->
|
|
111
|
-
<div data-ws="@color: teal; w: 100px;">
|
|
112
|
-
content
|
|
113
|
-
<!-- Regular border will use the --primary variable for color -->
|
|
114
|
-
<!-- border-color is changed on hover only to use the --color variable -->
|
|
115
|
-
<div data-ws="b: 1px solid @primary; ! &:hover { b.c: @color; }">
|
|
116
|
-
other content
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
```
|
|
1
|
+
# Windstorm
|
|
2
|
+
Windstorm is a library that allows element customization without needing to use
|
|
3
|
+
css directly and without predefining hundreds or thousands of css classes with
|
|
4
|
+
minor differences between a set of 20.
|
|
5
|
+
|
|
6
|
+
[Documentation Site](https://windstorm.axel669.net)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
> Note: the version number is not necessary in the url, but is recommended.
|
|
11
|
+
> Including the version ensures that if updates are made to the library, any
|
|
12
|
+
> compatibility issues or bugs that get introduced won't affect existing pages,
|
|
13
|
+
> and also allows updates to be done when intended.
|
|
14
|
+
|
|
15
|
+
### CDN Link (global variable)
|
|
16
|
+
```html
|
|
17
|
+
<!-- lib + components -->
|
|
18
|
+
<script src="https://esm.sh/@axel669/windstorm@0.6.1/es5"></script>
|
|
19
|
+
<!-- lib, no components -->
|
|
20
|
+
<script src="https://esm.sh/@axel669/windstorm@0.6.1/nc-es5"></script>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### CDN Link (module)
|
|
24
|
+
```js
|
|
25
|
+
// Only scanning, no functions
|
|
26
|
+
import "https://esm.sh/@axel669/windstorm@0.6.1"
|
|
27
|
+
// Import functions + scanning
|
|
28
|
+
import ws from "https://esm.sh/@axel669/windstorm@0.6.1"
|
|
29
|
+
|
|
30
|
+
ws.x({...stuff})
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Node Modules
|
|
34
|
+
```bash
|
|
35
|
+
npm add @axel669/windstorm
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
Windstorm can be used as a standalone script added to the page, or included in a
|
|
40
|
+
bundle with other scripts/frameworks. Regardless of which form it's used in,
|
|
41
|
+
windstorm should be included in the body of the page before the content that it
|
|
42
|
+
will style in order to prevent FOUC. For static content, this means the script
|
|
43
|
+
tag that uses it should not be async or defered. For content generated by a
|
|
44
|
+
framework like React or Svelte, this should not be an issue as including
|
|
45
|
+
windstorm in the build bundle will allow it to run before the framework adds DOM
|
|
46
|
+
elements to the page.
|
|
47
|
+
|
|
48
|
+
Once added to the page, windstorm will scan all current elements, and any
|
|
49
|
+
elements added later for the `data-ws` attribute, and generate the necessary css
|
|
50
|
+
immediately. Component css is automatically added to the head as well, so no
|
|
51
|
+
extra work is needed to use any of the components. Components that transform
|
|
52
|
+
standard tags will only work if the tag has the `data-ws` on it (although the value
|
|
53
|
+
can be empty).
|
|
54
|
+
|
|
55
|
+
> Many of the windstorm components expect some css variables defined by the
|
|
56
|
+
> theme to be present, so a theme should always be applied to the body.
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<body data-ws="#theme.tron;">
|
|
60
|
+
<script src="https://esm.sh/@axel669/windstorm@0.6.1/standalone"></script>
|
|
61
|
+
Static content here
|
|
62
|
+
</body>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
> Any html elements that do not have the `data-ws` attribute are left alone,
|
|
66
|
+
> allowing windstorm to play nice with any other css lib (that I tried).
|
|
67
|
+
|
|
68
|
+
### data-ws Attribute
|
|
69
|
+
The `data-ws` attribute is what windstorm will scan to apply styles to elements.
|
|
70
|
+
The attribute is formatted similar to regular css but with some important
|
|
71
|
+
diffrences.
|
|
72
|
+
|
|
73
|
+
Instead of css properties and their values, macros are used and applied in the
|
|
74
|
+
order they are defined (and custom macros can be made). CSS can also be directly
|
|
75
|
+
applied in the case where a built-in macro doesn't exist or work the way you
|
|
76
|
+
need it to for the element. Macros can also contain macros inside them.
|
|
77
|
+
Media queries and nested-selectors can be used even while in the element
|
|
78
|
+
attribute. There is also a css variable shortcut that will either set the
|
|
79
|
+
variable value when used in the macro name position, or will expand to the
|
|
80
|
+
var syntax (without a default) when used in the value. Normal variable syntax
|
|
81
|
+
also works without any edits.
|
|
82
|
+
|
|
83
|
+
[Macros](./lib/macros.md)
|
|
84
|
+
|
|
85
|
+
| Macro Type | Syntax |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| Normal Macro | `<macro name>` |
|
|
88
|
+
| CSS | `*<css prop>` |
|
|
89
|
+
| CSS variable | `@<var name>` |
|
|
90
|
+
|
|
91
|
+
Macros can also have a single argument, or multiple arguments. Macros that use
|
|
92
|
+
a single argument will use that arg trimmed, and multi arg macros will have each
|
|
93
|
+
argument trimmed. More details on using the arguments is found in the Macros
|
|
94
|
+
page.
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
<macro>: <value>;
|
|
98
|
+
|
|
99
|
+
! <nested-selector> {
|
|
100
|
+
<macro>: <value>;
|
|
101
|
+
...
|
|
102
|
+
}
|
|
103
|
+
! | <media query> | {
|
|
104
|
+
<macro>: <value>;
|
|
105
|
+
...
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<!-- Sets the --color variable and width -->
|
|
111
|
+
<div data-ws="@color: teal; w: 100px;">
|
|
112
|
+
content
|
|
113
|
+
<!-- Regular border will use the --primary variable for color -->
|
|
114
|
+
<!-- border-color is changed on hover only to use the --color variable -->
|
|
115
|
+
<div data-ws="b: 1px solid @primary; ! &:hover { b.c: @color; }">
|
|
116
|
+
other content
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
```
|