@dcodegroup-au/page-builder 0.1.1 → 0.1.2

package/example/src/App.vue

@@ -4,12 +4,10 @@ const page = {
   title: "Page Builder",
   sections: [
     {
-      id: 1,
       title: "Hero header",
       type: "header",
       components: [
         {
-          id: 1,
           name: "Sliders",
           type: "sliders",
           supportive_text: "Manage the slides in the slider.",
@@ -99,7 +97,6 @@ const page = {
           ]
         },
         {
-          id: 2,
           name: "Links",
           type: "links",
           supportive_text: "Manage the slides in the slider.",
@@ -122,12 +119,10 @@ const page = {
       ]
     },
     {
-      id: 2,
       title: "Logo cloud",
       type: "logo",
       components: [
         {
-          id: 1,
           name: "Section header",
           type: "header",
           is_public: true,
@@ -140,74 +135,126 @@ const page = {
       ]
     },
     {
-      id: 3,
       title: "Vertical tabs module",
-      type: "tab_module",
+      type: "tabs",
       components: [
         {
-          id: 1,
           name: "Section header",
           type: "header",
-          is_public: true,
+          title: 'Rich with resources',
+          center: true,
+          dark: true,
+          supporting_text: 'Comprehensive free and paid resources covering every aspect of early childhood education.',
         },
         {
-          id: 2,
           name: "Vertical tabs",
           type: "vertical_tabs",
+          supportive_text: "Manage the tabs",
+          max_items: 5,
+          public: true,
+          data: [
+            {
+              title: "Free Downloadable Resources",
+              description: "Explore a variety of no-cost tools and information available to everyone.",
+              public: true,
+              featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png',
+              primary_button: {
+                show: true,
+                name: 'Linked to',
+                label: 'View all',
+                url: 'google.com', // external could be an url
+                type: 'external-page',
+                is_new_tab: true,
+              },
+            },
+            {
+              title: "Paid Resources & Subscriptions",
+              description: "Access premium content and exclusive materials with our subscription services.",
+              public: true,
+              featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_paid_resources.png',
+              primary_button: {
+                show: true,
+                name: 'Linked to',
+                label: 'View all',
+                url: 'google.com', // external could be an url
+                type: 'external-page',
+                is_new_tab: true,
+              },
+            },
+            {
+              title: "Video Library",
+              description: "Watch quick, informative videos (10-15 mins each) available for free.",
+              public: true,
+              featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_video.png',
+              primary_button: {
+                show: true,
+                name: 'Linked to',
+                label: 'View all',
+                url: 'google.com', // external could be an url
+                type: 'external-page',
+                is_new_tab: true,
+              },
+            },
+            {
+              title: "Self-paced Modules",
+              description: "Engage with our flexible, on-demand training modules at your own pace.",
+              public: true,
+              featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_self_paced.png',
+              primary_button: {
+                show: true,
+                name: 'Linked to',
+                label: 'View all',
+                url: 'google.com', // external could be an url
+                type: 'external-page',
+                is_new_tab: true,
+              },
+            },
+          ]
         }
       ]
     },
     {
-      id: 4,
       title: "Collection grid",
       type: "collection_grid",
       components: [
         {
-          id: 1,
           name: "Section header",
           type: "header",
-          is_public: true,
+          title: 'Services',
+          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
         },
         {
-          id: 2,
           name: "Grid",
           type: "grid",
         }
       ]
     },
     {
-      id: 4,
       title: "Collection carousel",
       type: "collection_carousel",
       components: [
         {
-          id: 1,
           name: "Section header",
           type: "header",
-          is_public: true,
+          title: 'Services',
+          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
         },
         {
-          id: 2,
           name: "Carousel",
           type: "carousel",
         }
       ]
     },
     {
-      id: 4,
       title: "Quick links",
       type: "quick_links",
       components: [
         {
-          id: 1,
-          name: "Section header",
           type: "header",
-          is_public: true,
           title: 'Services',
           supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
         },
         {
-          id: 2,
           name: "Link grid",
           type: "link_grid",
           supportive_text: "This section can contain up to 10 links.",
@@ -271,14 +318,29 @@ const slide = {
   },
 }
 
+const tab = {
+  title: "Free Downloadable Resources",
+  description: "Explore a variety of no-cost tools and information available to everyone.",
+  public: true,
+  featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png',
+  primary_button: {
+    show: true,
+    name: 'Linked to',
+    label: 'View all',
+    url: 'google.com', // external could be an url
+    type: 'external-page',
+    is_new_tab: true,
+  },
+}
+
 const sites = [
   {
     name: "Site 1",
-    url: "/site-1",
+    href: "/site-1",
   },
   {
     name: "Site 2",
-    url: "/site-2",
+    href: "/site-2",
   }
 ]
 </script>
@@ -291,7 +353,11 @@ const sites = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
-      <SlideEdit :slide="slide" :sites="sites"/>
+      <ItemEdit :item="slide" :sites="sites"/>
+    </div>
+    <div style="margin: 40px 0">
+      <h1 style="margin-bottom: 20px; font-size: 50px;">Vertical Tab Edit</h1>
+      <ItemEdit :item="tab" :sites="sites"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>

package/example/src/main.js

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
 
 import App from './App.vue'
-import { PageBuilder, SlideEdit, PageRender } from '../../dist/page-builder.es.js'
+import { PageBuilder, ItemEdit, PageRender } from '../../dist/page-builder.es.js'
 import '../../dist/page-builder.css'
 
 const app = createApp(App)
-app.component('SlideEdit', SlideEdit)
+app.component('ItemEdit', ItemEdit)
 app.component('PageBuilder', PageBuilder)
 app.component('PageRender', PageRender)
 

package/package.json

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

package/src/assets/css/style.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.page-builder, .page-render, .slide-edit {
+.page-builder, .page-render, .item-edit {
     [type="text"],
     [type="email"],
     [type="url"],

package/src/components/{SlideEdit.vue → ItemEdit.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="slide-edit">
+  <div class="item-edit">
     <div class="flex items-start gap-4 px-6 pt-4 h-full">
       <div class="flex flex-1 flex-col gap-4">
         <card title="Description">
@@ -33,7 +33,7 @@
             </input-wrapper>
           </div>
         </card>
-        <card title="Primary button">
+        <card  v-if="form.hasOwnProperty('primary_button')" :title="item?.primary_button?.name ?? 'Primary button'">
           <div class="flex flex-col gap-8">
             <VToggle name="show" v-model="form.primary_button.show"  title="Show Button" />
             <input-wrapper
@@ -62,7 +62,7 @@
             />
           </div>
         </card>
-        <card title="Secondary button">
+        <card v-if="form.hasOwnProperty('secondary_button')" :title="item?.secondary_button?.name ?? 'Secondary button'">
           <div class="flex flex-col gap-4">
             <VToggle name="show" v-model="form.secondary_button.show"  title="Show Button" />
             <template v-if="form.secondary_button?.show">
@@ -132,7 +132,7 @@ import axios from "axios";
 const emit = defineEmits(["update"]);
 
 const props = defineProps({
-  slide: {
+  item: {
     type: Object,
     required: true,
   },
@@ -151,19 +151,25 @@ const props = defineProps({
 });
 
 const form = ref({
-  public: props.slide.public,
-  description: props.slide.description,
-  featured_image: props.slide.featured_image,
-  primary_button: props.slide.primary_button,
-  secondary_button: props.slide.secondary_button,
-  title: props.slide.title,
+  public: props.item.public,
+  title: props.item.title,
+  description: props.item.description,
+  featured_image: props.item.featured_image,
 });
 
+if (props.item.hasOwnProperty('primary_button')) {
+  form.value.primary_button = props.item.primary_button;
+}
+
+if (props.item.hasOwnProperty('secondary_button')) {
+  form.value.secondary_button = props.item.secondary_button;
+}
+
 const save = () => {
   emit("update", form.value);
 
   if (props.saveEndpoint) {
-    axios.post(props.saveEndpoint, form.value).then(() => {
+    axios.post(props.saveEndpoint, form.value).then (() => {
       if (props.cancelEndpoint) {
         window.location.href = props.cancelEndpoint;
       }

package/src/components/PageBuilder.vue

@@ -67,7 +67,7 @@ import { ref, markRaw, computed } from "vue";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 import ChevronDown from "@/assets/img/icons/chevron-down.svg";
 import Instructions from "@/components/builders/Instructions.vue";
-import VSliders from "@/components/builders/VSliders.vue";
+import VItems from "@/components/builders/VItems.vue";
 import VLinks from "@/components/builders/VLinks.vue";
 import VHeader from "@/components/builders/VHeader.vue";
 
@@ -89,7 +89,8 @@ const openStates = ref(JSON.parse(window.localStorage.getItem("pageBuilderOpenSt
 const sections = ref(props.modelValue?.sections ?? []);
 let selected = ref(null);
 const componentMaps = ref({
-  sliders: markRaw(VSliders),
+  sliders: markRaw(VItems),
+  vertical_tabs: markRaw(VItems),
   links: markRaw(VLinks),
   header: markRaw(VHeader),
   link_grid: markRaw(VLinks),

package/src/components/PageRender.vue

@@ -13,6 +13,7 @@
 import {ref, markRaw} from "vue";
 import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
 import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
+import VTabs from "@/components/presenters/modules/VTabs.vue";
 
 const props = defineProps({
   page: {
@@ -24,6 +25,7 @@ const props = defineProps({
 const componentMaps = ref({
   header: markRaw(HeroHeader),
   quick_links: markRaw(QuickLinks),
+  tabs: markRaw(VTabs),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/{VSliders.vue → VItems.vue}

@@ -11,8 +11,8 @@
     <div class="flex flex-col gap-3">
       <div class="flex justify-between">
         <div class="flex flex-col gap-1">
-          <div class="font-semibold text-gray-900">Sliders</div>
-          <div class="text-sm text-gray-600">This slider can contain up to {{ dataRef.max_items }} slides</div>
+          <div class="font-semibold text-gray-900">{{ parseName(type) }}</div>
+          <div class="text-sm text-gray-600">This {{ singularize(type) }} can contain up to {{ dataRef.max_items }} {{ parseName(type, false) }}</div>
         </div>
         <div>
           <button
@@ -34,7 +34,7 @@
           <div class="flex flex-1 items-center justify-between relative" @click="toggleSlide(index);">
             <div class="flex flex-1 flex-col cursor-pointer" @click="edit(item, index)">
               <div class="text-xs text-gray-600">
-                Slider #{{ index + 1 }}
+                {{ singularize(parseName(type))  }} #{{ index + 1 }}
               </div>
               <div class="text-sm font-medium text-gray-900">
                 {{ item.title }}
@@ -46,13 +46,14 @@
       </div>
     </div>
   </div>
-  <VModal ref="modalRef" entity="slide" :callback="deleteCallback"></VModal>
+  <VModal ref="modalRef" :entity="singularize(type)" :callback="deleteCallback"></VModal>
 </template>
 <script setup>
 import {ref} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
-import {defaultProps} from "@/components/helpers/defaultProps.js";
-import { createSlide } from "@/components/helpers/pageBuilderFactory.js";
+import { defaultProps } from "@/components/helpers/defaultProps";
+import { singularize, parseName } from "@/components/helpers/common";
+import { createSlide } from "@/components/helpers/pageBuilderFactory";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import VModal from "@/components/common/VModal.vue";
 
@@ -62,6 +63,7 @@ const props = defineProps({
 });
 
 const dataRef = ref(props.data.component);
+const type = dataRef.value.type;
 const modalRef = ref(null);
 
 const openSlideStates = ref(JSON.parse(window.localStorage.getItem("openSlideStates")));

package/src/components/builders/VLinks.vue

@@ -13,7 +13,7 @@
         <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 }"
+            :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>
@@ -72,7 +72,7 @@
 <script setup>
 import {ref, nextTick} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
-import {defaultProps} from "@/components/helpers/defaultProps.js";
+import {defaultProps} from "@/components/helpers/defaultProps";
 import {createLink} from "@/components/helpers/pageBuilderFactory";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
@@ -91,10 +91,14 @@ const lastItemRef = ref(null);
 const deleteItemIndex = ref(null);
 
 function addItem() {
-  if (componentData.value.data.length >= componentData.value.max_items) {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data.push(createLink());
+  componentData.value.data?.push(createLink());
 
   nextTick(() => {
     if (lastItemRef.value) {
@@ -111,7 +115,7 @@ const handleDeleteItem = (index) => {
 }
 
 const deleteCallback = (index) => {
-  componentData.value.data.splice(index, 1);
+  componentData.value.data?.splice(index, 1);
   emit("update", false);
 };
 </script>

package/src/components/helpers/common.js

@@ -0,0 +1,61 @@
+export function pluralize(word, capitalizeFirst = false) {
+  const irregularPlurals = {
+    child: "children",
+    person: "people",
+    mouse: "mice",
+    foot: "feet",
+    tooth: "teeth",
+    goose: "geese",
+  };
+
+  let pluralWord = irregularPlurals[word] || `${word}s`;
+
+  if (capitalizeFirst) {
+    pluralWord = pluralWord.charAt(0).toUpperCase() + pluralWord.slice(1);
+  }
+
+  return pluralWord;
+}
+
+export function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function singularize(word, capitalizeFirst = false) {
+  const irregularSingulars = {
+    children: "child",
+    people: "person",
+    mice: "mouse",
+    feet: "foot",
+    teeth: "tooth",
+    geese: "goose",
+  };
+
+  word = word.replace(/_/g, ' ');
+
+  // Check if the word is in the irregular singulars dictionary
+  let singularWord = Object.keys(irregularSingulars).find(
+    (plural) => plural === word
+  )
+    ? irregularSingulars[word]
+    : word.endsWith("s")
+      ? word.slice(0, -1) // Remove the trailing "s" for regular pluralization
+      : word;
+
+  // Capitalize the first letter if the option is enabled
+  if (capitalizeFirst) {
+    singularWord = singularWord.charAt(0).toUpperCase() + singularWord.slice(1);
+  }
+
+  return singularWord;
+}
+
+export function parseName(str, capitalizeFirst = true) {
+  if (!str) return '';
+  const lastWord = str.split('_').pop();
+  if (capitalizeFirst) {
+    return capitalize(lastWord);
+  }
+
+  return lastWord;
+}

package/src/components/index.js

@@ -1,6 +1,6 @@
 import '@/assets/css/style.css';
 import PageBuilder from './PageBuilder.vue';
 import PageRender from './PageRender.vue';
-import SlideEdit from './SlideEdit.vue';
+import ItemEdit from './ItemEdit.vue';
 
-export { PageBuilder, PageRender, SlideEdit };
+export { PageBuilder, PageRender, ItemEdit };

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

@@ -1,12 +1,21 @@
 <template>
-  <div class="flex flex-col">
-    <p v-if="component?.title" class="pb-4 text-4xl font-semibold text-white">{{ component?.title }}</p>
-    <p v-if="component?.supporting_text" class="text-navy-25 text-xl font-normal leading-[30px]">{{ component?.supporting_text }}</p>
+  <div class="flex flex-col" :class="{'items-center': component?.center}">
+    <p
+        v-if="component?.title"
+        class="pb-4 text-4xl font-semibold text-white"
+        :class="{'!text-gray-900': component?.dark}"
+    >{{ component?.title }}</p>
+    <p
+        v-if="component?.supporting_text"
+        class="text-navy-25 text-xl font-normal leading-[30px]"
+        :class="{'!text-navy-900': component?.dark}"
+    >
+      {{ component?.supporting_text }}</p>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import {ref} from "vue";
 
 const props = defineProps({
   component: {

package/src/components/presenters/components/VLinkPresenter.vue

@@ -3,7 +3,7 @@
     <div class="flex justify-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
       <a
           :target="link.open_in_new_tab ? '_blank' : ''"
-          :href="link.url"
+          :href="`/${link.url}`"
           class="text-white flex gap-1.5 items-center cursor-pointer mt-12 text-sm font-semibold hover:text-gray-300"
           :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}"
       >

package/src/components/presenters/components/VVerticalTabPresenter.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6">
+    <!-- Left Column: Links -->
+    <div class="flex-1 w-full md:w-1/2 flex flex-col">
+      <div v-for="item in publicTabs" :key="item.title">
+        <div
+            class="flex-col flex gap-1.5 cursor-pointer hover:bg-navy-50 mb-4 group"
+            :class="{'border-l-4 border-brand-600': selectedItem === item}"
+            @click.prevent="selectItem(item)"
+        >
+          <div class="py-4 pl-4 md:pl-6">
+            <p
+                :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
+                class="text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"
+            >
+              {{ item.title }}
+            </p>
+            <p
+                :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
+                class="text-sm md:text-md font-normal group-hover:text-gray-700"
+            >
+              {{ item.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column: Image and Button -->
+    <div class="flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center">
+      <transition name="fade" mode="out-in">
+        <div class="flex flex-col items-center" :key="selectedItem?.title">
+          <img
+              v-if="selectedItem?.featured_image"
+              :src="selectedItem.featured_image"
+              alt="Selected Item Image"
+              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"/>
+          <img
+              v-else
+              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
+              src="@/assets/img/no_image_available.jpeg"
+              alt="No Image Available">
+          <a
+              v-if="selectedItem?.primary_button?.show"
+              class="text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4"
+              :target="selectedItem?.primary_button?.is_new_tab ? '_blank' : ''"
+              :href="selectedItem?.primary_button?.url">
+            {{ selectedItem?.primary_button?.label ?? 'N/A' }}
+            <ArrowUpRight class="w-4 h-4 md:w-5 md:h-5" />
+          </a>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+});
+
+const component = ref(props.component);
+const selectedItem = ref(null);
+
+// Filter to get only public tabs
+const publicTabs = ref(component.value.data.filter((item) => item.public));
+
+// Method to select an item
+const selectItem = (item) => {
+  selectedItem.value = item;
+};
+
+// Preselect the first public item on component mount
+onMounted(() => {
+  if (publicTabs.value.length > 0) {
+    selectItem(publicTabs.value[0]);
+  }
+});
+</script>