Merge pull request #19 from josephting/table-preset

Add table preset
LucasLeandro1204 · Mar 17, 2019 · b72e955 · b72e955
2 parents 53ff3e6 + 98c97fd
commit b72e955
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 3 deletions.
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -15,6 +15,7 @@
   - [List](presets.md?id=list)
   - [Bullet List](presets.md?id=bullet-list)
   - [Twitch](presets.md?id=twitch)
+  - [Table](presets.md?id=table)
 
 - Development
   - [Getting started](development.md?id=development)

diff --git a/docs/assets/js/app.js b/docs/assets/js/app.js
diff --git a/docs/assets/js/app.js.map b/docs/assets/js/app.js.map
diff --git a/docs/presets.md b/docs/presets.md
@@ -51,3 +51,16 @@
     <vcl-twitch :primary="props.primary" :secondary="props.secondary" />
   </template>
 </color-switch>
+
+### Table
+
+| Custom Prop | Type    | Default | Description       |
+|:-----------:|:-------:|:-------:|:-----------------:|
+| rows        | Number  | 5       | Number of rows    |
+| columns     | Number  | 4       | Number of columns |
+
+<color-switch>
+  <template slot-scope="props">
+    <vcl-table :primary="props.primary" :secondary="props.secondary" :rows="5" :columns="4" />
+  </template>
+</color-switch>
diff --git a/src/components/presets/Table.vue b/src/components/presets/Table.vue
@@ -0,0 +1,53 @@
+<script>
+  import VueContentLoading from '../VueContentLoading.vue';
+
+  export default {
+    components: {
+      VueContentLoading,
+    },
+
+    props: {
+      header: {
+        default: true,
+        type: Boolean,
+      },
+      rows: {
+        default: 5,
+        type: Number,
+      },
+      columns: {
+        default: 4,
+        type: Number,
+      },
+    },
+
+    computed: {
+      height () {
+        return (this.rows * 30) - 20;
+      },
+      width () {
+        return ((this.columns - 1) * 20) + 10 + (this.columns * 100);
+      },
+    },
+
+    methods: {
+      getXPos (column) {
+        return 5 + ((column - 1) * 100) + ((column - 1) * 20);
+      },
+      getYPos (row) {
+        return (row - 1) * 30;
+      },
+    },
+  };
+</script>
+
+<template>
+  <vue-content-loading v-bind="$attrs" :width="width" :height="height">
+    <template v-for="r in rows">
+      <template v-for="c in columns">
+        <rect :key="r + '_' + c" :x="getXPos(c)" :y="getYPos(r)" rx="3" ry="3" :width="100" height="10" />
+      </template>
+      <rect :key="r + '_l'" v-if="r < rows" x="0" :y="getYPos(r) + 20" :width="width" height="1" />
+    </template>
+  </vue-content-loading>
+</template>
diff --git a/src/core/components.js b/src/core/components.js
@@ -6,6 +6,7 @@ import VclTwitch from '../components/presets/Twitch.vue';
 import VclFacebook from '../components/presets/Facebook.vue';
 import VclInstagram from '../components/presets/Instagram.vue';
 import VclBulletList from '../components/presets/BulletList.vue';
+import VclTable from '../components/presets/Table.vue';
 
 export default VueContentLoading;
 
@@ -16,5 +17,6 @@ export {
   VclFacebook,
   VclInstagram,
   VclBulletList,
+  VclTable,
   VueContentLoading,
 };