rimelight-components 1.9.0 → 1.10.0

package/dist/runtime/components/app/ScrollToTop.d.vue.ts

@@ -3,8 +3,8 @@ interface Props {
     duration?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
     duration: number;
+    circleStrokeWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/ScrollToTop.vue.d.ts

@@ -3,8 +3,8 @@ interface Props {
     duration?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
     duration: number;
+    circleStrokeWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/TOC.d.vue.ts

@@ -0,0 +1,26 @@
+import type { Block } from "../../types/blocks.js";
+import type { HeadingLevel } from "../../types/blocks.js";
+export interface TOCItem {
+    id: string;
+    title: string;
+    level: HeadingLevel;
+    children?: TOCItem[];
+}
+type __VLS_Props = {
+    pageBlocks: Block[];
+    title?: string;
+    levels?: HeadingLevel[];
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    bottom?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/renderers/TOC.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from "vue";
+import { slugify } from "../../utils/slugify";
+const {
+  pageBlocks,
+  title = "table_of_contents",
+  levels = [2, 3, 4]
+} = defineProps({
+  pageBlocks: { type: Array, required: true },
+  title: { type: String, required: false },
+  levels: { type: Array, required: false }
+});
+const extractHeadings = (blocks) => {
+  const headings = [];
+  if (!blocks || blocks.length === 0) {
+    return headings;
+  }
+  for (const block of blocks) {
+    if (block.type === "SectionBlock") {
+      const props = block.props;
+      const title2 = props.title;
+      const level = props.level;
+      if (title2 && level) {
+        headings.push({
+          id: slugify(title2),
+          title: title2,
+          level
+        });
+      }
+      if (props.children && props.children.length > 0) {
+        headings.push(...extractHeadings(props.children));
+      }
+    }
+  }
+  return headings;
+};
+const tocItems = computed(() => {
+  if (!pageBlocks || pageBlocks.length === 0) {
+    return [];
+  }
+  if (levels.length === 0) {
+    return [];
+  }
+  const allHeadings = extractHeadings(pageBlocks);
+  const filteredHeadings = allHeadings.filter(
+    (item) => levels.includes(item.level)
+  );
+  return Array.from(new Set(filteredHeadings.map((h) => h.id))).map(
+    (id) => filteredHeadings.find((h) => h.id === id)
+  );
+});
+</script>
+
+<template>
+  <div class="z-10 flex flex-col gap-md">
+    <nav
+      class="sticky top-(--ui-header-height) z-50 flex flex-col gap-md pt-lg"
+      aria-label="Table of Contents"
+    >
+      <h5 class="text-highlighted">
+        {{ $t(title) }}
+      </h5>
+
+      <ul
+        v-if="tocItems.length > 0"
+        class="flex flex-col gap-0 border-s border-default"
+      >
+        <li
+          v-for="item in tocItems"
+          :key="item.id"
+          class="relative flex min-w-0"
+          :class="{
+  'ms-2': item.level === 2,
+  'ms-4': item.level === 3,
+  'ms-6': item.level === 4,
+  'ms-8': item.level === 5,
+  'ms-10': item.level === 6
+}"
+        >
+          <NuxtLink
+            :href="`#${item.id}`"
+            class="group relative flex size-full items-center px-1.5 py-1.5 text-start text-sm font-medium before:absolute before:inset-x-0 before:inset-y-px before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-2 focus-visible:before:ring-inset dark:focus-visible:outline-none"
+          >
+            <span class="truncate">
+              {{ item.title }}
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+
+      <slot name="bottom" />
+    </nav>
+  </div>
+</template>

package/dist/runtime/components/renderers/TOC.vue.d.ts

@@ -0,0 +1,26 @@
+import type { Block } from "../../types/blocks.js";
+import type { HeadingLevel } from "../../types/blocks.js";
+export interface TOCItem {
+    id: string;
+    title: string;
+    level: HeadingLevel;
+    children?: TOCItem[];
+}
+type __VLS_Props = {
+    pageBlocks: Block[];
+    title?: string;
+    levels?: HeadingLevel[];
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    bottom?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/types/blocks.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Defines the allowed heading levels (h2 through h6) for the Table of Contents.
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 /**
  * All valid block types the application can render.
  * This union type is the single source of truth for component names.
@@ -13,7 +17,7 @@ export interface BaseContentBlock {
     props: Record<string, any>;
 }
 export interface SectionBlockProps {
-    level: 1 | 2 | 3 | 4 | 5 | 6;
+    level: HeadingLevel;
     title: string;
     description?: string;
     children: Block[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "My new Nuxt module",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight-components.git"