Add checkboxes

README.md

@@ -187,8 +187,8 @@ Most common block types are supported. We happily accept pull requests to add su
 | Page Links        | ✅ Yes         |                        |
 | Cover             | ✅ Yes         | Enable with `fullPage` |
 | Equations         | ✅ Yes         |                        |
+| Checkbox          | ✅ Yes         |                        |
 | Databases         | ❌ Not planned |                        |
-| Checkbox          | ❌ Not planned |                        |
 | Table Of Contents | ❌ Not planned |                        |
 
 Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.

dev/serve.vue

@@ -22,6 +22,7 @@ export default {
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
     // equation tester: 2a1d5226d68246deba627012081693f9
+    // todo tester: 235057194b954a60ace89c052a65d102
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };

src/blocks/todo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <input
+      type="checkbox"
+      :value="title"
+      :checked="properties.checked"
+      disabled="disabled"
+    />
+    <label>
+      <NotionTextRenderer :text="title" v-bind="pass" />
+    </label>
+  </div>
+</template>
+
+<script>
+// TODO: add notion styling
+// TODO: add strikethrough
+
+import Blockable from "@/lib/blockable";
+import NotionTextRenderer from "@/blocks/helpers/text-renderer";
+
+export default {
+  extends: Blockable,
+  name: "NotionTodo",
+  components: {
+    NotionTextRenderer,
+  },
+};
+</script>

src/components/block.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="isType('page')">
-    <NotionPage v-bind="pass"><slot /></NotionPage>
+    <NotionPage v-bind="pass">
+      <slot />
+    </NotionPage>
   </div>
   <NotionHeader
     v-else-if="isType(['header', 'sub_header', 'sub_sub_header'])"
@@ -12,6 +14,7 @@
   <NotionEquation v-else-if="isType('equation')" v-bind="pass" />
   <NotionText v-else-if="isType('text')" v-bind="pass" />
   <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
+  <NotionTodo v-else-if="isType('to_do')" v-bind="pass" />
   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
     <slot />
   </NotionToggle>
@@ -32,7 +35,10 @@
     v-bind="pass"
   />
   <hr v-else-if="isType('divider')" class="notion-hr" />
-  <div v-else-if="todo && visible">todo: {{ type }}<slot /></div>
+  <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>
@@ -51,6 +57,7 @@ import NotionText from "@/blocks/text";
 import NotionToggle from "@/blocks/toggle";
 import NotionQuote from "@/blocks/quote";
 import NotionEquation from "@/blocks/equation";
+import NotionTodo from "@/blocks/todo";
 
 export default {
   extends: Blockable,
@@ -68,6 +75,7 @@ export default {
     NotionToggle,
     NotionQuote,
     NotionEquation,
+    NotionTodo,
   },
 };
 </script>