From b806171743d61b3bb96ac89055010cb3c8ce2de6 Mon Sep 17 00:00:00 2001
From: Abdulbaki Dursun <eggsydev@gmail.com>
Date: Mon, 13 Dec 2021 14:01:51 +0100
Subject: [PATCH 1/3] feat: support for todo items

---
 README.md                |  2 +-
 src/blocks/todo.vue      | 21 +++++++++++++++++++++
 src/components/block.vue | 27 +++++++++++++--------------
 3 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/blocks/todo.vue

diff --git a/README.md b/README.md
index 9ada2ac..6e75779 100644
--- a/README.md
+++ b/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.
diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
new file mode 100644
index 0000000..c2ffb3d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/block.vue b/src/components/block.vue
index 50687bd..924b9da 100644
--- a/src/components/block.vue
+++ b/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>

From 3a633cb001dab38d921f14ec5efd2dd8fbcb7c66 Mon Sep 17 00:00:00 2001
From: janniks <jannik.siebert@gmail.com>
Date: Wed, 15 Dec 2021 20:41:47 +0100
Subject: [PATCH 2/3] Reformat

---
 src/blocks/todo.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
index c2ffb3d..d618ae1 100644
--- a/src/blocks/todo.vue
+++ b/src/blocks/todo.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <input type="checkbox" :value="title" :checked="!!properties.checked" disabled="disabled" />
+    <input
+      type="checkbox"
+      :value="title"
+      :checked="!!properties.checked"
+      disabled="disabled"
+    />
     <label>
       <NotionTextRenderer :text="title" v-bind="pass" />
     </label>
@@ -15,7 +20,7 @@ export default {
   extends: Blockable,
   name: "NotionTodo",
   components: {
-    NotionTextRenderer
+    NotionTextRenderer,
   },
-}
-</script>
\ No newline at end of file
+};
+</script>

From 55476b6f790bb7fc37efff7b8e3f4bc08b6cef62 Mon Sep 17 00:00:00 2001
From: janniks <jannik.siebert@gmail.com>
Date: Wed, 15 Dec 2021 22:19:18 +0100
Subject: [PATCH 3/3] Update details

---
 dev/serve.vue            |  1 +
 src/blocks/todo.vue      |  5 ++++-
 src/components/block.vue | 15 ++++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/dev/serve.vue b/dev/serve.vue
index 1a5cb41..19227b6 100644
--- a/dev/serve.vue
+++ b/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");
   },
 };
diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
index d618ae1..0d997a0 100644
--- a/src/blocks/todo.vue
+++ b/src/blocks/todo.vue
@@ -3,7 +3,7 @@
     <input
       type="checkbox"
       :value="title"
-      :checked="!!properties.checked"
+      :checked="properties.checked"
       disabled="disabled"
     />
     <label>
@@ -13,6 +13,9 @@
 </template>
 
 <script>
+// TODO: add notion styling
+// TODO: add strikethrough
+
 import Blockable from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
diff --git a/src/components/block.vue b/src/components/block.vue
index 924b9da..03d9ab0 100644
--- a/src/components/block.vue
+++ b/src/components/block.vue
@@ -4,7 +4,10 @@
       <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" />
@@ -21,10 +24,16 @@
   <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 }}