beercss 3.2.2 → 3.2.3

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 CHANGED
@@ -110,19 +110,19 @@ From jsdelivr.net.
110
110
 
111
111
  ```html
112
112
  // with html
113
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.css" rel="stylesheet" />
114
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.js"></script>
113
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.css" rel="stylesheet" />
114
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.js"></script>
115
115
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
116
116
  ```
117
117
 
118
118
  ```css
119
119
  // with css
120
- @import "https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.css";
120
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.css";
121
121
  ```
122
122
 
123
123
  ```js
124
124
  // with javascript
125
- import "https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.js";
125
+ import "https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.js";
126
126
  import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js";
127
127
  ```
128
128
 
@@ -180,8 +180,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
180
180
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
181
181
  <meta name="google" content="notranslate">
182
182
  <title>Hello world</title>
183
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.css" rel="stylesheet">
184
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.2/dist/cdn/beer.min.js"></script>
183
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.css" rel="stylesheet">
184
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.3/dist/cdn/beer.min.js"></script>
185
185
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
186
186
  </head>
187
187
  <body class="light">
@@ -1 +1 @@
1
- export default(()=>{const p=globalThis;let m=null,$=null,w=null;const u={light:"",dark:""},_=async t=>await new Promise(e=>setTimeout(e,t)),q=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)}),v=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelector(t):t}catch{}},f=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelectorAll(t):t}catch{}},c=(t,e)=>t==null?void 0:t.classList.contains(e),x=(t,e)=>(t==null?void 0:t.tagName.toLowerCase())===e,k=(t,e)=>(t==null?void 0:t.type.toLowerCase())===e,y=(t,e)=>{t==null||t.classList.add(e)},s=(t,e)=>{t==null||t.classList.remove(e)},g=(t,e,n)=>{t.addEventListener(e,n,!0)},B=(t,e,n)=>{t.removeEventListener(e,n,!0)},I=(t,e)=>e==null?void 0:e.parentNode.insertBefore(t,e),M=t=>t==null?void 0:t.previousElementSibling,O=t=>t==null?void 0:t.nextElementSibling,b=t=>t==null?void 0:t.parentElement,R=t=>{const e=document.createElement("div");for(const n in t)e[n]=t[n];return e},L=t=>{const e=t;k(e,"number")&&!e.value&&(e.value="");const n=b(t),r=v("label",n),o=c(n,"border")&&!c(n,"fill");if(document.activeElement===t||e.value||v("[selected]",e)||k(e,"date")||k(e,"time")){if(o&&r){let l=c(r,"active")?r.offsetWidth:Math.round(r.offsetWidth/1.33);l=l/16;const a=c(n,"round")?1.25:.75,d=l+a+.5;e.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 0.5rem, ${d}rem 0.5rem, ${d}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";y(r,"active")}else s(r,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&P(t)},V=t=>{const e=t.currentTarget;x(e,"input")||P(e)},W=t=>{const e=t.currentTarget,n=v("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",b(e));n&&n.focus()},Z=t=>{const e=t.currentTarget;L(e)},j=t=>{const e=t.currentTarget;L(e)},N=t=>{const e=t.currentTarget;f("menu.active").forEach(r=>s(r,"active")),B(e,"click",N)},z=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},K=t=>{const e=t.currentTarget;A(e)},G=t=>{const e=t.currentTarget;A(e,t)},H=t=>{const e=t.currentTarget;F(e)},J=()=>{$&&clearTimeout($),$=setTimeout(()=>{C()},180)},A=(t,e)=>{if(e){if(e.key!=="Enter")return;const o=e.currentTarget,i=O(o);return!i||!k(i,"file")?void 0:i.click()}const n=t,r=M(t);!r||!k(r,"text")||(r.value=Array.from(n.files).map(o=>o.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",G),L(r))},F=t=>{const e=b(t),n=v("span",e),r=f("input",e),o=v(".tooltip",e);if(!r.length||!n)return;const i=[],l=[];for(let E=0;E<r.length;E++){const S=parseFloat(r[E].min||"0"),it=parseFloat(r[E].max||"100"),D=parseFloat(r[E].value||"0"),ot=(D-S)*100/(it-S);i.push(ot),l.push(D)}o&&(o.textContent=l.join());let a=i[0],d=0,h=100-d-a;r.length>1&&(a=Math.abs(i[1]-i[0]),d=i[1]>i[0]?i[0]:i[1],h=100-d-a),n.style.left=`${d}%`,n.style.right=`${h}%`},P=(t,e,n)=>{if(e||(e=v(t.getAttribute("data-ui"))),x(e,"dialog"))return X(t,e);if(x(e,"menu"))return U(t,e);if(c(e,"toast"))return Y(t,e,n);if(c(e,"page"))return Q(t,e);if(c(e,"progress"))return tt(e,n);if(T(t),c(e,"active"))return s(e,"active");y(e,"active")},T=t=>{const e=b(t);if(!c(e,"tabs"))return;f("a",e).forEach(r=>s(r,"active")),y(t,"active")},Q=(t,e)=>{T(t);const n=b(e);for(let r=0;r<n.children.length;r++)c(n.children[r],"page")&&s(n.children[r],"active");y(e,"active")},U=(t,e)=>{if(T(t),c(e,"active"))return s(e,"active");f("menu.active").forEach(r=>s(r,"active")),y(e,"active"),g(document.body,"click",N)},X=async(t,e)=>{T(t);let n=M(e);const r=e,o=c(e,"active")||r.open,i=c(e,"modal"),l=b(e),a=x(l,"nav");c(n,"overlay")||(n=R({className:"overlay"}),I(n,e),await _(90)),n.onclick=()=>{i||(s(t,"active"),s(e,"active"),s(n,"active"),r.close())},a&&f("dialog, a, .overlay",l).forEach(h=>{h.removeClass(h,"active"),h.open&&h.close()}),o?(s(t,"active"),s(n,"active"),s(e,"active"),r.close()):(!x(t,"button")&&!c(t,"button")&&!c(t,"chip")&&y(t,"active"),y(n,"active"),y(e,"active"),i?r.showModal():r.show())},Y=(t,e,n)=>{T(t),f(".toast.active").forEach(o=>s(o,"active")),y(e,"active"),g(e,"click",z),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},tt=(t,e)=>{const n=t;if(c(n,"left")){n.style.clipPath=`polygon(0% 0%, 0% 100%, ${e}% 100%, ${e}% 0%)`;return}if(c(n,"top")){n.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;return}if(c(n,"right")){n.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;return}c(n,"bottom")&&(n.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`)},et=()=>{if(u.light&&u.dark)return u;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const e=document.createElement("body");e.className="dark",document.body.appendChild(e);const n=getComputedStyle(t),r=getComputedStyle(e),o=["--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","--inverse-primary","--inverse-on-primary"];for(let i=0;i<o.length;i++)u.light+=o[i]+":"+n.getPropertyValue(o[i])+";",u.dark+=o[i]+":"+r.getPropertyValue(o[i])+";";return document.body.removeChild(t),document.body.removeChild(e),u},nt=t=>{if(!t||!p.materialDynamicColors)return et();const e=/dark/i.test(document.body.className)?"dark":"light";return(t==null?void 0:t.light)&&(t==null?void 0:t.dark)?(u.light=t.light,u.dark=t.dark,document.body.setAttribute("style",t[e]),t):p.materialDynamicColors(t).then(n=>{const r=o=>{let i="";for(const l in o){const a=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),d=o[l];i+="--"+a+":"+d+";"}return i};return u.light=r(n.light),u.dark=r(n.dark),document.body.setAttribute("style",u[e]),u})},rt=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),p.materialDynamicColors&&document.body.setAttribute("style",u[t]),t):/dark/i.test(document.body.className)?"dark":"light",at=()=>{if(!w)return w=new MutationObserver(J),w.observe(document.body,{childList:!0,subtree:!0}),C()},C=(t,e)=>{if(t){if(t==="setup")return at();if(t==="guid")return q();if(t==="mode")return rt(e);if(t==="theme")return nt(e);const a=v(t),d=v("[data-ui='#"+a.id+"']");P(d,a,e)}f("[data-ui]").forEach(a=>g(a,"click",V)),f(".field > label").forEach(a=>g(a,"click",W)),f(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(a=>{g(a,"focus",Z),g(a,"blur",j),L(a)}),f(".field > input[type=file]").forEach(a=>{g(a,"change",K),A(a)}),f(".slider > input[type=range]").forEach(a=>{g(a,"input",H),F(a)})};return p.addEventListener&&p.addEventListener("load",()=>C("setup")),p.beercss=C,p.ui=C,p.ui})();
1
+ export default(()=>{const p=globalThis;let m=null,$=null,w=null;const u={light:"",dark:""},_=async t=>await new Promise(e=>setTimeout(e,t)),q=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)}),g=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelector(t):t}catch{}},f=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelectorAll(t):t}catch{}},c=(t,e)=>t==null?void 0:t.classList.contains(e),x=(t,e)=>(t==null?void 0:t.tagName.toLowerCase())===e,k=(t,e)=>(t==null?void 0:t.type.toLowerCase())===e,y=(t,e)=>{t==null||t.classList.add(e)},s=(t,e)=>{t==null||t.classList.remove(e)},v=(t,e,n)=>{t.addEventListener(e,n,!0)},B=(t,e,n)=>{t.removeEventListener(e,n,!0)},I=(t,e)=>e==null?void 0:e.parentNode.insertBefore(t,e),M=t=>t==null?void 0:t.previousElementSibling,O=t=>t==null?void 0:t.nextElementSibling,h=t=>t==null?void 0:t.parentElement,R=t=>{const e=document.createElement("div");for(const n in t)e[n]=t[n];return e},L=t=>{const e=t;k(e,"number")&&!e.value&&(e.value="");const n=h(t),r=g("label",n),o=c(n,"border")&&!c(n,"fill");if(document.activeElement===t||e.value||g("[selected]",e)||k(e,"date")||k(e,"time")){if(o&&r){let l=c(r,"active")?r.offsetWidth:Math.round(r.offsetWidth/1.33);l=l/16;const a=c(n,"round")?1.25:.75,d=l+a+.5;e.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 0.5rem, ${d}rem 0.5rem, ${d}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";y(r,"active")}else s(r,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&P(t)},V=t=>{const e=t.currentTarget;x(e,"input")||P(e)},W=t=>{const e=t.currentTarget,n=g("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",h(e));n&&n.focus()},Z=t=>{const e=t.currentTarget;L(e)},j=t=>{const e=t.currentTarget;L(e)},N=t=>{const e=t.currentTarget;f("menu.active").forEach(r=>s(r,"active")),B(e,"click",N)},z=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},K=t=>{const e=t.currentTarget;A(e)},G=t=>{const e=t.currentTarget;A(e,t)},H=t=>{const e=t.currentTarget;F(e)},J=()=>{$&&clearTimeout($),$=setTimeout(()=>{E()},180)},A=(t,e)=>{if(e){if(e.key!=="Enter")return;const o=e.currentTarget,i=O(o);return!i||!k(i,"file")?void 0:i.click()}const n=t,r=M(t);!r||!k(r,"text")||(r.value=Array.from(n.files).map(o=>o.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",G),L(r))},F=t=>{const e=h(t),n=g("span",e),r=f("input",e),o=g(".tooltip",e);if(!r.length||!n)return;const i=[],l=[];for(let C=0;C<r.length;C++){const S=parseFloat(r[C].min||"0"),it=parseFloat(r[C].max||"100"),D=parseFloat(r[C].value||"0"),ot=(D-S)*100/(it-S);i.push(ot),l.push(D)}o&&(o.textContent=l.join());let a=i[0],d=0,b=100-d-a;r.length>1&&(a=Math.abs(i[1]-i[0]),d=i[1]>i[0]?i[0]:i[1],b=100-d-a),n.style.left=`${d}%`,n.style.right=`${b}%`},P=(t,e,n)=>{if(e||(e=g(t.getAttribute("data-ui"))),x(e,"dialog"))return X(t,e);if(x(e,"menu"))return U(t,e);if(c(e,"toast"))return Y(t,e,n);if(c(e,"page"))return Q(t,e);if(c(e,"progress"))return tt(e,n);if(T(t),c(e,"active"))return s(e,"active");y(e,"active")},T=t=>{const e=h(t);if(!c(e,"tabs"))return;f("a",e).forEach(r=>s(r,"active")),y(t,"active")},Q=(t,e)=>{T(t);const n=h(e);for(let r=0;r<n.children.length;r++)c(n.children[r],"page")&&s(n.children[r],"active");y(e,"active")},U=(t,e)=>{if(T(t),c(e,"active"))return s(e,"active");f("menu.active").forEach(r=>s(r,"active")),y(e,"active"),v(document.body,"click",N)},X=async(t,e)=>{T(t);let n=M(e);const r=e,o=c(e,"active")||r.open,i=c(e,"modal"),l=h(e),a=x(l,"nav");c(n,"overlay")||(n=R({className:"overlay"}),I(n,e),await _(90)),n.onclick=()=>{i||(s(t,"active"),s(e,"active"),s(n,"active"),r.close())},a&&f("dialog, a, .overlay",l).forEach(b=>{s(b,"active"),b.open&&b.close()}),o?(s(t,"active"),s(n,"active"),s(e,"active"),r.close()):(!x(t,"button")&&!c(t,"button")&&!c(t,"chip")&&y(t,"active"),y(n,"active"),y(e,"active"),i?r.showModal():r.show())},Y=(t,e,n)=>{T(t),f(".toast.active").forEach(o=>s(o,"active")),y(e,"active"),v(e,"click",z),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},tt=(t,e)=>{const n=t;if(c(n,"left")){n.style.clipPath=`polygon(0% 0%, 0% 100%, ${e}% 100%, ${e}% 0%)`;return}if(c(n,"top")){n.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;return}if(c(n,"right")){n.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;return}c(n,"bottom")&&(n.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`)},et=()=>{if(u.light&&u.dark)return u;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const e=document.createElement("body");e.className="dark",document.body.appendChild(e);const n=getComputedStyle(t),r=getComputedStyle(e),o=["--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","--inverse-primary","--inverse-on-primary"];for(let i=0;i<o.length;i++)u.light+=o[i]+":"+n.getPropertyValue(o[i])+";",u.dark+=o[i]+":"+r.getPropertyValue(o[i])+";";return document.body.removeChild(t),document.body.removeChild(e),u},nt=t=>{if(!t||!p.materialDynamicColors)return et();const e=/dark/i.test(document.body.className)?"dark":"light";return(t==null?void 0:t.light)&&(t==null?void 0:t.dark)?(u.light=t.light,u.dark=t.dark,document.body.setAttribute("style",t[e]),t):p.materialDynamicColors(t).then(n=>{const r=o=>{let i="";for(const l in o){const a=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),d=o[l];i+="--"+a+":"+d+";"}return i};return u.light=r(n.light),u.dark=r(n.dark),document.body.setAttribute("style",u[e]),u})},rt=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),p.materialDynamicColors&&document.body.setAttribute("style",u[t]),t):/dark/i.test(document.body.className)?"dark":"light",at=()=>{if(!w)return w=new MutationObserver(J),w.observe(document.body,{childList:!0,subtree:!0}),E()},E=(t,e)=>{if(t){if(t==="setup")return at();if(t==="guid")return q();if(t==="mode")return rt(e);if(t==="theme")return nt(e);const a=g(t),d=g("[data-ui='#"+a.id+"']");P(d,a,e)}f("[data-ui]").forEach(a=>v(a,"click",V)),f(".field > label").forEach(a=>v(a,"click",W)),f(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(a=>{v(a,"focus",Z),v(a,"blur",j),L(a)}),f(".field > input[type=file]").forEach(a=>{v(a,"change",K),A(a)}),f(".slider > input[type=range]").forEach(a=>{v(a,"input",H),F(a)})};return p.addEventListener&&p.addEventListener("load",()=>E("setup")),p.beercss=E,p.ui=E,p.ui})();
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": "3.2.2",
5
+ "version": "3.2.3",
6
6
  "name": "beercss",
7
7
  "license": "MIT",
8
8
  "type": "module",
package/src/cdn/beer.ts CHANGED
@@ -296,7 +296,7 @@ export default (() => {
296
296
  if (isNav) {
297
297
  const elements = queryAll("dialog, a, .overlay", container);
298
298
  elements.forEach((x: any) => {
299
- x.removeClass(x, "active");
299
+ removeClass(x, "active");
300
300
  if (x.open) x.close();
301
301
  });
302
302
  }