cec-nuxt-lib 0.10.3 → 0.10.5

package/dist/runtime/components/cecCanvas.vue

@@ -1,47 +1,38 @@
-<script setup lang="ts">
-import { useState } from '#app';
-import { createRenderer, text } from '@contensis/canvas-html';
-import type { Block } from '@contensis/canvas-html';
-const getCanvas = (data: Block[]) => renderer({ data });
-
-const listItems = useState('listItems');
-const questions = useState('questions');
+<script setup>
+import { useState } from "#app";
+import { createRenderer, text } from "@contensis/canvas-html";
+const getCanvas = (data) => renderer({ data });
+const listItems = useState("listItems");
+const questions = useState("questions");
 let canvasHtml;
-
 const props = defineProps({
   canvas: {
     type: Object,
-    required: true,
-  },
+    required: true
+  }
 });
-
 const { canvas } = props;
-
 const sizeString = (n) => {
-  if (n < 1000) {
+  if (n < 1e3) {
     return `${n}B`;
-  } else if (n < 1000 * 1000) {
-    return `${Math.ceil(n / 1000)}KB`;
+  } else if (n < 1e3 * 1e3) {
+    return `${Math.ceil(n / 1e3)}KB`;
   } else {
-    return `${(n / 1000 / 1000).toFixed(1)}MB`;
+    return `${(n / 1e3 / 1e3).toFixed(1)}MB`;
   }
 };
-
 const abbr = (data) => {
   return `<abbr title="${text(data.entryDescription)}">${text(data.entryTitle)}</abbr>`;
 };
-
-const accWithAssets = (props: any) => {
-  let data = { ...props.block.value, id: props.block.id };
+const accWithAssets = (props2) => {
+  let data = { ...props2.block.value, id: props2.block.id };
   return accordion(data);
 };
-
 const accordion = (data) => {
   if (!data.id) {
     data.id = data.sys.id;
   }
-  let html = data.expandAll
-    ? `
+  let html = data.expandAll ? `
   <div class="text-end">
     <button
       id="${data.id}"
@@ -51,8 +42,7 @@ const accordion = (data) => {
       Expand all
     </button>
   </div>
-  `
-    : '';
+  ` : "";
   html += `
   <p class="sr-only">
     The following checkboxes are used for accordion drop-downs. When
@@ -64,23 +54,20 @@ const accordion = (data) => {
     let accId = `${data.id}_${i}`;
     if (e.pdfs?.length) {
       let pdfs = e.pdfs.reduce((acc, p) => {
-        return (
-          acc +
-          `
+        return acc + `
             <li>
               <a href="${processUri(p.sys.uri)}"
                 >${p.title[0].toUpperCase()}${p.title.slice(1)}
                 (${p.sys.contentTypeId.toUpperCase()},
                 ${sizeString(p.sys.properties.fileSize)})
               </a>
-            </li>`
-        );
-      }, '<ul>');
-      e.content = `${e.content ? e.content : ''}${pdfs}</ul>`;
+            </li>`;
+      }, "<ul>");
+      e.content = `${e.content ? e.content : ""}${pdfs}</ul>`;
     }
-    let article = `${e.content ? e.content : ''}${e.genericList ? genList(e.genericList, accId) : ''}`;
+    let article = `${e.content ? e.content : ""}${e.genericList ? genList(e.genericList, accId) : ""}`;
     if (!article.length) {
-      article = '<p>Nothing to display at present</p>';
+      article = "<p>Nothing to display at present</p>";
     }
     html += `
   <input class="${data.id}"
@@ -93,41 +80,28 @@ const accordion = (data) => {
   </article>
   `;
   });
-  html += '</section>';
+  html += "</section>";
   return html;
 };
-
-const accordionComponent = (props: any) => {
-  return accordion({ ...props.block.value, id: props.block.id });
+const accordionComponent = (props2) => {
+  return accordion({ ...props2.block.value, id: props2.block.id });
 };
-
 const anchor = (data) => {
   return `<${data.tag} id="${data.id}">${data.text}</${data.tag}>`;
 };
-
 const carousel = (data, id) => {
-  // Create the indicators
   let indicators = data.carouselComponent.reduce((acc, _, i) => {
-    return (
-      acc +
-      `<button type="button" data-bs-target="#${id}-indicators" data-bs-slide-to="${i}" class="${i ? '' : 'active'}" aria-current="${i ? '' : 'true'}" aria-label="Slide ${i}">${i + 1}</button>`
-    );
-  }, '');
-
-  // Create the slides
+    return acc + `<button type="button" data-bs-target="#${id}-indicators" data-bs-slide-to="${i}" class="${i ? "" : "active"}" aria-current="${i ? "" : "true"}" aria-label="Slide ${i}">${i + 1}</button>`;
+  }, "");
   let slides = data.carouselComponent.reduce((acc, e, i) => {
-    return (
-      acc +
-      `<div class="carousel-item ${i ? '' : 'active'}">
-        ${e.link.target ? '<a class="innerLink" href="' + e.link.target + '"><span class="hidden">' + e.link.label + '</span></a>' : ''}
+    return acc + `<div class="carousel-item ${i ? "" : "active"}">
+        ${e.link.target ? '<a class="innerLink" href="' + e.link.target + '"><span class="hidden">' + e.link.label + "</span></a>" : ""}
         <img src="${e.image.asset.sys.uri}" class="d-block w-100" alt="${e.image.altText}">
       <div class="carousel-caption d-none d-md-block">
         ${e.content}
       </div>
-    </div>`
-    );
-  }, '');
-  // Return the component
+    </div>`;
+  }, "");
   return `
     <div id="${id}-indicators" class="carousel slide">
       <div class="carousel-indicators ">
