@dcodegroup-au/page-builder 0.7.4 → 0.7.5

package/dist/page-builder.css

@@ -1044,6 +1044,9 @@ select {
 .h-\[96px\] {
   height: 96px;
 }
+.h-auto {
+  height: auto;
+}
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1259,6 +1262,9 @@ select {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .\!translate-x-3 {
   --tw-translate-x: 0.75rem !important;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -1717,6 +1723,10 @@ select {
 .p-8 {
   padding: 2rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .\!px-6 {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
@@ -2993,6 +3003,13 @@ select {
   opacity: 1;
 }
 
+@media not all and (min-width: 1280px) {
+
+  .max-xl\:h-full {
+    height: 100%;
+  }
+}
+
 @media not all and (min-width: 1024px) {
 
   .max-lg\:flex-col {
@@ -3020,6 +3037,14 @@ select {
     padding-right: 1rem;
   }
 
+  .max-md\:\!pb-0 {
+    padding-bottom: 0px !important;
+  }
+
+  .max-md\:\!pt-4 {
+    padding-top: 1rem !important;
+  }
+
   .max-md\:pb-4 {
     padding-bottom: 1rem;
   }
@@ -3150,6 +3175,11 @@ select {
     padding-right: 120px;
   }
 
+  .md\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .md\:pl-6 {
     padding-left: 1.5rem;
   }
@@ -3208,10 +3238,6 @@ select {
     height: 300px;
   }
 
-  .lg\:h-\[336px\] {
-    height: 336px;
-  }
-
   .lg\:h-\[480px\] {
     height: 480px;
   }
@@ -3317,6 +3343,10 @@ select {
     left: 120px;
   }
 
+  .xl\:h-\[336px\] {
+    height: 336px;
+  }
+
   .xl\:h-\[480px\] {
     height: 480px;
   }

package/dist/page-builder.es.js

@@ -47941,19 +47941,19 @@ const _sfc_main$r = {
     const isLinkGrid = component.value.type === "link_grid";
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start mt-8 !h-auto !gap-4": isLinkGrid }])
+        class: normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-md:!pb-0 max-md:!pt-4": isLinkGrid }])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(component.value.data, (link) => {
           return openBlock(), createElementBlock("div", {
-            class: normalizeClass(["flex justify-center items-center", { "!block": isLinkGrid }])
+            class: normalizeClass(["flex justify-center items-center max-w-full", { "!block": isLinkGrid }])
           }, [
             createElementVNode("a", {
               target: link.open_in_new_tab ? "_blank" : "",
               href: link.url.startsWith("http") ? link.url : `//${link.url}`,
-              class: normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
+              class: normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
             }, [
               createElementVNode("span", null, toDisplayString(link.title), 1),
-              createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
+              createVNode(unref(ArrowUpRight), { class: "shrink-0 w-5 h-5" })
             ], 10, _hoisted_1$L)
           ], 2);
         }), 256))
@@ -48085,7 +48085,7 @@ const _sfc_main$o = {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
+        class: normalizeClass(["w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
       }, [
         ((_b = section.value) == null ? void 0 : _b.as_cta) ? (openBlock(), createBlock(unref(LeftVector), {
           key: 0,
@@ -48093,7 +48093,7 @@ const _sfc_main$o = {
         })) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_1$H, [
           createElementVNode("div", {
-            class: normalizeClass(["max-md:mx-[30px] 1xl:mx-0 relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
+            class: normalizeClass(["relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(section.value.components, (component, index) => {
               var _a2;
@@ -48109,7 +48109,7 @@ const _sfc_main$o = {
         ]),
         !((_d = section.value) == null ? void 0 : _d.as_cta) ? (openBlock(), createBlock(unref(HeaderVector), {
           key: 1,
-          class: "absolute right-0 top-0"
+          class: "absolute right-0 top-0 max-xl:h-full"
         })) : createCommentVNode("", true)
       ], 2);
     };

package/dist/page-builder.umd.js

@@ -47944,19 +47944,19 @@ ${escapeText(this.code(index, length))}
       const isLinkGrid = component.value.type === "link_grid";
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start mt-8 !h-auto !gap-4": isLinkGrid }])
+          class: vue.normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-md:!pb-0 max-md:!pt-4": isLinkGrid }])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(component.value.data, (link) => {
             return vue.openBlock(), vue.createElementBlock("div", {
-              class: vue.normalizeClass(["flex justify-center items-center", { "!block": isLinkGrid }])
+              class: vue.normalizeClass(["flex justify-center items-center max-w-full", { "!block": isLinkGrid }])
             }, [
               vue.createElementVNode("a", {
                 target: link.open_in_new_tab ? "_blank" : "",
                 href: link.url.startsWith("http") ? link.url : `//${link.url}`,
-                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
+                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
               }, [
                 vue.createElementVNode("span", null, vue.toDisplayString(link.title), 1),
-                vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
+                vue.createVNode(vue.unref(ArrowUpRight), { class: "shrink-0 w-5 h-5" })
               ], 10, _hoisted_1$L)
             ], 2);
           }), 256))
@@ -48088,7 +48088,7 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
+          class: vue.normalizeClass(["w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]", { "lg:!h-[266px]": (_a = section.value) == null ? void 0 : _a.as_cta }])
         }, [
           ((_b = section.value) == null ? void 0 : _b.as_cta) ? (vue.openBlock(), vue.createBlock(vue.unref(LeftVector), {
             key: 0,
@@ -48096,7 +48096,7 @@ ${escapeText(this.code(index, length))}
           })) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_1$H, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["max-md:mx-[30px] 1xl:mx-0 relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
+              class: vue.normalizeClass(["relative z-10", { "text-center flex flex-col items-center": (_c = section.value) == null ? void 0 : _c.as_cta }])
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(section.value.components, (component, index) => {
                 var _a2;
@@ -48112,7 +48112,7 @@ ${escapeText(this.code(index, length))}
           ]),
           !((_d = section.value) == null ? void 0 : _d.as_cta) ? (vue.openBlock(), vue.createBlock(vue.unref(HeaderVector), {
             key: 1,
-            class: "absolute right-0 top-0"
+            class: "absolute right-0 top-0 max-xl:h-full"
           })) : vue.createCommentVNode("", true)
         ], 2);
       };

package/package.json

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

package/src/components/presenters/components/LinkPresenter.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]" :class="{'bg-transparent !justify-start mt-8 !h-auto !gap-4': isLinkGrid}">
-    <div class="flex justify-center items-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
+  <div class="flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]" :class="{'bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-md:!pb-0 max-md:!pt-4': isLinkGrid}">
+    <div class="flex justify-center items-center max-w-full" :class="{'!block': isLinkGrid}" v-for="link in component.data">
       <a
           :target="link.open_in_new_tab ? '_blank' : ''"
           :href="link.url.startsWith('http') ? link.url : `//${link.url}`"
           class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9"
-          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
+          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
       >
-        <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+        <span>{{ link.title }}</span><ArrowUpRight class="shrink-0 w-5 h-5"></ArrowUpRight>
       </a>
     </div>
   </div>

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
+  <div class="w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
     <LeftVector class="absolute left-0 top-0 h-full max-w-full" v-if="section?.as_cta"></LeftVector>
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
-      <div class="max-md:mx-[30px] 1xl:mx-0 relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
+      <div class="relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
         <div v-for="(component, index) in section.components" class="w-full md:w-3/4">
           <component
               :is="currentComponent(component)"
@@ -13,7 +13,7 @@
         </div>
       </div>
     </div>
-    <HeaderVector class="absolute right-0 top-0" v-if="!section?.as_cta"></HeaderVector>
+    <HeaderVector class="absolute right-0 top-0 max-xl:h-full" v-if="!section?.as_cta"></HeaderVector>
    </div>
 </template>