@dcodegroup-au/page-builder 0.4.6 → 0.4.8

package/example/src/App.vue

@@ -6,6 +6,7 @@ import {OurVision} from "./pages/OurVision.js";
 import {OurCommitment} from "./pages/OurCommitment.js";
 import {OurHistory} from "./pages/OurHistory.js";
 import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
+import {AdvisoryServices} from "./pages/AdvisoryService.js";
 
 const slide = {
   title: "About ELAA",
@@ -89,10 +90,10 @@ const breadcrumbs = [
 
 <template>
   <div>
-    {{ JSON.stringify(ChildSafeStandard) }}
+    {{ JSON.stringify(AdvisoryServices) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="ChildSafeStandard"/>
+      <PageRender :page="AdvisoryServices"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -108,7 +109,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="ChildSafeStandard" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="AdvisoryServices" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/AdvisoryService.js

@@ -0,0 +1,89 @@
+export const AdvisoryServices =
+  {
+  title: "Advisory Services",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Advisory Services",
+          supporting_text_max_length: 500,
+          supporting_text: "ELAA is the national peak body championing excellence in early learning for children and supporting parents and service. For over 30 years Early Learning Association Australia (ELAA) has been working with parents and early learning providers toward a shared vision of excellence in early learning for every child.",
+        },
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Advise and support",
+          supporting_text: "ELAA is the national peak body championing excellence in early learning for children and supporting parents and service",
+          featured_image: "https://beta.elaa.org.au/img/what-we-do/best-start-best-life/divided-01.jpg",
+          revert: true,
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "Through our Commonwealth",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Contact Us",
+      type: "contact_us",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Contact Us",
+          supporting_text: "If you have further questions regarding ELAA’s advisory services, please contact our Member Solutions Team via the options below.",
+        },
+        {
+          name: "Contact Us",
+          type: "contact_us",
+          data: [
+            {
+              show: true,
+              name: 'Call Button',
+              label: 'Call us',
+              address: '+61 3 9412 6199',
+              type: 'phone',
+            },
+            {
+              show: true,
+              name: 'Email button',
+              label: 'Email us',
+              address: 'elaa@gmail.com',
+              type: 'email',
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/PageBuilder.vue

@@ -98,6 +98,7 @@ import VVideoGrid from "@/components/builders/VideoGrid.vue";
 import VParagraph from "@/components/builders/Paragraph.vue";
 import VImageBlock from "@/components/builders/ImageBlock.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
+import ContactUs from "@/components/builders/ContactUs.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -139,6 +140,7 @@ const componentMaps = ref({
   bullet_points: markRaw(VLinks),
   feature_items: markRaw(VLinks),
   link_cards: markRaw(VItems),
+  contact_us: markRaw(ContactUs),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -25,6 +25,7 @@ import LinkCard from "@/components/presenters/modules/LinkCard.vue";
 import LinkList from "@/components/presenters/modules/LinkList.vue";
 import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
 import Callout from "@/components/presenters/modules/Callout.vue";
+import ContactUs from "@/components/presenters/modules/ContactUs.vue";
 
 const props = defineProps({
   page: {
@@ -48,6 +49,7 @@ const componentMaps = ref({
   link_list: markRaw(LinkList),
   bullet_points: markRaw(BulletPoints),
   callout: markRaw(Callout),
+  contact_us: markRaw(ContactUs),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/ContactUs.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+      v-for="(item, index) in componentData.data"
+      class="flex flex-col rounded-xl"
+      :key="index"
+      :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+  >
+    <VButton :button="item"/>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import VButton from "@/components/common/Button.vue";
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const lastItemRef = ref(null);
+
+
+</script>

package/src/components/builders/Links.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
         <div class="flex flex-col gap-6">
-          <div class="flex gap-4">
+          <div class="flex gap-4" v-if="componentData?.has_type_switcher">
             <label v-for="option in options" class="flex items-center gap-2 cursor-pointer">
               <input
                   :name="`content_type${index}`"
@@ -174,11 +174,15 @@ const deleteCallback = (index) => {
 
 const updateType = (item) => {
   if (item.content_type === 'content') {
+    delete item['image'];
     item.icon = null;
     item.title = null;
     item.supporting_text = null;
   } else {
     item.image = null;
+    delete item['icon'];
+    delete item['supporting_text'];
+    delete item['title'];
   }
 };
 </script>

package/src/components/common/Button.vue

@@ -19,7 +19,26 @@
             class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
         />
       </input-wrapper>
+      <input-wrapper
+          v-if="['email', 'phone'].includes(button?.type)"
+          is-vertical
+          :field="button?.type"
+          :label-text="`${capitalize(button?.type)} *`"
+          class="w-full mb-4"
+          :value="button.address"
+          :limit="20"
+      >
+        <input
+            v-model="button.address"
+            name="button.label"
+            :type="button?.type === 'email' ? 'email' : 'tel'"
+            placeholder="Label"
+            :maxlength="20"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
       <linked-to
+          v-else
           name="primary"
           v-model:type="button.type"
           v-model:url="button.url"
@@ -35,6 +54,7 @@ import Card from "@/components/common/Card.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import VToggle from "@/components/common/Toggle.vue";
 import LinkedTo from "@/components/common/LinkedTo.vue";
+import {capitalize} from "../helpers/common";
 
 const props = defineProps({
   button: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]" :class="{'flex gap-8': headerComponent?.featured_image}">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]" :class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
       <img v-if="headerComponent?.featured_image"
            :src="headerComponent?.featured_image"
            class="w-[480px] object-cover rounded-[24px]"

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px] bg-gray-100 rounded-[16px] flex justify-center">
+      <div v-if="headerComponent" class="flex items-center justify-center flex-col py-[40px] max-w-[820px]">
+        <div class="flex justify-between relative w-[150px]">
+          <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
+            <Phone class="w-6 h-6 text-gray-600"></Phone>
+          </div>
+          <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <Help class="w-6 h-6 text-gray-600"></Help>
+          </div>
+          <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
+            <Email class="w-6 h-6 text-gray-600"></Email>
+          </div>
+        </div>
+        <h3 class="text-[24px] text-gray-900 font-semibold mt-4">{{ headerComponent.title }}</h3>
+        <p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal mt-2 text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
+        <div class="flex gap-2">
+          <template v-for="item in contactUs.data">
+            <a
+                v-if="item?.show"
+                class="inline-flex gap-1.5 items-center font-semibold text-base mt-4 px-5 py-2.5 rounded-full"
+                :class="{'text-brand-700 hover:bg-white border border-brand-300': item.type === 'phone', 'text-white bg-brand-600 hover:bg-brand-800': item.type === 'email'}"
+                :href="`${item.type === 'email' ? 'mailto:' : 'tel:'} ${item.address}`">
+              {{ item.label }}
+              <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+            </a>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+import Phone from "@/assets/img/icons/phone.svg";
+import Help from "@/assets/img/icons/help-circle.svg";
+import Email from "@/assets/img/icons/mail-01.svg";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+
+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 contactUs = computed(() => {
+  return section.value.components.find((component) => component.type === "contact_us");
+});
+</script>

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

@@ -28,7 +28,7 @@
                  class="flex gap-3"
                  :class="{
               'bg-gray-50 p-8 rounded-tl-[24px] rounded-br-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && featureItemsComponent.grid_columns > 2,
-              '!p-0': item.hasOwnProperty('image')
+              '!p-0': item?.image
             }">
               <template v-if="item.title">
                 <div v-if="item?.icon"