beercss 2.2.1 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/cdn/beer.min.js +1 -1
- package/package.json +1 -1
- package/src/cdn/beer.ts +7 -2
package/README.md
CHANGED
|
@@ -135,8 +135,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
|
|
|
135
135
|
From jsdelivr.net.
|
|
136
136
|
|
|
137
137
|
```html
|
|
138
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@2.2.
|
|
139
|
-
<script src="https://cdn.jsdelivr.net/npm/beercss@2.2.
|
|
138
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@2.2.2/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
139
|
+
<script src="https://cdn.jsdelivr.net/npm/beercss@2.2.2/dist/cdn/beer.min.js" type="text/javascript"></script>
|
|
140
140
|
<script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.10/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
|
|
141
141
|
```
|
|
142
142
|
|
|
@@ -168,8 +168,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
168
168
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
169
169
|
<meta name="google" content="notranslate">
|
|
170
170
|
<title>Hello world</title>
|
|
171
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@2.2.
|
|
172
|
-
<script src="https://cdn.jsdelivr.net/npm/beercss@2.2.
|
|
171
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@2.2.2/dist/cdn/beer.min.css" rel="stylesheet">
|
|
172
|
+
<script src="https://cdn.jsdelivr.net/npm/beercss@2.2.2/dist/cdn/beer.min.js" type="text/javascript"></script>
|
|
173
173
|
<script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.10/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
|
|
174
174
|
</head>
|
|
175
175
|
<body class="light">
|
package/dist/cdn/beer.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{if(window.ui)return;let
|
|
1
|
+
(()=>{if(window.ui)return;let m=null,x=null,k=null,s={light:"",dark:""};const A=t=>new Promise(e=>setTimeout(e,t)),L=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{let e=Math.random()*16|0;return(t=="x"?e:e&3|8).toString(16)}),f=(t,e)=>{try{return typeof t=="string"?(e||document).querySelector(t):t}catch{}},u=(t,e)=>{try{return typeof t=="string"?(e||document).querySelectorAll(t):t}catch{}},i=(t,e)=>t?t.classList.contains(e):!1,d=(t,e)=>{!t||t.classList.add(e)},o=(t,e)=>{!t||t.classList.remove(e)},y=(t,e,r)=>{t.addEventListener(e,r,!0)},P=(t,e,r)=>{t.removeEventListener(e,r,!0)},N=(t,e)=>{if(!!e)return e.parentNode.insertBefore(t,e)},E=t=>{if(!!t)return t.previousElementSibling},S=t=>{if(!!t)return t.nextElementSibling},v=t=>{if(!!t)return t.parentElement},D=t=>{let e=document.createElement("div");for(let r in t)e[r]=t[r];return e},g=t=>{let e=t,r=v(t),n=f("label",r),a=i(r,"border")&&!i(r,"fill");if(document.activeElement==t||e.value||/date|time/.test(e.type)){if(a&&n){let l=i(n,"active")?n.offsetWidth:Math.round(n.offsetWidth/1.33),p=i(r,"round")?20:12,$=l+p+8;e.style.clipPath=`polygon(0% 0%, ${p}rem 0%, ${p}rem 8rem, ${$}rem 8rem, ${$}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";d(n,"active")}else o(n,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&T(t)},M=t=>{let e=t.currentTarget;/input/i.test(e.tagName)||T(e)},q=t=>{let e=t.currentTarget,r=f("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",v(e));r&&r.focus()},B=t=>{let e=t.currentTarget;g(e)},F=t=>{let e=t.currentTarget;g(e)},C=t=>{let e=t.currentTarget;u(".dropdown.active").forEach(n=>o(n,"active")),P(e,"click",C)},_=t=>{let e=t.currentTarget;o(e,"active"),m&&clearTimeout(m)},I=t=>{let e=t.currentTarget;w(e)},O=t=>{let e=t.currentTarget;w(e,t)},V=()=>{x&&clearTimeout(x),x=setTimeout(b,180)},w=(t,e)=>{if(e){if(e.key!=="Enter")return;let a=e.currentTarget,c=S(a);return!c||!/file/i.test(c.type)?void 0:c.click()}let r=t,n=E(t);!n||!/text/i.test(n.type)||(n.value=Array.from(r.files).map(a=>a.name).join(", "),n.readOnly=!0,n.addEventListener("keydown",O),g(n))},T=(t,e,r)=>{if(e||(e=f(t.getAttribute("data-ui"))),i(e,"modal"))return z(t,e);if(i(e,"dropdown"))return Z(t,e);if(i(e,"toast"))return K(t,e,r);if(i(e,"page"))return W(t,e);if(i(e,"progress"))return j(e,r);if(h(t),i(e,"active"))return o(e,"active");d(e,"active")},h=t=>{let e=v(t);if(!i(e,"tabs"))return;u("a",e).forEach(n=>o(n,"active")),d(t,"active")},W=(t,e)=>{h(t);let r=v(e);for(let n=0;n<r.children.length;n++)i(r.children[n],"page")&&o(r.children[n],"active");d(e,"active")},Z=(t,e)=>{if(h(t),i(e,"active"))return o(e,"active");u(".dropdown.active").forEach(n=>o(n,"active")),d(e,"active"),y(document.body,"click",C)},z=async(t,e)=>{h(t);let r=E(e);i(r,"overlay")||(r=D({className:"overlay"}),N(r,e),await A(90)),r.onclick=()=>{o(t,"active"),o(e,"active"),o(r,"active")};let n=i(e,"active"),a=v(e);/nav/i.test(a.tagName)&&u(".modal, a, .overlay",a).forEach(l=>o(l,"active")),n?(o(t,"active"),o(r,"active"),o(e,"active")):(!/button/i.test(t.tagName)&&!i(t,"button")&&!i(t,"chip")&&d(t,"active"),d(r,"active"),d(e,"active"))},K=(t,e,r)=>{h(t),u(".toast.active").forEach(a=>o(a,"active")),d(e,"active"),y(e,"click",_),m&&clearTimeout(m),!(r&&r==-1)&&(m=setTimeout(()=>{o(e,"active")},r&&r?r:6e3))},j=(t,e)=>{let r=t;if(i(r,"left"))return r.style.clipPath=`polygon(0% 0%, 0% 100%, ${e}% 100%, ${e}% 0%)`;if(i(r,"top"))return r.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;if(i(r,"right"))return r.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;if(i(r,"bottom"))return r.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`},G=()=>{if(s.light&&s.dark)return s;let t=document.createElement("body");t.className="light",document.body.appendChild(t);let e=document.createElement("body");e.className="dark",document.body.appendChild(e);let r=getComputedStyle(t),n=getComputedStyle(e),a=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--outline","--surface-variant","--on-surface-variant","--inverse-surface","--inverse-on-surface"];for(let c=0;c<a.length;c++)s.light+=a[c]+":"+r.getPropertyValue(a[c])+";",s.dark+=a[c]+":"+n.getPropertyValue(a[c])+";";return document.body.removeChild(t),document.body.removeChild(e),s},H=t=>{if(!t||!window.materialDynamicColors)return G();let e=/dark/i.test(document.body.className)?"dark":"light";return t&&t.light&&t.dark?(s.light=t.light,s.dark=t.dark,document.body.setAttribute("style",t[e]),t):window.materialDynamicColors(t).then(r=>{const n=a=>{let c="";for(let l in a){let p=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();c+="--"+p+":"+a[l]+";"}return c};return s.light=n(r.light),s.dark=n(r.dark),document.body.setAttribute("style",s[e]),s})},J=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),window.materialDynamicColors&&document.body.setAttribute("style",s[t]),t):/dark/i.test(document.body.className)?"dark":"light",Q=()=>{k||(k=new MutationObserver(V),k.observe(document.body,{childList:!0,subtree:!0}),b())},b=(t,e)=>{if(t){if(t=="setup")return Q();if(t=="guid")return L();if(t=="mode")return J(e);if(t=="theme")return H(e);let l=f(t),p=f("[data-ui='#"+l.id+"']");T(p,l,e)}u("[data-ui]").forEach(l=>y(l,"click",M)),u(".field > label").forEach(l=>y(l,"click",q)),u(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(l=>{y(l,"focus",B),y(l,"blur",F),g(l)}),u(".field > input[type=file]").forEach(l=>{y(l,"change",I),w(l)})};window.ui=b,window.addEventListener("load",()=>b("setup"))})();
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Everton and Leonardo",
|
|
3
3
|
"description": "Build material design interfaces in record time... without stress for devs.",
|
|
4
4
|
"homepage": "https://www.beercss.com/",
|
|
5
|
-
"version": "2.2.
|
|
5
|
+
"version": "2.2.2",
|
|
6
6
|
"name": "beercss",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"type": "module",
|
package/src/cdn/beer.ts
CHANGED
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
dark: ""
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
const wait = (milliseconds:number) => {
|
|
18
|
+
return new Promise((resolve) => setTimeout(resolve, milliseconds));
|
|
19
|
+
}
|
|
20
|
+
|
|
17
21
|
const guid = ():string => {
|
|
18
22
|
return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c:string) => {
|
|
19
23
|
let r = (Math.random() * 16) | 0,
|
|
@@ -232,13 +236,14 @@
|
|
|
232
236
|
on(document.body, "click", onClickDocument);
|
|
233
237
|
}
|
|
234
238
|
|
|
235
|
-
const modal = (from:Element, to:Element) => {
|
|
239
|
+
const modal = async (from:Element, to:Element) => {
|
|
236
240
|
tab(from);
|
|
237
241
|
|
|
238
242
|
let overlay = prev(to) as HTMLElement;
|
|
239
243
|
if (!hasClass(overlay, "overlay")) {
|
|
240
|
-
overlay = create({ className: "overlay
|
|
244
|
+
overlay = create({ className: "overlay" });
|
|
241
245
|
insertBefore(overlay, to);
|
|
246
|
+
await wait(90);
|
|
242
247
|
}
|
|
243
248
|
|
|
244
249
|
overlay.onclick = () => {
|