@dcodegroup-au/page-builder 0.3.4 → 0.3.6

package/example/src/App.vue

@@ -13,7 +13,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 +35,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 +62,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,
   },
 }
 
@@ -87,7 +87,7 @@ const breadcrumbs = [
   <div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="AboutUs"/>
+      <PageRender :page="BestLife"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -103,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="AboutUs" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="Home" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/BestLife.js

@@ -153,7 +153,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 +167,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 +223,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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;
+        // 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;
+        // window.location.href = props.cancelEndpoint;
       }
-    })
+    });
+
+    return;
   }
+
+  emit("update", form.value);
 };
 
 const close = () => {

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/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 || {}),
     };
   }

package/src/components/presenters/components/CarouselPresenter.vue

@@ -31,7 +31,10 @@
               </span>
             </div>
             <h3 class="my-3">
-              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline" :href="slide.url" target="_blank">{{ slide?.title }}</a>
+              <a class="text-[24px] font-semibold text-gray-900 leading-[32px] hover:underline"
+                 :href="formatUrl(slide.url)" target="_blank">
+                {{ slide?.title }}
+              </a>
             </h3>
             <p
                 class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
@@ -79,8 +82,8 @@
     <div v-if="component?.button" class="flex justify-center mb-[40px]">
       <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="component.button.url"
-         :target="component.button.is_new_tab ? '_blank' : ''">
+          :href="formatUrl(component.button.url)"
+         :target="component.button.open_in_new_tab ? '_blank' : ''">
         {{ component.button.title }}
         <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
       </a>
@@ -96,6 +99,7 @@ import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import Ticket from "@/assets/img/icons/ticket-02.svg";
 import DefaultPrimaryButton from "@/components/presenters/overridables/VCarouselPrimaryButton.vue";
+import { formatUrl } from "@/components/helpers/common";
 
 // Inject the FileUpload component or fallback to the default one
 const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", DefaultPrimaryButton);
@@ -115,11 +119,6 @@ const currentSlide = ref(0); // Start at 0
 const itemsToShow = 4; // Number of items to show at a time
 const slides = [...props.component.content?.items || []];
 
-// Format URL
-const formatUrl = (url) => {
-  return url.startsWith("http") ? url : `//${url}`;
-};
-
 // Navigate to the next slide
 const nextSlide = () => {
   if (currentSlide.value <= slides.length - itemsToShow) {

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

@@ -44,7 +44,7 @@
           </div>
           <a
               v-if="card?.link"
-              :href="card.link"
+              :href="formatUrl(card.link)"
               class="text-gray-900 text-lg font-semibold hover:underline block mb-2 w-full"
               target="_blank"
               rel="noopener noreferrer"
@@ -61,8 +61,8 @@
     <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' : ''"
+          :href="formatUrl(button.url)"
+          :target="button.open_in_new_tab ? '_blank' : ''"
       >
         {{ button.title }}
         <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
@@ -75,6 +75,7 @@
 import { ref } from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import PlayButton from "@/assets/svg/play.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   component: {

package/src/components/presenters/components/SliderPresenter.vue

@@ -45,6 +45,7 @@ import 'vue3-carousel/carousel.css';
 import { ref } from "vue";
 import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
 import {Carousel, Slide} from "vue3-carousel";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   component: {
@@ -56,10 +57,6 @@ const props = defineProps({
 const currentSlide = ref(0);
 const componentData = ref(props.component);
 const slides = componentData.value.data.filter((o) => o.public);
-
-const formatUrl = (url) => {
-  return url.startsWith('http') ? url : `//${url}`;
-};
 </script>
 
 <style scoped>

package/src/components/presenters/components/VerticalTabPresenter.vue

@@ -43,7 +43,7 @@
           <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' : ''"
+              :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
               :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
           >
             {{ selectedItem?.primary_button?.label ?? 'N/A' }}

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

@@ -13,8 +13,8 @@
 
 <script setup>
 import { ref, markRaw } from "vue";
-import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
-import VCollectionGridPresenter from "@/components/presenters/components/CollectionGridPresenter.vue";
+import HeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
+import CollectionGridPresenter from "@/components/presenters/components/CollectionGridPresenter.vue";
 
 const props = defineProps({
   section: {
@@ -25,9 +25,9 @@ const props = defineProps({
 
 const section = ref(props.section);
 const componentMaps = ref({
-  header: markRaw(VHeaderPresenter),
-  news_grid: markRaw(VCollectionGridPresenter),
-  video_grid: markRaw(VCollectionGridPresenter),
+  header: markRaw(HeaderPresenter),
+  news_grid: markRaw(CollectionGridPresenter),
+  video_grid: markRaw(CollectionGridPresenter),
 });
 
 const currentComponent = (component) => {

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

@@ -21,8 +21,8 @@
             <a
                 v-if="data?.primary_button.url"
                 class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base"
-                :href="data.primary_button.url"
-                :target="data.primary_button.is_new_tab ? '_blank' : ''">
+                :href="formatUrl(data.primary_button.url)"
+                :target="data.primary_button.open_in_new_tab ? '_blank' : ''">
               {{ data.primary_button.label }}
               <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
             </a>
@@ -36,6 +36,7 @@
 import {ref, computed} from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import IconComponent from "@/components/common/Icon.vue";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   section: {

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

@@ -12,7 +12,7 @@
               <a
                   v-if="link.url"
                   class="text-gray-900 w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg hover:underline"
-                  :href="link.url"
+                  :href="formatUrl(link.url)"
                   :target="link.open_in_new_tab ? '_blank' : ''">
                 <div class="flex gap-4 items-center max-w-[94%] w-full">
                   <LinkExternal class="w-5 h-5"></LinkExternal>
@@ -31,6 +31,7 @@
 import {ref, computed} from "vue";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import LinkExternal from "@/assets/img/icons/link-external-01.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   section: {

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

@@ -11,7 +11,7 @@
         </p>
         <div v-if="component?.type === 'logos'" class="flex flex-wrap justify-center" :class="{'gap-6': isHorizontal, 'gap-12': !isHorizontal}">
           <template v-for="logo in component.data">
-            <a :href="logo?.url" title="Brand">
+            <a :href="logo?.url" title="Brand" target="_blank">
               <img v-if="logo?.logo" :src="logo?.logo" :class="getLogoHeight(component?.height)" alt="Brand Logo"/>
               <span v-else class="text-sm">No photo</span>
             </a>

package/src/components/presenters/overridables/VCarouselPrimaryButton.vue

@@ -14,6 +14,7 @@
 <script setup>
 import Plus from "@/assets/img/icons/plus.svg";
 import ShoppingCart from "@/assets/img/icons/shopping-cart-01.svg";
+import { formatUrl } from "@/components/helpers/common";
 
 const props = defineProps({
   button: {
@@ -21,8 +22,4 @@ const props = defineProps({
     required: true,
   },
 });
-
-const formatUrl = (url) => {
-  return url.startsWith("http") ? url : `//${url}`;
-};
 </script>