Fix slot data .length undefined

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Next
 * Collaborative editing in project findings and sections
+* Fix slot data items `.length` property undefined `<list-of-figures>`, `<list-of-tables>` and `<table-of-contents>` components
 
 
 ## v2024.030 - 2024-04-17

api/src/reportcreator_api/tests/test_rendering.py

@@ -218,9 +218,13 @@ class TestHtmlRendering:
         actual = self.extract_html_part(html, '<main>', '</main>')[6:-7]
         assertHTMLEqual(actual, expected)
 
-    def test_toc_rendering(self):
-        html = self.render_html("""
-        <table-of-contents v-slot="tocItems">
+    @pytest.mark.parametrize("slotDataSyntax", [
+        'tocItems',
+        '{ items: tocItems }',
+    ])
+    def test_toc_rendering(self, slotDataSyntax):
+        html = self.render_html(f"""
+        <table-of-contents v-slot="{slotDataSyntax}">
             <section v-if="tocItems">
                 <h1 id="toc" class="in-toc">Table of Contents</h1>
                 <ul>
@@ -258,9 +262,13 @@ class TestHtmlRendering:
         </ul>
         """)
 
-    def test_lof_rendering(self):
-        html = self.render_html("""
-        <list-of-figures v-slot="figures">
+    @pytest.mark.parametrize("slotDataSyntax", [
+        'figures',
+        '{ items: figures }',
+    ])
+    def test_lof_rendering(self, slotDataSyntax):
+        html = self.render_html(f"""
+        <list-of-figures v-slot="{slotDataSyntax}">
             <section v-if="figures">
                 <h1 id="lof" class="in-lof">List of Figures</h1>
                 <ul>
@@ -282,9 +290,13 @@ class TestHtmlRendering:
         </ul>
         """)
 
-    def test_lot_rendering(self):
-        html = self.render_html("""
-        <list-of-tables v-slot="tables">
+    @pytest.mark.parametrize("slotDataSyntax", [
+        'tables',
+        '{ items: tables }',
+    ])
+    def test_lot_rendering(self, slotDataSyntax):
+        html = self.render_html(f"""
+        <list-of-tables v-slot="{slotDataSyntax}">
             <section v-if="tables">
                 <h1 id="lot" class="in-lot">List of Tables</h1>
                 <ul>

demo_data/demo-designs/calzone.toml

@@ -67,7 +67,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">
@@ -78,7 +78,7 @@ report_template = """
 </table-of-contents>
 
 
-<list-of-figures id="lof" v-slot="items">
+<list-of-figures id="lof" v-slot="{ items }">
     <section v-if="items.length > 0">
         <h1 class="in-toc">List of Figures</h1>
         <ul>

demo_data/demo-designs/margherita.toml

@@ -61,7 +61,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
   <h1>Table of Contents</h1>
   <ul>
     <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/demo-designs/matrix.toml

@@ -58,7 +58,7 @@ report_template = """
   </div>
 </section>
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
   <h1>Table of Contents</h1>
   <ul>
     <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/demo-projects/calzone-report-demo.toml

@@ -511,7 +511,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">
@@ -522,7 +522,7 @@ report_template = """
 </table-of-contents>
 
 
-<list-of-figures id="lof" v-slot="items">
+<list-of-figures id="lof" v-slot="{ items }">
     <section v-if="items.length > 0">
         <h1 class="in-toc">List of Figures</h1>
         <ul>

demo_data/demo-projects/margherita-report-demo.toml

@@ -504,7 +504,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
   <h1>Table of Contents</h1>
   <ul>
     <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/demo-projects/oscp-exam-report-demo.toml

@@ -366,7 +366,7 @@ report_template = """
 
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/htb-designs/cbbh.toml

@@ -53,7 +53,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/htb-designs/cdsa.toml

@@ -56,7 +56,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/htb-designs/cpts.toml

@@ -53,7 +53,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/htb-designs/cwee.toml

@@ -56,7 +56,7 @@ report_template = """
 </section>
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/oscp-lab.toml

@@ -39,7 +39,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/oscp.toml

@@ -45,7 +45,7 @@ report_template = """
 
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/osda.toml

@@ -37,7 +37,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/osed.toml

@@ -41,7 +41,7 @@ report_template = """
 </section>
 <pagebreak />
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/osee.toml

@@ -41,7 +41,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/osep.toml

@@ -42,7 +42,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/osmr.toml

@@ -41,7 +41,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/oswa.toml

@@ -41,7 +41,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/oswe.toml

@@ -41,7 +41,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

demo_data/offsec-designs/oswp.toml

@@ -40,7 +40,7 @@ report_template = """
 <pagebreak />
 
 
-<table-of-contents id="toc" v-slot="tocItems">
+<table-of-contents id="toc" v-slot="{ items: tocItems }">
     <h1>Table of Contents</h1>
     <ul>
         <li v-for="item in tocItems" :class="'toc-level' + item.level">

docs/docs/designer/figures.md

@@ -66,7 +66,7 @@ The component uses multi-pass rendering.
 In the first render-pass it does nothing, in the second pass it collects all previously rendered `<figcaption>` tags and provides them in the variable `items`.
 
 ```html
-<list-of-figures id="lof" v-slot="items" >
+<list-of-figures id="lof" v-slot="{ items }" >
     <section v-if="items.length > 0">
         <h1 class="in-toc">List of Figures</h1>
         <ul>

docs/docs/designer/headings-and-table-of-contents.md

@@ -162,7 +162,7 @@ This example renders a table of contents with
 * links entries to the target pages, such that you can click on the TOC entries and jump to the referenced pa
 
 ```html
-<table-of-contents v-slot="tocItems">
+<table-of-contents v-slot="{ items: tocItems }">
   <ul class="toc">
     <template v-for="item in tocItems">
       <li :class="'level-' + item.level"><a :href="item.href">{{ item.title }}</a></li>
@@ -214,7 +214,7 @@ This example renders a table of contents with
 * supports regular chapters and appendix chapters
 
 ```html
-<table-of-contents v-slot="tocItems">
+<table-of-contents v-slot="{ items: tocItems }">
     <ul class="toc">
         <template v-for="item in tocItems">
             <li :class="['toc-level-' + item.level, (item.attrs.class || '').split(' ').includes('numbered') ? 'numbered' : '', (item.attrs.class || '').split(' ').includes('numbered-appendix') ? 'numbered-appendix' : '']">

docs/docs/designer/tables.md

@@ -89,7 +89,7 @@ The component uses multi-pass rendering.
 In the first render-pass it does nothing, in the second pass it collects all previously rendered `<caption>` tags and provides them in the variable `items`.
 
 ```html
-<list-of-tables v-slot="items">
+<list-of-tables v-slot="{ items }">
   <section v-if="items.length > 0">
     <h1 class="in-toc">List of Tables</h1>
     <ul class="lot">

frontend/src/components/Design/designer-components.ts

@@ -1148,7 +1148,7 @@ export class TableOfContentsComponent extends DesignerComponentBase {
 
     return {
       html: trimLeadingWhitespace(`
-        <table-of-contents id="${id}" v-slot="tocItems" >
+        <table-of-contents id="${id}" v-slot="{ items: tocItems }" >
           <h1>${form.toc.headline}</h1>
           <ul>
               <li v-for="item in tocItems" :class="'toc-level' + item.level">
@@ -1183,7 +1183,7 @@ export class ListOfFiguresComponent extends DesignerComponentBase {
     const id = createUniqueId('lof', context);
     return {
       html: trimLeadingWhitespace(`
-        <list-of-figures id="${id}" v-slot="items" >
+        <list-of-figures id="${id}" v-slot="{ items }" >
           <section v-if="items.length > 0">
               <h1 class="in-toc">List of Figures</h1>
               <ul>

rendering/src/components/ListOfFigures.vue

@@ -1,18 +1,20 @@
 <template>
   <div v-if="shouldRender">
-    <slot name="default" v-bind="items" />
+    <slot name="default" v-bind="slotData" />
   </div>
 </template>
 
 <script setup>
 import { v4 as uuidv4 } from "uuid";
-import { onMounted, ref, getCurrentInstance } from "vue";
-import { callForTicks } from "@/utils";
+import { onMounted, ref, getCurrentInstance, computed } from "vue";
+import { callForTicks, slotDataArray } from "@/utils";
 
 const shouldRender = ref(false);
 const items = ref([]);
+const slotData = computed(() => slotDataArray(items.value));
 const vm = getCurrentInstance();
 
+
 function updateItems() {
   items.value = [];
   for (const el of vm.root.vnode.el.querySelectorAll('figcaption')) {

rendering/src/components/ListOfTables.vue

@@ -1,16 +1,17 @@
 <template>
   <div v-if="shouldRender">
-    <slot name="default" v-bind="items" />
+    <slot name="default" v-bind="slotData" />
   </div>
 </template>
 
 <script setup>
 import { v4 as uuidv4 } from "uuid";
-import { onMounted, ref, getCurrentInstance } from "vue";
-import { callForTicks } from "@/utils";
+import { onMounted, ref, computed, getCurrentInstance } from "vue";
+import { callForTicks, slotDataArray } from "@/utils";
 
 const shouldRender = ref(false);
 const items = ref([]);
+const slotData = computed(() => slotDataArray(items.value));
 const vm = getCurrentInstance();
 
 function updateItems() {

rendering/src/components/TableOfContents.vue

@@ -1,17 +1,19 @@
 <template>
   <div v-if="shouldRender">
-    <slot name="default" v-bind="items" />
+    <slot name="default" v-bind="slotData" />
   </div>
 </template>
 
 <script setup>
 import { v4 as uuidv4 } from "uuid";
-import { getCurrentInstance, onMounted, ref } from "vue";
-import { callForTicks } from "@/utils";
+import { getCurrentInstance, onMounted, ref, computed } from "vue";
+import { callForTicks, slotDataArray } from "@/utils";
 
 
 const shouldRender = ref(false);
 const items = ref([]);
+// const slotData = computed(() => items.value);
+const slotData = computed(() => slotDataArray(items.value));
 
 const vm = getCurrentInstance();
 

rendering/src/utils.js

@@ -6,3 +6,14 @@ export async function callForTicks(tickCount, tickCallback) {
     tickCallback();
   }
 }
+
+
+/**
+ * Compatibility layer to allow passing an array of items to v-slot at top level.
+ * This function returns a slot value that is both an array (old syntax) and an object with an "items" property (new syntax).
+ */
+export function slotDataArray(items) {
+  const data = [...items];
+  data.items = data;
+  return data;
+}