add simple table

Author: rylax

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

@@ -27,32 +27,34 @@
     <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 }}<slot /></div>
   <!-- todo: maybe add message on !production if block type unsupported -->
   <!-- <div v-else-if="visible"><slot /></div> -->
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
-import NotionBookmark from "@/blocks/bookmark";
-import NotionCallout from "@/blocks/callout";
-import NotionCode from "@/blocks/code";
-import NotionColumn from "@/blocks/column";
-import NotionFigure from "@/blocks/helpers/figure";
-import NotionList from "@/blocks/list";
-import NotionPage from "@/blocks/page";
-import NotionHeader from "@/blocks/header";
-import NotionText from "@/blocks/text";
-import NotionToggle from "@/blocks/toggle";
-import NotionQuote from "@/blocks/quote";
+import Blockable from '@/lib/blockable'
+import NotionBookmark from '@/blocks/bookmark'
+import NotionCallout from '@/blocks/callout'
+import NotionCode from '@/blocks/code'
+import NotionColumn from '@/blocks/column'
+import NotionFigure from '@/blocks/helpers/figure'
+import NotionList from '@/blocks/list'
+import NotionPage from '@/blocks/page'
+import NotionHeader from '@/blocks/header'
+import NotionText from '@/blocks/text'
+import NotionToggle from '@/blocks/toggle'
+import NotionQuote from '@/blocks/quote'
+import NotionTable from '@/blocks/table'
 
 export default {
   extends: Blockable,
-  name: "NotionBlock",
+  name: 'NotionBlock',
   components: {
     NotionBookmark,
     NotionCallout,
@@ -65,6 +67,7 @@ export default {
     NotionText,
     NotionToggle,
     NotionQuote,
+    NotionTable,
   },
-};
+}
 </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;
+}