@dcodegroup-au/page-builder 0.4.8 → 0.5.0
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 +1200 -1191
- package/dist/page-builder.umd.js +24 -24
- package/example/src/App.vue +4 -3
- package/example/src/pages/PartnerWithUs.js +187 -0
- package/package.json +1 -1
- package/src/components/presenters/modules/ContactUs.vue +26 -24
- package/src/components/presenters/modules/StandardHeader.vue +1 -1
- package/src/components/presenters/modules/TwoColumnsImageContent.vue +4 -3
package/example/src/App.vue
CHANGED
|
@@ -7,6 +7,7 @@ import {OurCommitment} from "./pages/OurCommitment.js";
|
|
|
7
7
|
import {OurHistory} from "./pages/OurHistory.js";
|
|
8
8
|
import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
|
|
9
9
|
import {AdvisoryServices} from "./pages/AdvisoryService.js";
|
|
10
|
+
import {PartnerWithUs} from "./pages/PartnerWithUs.js";
|
|
10
11
|
|
|
11
12
|
const slide = {
|
|
12
13
|
title: "About ELAA",
|
|
@@ -90,10 +91,10 @@ const breadcrumbs = [
|
|
|
90
91
|
|
|
91
92
|
<template>
|
|
92
93
|
<div>
|
|
93
|
-
{{ JSON.stringify(
|
|
94
|
+
{{ JSON.stringify(PartnerWithUs) }}
|
|
94
95
|
<div style="margin: 40px 0">
|
|
95
96
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
|
|
96
|
-
<PageRender :page="
|
|
97
|
+
<PageRender :page="PartnerWithUs"/>
|
|
97
98
|
</div>
|
|
98
99
|
<div style="margin: 40px 0">
|
|
99
100
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
|
|
@@ -109,7 +110,7 @@ const breadcrumbs = [
|
|
|
109
110
|
</div>
|
|
110
111
|
<div style="margin: 40px 0">
|
|
111
112
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
|
|
112
|
-
<PageBuilder v-model="
|
|
113
|
+
<PageBuilder v-model="PartnerWithUs" :breadcrumbs="breadcrumbs"/>
|
|
113
114
|
</div>
|
|
114
115
|
</div>
|
|
115
116
|
</template>
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
export const PartnerWithUs =
|
|
2
|
+
{
|
|
3
|
+
title: "Advisory Services",
|
|
4
|
+
sections: [
|
|
5
|
+
{
|
|
6
|
+
title: "Standard header",
|
|
7
|
+
type: "standard_header",
|
|
8
|
+
components: [
|
|
9
|
+
{
|
|
10
|
+
name: "Standard header",
|
|
11
|
+
type: "header",
|
|
12
|
+
title: "Partnering for a Better Future in Early Childhood Education and Care",
|
|
13
|
+
supporting_text_max_length: 500,
|
|
14
|
+
text_center: true,
|
|
15
|
+
supporting_text: "ELAA is the national peak body championing excellence.",
|
|
16
|
+
featured_image: "https://beta-frontend.elaa.org.au/img/partners/header.png",
|
|
17
|
+
},
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
title: "Logo cloud",
|
|
22
|
+
type: "logo",
|
|
23
|
+
display: "vertical",
|
|
24
|
+
components: [
|
|
25
|
+
{
|
|
26
|
+
name: "Section header",
|
|
27
|
+
type: "header",
|
|
28
|
+
supporting_text: "ELAA’s preferred partners offer special benefits to ELAA members and support ELAA’s activities",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: 2,
|
|
32
|
+
name: "Logos",
|
|
33
|
+
type: "logos",
|
|
34
|
+
max_items: 7,
|
|
35
|
+
height: 'small',
|
|
36
|
+
data: [
|
|
37
|
+
{
|
|
38
|
+
url: "/",
|
|
39
|
+
logo: "https://beta-frontend.elaa.org.au/img/logos/anzuk.png",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
url: "/",
|
|
43
|
+
logo: "https://beta-frontend.elaa.org.au/img/logos/bunnings.png",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
url: "/",
|
|
47
|
+
logo: "https://beta-frontend.elaa.org.au/img/logos/hesta.png",
|
|
48
|
+
}, {
|
|
49
|
+
url: "/",
|
|
50
|
+
logo: "https://beta-frontend.elaa.org.au/img/partners/officeworks.png",
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
title: "Two columns with image and content",
|
|
58
|
+
type: "two_column_image_content",
|
|
59
|
+
display: "horizontal",
|
|
60
|
+
components: [
|
|
61
|
+
{
|
|
62
|
+
name: "Standard header",
|
|
63
|
+
type: "header",
|
|
64
|
+
title: "Our Partnership and Commitment",
|
|
65
|
+
text_center: true,
|
|
66
|
+
supporting_text_max_length: 500,
|
|
67
|
+
supporting_text: "We create software to address real-world needs — making life easier.",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: "Feature items",
|
|
71
|
+
type: "feature_items",
|
|
72
|
+
supportive_text: "Section can contain up to 10 items.",
|
|
73
|
+
grid_columns: 2,
|
|
74
|
+
has_background: true,
|
|
75
|
+
max_items: 20,
|
|
76
|
+
data: [
|
|
77
|
+
{
|
|
78
|
+
has_extra: true,
|
|
79
|
+
as_item: true,
|
|
80
|
+
title: "Excellence",
|
|
81
|
+
icon: "AlertCircle",
|
|
82
|
+
content_type: "content",
|
|
83
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
has_extra: true,
|
|
87
|
+
as_item: true,
|
|
88
|
+
title: "Equity",
|
|
89
|
+
icon: 'AlignLeft01',
|
|
90
|
+
content_type: "content",
|
|
91
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
has_extra: true,
|
|
95
|
+
as_item: true,
|
|
96
|
+
title: "Collaboration",
|
|
97
|
+
icon: 'AlignLeft01',
|
|
98
|
+
content_type: "content",
|
|
99
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
100
|
+
},
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
title: "Callout Section",
|
|
107
|
+
type: "callout",
|
|
108
|
+
components: [
|
|
109
|
+
{
|
|
110
|
+
name: "Callout Section",
|
|
111
|
+
type: "callout",
|
|
112
|
+
title: "Our Purpose",
|
|
113
|
+
has_extra: true,
|
|
114
|
+
title_label: "Eyebrow heading",
|
|
115
|
+
supporting_text_max_length: 500,
|
|
116
|
+
supporting_text: "To build meaningful, reliable, and human-centered software that solves real problems, empowers users, and advances innovation responsibly.",
|
|
117
|
+
supporting_text_label: "Message *",
|
|
118
|
+
},
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
title: "Bullet Points Section",
|
|
123
|
+
type: "bullet_points",
|
|
124
|
+
components: [
|
|
125
|
+
{
|
|
126
|
+
name: "Section header",
|
|
127
|
+
type: "header",
|
|
128
|
+
title: "Why Partner with ELAA?",
|
|
129
|
+
featured_image: "https://beta-frontend.elaa.org.au/img/partners/partner-with-us.png",
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
name: "Bullet Points",
|
|
133
|
+
type: "bullet_points",
|
|
134
|
+
supportive_text: "This section can contain up to 10 items.",
|
|
135
|
+
max_items: 10,
|
|
136
|
+
max_title: 500,
|
|
137
|
+
data: [
|
|
138
|
+
{
|
|
139
|
+
title: "We are uniquely placed to raise your business profile in the ECEC sector",
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
title: "Work with a values based peak body who are trusted by their members.",
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
title: "We have a dedicated, largely female audience – and we know what works for them.",
|
|
149
|
+
},
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
]
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
title: "Contact Us",
|
|
156
|
+
type: "contact_us",
|
|
157
|
+
components: [
|
|
158
|
+
{
|
|
159
|
+
name: "Standard header",
|
|
160
|
+
type: "header",
|
|
161
|
+
title: "Contact Us",
|
|
162
|
+
supporting_text: "If you have further questions regarding ELAA’s advisory services, please contact our Member Solutions Team via the options below.",
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
name: "Contact Us",
|
|
166
|
+
type: "contact_us",
|
|
167
|
+
data: [
|
|
168
|
+
{
|
|
169
|
+
show: true,
|
|
170
|
+
name: 'Call Button',
|
|
171
|
+
label: 'Call us',
|
|
172
|
+
address: '+61 3 9412 6199',
|
|
173
|
+
type: 'phone',
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
show: true,
|
|
177
|
+
name: 'Email button',
|
|
178
|
+
label: 'Email us',
|
|
179
|
+
address: 'elaa@gmail.com',
|
|
180
|
+
type: 'email',
|
|
181
|
+
},
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
]
|
|
187
|
+
};
|
package/package.json
CHANGED
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden">
|
|
3
|
-
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]
|
|
4
|
-
<div
|
|
5
|
-
<div class="flex justify-
|
|
6
|
-
<div class="
|
|
7
|
-
<
|
|
3
|
+
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px] flex justify-center">
|
|
4
|
+
<div class="bg-gray-100 rounded-[16px] flex justify-center w-full" v-if="headerComponent">
|
|
5
|
+
<div class="flex items-center justify-center flex-col py-[40px] max-w-[820px]">
|
|
6
|
+
<div class="flex justify-between relative w-[150px]">
|
|
7
|
+
<div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
|
|
8
|
+
<Phone class="w-6 h-6 text-gray-600"></Phone>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
11
|
+
<Help class="w-6 h-6 text-gray-600"></Help>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
|
|
14
|
+
<Email class="w-6 h-6 text-gray-600"></Email>
|
|
15
|
+
</div>
|
|
8
16
|
</div>
|
|
9
|
-
<
|
|
10
|
-
|
|
17
|
+
<h3 class="text-[24px] text-gray-900 font-semibold mt-4">{{ headerComponent.title }}</h3>
|
|
18
|
+
<p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal mt-2 text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
|
|
19
|
+
<div class="flex gap-2">
|
|
20
|
+
<template v-for="item in contactUs.data">
|
|
21
|
+
<a
|
|
22
|
+
v-if="item?.show"
|
|
23
|
+
class="inline-flex gap-1.5 items-center font-semibold text-base mt-4 px-5 py-2.5 rounded-full"
|
|
24
|
+
:class="{'text-brand-700 hover:bg-white border border-brand-300': item.type === 'phone', 'text-white bg-brand-600 hover:bg-brand-800': item.type === 'email'}"
|
|
25
|
+
:href="`${item.type === 'email' ? 'mailto:' : 'tel:'} ${item.address}`">
|
|
26
|
+
{{ item.label }}
|
|
27
|
+
<ArrowUpRight class="w-5 h-5"></ArrowUpRight>
|
|
28
|
+
</a>
|
|
29
|
+
</template>
|
|
11
30
|
</div>
|
|
12
|
-
<div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
|
|
13
|
-
<Email class="w-6 h-6 text-gray-600"></Email>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
<h3 class="text-[24px] text-gray-900 font-semibold mt-4">{{ headerComponent.title }}</h3>
|
|
17
|
-
<p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal mt-2 text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
|
|
18
|
-
<div class="flex gap-2">
|
|
19
|
-
<template v-for="item in contactUs.data">
|
|
20
|
-
<a
|
|
21
|
-
v-if="item?.show"
|
|
22
|
-
class="inline-flex gap-1.5 items-center font-semibold text-base mt-4 px-5 py-2.5 rounded-full"
|
|
23
|
-
:class="{'text-brand-700 hover:bg-white border border-brand-300': item.type === 'phone', 'text-white bg-brand-600 hover:bg-brand-800': item.type === 'email'}"
|
|
24
|
-
:href="`${item.type === 'email' ? 'mailto:' : 'tel:'} ${item.address}`">
|
|
25
|
-
{{ item.label }}
|
|
26
|
-
<ArrowUpRight class="w-5 h-5"></ArrowUpRight>
|
|
27
|
-
</a>
|
|
28
|
-
</template>
|
|
29
31
|
</div>
|
|
30
32
|
</div>
|
|
31
33
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
|
|
4
4
|
class="md:px-[90px]"
|
|
5
5
|
:class="{'flex flex-col items-center text-center': section.components[0]?.center, 'mb-[64px]': hasFeaturedImage}">
|
|
6
|
-
<div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]">
|
|
6
|
+
<div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]" :class="{'flex flex-col items-center text-center': section.components[0]?.text_center}">
|
|
7
7
|
<h3 class="text-[48px] font-semibold text-gray-900 w-full max-w-[800px] leading-[60px] tracking-[-1px]">{{ section.components[0].title }}</h3>
|
|
8
8
|
<h3 class="text-xl font-normal text-gray-600 mt-3 w-full max-w-[800px]" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
|
|
9
9
|
<img
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
<div
|
|
16
16
|
v-if="headerComponent"
|
|
17
17
|
class="w-full flex-col mb-6"
|
|
18
|
+
:class="{'text-center': headerComponent?.text_center}"
|
|
18
19
|
>
|
|
19
20
|
<h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
|
|
20
21
|
<p v-if="headerComponent?.supporting_text"
|
|
@@ -25,9 +26,9 @@
|
|
|
25
26
|
<div class="grid gap-8"
|
|
26
27
|
:class="featureItemsComponent.hasOwnProperty('grid_columns') ? `grid-cols-${featureItemsComponent.grid_columns}` : 'grid-cols-2 w-2/3'">
|
|
27
28
|
<div v-for="item in featureItemsComponent.data"
|
|
28
|
-
class="flex gap-3"
|
|
29
|
+
class="flex gap-3 w-full"
|
|
29
30
|
:class="{
|
|
30
|
-
'bg-gray-50 p-8 rounded-tl-[24px] rounded-br-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && featureItemsComponent.grid_columns > 2,
|
|
31
|
+
'bg-gray-50 p-8 rounded-tl-[24px] rounded-br-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
|
|
31
32
|
'!p-0': item?.image
|
|
32
33
|
}">
|
|
33
34
|
<template v-if="item.title">
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
class="max-w-[48px] min-w-[48px] w-full h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
|
|
36
37
|
<IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
|
|
37
38
|
</div>
|
|
38
|
-
<div class="max-w-[324px]">
|
|
39
|
+
<div class="max-w-[324px]" :class="{'max-w-full': featureItemsComponent?.has_background}">
|
|
39
40
|
<h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
|
|
40
41
|
<p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
|
|
41
42
|
</div>
|