@dcodegroup-au/page-builder 0.3.5 → 0.3.7

package/example/src/App.vue

@@ -2,6 +2,7 @@
 import {Home} from "./pages/Home.js";
 import {BestLife} from "./pages/BestLife.js";
 import {AboutUs} from "./pages/AboutUs.js";
+import {OurVision} from "./pages/OurVision.js";
 
 const slide = {
   title: "About ELAA",
@@ -13,7 +14,7 @@ const slide = {
     label: 'Join ELAA',
     url: '/admin', // external could be an url
     type: 'site-content',
-    is_new_tab: true,
+    open_in_new_tab: true,
   },
   secondary_button: {
     show: true,
@@ -35,7 +36,7 @@ const tab = {
     label: 'View all',
     url: 'google.com', // external could be an url
     type: 'external-page',
-    is_new_tab: true,
+    open_in_new_tab: true,
   },
 }
 
@@ -62,7 +63,7 @@ const linkCardItem = {
     label: 'Learn more',
     url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
     type: 'external-page',
-    is_new_tab: true,
+    open_in_new_tab: true,
   },
 }
 
@@ -85,9 +86,10 @@ const breadcrumbs = [
 
 <template>
   <div>
+    {{ JSON.stringify(OurVision) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="AboutUs"/>
+      <PageRender :page="OurVision"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -103,7 +105,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="AboutUs" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="OurVision" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/BestLife.js

@@ -139,7 +139,6 @@ export const BestLife = {
           name: "Link cards",
           type: "link_cards",
           supportive_text: "Manage the link cards.",
-
           max_items: 4,
           data: [
             {
@@ -153,7 +152,7 @@ export const BestLife = {
                 label: 'Learn more',
                 url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: false,
               }
             },
             {
@@ -167,7 +166,7 @@ export const BestLife = {
                 label: 'Learn more',
                 url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: true,
               }
             },
           ]
@@ -223,7 +222,7 @@ export const BestLife = {
             title: 'View all news',
             url: 'google.com', // external could be an url
             type: 'external-page',
-            is_new_tab: true,
+            open_in_new_tab: true,
             show: true,
           },
           content: {

package/example/src/pages/Home.js

@@ -23,7 +23,7 @@ export const Home = {
                 label: 'Join ELAA',
                 url: 'google.com', // external could be an url
                 type: 'site-content',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
               secondary_button: {
                 show: true,
@@ -43,7 +43,7 @@ export const Home = {
                 label: 'Apply now ELAA',
                 url: 'facebook.com', // external could be an url
                 type: 'site-content',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
               secondary_button: {
                 show: true,
@@ -63,7 +63,7 @@ export const Home = {
                 label: 'Apply To Dcodegroup',
                 url: 'facebook.com', // external could be an url
                 type: 'site-content',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
               secondary_button: {
                 show: true,
@@ -83,7 +83,7 @@ export const Home = {
                 label: 'Apply To Image Credits',
                 url: '/admin', // external could be an url
                 type: 'site-content',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
               secondary_button: {
                 show: true,
@@ -176,7 +176,7 @@ export const Home = {
                 label: 'View all',
                 url: 'google.com', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
             },
             {
@@ -190,7 +190,7 @@ export const Home = {
                 label: 'View all',
                 url: 'http://google.com', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
             },
             {
@@ -204,7 +204,7 @@ export const Home = {
                 label: 'View all',
                 url: 'google.com', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
             },
             {
@@ -218,7 +218,7 @@ export const Home = {
                 label: 'View all',
                 url: 'google.com', // external could be an url
                 type: 'external-page',
-                is_new_tab: true,
+                open_in_new_tab: true,
               },
             },
           ]
@@ -280,7 +280,7 @@ export const Home = {
             title: 'View all news',
             url: 'google.com', // external could be an url
             type: 'external-page',
-            is_new_tab: true,
+            open_in_new_tab: true,
             show: true,
           },
           content: {
@@ -357,7 +357,7 @@ export const Home = {
             title: 'View all events',
             url: 'google.com', // external could be an url
             type: 'external-page',
-            is_new_tab: true,
+            open_in_new_tab: true,
           },
           content: {
             label: 'Content',
@@ -366,6 +366,7 @@ export const Home = {
               {
                 type: 'event',
                 title: 'Change Management – Drop in session',
+                url: 'google1.com',
                 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'],
@@ -383,6 +384,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -401,6 +403,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -420,6 +423,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -438,6 +442,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -456,6 +461,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -474,6 +480,7 @@ export const Home = {
               },
               {
                 type: 'event',
+                url: 'google.com',
                 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',
@@ -514,7 +521,7 @@ export const Home = {
             title: 'View all submissions',
             url: 'google.com', // external could be an url
             type: 'external-page',
-            is_new_tab: true,
+            open_in_new_tab: true,
           },
           content: {
             label: 'Content',

package/example/src/pages/OurVision.js

@@ -0,0 +1,148 @@
+export const OurVision =
+  {
+  title: "Our Vision & History",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Our Vision & History",
+          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: "Callout Section",
+      type: "callout",
+      components: [
+        {
+          name: "Callout Section",
+          type: "callout",
+          title: "Our Vision",
+          has_extra: true,
+          title_label: "Eyebrow heading",
+          supporting_text: "Excellence and equity in early childhood education and care",
+          supporting_text_label: "Message *",
+          featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose.png"
+        },
+      ]
+    },
+    {
+      title: "Callout Section",
+      type: "callout",
+      components: [
+        {
+          name: "Callout Section",
+          type: "callout",
+          title: "Our Purpose",
+          has_extra: true,
+          title_label: "Eyebrow heading",
+          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: "Two columns with image and content",
+      type: "two_column_image_content",
+      display: "horizontal",
+      components: [
+        {
+          name: "Image Block",
+          type: "image_block",
+          featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose-2.png",
+        },
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Our values",
+          supporting_text_max_length: 500,
+          supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent.",
+        },
+        {
+          name: "Feature items",
+          type: "feature_items",
+          supportive_text: "Section can contain up to 10 items.",
+          max_items: 10,
+          data: [
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Excellence",
+              icon: "AlertCircle",
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Equity",
+              icon: 'AlignLeft01',
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Collaboration",
+              icon: 'AlignLeft01',
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Collaboration",
+              icon: 'AlignLeft01',
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
+            },
+            {
+              has_extra: true,
+              as_item: true,
+              title: "Collaboration",
+              icon: 'AlignLeft01',
+              supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Support Services",
+          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 Commonwealth",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+            {
+              title: "We work with members, peak bodies.",
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/package.json

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

package/src/components/ItemEdit.vue

@@ -211,7 +211,6 @@ const basicForm = ref({
   title: props.item.title,
   description: props.item.description,
   featured_image: props.item.featured_image,
-  lines: props.item.lines || [],
 });
 
 const advancedForm = ref({
@@ -235,20 +234,24 @@ const addLine = () => {
 
 const removeLine = (index) => {
   advancedForm.value.lines.splice(index, 1);
-  emit("update", false);
+  this.save();
 };
 
 const save = () => {
   let form = hasLines.value ? advancedForm : basicForm;
-  emit("update", form.value);
 
   if (props.saveEndpoint) {
-    axios.post(props.saveEndpoint, form.value).then(() => {
+    axios.post(props.saveEndpoint, form.value).then((data) => {
+      emit("update", data);
       if (props.cancelEndpoint) {
         // window.location.href = props.cancelEndpoint;
       }
     });
+
+    return;
   }
+
+  emit("update", form.value);
 };
 
 const close = () => {

package/src/components/LinkCardEdit.vue

@@ -114,12 +114,17 @@ const save = () => {
   emit("update", form.value);
 
   if (props.saveEndpoint) {
-    axios.post(props.saveEndpoint, form.value).then (() => {
+    axios.post(props.saveEndpoint, form.value).then((data) => {
+      emit("update", data);
       if (props.cancelEndpoint) {
         // window.location.href = props.cancelEndpoint;
       }
-    })
+    });
+
+    return;
   }
+
+  emit("update", form.value);
 };
 
 const close = () => {

package/src/components/PageBuilder.vue

@@ -127,6 +127,7 @@ const componentMaps = ref({
   vertical_tabs: markRaw(VItems),
   links: markRaw(VLinks),
   header: markRaw(VHeader),
+  callout: markRaw(VHeader),
   link_grid: markRaw(VLinks),
   logos: markRaw(VLogos),
   carousel: markRaw(VCollectionCarousel),
@@ -136,6 +137,7 @@ const componentMaps = ref({
   image_block: markRaw(VImageBlock),
   timeline_items: markRaw(VItems),
   bullet_points: markRaw(VLinks),
+  feature_items: markRaw(VLinks),
   link_cards: markRaw(VItems),
 });
 

package/src/components/PageRender.vue

@@ -24,6 +24,7 @@ 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";
+import Callout from "@/components/presenters/modules/Callout.vue";
 
 const props = defineProps({
   page: {
@@ -46,6 +47,7 @@ const componentMaps = ref({
   link_card: markRaw(LinkCard),
   link_list: markRaw(LinkList),
   bullet_points: markRaw(BulletPoints),
+  callout: markRaw(Callout),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/Header.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-gray-50 px-6 py-5 rounded-xl">
+  <div :class="{'bg-gray-50 px-6 py-5 rounded-xl': !dataRef?.as_item, '-mx-6 -my-5': dataRef?.as_item}">
     <p class="text-lg font-semibold text-gray-900 pb-4" :class="{'border-b border-gray-200': !dataRef?.has_extra}">
-      {{ dataRef.name }}
+      {{ dataRef?.name }}
     </p>
     <div class="flex flex-col gap-4  rounded-xl py-5 bg-gray-50 px-0" :class="{'!bg-gray-200 !px-6': dataRef?.hasOwnProperty('has_extra')}">
       <div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}">
@@ -18,7 +18,7 @@
             v-if="dataRef.hasOwnProperty('title')"
             is-vertical
             field="title"
-            label-text="Title *"
+            :label-text="dataRef?.title_label ?? 'Title *'"
             class="w-full mb-4"
             :value="dataRef.title"
             :limit="51"
@@ -37,7 +37,7 @@
           is-vertical
           v-if="dataRef.hasOwnProperty('supporting_text')"
           field="supporting_text"
-          label-text="Supporting Text *"
+          :label-text="dataRef?.supporting_text_label ?? 'Supporting Text *'"
           class="w-full mb-4"
           :value="dataRef.supporting_text"
           :limit="dataRef.supporting_text_max_length ?? 100"
@@ -83,11 +83,7 @@ const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 const emit = defineEmits(["update"]);
 const props = defineProps({
   ...defaultProps,
-  hasExtra: {
-    type: Boolean,
-    default: true
-  },
 });
 
-const dataRef = ref(props.data.component);
+const dataRef = ref(props.data?.component ?? props.data);
 </script>

package/src/components/builders/Links.vue

@@ -39,7 +39,9 @@
         </div>
         <div class="flex flex-col gap-6">
           <div class="flex flex-col gap-1.5">
+            <Header v-if="isFeatureItem" :data="item"></Header>
             <input-wrapper
+                v-else
                 is-vertical
                 field="title"
                 label-text="Title *"
@@ -57,7 +59,7 @@
                   class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
               />
               <textarea
-                  v-else
+                  v-if="isBulletPoint"
                   v-model="item.title"
                   name="title"
                   placeholder="Title"
@@ -90,6 +92,7 @@ import {createLink} from "@/components/helpers/pageBuilderFactory";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import LinkedTo from "@/components/common/LinkedTo.vue";
+import Header from "@/components/builders/Header.vue";
 import VModal from "@/components/common/Modal.vue";
 
 const emit = defineEmits(["update"]);
@@ -107,6 +110,10 @@ const isBulletPoint = computed(() => {
   return componentData.value.type === 'bullet_points';
 });
 
+const isFeatureItem = computed(() => {
+  return componentData.value.type === 'feature_items';
+});
+
 function addItem() {
   if (!componentData.value.hasOwnProperty('data')) {
     componentData.value.data = [];
@@ -115,7 +122,7 @@ function addItem() {
   if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data?.push(createLink({}, isBulletPoint.value));
+  componentData.value.data?.push(createLink({}, isBulletPoint.value, isFeatureItem.value));
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/common/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <card v-if="button" :title="button?.name ?? 'Primary button'" class="flex flex-col gap-4 rounded-xl px-6 py-5 mt-4" :classes="classes" :class="classes">
+  <card v-if="button" :title="button?.name ?? 'Button'" class="flex flex-col gap-4 rounded-xl px-6 py-5 mt-4" :classes="classes" :class="classes">
     <div class="flex flex-col gap-8">
       <VToggle name="show" v-model="button.show" title="Show Button" />
       <input-wrapper

package/src/components/helpers/common.js

@@ -58,4 +58,9 @@ export function parseName(str, capitalizeFirst = true) {
   }
 
   return lastWord;
-}
+}
+
+// Format URL
+export function formatUrl(url) {
+  return url?.startsWith("http") ? url : `//${url}`;
+};

package/src/components/helpers/defaultProps.js

@@ -4,7 +4,7 @@ export const defaultProps = {
     type: Object,
   },
   sites: {
-    required: true,
+    required: false,
     type: Array,
   },
 };

package/src/components/helpers/pageBuilderFactory.js

@@ -18,7 +18,7 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
       label: "",
       type: "site-content",
       url: '',
-      is_new_tab: false,
+      open_in_new_tab: false,
     ...(overrides.primary_button || {}),
     },
   }
@@ -32,7 +32,7 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
       label: "",
       type: "site-content",
       url: '',
-      is_new_tab: false,
+      open_in_new_tab: false,
       ...(overrides.secondary_button || {}),
     };
   }
@@ -43,7 +43,17 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
   };
 }
 
-export function createLink(overrides = {}, isBulletPoint = false) {
+export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem = false) {
+  if (isFeatureItem) {
+    return {
+      has_extra: true,
+      as_item: true,
+      title: "Item title",
+      icon: "AlertCircle",
+      supporting_text: "Enter your description here.",
+    }
+  }
+
   if (isBulletPoint) {
     return {
       title: "New link",