@dcodegroup-au/page-builder 0.5.2 → 0.5.4
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.
- package/dist/page-builder.css +1 -1
- package/dist/page-builder.es.js +2836 -2651
- package/dist/page-builder.umd.js +35 -35
- package/example/src/App.vue +5 -3
- package/example/src/pages/AdvocaryAndResearch.js +337 -0
- package/example/src/pages/Vectea2024.js +205 -0
- package/package.json +1 -1
- package/src/assets/svg/left_vector.svg +3 -0
- package/src/components/PageRender.vue +2 -0
- package/src/components/builders/Header.vue +2 -2
- package/src/components/builders/Links.vue +19 -1
- package/src/components/builders/NewsGrid.vue +2 -2
- package/src/components/common/Button.vue +2 -2
- package/src/components/presenters/modules/BulletPoints.vue +38 -17
- package/src/components/presenters/modules/FAQ.vue +58 -0
- package/src/components/presenters/modules/LinkCard.vue +5 -3
- package/src/components/presenters/modules/Paragraph.vue +5 -2
- package/src/components/presenters/modules/QuickLinks.vue +7 -5
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
label-text="Button Label *"
|
|
9
9
|
class="w-full mb-4"
|
|
10
10
|
:value="button.label"
|
|
11
|
-
:limit="
|
|
11
|
+
:limit="100"
|
|
12
12
|
>
|
|
13
13
|
<input
|
|
14
14
|
v-model="button.label"
|
|
15
15
|
name="button.label"
|
|
16
16
|
type="text"
|
|
17
17
|
placeholder="Label"
|
|
18
|
-
:maxlength="
|
|
18
|
+
:maxlength="100"
|
|
19
19
|
class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
|
|
20
20
|
/>
|
|
21
21
|
</input-wrapper>
|
|
@@ -1,22 +1,34 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden">
|
|
3
|
-
<div class="
|
|
4
|
-
<
|
|
5
|
-
:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
<div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
|
|
4
|
+
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]"
|
|
5
|
+
:class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
|
|
6
|
+
<img v-if="headerComponent?.featured_image"
|
|
7
|
+
:src="headerComponent?.featured_image"
|
|
8
|
+
class="max-w-[480px] w-full object-cover rounded-[24px]"
|
|
9
|
+
ref="leftColumn"
|
|
10
|
+
alt="Feature"/>
|
|
11
|
+
<div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image, 'grid grid-cols-2 gap-8': section?.two_column}"
|
|
12
|
+
ref="rightColumn">
|
|
13
|
+
<div>
|
|
14
|
+
<div v-if="headerComponent?.icon"
|
|
15
|
+
class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
|
|
16
|
+
<IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
|
|
17
|
+
</div>
|
|
18
|
+
<h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
|
|
19
|
+
<p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
|
|
20
|
+
v-html="headerComponent.supporting_text"></p>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}"
|
|
23
|
+
v-if="bulletPointsComponent">
|
|
24
|
+
<p v-if="bulletPointsComponent?.title" v-text="bulletPointsComponent.title" class="font-semibold text-[20px]"></p>
|
|
25
|
+
<div v-for="item in bulletPointsComponent.data" class="flex">
|
|
26
|
+
<div
|
|
27
|
+
class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
|
|
28
|
+
<CheckIcon class="w-4 h-4"></CheckIcon>
|
|
29
|
+
</div>
|
|
30
|
+
<p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
|
|
18
31
|
</div>
|
|
19
|
-
<p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
|
|
20
32
|
</div>
|
|
21
33
|
</div>
|
|
22
34
|
</div>
|
|
@@ -24,7 +36,7 @@
|
|
|
24
36
|
</div>
|
|
25
37
|
</template>
|
|
26
38
|
<script setup>
|
|
27
|
-
import {ref, computed} from "vue";
|
|
39
|
+
import {ref, computed, onMounted} from "vue";
|
|
28
40
|
import CheckIcon from "@/assets/img/icons/check.svg";
|
|
29
41
|
import IconComponent from "@/components/common/Icon.vue";
|
|
30
42
|
|
|
@@ -35,6 +47,9 @@ const props = defineProps({
|
|
|
35
47
|
},
|
|
36
48
|
});
|
|
37
49
|
|
|
50
|
+
const leftColumn = ref(null);
|
|
51
|
+
const rightColumn = ref(null);
|
|
52
|
+
|
|
38
53
|
const section = ref(props.section);
|
|
39
54
|
const headerComponent = computed(() => {
|
|
40
55
|
return section.value.components.find((component) => component.type === "header");
|
|
@@ -42,4 +57,10 @@ const headerComponent = computed(() => {
|
|
|
42
57
|
const bulletPointsComponent = computed(() => {
|
|
43
58
|
return section.value.components.find((component) => component.type === "bullet_points");
|
|
44
59
|
});
|
|
60
|
+
|
|
61
|
+
onMounted(() => {
|
|
62
|
+
if (leftColumn.value && rightColumn.value) {
|
|
63
|
+
leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
45
66
|
</script>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="overflow-hidden">
|
|
3
|
+
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex justify-center gap-[10%]">
|
|
4
|
+
<div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full">
|
|
5
|
+
<div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
|
|
6
|
+
<h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
|
|
7
|
+
<p v-if="header?.supporting_text"
|
|
8
|
+
class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto"
|
|
9
|
+
v-html="header.supporting_text"></p>
|
|
10
|
+
</div>
|
|
11
|
+
<div v-if="featureComponents[index]" class="flex flex-col divide-y gap-8">
|
|
12
|
+
<div v-for="(link, index) in featureComponents[index].data"
|
|
13
|
+
class="relative bg-white p-2 w-full pt-6">
|
|
14
|
+
<a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
|
|
15
|
+
<span class="hover:underline" @click="toggle(index)">
|
|
16
|
+
{{ link.title }}
|
|
17
|
+
</span>
|
|
18
|
+
<Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
|
|
19
|
+
<Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
|
|
20
|
+
</a>
|
|
21
|
+
<p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px]" v-html="link.supporting_text"></p>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
<script setup>
|
|
29
|
+
import {ref, computed} from "vue";
|
|
30
|
+
import Plus from "@/assets/img/icons/plus-circle.svg";
|
|
31
|
+
import Minus from "@/assets/img/icons/minus-circle.svg";
|
|
32
|
+
|
|
33
|
+
const props = defineProps({
|
|
34
|
+
section: {
|
|
35
|
+
required: true,
|
|
36
|
+
type: Object,
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const section = ref(props.section);
|
|
41
|
+
const show = ref([]);
|
|
42
|
+
const headerComponents = computed(() => {
|
|
43
|
+
return section.value.components.filter((component) => component.type === "header");
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
const featureComponents = computed(() => {
|
|
47
|
+
return section.value.components.filter((component) => component.type === "feature_items");
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
featureComponents.value.forEach((value, index) => {
|
|
51
|
+
show.value[index] = false;
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
const toggle = (index) => {
|
|
55
|
+
show.value[index] = !show.value[index];
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="overflow-hidden bg-aqua-100">
|
|
2
|
+
<div class="overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
|
|
3
3
|
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
|
|
4
4
|
<div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
|
|
5
5
|
<h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
|
|
@@ -13,14 +13,16 @@
|
|
|
13
13
|
alt="Feature"/>
|
|
14
14
|
</div>
|
|
15
15
|
<div class="flex gap-8 w-full" ref="rightColumn" :class="{'flex-col h-fit': headerComponent?.featured_image}">
|
|
16
|
-
<div v-for="(data, index) in cardComponent.data"
|
|
16
|
+
<div v-for="(data, index) in cardComponent.data"
|
|
17
|
+
class="relative bg-white p-8 rounded-[24px] w-full"
|
|
18
|
+
:class="{'!bg-gray-50': section?.no_background}">
|
|
17
19
|
<div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
|
|
18
20
|
<IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
|
|
19
21
|
</div>
|
|
20
22
|
<h1 class="text-[20px] font-semibold text-gray-900">{{ data.title }}</h1>
|
|
21
23
|
<div class="text-lg text-gray-600 mt-2 leading-[24px]" v-html="data.description"></div>
|
|
22
24
|
<a
|
|
23
|
-
v-if="data?.primary_button.show"
|
|
25
|
+
v-if="data?.primary_button.show && data.primary_button.url"
|
|
24
26
|
class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
|
|
25
27
|
:href="formatUrl(data.primary_button.url)"
|
|
26
28
|
:target="data.primary_button.open_in_new_tab ? '_blank' : ''">
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="overflow-hidden">
|
|
3
|
-
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4">
|
|
2
|
+
<div class="overflow-hidden mt-4">
|
|
3
|
+
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16">
|
|
4
4
|
<div class="max-w-[800px]" v-if="section.components[0]?.title">
|
|
5
5
|
<h3 class="text-[36px] text-gray-900 font-semibold">
|
|
6
6
|
{{ section.components[0].title }}
|
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
<div v-html="section.components[0].paragraph"></div>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
|
+
<div class="w-full rounded-[24px]" v-if="section.components[0]?.featured_image">
|
|
13
|
+
<img :src="section.components[0]?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
|
|
14
|
+
</div>
|
|
12
15
|
</div>
|
|
13
16
|
</div>
|
|
14
17
|
</template>
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="w-full bg-navy-800 py-10 relative lg:h-[336px]">
|
|
2
|
+
<div class="w-full bg-navy-800 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
|
|
3
|
+
<LeftVector class="absolute left-0 top-0" v-if="section?.as_cta"></LeftVector>
|
|
3
4
|
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
|
|
4
|
-
<div class="max-md:mx-[30px] 1xl:mx-0 relative z-10">
|
|
5
|
+
<div class="max-md:mx-[30px] 1xl:mx-0 relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
|
|
5
6
|
<div v-for="(component, index) in section.components" class="w-full md:w-3/4">
|
|
6
7
|
<component
|
|
7
8
|
:is="currentComponent(component)"
|
|
8
9
|
:key="index"
|
|
9
10
|
:component="component"
|
|
11
|
+
:class="{'flex !justify-center': section?.as_cta}"
|
|
10
12
|
></component>
|
|
11
13
|
</div>
|
|
12
14
|
</div>
|
|
13
15
|
</div>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</div>
|
|
16
|
+
<HeaderVector class="absolute right-0 top-0" v-if="!section?.as_cta"></HeaderVector>
|
|
17
|
+
</div>
|
|
17
18
|
</template>
|
|
18
19
|
|
|
19
20
|
<script setup>
|
|
@@ -21,6 +22,7 @@ import { ref, markRaw } from "vue";
|
|
|
21
22
|
import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";
|
|
22
23
|
import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
|
|
23
24
|
import HeaderVector from "@/assets/svg/header_right_vector.svg";
|
|
25
|
+
import LeftVector from "@/assets/svg/left_vector.svg";
|
|
24
26
|
|
|
25
27
|
const props = defineProps({
|
|
26
28
|
section: {
|