Upgrading breakpoints and making size property behave like span on co…

…ls component

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@berhalak/vue-layout",
-	"version": "0.1.17",
+	"version": "0.1.18",
 	"private": false,
 	"description": "vue layout components",
 	"main": "dist/vue-layout.umd.min.js",

src/components/Breakpoint.vue

@@ -14,14 +14,12 @@
 	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-$breakpoints: xs 0px 100%, sm 576px 540px, md 768px 720px, lg 992px 960px,
-	xl 1100px 1068px, xxl 1332px 1300px, rh 1632px 1600px, fh 1832px 1800px,
-	qh 2232px 2200px, kh 3032px 3000px !default;
+$breakpoints: xs 100%, sm 640px, md 768px, lg 1024px, xl 1280px, xxl 1332px,
+	rh 1632px, fh 1832px, qh 2232px, kh 3032px !default;
 
 @each $breakpoint in $breakpoints {
 	$name: nth($breakpoint, 1);
 	$size: nth($breakpoint, 2);
-	$container: nth($breakpoint, 3);
 
 	@media only screen and (min-width: $size) {
 		#breakpoint::after {

src/components/core.ts

@@ -143,22 +143,6 @@ export const Box = {
 			})
 		}
 
-		if (has('size')) {
-			let size = get('size') as string;
-			if (size.match(/^\d+$/)) {
-				let num = parseInt(size);
-				size = `calc(100% * ${num} / 12)`;
-				media({
-					flexBasis: size,
-					flexShrink: 0,
-					flexGrow: 0
-				})
-			} else {
-				media({
-					flexBasis: size
-				})
-			}
-		}
 		if (has('hor')) {
 			media({
 				display: 'flex',
@@ -242,6 +226,25 @@ export const Box = {
 			})
 		}
 
+
+		if (has('size')) {
+			let size = get('size') as string;
+			if (size.match(/^\d+$/)) {
+				let num = parseInt(size);
+				size = `calc(100% * ${num} / 12)`;
+				media({
+					flexBasis: size,
+					flexShrink: 0,
+					flexGrow: 0,
+					gridColumn: 'span ' + num
+				})
+			} else {
+				media({
+					flexBasis: size
+				})
+			}
+		}
+
 		if (has('span')) {
 			let value = get('span') as string;
 

test/src/DevPage.vue

@@ -1,17 +1,14 @@
 <template>
 	<div>
 		<h1>dev</h1>
-		<hor wrap class="parent">
-			<box xs:size="12" xl:size="8">
-				<item>a</item>
-			</box>
+		<cols class="parent" gap="1rem">
 			<box size="4">
 				<item>a</item>
 			</box>
-			<box size="4">
+			<box size="2">
 				<item>a</item>
 			</box>
-		</hor>
+		</cols>
 	</div>
 </template>