beercss 2.0.14 → 2.0.15

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.14/dist/cdn/beer.min.css" rel="stylesheet" />
-<script src="https://cdn.jsdelivr.net/npm/beercss@2.0.14/dist/cdn/beer.min.js" type="text/javascript"></script>
+<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>
 <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=(e,t,a)=>{if(!r(t,"active"))return e.style.clipPath="";if(r(a,"border")&&!r(a,"fill")){let i=Math.round(t.offsetWidth/(t.offsetHeight/14)),c=r(a,"round")?20:12,o=i+c+8;e.style.clipPath=`polygon(0% 0%, ${c}rem 0%, ${c}rem 8rem, ${o}rem 8rem, ${o}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}},n=e=>{if(!/input/i.test(e.tagName))return g(e.currentTarget)},u=t=>{e("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",o(t.currentTarget)).focus()},d=t=>{let r=o(t.currentTarget),i=e("label",r);a(i,"active"),l(t.currentTarget,i,r),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},v=t=>{let r=e("label",o(t.currentTarget));t.currentTarget.value||"date"==t.currentTarget.type||(i(r,"active"),t.currentTarget.style.clipPath=""),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},s=e=>{var r,a,c;t(".dropdown.active").forEach((e=>{i(e,"active")})),r=e.currentTarget,a="click",c=s,r.removeEventListener(a,c,!0)},m=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")?x(t,c,o):r(c,"dropdown")?p(t,c,o):r(c,"toast")?b(t,c,o):r(c,"page")?h(t,c,o):r(c,"progress")?T(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")},p=(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",s)},x=(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 u=r(c,"active"),d=o(c);if(r(d,"menu")){t(".menu > .modal, .menu > a, .menu > .overlay").forEach((e=>{i(e,"active")}))}u?(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",m),f&&clearTimeout(f),o&&-1==o||(f=setTimeout((()=>{i(r,"active")}),o&&o?o:6e3))},T=(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,s)=>{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}))})(s);let t=e(r),a=e("[data-ui='#"+t.id+"']");return g(a,t,s)}t("[data-ui]").forEach((e=>{c(e,"click",n)})),t(".field > label").forEach((e=>{c(e,"click",u)})),t(".field > input:not([type=file]):not([type=checkbox]):not([type=radio], select, textarea").forEach((t=>{let r=o(t),n=e("label",r);c(t,"focus",d),c(t,"blur",v),t.value||"date"==t.type?a(n,"active"):i(n,"active"),l(t,n,r)}))}})();
+(()=>{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)}))}})();

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.14",
+  "version": "2.0.15",
   "name": "beercss",
   "license": "MIT",
   "port": 1234,

package/src/cdn/beer.js

@@ -84,14 +84,24 @@
     return element;
   };
 
-  const updateInput = (input, label, parentTarget) => {
-    if (!hasClass(label, "active")) return input.style.clipPath = "";
-
-    if (hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill")) {
-      let width = Math.round(label.offsetWidth / (label.offsetHeight / 14));
-      let start = hasClass(parentTarget, "round") ? 20 : 12;
-      let end = width + start + 8;
-      input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
+  const updateInput = (target) => {
+    let parentTarget = parent(target);
+    let label = query("label", parentTarget);
+    let isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
+    let toActive = document.activeElement == target || target.value || target.type == "date";
+
+    if (toActive) {
+      if (isBorder && label) {
+        let width = Math.round(label.offsetWidth / (label.offsetHeight / 14));
+        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%)`;
+      } else
+        target.style.clipPath = "";
+      addClass(label, "active");
+    } else {
+      target.style.clipPath = "";
+      removeClass(label, "active");
     }
   }
 
@@ -106,23 +116,14 @@
   };
 
   const onFocusInput = (e) => {
-    let parentTarget = parent(e.currentTarget);
-    let label = query("label", parentTarget);
-
-    addClass(label, "active");
-    updateInput(e.currentTarget, label, parentTarget);
+    updateInput(e.currentTarget);
 
     if (e.currentTarget.getAttribute("data-ui"))
       open(e.currentTarget);
   };
 
   const onBlurInput = (e) => {
-    let label = query("label", parent(e.currentTarget));
-
-    if (!e.currentTarget.value && e.currentTarget.type != "date") {
-      removeClass(label, "active");
-      e.currentTarget.style.clipPath = "";
-    }
+    updateInput(e.currentTarget);
 
     if (e.currentTarget.getAttribute("data-ui"))
       open(e.currentTarget);
@@ -338,17 +339,12 @@
       on(x, "click", onClickLabel);
     });
 
-    let inputs = queryAll(".field > input:not([type=file]):not([type=checkbox]):not([type=radio], select, textarea");
+    let inputs = queryAll(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea");
     inputs.forEach((x) => {
-      let parentTarget = parent(x);
-      let label = query("label", parentTarget);
-
       on(x, "focus", onFocusInput);
       on(x, "blur", onBlurInput);
 
-      if (x.value || x.type == "date") addClass(label, "active");
-      else removeClass(label, "active");
-      updateInput(x, label, parentTarget);
+      updateInput(x);
     });
   };