@dcodegroup-au/page-builder 0.2.2 → 0.2.4

package/example/src/App.vue

@@ -99,7 +99,7 @@ const page = {
         {
           name: "Links",
           type: "links",
-          supportive_text: "Manage the slides in the slider.",
+          supportive_text: "Manage the links.",
           max_items: 7,
           data: [
             {
@@ -254,7 +254,7 @@ const page = {
             {
               url: "/",
               logo: "https://beta-frontend.elaa.org.au/img/logos/hesta.png",
-            },{
+            }, {
               url: "/",
               logo: "",
             }
@@ -281,16 +281,286 @@ const page = {
     {
       title: "Collection carousel",
       type: "collection_carousel",
+      has_background: true,
       components: [
         {
           name: "Section header",
           type: "header",
-          title: 'Services',
-          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
+          title: 'Upcoming Events',
+          dark: true,
+          supporting_text: 'Don\'t Miss Our Upcoming Activities and Gatherings in Early Education.',
         },
         {
           name: "Carousel",
           type: "carousel",
+          button: {
+            title: 'View all events',
+            url: 'google.com', // external could be an url
+            type: 'external-page',
+            is_new_tab: true,
+          },
+          content: {
+            label: 'Content',
+            supportive_text: 'This carousel will be automatically populated with all upcoming events. This section will be hidden if there’s no upcoming events.',
+            items: [
+              {
+                type: 'event',
+                title: 'Change Management – Drop in session',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_1.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: 'Free',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_2.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: '$395 <span style="font-weight: lighter;">(Members)</span> <br> $495 <span style="font-weight: lighter;">(Non-Members)</span>',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'DE Regional Governance Training Session',
+                description: 'Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_3.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: 'Free',
+                button_title: 'Free',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'Change Management – Drop in session 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_1.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: 'Free',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_2.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: '$395 <span style="font-weight: lighter;">(Members)</span> <br> $495 <span style="font-weight: lighter;">(Non-Members)</span>',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 3',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_2.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: '$395 <span style="font-weight: lighter;">(Members)</span> <br> $495 <span style="font-weight: lighter;">(Non-Members)</span>',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'event',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 4',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                image: 'https://beta-frontend.elaa.org.au/img/events/event_2.jpg',
+                tags: ['Governance', 'CEO&Leadership', 'Zoom webinar'],
+                line_1: 'June 20 @ 12:30 pm - 1:15 pm AEST',
+                line_2: '$395 <span style="font-weight: lighter;">(Members)</span> <br> $495 <span style="font-weight: lighter;">(Non-Members)</span>',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Register',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+            ]
+          }
+        }
+      ]
+    },
+    {
+      title: "Collection carousel",
+      type: "collection_carousel",
+      has_background: false,
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: 'Our Submission',
+          dark: true,
+          supporting_text: null,
+        },
+        {
+          name: "Carousel",
+          type: "carousel",
+          button: {
+            title: 'View all submissions',
+            url: 'google.com', // external could be an url
+            type: 'external-page',
+            is_new_tab: true,
+          },
+          content: {
+            label: 'Content',
+            supportive_text: 'This carousel will be automatically populated with all upcoming events. This section will be hidden if there’s no upcoming events.',
+            items: [
+              {
+                type: 'submission',
+                title: 'Change Management – Drop in session',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector. This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'DE Regional Governance Training Session',
+                description: 'Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                button_title: 'Free',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Change Management – Drop in session 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 3',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 4',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+            ]
+          }
         }
       ]
     },

package/package.json

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

package/src/components/PageBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-builder">
+  <div class="page-builder overflow-auto">
     <div class="flex gap-4 px-6 overflow-auto">
       <div class="flex w-[356px] flex-col gap-2 pb-10">
         <div v-for="(parent, sectionIndex) in modelValue.sections" class="border-b border-gray-200 pb-2">
@@ -71,6 +71,7 @@ import VItems from "@/components/builders/VItems.vue";
 import VLinks from "@/components/builders/VLinks.vue";
 import VHeader from "@/components/builders/VHeader.vue";
 import VLogos from "@/components/builders/VLogos.vue";
+import VCollectionCarousel from "@/components/builders/VCollectionCarousel.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -96,6 +97,7 @@ const componentMaps = ref({
   header: markRaw(VHeader),
   link_grid: markRaw(VLinks),
   logos: markRaw(VLogos),
+  carousel: markRaw(VCollectionCarousel),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -15,6 +15,7 @@ import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
 import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
 import VTabs from "@/components/presenters/modules/VTabs.vue";
 import LogoCloud from "@/components/presenters/modules/LogoCloud.vue";
+import CollectionCarousel from "@/components/presenters/modules/CollectionCarousel.vue";
 
 const props = defineProps({
   page: {
@@ -28,6 +29,7 @@ const componentMaps = ref({
   quick_links: markRaw(QuickLinks),
   tabs: markRaw(VTabs),
   logo: markRaw(LogoCloud),
+  collection_carousel: markRaw(CollectionCarousel),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/VCollectionCarousel.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col gap-4 mb-4 border-b border-gray-200 pb-4">
+      <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+        Carousel
+      </p>
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <input-wrapper
+              v-if="componentData.button"
+              is-vertical
+              field="title"
+              label-text="Button label *"
+              class="w-full mb-4"
+              :value="componentData.button.title"
+              :limit="51"
+          >
+            <input
+                v-model="componentData.button.title"
+                name="title"
+                type="text"
+                placeholder="Title"
+                :maxlength="51"
+                class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+            />
+          </input-wrapper>
+          <linked-to
+              v-if="componentData?.button"
+              label="Link to"
+              name="button"
+              v-model:type="componentData.button.type"
+              v-model:url="componentData.button.url"
+              v-model:openInNewTab="componentData.button.open_in_new_tab"
+              :sites="sites"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <h3 v-if="componentData.content?.label" class="text-base text-gray-900 font-semibold">{{ componentData.content.label }}</h3>
+      <p v-if="componentData.content?.supportive_text" class="text-gray-600 text-base font-normal mt-2">{{ componentData.content.supportive_text }}</p>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="relative">
+    <!-- Slider Wrapper -->
+    <div
+        class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
+        :style="{ transform: `translateX(-${currentSlide * (480 + 24)}px)` }"
+    >
+      <div
+          v-for="(slide, index) in slides"
+          :key="index"
+          class="slider-item flex-shrink-0 flex-1 mr-6 min-w-[480px]"
+          :class="{'h-[309px]': !hasBackground, 'h-full': hasBackground}"
+      >
+        <div class="w-full p-4 rounded-[16px]" :class="{'bg-gray-50 h-full flex flex-col justify-between': !hasBackground, 'bg-white': hasBackground}">
+          <div>
+            <div class="mb-4">
+              <img
+                  v-if="slide.image"
+                  :src="slide.image"
+                  alt="Slide Image"
+                  class="rounded-[8px] h-[220px] w-full object-cover"
+              />
+            </div>
+            <div v-if="slide.tags && slide.tags.length" class="flex gap-2">
+            <span
+                v-for="tag in slide.tags"
+                :key="tag"
+                class="bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+            >
+              {{ tag }}
+            </span>
+            </div>
+            <h3 class="text-[24px] font-semibold text-gray-900 mb-3 leading-[23px] mt-3">
+              {{ slide?.title }}
+            </h3>
+            <p
+                class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
+                v-html="slide?.description"
+            ></p>
+            <div v-if="slide?.type === 'event'" class="flex gap-2 text-gray-600 mt-6 font-semibold">
+              <Clock class="w-4 h-4 mt-[3px]"></Clock>
+              <div class="text-sm" v-html="slide?.line_1"></div>
+            </div>
+            <div v-if="slide.type === 'event'" class="flex gap-2 text-gray-600 mt-2 font-semibold">
+              <Ticket class="w-4 h-4 mt-[3px]"></Ticket>
+              <div class="text-sm" v-html="slide?.line_2"></div>
+            </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>
+            <a
+                v-if="slide.secondary_button"
+                target="_blank"
+                :href="formatUrl(slide.secondary_button.url)"
+                class="text-sm text-gray-600 hover:text-gray-800"
+            >
+              {{ slide.secondary_button.title ?? 'Learn more' }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Control Buttons -->
+    <div class="absolute top-[-65px] right-4 flex gap-4">
+      <button
+          @click="prevSlide"
+          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+      >
+        <ChevronLeft class="w-6 h-6" />
+      </button>
+      <button
+          @click="nextSlide"
+          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+      >
+        <ChevronRight class="w-6 h-6" />
+      </button>
+    </div>
+    <div v-if="component?.button" class="flex justify-center mb-[40px]">
+      <a
+          class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
+          :href="component.button.url"
+         :target="component.button.is_new_tab ? '_blank' : ''">
+        {{ component.button.title }}
+        <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } 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";
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+  hasBackground: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const currentSlide = ref(0); // Start at 0
+const itemsToShow = 4; // Number of items to show at a time
+const slides = [...props.component.content?.items || []];
+
+// Format URL
+const formatUrl = (url) => {
+  return url.startsWith("http") ? url : `//${url}`;
+};
+
+// Navigate to the next slide
+const nextSlide = () => {
+  if (currentSlide.value <= slides.length - itemsToShow) {
+    currentSlide.value++;
+  }
+};
+
+// Navigate to the previous slide
+const prevSlide = () => {
+  if (currentSlide.value > 0) {
+    currentSlide.value--;
+  }
+};
+</script>
+<style>
+.multiline-ellipsis {
+  height: 100%;
+  display: -webkit-box; /* Use a flex-like box model */
+  -webkit-box-orient: vertical; /* Set the box orientation to vertical */
+  overflow: hidden; /* Hide overflowing content */
+  text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
+  -webkit-line-clamp: 4; /* Limit the text to 3 lines */
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
+    <div class="max-w-[1400px] mx-auto w-full">
+      <div class="max-md:mx-[30px] max-1xl:mx-[120px] 1xl:mx-0 rounded-[48px] pt-[40px]">
+        <VHeaderPresenter :component="headerComponent" />
+      </div>
+    </div>
+    <div class="max-w-[1400px] mx-auto w-full" :class="{'mt-0': !section?.has_background, 'mt-6': section?.has_background}">
+      <VCarousel :component="carouselComponent" :has-background="section?.has_background" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
+import VCarousel from "@/components/presenters/components/VCarouselPresenter.vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const headerComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "header");
+});
+
+const carouselComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "carousel");
+});
+
+</script>

package/tailwind.config.js

@@ -19,8 +19,10 @@ module.exports = {
         navy: {
           900: '#182E43',
           800: '#203E5A',
+          700: '#284D70',
           600: '#3E5F7E',
           400: '#69829B',
+          200: '#94A6B8',
           50: '#DFE5EC',
           25: '#EFF2F5',
         },
@@ -38,6 +40,9 @@ module.exports = {
           900: '#58113A',
           950: '#3B0B27',
         },
+        aqua: {
+          100: '#EEF2F2',
+        },
         success: {
           50: 'rgba(236, 253, 243, 1)',
           200: 'rgba(171, 239, 198, 1)',