@dcodegroup-au/page-builder 0.8.1 → 0.8.2

package/dist/page-builder.css

@@ -894,6 +894,9 @@ select {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-7 {
+  margin-top: 1.75rem;
+}
 .mt-8 {
   margin-top: 2rem;
 }
@@ -915,12 +918,6 @@ select {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
-.line-clamp-6 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 6;
-}
 .\!block {
   display: block !important;
 }
@@ -1020,12 +1017,12 @@ select {
 .h-\[48px\] {
   height: 48px;
 }
+.h-\[494px\] {
+  height: 494px;
+}
 .h-\[56px\] {
   height: 56px;
 }
-.h-\[614px\] {
-  height: 614px;
-}
 .h-\[674px\] {
   height: 674px;
 }
@@ -1388,6 +1385,9 @@ select {
 .rounded-\[20px\] {
   border-radius: 20px;
 }
+.rounded-\[24px\] {
+  border-radius: 24px;
+}
 .rounded-\[6px\] {
   border-radius: 6px;
 }
@@ -2956,6 +2956,10 @@ select {
 
 @media not all and (min-width: 1024px) {
 
+  .max-lg\:absolute {
+    position: absolute;
+  }
+
   .max-lg\:hidden {
     display: none;
   }
@@ -2975,6 +2979,10 @@ select {
   .max-lg\:pb-6 {
     padding-bottom: 1.5rem;
   }
+
+  .max-lg\:pt-\[55\%\] {
+    padding-top: 55%;
+  }
 }
 
 @media not all and (min-width: 768px) {
@@ -3023,10 +3031,6 @@ select {
     grid-template-columns: auto 20px;
   }
 
-  .max-sm\:flex-col {
-    flex-direction: column;
-  }
-
   .max-sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -3112,6 +3116,11 @@ select {
     padding-right: 1rem;
   }
 
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .sm\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -3871,12 +3880,12 @@ select {
 }
 
 
-.carousel[data-v-29ca6047] {
+.carousel[data-v-37e27419] {
   margin: 1rem 0;
   flex-direction: column;
 }
 @media not all and (min-width: 1024px) {
-[data-v-29ca6047] .carousel__slide {
+[data-v-37e27419] .carousel__slide {
     flex-direction: column;
 }
 }

package/dist/page-builder.es.js

@@ -47848,15 +47848,15 @@ const Slide = defineComponent({
     };
   }
 });
-const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+const _hoisted_1$M = { class: "flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10" };
 const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
-const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
+const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]" };
 const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
 const _hoisted_5$i = ["onClick"];
 const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
 const _hoisted_7$h = { class: "max-md:flex-1" };
 const _hoisted_8$g = ["innerHTML"];
-const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
+const _hoisted_9$g = { class: "flex gap-3 mt-4 md:mt-8" };
 const _hoisted_10$c = ["href", "target"];
 const _hoisted_11$a = ["href", "target"];
 const _hoisted_12$8 = ["src"];
@@ -47905,14 +47905,14 @@ const _sfc_main$s = {
                       createElementVNode("h3", _hoisted_6$i, toDisplayString(slide == null ? void 0 : slide.title), 1),
                       createElementVNode("div", _hoisted_7$h, [
                         createElementVNode("p", {
-                          class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                          class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3",
                           innerHTML: slide == null ? void 0 : slide.description
                         }, null, 8, _hoisted_8$g)
                       ]),
                       createElementVNode("div", _hoisted_9$g, [
                         slide.secondary_button.show ? (openBlock(), createElementBlock("a", {
                           key: 0,
-                          class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
+                          class: "text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
                           href: unref(formatUrl)(slide.secondary_button.url),
                           target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                         }, [
@@ -47920,7 +47920,7 @@ const _sfc_main$s = {
                         ], 8, _hoisted_10$c)) : createCommentVNode("", true),
                         slide.primary_button.show ? (openBlock(), createElementBlock("a", {
                           key: 1,
-                          class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50",
+                          class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50",
                           href: unref(formatUrl)(slide.primary_button.url),
                           target: slide.primary_button.open_in_new_tab ? "_blank" : ""
                         }, [
@@ -47950,7 +47950,7 @@ const _sfc_main$s = {
     };
   }
 };
-const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
+const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
 const _hoisted_1$L = ["target", "href"];
 const _sfc_main$r = {
   __name: "LinkPresenter",
@@ -49142,7 +49142,7 @@ const _hoisted_12$5 = ["href", "target"];
 const _hoisted_13$5 = ["src"];
 const _hoisted_14$4 = {
   key: 0,
-  class: "w-full md:w-[560px] flex"
+  class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
 };
 const _hoisted_15$3 = ["src", "alt"];
 const _sfc_main$d = {
@@ -49270,7 +49270,7 @@ const _sfc_main$d = {
                 createElementVNode("img", {
                   src: imageComponent.value.featured_image,
                   alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                  class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                  class: "w-full h-full object-cover max-lg:absolute inset-0"
                 }, null, 8, _hoisted_15$3)
               ])) : createCommentVNode("", true)
             ], 2)
@@ -49643,14 +49643,18 @@ const _sfc_main$9 = {
           createElementVNode("div", {
             class: normalizeClass(["pb-container my-[40px]", { "flex gap-8 flex-col lg:flex-row": (_c = headerComponent.value) == null ? void 0 : _c.featured_image, "flex-col-reverse lg:flex-row-reverse justify-between": (_d = headerComponent.value) == null ? void 0 : _d.revert }])
           }, [
-            ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), createElementBlock("img", {
+            ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), createElementBlock("div", {
               key: 0,
-              src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-              class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
               ref_key: "leftColumn",
               ref: leftColumn,
-              alt: "Feature"
-            }, null, 8, _hoisted_2$8)) : createCommentVNode("", true),
+              class: "w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+            }, [
+              createElementVNode("img", {
+                src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
+                class: "w-full h-full object-cover max-lg:absolute inset-0",
+                alt: "Feature"
+              }, null, 8, _hoisted_2$8)
+            ], 512)) : createCommentVNode("", true),
             headerComponent.value ? (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass(["h-fit flex flex-col gap-4 lg:gap-8", { "xl:py-[48px]": (_g = headerComponent.value) == null ? void 0 : _g.featured_image, "[&]:grid lg:grid-cols-2": (_h = section.value) == null ? void 0 : _h.two_column }]),

package/dist/page-builder.umd.js

@@ -47851,15 +47851,15 @@ ${escapeText(this.code(index, length))}
       };
     }
   });
-  const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+  const _hoisted_1$M = { class: "flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10" };
   const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
-  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
+  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]" };
   const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
   const _hoisted_5$i = ["onClick"];
   const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
   const _hoisted_7$h = { class: "max-md:flex-1" };
   const _hoisted_8$g = ["innerHTML"];
-  const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
+  const _hoisted_9$g = { class: "flex gap-3 mt-4 md:mt-8" };
   const _hoisted_10$c = ["href", "target"];
   const _hoisted_11$a = ["href", "target"];
   const _hoisted_12$8 = ["src"];
@@ -47908,14 +47908,14 @@ ${escapeText(this.code(index, length))}
                         vue.createElementVNode("h3", _hoisted_6$i, vue.toDisplayString(slide == null ? void 0 : slide.title), 1),
                         vue.createElementVNode("div", _hoisted_7$h, [
                           vue.createElementVNode("p", {
-                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3",
                             innerHTML: slide == null ? void 0 : slide.description
                           }, null, 8, _hoisted_8$g)
                         ]),
                         vue.createElementVNode("div", _hoisted_9$g, [
                           slide.secondary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
-                            class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
+                            class: "text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
                             href: vue.unref(formatUrl)(slide.secondary_button.url),
                             target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47923,7 +47923,7 @@ ${escapeText(this.code(index, length))}
                           ], 8, _hoisted_10$c)) : vue.createCommentVNode("", true),
                           slide.primary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
-                            class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50",
+                            class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50",
                             href: vue.unref(formatUrl)(slide.primary_button.url),
                             target: slide.primary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47953,7 +47953,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
+  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
   const _hoisted_1$L = ["target", "href"];
   const _sfc_main$r = {
     __name: "LinkPresenter",
@@ -49145,7 +49145,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_13$5 = ["src"];
   const _hoisted_14$4 = {
     key: 0,
-    class: "w-full md:w-[560px] flex"
+    class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
   };
   const _hoisted_15$3 = ["src", "alt"];
   const _sfc_main$d = {
@@ -49273,7 +49273,7 @@ ${escapeText(this.code(index, length))}
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                    class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                    class: "w-full h-full object-cover max-lg:absolute inset-0"
                   }, null, 8, _hoisted_15$3)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -49646,14 +49646,18 @@ ${escapeText(this.code(index, length))}
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["pb-container my-[40px]", { "flex gap-8 flex-col lg:flex-row": (_c = headerComponent.value) == null ? void 0 : _c.featured_image, "flex-col-reverse lg:flex-row-reverse justify-between": (_d = headerComponent.value) == null ? void 0 : _d.revert }])
             }, [
-              ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("img", {
+              ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
-                src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-                class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
                 ref_key: "leftColumn",
                 ref: leftColumn,
-                alt: "Feature"
-              }, null, 8, _hoisted_2$8)) : vue.createCommentVNode("", true),
+                class: "w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+              }, [
+                vue.createElementVNode("img", {
+                  src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
+                  class: "w-full h-full object-cover max-lg:absolute inset-0",
+                  alt: "Feature"
+                }, null, 8, _hoisted_2$8)
+              ], 512)) : vue.createCommentVNode("", true),
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 1,
                 class: vue.normalizeClass(["h-fit flex flex-col gap-4 lg:gap-8", { "xl:py-[48px]": (_g = headerComponent.value) == null ? void 0 : _g.featured_image, "[&]:grid lg:grid-cols-2": (_h = section.value) == null ? void 0 : _h.two_column }]),

