Creating hidden component

Author: andrelmlins

docs/App.vue

@@ -1,11 +1,7 @@
 <template>
   <main>
     <div class="title">
-      <img
-        alt="Vue Framework"
-        src="https://vuejs.org/images/logo.png"
-        width="200"
-      />
+      <img alt="Vue Framework" src="https://vuejs.org/images/logo.png" width="200" />
       <h1>Vue Grid Responsive</h1>
     </div>
     <br />

docs/main.js

@@ -2,11 +2,12 @@ import 'vue-code-highlight/themes/duotone-sea.css';
 
 import Vue from 'vue';
 import { component as VueCodeHighlight } from 'vue-code-highlight';
-import { Row, Column } from '../src';
+import { Row, Column, Hidden } from '../src';
 import App from './App.vue';
 
 Vue.component('row', Row);
 Vue.component('column', Column);
+Vue.component('hidden', Hidden);
 Vue.component('code-highlight', VueCodeHighlight);
 
 new Vue({

src/Hidden.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="classGeneral">
+    <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() {
+      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 ' : '';
+
+      return newClass;
+    }
+  }
+};
+</script>
+
+<style scoped>
+@media (max-width: 575px) {
+  .hiddenVGR-xs {
+    display: none;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .hiddenVGR-sm {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .hiddenVGR-md {
+    display: none;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hiddenVGR-lg {
+    display: none;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hiddenVGR-xl {
+    display: none;
+  }
+}
+</style>

src/index.js

@@ -1,2 +1,3 @@
 export { default as Row } from './Row.vue';
 export { default as Column } from './Column.vue';
+export { default as Hidden } from './Hidden.vue';