@dcodegroup-au/page-builder 0.2.6 → 0.2.8

package/package.json

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

package/src/components/builders/VLogos.vue

@@ -40,7 +40,6 @@
         <div class="flex flex-col gap-1.5">
           <VFileUpload
               name="image"
-              background="bg-white"
               v-model="item.logo"
           />
           <input-wrapper

package/src/components/presenters/components/VCarouselPresenter.vue

@@ -30,8 +30,8 @@
                 {{ tag }}
               </span>
             </div>
-            <h3 class="text-[24px] font-semibold text-gray-900 mb-3 leading-[23px] mt-3">
-              {{ slide?.title }}
+            <h3 class="my-3">
+              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline" :href="slide.url" target="_blank">{{ slide?.title }}</a>
             </h3>
             <p
                 class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
@@ -47,19 +47,7 @@
             </div>
           </div>
           <div class="border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center">
-            <a
-                v-if="slide.primary_button?.url"
-                :href="formatUrl(slide.primary_button.url)"
-                target="_blank"
-                class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-sm"
-            >
-              <Plus v-if="slide.primary_button?.icon === 'plus'" class="w-4 h-4" />
-              <ShoppingCart
-                  v-if="slide.primary_button?.icon === 'shopping-cart-01'"
-                  class="w-4 h-4"
-              />
-              {{ slide.primary_button.title }}
-            </a>
+            <VCarouselPrimaryButton :button="slide.primary_button" />
             <a
                 v-if="slide.secondary_button"
                 target="_blank"
@@ -101,14 +89,16 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, inject } from "vue";
 import Clock from "@/assets/img/icons/clock.svg";
-import Plus from "@/assets/img/icons/plus.svg";
-import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import Ticket from "@/assets/img/icons/ticket-02.svg";
+import DefaultPrimaryButton from "@/components/presenters/overridables/VCarouselPrimaryButton.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", DefaultPrimaryButton);
 
 const props = defineProps({
   component: {

package/src/components/presenters/components/VCollectionGridPresenter.vue

@@ -21,11 +21,17 @@
           </PlayButton>
         </div>
         <img
-            v-else
+            v-else-if="card.image"
             :src="card.image"
             alt="Card Image"
             class="w-full h-[281px] object-cover rounded-[16px] mb-4"
         />
+        <img
+            v-else
+            alt="Card Image"
+            class="w-full h-[281px] object-cover rounded-[16px] mb-4"
+        >
+        <img v-else class="w-full h-[281px] object-cover rounded-[16px] mb-4" src="@/assets/img/no_image_available.jpeg">
         <div class="flex flex-col gap-2 items-start text-left w-full">
           <div v-if="card.categories && card.categories.length" class="flex gap-2">
             <span
@@ -49,7 +55,7 @@
               rel="noopener noreferrer"
           >
             <div class="flex justify-between">
-              <span class="w-5/6 leading-[28px]">{{ card.title }}</span>
+              <span class="w-5/6 leading-[28px]" v-html="card.title"></span>
               <ArrowUpRight class="w-5 h-5 mt-1"></ArrowUpRight>
             </div>
           </a>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-[48px] max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
+  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-for="(component, index) in section.components" class="md:px-[90px]">
       <component
           :is="currentComponent(component)"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full relative" :class="{'bg-gray-50': !isHorizontal}">
+  <div class="w-full relative">
     <div class="1xl:max-w-[1824px] mx-auto relative flex justify-center items-center"
          :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
       <div v-for="(component, index) in section.components">

package/src/components/presenters/overridables/VCarouselPrimaryButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <a
+      v-if="button?.url"
+      :href="formatUrl(button.url)"
+      target="_blank"
+      class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-sm"
+  >
+    <Plus v-if="button?.icon === 'plus'" class="w-4 h-4" />
+    <ShoppingCart v-if="button?.icon === 'shopping-cart-01'" class="w-4 h-4" />
+    {{ button.title }}
+  </a>
+</template>
+
+<script setup>
+import Plus from "@/assets/img/icons/plus.svg";
+import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
+
+const props = defineProps({
+  button: {
+    type: Object,
+    required: true,
+  },
+});
+
+const formatUrl = (url) => {
+  return url.startsWith("http") ? url : `//${url}`;
+};
+</script>