beercss 3.2.6 → 3.2.7
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 +6 -6
- package/dist/cdn/beer.min.js +1 -1
- package/package.json +1 -1
- package/src/cdn/beer.ts +1 -1
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.
|
|
114
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.
|
|
113
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.2.7/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
114
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.7/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.
|
|
120
|
+
@import "https://cdn.jsdelivr.net/npm/beercss@3.2.7/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.
|
|
125
|
+
import "https://cdn.jsdelivr.net/npm/beercss@3.2.7/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.
|
|
184
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.
|
|
183
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.2.7/dist/cdn/beer.min.css" rel="stylesheet">
|
|
184
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.7/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">
|
package/dist/cdn/beer.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default(()=>{const v=globalThis;let
|
|
1
|
+
export default(()=>{const v=globalThis;let x=null,A=null,$=null,E;const l={light:"",dark:""};async function I(t){return await new Promise(n=>setTimeout(n,t))}function W(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const n=Math.random()*16|0;return(t==="x"?n:n&3|8).toString(16)})}function y(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelector(t):t}catch{}}function d(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelectorAll(t):t}catch{}}function c(t,n){return t==null?void 0:t.classList.contains(n)}function C(t,n){return(t==null?void 0:t.tagName.toLowerCase())===n}function b(t,n){return(t==null?void 0:t.type.toLowerCase())===n}function p(t,n){t==null||t.classList.add(n)}function u(t,n){t==null||t.classList.remove(n)}function h(t,n,e){t.addEventListener(n,e,!0)}function j(t,n,e){t.removeEventListener(n,e,!0)}function O(t,n){return n==null?void 0:n.parentNode.insertBefore(t,n)}function N(t){return t==null?void 0:t.previousElementSibling}function R(t){return t==null?void 0:t.nextElementSibling}function m(t){return t==null?void 0:t.parentElement}function V(t){const n=document.createElement("div");for(const e in t)n[e]=t[e];return n}function Z(t,n){if(t.offsetWidth>0)return t.offsetWidth;if(!E){const e=document.createElement("canvas");e.style.display="none",document.body.append(e),E=e.getContext("2d")}return E.font=n,E.measureText(t.textContent).width}function L(t){const n=t;b(n,"number")&&!n.value&&(n.value="");const e=m(t),r=y("label",e),a=c(e,"border")&&!c(e,"fill");if(document.activeElement===t||n.value||y("[selected]",n)||b(n,"date")||b(n,"time")||b(n,"datetime-local")){if(a&&r){const s=Z(r,"0.75rem Arial");let o=c(r,"active")?s:Math.round(s/1.33);o=o/16;const f=c(e,"round")?1.25:.75,g=o+f+.5;n.style.clipPath=`polygon(0% 0%, ${f}rem 0%, ${f}rem 0.5rem, ${g}rem 0.5rem, ${g}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else n.style.clipPath="";p(r,"active")}else u(r,"active"),n.style.clipPath="";t.getAttribute("data-ui")&&M(t)}function z(t){const n=t.currentTarget;M(n,null,null,t)}function H(t){const n=t.currentTarget,e=y("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",m(n));e&&e.focus()}function K(t){const n=t.currentTarget;L(n)}function G(t){const n=t.currentTarget;L(n)}function S(t){j(document.body,"click",S);const n=t.target;d("menu.active").forEach(r=>F(n,r,t))}function J(t){const n=t.currentTarget;u(n,"active"),x&&clearTimeout(x)}function Q(t){const n=t.currentTarget;P(n)}function U(t){const n=t.currentTarget;P(n,t)}function X(t){const n=t.currentTarget;D(n)}function _(){A&&clearTimeout(A),A=setTimeout(()=>{w()},180)}function P(t,n){if(n){if(n.key!=="Enter")return;const a=n.currentTarget,i=R(a);return!i||!b(i,"file")?void 0:i.click()}const e=t,r=N(t);!r||!b(r,"text")||(r.value=Array.from(e.files).map(a=>a.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",U),L(r))}function D(t){const n=m(t),e=y("span",n),r=d("input",n),a=y(".tooltip",n);if(!r.length||!e)return;const i=[],s=[];for(let T=0;T<r.length;T++){const q=parseFloat(r[T].min||"0"),ct=parseFloat(r[T].max||"100"),B=parseFloat(r[T].value||"0"),ut=(B-q)*100/(ct-q);i.push(ut),s.push(B)}a&&a.textContent!==s.join()&&(a.innerHTML=s.join());let o=i[0],f=0,g=100-f-o;r.length>1&&(o=Math.abs(i[1]-i[0]),f=i[1]>i[0]?i[0]:i[1],g=100-f-o),e.style.left=`${f}%`,e.style.right=`${g}%`}function M(t,n,e,r){if(n||(n=y(t.getAttribute("data-ui"))),C(n,"dialog"))return tt(t,n);if(C(n,"menu"))return F(t,n,r);if(c(n,"toast"))return nt(t,n,e);if(c(n,"page"))return Y(t,n);if(c(n,"progress"))return et(n,e);if(k(t),c(n,"active"))return u(n,"active");p(n,"active")}function k(t){const n=m(t);if(!c(n,"tabs"))return;d("a",n).forEach(r=>u(r,"active")),p(t,"active")}function Y(t,n){k(t);const e=m(n);for(let r=0;r<e.children.length;r++)c(e.children[r],"page")&&u(e.children[r],"active");p(n,"active")}function F(t,n,e){if(h(document.body,"click",S),e==null||e.stopPropagation(),k(t),c(n,"active")){if(!e)return u(n,"active");const a=e.target,i=y(a.getAttribute("data-ui")),s=a.closest("menu"),o=!y("menu",a.closest("[data-ui]"));return i&&i!==s?F(a,i):!i&&!o&&s?!1:u(n,"active")}d("menu.active").forEach(a=>u(a,"active")),p(n,"active")}async function tt(t,n){k(t);let e=N(n);const r=n,a=c(n,"active")||r.open,i=c(n,"modal"),s=m(n),o=C(s,"nav");c(e,"overlay")||(e=V({className:"overlay"}),O(e,n),await I(90)),e.onclick=()=>{i||(u(t,"active"),u(n,"active"),u(e,"active"),r.close())},o&&d("dialog, a, .overlay",s).forEach(g=>{u(g,"active"),g.open&&g.close()}),a?(u(t,"active"),u(e,"active"),u(n,"active"),r.close()):(!C(t,"button")&&!c(t,"button")&&!c(t,"chip")&&p(t,"active"),p(e,"active"),p(n,"active"),i?r.showModal():r.show())}function nt(t,n,e){k(t),d(".toast.active").forEach(a=>u(a,"active")),p(n,"active"),h(n,"click",J),x&&clearTimeout(x),e!==-1&&(x=setTimeout(()=>{u(n,"active")},e!=null?e:6e3))}function et(t,n){const e=t;if(c(e,"left")){e.style.clipPath=`polygon(0% 0%, 0% 100%, ${n}% 100%, ${n}% 0%)`;return}if(c(e,"top")){e.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${n}%, 0% ${n}%)`;return}if(c(e,"right")){e.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-n}% 100%, ${100-n}% 0%)`;return}c(e,"bottom")&&(e.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-n}%, 0% ${100-n}%)`)}function rt(){if(l.light&&l.dark)return l;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const n=document.createElement("body");n.className="dark",document.body.appendChild(n);const e=getComputedStyle(t),r=getComputedStyle(n),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","--inverse-primary","--inverse-on-primary"];for(let i=0;i<a.length;i++)l.light+=a[i]+":"+e.getPropertyValue(a[i])+";",l.dark+=a[i]+":"+r.getPropertyValue(a[i])+";";return document.body.removeChild(t),document.body.removeChild(n),l}function it(t){if(!t||!v.materialDynamicColors)return rt();const n=/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[n]),t):v.materialDynamicColors(t).then(e=>{const r=a=>{let i="";for(const s in a){const o=s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),f=a[s];i+="--"+o+":"+f+";"}return i};return l.light=r(e.light),l.dark=r(e.dark),document.body.setAttribute("style",l[n]),l})}function at(t){return t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),v.materialDynamicColors&&document.body.setAttribute("style",l[t]),t):/dark/i.test(document.body.className)?"dark":"light"}function ot(){$||($=new MutationObserver(_),$.observe(document.body,{childList:!0,subtree:!0}),_())}function w(t,n){if(t){if(t==="setup")return ot();if(t==="guid")return W();if(t==="mode")return at(n);if(t==="theme")return it(n);const o=y(t),f=y("[data-ui='#"+o.id+"']");M(f,o,n)}d("[data-ui]").forEach(o=>h(o,"click",z)),d(".field > label").forEach(o=>h(o,"click",H)),d(".field > input:not([type=file], [type=checkbox], [type=radio]), .field > select, .field > textarea").forEach(o=>{h(o,"focus",K),h(o,"blur",G),L(o)}),d(".field > input[type=file]").forEach(o=>{h(o,"change",Q),P(o)}),d(".slider > input[type=range]").forEach(o=>{h(o,"input",X),D(o)})}return v.addEventListener&&v.addEventListener("load",()=>w("setup")),v.beercss=w,v.ui=w,v.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.
|
|
5
|
+
"version": "3.2.7",
|
|
6
6
|
"name": "beercss",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"type": "module",
|
package/src/cdn/beer.ts
CHANGED
|
@@ -110,7 +110,7 @@ export default (() => {
|
|
|
110
110
|
const parentTarget = parent(target);
|
|
111
111
|
const label = query("label", parentTarget) as HTMLLabelElement;
|
|
112
112
|
const isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
|
|
113
|
-
const toActive = document.activeElement === target || input.value || query("[selected]", input) || hasType(input, "date") || hasType(input, "time");
|
|
113
|
+
const toActive = document.activeElement === target || input.value || query("[selected]", input) || hasType(input, "date") || hasType(input, "time") || hasType(input, "datetime-local");
|
|
114
114
|
|
|
115
115
|
if (toActive) {
|
|
116
116
|
if (isBorder && label) {
|