@dcodegroup-au/page-builder 0.1.2 → 0.1.5

package/example/src/App.vue

@@ -22,14 +22,14 @@ const page = {
               primary_button: {
                 show: true,
                 label: 'Join ELAA',
-                url: '/google.com', // external could be an url
+                url: 'google.com', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Learn about ELAA',
-                url: '/admin', // external could be an url
+                url: 'facebook.com', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -42,14 +42,14 @@ const page = {
               primary_button: {
                 show: false,
                 label: 'Apply now ELAA',
-                url: '/admin', // external could be an url
+                url: 'facebook.com', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Construct ELAA',
-                url: '/admin', // external could be an url
+                url: 'facebook.com', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -62,14 +62,14 @@ const page = {
               primary_button: {
                 show: true,
                 label: 'Apply To Dcodegroup',
-                url: '/admin', // external could be an url
+                url: 'facebook.com', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Construct Dcodegroup',
-                url: '/admin', // external could be an url
+                url: 'admin', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -176,7 +176,7 @@ const page = {
                 show: true,
                 name: 'Linked to',
                 label: 'View all',
-                url: 'google.com', // external could be an url
+                url: 'http://google.com', // external could be an url
                 type: 'external-page',
                 is_new_tab: true,
               },

package/package.json

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

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.startsWith('http') ? link.url : `//${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/VSliderPresenter.vue

@@ -14,13 +14,13 @@
             <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
             <div class="flex gap-3 mt-8 flex-col lg:flex-row">
               <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
-                 :href="slide.secondary_button.url"
+                 :href="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
                  :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                 <span>{{ slide.secondary_button.label }}</span>
               </a>
               <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
-                 :href="slide.primary_button.url"
+                 :href="formatUrl(slide.primary_button.url)"
                  v-if="slide.primary_button.show"
                  :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">
                 {{ slide.primary_button.label }}
@@ -56,6 +56,10 @@ 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/VVerticalTabPresenter.vue

@@ -44,7 +44,8 @@
               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">
+              :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
+          >
             {{ selectedItem?.primary_button?.label ?? 'N/A' }}
             <ArrowUpRight class="w-4 h-4 md:w-5 md:h-5" />
           </a>
@@ -82,4 +83,12 @@ onMounted(() => {
     selectItem(publicTabs.value[0]);
   }
 });
-</script>
+</script>
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  @apply transition-opacity duration-300;
+}
+.fade-enter-from, .fade-leave-to {
+  @apply opacity-0;
+}
+</style>