@dcodegroup-au/page-builder 0.4.1 → 0.4.3

package/example/src/App.vue

@@ -4,6 +4,7 @@ import {BestLife} from "./pages/BestLife.js";
 import {AboutUs} from "./pages/AboutUs.js";
 import {OurVision} from "./pages/OurVision.js";
 import {OurCommitment} from "./pages/OurCommitment.js";
+import {OurHistory} from "./pages/OurHistory.js";
 
 const slide = {
   title: "About ELAA",
@@ -90,7 +91,7 @@ const breadcrumbs = [
     {{ JSON.stringify(OurVision) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="OurVision"/>
+      <PageRender :page="BestLife"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>

package/example/src/pages/OurCommitment.js

@@ -31,8 +31,8 @@ export const OurCommitment =
             supporting_text: "ELAA’s members operate across all of Victoria. We acknowledge the traditional owners of the land that our members services are on and pay our respects to Elders past, present and future and pay our respects to all Aboriginal and Torres Strait Islander communities, land and water in these regions.",
             supporting_text_label: "Text *",
             supporting_text_max_length: 500,
-            featured_image: "https://dev.elaa.com/img/reconciliation/flag-1.png",
-            featured_image2: "https://dev.elaa.com/img/reconciliation/flag-2.png"
+            featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/australianaboriginalflagsvg.png",
+            featured_image2: "https://beta-public.elaa.org.au/fileman/Page Builder/someimagewidth-1600bcb4ad3.jpg"
           },
         ]
       },

package/example/src/pages/OurHistory.js

@@ -0,0 +1,88 @@
+export const OurHistory = {
+  title: "Our History",
+  sections: [{
+    "type": "standard_header",
+    "title": "Standard header",
+    "components": [{
+      "name": "Standard header",
+      "type": "header",
+      "title": "Our History",
+      "supporting_text": "ELAA’s history dates back to the early 1990s and reflects the increasing recognition of the importance of early learning.",
+      "supporting_text_max_length": 500
+    }]
+  }, {
+    "type": "timeline",
+    "title": "Timeline",
+    "components": [{
+      "name": "Section header",
+      "type": "header",
+      "title": "Journey of Growth and Impact",
+      "supporting_text": "Kindergarten Parents Victoria (now Early Learning Association Australia) was established in 1991 to ensure that early childhood education thrived in Victoria."
+    }, {
+      "data": [{
+        "lines": [{
+          "title": "Vision and Dedication",
+          "description": "The organisation sprang from the vision and dedication of two key founders – Marg Stephens and Karen Weston who, with other parents passionate about the right of children to access high quality education, formed a group called Parent Action for Kindergartens over 30 years ago."
+        }, {
+          "title": "Formation Efforts",
+          "description": "The group worked with Victorian members of Parliament; the Office of Preschool and Childcare; and a variety of organisations such as the Australian Early Childhood Association and the Anglican and Uniting Churches Early Childhood Industrial Council toward the formation of a State-wide organisation."
+        }, {
+          "title": "Free Downloadable Resources",
+          "description": "Explore a variety of no-cost tools and information available to everyone."
+        }], "title": "30+ years ago", "max_items": 5, "group_title": "Parent Action for Kindergartens"
+      }, {
+        "lines": [{
+          "title": "Free Downloadable Resources",
+          "description": "<p>Explore a variety of no-cost tools and information available to everyone.</p>"
+        }, {
+          "title": "Free Downloadable Resources",
+          "description": "<p>Explore a variety of no-cost tools and information available to everyone.</p>"
+        }], "title": "May 1991", "max_items": 5
+      }],
+      "name": "Timeline Items",
+      "type": "timeline_items",
+      "max_items": 10,
+      "supportive_text": "Manage the timeline items."
+    }]
+  }, {
+    "type": "link_card",
+    "title": "Link card section",
+    "display": "vertical",
+    "components": [{
+      "name": "Section header",
+      "type": "header",
+      "title": "Explore Further",
+      "has_extra": true,
+      "featured_image": "https://dev.elaa.com/img/history/hesta-child-care.png",
+      "supporting_text": "Learn more about our history and past"
+    }, {
+      "data": [{
+        "icon": "AlertCircle",
+        "title": "Read more about our history",
+        "public": true,
+        "description": "<p>Happy Birthday ELAA – celebrating 30 years of service to members</p>",
+        "primary_button": {
+          "url": "https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png",
+          "name": "Button",
+          "show": false,
+          "type": "external-page",
+          "label": "Learn more",
+          "open_in_new_tab": true
+        }
+      }, {
+        "icon": "AlignLeft01",
+        "title": "Read more about our history",
+        "public": true,
+        "description": "Happy Birthday ELAA – celebrating 30 years of service to members",
+        "primary_button": {
+          "url": "https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png",
+          "name": "Button",
+          "show": true,
+          "type": "external-page",
+          "label": "Learn more",
+          "open_in_new_tab": true
+        }
+      }, ], "name": "Link cards", "type": "link_cards", "max_items": 4, "supportive_text": "Manage the link cards."
+    }]
+  }]
+};

package/example/src/pages/OurVision.js

@@ -27,6 +27,7 @@ export const OurVision =
           title_label: "Eyebrow heading",
           supporting_text: "Excellence and equity in early childhood education and care",
           supporting_text_label: "Message *",
+          supporting_text_max_length: 500,
           featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose.png"
         },
       ]
