@dcodegroup-au/page-builder 0.7.6 → 0.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/page-builder.css +169 -72
  2. package/dist/page-builder.es.js +110 -80
  3. package/dist/page-builder.umd.js +110 -80
  4. package/package.json +1 -1
  5. package/src/assets/css/style.css +1 -1
  6. package/src/components/presenters/components/CarouselPresenter.vue +33 -9
  7. package/src/components/presenters/components/HeaderPresenter.vue +3 -3
  8. package/src/components/presenters/components/VerticalTabPresenter.vue +22 -13
  9. package/src/components/presenters/modules/AccordionPricing.vue +1 -1
  10. package/src/components/presenters/modules/BulletPoints.vue +1 -1
  11. package/src/components/presenters/modules/CollectionCarousel.vue +2 -2
  12. package/src/components/presenters/modules/FAQ.vue +1 -1
  13. package/src/components/presenters/modules/LinkCard.vue +1 -1
  14. package/src/components/presenters/modules/LinkList.vue +1 -1
  15. package/src/components/presenters/modules/Paragraph.vue +1 -1
  16. package/src/components/presenters/modules/Timeline.vue +1 -1
  17. package/src/components/presenters/modules/TwoColumnsImageContent.vue +1 -1
  18. package/src/components/presenters/modules/VTabs.vue +1 -1
package/src/components/presenters/components/CarouselPresenter.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  <!-- Slider Wrapper -->
4
4
  <div
5
5
  class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