package/example/src/pages/AboutUs.js

@@ -79,7 +79,7 @@ export const AboutUs = {
           type: "header",
           title: "Support Services",
           icon: "AlertCircle",
-          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/untitled-design-30.png"
+          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/kinglakeselects-final-02684.jpg"
        },
         {
           name: "Bullet Points",
@@ -127,4 +127,4 @@ export const AboutUs = {
       ]
     },
   ]
-};
+};

package/package.json

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

package/src/components/presenters/components/SliderPresenter.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10">
+  <div class="flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10">
     <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
       <Slide v-for="(slide, index) in slides" :key="index">
         <div class="flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full">
-          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]">
+          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
@@ -12,16 +12,16 @@
             </div>
             <h3 class="text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
             <div class="max-md:flex-1">
-              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3" v-html="slide?.description"></p>
+              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3" v-html="slide?.description"></p>
             </div>
-            <div class="flex gap-3 md:mt-8 max-sm:flex-col">
-              <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
+            <div class="flex gap-3 mt-4 md:mt-8">
+              <a class="text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                  :href="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
                  :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                 <span>{{ slide.secondary_button.label }}</span>
               </a>
-              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
+              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50"
                  :href="formatUrl(slide.primary_button.url)"
                  v-if="slide.primary_button.show"
                  :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">

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

@@ -3,11 +3,14 @@
     <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
       <div class="pb-container my-[40px]"
            :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
-        <img v-if="headerComponent?.featured_image"
-             :src="headerComponent?.featured_image"
-             class="lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
+        <div v-if="headerComponent?.featured_image"
              ref="leftColumn"
-             alt="Feature"/>
+             class="w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+        >
+            <img :src="headerComponent?.featured_image"
+                 class="w-full h-full object-cover max-lg:absolute inset-0"
+                 alt="Feature"/>
+        </div>
         <div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': section?.two_column}"
              ref="rightColumn">
           <div>
@@ -65,4 +68,4 @@ onMounted(() => {
     leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
   }
 });
-</script>
+</script>

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

@@ -52,9 +52,9 @@
               <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
             </div>
           </div>
-          <div v-if="imageComponent" class="w-full md:w-[560px] flex">
+          <div v-if="imageComponent" class="w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]">
             <img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
-                 class="rounded-br-[24px] rounded-tl-[24px] w-full object-cover" />
+                 class="w-full h-full object-cover max-lg:absolute inset-0" />
           </div>
         </div>
       </div>
@@ -107,4 +107,4 @@ const items = computed(() => {
   });
 });
 
-</script>
+</script>