@dcodegroup-au/page-builder 0.3.1 → 0.3.3

package/example/src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {Home} from "./pages/Home.js";
 import {BestLife} from "./pages/BestLife.js";
+import {AboutUs} from "./pages/AboutUs.js";
 
 const slide = {
   title: "About ELAA",
@@ -86,7 +87,7 @@ const breadcrumbs = [
   <div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="Home"/>
+      <PageRender :page="AboutUs"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -102,7 +103,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="BestLife" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="AboutUs" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/AboutUs.js

@@ -0,0 +1,130 @@
+export const AboutUs = {
+  title: "About us",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "About us",
+          supporting_text_max_length: 500,
+          supporting_text: "ELAA is the national peak body championing excellence in early learning for children and supporting parents and service. For over 30 years Early Learning Association Australia (ELAA) has been working with parents and early learning providers toward a shared vision of excellence in early learning for every child.",
+        },
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Support Services",
+          icon: "AlertCircle",
+          has_extra: false,
+          supporting_text: "ELAA has developed a grass roots understanding of the value and challenges presented by early childhood education. We share our members’ passion for delivering excellence in early learning to children before they commence school, and we help them to do this by providing professional support and resources on a wide range of matters including:",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "Read more about our history",
+            },
+            {
+              title: "Read more about our history 2",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Support Services",
+          icon: "AlertCircle",
+          featured_image: "https://beta.elaa.org.au/img/what-we-do/best-start-best-life/divided-01.jpg"
+       },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "Through our advocacy work ELAA provides a voice for parents and service-providers alike; a voice that is clearly heard and respected by policy makers, thanks to our understanding of government, relationships with early learning sector stakeholders, and our advocacy experience. ",
+            },
+            {
+              title: "We work with members, peak bodies, Commonwealth, State and local governments, and other stakeholders to promote and support quality, accessibility and affordability of early childhood services.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Support Services",
+          icon: "AlertCircle",
+          supporting_text: "ELAA has developed a grass roots understanding of the value and challenges presented by early childhood education. We share our members’ passion for delivering excellence in early learning to children before they commence school, and we help them to do this by providing professional support and resources on a wide range of matters including:",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 4",
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/package.json

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

package/src/components/PageBuilder.vue

@@ -135,6 +135,7 @@ const componentMaps = ref({
   paragraph: markRaw(VParagraph),
   image_block: markRaw(VImageBlock),
   timeline_items: markRaw(VItems),
+  bullet_points: markRaw(VLinks),
   link_cards: markRaw(VItems),
 });
 

package/src/components/PageRender.vue

@@ -23,6 +23,7 @@ import TwoColumnsImageContent from "@/components/presenters/modules/TwoColumnsIm
 import Timeline from "@/components/presenters/modules/Timeline.vue";
 import LinkCard from "@/components/presenters/modules/LinkCard.vue";
 import LinkList from "@/components/presenters/modules/LinkList.vue";
+import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
 
 const props = defineProps({
   page: {
@@ -44,6 +45,7 @@ const componentMaps = ref({
   timeline: markRaw(Timeline),
   link_card: markRaw(LinkCard),
   link_list: markRaw(LinkList),
+  bullet_points: markRaw(BulletPoints),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/Header.vue

@@ -4,24 +4,35 @@
       {{ dataRef.name }}
     </p>
     <div class="flex flex-col gap-4  rounded-xl py-5" :class="{'bg-gray-50 px-0': dataRef?.has_extra, 'bg-gray-200 px-6': !dataRef?.hasOwnProperty('has_extra')}">
-      <input-wrapper
-          v-if="dataRef.hasOwnProperty('title')"
-          is-vertical
-          field="title"
-          label-text="Title *"
-          class="w-full mb-4"
-          :value="dataRef.title"
-          :limit="51"
-      >
-        <input
-            v-model="dataRef.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>
+      <div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}">
+        <input-wrapper
+            v-if="dataRef.hasOwnProperty('icon')"
+            is-vertical
+            field="icon"
+            label-text="Icon *"
+            :value="dataRef.icon"
+        >
+          <IconSelector id="icon" v-model="dataRef.icon" />
+        </input-wrapper>
+        <input-wrapper
+            v-if="dataRef.hasOwnProperty('title')"
+            is-vertical
+            field="title"
+            label-text="Title *"
+            class="w-full mb-4"
+            :value="dataRef.title"
+            :limit="51"
+        >
+          <input
+              v-model="dataRef.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>
+      </div>
       <input-wrapper
           is-vertical
           v-if="dataRef.hasOwnProperty('supporting_text')"
@@ -31,7 +42,7 @@
           :value="dataRef.supporting_text"
           :limit="dataRef.supporting_text_max_length ?? 100"
       >
-        <input
+        <textarea
             v-model="dataRef.supporting_text"
             name="supporting_text"
             type="text"
@@ -61,6 +72,7 @@
 import {ref, inject} from "vue";
 import {defaultProps} from "@/components/helpers/defaultProps";
 import Card from "@/components/common/Card.vue";
+import IconSelector from "@/components/common/IconSelector.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
 import VButton from "@/components/common/Button.vue";
@@ -78,5 +90,4 @@ const props = defineProps({
 });
 
 const dataRef = ref(props.data.component);
-console.log(dataRef)
 </script>

package/src/components/builders/Items.vue

@@ -6,7 +6,7 @@
       </p>
     </div>
     <div class="flex flex-col gap-4">
-      <div class="text-gray-600 border-b border-gray-200 pb-4 text-sm">
+      <div class="text-gray-600 border-b border-gray-200 pb-4 text-sm" v-if="dataRef.hasOwnProperty('supportive_text')">
         {{ dataRef.supportive_text }}
       </div>
       <div class="flex flex-col gap-3">

package/src/components/builders/Links.vue

@@ -31,7 +31,7 @@
       >
         <div class="flex items-center justify-between">
           <div class="text-lg font-semibold text-gray-900">
-            Link #{{ index + 1 }}
+            Item #{{ index + 1 }}
           </div>
           <div class="relative flex items-end">
             <ActionMenu @removeItem="handleDeleteItem(index)"/>
@@ -45,18 +45,19 @@
                 label-text="Title *"
                 class="w-full mb-4"
                 :value="item.title"
-                :limit="20"
+                :limit="componentData?.max_title ?? 20"
             >
               <input
                   v-model="item.title"
                   name="title"
                   type="text"
                   placeholder="Title"
-                  :maxlength="20"
+                  :maxlength="componentData?.max_title ?? 20"
                   class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
               />
             </input-wrapper>
             <linked-to
+                v-if="item.hasOwnProperty('type')"
                 label="Linked to"
                 :name="`link_${index + 1}`"
                 v-model:type="item.type"
@@ -72,7 +73,7 @@
   <VModal ref="modalRef" entity="link" :callback="deleteCallback"></VModal>
 </template>
 <script setup>
-import {ref, nextTick} from "vue";
+import {ref, nextTick, computed} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
 import {defaultProps} from "@/components/helpers/defaultProps";
 import {createLink} from "@/components/helpers/pageBuilderFactory";
@@ -92,6 +93,10 @@ const modalRef = ref(null);
 const lastItemRef = ref(null);
 const deleteItemIndex = ref(null);
 
+const isBulletPoint = computed(() => {
+  return componentData.value.type === 'bullet_points';
+});
+
 function addItem() {
   if (!componentData.value.hasOwnProperty('data')) {
     componentData.value.data = [];
@@ -100,7 +105,7 @@ function addItem() {
   if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data?.push(createLink());
+  componentData.value.data?.push(createLink({}, isBulletPoint));
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/common/IconSelector.vue

@@ -69,16 +69,25 @@ export default {
 </script>
 
 <script setup>
-import {ref, watch, onMounted} from "vue";
+import {ref, watch, onMounted, defineEmits} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
 import IconComponent from "./Icon.vue";
 import iconsData from "@/assets/icons.json";
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+});
 
-const model = ref(null);
+const model = ref(props.modelValue);
 const search = ref("");
 const icons = ref([]);
 const isDropdownOpen = ref(false);
 
+const emit = defineEmits(["update:modelValue"]);
+
+
 function toggleDropdown() {
   isDropdownOpen.value = !isDropdownOpen.value;
 }
@@ -91,6 +100,7 @@ watch(search, (value) => {
 
 function update(event) {
   model.value = event;
+  emit('update:modelValue', model.value);
   isDropdownOpen.value = false; // Close dropdown after selection
 }
 

package/src/components/common/LinkedTo.vue

@@ -42,7 +42,7 @@ const openInNewTab = defineModel("openInNewTab");
 
 defineProps({
   label: { type: String, required: false },
-  sites: { type: Object, required: true },
+  sites: { type: Array, required: true },
   name: { type: String, required: true },
   options: { type: Array, required: false, default: ["site-content", "external-page", 'download'] },
 });

package/src/components/helpers/pageBuilderFactory.js

@@ -34,7 +34,12 @@ export function createItem(overrides = {}, withSecondary = true) {
   };
 }
 
-export function createLink(overrides = {}) {
+export function createLink(overrides = {}, isBulletPoint = false) {
+  if (isBulletPoint) {
+    return {
+      title: "New link",
+    };
+  }
   return {
     title: "New link",
     url: "",

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="overflow-hidden">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]" :class="{'flex gap-8': headerComponent?.featured_image}">
+      <img v-if="headerComponent?.featured_image"
+           :src="headerComponent?.featured_image"
+           class="w-[480px] object-contain rounded-[24px]"
+           alt="Feature"/>
+      <div v-if="headerComponent">
+        <div v-if="headerComponent?.icon" class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
+          <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
+        </div>
+        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]" v-html="headerComponent.supporting_text"></p>
+        <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}">
+          <div v-for="item in bulletPointsComponent.data" class="flex">
+            <div class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
+              <CheckIcon class="w-4 h-4"></CheckIcon>
+            </div>
+            <p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+import CheckIcon from "@/assets/img/icons/check.svg";
+import IconComponent from "@/components/common/Icon.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 bulletPointsComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "bullet_points");
+});
+</script>

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

@@ -1,24 +1,22 @@
 <template>
-  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
+  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full md:px-8">
     <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
-         class="md:px-[90px] bg-navy-50 rounded-[48px] relative mb-[64px] pt-[164px]"
-         :class="{'flex flex-col items-center text-center': section.components[0]?.center}">
-      <h3 class="text-[48px] font-semibold text-gray-900 w-1/2">{{ section.components[0].title }}</h3>
-      <h3 class="text-xl font-normal text-gray-600 mt-3 w-1/2">{{ section.components[0].supporting_text }}</h3>
+         class="md:px-[90px] bg-navy-50 rounded-[48px] relative pt-[164px]"
+         :class="{'flex flex-col items-center text-center': section.components[0]?.center, 'mb-[64px]': hasFeaturedImage}">
+      <h3 class="text-[48px] font-semibold text-gray-900 w-2/3">{{ section.components[0].title }}</h3>
+      <h3 class="text-xl font-normal text-gray-600 mt-3 w-2/3" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
       <img
-          v-if="section?.components[0]?.featured_image"
+          v-if="hasFeaturedImage"
           :src="section.components[0]?.featured_image"
           alt="Card Image"
           class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
       />
-      <img v-else class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
-           src="@/assets/img/no_image_available.jpeg">
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, computed} from "vue";
 
 const props = defineProps({
   section: {
@@ -28,5 +26,8 @@ const props = defineProps({
 });
 
 const section = ref(props.section);
+const hasFeaturedImage = computed(() => {
+  return section.value?.components[0]?.hasOwnProperty('featured_image');
+});
 
 </script>