beercss 3.2.3 → 3.2.4
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 +22 -6
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.4/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
114
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.4/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.4/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.4/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.4/dist/cdn/beer.min.css" rel="stylesheet">
|
|
184
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.2.4/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
|
|
1
|
+
export default(()=>{const v=globalThis;let m=null,$=null,A=null,C;const u={light:"",dark:""},B=async t=>await new Promise(e=>setTimeout(e,t)),I=()=>"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)},h=(t,e,n)=>{t.addEventListener(e,n,!0)},W=(t,e,n)=>{t.removeEventListener(e,n,!0)},j=(t,e)=>e==null?void 0:e.parentNode.insertBefore(t,e),N=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},V=(t,e)=>{if(t.offsetWidth>0)return t.offsetWidth;if(!C){const n=document.createElement("canvas");n.style.display="none",document.body.append(n),C=n.getContext("2d")}return C.font=e,C.measureText(t.textContent).width},L=t=>{const e=t;k(e,"number")&&!e.value&&(e.value="");const n=b(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=V(r,"0.75rem Arial"),a=c(r,"active")?l:Math.round(l/1.33);a=a/16;const d=c(n,"round")?1.25:.75,p=a+d+.5;e.style.clipPath=`polygon(0% 0%, ${d}rem 0%, ${d}rem 0.5rem, ${p}rem 0.5rem, ${p}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")&&M(t)},Z=t=>{const e=t.currentTarget;x(e,"input")||M(e)},z=t=>{const e=t.currentTarget,n=g("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",b(e));n&&n.focus()},H=t=>{const e=t.currentTarget;L(e)},K=t=>{const e=t.currentTarget;L(e)},F=t=>{const e=t.currentTarget;f("menu.active").forEach(r=>s(r,"active")),W(e,"click",F)},G=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},J=t=>{const e=t.currentTarget;P(e)},Q=t=>{const e=t.currentTarget;P(e,t)},U=t=>{const e=t.currentTarget;_(e)},S=()=>{$&&clearTimeout($),$=setTimeout(()=>{w()},180)},P=(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=N(t);!r||!k(r,"text")||(r.value=Array.from(n.files).map(o=>o.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",Q),L(r))},_=t=>{const e=b(t),n=g("span",e),r=f("input",e),o=g(".tooltip",e);if(!r.length||!n)return;const i=[],l=[];for(let E=0;E<r.length;E++){const D=parseFloat(r[E].min||"0"),ct=parseFloat(r[E].max||"100"),q=parseFloat(r[E].value||"0"),st=(q-D)*100/(ct-D);i.push(st),l.push(q)}o&&o.textContent!=l.join()&&(o.innerHTML=l.join());let a=i[0],d=0,p=100-d-a;r.length>1&&(a=Math.abs(i[1]-i[0]),d=i[1]>i[0]?i[0]:i[1],p=100-d-a),n.style.left=`${d}%`,n.style.right=`${p}%`},M=(t,e,n)=>{if(e||(e=g(t.getAttribute("data-ui"))),x(e,"dialog"))return tt(t,e);if(x(e,"menu"))return Y(t,e);if(c(e,"toast"))return et(t,e,n);if(c(e,"page"))return X(t,e);if(c(e,"progress"))return nt(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")},X=(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")},Y=(t,e)=>{if(T(t),c(e,"active"))return s(e,"active");f("menu.active").forEach(r=>s(r,"active")),y(e,"active"),h(document.body,"click",F)},tt=async(t,e)=>{T(t);let n=N(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"}),j(n,e),await B(90)),n.onclick=()=>{i||(s(t,"active"),s(e,"active"),s(n,"active"),r.close())},a&&f("dialog, a, .overlay",l).forEach(p=>{s(p,"active"),p.open&&p.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())},et=(t,e,n)=>{T(t),f(".toast.active").forEach(o=>s(o,"active")),y(e,"active"),h(e,"click",G),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},nt=(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}%)`)},rt=()=>{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},at=t=>{if(!t||!v.materialDynamicColors)return rt();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):v.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})},it=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),v.materialDynamicColors&&document.body.setAttribute("style",u[t]),t):/dark/i.test(document.body.className)?"dark":"light",ot=()=>{if(!A)return A=new MutationObserver(S),A.observe(document.body,{childList:!0,subtree:!0}),S()},w=(t,e)=>{if(t){if(t==="setup")return void ot();if(t==="guid")return I();if(t==="mode")return it(e);if(t==="theme")return at(e);const a=g(t),d=g("[data-ui='#"+a.id+"']");M(d,a,e)}f("[data-ui]").forEach(a=>h(a,"click",Z)),f(".field > label").forEach(a=>h(a,"click",z)),f(".field > input:not([type=file], [type=checkbox], [type=radio]), .field > select, .field > textarea").forEach(a=>{h(a,"focus",H),h(a,"blur",K),L(a)}),f(".field > input[type=file]").forEach(a=>{h(a,"change",J),P(a)}),f(".slider > input[type=range]").forEach(a=>{h(a,"input",U),_(a)})};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.4",
|
|
6
6
|
"name": "beercss",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"type": "module",
|
package/src/cdn/beer.ts
CHANGED
|
@@ -3,6 +3,7 @@ export default (() => {
|
|
|
3
3
|
let _timeoutToast: ReturnType<typeof setTimeout> = null;
|
|
4
4
|
let _timeoutMutation: ReturnType<typeof setTimeout> = null;
|
|
5
5
|
let _mutation: MutationObserver = null;
|
|
6
|
+
let _canvas:CanvasRenderingContext2D;
|
|
6
7
|
const _lastTheme: IBeerCssTheme = {
|
|
7
8
|
light: "",
|
|
8
9
|
dark: "",
|
|
@@ -88,6 +89,20 @@ export default (() => {
|
|
|
88
89
|
return element;
|
|
89
90
|
};
|
|
90
91
|
|
|
92
|
+
const textWidth = (element: HTMLElement, font: string): number => {
|
|
93
|
+
if (element.offsetWidth > 0) return element.offsetWidth;
|
|
94
|
+
|
|
95
|
+
if (!_canvas) {
|
|
96
|
+
const canvasElement = document.createElement("canvas") as HTMLCanvasElement;
|
|
97
|
+
canvasElement.style.display = "none";
|
|
98
|
+
document.body.append(canvasElement);
|
|
99
|
+
_canvas = canvasElement.getContext("2d");
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
_canvas.font = font;
|
|
103
|
+
return _canvas.measureText(element.textContent).width;
|
|
104
|
+
}
|
|
105
|
+
|
|
91
106
|
const updateInput = (target: Element) => {
|
|
92
107
|
const input = target as HTMLInputElement;
|
|
93
108
|
if (hasType(input, "number") && !input.value) input.value = "";
|
|
@@ -99,7 +114,8 @@ export default (() => {
|
|
|
99
114
|
|
|
100
115
|
if (toActive) {
|
|
101
116
|
if (isBorder && label) {
|
|
102
|
-
let
|
|
117
|
+
let labelWidth = textWidth(label, "0.75rem Arial");
|
|
118
|
+
let width = hasClass(label, "active") ? labelWidth : Math.round(labelWidth / 1.33);
|
|
103
119
|
width = width / 16;
|
|
104
120
|
const start = hasClass(parentTarget, "round") ? 1.25 : 0.75;
|
|
105
121
|
const end = width + start + 0.5;
|
|
@@ -122,7 +138,7 @@ export default (() => {
|
|
|
122
138
|
|
|
123
139
|
const onClickLabel = (e: Event) => {
|
|
124
140
|
const target = e.currentTarget as Element;
|
|
125
|
-
const input = query("input:not([type=file]
|
|
141
|
+
const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", parent(target)) as HTMLElement;
|
|
126
142
|
if (input) input.focus();
|
|
127
143
|
};
|
|
128
144
|
|
|
@@ -207,7 +223,7 @@ export default (() => {
|
|
|
207
223
|
values.push(value);
|
|
208
224
|
}
|
|
209
225
|
|
|
210
|
-
if (tooltip
|
|
226
|
+
if (tooltip && tooltip.textContent != values.join()) tooltip.innerHTML = values.join();
|
|
211
227
|
|
|
212
228
|
let percent = percents[0];
|
|
213
229
|
let left = 0;
|
|
@@ -419,12 +435,12 @@ export default (() => {
|
|
|
419
435
|
if (_mutation) return;
|
|
420
436
|
_mutation = new MutationObserver(onMutation);
|
|
421
437
|
_mutation.observe(document.body, { childList: true, subtree: true });
|
|
422
|
-
return
|
|
438
|
+
return onMutation();
|
|
423
439
|
};
|
|
424
440
|
|
|
425
441
|
const ui = (selector?: string | Element, options?: string | number | IBeerCssTheme): string | IBeerCssTheme | Promise<IBeerCssTheme> => {
|
|
426
442
|
if (selector) {
|
|
427
|
-
if (selector === "setup") return setup();
|
|
443
|
+
if (selector === "setup") return void setup();
|
|
428
444
|
if (selector === "guid") return guid();
|
|
429
445
|
if (selector === "mode") return mode(options);
|
|
430
446
|
if (selector === "theme") return theme(options);
|
|
@@ -440,7 +456,7 @@ export default (() => {
|
|
|
440
456
|
const labels = queryAll(".field > label");
|
|
441
457
|
labels.forEach((x: HTMLLabelElement) => on(x, "click", onClickLabel));
|
|
442
458
|
|
|
443
|
-
const inputs = queryAll(".field > input:not([type=file]
|
|
459
|
+
const inputs = queryAll(".field > input:not([type=file], [type=checkbox], [type=radio]), .field > select, .field > textarea");
|
|
444
460
|
inputs.forEach((x: Element) => {
|
|
445
461
|
on(x, "focus", onFocusInput);
|
|
446
462
|
on(x, "blur", onBlurInput);
|