@dcodegroup-au/page-builder 0.4.2 → 0.4.4

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/presenters/modules/Callout.vue

@@ -2,21 +2,24 @@
   <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]"
+           v-if="(imageComponent && section?.acknowledgement_style)
+           || (headerComponent?.featured_image && !section?.acknowledgement_style)"
+      >
         <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 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/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]">