beercss 3.1.2 → 3.1.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 +11 -11
- package/dist/cdn/beer.min.js +1 -1
- package/package.json +1 -1
- package/src/cdn/beer.ts +8 -3
package/README.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<a href="https://www.beercss.com" target="_blank" rel="noopener noreferrer"><img src="https://www.beercss.com/logo.png" alt="
|
|
2
|
+
<a href="https://www.beercss.com" target="_blank" rel="noopener noreferrer"><img src="https://www.beercss.com/logo.png" alt="Beer CSS logo"></a>
|
|
3
3
|
</p>
|
|
4
4
|
<p align="center">
|
|
5
5
|
<a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
|
|
6
|
-
<a href="
|
|
7
|
-
<a href="
|
|
6
|
+
<a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
|
|
7
|
+
<a href="https://github.com/beercss/beercss"><img src="https://img.badgesize.io/beercss/beercss/main/dist/cdn/beer.min.css?compression=brotli" alt="Size"></a>
|
|
8
8
|
<a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
|
|
9
9
|
<a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
|
|
10
10
|
<a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
|
|
11
11
|
</p>
|
|
12
12
|
|
|
13
|
-
#
|
|
13
|
+
# Beer CSS
|
|
14
14
|
|
|
15
15
|
Build material design interfaces in record time...
|
|
16
16
|
|
|
@@ -118,19 +118,19 @@ From jsdelivr.net.
|
|
|
118
118
|
|
|
119
119
|
```html
|
|
120
120
|
// with html
|
|
121
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
122
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
121
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
122
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js"></script>
|
|
123
123
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
124
124
|
```
|
|
125
125
|
|
|
126
126
|
```css
|
|
127
127
|
// with css
|
|
128
|
-
@import "https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
128
|
+
@import "https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css";
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
```js
|
|
132
132
|
// with javascript
|
|
133
|
-
import "https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
133
|
+
import "https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js";
|
|
134
134
|
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js";
|
|
135
135
|
```
|
|
136
136
|
|
|
@@ -200,8 +200,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
200
200
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
201
201
|
<meta name="google" content="notranslate">
|
|
202
202
|
<title>Hello world</title>
|
|
203
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
204
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.
|
|
203
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css" rel="stylesheet">
|
|
204
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js"></script>
|
|
205
205
|
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
206
206
|
</head>
|
|
207
207
|
<body class="light">
|
|
@@ -261,7 +261,7 @@ Complete documentation and examples available at:
|
|
|
261
261
|
|
|
262
262
|
## Contributing guide
|
|
263
263
|
|
|
264
|
-
Hi! We are really excited that you are interested in contributing to
|
|
264
|
+
Hi! We are really excited that you are interested in contributing to Beer CSS! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
|
|
265
265
|
|
|
266
266
|
https://github.com/beercss/beercss/blob/main/CONTRIBUTING.md
|
|
267
267
|
|
package/dist/cdn/beer.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default(()=>{const y=globalThis;let m=null,E=null,C=null;const l={light:"",dark:""},
|
|
1
|
+
export default(()=>{const y=globalThis;let m=null,E=null,C=null;const l={light:"",dark:""},D=async t=>await new Promise(e=>setTimeout(e,t)),_=()=>"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{}},d=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelectorAll(t):t}catch{}},c=(t,e)=>t?t.classList.contains(e):!1,w=(t,e)=>t?t.tagName.toLocaleLowerCase()==e:!1,p=(t,e)=>{!t||t.classList.add(e)},s=(t,e)=>{!t||t.classList.remove(e)},v=(t,e,n)=>{t.addEventListener(e,n,!0)},q=(t,e,n)=>{t.removeEventListener(e,n,!0)},B=(t,e)=>{if(!!e)return e.parentNode.insertBefore(t,e)},A=t=>{if(!!t)return t.previousElementSibling},I=t=>{if(!!t)return t.nextElementSibling},h=t=>{if(!!t)return t.parentElement},O=t=>{const e=document.createElement("div");for(const n in t)e[n]=t[n];return e},T=t=>{const e=t,n=h(t),r=g("label",n),i=c(n,"border")&&!c(n,"fill");if(document.activeElement===t||e.value||g("[selected]",e)||/date|time/.test(e.type)){if(i&&r){let u=c(r,"active")?r.offsetWidth:Math.round(r.offsetWidth/1.33);u=u/16;const a=c(n,"round")?1.25:.75,f=u+a+.5;e.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 0.5rem, ${f}rem 0.5rem, ${f}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";p(r,"active")}else s(r,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&$(t)},R=t=>{const e=t.currentTarget;w(e,"input")||$(e)},V=t=>{const e=t.currentTarget,n=g("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",h(e));n&&n.focus()},W=t=>{const e=t.currentTarget;T(e)},Z=t=>{const e=t.currentTarget;T(e)},P=t=>{const e=t.currentTarget;d(".dropdown.active").forEach(r=>s(r,"active")),q(e,"click",P)},j=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},z=t=>{const e=t.currentTarget;L(e)},K=t=>{const e=t.currentTarget;L(e,t)},G=t=>{const e=t.currentTarget;F(e)},H=()=>{E&&clearTimeout(E),E=setTimeout(()=>{x()},180)},L=(t,e)=>{if(e){if(e.key!=="Enter")return;const i=e.currentTarget,o=I(i);return!o||!/file/i.test(o.type)?void 0:o.click()}const n=t,r=A(t);!r||!/text/i.test(r.type)||(r.value=Array.from(n.files).map(i=>i.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",K),T(r))},F=t=>{const e=h(t),n=g("span",e),r=d("input",e),i=g(".tooltip",e);if(!r.length||!n)return;const o=[],u=[];for(let k=0;k<r.length;k++){const S=parseFloat(r[k].min||"0"),at=parseFloat(r[k].max||"100"),M=parseFloat(r[k].value||"0"),ot=(M-S)*100/(at-S);o.push(ot),u.push(M)}i&&(i.textContent=u.join());let a=o[0],f=0,N=100-f-a;r.length>1&&(a=Math.abs(o[1]-o[0]),f=o[1]>o[0]?o[0]:o[1],N=100-f-a),n.style.left=`${f}%`,n.style.right=`${N}%`},$=(t,e,n)=>{if(e||(e=g(t.getAttribute("data-ui"))),c(e,"modal"))return U(t,e);if(c(e,"dropdown"))return Q(t,e);if(c(e,"toast"))return X(t,e,n);if(c(e,"page"))return J(t,e);if(c(e,"progress"))return Y(e,n);if(b(t),c(e,"active"))return s(e,"active");p(e,"active")},b=t=>{const e=h(t);if(!c(e,"tabs"))return;d("a",e).forEach(r=>s(r,"active")),p(t,"active")},J=(t,e)=>{b(t);const n=h(e);for(let r=0;r<n.children.length;r++)c(n.children[r],"page")&&s(n.children[r],"active");p(e,"active")},Q=(t,e)=>{if(b(t),c(e,"active"))return s(e,"active");d(".dropdown.active").forEach(r=>s(r,"active")),p(e,"active"),v(document.body,"click",P)},U=async(t,e)=>{b(t);let n=A(e);c(n,"overlay")||(n=O({className:"overlay"}),B(n,e),await D(90)),n.onclick=()=>{s(t,"active"),s(e,"active"),s(n,"active")};const r=c(e,"active"),i=h(e);w(i,"nav")&&d(".modal, a, .overlay",i).forEach(u=>s(u,"active")),r?(s(t,"active"),s(n,"active"),s(e,"active")):(!w(t,"button")&&!c(t,"button")&&!c(t,"chip")&&p(t,"active"),p(n,"active"),p(e,"active"))},X=(t,e,n)=>{b(t),d(".toast.active").forEach(i=>s(i,"active")),p(e,"active"),v(e,"click",j),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},Y=(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}%)`)},tt=()=>{if(l.light&&l.dark)return l;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),i=["--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 o=0;o<i.length;o++)l.light+=i[o]+":"+n.getPropertyValue(i[o])+";",l.dark+=i[o]+":"+r.getPropertyValue(i[o])+";";return document.body.removeChild(t),document.body.removeChild(e),l},et=t=>{if(!t||!y.materialDynamicColors)return tt();const e=/dark/i.test(document.body.className)?"dark":"light";return(t==null?void 0:t.light)&&(t==null?void 0:t.dark)?(l.light=t.light,l.dark=t.dark,document.body.setAttribute("style",t[e]),t):y.materialDynamicColors(t).then(n=>{const r=i=>{let o="";for(const u in i){const a=u.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),f=i[u];o+="--"+a+":"+f+";"}return o};return l.light=r(n.light),l.dark=r(n.dark),document.body.setAttribute("style",l[e]),l})},nt=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),y.materialDynamicColors&&document.body.setAttribute("style",l[t]),t):/dark/i.test(document.body.className)?"dark":"light",rt=()=>{if(!C)return C=new MutationObserver(H),C.observe(document.body,{childList:!0,subtree:!0}),x()},x=(t,e)=>{if(t){if(t==="setup")return rt();if(t==="guid")return _();if(t==="mode")return nt(e);if(t==="theme")return et(e);const a=g(t),f=g("[data-ui='#"+a.id+"']");$(f,a,e)}d("[data-ui]").forEach(a=>v(a,"click",R)),d(".field > label").forEach(a=>v(a,"click",V)),d(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(a=>{v(a,"focus",W),v(a,"blur",Z),T(a)}),d(".field > input[type=file]").forEach(a=>{v(a,"change",z),L(a)}),d(".slider > input[type=range]").forEach(a=>{v(a,"input",G),F(a)})};return y.addEventListener&&y.addEventListener("load",()=>x("setup")),y.beercss=x,y.ui=x,y.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.1.
|
|
5
|
+
"version": "3.1.3",
|
|
6
6
|
"name": "beercss",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"type": "module",
|
package/src/cdn/beer.ts
CHANGED
|
@@ -41,6 +41,11 @@ export default (() => {
|
|
|
41
41
|
return element.classList.contains(name);
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
+
const hasTag = (element: Element, name: string): boolean => {
|
|
45
|
+
if (!element) return false;
|
|
46
|
+
return element.tagName.toLocaleLowerCase() == name;
|
|
47
|
+
};
|
|
48
|
+
|
|
44
49
|
const addClass = (element: Element, name: string) => {
|
|
45
50
|
if (!element) return;
|
|
46
51
|
element.classList.add(name);
|
|
@@ -113,7 +118,7 @@ export default (() => {
|
|
|
113
118
|
|
|
114
119
|
const onClickElement = (e: Event) => {
|
|
115
120
|
const target = e.currentTarget as HTMLElement;
|
|
116
|
-
if (
|
|
121
|
+
if (hasTag(target, "input")) return;
|
|
117
122
|
open(target);
|
|
118
123
|
};
|
|
119
124
|
|
|
@@ -284,7 +289,7 @@ export default (() => {
|
|
|
284
289
|
|
|
285
290
|
const isActive = hasClass(to, "active");
|
|
286
291
|
const container = parent(to);
|
|
287
|
-
if (
|
|
292
|
+
if (hasTag(container, "nav")) {
|
|
288
293
|
const elements = queryAll(".modal, a, .overlay", container);
|
|
289
294
|
elements.forEach((x: Element) => removeClass(x, "active"));
|
|
290
295
|
}
|
|
@@ -294,7 +299,7 @@ export default (() => {
|
|
|
294
299
|
removeClass(overlay, "active");
|
|
295
300
|
removeClass(to, "active");
|
|
296
301
|
} else {
|
|
297
|
-
if (
|
|
302
|
+
if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
|
|
298
303
|
addClass(overlay, "active");
|
|
299
304
|
addClass(to, "active");
|
|
300
305
|
}
|