feat: passing class and style properties

Author: andrelmlins

docs/App.vue

@@ -65,6 +65,7 @@ h1 {
   border-radius: 4px 4px 0px 0px;
   background-color: white;
   padding: 24px;
+  overflow: hidden;
 }
 main pre[class*='language-'] {
   margin: 0;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-grid-responsive",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Responsive grid system based on Bootstrap for Vue",
   "license": "MIT",
   "main": "dist/vue-grid-responsive.umd.js",

src/Column.vue

@@ -52,8 +52,8 @@ export default {
     }
 
     return {
-      classGeneral: `colVGR ${this.createClassSize()}`,
-      styleGeneral
+      classGeneral: `${this.createClassSize()} ${this.$props.class || ''}`,
+      styleGeneral: `${styleGeneral};${this.$props.style || ''}`
     };
   },
   methods: {
@@ -66,7 +66,7 @@ export default {
       return breakpoint ? `${(breakpoint / localColumns) * 100}%` : false;
     },
     createClassSize() {
-      let newClass = 'grid-column colVGR-xs ';
+      let newClass = 'colVGR colVGR-xs grid-column ';
 
       newClass += this.sm ? 'colVGR-sm ' : '';
       newClass += this.md ? 'colVGR-md ' : '';
@@ -110,7 +110,7 @@ export default {
         ? `--xlOffset:${this.getValue(this.xlOffset)}; `
         : '';
 
-      return newStyle;
+      return `${newStyle};${this.$props.style || ''}`;
     }
   }
 };

src/Hidden.vue

@@ -1,35 +1,33 @@
 <template>
-  <div :class="classGeneral">
+  <div :class="classGeneral" :style="styleGeneral">
     <slot />
   </div>
 </template>
 
 <script>
 export default {
   name: 'Hidden',
-  data() {
-    return {
-      classGeneral: `${this.createClassSize()}`
-    };
-  },
   props: {
     xs: Boolean,
     sm: Boolean,
     md: Boolean,
     lg: Boolean,
     xl: Boolean
   },
-  methods: {
-    createClassSize() {
+  computed: {
+    classGeneral() {
       let newClass = '';
 
-      newClass += this.xs ? 'hiddenVGR-xs ' : '';
-      newClass += this.sm ? 'hiddenVGR-sm ' : '';
-      newClass += this.md ? 'hiddenVGR-md ' : '';
-      newClass += this.lg ? 'hiddenVGR-lg ' : '';
-      newClass += this.xl ? 'hiddenVGR-xl ' : '';
+      newClass += this.xs ? ' hiddenVGR-xs' : '';
+      newClass += this.sm ? ' hiddenVGR-sm' : '';
+      newClass += this.md ? ' hiddenVGR-md' : '';
+      newClass += this.lg ? ' hiddenVGR-lg' : '';
+      newClass += this.xl ? ' hiddenVGR-xl' : '';
 
-      return newClass;
+      return `${newClass} ${this.$props.class || ''}`;
+    },
+    styleGeneral() {
+      return this.$props.style;
     }
   }
 };

src/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="styleGeneral" class="grid-row">
+  <div :style="styleGeneral" :class="classGeneral">
     <slot />
   </div>
 </template>
@@ -8,19 +8,24 @@
 export default {
   name: 'Row',
   props: {
-    gutter: Number,
+    gutter: {
+      Number,
+      default: 0
+    },
     columns: {
       type: Number,
-      default: 12,
-    },
+      default: 12
+    }
   },
   computed: {
     styleGeneral() {
-      return this.gutter
-          ? `--paddingVGR:${this.gutter / 2}px;--marginVGR:-${this.gutter / 2}px`
-          : '--paddingVGR:0px;--marginVGR:0px';
+      return `--paddingVGR:${this.gutter / 2}px;--marginVGR:-${this.gutter /
+        2}px;${this.$props.style || ''}`;
+    },
+    classGeneral() {
+      return `grid-row ${this.$props.class || ''}`;
     }
-  },
+  }
 };
 </script>