@dcodegroup-au/page-builder 0.2.7 → 0.2.9

package/src/components/index.js

@@ -2,5 +2,6 @@ import '@/assets/css/style.css';
 import PageBuilder from './PageBuilder.vue';
 import PageRender from './PageRender.vue';
 import ItemEdit from './ItemEdit.vue';
+import LinkCardEdit from './LinkCardEdit.vue';
 
-export { PageBuilder, PageRender, ItemEdit };
+export { PageBuilder, PageRender, ItemEdit, LinkCardEdit };

package/src/components/presenters/components/{VCarouselPresenter.vue → CarouselPresenter.vue}

@@ -30,8 +30,8 @@
                 {{ tag }}
               </span>
             </div>
-            <h3 class="text-[24px] font-semibold text-gray-900 mb-3 leading-[32px] mt-3">
-              {{ slide?.title }}
+            <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>
             </h3>
             <p
                 class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
@@ -47,19 +47,7 @@
             </div>
           </div>
           <div class="border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center">
-            <a
-                v-if="slide.primary_button?.url"
-                :href="formatUrl(slide.primary_button.url)"
-                target="_blank"
-                class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-sm"
-            >
-              <Plus v-if="slide.primary_button?.icon === 'plus'" class="w-4 h-4" />
-              <ShoppingCart
-                  v-if="slide.primary_button?.icon === 'shopping-cart-01'"
-                  class="w-4 h-4"
-              />
-              {{ slide.primary_button.title }}
-            </a>
+            <VCarouselPrimaryButton :button="slide.primary_button" />
             <a
                 v-if="slide.secondary_button"
                 target="_blank"
@@ -101,14 +89,16 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, inject } from "vue";
 import Clock from "@/assets/img/icons/clock.svg";
