@dcodegroup-au/page-builder 0.3.5 → 0.3.7

package/src/components/presenters/components/CarouselPresenter.vue

@@ -31,7 +31,10 @@
               </span>
             </div>
             <h3 class="my-3">
-              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline" :href="slide.url" target="_blank">{{ slide?.title }}</a>
+              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline"
+                 :href="formatUrl(slide.url)" target="_blank">
+                {{ slide?.title }}
+              </a>
             </h3>
             <p
                 class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
@@ -79,8 +82,8 @@
     <div v-if="component?.button" class="flex justify-center mb-[40px]">
       <a
           class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
-          :href="component.button.url"
-         :target="component.button.is_new_tab ? '_blank' : ''">
+          :href="formatUrl(component.button.url)"
+         :target="component.button.open_in_new_tab ? '_blank' : ''">
         {{ component.button.title }}
         <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
       </a>
@@ -96,6 +99,7 @@ import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import Ticket from "@/assets/img/icons/ticket-02.svg";
 import DefaultPrimaryButton from "@/components/presenters/overridables/VCarouselPrimaryButton.vue";
+import { formatUrl } from "@/components/helpers/common";
 
 // Inject the FileUpload component or fallback to the default one
 const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", DefaultPrimaryButton);
@@ -115,11 +119,6 @@ const currentSlide = ref(0); // Start at 0
 const itemsToShow = 4; // Number of items to show at a time
 const slides = [...props.component.content?.items || []];
 
