flex-grid-element - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

.browserslistrc

flex-grid.js

		@@ -9,2 +9,3 @@ const DEBUG = (window.FlexGrid && window.FlexGrid.debug) \|\| false;
		};
		const GRID_ATTRS = ["g", "gx", "gy", "xs", "sm", "md", "lg", "xl", "xxl", "align", "justify", "mw", "unit", "direction", "wrap"];

		@@ -25,7 +26,7 @@ class FlexGrid extends HTMLElement {
		static get observedAttributes() {
		return ["g", "gx", "gy", "xs", "sm", "md", "lg", "xl", "xxl", "align", "justify", "mw", "unit", "direction", "wrap"];
		return GRID_ATTRS;
		}

		attributeChangedCallback(attr, oldVal, newVal) {
		let style = this.getAttribute("style");
		static updateStyle(inst, attr, newVal) {
		let style = inst.getAttribute("style");
		let rules = [];
		@@ -49,11 +50,64 @@ if (style) {
		}
		this.setAttribute("style", rules.join(";"));
		inst.setAttribute("style", rules.join(";"));
		}

		attributeChangedCallback(attr, oldVal, newVal) {
		FlexGrid.updateStyle(this, attr, newVal);
		}

		connectedCallback() {
		// This is actually called AFTER attributeChangedCallback
		// this.innerHTML = "<div class=\"flex-grid-wrapper\">" + this.innerHTML + "</div>";
		}
		}

		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(attr, oldVal, newVal) {
		FlexGrid.updateStyle(this, attr, newVal);
		}

		connectedCallback() {}
		}

		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);
		}
		}

		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);
		});
		}
		}

		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"};class FlexGrid extends HTMLElement{constructor(){super()}static log(t){DEBUG&&console.log("[flex-grid] "+t)}static get observedAttributes(){return["g","gx","gy","xs","sm","md","lg","xl","xxl","align","justify","mw","unit","direction","wrap"]}attributeChangedCallback(t,e,l){let i=this.getAttribute("style"),s=[];i&&(s=i.split(";"));let r=[t];ALIASES[l]&&(l=ALIASES[l]),COMBINED[t]&&(r=COMBINED[t]);for(let t=0;t<r.length;t++){let e="--"+r[t];s=s.filter(t=>!t.includes(e)),s.push(e+":"+l)}this.setAttribute("style",s.join(";"))}connectedCallback(){}}customElements.define("flex-grid",FlexGrid);
		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);

package.json

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

readme.md

		@@ -8,2 +8,7 @@ # flex-grid

		## Introduction

		Bootstrap 5 grid weights about 51kb minified. flex-grid, on the other hand, weights 4kb of css + 2 kb of js and provide a
		similar feature set. Only 4kb of blocking css are between you are your dream layout!

		## How to use
		@@ -34,4 +39,18 @@

		## Demo
		```html
		<flex-grid md="3" lg="4">
		<div>col 1 of md=3/lg=4</div>
		<div>col 2 of md=3/lg=4</div>
		<div>col 3 of md=3/lg=4</div>
		<div>col 4 of md=3/lg=4</div>
		</flex-grid>
		```

		See demo.html
		Also, using attributes makes it very clear what is related to the layout when
		classes can mean various things.

		## Demo and more

		For usage, please look at the demo

		See demo.html or https://codepen.io/lekoalabe/pen/ExWowBM

demo.html