@@ -41,6 +42,7 @@ export const OurVision =
           title: "Our Purpose",
           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 *",
         },

package/package.json

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

package/src/components/ItemEdit.vue

@@ -232,11 +232,6 @@ const addLine = () => {
   advancedForm.value.lines.push({title: "", description: ""});
 };
 
-const removeLine = (index) => {
-  advancedForm.value.lines.splice(index, 1);
-  this.save();
-};
-
 const save = () => {
   let form = hasLines.value ? advancedForm : basicForm;
 
@@ -254,6 +249,11 @@ const save = () => {
   emit("update", form.value);
 };
 
+const removeLine = (index) => {
+  advancedForm.value.lines.splice(index, 1);
+  save();
+};
+
 const close = () => {
   let form = hasLines.value ? advancedForm : basicForm;
   emit("close", form.value);

package/src/components/PageBuilder.vue

@@ -63,7 +63,7 @@
         <component
             class="min-h-[90vh]"
             :is="currentComponent"
-            :key="`${selected?.sectionIndex} - ${selected?.componentIndex}`"
+            :key="`${selected?.sectionIndex} - ${selected?.componentIndex} ${Math.random().toString(36).substring(2, 10)}`"
             :data="selected"
             :sites="sites"
             @update="save"

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

@@ -2,21 +2,21 @@
   <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}">
-      <div class="w-1/3">
+      <div class="max-w-[33.3%] w-full min-h-[320px]">
         <img v-if="imageComponent && section?.acknowledgement_style"
              :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
-             class="w-[560px] object-cover rounded-[24px]"/>
+             class="w-[560px] object-cover rounded-[24px] h-full"/>
         <img v-if="headerComponent?.featured_image && !section?.acknowledgement_style"
              :src="headerComponent?.featured_image"
-             class="w-[560px] object-cover rounded-[24px]"
+             class="w-[560px] object-cover rounded-[24px] h-full"
              alt="Feature"/>
       </div>
 
       <div v-if="headerComponent"
            class="rounded-[24px] flex items-center justify-center flex-col"
            :class="{
-        'bg-pale-100 min-h-[320px] w-2/3': !headerComponent?.featured_image,
-         'border border-brand-400 w-2/3': headerComponent?.featured_image,
+        'bg-pale-100 min-h-[320px] w-full': !headerComponent?.featured_image,
+         'border border-brand-400 w-full py-8': headerComponent?.featured_image,
          'w-full ': !section?.acknowledgement_style,
          'bg-gray-100 border-none': section?.acknowledgement_style,
       }"

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

@@ -6,20 +6,22 @@
         <div 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"></div>
       </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] object-cover"
-             alt="Feature"/>
-        <div class="flex gap-8 w-full" :class="{'!w-1/2 flex-col': headerComponent?.featured_image}">
+        <div class="w-full" ref="leftColumn" v-if="headerComponent?.featured_image">
+          <img
+               :src="headerComponent?.featured_image"
+               class="rounded-br-[24px] rounded-tl-[24px] h-full w-full object-cover"
+               alt="Feature"/>
+        </div>
+        <div class="flex gap-8 w-full" ref="rightColumn" :class="{'flex-col h-fit': 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>
-            <div class="text-lg text-gray-600 mt-2 mb-4 leading-[24px]" v-html="data.description"></div>
+            <div class="text-lg text-gray-600 mt-2 leading-[24px]" v-html="data.description"></div>
             <a
-                v-if="data?.primary_button.url"
-                class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base"
+                v-if="data?.primary_button.show"
+                class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
                 :href="formatUrl(data.primary_button.url)"
                 :target="data.primary_button.open_in_new_tab ? '_blank' : ''">
               {{ data.primary_button.label }}
@@ -31,8 +33,9 @@
     </div>
   </div>
 </template>
+
 <script setup>
-import {ref, computed} from "vue";
+import { ref, computed, onMounted } 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";
@@ -52,4 +55,12 @@ const cardComponent = computed(() => {
   return section.value.components.find((component) => component.type === "link_cards");
 });
 
+const leftColumn = ref(null);
+const rightColumn = ref(null);
+
+onMounted(() => {
+  if (leftColumn.value && rightColumn.value) {
+    leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
+  }
+});
 </script>

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

@@ -4,8 +4,8 @@
          class="md:px-[90px]"
          :class="{'flex flex-col items-center text-center': section.components[0]?.center, 'mb-[64px]': hasFeaturedImage}">
       <div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]">
-        <h3 class="text-[48px] font-semibold text-gray-900 w-2/3">{{ section.components[0].title }}</h3>
-        <h3 class="text-xl font-normal text-gray-600 mt-3 w-2/3" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
+        <h3 class="text-[48px] font-semibold text-gray-900 w-full max-w-[800px] leading-[60px] tracking-[-1px]">{{ section.components[0].title }}</h3>
+        <h3 class="text-xl font-normal text-gray-600 mt-3 w-full max-w-[800px]" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
         <img
             v-if="hasFeaturedImage"
             :src="section.components[0]?.featured_image"

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

@@ -24,7 +24,7 @@
         <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">
+              <div v-if="item?.icon" class="max-w-[48px] min-w-[48px] w-full 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]">