@dcodegroup-au/page-builder 0.5.0 → 0.5.2

package/example/src/App.vue

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

package/example/src/pages/OurGroups.js

@@ -0,0 +1,103 @@
+export const OurGroups =
+  {
+  title: "Partner with Us",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Our Groups",
+          supporting_text_max_length: 500,
+          supporting_text: "ELAA is the national peak body championing excellence.",
+        },
+      ]
+    },
+    {
+      title: "Callout Section",
+      type: "callout",
+      components: [
+        {
+          name: "Callout Section",
+          type: "callout",
+          title: "Working together",
+          has_extra: true,
+          title_label: "Eyebrow heading",
+          supporting_text_max_length: 500,
+          supporting_text: "To build meaningful, reliable, and human-centered software that solves real problems, empowers users, and advances innovation responsibly.",
+          supporting_text_label: "Message *",
+        },
+      ]
+    },
+    {
+      title: "Two columns with image and content",
+      type: "two_column_image_content",
+      display: "horizontal",
+      minimum_height: true,
+      components: [
+        {
+          name: "Content Block",
+          type: "paragraph",
+          title: "Opportunity",
+          paragraph: "ELAA provides the opportunity for members of Early Years Management services to come together to inform advocacy, strategic directions, policy development and implementation. Members of the group also represent sector interests in consultative forums, such as on the implementation of two years of preschool and the EYM Framework, and inform ELAA’s projects.",
+        },
+        {
+          name: "Image Block",
+          type: "image_block",
+          featured_image: "https://beta-frontend.elaa.org.au/img/advocacy/our-groups.png",
+        },
+      ]
+    },
+    {
+      title: "Two columns with image and content",
+      type: "two_column_image_content",
+      display: "horizontal",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Our Group",
+          text_center: true,
+          supporting_text_max_length: 500,
+          supporting_text: null,
+        },
+        {
+          name: "Feature items",
+          type: "feature_items",
+          supportive_text: "Section can contain up to 10 items.",
+          grid_columns: 2,
+          has_background: true,
+          max_items: 20,
+          data: [
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Excellence",
+              icon: "AlertCircle",
+              content_type: "content",
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Equity",
+              icon: 'AlignLeft01',
+              content_type: "content",
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Collaboration",
+              icon: 'AlignLeft01',
+              content_type: "content",
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/example/src/pages/PartnerWithUs.js

@@ -1,6 +1,6 @@
 export const PartnerWithUs =
   {
-  title: "Advisory Services",
+  title: "Partner with Us",
   sections: [
     {
       title: "Standard header",
@@ -64,7 +64,7 @@ export const PartnerWithUs =
           title: "Our Partnership and Commitment",
           text_center: true,
           supporting_text_max_length: 500,
-          supporting_text: "We create software to address real-world needs — making life easier.",
+          supporting_text: null,
         },
         {
           name: "Feature items",
@@ -132,6 +132,7 @@ export const PartnerWithUs =
           name: "Bullet Points",
           type: "bullet_points",
           supportive_text: "This section can contain up to 10 items.",
+          has_type_switcher: false,
           max_items: 10,
           max_title: 500,
           data: [

package/package.json

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

package/src/components/builders/Links.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
         <div class="flex flex-col gap-6">
-          <div class="flex gap-4" v-if="componentData?.has_type_switcher">
+          <div class="flex gap-4" v-if="!componentData?.hasOwnProperty('has_type_switcher') || componentData?.has_type_switcher">
             <label v-for="option in options" class="flex items-center gap-2 cursor-pointer">
               <input
                   :name="`content_type${index}`"

package/src/components/common/Button.vue

@@ -26,14 +26,14 @@
           :label-text="`${capitalize(button?.type)} *`"
           class="w-full mb-4"
           :value="button.address"
-          :limit="20"
+          :limit="100"
       >
         <input
             v-model="button.address"
             name="button.label"
             :type="button?.type === 'email' ? 'email' : 'tel'"
             placeholder="Label"
-            :maxlength="20"
+            :maxlength="100"
             class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
         />
       </input-wrapper>

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

@@ -11,7 +11,7 @@
         </div>
         <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]" v-html="headerComponent.supporting_text"></p>
-        <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}">
+        <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}" v-if="bulletPointsComponent">
           <div v-for="item in bulletPointsComponent.data" class="flex">
             <div class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
               <CheckIcon class="w-4 h-4"></CheckIcon>

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

@@ -1,13 +1,13 @@
 <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" v-if="paragraphComponent">
-        <div class="col-span-4 bg-gray-100 rounded-xl p-8" v-if="paragraphComponent">
+      <div class="flex gap-4" v-if="paragraphComponent">
+        <div class="w-1/3 bg-gray-100 rounded-xl p-8" :class="{'h-fit': section?.minimum_height}" v-if="paragraphComponent" ref="leftColumn">
           <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"/>
+        <div class="w-2/3 rounded-[24px] overflow-hidden" v-if="imageComponent" ref="rightColumn">
+          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-full object-cover"/>
           <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
         </div>
       </div>
@@ -28,8 +28,8 @@
             <div v-for="item in featureItemsComponent.data"
                  class="flex gap-3 w-full"
                  :class="{
-              'bg-gray-50 p-8 rounded-tl-[24px] rounded-br-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
-              '!p-0': item?.image
+              'bg-gray-50 p-8 rounded-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
+              '!p-0 rounded-tr-[0px] rounded-bl-[0px]': item?.image
             }">
               <template v-if="item.title">
                 <div v-if="item?.icon"
@@ -41,7 +41,7 @@
                   <p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
                 </div>
               </template>
-              <img v-else :src="item.image" alt="Feature Image"/>
+              <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
             </div>
           </div>
           <div v-if="imageComponent" class="w-[560px]">
@@ -56,7 +56,7 @@
 
 <script setup>
 import IconComponent from "@/components/common/Icon.vue";
-import {ref, computed} from "vue";
+import {ref, computed, onMounted} from "vue";
 
 const props = defineProps({
   section: {
@@ -65,6 +65,9 @@ const props = defineProps({
   },
 });
 
+const leftColumn = ref(null);
+const rightColumn = ref(null);
+
 const section = ref(props.section);
 const paragraphComponent = computed(() => {
   return section.value.components.find((component) => component.type === "paragraph");
@@ -79,4 +82,10 @@ const featureItemsComponent = computed(() => {
   return section.value.components.find((component) => component.type === "feature_items");
 });
 
+onMounted(() => {
+  if (leftColumn.value && rightColumn.value && section.value?.minimum_height) {
+    rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
+  }
+});
+
 </script>