-import Plus from "@/assets/img/icons/plus.svg";
-import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 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";
+
+// Inject the FileUpload component or fallback to the default one
+const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", DefaultPrimaryButton);
 
 const props = defineProps({
   component: {

package/src/components/presenters/components/{VCollectionGridPresenter.vue → CollectionGridPresenter.vue}

@@ -26,11 +26,6 @@
             alt="Card Image"
             class="w-full h-[281px] object-cover rounded-[16px] mb-4"
         />
-        <img
-            v-else
-            alt="Card Image"
-            class="w-full h-[281px] object-cover rounded-[16px] mb-4"
-        >
         <img v-else class="w-full h-[281px] object-cover rounded-[16px] mb-4" src="@/assets/img/no_image_available.jpeg">
         <div class="flex flex-col gap-2 items-start text-left w-full">
           <div v-if="card.categories && card.categories.length" class="flex gap-2">

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

@@ -13,8 +13,8 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
-import VCarousel from "@/components/presenters/components/VCarouselPresenter.vue";
+import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
+import VCarousel from "@/components/presenters/components/CarouselPresenter.vue";
 
 const props = defineProps({
   section: {

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

@@ -13,8 +13,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
-import VCollectionGridPresenter from "@/components/presenters/components/VCollectionGridPresenter.vue";
+import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
+import VCollectionGridPresenter from "@/components/presenters/components/CollectionGridPresenter.vue";
 
 const props = defineProps({
   section: {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-[48px] max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
+  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-for="(component, index) in section.components" class="md:px-[90px]">
       <component
           :is="currentComponent(component)"
@@ -12,8 +12,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VSliderPresenter from "@/components/presenters/components/VSliderPresenter.vue";
-import VLinkPresenter from "@/components/presenters/components/VLinkPresenter.vue";
+import VSliderPresenter from "@/components/presenters/components/SliderPresenter.vue";
+import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";
 
 const props = defineProps({
   section: {

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="overflow-hidden bg-aqua-100">
+    <div class="max-w-[1400px] mx-auto w-full my-[40px]">
+      <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
+        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
+      </div>
+      <div v-if="cardComponent" class="flex w-full" :class="{'gap-8': headerComponent?.featured_image}">
+        <img v-if="headerComponent?.featured_image"
+             :src="headerComponent?.featured_image"
+             class="w-1/2 h-[492px] rounded-br-[24px] rounded-tl-[24px]"
+             alt="Feature"/>
+
+        <div class="flex gap-8 w-full" :class="{'!w-1/2 flex-col': headerComponent?.featured_image}">
+          <div v-for="(data, index) in cardComponent.data" class="relative bg-white p-8 rounded-[24px] w-full">
+            <div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
+              <IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
+            </div>
+            <h1 class="text-[20px] font-semibold text-gray-900">{{ data.title }}</h1>
+            <p class="text-lg text-gray-600 mt-2 mb-4 leading-[24px]">{{ data.description }}</p>
+            <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' : ''">
+              {{ data.primary_button.label }}
+              <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+import IconComponent from "@/components/common/Icon.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 === "header");
+});
+const cardComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "link_cards");
+});
+
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1400px] mx-auto w-full bg-white py-[40px] flex">
+      <div v-for="(header, index) in headerComponents" v-if="section.two_columns" class="w-1/2 gap-4 px-[120px]">
+        <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
+          <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
+          <p v-if="header?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="header.supporting_text"></p>
+        </div>
+        <div v-if="linkComponents[index]" class="flex w-full">
+          <div class="flex flex-col gap-4 w-full">
+            <div v-for="(link, index) in linkComponents[index].data" class="relative bg-white hover:bg-gray-100 p-2 rounded-lg w-full">
+              <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"
+                  :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>
+                  <span class="w-full">{{ link.title }}</span>
+                </div>
+                <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+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";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const headerComponents = computed(() => {
+  return section.value.components.filter((component) => component.type === "header");
+});
+
+const linkComponents = computed(() => {
+  return section.value.components.filter((component) => component.type === "links");
+});
+
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full relative" :class="{'bg-gray-50': !isHorizontal}">
+  <div class="w-full relative">
     <div class="1xl:max-w-[1824px] mx-auto relative flex justify-center items-center"
          :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
       <div v-for="(component, index) in section.components">

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1400px] mx-auto w-full pt-4 mb-4">
+      <div class="max-w-[800px]" v-if="section.components[0]?.title">
+        <h3 class="text-[36px] text-gray-900 font-semibold">
+          {{ section.components[0].title }}
+        </h3>
+        <p class="text-xl font-normal leading-[30px] mt-4 text-gray-600" v-html="section.components[0].paragraph"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+
+</script>

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

@@ -18,8 +18,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VLinkPresenter from "@/components/presenters/components/VLinkPresenter.vue";
-import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
+import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";
+import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
 import HeaderVector from "@/assets/svg/header_right_vector.svg";
 
 const props = defineProps({

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
+    <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
+         class="md:px-[90px] bg-navy-50 rounded-[48px] relative mb-[64px] pt-[164px]"
+         :class="{'flex flex-col items-center text-center': section.components[0]?.center}">
+      <h3 class="text-[48px] font-semibold text-gray-900 w-1/2">{{ section.components[0].title }}</h3>
+      <h3 class="text-xl font-normal text-gray-600 mt-3 w-1/2">{{ section.components[0].supporting_text }}</h3>
+      <img
+          v-if="section?.components[0]?.featured_image"
+          :src="section.components[0]?.featured_image"
+          alt="Card Image"
+          class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
+      />
+      <img v-else class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
+           src="@/assets/img/no_image_available.jpeg">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1400px] mx-auto w-full mt-[40px]">
+      <div class="rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto" v-if="headerComponent">
+        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
+      </div>
+      <div v-if="timelineComponent">
+        <img :src="timelineComponent.featured_image" :alt="timelineComponent.caption" class="w-full h-auto" />
+        <p v-html="timelineComponent.caption" class="mt-2 text-[13px]"></p>
+        <div class="mt-4">
+          <div v-for="(data, index) in timelineComponent.data" class="flex flex-row">
+            <div class="w-1/5 mr-[40px] relative">
+              <h1 class=" text-[24px] font-semibold text-navy-800">{{ data.title }}</h1>
+              <div class="w-[32px] h-[32px] flex items-center justify-center border-2 border-navy-100 rounded-full absolute right-[-17px] bg-white top-0">
+                <p class="w-[16px] h-[16px] rounded-full bg-navy-600"></p>
+              </div>
+              <div class="h-full absolute right-[-2px]" style="background: repeating-linear-gradient(to bottom, transparent, transparent 10px, #A9B8C6 8px, #A9B8C6 20px); width: 2px;"></div>
+            </div>
+            <div class="w-4/5">
+              <p v-if="data.group_title" class="text-[24px] mb-6 font-semibold text-navy-800">{{ data.group_title }}</p>
+              <div
+                  v-for="(line, index) in data.lines"
+                  :key="index"
+                  class="bg-pale-orange-100 p-6 mb-6 rounded-[16px]"
+              >
+                <h4 class="text-xl font-semibold text-gray-900">{{ line.title }}</h4>
+                <p class="text-xl text-gray-600 mt-3 leading-[30px]">{{ line.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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 === "header");
+});
+const timelineComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "timeline_items");
+});
+
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1400px] mx-auto w-full mt-4">
+      <div class="grid grid-cols-12 gap-4">
+        <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" />
+          <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
+        </div>
+      </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 paragraphComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "paragraph");
+});
+const imageComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "image_block");
+});
+
+</script>

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

