@dcodegroup-au/page-builder 0.2.5 → 0.2.6

package/example/src/App.vue

@@ -269,12 +269,73 @@ const page = {
         {
           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: 'News',
+          dark: true,
+          center: true,
+          supporting_text: 'Stay Informed with the Latest Developments in Early Education',
         },
         {
           name: "Grid",
-          type: "grid",
+          type: "news_grid",
+          button: {
+            title: 'View all news',
+            url: 'google.com', // external could be an url
+            type: 'external-page',
+            is_new_tab: true,
+            show: true,
+          },
+          content: {
+            label: 'Content',
+            supportive_text: 'This grid will be automatically populated with the latest three news items.',
+            items: [
+              {
+                image: "https://beta-frontend.elaa.org.au/img/news/news_1.jpg",
+                categories: [{
+                  name: 'Wages, IR and Governance',
+                  style: 'navy',
+                }],
+                link: "https://example.com",
+                title: "Fair Work Laws changes for casual employment",
+                dateTime: "10 Sep 2024",
+              },
+              {
+                image: "https://beta-frontend.elaa.org.au/img/news/news_2.jpg",
+                categories: [{
+                  name: 'Member Benefits',
+                  style: 'brand',
+                }],
+                link: "https://example.com",
+                title: "ELAA renews its partnership with Bunnings for another year: make the most of your Bunnings PowerPass membership benefits",
+                dateTime: "09 Sep 2024",
+              },
+              {
+                image: "https://beta-frontend.elaa.org.au/img/news/news_3.jpg",
+                categories: [{
+                  name: 'Advocacy',
+                  style: 'orange',
+                }],
+                link: "https://example.com",
+                title: "Meet our Best Start Best Life (BSBL) Reform and Engagement Advisor Leanne Rodriguez",
+                dateTime: "08 Sep 2024",
+              },
+            ]
+          }
+        },
+        {
+          name: "Grid",
+          type: "video_grid",
+          max_items: 3,
+          data: [
+            {
+              video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
+            },
+            {
+              video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+            },
+            {
+              video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
+            }
+          ]
         }
       ]
     },
@@ -432,7 +493,7 @@ const page = {
               },
             ]
           }
