@dcodegroup-au/page-builder 0.7.5 → 0.7.7

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 +235 -82
  2. package/dist/page-builder.es.js +94 -80
  3. package/dist/page-builder.umd.js +94 -80
  4. package/package.json +1 -1
  5. package/src/assets/css/style.css +1 -1
  6. package/src/components/presenters/components/HeaderPresenter.vue +3 -3
  7. package/src/components/presenters/components/LinkPresenter.vue +5 -2
  8. package/src/components/presenters/components/SliderPresenter.vue +16 -9
  9. package/src/components/presenters/components/VerticalTabPresenter.vue +22 -13
  10. package/src/components/presenters/modules/AccordionPricing.vue +1 -1
  11. package/src/components/presenters/modules/BulletPoints.vue +1 -1
  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 +2 -2
  18. package/src/components/presenters/modules/VTabs.vue +1 -1
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/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
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="pb-container mt-4 px-4">
3
+ <div class="pb-container mt-4">
4
4
  <div class="grid gap-1.5 lg:gap-4"
5
5
  :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
6
6
  v-if="paragraphComponent">
@@ -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)"