beercss 2.0.15 → 2.0.16

package/README.md

@@ -94,8 +94,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
 From jsdelivr.net.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@2.0.15/dist/cdn/beer.min.css" rel="stylesheet" />
-<script src="https://cdn.jsdelivr.net/npm/beercss@2.0.15/dist/cdn/beer.min.js" type="text/javascript"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@2.0.16/dist/cdn/beer.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/beercss@2.0.16/dist/cdn/beer.min.js" type="text/javascript"></script>
 <script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.9/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
 ```
 

package/dist/cdn/beer.min.js

@@ -1 +1 @@
-(()=>{const e=(e,t)=>{try{return e instanceof HTMLElement?e:(t||document).querySelector(e)}catch{}},t=(e,t)=>{try{return Array.isArray(e)?e:(t||document).querySelectorAll(e)}catch{}},r=(e,t)=>!!e&&e.classList.contains(t),a=(e,t)=>{e&&e.classList.add(t)},i=(e,t)=>{e&&e.classList.remove(t)},c=(e,t,r)=>{e.addEventListener(t,r,!0)},o=e=>{if(e)return e.parentNode},l=t=>{let c=o(t),l=e("label",c),n=r(c,"border")&&!r(c,"fill");if(document.activeElement==t||t.value||"date"==t.type){if(n&&l){let e=Math.round(l.offsetWidth/(l.offsetHeight/14)),a=r(c,"round")?20:12,i=e+a+8;t.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 8rem, ${i}rem 8rem, ${i}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else t.style.clipPath="";a(l,"active")}else t.style.clipPath="",i(l,"active")},n=e=>{if(!/input/i.test(e.tagName))return g(e.currentTarget)},d=t=>{e("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",o(t.currentTarget)).focus()},u=e=>{l(e.currentTarget),e.currentTarget.getAttribute("data-ui")&&g(e.currentTarget)},s=e=>{l(e.currentTarget),e.currentTarget.getAttribute("data-ui")&&g(e.currentTarget)},m=e=>{var r,a,c;t(".dropdown.active").forEach((e=>{i(e,"active")})),r=e.currentTarget,a="click",c=m,r.removeEventListener(a,c,!0)},v=e=>{i(e.currentTarget,"active"),f&&clearTimeout(f)};let f=null;const g=(t,c,o)=>(c||(c=e(t.getAttribute("data-ui"))),r(c,"modal")?p(t,c,o):r(c,"dropdown")?x(t,c,o):r(c,"toast")?b(t,c,o):r(c,"page")?h(t,c,o):r(c,"progress")?k(t,c,o):(y(t,c,o),r(c,"active")?i(c,"active"):void a(c,"active"))),y=(e,c,l)=>{let n=o(e);r(n,"tabs")&&(t("a",n).forEach((e=>{i(e,"active")})),a(e,"active"))},h=(e,t,c)=>{y(e,t,c);let l=o(t);for(let e=0;e<l.children.length;e++)r(l.children[e],"page")&&i(l.children[e],"active");a(t,"active")},x=(e,o,l)=>{if(y(e,o,l),r(o,"active"))return i(o,"active");t(".dropdown.active").forEach((e=>{i(e,"active")})),a(o,"active"),c(document,"click",m)},p=(e,c,l)=>{y(e,c,l);let n=(e=>{if(e)return e.previousElementSibling})(c);r(n,"overlay")||(n=(e=>{let t=document.createElement("div");for(let r in e)t[r]=e[r];return t})({className:"overlay active"}),((e,t)=>{if(t)t.parentNode.insertBefore(e,t)})(n,c)),n.onclick=()=>{i(e,"active"),i(c,"active"),i(n,"active")};let d=r(c,"active"),u=o(c);if(r(u,"menu")){t(".menu > .modal, .menu > a, .menu > .overlay").forEach((e=>{i(e,"active")}))}d?(i(e,"active"),i(n,"active"),i(c,"active")):(a(e,"active"),a(n,"active"),a(c,"active"))},b=(e,r,o)=>{y(e,r,o),t(".toast.active").forEach((e=>{i(e,"active")})),a(r,"active"),c(r,"click",v),f&&clearTimeout(f),o&&-1==o||(f=setTimeout((()=>{i(r,"active")}),o&&o?o:6e3))},k=(e,t,a)=>r(t,"left")?t.style.clipPath=`polygon(0% 0%, 0% 100%, ${a}% 100%, ${a}% 0%)`:r(t,"top")?t.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${a}%, 0% ${a}%)`:r(t,"right")?t.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-a}% 100%, ${100-a}% 0%)`:r(t,"bottom")?t.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-a}%, 0% ${100-a}%)`:void 0;window.ui=(r,a)=>{if(r){if("guid"==r)return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{let t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}));if("theme"==r)return(e=>{let t={light:"",dark:"",selected:"light"};if(!window.materialDynamicColors)return t;if(!e)return document.body.removeAttribute("style"),t;if(e.from&&e.mode&&e.from[e.mode]){let t={light:e.from.light,dark:e.from.dark,selected:e.mode};return document.body.setAttribute("style",t[e.mode]),t}return window.materialDynamicColors(e.from).then((t=>{const r=e=>{let t="";for(var r in e)t+="--"+r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+": "+e[r]+";";return t};let a={light:r(t.light)+"--active: rgba(0,0,0,.1);--mode: light;",dark:r(t.dark)+"--active: rgba(255,255,255,.2);--mode: dark;",selected:e.mode};return document.body.setAttribute("style",a[e.mode]),a}))})(a);let t=e(r),i=e("[data-ui='#"+t.id+"']");return g(i,t,a)}t("[data-ui]").forEach((e=>{c(e,"click",n)})),t(".field > label").forEach((e=>{c(e,"click",d)})),t(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach((e=>{c(e,"focus",u),c(e,"blur",s),l(e)}))}})();
+(()=>{const e=(e,t)=>{try{return e instanceof HTMLElement?e:(t||document).querySelector(e)}catch{}},t=(e,t)=>{try{return Array.isArray(e)?e:(t||document).querySelectorAll(e)}catch{}},r=(e,t)=>!!e&&e.classList.contains(t),a=(e,t)=>{e&&e.classList.add(t)},i=(e,t)=>{e&&e.classList.remove(t)},c=(e,t,r)=>{e.addEventListener(t,r,!0)},o=e=>{if(e)return e.parentNode},l=t=>{let c=o(t),l=e("label",c),n=r(c,"border")&&!r(c,"fill");if(document.activeElement==t||t.value||"date"==t.type){if(n&&l){let e=r(l,"active")?l.offsetWidth:Math.round(l.offsetWidth/1.33),a=r(c,"round")?20:12,i=e+a+8;t.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 8rem, ${i}rem 8rem, ${i}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else t.style.clipPath="";a(l,"active")}else i(l,"active"),t.style.clipPath="";t.getAttribute("data-ui")&&y(t)},n=e=>{if(!/input/i.test(e.tagName))return y(e.currentTarget)},d=t=>{e("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",o(t.currentTarget)).focus()},u=e=>{l(e.currentTarget)},s=e=>{l(e.currentTarget)},m=e=>{var r,a,c;t(".dropdown.active").forEach((e=>{i(e,"active")})),r=e.currentTarget,a="click",c=m,r.removeEventListener(a,c,!0)},v=e=>{i(e.currentTarget,"active"),f&&clearTimeout(f)};let f=null;const y=(t,c,o)=>(c||(c=e(t.getAttribute("data-ui"))),r(c,"modal")?g(t,c,o):r(c,"dropdown")?p(t,c,o):r(c,"toast")?b(t,c,o):r(c,"page")?x(t,c,o):r(c,"progress")?k(t,c,o):(h(t,c,o),r(c,"active")?i(c,"active"):void a(c,"active"))),h=(e,c,l)=>{let n=o(e);r(n,"tabs")&&(t("a",n).forEach((e=>{i(e,"active")})),a(e,"active"))},x=(e,t,c)=>{h(e,t,c);let l=o(t);for(let e=0;e<l.children.length;e++)r(l.children[e],"page")&&i(l.children[e],"active");a(t,"active")},p=(e,o,l)=>{if(h(e,o,l),r(o,"active"))return i(o,"active");t(".dropdown.active").forEach((e=>{i(e,"active")})),a(o,"active"),c(document,"click",m)},g=(e,c,l)=>{h(e,c,l);let n=(e=>{if(e)return e.previousElementSibling})(c);r(n,"overlay")||(n=(e=>{let t=document.createElement("div");for(let r in e)t[r]=e[r];return t})({className:"overlay active"}),((e,t)=>{if(t)t.parentNode.insertBefore(e,t)})(n,c)),n.onclick=()=>{i(e,"active"),i(c,"active"),i(n,"active")};let d=r(c,"active"),u=o(c);if(r(u,"menu")){t(".menu > .modal, .menu > a, .menu > .overlay").forEach((e=>{i(e,"active")}))}d?(i(e,"active"),i(n,"active"),i(c,"active")):(a(e,"active"),a(n,"active"),a(c,"active"))},b=(e,r,o)=>{h(e,r,o),t(".toast.active").forEach((e=>{i(e,"active")})),a(r,"active"),c(r,"click",v),f&&clearTimeout(f),o&&-1==o||(f=setTimeout((()=>{i(r,"active")}),o&&o?o:6e3))},k=(e,t,a)=>r(t,"left")?t.style.clipPath=`polygon(0% 0%, 0% 100%, ${a}% 100%, ${a}% 0%)`:r(t,"top")?t.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${a}%, 0% ${a}%)`:r(t,"right")?t.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-a}% 100%, ${100-a}% 0%)`:r(t,"bottom")?t.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-a}%, 0% ${100-a}%)`:void 0;window.ui=(r,a)=>{if(r){if("guid"==r)return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{let t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}));if("theme"==r)return(e=>{let t={light:"",dark:"",selected:"light"};if(!window.materialDynamicColors)return t;if(!e)return document.body.removeAttribute("style"),t;if(e.from&&e.mode&&e.from[e.mode]){let t={light:e.from.light,dark:e.from.dark,selected:e.mode};return document.body.setAttribute("style",t[e.mode]),t}return window.materialDynamicColors(e.from).then((t=>{const r=e=>{let t="";for(var r in e)t+="--"+r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+": "+e[r]+";";return t};let a={light:r(t.light)+"--active: rgba(0,0,0,.1);--mode: light;",dark:r(t.dark)+"--active: rgba(255,255,255,.2);--mode: dark;",selected:e.mode};return document.body.setAttribute("style",a[e.mode]),a}))})(a);let t=e(r),i=e("[data-ui='#"+t.id+"']");return y(i,t,a)}t("[data-ui]").forEach((e=>{c(e,"click",n)})),t(".field > label").forEach((e=>{c(e,"click",d)})),t(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach((e=>{c(e,"focus",u),c(e,"blur",s),l(e)}))}})();

package/package.json

@@ -2,7 +2,7 @@
   "author": "Everton and Leonardo",
   "description": "Build material design interfaces in record time... without stress for devs.",
   "homepage": "https://www.beercss.com/",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "name": "beercss",
   "license": "MIT",
   "port": 1234,

package/src/cdn/beer.js

@@ -51,20 +51,6 @@
     return element.parentNode.insertBefore(newElement, element);
   };
 
-  const insert = (newElement, element) => {
-    return (element || document.body).append(newElement);
-  };
-
-  const remove = (element) => {
-    if (!element) return;
-    element.remove();
-  }
-
-  const clone = (element) => {
-    if (!element) return;
-    return element.cloneNode(true);
-  };
-
   const prev = (element) => {
     if (!element) return;
     return element.previousElementSibling;
@@ -92,7 +78,7 @@
 
     if (toActive) {
       if (isBorder && label) {
-        let width = Math.round(label.offsetWidth / (label.offsetHeight / 14));
+        let width = hasClass(label, "active") ? label.offsetWidth : Math.round(label.offsetWidth / 1.33);
         let start = hasClass(parentTarget, "round") ? 20 : 12;
         let end = width + start + 8;
         target.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
@@ -100,9 +86,12 @@
         target.style.clipPath = "";
       addClass(label, "active");
     } else {
-      target.style.clipPath = "";
       removeClass(label, "active");
+      target.style.clipPath = "";
     }
+
+    if (target.getAttribute("data-ui"))
+      open(target);
   }
 
   const onClickElement = (e) => {
@@ -117,16 +106,10 @@
 
   const onFocusInput = (e) => {
     updateInput(e.currentTarget);
-
-    if (e.currentTarget.getAttribute("data-ui"))
-      open(e.currentTarget);
   };
 
   const onBlurInput = (e) => {
     updateInput(e.currentTarget);
-
-    if (e.currentTarget.getAttribute("data-ui"))
-      open(e.currentTarget);
   };
 
   const onClickDocument = (e) => {
@@ -343,7 +326,6 @@
     inputs.forEach((x) => {
       on(x, "focus", onFocusInput);
       on(x, "blur", onBlurInput);
-
       updateInput(x);
     });
   };