feat: support for todo items

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.

src/blocks/todo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <input type="checkbox" :value="title" :checked="!!properties.checked" disabled="disabled" />
+    <label>
+      <NotionTextRenderer :text="title" v-bind="pass" />
+    </label>
+  </div>
+</template>
+
+<script>
+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,17 +1,17 @@
 <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'])"
-    v-bind="pass"
-  />
+  <NotionHeader v-else-if="isType(['header', 'sub_header', 'sub_sub_header'])" v-bind="pass" />
   <NotionBookmark v-else-if="isType('bookmark')" v-bind="pass" />
   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
   <NotionCode v-else-if="isType('code')" v-bind="pass" />
   <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>
@@ -21,18 +21,15 @@
   <NotionColumn v-else-if="isType('column')" :format="format">
     <slot />
   </NotionColumn>
-  <NotionList
-    v-else-if="isType(['bulleted_list', 'numbered_list'])"
-    v-bind="pass"
-  >
+  <NotionList v-else-if="isType(['bulleted_list', 'numbered_list'])" v-bind="pass">
     <slot />
   </NotionList>
-  <NotionFigure
-    v-else-if="isType(['image', 'embed', 'figma', 'video'])"
-    v-bind="pass"
-  />
+  <NotionFigure v-else-if="isType(['image', 'embed', 'figma', 'video'])" 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 +48,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 +66,7 @@ export default {
     NotionToggle,
     NotionQuote,
     NotionEquation,
+    NotionTodo,
   },
 };
 </script>