Merge pull request janniks#66 from rylax/main

Add Simple Table

Author: janniks

src/blocks/helpers/table-row.vue

@@ -0,0 +1,56 @@
+<template>
+   <tr class="notion-simple-table-row">
+        <td v-for="(cell, key, index) in row.value.properties" :key="key" class="notion-simple-table-data" :style="isColumnStyle(rowIndex) || isRowStyle(index) ? headerStyle : null"> 
+            <div class="notion-simple-table-cell">
+                <div class="notion-simple-table-cell-text">
+                    <NotionTextRenderer :text="cell" v-bind="pass" />
+                </div>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script>
+import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionTextRenderer from "@/blocks/helpers/text-renderer";
+export default {
+    extends: Blockable,
+    name: "NotionTableRow",
+    props: {
+        row: {
+            type: Object
+        },
+        hasColumnHeader: {
+            type: Boolean,
+            default: false
+        },
+        hasRowHeader: {
+            type: Boolean,
+            default: false
+        },
+        rowIndex: {
+            type: Number,
+        }
+    },
+    components: {
+        NotionTextRenderer
+    },
+     computed: {
+    ...blockComputed,
+    headerStyle() {
+        return {  
+            'background': 'rgb(247, 246, 243)', 
+            'font-weight': 500
+        }
+    }
+  },
+  methods: {
+      isColumnStyle(index) {
+          return this.hasColumnHeader && index === 0
+      },
+      isRowStyle(index) {
+          return this.hasRowHeader && index === 0
+      }
+  }
+}
+</script>

src/blocks/table.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <table class="notion-simple-table">
+     <tbody>
+      <NotionTableRow v-for="(row, index) in rows" :key="row.value.id" :row="row" :rowIndex="index" :hasColumnHeader="hasColumnHeader" :hasRowHeader="hasRowHeader" v-bind="pass" />
+     </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionTableRow from "@/blocks/helpers/table-row";
+
+export default {
+  extends: Blockable,
+  name: "NotionTable",
+  components: {
+    NotionTableRow
+  },
+  computed: {
+    ...blockComputed,
+    rows() {
+      return this.value.content.map(id => this.blockMap[id])
+    },
+    hasColumnHeader() {
+      return this.value.format.table_block_column_header
+    },
+    hasRowHeader() {
+      return this.value.format.table_block_row_header
+    }
+  },
+};
+</script>

src/components/block.vue

@@ -31,9 +31,10 @@
     <slot />
   </NotionList>
   <NotionFigure
-    v-else-if="isType(['image', 'embed', 'figma', 'video'])"
+    v-else-if="isType(['image', 'embed', 'figma', 'video', 'audio'])"
     v-bind="pass"
   />
+  <NotionTable v-else-if="isType('table')" v-bind="pass" />
   <hr v-else-if="isType('divider')" class="notion-hr" />
   <div v-else-if="todo && visible">
     todo: {{ type }}
@@ -58,10 +59,11 @@ import NotionToggle from "@/blocks/toggle";
 import NotionQuote from "@/blocks/quote";
 import NotionEquation from "@/blocks/equation";
 import NotionTodo from "@/blocks/todo";
+import NotionTable from '@/blocks/table'
 
 export default {
   extends: Blockable,
-  name: "NotionBlock",
+  name: 'NotionBlock',
   components: {
     NotionBookmark,
     NotionCallout,
@@ -74,8 +76,9 @@ export default {
     NotionText,
     NotionToggle,
     NotionQuote,
+    NotionTable,
     NotionEquation,
     NotionTodo,
   },
-};
+}
 </script>

src/styles.css

@@ -686,3 +686,31 @@ img.notion-nav-icon {
   margin: 0 2px;
   color: rgba(55, 53, 47, 0.4);
 }
+
+.notion-simple-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.notion-simple-table-data {
+  color: inherit;
+  fill: inherit;
+  border: 1px solid rgb(233, 233, 231);
+  position: relative;
+  vertical-align: top;
+  min-width: 178px;
+  max-width: 178px;
+  min-height: 32px;
+}
+
+.notion-simple-table-cell-text {
+  max-width: 100%;
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  caret-color: transparent;
+  padding: 7px 9px;
+  background-color: transparent;
+  font-size: 14px;
+  line-height: 20px;
+}