@@ -14,8 +14,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
-import VVerticalTabPresenter from "@/components/presenters/components/VVerticalTabPresenter.vue";
+import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
+import VVerticalTabPresenter from "@/components/presenters/components/VerticalTabPresenter.vue";
 
 const props = defineProps({
   section: {

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

@@ -0,0 +1,28 @@
+<template>
+  <a
+      v-if="button?.url"
+      :href="formatUrl(button.url)"
+      target="_blank"
+      class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-sm"
+  >
+    <Plus v-if="button?.icon === 'plus'" class="w-4 h-4" />
+    <ShoppingCart v-if="button?.icon === 'shopping-cart-01'" class="w-4 h-4" />
+    {{ button.title }}
+  </a>
+</template>
+
+<script setup>
+import Plus from "@/assets/img/icons/plus.svg";
+import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
+
+const props = defineProps({
+  button: {
+    type: Object,
+    required: true,
+  },
+});
+
+const formatUrl = (url) => {
+  return url.startsWith("http") ? url : `//${url}`;
+};
+</script>

package/src/utils/generateIconBundle.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+const iconsDir = path.resolve(__dirname, '../assets/img/icons');
+const iconFolder = path.resolve(__dirname, '../components/helpers');
+const outputFile = path.resolve(iconFolder, 'bundleIcons.js');
+
+const generateIconsBundle = () => {
+  try {
+    const files = fs.readdirSync(iconsDir);
+    const components = files
+      .filter((file) => file.endsWith('.svg')) // Only include .svg files
+      .map((file) => {
+        const name = path.basename(file, '.svg').toLowerCase()
+          .split(/[^a-zA-Z0-9]+/) // Split by non-alphanumeric characters
+          .map((word, index) =>
+            index === 0
+              ? word.charAt(0).toUpperCase() + word.slice(1) // Uppercase first word
+              : word.charAt(0).toUpperCase() + word.slice(1) // Uppercase subsequent words
+          )
+          .join('');
+        return `export { default as ${name} } from '@/assets/img/icons/${file}?component';`;
+      });
+
+    const bundleContent = components.join('\n');
+    fs.writeFileSync(outputFile, bundleContent);
+    console.log(`Icons bundle generated successfully at ${outputFile}`);
+  } catch (error) {
+    console.error('Error generating icons bundle:', error);
+  }
+};
+
+generateIconsBundle();

package/src/utils/generateIconJson.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+
+const iconsDir = path.resolve(__dirname, '../assets/img/icons');
+const outputFile = path.resolve(__dirname, '../assets/icons.json');
+
+const generateIconsJson = () => {
+  try {
+    const files = fs.readdirSync(iconsDir);
+    const icons = files
+      .filter((file) => file.endsWith('.svg')) // Only include .svg files
+      .map((file) => ({
+        name: path.basename(file, '.svg').toLowerCase()
+          .split(/[^a-zA-Z0-9]+/) // Split by non-alphanumeric characters
+          .map((word, index) =>
+            index === 0
+              ? word.charAt(0).toUpperCase() + word.slice(1) // Uppercase first word
+              : word.charAt(0).toUpperCase() + word.slice(1) // Uppercase subsequent words
+          )
+          .join(''), // Extract the name without extension
+      }));
+
+    fs.writeFileSync(outputFile, JSON.stringify(icons, null, 2));
+    console.log(`Icons JSON generated successfully at ${outputFile}`);
+  } catch (error) {
+    console.error('Error generating icons JSON:', error);
+  }
+};
+
+generateIconsJson();

package/tailwind.config.js

@@ -23,6 +23,7 @@ module.exports = {
           600: '#3E5F7E',
           400: '#69829B',
           200: '#94A6B8',
+          100: '#A9B8C6',
           50: '#DFE5EC',
           25: '#EFF2F5',
         },
@@ -42,6 +43,10 @@ module.exports = {
         },
         aqua: {
           100: '#EEF2F2',
+          900: '#0FAC9A',
+        },
+        'pale-orange': {
+          100: '#FBF5F4',
         },
         success: {
           50: 'rgba(236, 253, 243, 1)',

package/src/components/builders/BaseModuleForm.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="pb-8">
-    <component :is="props.form" @update="update" :data="props.data" :errors="errors" :sites="sites"></component>
-  </div>
-</template>
-<script setup>
-const props = defineProps({
-  form: {
-    type: String,
-    required: true,
-  },
-  subType: {
-    type: String,
-    required: false,
-  },
-  page: {
-    type: Object,
-    required: true,
-  },
-  attribute: {
-    type: Object,
-    required: true,
-  },
-  moduleIndex: {
-    required: true,
-  },
-  itemIndex: {
-    required: false,
-  },
-  data: {
-    type: Object,
-    required: true,
-  },
-  backUrl: {
-    type: String,
-    required: true,
-  },
-  sites: {
-    type: Object,
-    required: true,
-  },
-  redirectAfterResponse: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const errors = ref({});
-const content = ref(props.page.attributes);
-const route = inject("route");
-const contentUnchanged = ref(true);
-
-const update = (data) => {
-  const attributeIndex = content.value.findIndex((item) => item.id === props.attribute.id);
-  if (props.itemIndex) {
-    content.value[attributeIndex]["value"]["submodules"][props.moduleIndex]["items"][props.itemIndex] = data;
-  } else {
-    content.value[attributeIndex]["value"]["submodules"][props.moduleIndex] = data;
-  }
-
-  axios
-    .post(route("api.admin.pages.update-content", { page: props.page.id }), {
-      attributes: content.value,
-      changes: data,
-      form: props.form,
-      subType: props.subType,
-    })
-    .then((response) => {
-      contentUnchanged.value = true;
-      if (props.redirectAfterResponse) {
-        window.location.href = props.backUrl;
-      } else {
-        alert("Success");
-      }
-    })
-    .catch(({ response }) => {
-      errors.value = response.data.errors;
-    });
-};
-
-watch(
-  () => content.value,
-  () => (contentUnchanged.value = false),
-  { deep: true },
-);
-</script>