cec-nuxt-lib 0.7.1 → 0.7.3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "cec-nuxt-lib",
   "configKey": "cec-nuxt-lib",
-  "version": "0.7.1"
+  "version": "0.7.3"
 }

package/dist/runtime/components/cecCanvas.vue

@@ -9,7 +9,7 @@ const getCanvas = (data: Block[]) => renderer({ data });
 const baseUrl = useState('baseUrl');
 const listItems = useState('listItems');
 const path = useState('path');
-const questions = useState('questions', () => []);
+const questions = useState('questions');
 const title = useState('title');
 let canvasHtml;
 
@@ -405,7 +405,9 @@ const makeQuestions = (data, id) => {
       );
       qu.select += '</select>';
     }
-    questions.value.push({ id: id, question: data.question, stack: [0] });
+    if (!questions.value.some((e) => e.id === id)) {
+      questions.value.push({ id: id, question: data.question, stack: [0] });
+    }
   });
 
   let inner = data.question[0].select
@@ -419,13 +421,15 @@ const makeQuestions = (data, id) => {
   return `
     <div class="mt-3 questions">
       <fieldset class="p-1 mb-3">
-        <legend>${data.entryTitle}</legend>
+
+<div><ol id="${id}_breadcrumb" class="breadcrumb "><li class="breadcrumb-item">${data.question[0].question}</li></ol></div>
+        <legend class="hidden">${data.entryTitle}</legend>
         <div class="ps-2 question align-items-middle row g-0">
-          <div class="mb-3" id="${id}_display">${data.question[0].question}
+          <div class="mb-3" id="${id}_display">
 </div>
             ${inner}
         </div>
-        <button
+        <!-- <button
           type="button"
           class="mt-4 btn btn-light previous"
           id="${id}_prev"
@@ -438,7 +442,7 @@ const makeQuestions = (data, id) => {
           id="${id}_reset"
         >
           Restart
-        </button>
+        </button> -->
       </fieldset>
     </div>`;
 };

package/dist/runtime/components/cecHeader.vue

@@ -4,6 +4,7 @@ import { useState } from '#app';
 
 const searchTerm = useState('searchTerm', () => 'Enter keywords:');
 const showSiteSearch = useState('showSiteSearch');
+const questions = useState('questions');
 
 const regex =
   /^https:\/\/digital-core\.cheshireeast\.gov\.uk(?!.*(?:&pagePath|&pageTitle|login)).*$/;
@@ -246,21 +247,44 @@ onMounted(() => {
     });
   };
 
+  const makeBreadcrumb = (id, qTop) => {
+    let display = document.getElementById(id + '_display');
+    let breadcrumb = document.getElementById(`${id}_breadcrumb`);
+    breadcrumb.innerHTML = '';
+    qTop.stack.forEach((el, i) => {
+      let li = document.createElement('LI');
+      li.classList.add('breadcrumb-item');
+      li.innerHTML = qTop.question[el].question;
+      if (i !== qTop.stack.length - 1 || display.innerText.length) {
+        li.classList.add('fakeLink');
+        li.onclick = () => goto(id, i, false);
+      }
+      breadcrumb.appendChild(li);
+    });
+  };
+
   const goto = (id, index, addToStack = true) => {
     let qTop = questions.value.find((e) => e.id === id);
+    if (!index) {
+      qTop.stack = [0];
+    }
     if (addToStack) {
       qTop.stack.push(index);
     }
     let q = qTop.question[index];
-    document.getElementById(id + '_display').innerHTML = q.question;
+    document.getElementById(id + '_display').innerHTML = '';
     document.getElementById(id + '_buttons').innerHTML = q.buttons || q.select;
+    makeBreadcrumb(id, qTop);
     setUpListeners();
   };
 
   const display = (id, display) => {
-    console.log();
     document.getElementById(id + '_display').innerHTML = display;
     document.getElementById(id + '_buttons').innerHTML = '';
+    makeBreadcrumb(
+      id,
+      questions.value.find((e) => e.id === id)
+    );
   };
 
   const prev = (id) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.7.3",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",