-        }
+        },
       ]
     },
     {

package/package.json

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

package/src/assets/svg/play.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56ZM23.625 38.2705L39.375 29.4672C40.5417 28.8151 40.5417 27.1849 39.375 26.5328L23.625 17.7295C22.4583 17.0774 21 17.8925 21 19.1967V36.8033C21 38.1075 22.4583 38.9226 23.625 38.2705Z" fill="white"/>
+</svg>

package/src/components/PageBuilder.vue

@@ -41,6 +41,7 @@
       <div class="flex h-full flex-1 flex-col rounded-xl bg-gray-50 px-6 py-5 mb-20">
         <Instructions v-if="!selected" />
         <component
+            class="min-h-[90vh]"
             :is="currentComponent"
             :key="selected?.sectionIndex + selected?.componentIndex"
             :data="selected"
@@ -72,6 +73,8 @@ 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";
+import VNewsGrid from "@/components/builders/VNewsGrid.vue";
+import VVideoGrid from "@/components/builders/VVideoGrid.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -98,6 +101,8 @@ const componentMaps = ref({
   link_grid: markRaw(VLinks),
   logos: markRaw(VLogos),
   carousel: markRaw(VCollectionCarousel),
+  news_grid: markRaw(VNewsGrid),
+  video_grid: markRaw(VVideoGrid),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -16,6 +16,7 @@ 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";
+import CollectionGrid from "@/components/presenters/modules/CollectionGrid.vue";
 
 const props = defineProps({
   page: {
@@ -30,6 +31,7 @@ const componentMaps = ref({
   tabs: markRaw(VTabs),
   logo: markRaw(LogoCloud),
   collection_carousel: markRaw(CollectionCarousel),
+  collection_grid: markRaw(CollectionGrid),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/VNewsGrid.vue

@@ -0,0 +1,55 @@
+<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">
+        Grid
+      </p>
+      <VToggle name="show" v-model="componentData.button.show" title="Show Button" />
+      <input-wrapper
+          is-vertical
+          field="title"
+          label-text="Title *"
+          class="w-full mb-4"
+          :value="componentData.button.title"
+          :limit="20"
+      >
+        <input
+            v-model="componentData.button.title"
+            name="title"
+            type="text"
+            placeholder="Title"
+            :maxlength="20"
+            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>
+      <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";
+import VToggle from "@/components/common/VToggle.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+</script>

package/src/components/builders/VVideoGrid.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="flex justify-between pb-2">
+    <div class="flex justify-between w-full py-1">
+      <div>
+        <p class="text-lg font-semibold text-gray-900">
+          {{ componentData.name }}
+        </p>
+        <p class="text-sm text-gray-600 mt-1">
+          This section can contain up to {{ componentData.max_items }} videos
+        </p>
+      </div>
+      <div>
+        <a
+            @click="addItem"
+            class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 py-2 font-semibold text-white hover:bg-brand-600"
+            :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': componentData.data?.length >= componentData.max_items }"
+        >
+          <PlusIcon class="h-5 w-5"></PlusIcon>
+          <span>Add</span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div
+        v-for="(item, index) in componentData.data"
+        class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+        :key="index"
+        :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+    >
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-semibold text-gray-900">
+          Video #{{index + 1}}
+        </div>
+        <div class="relative flex items-end">
+          <ActionMenu @removeItem="handleDeleteItem(index)"/>
+        </div>
+      </div>
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <VFileUpload
+              name="image"
+              type="video"
+              height="h-[250px]"
+              v-model="item.video"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, inject} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VModal from "@/components/common/VModal.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push({
+    video: null,
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

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

@@ -22,13 +22,13 @@
               />
             </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>
+              <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 }}

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
+      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4">
+        <div v-if="component.type === 'video_grid'" class="relative group">
+          <video
+              @click="togglePlayPause(index)"
+              :ref="(el) => setVideoRef(el, index)"
+              class="w-full h-[281px] object-cover rounded-[16px]"
+              width="640"
+              height="360"
+              preload="metadata"
+          >
+            <source :src="`${card.video}#t=2`" />
+          </video>
+          <PlayButton
+              v-if="!isPlaying[index]"
+              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
+              @click="togglePlayPause(index)">
+
+          </PlayButton>
+        </div>
+        <img
+            v-else
+            :src="card.image"
+            alt="Card Image"
+            class="w-full h-[281px] object-cover rounded-[16px] mb-4"
+        />
+        <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
+                v-for="tag in card.categories"
+                :key="tag"
+                class="border px-2 py-0.5 rounded-[6px] text-sm"
+                :class="{
+                'bg-navy-50 border-navy-200 text-navy-700': tag.style === 'navy',
+                'bg-brand-50 border-brand-200 text-brand-700': tag.style === 'brand',
+                'bg-orange-50 border-orange-200 text-orange-700': tag.style === 'orange',
+              }"
+            >
+              {{ tag.name }}
+            </span>
+          </div>
+          <a
+              v-if="card?.link"
+              :href="card.link"
+              class="text-gray-900 text-lg font-semibold hover:underline block mb-2 w-full"
+              target="_blank"
+              rel="noopener noreferrer"
+          >
+            <div class="flex justify-between">
+              <span class="w-5/6 leading-[28px]">{{ card.title }}</span>
+              <ArrowUpRight class="w-5 h-5 mt-1"></ArrowUpRight>
+            </div>
+          </a>
+          <p class="text-gray-500 text-sm mb-4">{{ card.dateTime }}</p>
+        </div>
+      </div>
+    </div>
+    <div v-if="Object.keys(button).length && button?.show" class="flex justify-center">
+      <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="button.url"
+          :target="button.is_new_tab ? '_blank' : ''"
+      >
+        {{ button.title }}
+        <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+import PlayButton from "@/assets/svg/play.svg";
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+});
+
+let items = [];
+if (props.component.type === 'news_grid') {
+  items = [...props.component.content?.items || []];
+} else {
+  items = [...props.component?.data || []];
+}
+
+const button = props.component.button || {};
+
+const isPlaying = ref(items.map(() => false));
+const videoRefs = ref(items.map(() => null));
+
+const togglePlayPause = (index) => {
+  const video = videoRefs.value[index];
+  if (!video) return;
+
+  if (video.paused) {
+    video.play();
+    isPlaying.value[index] = true;
+  } else {
+    video.pause();
+    isPlaying.value[index] = false;
+  }
+};
+
+const setVideoRef = (el, index) => {
+  if (el) {
+    videoRefs.value[index] = el;
+  }
+};
+</script>
+
+<style scoped>
+.card {
+  @apply flex flex-col items-center text-center;
+}
+</style>

package/src/components/presenters/components/VHeaderPresenter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col" :class="{'items-center': component?.center}">
+  <div class="flex flex-col sm:px-0 px-4" :class="{'items-center': component?.center}">
     <p
         v-if="component?.title"
         class="pb-4 text-4xl font-semibold text-white"
@@ -8,7 +8,7 @@
     <p
         v-if="component?.supporting_text"
         class="text-navy-25 text-xl font-normal leading-[30px]"
-        :class="{'!text-navy-900': component?.dark}"
+        :class="{'!text-gray-600': component?.dark}"
     >
       {{ component?.supporting_text }}</p>
   </div>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1400px] mx-auto w-full pt-[40px]">
+      <template v-for="(component, index) in section.components" :key="index">
+        <component
+            :is="currentComponent(component)"
+            :component="component"
+        ></component>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, markRaw } from "vue";
+import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
+import VCollectionGridPresenter from "@/components/presenters/components/VCollectionGridPresenter.vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const componentMaps = ref({
+  header: markRaw(VHeaderPresenter),
+  news_grid: markRaw(VCollectionGridPresenter),
+  video_grid: markRaw(VCollectionGridPresenter),
+});
+
+const currentComponent = (component) => {
+  if (!component?.type) {
+    return '';
+  }
+
+  return componentMaps.value[component?.type];
+};
+
+</script>

package/tailwind.config.js

@@ -55,6 +55,11 @@ module.exports = {
           600: '#D92D20',
           700: 'rgba(180, 35, 24, 1)',
         },
+        orange: {
+          700: '#B93815',
+          200: '#F9DBAF',
+          50: '#FEF6EE',
+        },
         warning: {
           50: 'rgba(255, 250, 235, 1)',
           200: 'rgba(254, 223, 137, 1)',