@@ -150,16 +124,14 @@ const carousel = (data, id) => {
       </button>
     </div>`;
 };
-
-const cecButton = (props: any) => {
-  let item = props.block?.value;
+const cecButton = (props2) => {
+  let item = props2.block?.value;
   let inner = item.text.length > 20 ? `<small>${item.text}</small>` : item.text;
-  let title = item.titleText?.length ? `title="${item.titleText}"` : '';
+  let title = item.titleText?.length ? `title="${item.titleText}"` : "";
   return `<a ${title} class="cec-button" href="${item.url}">${inner}</a>`;
 };
-
-const centralColumn = (props: any) => {
-  let item = props.block?.value;
+const centralColumn = (props2) => {
+  let item = props2.block?.value;
   if (item.column.length === 1) {
     return `
   <div class="row">
@@ -193,9 +165,8 @@ const centralColumn = (props: any) => {
   `;
   }
 };
-
-const centralPromotionalSection = (props: any) => {
-  let item = props.block?.value;
+const centralPromotionalSection = (props2) => {
+  let item = props2.block?.value;
   return `
   <div class="row">
     <div class="py-5 bg-cec-central-promo-section">
@@ -208,24 +179,17 @@ const centralPromotionalSection = (props: any) => {
   </div>
   `;
 };
-
 const contactDetails = (data) => {
-  let address = data.buildingName ? `<p class="mb-0">${data.buildingName}` : '';
-  address += data.streetAddress
-    ? makeAddressItem('streetAddress', data.streetAddress)
-    : '';
-  address += data.locality
-    ? makeAddressItem('addressLocality', data.locality)
-    : '';
-  address += data.county ? makeAddressItem('addressRegion', data.county) : '';
-  address += data.postCode ? makeAddressItem('postalCode', data.postCode) : '';
-  let contact = data.phoneNumber
-    ? makeAddressItem('telephone', data.phoneNumber)
-    : '';
-  contact += data.email ? makeAddressItem('email', data.email) : '';
+  let address = data.buildingName ? `<p class="mb-0">${data.buildingName}` : "";
+  address += data.streetAddress ? makeAddressItem("streetAddress", data.streetAddress) : "";
+  address += data.locality ? makeAddressItem("addressLocality", data.locality) : "";
+  address += data.county ? makeAddressItem("addressRegion", data.county) : "";
+  address += data.postCode ? makeAddressItem("postalCode", data.postCode) : "";
+  let contact = data.phoneNumber ? makeAddressItem("telephone", data.phoneNumber) : "";
+  contact += data.email ? makeAddressItem("email", data.email) : "";
   return `
   <div itemscope itemtype="https://schema.org/Organization">
-    ${makeAddressItem('name', data.name)}
+    ${makeAddressItem("name", data.name)}
     <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
       ${address}
     </div>
@@ -233,21 +197,19 @@ const contactDetails = (data) => {
   </div>
 `;
 };
-
 const container = (data) => {
   if (data.closeContainer) {
-    return `</div>${data.singleChoice === 'cec-main-column' ? '</div>' : ''}`;
+    return `</div>${data.singleChoice === "cec-main-column" ? "</div>" : ""}`;
   }
-  if (data.singleChoice === 'full-width') {
+  if (data.singleChoice === "full-width") {
     return '<div class="container">';
   }
   return `<div class="container">
   <div class="col-lg-8 cec-main-col-width">
   `;
 };
-
-const fullWidthImageWithOverlay = (props: any) => {
-  let item = props.block?.value;
+const fullWidthImageWithOverlay = (props2) => {
+  let item = props2.block?.value;
   let overlay;
   if (item.overlayImage) {
     overlay = `
@@ -284,7 +246,7 @@ const fullWidthImageWithOverlay = (props: any) => {
   </div>
   `;
   } else {
-    overlay = '';
+    overlay = "";
   }
   return `
   <div class="position-relative">
@@ -299,9 +261,8 @@ const fullWidthImageWithOverlay = (props: any) => {
   </div>
   `;
 };
-
-const fullWidthImageWithSideOverlay = (props: any) => {
-  let item = props.block?.value;
+const fullWidthImageWithSideOverlay = (props2) => {
+  let item = props2.block?.value;
   return `
   <div class="position-relative side-overlay-section">
     <div class="row g-0">
@@ -318,20 +279,18 @@ const fullWidthImageWithSideOverlay = (props: any) => {
   </div>
   `;
 };
-
-const heroUnit = (props: any) => {
-  let item = props.block?.value;
+const heroUnit = (props2) => {
+  let item = props2.block?.value;
   return `<div class="hero-unit my-4">${item.content}</div>`;
 };
-
-const horizontalTable = (props: any) => {
-  let data = props.block?.value;
+const horizontalTable = (props2) => {
+  let data = props2.block?.value;
   let rows = data.tableRow.reduce((acc, r) => {
     let cols = r.columns.reduce((acc1, c) => {
       return acc1 + `<td>${c}</td>`;
-    }, '');
+    }, "");
     return `${acc}<tr><th scope="row">${r.headerCell}</th>${cols}</tr>`;
-  }, '');
+  }, "");
   return `
   <div class="table-responsive">
     <table class="usr_TableDefault">
@@ -343,44 +302,36 @@ const horizontalTable = (props: any) => {
   </div>
   `;
 };
-
-const htmlComponent = (props: any) => {
-  let item = props.block?.value;
+const htmlComponent = (props2) => {
+  let item = props2.block?.value;
   return item.html;
 };
-
-const imageWithCSS = (props: any) => {
-  let data = props.block?.value;
-  let classes = data.alignment || '';
-  classes += data.otherCss ? ` ${data.otherCss}` : '';
+const imageWithCSS = (props2) => {
+  let data = props2.block?.value;
+  let classes = data.alignment || "";
+  classes += data.otherCss ? ` ${data.otherCss}` : "";
   return `
-  <img src="${data.image.asset.sys.uri}" alt="${data.image.altText}" class="${classes}" />
+  <img src="${data?.image?.asset?.sys?.uri || data.pathOfImage}" alt="${data.image.altText}" class="${classes}" />
 `;
 };
-
 const linkEntry = (data) => {
-  return `<a title="${data.title || ''}" href="${data.target}">${data.text}</a>`;
+  return `<a title="${data.title || ""}" href="${data.target}">${data.text}</a>`;
 };
-
-const makeAddressItem = (prop, text) => {
-  if (prop === 'email') {
-    return `<p class="mb-0"> <a href="mailto:${text}" itemprop="${prop}>${text}</a></p>`;
+const makeAddressItem = (prop, text2) => {
+  if (prop === "email") {
+    return `<p class="mb-0"> <a href="mailto:${text2}" itemprop="${prop}>${text2}</a></p>`;
   }
-  return `<p class="mb-0" itemprop="${prop}">${text}</p>`;
+  return `<p class="mb-0" itemprop="${prop}">${text2}</p>`;
 };
-
 const formatId = (str) => {
-  return str.replace('?', '').replace(/\W/g, '-');
+  return str.replace("?", "").replace(/\W/g, "-");
 };
-
 const makeQuestions = (data, id) => {
   data.question.forEach((qu, j) => {
     qu.stack = [0];
     if (qu.responseForQuestionComponent.length < 4) {
       qu.buttons = qu.responseForQuestionComponent.reduce((acc, r, i) => {
-        return (
-          acc +
-          `<div class="col w-auto ps-0 pe-3">
+        return acc + `<div class="col w-auto ps-0 pe-3">
         <button
           type="button"
           id="${formatId(data.title)}_${formatId(qu.question)}_${formatId(r.buttonText)}_${id}_${j}_${i}"
@@ -388,9 +339,8 @@ const makeQuestions = (data, id) => {
         >
           ${r.buttonText}
         </button>
-      </div>`
-        );
-      }, '');
+      </div>`;
+      }, "");
     } else {
       qu.select = qu.responseForQuestionComponent.reduce(
         (acc, r) => {
@@ -398,18 +348,15 @@ const makeQuestions = (data, id) => {
         },
         `<select class="question-select" name="${id}_${j}" id="${formatId(data.title)}_${formatId(qu.question)}_select_${id}_${j}"><option value="" disabled selected hidden>Choose an option</option>`
       );
-      qu.select += '</select>';
+      qu.select += "</select>";
     }
     if (!questions.value.some((e) => e.id === id)) {
-      questions.value.push({ id: id, question: data.question, stack: [0] });
+      questions.value.push({ id, question: data.question, stack: [0] });
     }
   });
-
-  let inner = data.question[0].select
-    ? `
+  let inner = data.question[0].select ? `
     <div id="${id}_buttons">${data.question[0].select}</div>
-    `
-    : `
+    ` : `
     <div class="row row-cols-auto btns-div" id="${id}_buttons">
     ${data.question[0].buttons}
     </div>`;
@@ -441,23 +388,22 @@ const makeQuestions = (data, id) => {
       </fieldset>
     </div>`;
 };
-
 const processTime = (str) => {
-  let suffix = 'am';
-  if (str === '00:00') {
-    return 'midnight';
+  let suffix = "am";
+  if (str === "00:00") {
+    return "midnight";
   }
-  if (str === '12:00') {
-    return 'midday';
+  if (str === "12:00") {
+    return "midday";
   }
   if (!str) {
-    return 'Closed';
+    return "Closed";
   }
-  let time = str.split(':').reduce((acc, e) => {
+  let time = str.split(":").reduce((acc, e) => {
     return [...acc, parseInt(e)];
   }, []);
   if (time[0] > 12) {
-    suffix = 'pm';
+    suffix = "pm";
     time[0] -= 12;
   }
   let res = time[0].toString();
@@ -468,25 +414,21 @@ const processTime = (str) => {
   }
   return res;
 };
-
 const openingHours = (data) => {
   let body = data.openingHours.reduce((acc, e) => {
     let from = processTime(e.from);
     let to = processTime(e.to);
-    let hours = '';
-    if (from === 'Closed') {
-      hours = 'Closed';
+    let hours = "";
+    if (from === "Closed") {
+      hours = "Closed";
     } else {
       hours = `${from} to ${to}`;
     }
-    return (
-      acc +
-      `<tr>
+    return acc + `<tr>
         <td>${e.dayInformation}</td>
         <td>${hours}</td>
-      </tr>`
-    );
-  }, '');
+      </tr>`;
+  }, "");
   return `
   <table class="usrTableDefault">
     <caption class="hidden">
@@ -504,9 +446,8 @@ const openingHours = (data) => {
   </table>
 `;
 };
-
-const promotionalBannerWithText = (props: any) => {
-  let item = props.block?.value;
+const promotionalBannerWithText = (props2) => {
+  let item = props2.block?.value;
   let overlay = `
   <div class="cec-cent-promo-txt-wrap col-md-11 top-50 w-100 text-center">
     <h1
@@ -516,7 +457,7 @@ const promotionalBannerWithText = (props: any) => {
     </h1>
   </div>
   `;
-  let paras = item.html ? item.html.replace(/<\/?p>/g, '').split('\n') : [];
+  let paras = item.html ? item.html.replace(/<\/?p>/g, "").split("\n") : [];
   if (paras.length) {
     overlay = `
   <div
@@ -545,9 +486,9 @@ const promotionalBannerWithText = (props: any) => {
   </div>
   `;
 };
-const promotionalContrastRegion = (props: any) => {
-  let item = props.block?.value;
-  const bgClass = `bg-${item.colour.toLowerCase().replace(/\s/g, '-')}`;
+const promotionalContrastRegion = (props2) => {
+  let item = props2.block?.value;
+  const bgClass = `bg-${item.colour.toLowerCase().replace(/\s/g, "-")}`;
   let textCol = `
     <div class="p-2 ps-lg-4 ms-lg-5 col">
       <div class="cec-pull-column pe-md-5">${item.content}</div>
@@ -564,13 +505,12 @@ const promotionalContrastRegion = (props: any) => {
     <div
     class="${bgClass} cec-pull-container pe-md-0 d-flex flex-column flex-md-row justify-content-center ps-4 align-items-center py-5 mb-4"
     >
-    ${item.alignment === 'left' ? imageCol + textCol : textCol + imageCol}
+    ${item.alignment === "left" ? imageCol + textCol : textCol + imageCol}
     </div>
 `;
 };
-
-const promotionalFullWidthImageWithOverlay = (props: any) => {
-  let item = props.block?.value;
+const promotionalFullWidthImageWithOverlay = (props2) => {
+  let item = props2.block?.value;
   let overlay;
   if (!item.overlayText) {
     overlay = `
@@ -620,8 +560,8 @@ const promotionalFullWidthImageWithOverlay = (props: any) => {
   </div>
   `;
 };
-const promotionalFullWidthImageWithSideOverlay = (props: any) => {
-  let item = props.block?.value;
+const promotionalFullWidthImageWithSideOverlay = (props2) => {
+  let item = props2.block?.value;
   return `
   <div class="position-relative side-overlay-section">
     <div class="row g-0">
@@ -641,27 +581,21 @@ const promotionalFullWidthImageWithSideOverlay = (props: any) => {
   </div>
   `;
 };
-
 const processUri = (uri) => {
   return encodeURI(decodeURI(uri).toLowerCase());
 };
-
-const genericList = (props: any) => {
-  return genList(props.block.value, props.block.id);
+const genericList = (props2) => {
+  return genList(props2.block.value, props2.block.id);
 };
 const genList = (item, id) => {
-  let heading = item.title ? `<h2 class="fs-4 mt-3">${item.title}</h2>` : '';
-
-  return listItems.value[id] && listItems.value[id].length
-    ? `
+  let heading = item.title ? `<h2 class="fs-4 mt-3">${item.title}</h2>` : "";
+  return listItems.value[id] && listItems.value[id].length ? `
     ${heading}
     <ul>
       ${listItems.value[id].reduce((acc, e) => {
-        return e.sys.dataFormat === 'webpage'
-          ? `${acc}
+    return e.sys.dataFormat === "webpage" ? `${acc}
       <li><a href="${processUri(e.sys.uri)}">${e.title}</a></li>
-      `
-          : `${acc}
+      ` : `${acc}
       <li>
         <a href="${processUri(e.sys.uri)}"
           >${e.title[0].toUpperCase()}${e.title.slice(1)}
@@ -670,67 +604,61 @@ const genList = (item, id) => {
         </a>
       </li>
       `;
-      }, '')}
+  }, "")}
     </ul>
-`
-    : '';
+` : "";
 };
-
-const myInlineEntry = (props: any) => {
-  let data = props.block?.value;
-  let id = props.block?.id;
-  let entryType = props.block?.value.sys.contentTypeId;
-  if (entryType.startsWith('accordion')) {
+const myInlineEntry = (props2) => {
+  let data = props2.block?.value;
+  let id = props2.block?.id;
+  let entryType = props2.block?.value.sys.contentTypeId;
+  if (entryType.startsWith("accordion")) {
     return accordion(data);
   }
   switch (entryType) {
-    case 'abbreviation':
+    case "abbreviation":
       return abbr(data);
-    case 'anchor':
+    case "anchor":
       return anchor(data);
-    case 'carousel':
+    case "carousel":
       return carousel(data, id);
-    case 'contactDetails':
+    case "contactDetails":
       return contactDetails(data);
-    case 'container':
+    case "container":
       return container(data);
-    case 'linkEntry':
+    case "linkEntry":
       return linkEntry(data);
-    case 'openingHours':
+    case "openingHours":
       return openingHours(data);
-    case 'questions':
+    case "questions":
       return makeQuestions(data, id);
     default:
       return `<span> ${text(data.entrytitle)} </span>`;
   }
 };
-
 const renderer = createRenderer({
   blocks: {
-    _inlineEntry: myInlineEntry,
+    _inlineEntry: myInlineEntry
   },
   components: {
-    accordionComponent: accordionComponent,
-    cecButton: cecButton,
-    centralColumn: centralColumn,
+    accordionComponent,
+    cecButton,
+    centralColumn,
     dragonsLaneAccordion: accWithAssets,
-    fullWidthImageWithOverlay: fullWidthImageWithOverlay,
-    fullWidthImageWithSideOverlay: fullWidthImageWithSideOverlay,
-    centralPromotionalSection: centralPromotionalSection,
-    promotionalFullWidthImageWithOverlay: promotionalFullWidthImageWithOverlay,
-    promotionalFullWidthImageWithSideOverlay:
-      promotionalFullWidthImageWithSideOverlay,
-    genericList: genericList,
-    heroUnit: heroUnit,
-    horizontalTable: horizontalTable,
-    htmlComponent: htmlComponent,
-    imageWithCSS: imageWithCSS,
-    promotionalBannerWithText: promotionalBannerWithText,
-    promotionalContrastRegion: promotionalContrastRegion,
-  },
+    fullWidthImageWithOverlay,
+    fullWidthImageWithSideOverlay,
+    centralPromotionalSection,
+    promotionalFullWidthImageWithOverlay,
+    promotionalFullWidthImageWithSideOverlay,
+    genericList,
+    heroUnit,
+    horizontalTable,
+    htmlComponent,
+    imageWithCSS,
+    promotionalBannerWithText,
+    promotionalContrastRegion
+  }
 });
-
-// Process the canvas
 canvasHtml = getCanvas(canvas);
 canvasHtml = canvasHtml.replace(
   /<img src="|<caption|<table|<\/table>|<th>/g,
@@ -738,13 +666,13 @@ canvasHtml = canvasHtml.replace(
     switch (match) {
       case '<img src="':
         return `<img src="`;
-      case '<caption':
+      case "<caption":
         return "<caption class='hidden'";
-      case '<table':
+      case "<table":
         return "<div class='table-responsive'><table class='usr_TableDefault'";
-      case '</table>':
-        return '</table></div>';
-      case '<th>':
+      case "</table>":
+        return "</table></div>";
+      case "<th>":
         return '<th scope="col">';
       default:
         return match;
@@ -754,7 +682,7 @@ canvasHtml = canvasHtml.replace(
 canvasHtml = canvasHtml.replace(
   /(<a href="mailto:[^"]+">)([^<]+)(<\/a>)/g,
   (_, p1, p2, p3) => {
-    return `${p1}${p2.replace(/([.@])/g, '<wbr />$1')}${p3}`;
+    return `${p1}${p2.replace(/([.@])/g, "<wbr />$1")}${p3}`;
   }
 );
 </script>