@nei7/nuxt-notion 1.0.0

package/README.md

@@ -0,0 +1,84 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add my-module
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    notionApiKey: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-notion",
+  "configKey": "nuxtNotion",
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,32 @@
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addImportsDir, addServerScanDir } from '@nuxt/kit';
+import tailwindcss from '@tailwindcss/vite';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-notion",
+    configKey: "nuxtNotion"
+  },
+  defaults: {},
+  moduleDependencies: {
+    "nuxt-shiki": {
+      version: "^0.3.2"
+    }
+  },
+  setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.nuxtNotion = {
+      notionApiKey: _options.notionApiKey
+    };
+    addVitePlugin(tailwindcss());
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: "Notion",
+      global: true
+    });
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    addServerScanDir(resolver.resolve("./runtime/server"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/BulletedListItem.d.vue.ts

@@ -0,0 +1,7 @@
+import type { BulletedListItemBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: BulletedListItemBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BulletedListItem.vue

@@ -0,0 +1,12 @@
+<script setup>
+import TextRenderer from "./TextRenderer.vue";
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <li>
+    <TextRenderer :text="block.bulleted_list_item.rich_text" />
+  </li>
+</template>

package/dist/runtime/components/BulletedListItem.vue.d.ts

@@ -0,0 +1,7 @@
+import type { BulletedListItemBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: BulletedListItemBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Callout.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CalloutBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: CalloutBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Callout.vue

@@ -0,0 +1,40 @@
+<script setup>
+import TextRenderer from "./TextRenderer.vue";
+import { notionColorToCss } from "../utils";
+const props = defineProps({
+  block: { type: Object, required: true }
+});
+const color = notionColorToCss(props.block.callout.color);
+const { icon } = props.block.callout;
+const imgUrl = () => {
+  if (!icon) return;
+  if (icon.type === "external") return icon.external.url;
+  if (icon.type === "file") return icon.file.url;
+};
+</script>
+
+<template>
+  <div
+    class="p-3 my-5 flex space-x-3"
+    :class="color"
+  >
+    <div
+      v-if="icon"
+      class="flex items-center justify-center "
+    >
+      <span v-if="icon.type === 'emoji'">
+        {{ icon.emoji }}
+      </span>
+
+      <img
+        v-else-if="icon.type === 'external' || icon.type === 'file'"
+        class="w-5 h-5 rounded-md"
+        :src="imgUrl()"
+      >
+    </div>
+
+    <div>
+      <TextRenderer :text="block.callout.rich_text" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Callout.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CalloutBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: CalloutBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Code.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CodeBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: CodeBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Code.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  block: { type: Object, required: true }
+});
+const code = props.block.code.rich_text[0]?.plain_text || "";
+</script>
+
+<template>
+  <div class="relative w-full">
+    <Shiki
+      :lang="
+  block.code.language
+"
+      :code="code"
+      unwrap
+    />
+  </div>
+</template>
+
+<style>
+code.shiki{display:block;padding:1rem;width:100%}pre:has(code.shiki){background:transparent;margin:0;padding:0}
+</style>

package/dist/runtime/components/Code.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CodeBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: CodeBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Divider.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DividerBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: DividerBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Divider.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <hr class="border-gray-200 dark:border-gray-700 my-8">
+</template>

package/dist/runtime/components/Divider.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DividerBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: DividerBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Embed.d.vue.ts

@@ -0,0 +1,7 @@
+import type { NotionEmbed } from '../types/notion.js';
+type __VLS_Props = {
+    embed: NotionEmbed;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Embed.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from "vue";
+import TextRenderer from "./TextRenderer.vue";
+const props = defineProps({
+  embed: { type: Object, required: true }
+});
+const embedUrl = computed(() => {
+  if (props.embed.type === "video")
+    return props.embed.video.external.url;
+  else return props.embed.embed.url;
+});
+const isYouTube = computed(() => {
+  return embedUrl.value.includes("youtube.com") || embedUrl.value.includes("youtu.be");
+});
+const isSpotify = computed(() => {
+  return embedUrl.value.includes("open.spotify.com");
+});
+const youtubeUrl = computed(() => {
+  if (!isYouTube.value) return "";
+  try {
+    const matches = embedUrl.value.match(/[?&]v=([\w-]{11})/);
+    const videoId = matches ? matches[1] : "";
+    return `https://www.youtube.com/embed/${videoId}`;
+  } catch {
+    return "";
+  }
+});
+const spotifyUrl = computed(() => {
+  if (!isSpotify.value) return "";
+  try {
+    const matches = embedUrl.value.match(/https?:\/\/open\.spotify\.com\/track\/([A-Za-z0-9]+)/);
+    const trackId = matches ? matches[1] : "";
+    return `https://open.spotify.com/embed/track/${trackId}`;
+  } catch {
+    return "";
+  }
+});
+const caption = computed(() => {
+  if (props.embed.type === "embed") return props.embed.embed.caption;
+  else return props.embed.video.caption;
+});
+</script>
+
+<template>
+  <div
+    v-if="isYouTube"
+    class="relative aspect-video not-prose"
+  >
+    <iframe
+
+      class="absolute inset-0 w-full h-full m-0! rounded-notion"
+      :src="youtubeUrl"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      loading="lazy"
+    />
+  </div>
+  <div
+    v-else-if="isSpotify"
+    class="relative h-48"
+  >
+    <iframe
+      class="absolute inset-0 h-full w-full m-0! rounded-notion"
+      :src="spotifyUrl"
+      frameBorder="0"
+      allowfullscreen
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
+    />
+  </div>
+
+  <TextRenderer :text="caption" />
+</template>

package/dist/runtime/components/Embed.vue.d.ts

@@ -0,0 +1,7 @@
+import type { NotionEmbed } from '../types/notion.js';
+type __VLS_Props = {
+    embed: NotionEmbed;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Equation.d.vue.ts

@@ -0,0 +1,7 @@
+import type { EquationBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: EquationBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Equation.vue

@@ -0,0 +1,13 @@
+<script setup>
+import MathFormula from "./MathFormula.vue";
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <MathFormula
+    :expression="block.equation.expression"
+    :display-mode="true"
+  />
+</template>

package/dist/runtime/components/Equation.vue.d.ts

@@ -0,0 +1,7 @@
+import type { EquationBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: EquationBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/File.d.vue.ts

@@ -0,0 +1,7 @@
+import type { FileBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: FileBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/File.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  block: { type: Object, required: true }
+});
+const fileUrl = computed(() => {
+  if (props.block.file.type === "external") return props.block.file.external.url;
+  else return props.block.file.file.url;
+});
+</script>
+
+<template>
+  <div class="my-3">
+    <a
+      :href="fileUrl"
+      download
+    >
+      {{ block.file.name }}
+    </a>
+  </div>
+</template>

package/dist/runtime/components/File.vue.d.ts

@@ -0,0 +1,7 @@
+import type { FileBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: FileBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Header.d.vue.ts

@@ -0,0 +1,7 @@
+import type { BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: BlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Header.vue

@@ -0,0 +1,24 @@
+<script setup>
+import TextRenderer from "./TextRenderer.vue";
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <h1
+    v-if="block.type === 'heading_1'"
+  >
+    <TextRenderer :text="block.heading_1.rich_text" />
+  </h1>
+  <h2
+    v-else-if="block.type === 'heading_2'"
+  >
+    <TextRenderer :text="block.heading_2.rich_text" />
+  </h2>
+  <h3
+    v-else-if="block.type === 'heading_3'"
+  >
+    <TextRenderer :text="block.heading_3.rich_text" />
+  </h3>
+</template>

package/dist/runtime/components/Header.vue.d.ts

@@ -0,0 +1,7 @@
+import type { BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
+type __VLS_Props = {
+    block: BlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Image.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ImageBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: ImageBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Image.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+import TextRenderer from "./TextRenderer.vue";
+const props = defineProps({
+  block: { type: Object, required: true }
+});
+const imageUrl = computed(() => {
+  if (props.block.image.type === "external") {
+    return props.block.image.external?.url;
+  } else if (props.block.image.type === "file") {
+    return props.block.image.file?.url;
+  }
+  return "";
+});
+const imageCaption = computed(() => {
+  return props.block.image.caption.map((item) => item.plain_text).join("");
+});
+</script>
+
+<template>
+  <img
+    :src="imageUrl"
+    :alt="imageCaption || 'Image'"
+    class="w-full h-auto rounded-lg shadow-md"
+    loading="lazy"
+  >
+  <div
+    v-if="block.image.caption.length > 0"
+    class="mt-2 text-center"
+  >
+    <TextRenderer :text="block.image.caption" />
+  </div>
+</template>

package/dist/runtime/components/Image.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ImageBlockObjectResponse } from '@notionhq/client';
+type __VLS_Props = {
+    block: ImageBlockObjectResponse;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ListRenderer.d.vue.ts

@@ -0,0 +1,8 @@
+import type { NotionListBlock, NotionListType } from '../types/notion.js';
+type __VLS_Props = {
+    blocks: NotionListBlock[];
+    type: NotionListType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ListRenderer.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from "vue";
+import BulletedList from "./BulletedListItem.vue";
+import NumberedListItem from "./NumberedListItem.vue";
+import TodoListItem from "./TodoListItem.vue";
+const props = defineProps({
+  blocks: { type: Array, required: true },
+  type: { type: String, required: true }
+});
+const listHtmlTag = computed(() => {
+  switch (props.type) {
+    case "bulleted_list_item":
+      return "ul";
+    case "numbered_list_item":
+      return "ol";
+    case "to_do":
+    default:
+      return "div";
+  }
+});
+</script>
+
+<template>
+  <component
+    :is="listHtmlTag"
+    class="list-inside mb-6 space-y-2 text-slate-700 "
+    :class="{
+  'list-disc': props.type === 'bulleted_list_item',
+  'list-decimal': props.type === 'numbered_list_item'
+}"
+  >
+    <template
+      v-for="block in blocks"
+      :key="block.id"
+    >
+      <BulletedList
+        v-if="block.type === 'bulleted_list_item'"
+        :block="block"
+      />
+      <NumberedListItem
+        v-else-if="block.type === 'numbered_list_item'"
+        :block="block"
+      />
+      <TodoListItem
+        v-else-if="block.type === 'to_do'"
+        :block="block"
+      />
+    </template>
+  </component>
+</template>

package/dist/runtime/components/ListRenderer.vue.d.ts

@@ -0,0 +1,8 @@
+import type { NotionListBlock, NotionListType } from '../types/notion.js';
+type __VLS_Props = {
+    blocks: NotionListBlock[];
+    type: NotionListType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MathFormula.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    displayMode?: boolean;
+    expression: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    displayMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;