flex-grid-element - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

flex-grid.js

@@ -1,110 +0,112 @@
-const DEBUG = (window.FlexGrid && window.FlexGrid.debug) || false;
-const COMBINED = {
-  g: ["gx", "gy"],
-};
-const ALIASES = {
-  start: "flex-start",
-  end: "flex-end",
-};
-const GRID_ATTRS = ["g", "gx", "gy", "xs", "sm", "md", "lg", "xl", "xxl", "align", "justify", "mw", "unit", "direction", "wrap"];
+(() => {
+  const DEBUG = (window.FlexGrid && window.FlexGrid.debug) || false;
+  const COMBINED = {
+    g: ["gx", "gy"],
+  };
+  const ALIASES = {
+    start: "flex-start",
+    end: "flex-end",
+  };
+  const GRID_ATTRS = ["g", "gx", "gy", "xs", "sm", "md", "lg", "xl", "xxl", "align", "justify", "mw", "unit", "direction", "wrap"];
 
-class FlexGrid extends HTMLElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-  }
+  class FlexGrid extends HTMLElement {
+    constructor() {
+      // Always call super first in constructor
+      super();
+    }
 
-  static log(message) {
-    if (!DEBUG) {
-      return;
+    static log(message) {
+      if (!DEBUG) {
+        return;
+      }
+      console.log("[flex-grid] " + message);
     }
-    console.log("[flex-grid] " + message);
-  }
 
-  static get observedAttributes() {
-    return GRID_ATTRS;
-  }
+    static get observedAttributes() {
+      return GRID_ATTRS;
+    }
 
-  static updateStyle(inst, attr, newVal) {
-    let style = inst.getAttribute("style");
-    let rules = [];
-    if (style) {
-      rules = style.split(";");
+    static updateStyle(inst, attr, newVal) {
+      let style = inst.getAttribute("style");
+      let rules = [];
+      if (style) {
+        rules = style.split(";");
+      }
+      let attrs = [attr];
+      if (ALIASES[newVal]) {
+        newVal = ALIASES[newVal];
+      }
+      if (COMBINED[attr]) {
+        attrs = COMBINED[attr];
+      }
+      for (let i = 0; i < attrs.length; i++) {
+        let dashAttr = "--" + attrs[i];
+        rules = rules.filter((v) => {
+          return !v.includes(dashAttr);
+        });
+        rules.push(dashAttr + ":" + newVal);
+      }
+      inst.setAttribute("style", rules.join(";"));
     }
-    let attrs = [attr];
-    if (ALIASES[newVal]) {
-      newVal = ALIASES[newVal];
+
+    attributeChangedCallback(attr, oldVal, newVal) {
+      FlexGrid.updateStyle(this, attr, newVal);
     }
-    if (COMBINED[attr]) {
-      attrs = COMBINED[attr];
+
+    connectedCallback() {
+      // This is actually called AFTER attributeChangedCallback
     }
-    for (let i = 0; i < attrs.length; i++) {
-      let dashAttr = "--" + attrs[i];
-      rules = rules.filter((v) => {
-        return !v.includes(dashAttr);
-      });
-      rules.push(dashAttr + ":" + newVal);
-    }
-    inst.setAttribute("style", rules.join(";"));
   }
 
-  attributeChangedCallback(attr, oldVal, newVal) {
-    FlexGrid.updateStyle(this, attr, newVal);
-  }
+  class FlexCol extends HTMLElement {
+    constructor() {
+      super();
+    }
 
-  connectedCallback() {
-    // This is actually called AFTER attributeChangedCallback
-  }
-}
+    static get observedAttributes() {
+      return ["o", "w", "mw", "col", "align", "justify", "grow", "d-xs", "d-sm", "d-md", "d-lg", "d-xl", "d-xxl"];
+    }
 
-class FlexCol extends HTMLElement {
-  constructor() {
-    super();
-  }
+    attributeChangedCallback(attr, oldVal, newVal) {
+      FlexGrid.updateStyle(this, attr, newVal);
+    }
 
-  static get observedAttributes() {
-    return ["o", "w", "mw", "col", "align", "justify", "grow", "d-xs", "d-sm", "d-md", "d-lg", "d-xl", "d-xxl"];
+    connectedCallback() {}
   }
 
-  attributeChangedCallback(attr, oldVal, newVal) {
-    FlexGrid.updateStyle(this, attr, newVal);
-  }
+  class FlexContainer extends HTMLElement {
+    constructor() {
+      super();
+    }
 
-  connectedCallback() {}
-}
+    static get observedAttributes() {
+      return GRID_ATTRS;
+    }
 
-class FlexContainer extends HTMLElement {
-  constructor() {
-    super();
-  }
-
-  static get observedAttributes() {
-    return GRID_ATTRS;
-  }
-
-  attributeChangedCallback(attr, oldVal, newVal) {
-    let grid = this.querySelector("flex-grid");
-    if (grid) {
-      FlexGrid.updateStyle(grid, attr, newVal);
+    attributeChangedCallback(attr, oldVal, newVal) {
+      let grid = this.querySelector("flex-grid");
+      if (grid) {
+        FlexGrid.updateStyle(grid, attr, newVal);
+      }
     }
-  }
 
-  connectedCallback() {
-    // If there is no flex-grid, create it
-    if (this.querySelector("flex-grid") === null) {
-      this.innerHTML = "<flex-grid>" + this.innerHTML + "</flex-grid>";
+    connectedCallback() {
+      // If there is no flex-grid, create it
+      if (this.querySelector("flex-grid") === null) {
+        this.innerHTML = "<flex-grid>" + this.innerHTML + "</flex-grid>";
+      }
+      let grid = this.querySelector("flex-grid");
+      Array.prototype.slice.call(this.attributes).forEach((item) => {
+        if (!GRID_ATTRS.includes(item.name)) {
+          return;
+        }
+        FlexGrid.updateStyle(grid, item.name, item.value);
+        grid.setAttribute(item.name, item.value);
+      });
     }
-    let grid = this.querySelector("flex-grid");
-    Array.prototype.slice.call(this.attributes).forEach((item) => {
-      if (!GRID_ATTRS.includes(item.name)) {
-        return;
-      }
-      FlexGrid.updateStyle(grid, item.name, item.value);
-      grid.setAttribute(item.name, item.value);
-    });
   }
-}
 
-customElements.define("flex-grid", FlexGrid);
-customElements.define("flex-col", FlexCol);
-customElements.define("flex-container", FlexContainer);
+  customElements.define("flex-grid", FlexGrid);
+  customElements.define("flex-col", FlexCol);
+  customElements.define("flex-container", FlexContainer);
+})();

flex-grid.min.js

@@ -1,1 +0,1 @@
-const DEBUG=window.FlexGrid&&window.FlexGrid.debug||!1,COMBINED={g:["gx","gy"]},ALIASES={start:"flex-start",end:"flex-end"},GRID_ATTRS=["g","gx","gy","xs","sm","md","lg","xl","xxl","align","justify","mw","unit","direction","wrap"];class FlexGrid extends HTMLElement{constructor(){super()}static log(e){DEBUG&&console.log("[flex-grid] "+e)}static get observedAttributes(){return GRID_ATTRS}static updateStyle(e,t,l){let r=e.getAttribute("style"),i=[];r&&(i=r.split(";"));let s=[t];ALIASES[l]&&(l=ALIASES[l]),COMBINED[t]&&(s=COMBINED[t]);for(let e=0;e<s.length;e++){let t="--"+s[e];i=i.filter(e=>!e.includes(t)),i.push(t+":"+l)}e.setAttribute("style",i.join(";"))}attributeChangedCallback(e,t,l){FlexGrid.updateStyle(this,e,l)}connectedCallback(){}}class FlexCol extends HTMLElement{constructor(){super()}static get observedAttributes(){return["o","w","mw","col","align","justify","grow","d-xs","d-sm","d-md","d-lg","d-xl","d-xxl"]}attributeChangedCallback(e,t,l){FlexGrid.updateStyle(this,e,l)}connectedCallback(){}}class FlexContainer extends HTMLElement{constructor(){super()}static get observedAttributes(){return GRID_ATTRS}attributeChangedCallback(e,t,l){let r=this.querySelector("flex-grid");r&&FlexGrid.updateStyle(r,e,l)}connectedCallback(){null===this.querySelector("flex-grid")&&(this.innerHTML="<flex-grid>"+this.innerHTML+"</flex-grid>");let e=this.querySelector("flex-grid");Array.prototype.slice.call(this.attributes).forEach(t=>{GRID_ATTRS.includes(t.name)&&(FlexGrid.updateStyle(e,t.name,t.value),e.setAttribute(t.name,t.value))})}}customElements.define("flex-grid",FlexGrid),customElements.define("flex-col",FlexCol),customElements.define("flex-container",FlexContainer);
+(()=>{const e=window.FlexGrid&&window.FlexGrid.debug||!1,t={g:["gx","gy"]},l={start:"flex-start",end:"flex-end"},s=["g","gx","gy","xs","sm","md","lg","xl","xxl","align","justify","mw","unit","direction","wrap"];class r extends HTMLElement{constructor(){super()}static log(t){e&&console.log("[flex-grid] "+t)}static get observedAttributes(){return s}static updateStyle(e,s,r){let i=e.getAttribute("style"),n=[];i&&(n=i.split(";"));let a=[s];l[r]&&(r=l[r]),t[s]&&(a=t[s]);for(let e=0;e<a.length;e++){let t="--"+a[e];n=n.filter(e=>!e.includes(t)),n.push(t+":"+r)}e.setAttribute("style",n.join(";"))}attributeChangedCallback(e,t,l){r.updateStyle(this,e,l)}connectedCallback(){}}class i extends HTMLElement{constructor(){super()}static get observedAttributes(){return["o","w","mw","col","align","justify","grow","d-xs","d-sm","d-md","d-lg","d-xl","d-xxl"]}attributeChangedCallback(e,t,l){r.updateStyle(this,e,l)}connectedCallback(){}}class n extends HTMLElement{constructor(){super()}static get observedAttributes(){return s}attributeChangedCallback(e,t,l){let s=this.querySelector("flex-grid");s&&r.updateStyle(s,e,l)}connectedCallback(){null===this.querySelector("flex-grid")&&(this.innerHTML="<flex-grid>"+this.innerHTML+"</flex-grid>");let e=this.querySelector("flex-grid");Array.prototype.slice.call(this.attributes).forEach(t=>{s.includes(t.name)&&(r.updateStyle(e,t.name,t.value),e.setAttribute(t.name,t.value))})}}customElements.define("flex-grid",r),customElements.define("flex-col",i),customElements.define("flex-container",n)})();

package.json

 {
   "name": "flex-grid-element",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A powerful flex based grid system",
@@ -5,0 +5,0 @@ "main": "flex-grid.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75978

increased by0.07%

Lines of code

323

increased by0.62%

No dependency changes