6
- :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= 480 ? 480 : windowWidth) + 24)}px)` }"
6
+ :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
7
7
  >
8
8
  <div
9
9
  v-for="(slide, index) in slides"
@@ -64,21 +64,23 @@
64
64
  </div>
65
65
 
66
66
  <!-- Control Buttons -->
67
- <div class="absolute top-[-65px] right-4 flex gap-4">
67
+ <div class="absolute max-sm:bottom-0 sm:top-[-65px] right-0 md:-right-28 lg:right-4 flex gap-4">
68
68
  <button
69
69
  @click="prevSlide"
70
- class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
70
+ class="p-2.5 bg-white text-navy-800 rounded-full opacity-100"
71
+ :class="{'opacity-50 pointer-events-none': !activeLeftButton}"
71
72
  >
72
73
  <ChevronLeft class="w-6 h-6" />
73
74
  </button>
74
75
  <button
75
76
  @click="nextSlide"
76
- class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
77
+ class="p-2.5 bg-white text-navy-800 rounded-full opacity-100"
78
+ :class="{'opacity-50 pointer-events-auto': !activeRightButton}"
77
79
  >
78
80
  <ChevronRight class="w-6 h-6" />
79
81
  </button>
80
82
  </div>
81
- <div v-if="component?.button" class="flex justify-center mb-[40px]">
83
+ <div v-if="component?.button" class="flex sm:justify-center mb-6 lg:mb-10">
82
84
  <a
83
85
  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"
84
86
  :href="formatUrl(component.button.url)"
@@ -91,7 +93,7 @@
91
93
  </template>
92
94
 
93
95
  <script setup>
94
- import { ref, inject, onMounted, onUnmounted } from 'vue'
96
+ import { ref, inject, onMounted, onUnmounted, computed } from 'vue';
95
97
  import Clock from "@/assets/img/icons/clock.svg";
96
98
  import ChevronRight from "@/assets/img/icons/chevron-right.svg";
97
99
  import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
@@ -115,12 +117,14 @@ const props = defineProps({
115
117
  });
116
118
 
117
119
  const currentSlide = ref(0); // Start at 0
118
- const itemsToShow = 4; // Number of items to show at a time
120
+ const itemsToShow = ref(4); // Number of items to show at a time
119
121
  const slides = [...props.component.content?.items || []];
120
122
  const windowWidth = ref(480)
123
+ const slideWidth = ref(480)
121
124
 
122
125
  onMounted(() => {
123
126
  windowWidth.value = window.innerWidth
127
+ adjustSlides();
124
128
  window.addEventListener('resize', updateWidth)
125
129
  })
126
130
 
@@ -128,13 +132,22 @@ onUnmounted(() => {
128
132
  window.removeEventListener('resize', updateWidth)
129
133
  })
130
134
 
135
+ const activeRightButton = computed(() => {
136
+ return currentSlide.value <= slides.length - itemsToShow.value;
137
+ })
138
+
139
+ const activeLeftButton = computed(() => {
140
+ return currentSlide.value !== 0;
141
+ })
142
+
131
143
  const updateWidth = () => {
132
- windowWidth.value = window.innerWidth
144
+ windowWidth.value = window.innerWidth;
145
+ adjustSlides();
133
146
  }
134
147
 
135
148
  // Navigate to the next slide
136
149
  const nextSlide = () => {
137
- if (currentSlide.value <= slides.length - itemsToShow) {
150
+ if (currentSlide.value <= slides.length - itemsToShow.value) {
138
151
  currentSlide.value++;
139
152
  }
140
153
  };
@@ -145,6 +158,17 @@ const prevSlide = () => {
145
158
  currentSlide.value--;
146
159
  }
147
160
  };
161
+
162
+ const adjustSlides = () => {
163
+ if (windowWidth.value < 512) {
164
+ itemsToShow.value = 2;
165
+ slideWidth.value = windowWidth.value - 32;
166
+ } else if (windowWidth.value < 1120) {
167
+ itemsToShow.value = 2;
168
+ } else if (windowWidth.value < 1630) {
169
+ itemsToShow.value = 3;
170
+ }
171
+ }
148
172
  </script>
149
173
  <style>
150
174
  .multiline-ellipsis {
package/src/components/presenters/components/HeaderPresenter.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div class="flex flex-col sm:px-0 px-4" :class="{'items-center': component?.center}">
2
+ <div class="flex flex-col gap-4" :class="{'items-center': component?.center}">
3
3
  <p
4
4
  v-if="component?.title"
5
- class="pb-4 text-4xl font-semibold text-white"
5
+ class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-white"
6
6
  :class="{'!text-gray-900': component?.dark}"
7
7
  >{{ component?.title }}</p>
8
8
  <p
9
9
  v-if="component?.supporting_text"
10
- class="text-navy-25 text-xl font-normal leading-[30px]"
10
+ class="text-navy-25 text-sm sm:text-base lg:text-xl"
11
11
  :class="{'!text-gray-600': component?.dark}"
12
12
  >
13
13
  {{ component?.supporting_text }}</p>
package/src/components/presenters/components/VerticalTabPresenter.vue CHANGED
@@ -1,23 +1,32 @@
1
1
  <template>
2
- <div class="flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6">
2
+ <div class="grid sm:grid-cols-[auto_240px] lg:grid-cols-2 justify-center gap-4 items-stretch mt-6 text-left">
3
3
  <!-- Left Column: Links -->
4
- <div class="flex-1 w-full md:w-1/2 flex flex-col">
4
+ <div class="grid max-sm:grid-cols-2 gap-4">
5
5
  <div v-for="item in publicTabs" :key="item.title">
6
6
  <div
7
- class="flex-col flex gap-1.5 cursor-pointer mb-4 group"
8
- :class="{'border-l-4 border-brand-600': selectedItem === item, 'border-l-4 border-gray-100': selectedItem !== item}"
9
- @click.prevent="selectItem(item)"
7
+ class="flex-col flex gap-1.5 cursor-pointer group"
8
+ :class="{'sm:border-l-4 border-brand-600': selectedItem === item, 'sm:border-l-4 border-navy-25': selectedItem !== item}"
9
+ @click="selectItem(item)"
10
10
  >
11
- <div class="py-4 pl-4 md:pl-6">
12
- <p
11
+ <div class="sm:py-4 sm:pl-4 md:pl-6">
12
+ <div
13
13
  :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
14
- class="text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"
14
+ class="max-sm:text-gray-900 max-sm:bg-white max-sm:p-3 max-sm:rounded-lg max-sm:min-h-[84px] text-sm relative
15
+ sm:text-lg md:text-xl font-semibold sm:mb-2 group-hover:text-gray-900 grid max-sm:grid-cols-[auto_20px] gap-2"
15
16
  >
16
17
  {{ item.title }}
17
- </p>
18
+
19
+ <ArrowUpRight class="sm:hidden" />
20
+
21
+ <a v-if="selectedItem?.primary_button?.show"
22
+ :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
23
+ :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
24
+ class="absolute inset-0 sm:hidden z-10"
25
+ ></a>
26
+ </div>
18
27
  <p
19
28
  :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
20
- class="text-sm md:text-md font-normal group-hover:text-gray-700"
29
+ class="max-sm:hidden text-sm md:text-md font-normal group-hover:text-gray-700"
21
30
  v-html="item.description"
22
31
  >
23
32
  </p>
@@ -27,17 +36,17 @@
27
36
  </div>
28
37
 
29
38
  <!-- Right Column: Image and Button -->
30
- <div class="flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center">
39
+ <div class="max-sm:hidden bg-transparent flex flex-col items-center">
31
40
  <transition name="fade" mode="out-in">
32
41
  <div class="flex flex-col items-center" :key="selectedItem?.title">
33
42
  <img
34
43
  v-if="selectedItem?.featured_image"
35
44
  :src="selectedItem.featured_image"
36
45
  alt="Selected Item Image"
37
- class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"/>
46
+ class="rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full"/>
38
47
  <img
39
48
  v-else
40
- class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
49
+ class="rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full"
41
50
  src="@/assets/img/no_image_available.jpeg"
42
51
  alt="No Image Available">
43
52
  <a
package/src/components/presenters/modules/AccordionPricing.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="pb-container py-[40px] flex justify-center gap-[10%]">
3
3
  <div class="bg-pale-100 w-full rounded-[20px] p-8 gap-6 grid lg:grid-cols-2">
4
4
  <div>
5
- <p class="text-[36px] font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
5
+ <p class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
6
6
  <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-lg md:rounded-2xl overflow-hidden">
7
7
  <div v-for="(price, index) in pricingComponent.data"
8
8
  class="relative w-full py-6">
package/src/components/presenters/modules/BulletPoints.vue CHANGED
@@ -15,7 +15,7 @@
15
15
  class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
16
16
  <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
17
17
  </div>
18
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
18
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
19
19
  <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
20
20
  v-html="headerComponent.supporting_text"></p>
21
21
  </div>
package/src/components/presenters/modules/CollectionCarousel.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
2
+ <div class="overflow-hidden" :class="{'rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100': section?.has_background}">
3
3
  <div class="pb-container">
4
- <div class="max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]">
4
+ <div class="rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0">
5
5
  <VHeaderPresenter :component="headerComponent" />
6
6
  </div>
7
7
  </div>
package/src/components/presenters/modules/FAQ.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  :class="{'justify-start md:!px-0 !ml-0': section?.align_left}">
5
5
  <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full" :class="{'!max-w-full' : section?.align_left}">
6
6
  <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
7
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
7
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
8
8
  <p v-if="header?.supporting_text"
9
9
  class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto"
10
10
  v-html="header.supporting_text"></p>
package/src/components/presenters/modules/LinkCard.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="link-card overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
3
3
  <div class="pb-container my-[40px]">
4
4
  <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
5
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
5
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
6
6
  <div v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></div>
7
7
  </div>
8
8
  <div v-if="cardComponent" class="flex flex-col md:flex-row w-full" :class="{'gap-8': headerComponent?.featured_image}">
package/src/components/presenters/modules/LinkList.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  <div class="pb-container bg-white py-[40px] flex flex-col lg:flex-row gap-8 xl:gap-[10%]">
4
4
  <div v-for="(header, index) in headerComponents" class="gap-4" :class="{'lg:w-1/2': section.two_columns}">
5
5
  <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
6
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
6
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
7
7
  <p v-if="header?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="header.supporting_text"></p>
8
8
  </div>
9
9
  <img v-if="header?.featured_image"
package/src/components/presenters/modules/Paragraph.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="overflow-hidden mt-4">
3
3
  <div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row" :class="{'[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center, 'md:!px-0 !ml-0 justify-end': section?.align_left }">
4
4
  <div class="max-w-[800px] lg:py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
5
- <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
5
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" v-if="component?.title">
6
6
  {{ component.title }}
7
7
  </h3>
8
8
  <div class="all-unset ql-editor">
package/src/components/presenters/modules/Timeline.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="overflow-hidden">
3
3
  <div class="pb-container mt-[40px]">
4
4
  <div class="rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto" v-if="headerComponent">
5
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
5
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
6
6
  <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
7
7
  </div>
8
8
  <div v-if="timelineComponent">
package/src/components/presenters/modules/TwoColumnsImageContent.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  class="w-full flex-col mb-6"
20
20
  :class="{'text-center items-center flex': headerComponent?.text_center}"
21
21
  >
22
- <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
22
+ <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
23
23
  <p v-if="headerComponent?.supporting_text"
24
24
  class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]"
25
25
  v-html="headerComponent.supporting_text"></p>
package/src/components/presenters/modules/VTabs.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="pb-container">
3
- <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16">
3
+ <div class="bg-navy-25 rounded-3xl md:rounded-[48px] py-6 px-4 lg:p-16 text-center">
4
4
  <div v-for="(component, index) in section.components">
5
5
  <component
6
6
  :is="currentComponent(component)"