-// Format URL
-const formatUrl = (url) => {
-  return url.startsWith("http") ? url : `//${url}`;
-};
-
 // Navigate to the next slide
 const nextSlide = () => {
   if (currentSlide.value <= slides.length - itemsToShow) {

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -44,7 +44,7 @@
           </div>
           <a
               v-if="card?.link"
-              :href="card.link"
+              :href="formatUrl(card.link)"
               class="text-gray-900 text-lg font-semibold hover:underline block mb-2 w-full"
               target="_blank"
               rel="noopener noreferrer"
@@ -61,8 +61,8 @@
     <div v-if="Object.keys(button).length && button?.show" class="flex justify-center">
       <a
           class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
-          :href="button.url"
-          :target="button.is_new_tab ? '_blank' : ''"
+          :href="formatUrl(button.url)"
+          :target="button.open_in_new_tab ? '_blank' : ''"
       >
         {{ button.title }}
         <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
@@ -75,6 +75,7 @@
 import { ref } from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import PlayButton from "@/assets/svg/play.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   component: {

package/src/components/presenters/components/SliderPresenter.vue

@@ -45,6 +45,7 @@ import 'vue3-carousel/carousel.css';
 import { ref } from "vue";
 import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
 import {Carousel, Slide} from "vue3-carousel";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   component: {
@@ -56,10 +57,6 @@ const props = defineProps({
 const currentSlide = ref(0);
 const componentData = ref(props.component);
 const slides = componentData.value.data.filter((o) => o.public);
-
-const formatUrl = (url) => {
-  return url.startsWith('http') ? url : `//${url}`;
-};
 </script>
 
 <style scoped>

package/src/components/presenters/components/VerticalTabPresenter.vue

@@ -43,7 +43,7 @@
           <a
               v-if="selectedItem?.primary_button?.show"
               class="text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4"
-              :target="selectedItem?.primary_button?.is_new_tab ? '_blank' : ''"
+              :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
               :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
           >
             {{ selectedItem?.primary_button?.label ?? 'N/A' }}

package/src/components/presenters/modules/Callout.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]" :class="{'flex gap-8': headerComponent?.featured_image}">
+      <img v-if="headerComponent?.featured_image"
+           :src="headerComponent?.featured_image"
+           class="w-[480px] object-cover rounded-[24px]"
+           alt="Feature"/>
+      <div v-if="headerComponent"
+           class="w-full rounded-[24px] flex items-center justify-center flex-col"
+           :class="{'bg-pale-100 min-h-[320px]': !headerComponent?.featured_image, 'border border-brand-400': headerComponent?.featured_image}"
+      >
+        <h3 class="text-xl text-brand-600 font-semibold max-w-[744px]">{{ headerComponent.title }}</h3>
+        <p v-if="headerComponent?.supporting_text" class="text-[30px] font-semibold mt-2 text-gray-900 leading-[38px] max-w-[744px] text-center" v-html="headerComponent.supporting_text"></p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const headerComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "callout");
+});
+</script>

package/src/components/presenters/modules/CollectionGrid.vue

@@ -13,8 +13,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
-import VCollectionGridPresenter from "@/components/presenters/components/CollectionGridPresenter.vue";
+import HeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
+import CollectionGridPresenter from "@/components/presenters/components/CollectionGridPresenter.vue";
 
 const props = defineProps({
   section: {
@@ -25,9 +25,9 @@ const props = defineProps({
 
 const section = ref(props.section);
 const componentMaps = ref({
-  header: markRaw(VHeaderPresenter),
-  news_grid: markRaw(VCollectionGridPresenter),
-  video_grid: markRaw(VCollectionGridPresenter),
+  header: markRaw(HeaderPresenter),
+  news_grid: markRaw(CollectionGridPresenter),
+  video_grid: markRaw(CollectionGridPresenter),
 });
 
 const currentComponent = (component) => {

package/src/components/presenters/modules/LinkCard.vue

@@ -21,8 +21,8 @@
             <a
                 v-if="data?.primary_button.url"
                 class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base"
-                :href="data.primary_button.url"
-                :target="data.primary_button.is_new_tab ? '_blank' : ''">
+                :href="formatUrl(data.primary_button.url)"
+                :target="data.primary_button.open_in_new_tab ? '_blank' : ''">
               {{ data.primary_button.label }}
               <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
             </a>
@@ -36,6 +36,7 @@
 import {ref, computed} from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import IconComponent from "@/components/common/Icon.vue";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   section: {

package/src/components/presenters/modules/LinkList.vue

@@ -12,7 +12,7 @@
               <a
                   v-if="link.url"
                   class="text-gray-900 w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg hover:underline"
-                  :href="link.url"
+                  :href="formatUrl(link.url)"
                   :target="link.open_in_new_tab ? '_blank' : ''">
                 <div class="flex gap-4 items-center max-w-[94%] w-full">
                   <LinkExternal class="w-5 h-5"></LinkExternal>
@@ -31,6 +31,7 @@
 import {ref, computed} from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import LinkExternal from "@/assets/img/icons/link-external-01.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   section: {

package/src/components/presenters/modules/LogoCloud.vue

@@ -11,7 +11,7 @@
         </p>
         <div v-if="component?.type === 'logos'" class="flex flex-wrap justify-center" :class="{'gap-6': isHorizontal, 'gap-12': !isHorizontal}">
           <template v-for="logo in component.data">
-            <a :href="logo?.url" title="Brand">
+            <a :href="logo?.url" title="Brand" target="_blank">
               <img v-if="logo?.logo" :src="logo?.logo" :class="getLogoHeight(component?.height)" alt="Brand Logo"/>
               <span v-else class="text-sm">No photo</span>
             </a>

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -1,21 +1,50 @@
 <template>
   <div class="overflow-hidden">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4">
-      <div class="grid grid-cols-12 gap-4">
+      <div class="grid grid-cols-12 gap-4" v-if="paragraphComponent">
         <div class="col-span-4 bg-gray-100 rounded-xl p-8" v-if="paragraphComponent">
           <h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
           <p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
         </div>
         <div class="col-span-8" v-if="imageComponent">
-          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-auto" />
+          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-auto"/>
           <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
         </div>
       </div>
+      <div v-else class="my-[44px]">
+        <div
+            v-if="headerComponent"
+            class="w-full flex-col mb-6"
+        >
+          <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+          <p v-if="headerComponent?.supporting_text"
+             class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px]"
+             v-html="headerComponent.supporting_text"></p>
+        </div>
+        <div class="flex flex-row gap-8">
+          <div class="grid grid-cols-2 gap-8 w-2/3">
+            <div v-for="item in featureItemsComponent.data" class="flex gap-3">
+              <div v-if="item?.icon" class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
+                <IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
+              </div>
+              <div class="max-w-[324px]">
+                <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
+                <p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
+              </div>
+            </div>
+          </div>
+          <div v-if="imageComponent" class="w-[560px]">
+            <img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
+                 class="rounded-br-[24px] rounded-tl-[24px] w-full"/>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import IconComponent from "@/components/common/Icon.vue";
 import {ref, computed} from "vue";
 
 const props = defineProps({
@@ -29,8 +58,14 @@ const section = ref(props.section);
 const paragraphComponent = computed(() => {
   return section.value.components.find((component) => component.type === "paragraph");
 });
+const headerComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "header");
+});
 const imageComponent = computed(() => {
   return section.value.components.find((component) => component.type === "image_block");
 });
+const featureItemsComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "feature_items");
+});
 
 </script>

package/src/components/presenters/overridables/VCarouselPrimaryButton.vue

@@ -14,6 +14,7 @@
 <script setup>
 import Plus from "@/assets/img/icons/plus.svg";
 import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   button: {
@@ -21,8 +22,4 @@ const props = defineProps({
     required: true,
   },
 });
-
-const formatUrl = (url) => {
-  return url.startsWith("http") ? url : `//${url}`;
-};
 </script>

package/tailwind.config.js

@@ -65,6 +65,9 @@ module.exports = {
           200: '#F9DBAF',
           50: '#FEF6EE',
         },
+        pale: {
+          100: '#FBF5F4',
+        },
         warning: {
           50: 'rgba(255, 250, 235, 1)',
           200: 'rgba(254, 223, 137, 1)',