First commit

Author: andrelmlins

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env", { "modules": false }]]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "vue-grid-responsive",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "dist/vue-grid-responsive.umd.js",
+  "module": "dist/vue-grid-responsive.esm.js",
+  "unpkg": "dist/vue-grid-responsive.min.js",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "rollup": "^2.12.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-vue": "^5.1.6",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

rollup.config.js

@@ -0,0 +1,58 @@
+import babel from "rollup-plugin-babel";
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import vue from "rollup-plugin-vue";
+import pkg from "./package.json";
+
+export default [
+  {
+    input: "src/index.js",
+    plugins: [
+      vue(),
+      babel({ exclude: "node_modules/**" }),
+      resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
+      commonjs()
+    ],
+    output: {
+      exports: "named",
+      name: "VueGridResponsive",
+      file: pkg.unpkg,
+      format: "iife",
+      sourcemap: true
+    },
+    watch: {
+      include: "src/**"
+    }
+  },
+  {
+    input: "./src/index.js",
+    plugins: [
+      vue(),
+      babel({ exclude: "node_modules/**" }),
+      resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
+      commonjs()
+    ],
+    output: {
+      name: "VueGridResponsive",
+      file: pkg.module,
+      format: "es",
+      sourcemap: true
+    }
+  },
+  {
+    input: "./src/index.js",
+    plugins: [
+      vue(),
+      babel({ exclude: "node_modules/**" }),
+      resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
+      commonjs()
+    ],
+    output: {
+      exports: "named",
+      name: "VueGridResponsive",
+      file: pkg.main,
+      format: "umd",
+      sourcemap: true
+    }
+  }
+];

src/Column.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :style="styleGeneral" :class="classGeneral">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Column",
+  data() {
+    let styleGeneral = this.createStyleSize();
+
+    if (this.xs || this.sm || this.md || this.lg || this.xl) {
+      styleGeneral += `--colFlexSGR:0;`;
+    } else {
+      styleGeneral = `--colFlexSGR:1;`;
+    }
+
+    return {
+      classGeneral: `col ${this.createClassSize()}`,
+      styleGeneral
+    };
+  },
+  props: {
+    xs: Number,
+    sm: Number,
+    md: Number,
+    lg: Number,
+    xl: Number,
+    localColumns: {
+      type: Number,
+      default: 12
+    }
+  },
+  methods: {
+    getValue(breakpoint) {
+      if (breakpoint > this.localColumns) {
+        breakpoint = this.localColumns;
+      }
+
+      return breakpoint ? `${(breakpoint / this.localColumns) * 100}%` : false;
+    },
+    createClassSize() {
+      let newClass = "col-xs ";
+
+      newClass += this.sm ? "col-sm " : "";
+      newClass += this.md ? "col-md " : "";
+      newClass += this.lg ? "col-lg " : "";
+      newClass += this.xl ? "col-xl " : "";
+
+      return newClass;
+    },
+    createStyleSize() {
+      let newStyle = "";
+
+      newStyle += this.xs
+        ? `--xsWidthSGR:${this.getValue(this.xs)}; `
+        : `--xsWidthSGR:100%; `;
+      newStyle += this.sm ? `--smWidthSGR:${this.getValue(this.sm)}; ` : "";
+      newStyle += this.md ? `--mdWidthSGR:${this.getValue(this.md)}; ` : "";
+      newStyle += this.lg ? `--lgWidthSGR:${this.getValue(this.lg)}; ` : "";
+      newStyle += this.xl ? `--xlWidthSGR:${this.getValue(this.xl)}; ` : "";
+
+      return newStyle;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + (var(--paddingSGR) * 2));
+  margin: var(--marginSGR);
+}
+
+.col {
+  position: relative;
+  box-sizing: border-box;
+  flex-grow: var(--colFlexSGR);
+  padding: var(--paddingSGR);
+}
+.col-xs {
+  flex-basis: var(--xsWidthSGR);
+  max-width: var(--xsWidthSGR);
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    flex-basis: var(--smWidthSGR);
+    max-width: var(--smWidthSGR);
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md {
+    flex-basis: var(--mdWidthSGR);
+    max-width: var(--mdWidthSGR);
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg {
+    flex-basis: var(--lgWidthSGR);
+    max-width: var(--lgWidthSGR);
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl {
+    max-width: var(--xlWidthSGR);
+  }
+}
+</style>

src/Row.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :style="styleGeneral" class="container">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Row",
+  data() {
+    return {
+      styleGeneral: this.createGutter(this.gutter)
+    };
+  },
+  props: {
+    gutter: Number,
+    columns: {
+      type: Number,
+      default: 12
+    }
+  },
+  methods: {
+    createGutter(gutter) {
+      return gutter
+        ? `--paddingSGR:${gutter / 2}px;--marginSGR:-${gutter / 2}px`
+        : "--paddingSGR:0;--marginSGR:0";
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + (var(--paddingSGR) * 2));
+  margin: var(--marginSGR);
+}
+</style>

src/index.js

@@ -0,0 +1,2 @@
+export { default as Row } from "./Row.vue";
+export { default as Column } from "./Column.vue";