@dcodegroup-au/page-builder 0.5.6 → 0.5.8

package/example/src/App.vue

@@ -11,6 +11,7 @@ import {PartnerWithUs} from "./pages/PartnerWithUs.js";
 import {OurGroups} from "./pages/OurGroups.js";
 import {Vectea2024} from "./pages/Vectea2024.js";
 import {AdvocaryAndResearch} from "./pages/AdvocaryAndResearch.js";
+import {SAEW} from "./pages/SAEW.js";
 
 const slide = {
   title: "About ELAA",
@@ -86,6 +87,18 @@ const sites = [
   }
 ]
 
+const forms = [
+  {
+    name: "Form 1",
+    value: 1,
+  },
+  {
+    name: "Form 2",
+    value: 2,
+  }
+]
+
+
 const breadcrumbs = [
   'Site 1',
   'Site 2',
@@ -94,10 +107,10 @@ const breadcrumbs = [
 
 <template>
   <div>
-    {{ JSON.stringify(Vectea2024) }}
+    {{ JSON.stringify(SAEW) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="AdvocaryAndResearch"/>
+      <PageRender :page="SAEW"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -113,7 +126,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="AdvocaryAndResearch" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="SAEW" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>
     </div>
   </div>
 </template>

package/example/src/pages/SAEW.js

@@ -0,0 +1,273 @@
+export const SAEW =
+  {
+  title: "Advocacy and Research",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "SAEW 2024",
+          supporting_text_max_length: 500,
+          supporting_text: "The Victorian Early Childhood Teachers and Educators Agreement (VECTEA) is an enterprise agreement that applies to early childhood teachers and educators employed in kindergarten education programs in Victoria.",
+        },
+      ]
+    },
+    {
+      title: "Paragraph section",
+      type: "paragraph",
+      revert: true,
+      components: [
+        {
+          name: "Paragraph section",
+          type: "paragraph",
+          title: "SAEW Project Case Studies",
+          paragraph: '<p>The Victorian Government’s Best Start, Best Life reforms represent the most substantial transformation in Victoria’s early childhood sector in a generation. As part of these reforms:</p><ol><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.</li><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.</li></ol>',
+          upload_title: 'Featured video',
+          featured_image: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
+          source_type: 'video',
+          button: {
+            title: 'Register Now',
+            selected: 'google.com', // external could be an url
+            type: 'form',
+            open_in_new_tab: true,
+            show: true,
+          },
+        },
+      ]
+    },
+    {
+      title: "Link card section",
+      type: "link_card",
+      display: "vertical",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "ELAA Supports",
+          supporting_text: "Excellence and equity in early childhood education and care",
+        },
+        {
+          name: "Link cards",
+          type: "link_cards",
+          supportive_text: "Manage the link cards.",
+          max_items: 4,
+          data: [
+            {
+              title: "Read more about our history",
+              description: "Read more about our history",
+              icon: "AlertCircle",
+              public: true,
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Join ELAA',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: false,
+              }
+            },
+            {
+              title: "Read more about our history",
+              description: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: '', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+            {
+              title: "Read more about our history",
+              description: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: '', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+            {
+              title: "Read more about our history",
+              description: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Email us',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Paragraph section",
+      type: "paragraph",
+      is_full_width: true,
+      components: [
+        {
+          name: "Paragraph section",
+          type: "paragraph",
+          title: "Background",
+          paragraph: '<div class="flex flex-col gap-3" bis_skin_checked="1"></div><p class="text-gray-600 text-lg"> To address workforce capacity and capability constraints in the ECEC sector, the Victorian Government has allocated funding for the Skilling an Adaptable Early Childhood Education and Care Workforce (SAEW) project. </p><p class="text-gray-600 text-lg"> With this funding ELAA, in partnership with Gowrie Victoria and The Y Ballart, have developed a series of specialised <strong>eLearning Training Modules</strong> to ensure early childhood educators can apply their skills and training in the workplace that meets the learning and developmental needs of children and the workforce requirements of employers across the ECEC sector. </p><p class="text-gray-600 text-lg"> To complement the training modules is the <strong>SAEW Community Hub</strong> – an interactive learning platform enabling participants to share experiences and expertise, build professional networks and access additional training workshops and best practice resources to support their professional practice as an early childhood educators. </p><p class="text-gray-600 text-lg"> Through their participation in the SAEW project, early childhood educators will build new skills and peer networks that is responsive to the educational needs of children and workplace capability requirements of the ECEC sector. </p>',
+        },
+      ]
+    },
+    {
+      title: "Callout Section",
+      type: "callout",
+      components: [
+        {
+          name: "Callout Section",
+          type: "callout",
+          title: "Our Purpose",
+          has_extra: true,
+          title_label: "Eyebrow heading",
+          supporting_text_max_length: 500,
+          supporting_text: "To build meaningful, reliable, and human-centered software that solves real problems, empowers users, and advances innovation responsibly.",
+          supporting_text_label: "Message *",
+        },
+      ]
+    },
+    {
+      title: "Paragraph section",
+      type: "paragraph",
+      is_full_width: true,
+      components: [
+        {
+          name: "Paragraph section",
+          type: "paragraph",
+          title: "SAEW Project Case Studies",
+          paragraph: '<p>The Victorian Government’s Best Start, Best Life reforms represent the most substantial transformation in Victoria’s early childhood sector in a generation. As part of these reforms:</p><ol><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.</li><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.</li></ol><p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025, starting with children in six regional Victorian local government areas, and will gradually expand across the state.</p>',
+        },
+      ]
+    },
+    {
+      title: "Video grid",
+      type: "collection_grid",
+      padding_top: false,
+      components: [
+        {
+          name: "Grid",
+          type: "video_grid",
+          padding_top: false,
+          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",
+            }
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      has_background: true,
+      margin: true,
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Addressing Section Challenges",
+          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 1",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          title: "The individual topics include:",
+          max_items: 10,
+          has_type_switcher: false,
+          max_title: 500,
+          data: [
+            {
+              title: "Read more about our history 1",
+            },
+            {
+              title: "Read more about our history 2",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 4",
+            },
+          ]
+        },
+        {
+          name: "Bullet Points 2",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          title: "Under Development",
+          max_items: 10,
+          has_type_switcher: false,
+          max_title: 500,
+          data: [
+            {
+              title: "Read more about our history 1",
+            },
+            {
+              title: "Read more about our history 2",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 4",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "CTA Section",
+      type: "quick_links",
+      as_cta: true,
+      components: [
+        {
+          name: "Header",
+          type: "header",
+          title: 'Secure your spot today as places are limited!',
+          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
+        },
+        {
+          name: "CTA section",
+          type: "link_grid",
+          supportive_text: "This section can contain up to 5 links.",
+          max_items: 5,
+          data: [
+            {
+              title: "Register Now",
+              url: '/admin', // external could be an url
+              type: 'site-content',
+              open_in_new_tab: true,
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/example/src/pages/Vectea2024.js

@@ -176,7 +176,7 @@ export const Vectea2024 =
               as_item: true,
               is_editor: true,
               title: "What is an enterprise agreement? Is this the same as an award?",
-              supporting_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quaerat sed minus maiores dolorem consectetur quibusdam harum itaque deserunt at eligendi qui illum praesentium odit sit, voluptates nobis expedita?",
+              supporting_text: "<div class=\"flex flex-col gap-3\" bis_skin_checked=\"1\"></div><p class=\"text-gray-600 text-lg\"> To address workforce capacity and capability constraints in the ECEC sector, the Victorian Government has allocated funding for the Skilling an Adaptable Early Childhood Education and Care Workforce (SAEW) project. </p><p class=\"text-gray-600 text-lg\"> With this funding ELAA, in partnership with Gowrie Victoria and The Y Ballart, have developed a series of specialised <strong>eLearning Training Modules</strong> to ensure early childhood educators can apply their skills and training in the workplace that meets the learning and developmental needs of children and the workforce requirements of employers across the ECEC sector. </p><p class=\"text-gray-600 text-lg\"> To complement the training modules is the <strong>SAEW Community Hub</strong> – an interactive learning platform enabling participants to share experiences and expertise, build professional networks and access additional training workshops and best practice resources to support their professional practice as an early childhood educators. </p><p class=\"text-gray-600 text-lg\"> Through their participation in the SAEW project, early childhood educators will build new skills and peer networks that is responsive to the educational needs of children and workplace capability requirements of the ECEC sector. </p>",
             },
             {
               has_extra: true,

package/package.json

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

package/src/components/PageBuilder.vue

@@ -66,6 +66,7 @@
             :key="`${selected?.sectionIndex} - ${selected?.componentIndex} ${Math.random().toString(36).substring(2, 10)}`"
             :data="selected"
             :sites="sites"
+            :forms="forms"
             @update="save"
         ></component>
       </div>
@@ -112,6 +113,12 @@ const props = defineProps({
       return []
     }
   },
+  forms: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
   breadcrumbs: {
     type: Array,
     default: () => {

package/src/components/builders/Paragraph.vue

@@ -53,18 +53,52 @@
       >
         <QuillEditor v-model="dataRef.paragraph"/>
       </input-wrapper>
-
     </div>
     <div class="rounded-xl bg-gray-200 mt-4" v-if="dataRef.hasOwnProperty('featured_image')">
-      <card :classes="'bg-gray-200'" title="Featured Image"
+      <card :classes="'bg-gray-200'"
+            :title="dataRef?.upload_title ? dataRef.upload_title : 'Featured Image'"
             supporting_text="Recommended dimension: 1200*1060px">
         <VFileUpload
             name="image"
+            :type="dataRef?.source_type ?? 'image'"
             height="h-[395px]"
             v-model="dataRef.featured_image"
         />
       </card>
     </div>
+    <div class="rounded-xl bg-gray-200 mt-4 px-6 py-5 flex flex-col gap-4" v-if="dataRef.hasOwnProperty('button')">
+      <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+        Link To
+      </p>
+      <VToggle name="show" v-model="dataRef.button.show" title="Show Button"/>
+      <input-wrapper
+          v-if="dataRef.button"
+          is-vertical
+          field="title"
+          label-text="Button label *"
+          class="w-full mb-4"
+          :value="dataRef.button.title"
+          :limit="51"
+      >
+        <input
+            v-model="dataRef.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="dataRef?.button"
+          name="button"
+          v-model:type="dataRef.button.type"
+          v-model:url="dataRef.button.url"
+          v-model:openInNewTab="dataRef.button.open_in_new_tab"
+          :sites="sites"
+          :forms="forms"
+      />
+    </div>
   </div>
 </template>
 <script setup>
@@ -74,6 +108,8 @@ import InputWrapper from "@/components/common/InputWrapper.vue";
 import QuillEditor from "@/components/common/QuillEditor.vue";
 import Card from "@/components/common/Card.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import VToggle from "@/components/common/Toggle.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);
@@ -81,6 +117,10 @@ const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 const emit = defineEmits(["update"]);
 const props = defineProps({
   ...defaultProps,
+  forms: {
+    type: Array,
+    default: () => []
+  }
 });
 
 const dataRef = ref(props.data.component);

package/src/components/common/ItemSelect.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <label class="text-sm font-medium text-gray-700">Select an item*</label>
+    <select v-model="url" name="url">
+      <option
+          :value="item.value"
+          v-for="(item) in items">
+        {{ item.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+
+const url = defineModel("url");
+
+defineProps({
+  items: {type: Object, required: true},
+  errors: {type: Object, required: false, default: () => ({})},
+});
+</script>

package/src/components/common/LinkedTo.vue

@@ -10,14 +10,13 @@
               :value="option"
               v-model="type"
               class="checked:bg-brand-600 hover:bg-brand-600 checked:hover:bg-brand-600 focus:bg-brand-600 focus:ring-brand-600 focus:checked:bg-brand-600 rounded-full"
-              :disabled="option === 'form'"
           />
           <span>{{ toReadableWords(option) }}</span>
         </label>
       </div>
     </div>
     <div class="flex flex-col gap-2">
-      <component :is="getComponentByType(type)" v-model:url="url" v-model="url" :sites="sites"/>
+      <component :is="getComponentByType(type)" v-model:url="url" :sites="sites" :items="forms"/>
       <input type="hidden" name="url" :value="url" />
     </div>
     <div class="flex items-center gap-2">
@@ -32,6 +31,7 @@ import VToggle from "@/components/common/Toggle.vue";
 import SiteContent from "@/components/common/SiteContent.vue";
 import ExternalPage from "@/components/common/ExternalPage.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
+import ItemSelect from "@/components/common/ItemSelect.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);
@@ -42,9 +42,10 @@ const openInNewTab = defineModel("openInNewTab");
 
 defineProps({
   label: { type: String, required: false },
-  sites: { type: Array, required: true },
+  sites: { type: Array, required: false, default: () => []}, // Todo refactor sites to items as generic usage
+  forms: { type: Array, required: false, default: () => []},
   name: { type: String, required: true },
-  options: { type: Array, required: false, default: ["site-content", "external-page", 'download'] },
+  options: { type: Array, required: false, default: ["site-content", "external-page", 'download', 'form'] },
 });
 
 const toReadableWords = (input) => {
@@ -60,6 +61,7 @@ const getComponentByType = (type) => {
     "site-content": SiteContent,
     "external-page": ExternalPage,
     "download": VFileUpload,
+    "form": ItemSelect,
   };
   return components[type] || null;
 };

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]">
+  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
     <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">
@@ -26,7 +26,7 @@
             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">
+        <img v-else class="w-full h-[281px] object-cover rounded-[16px] mb-4" alt="No Available" 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

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

@@ -19,15 +19,17 @@
             <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>
-          <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}"
-               v-if="bulletPointsComponent">
-            <p v-if="bulletPointsComponent?.title" v-text="bulletPointsComponent.title" class="font-semibold text-[20px]"></p>
-            <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 v-for="bullet in bulletPointsComponents" class="mt-8">
+            <p v-if="bullet?.title" v-text="bullet.title" class="font-semibold text-[20px] mb-4"></p>
+            <div class="flex flex-col gap-4"
+                 :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}">
+              <div v-for="item in bullet.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>
-              <p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
             </div>
           </div>
         </div>
@@ -54,8 +56,8 @@ 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");
+const bulletPointsComponents = computed(() => {
+  return section.value.components.filter((component) => component.type === "bullet_points");
 });
 
 onMounted(() => {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-[40px]">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-[40px]" :class="{'!pt-0': section.hasOwnProperty('padding_top') && !section?.padding_top}">
       <template v-for="(component, index) in section.components" :key="index">
         <component
             :is="currentComponent(component)"

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

@@ -20,7 +20,7 @@
                 <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
               </span>
             </a>
-            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px]" v-html="link.supporting_text"></p>
+            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset" v-html="link.supporting_text"></p>
           </div>
         </div>
       </div>