@dcodegroup-au/page-builder 0.7.9 → 0.8.1
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 +21 -19
- package/dist/page-builder.es.js +149 -111
- package/dist/page-builder.umd.js +149 -111
- package/example/src/App.vue +56 -56
- package/example/src/pages/BestLife.js +1 -0
- package/example/src/pages/Vectea2024.js +1 -1
- package/package.json +1 -1
- package/src/components/builders/VideoGrid.vue +17 -0
- package/src/components/presenters/components/CollectionGridPresenter.vue +38 -17
- package/src/components/presenters/modules/BulletPoints.vue +2 -2
- package/src/components/presenters/modules/Paragraph.vue +10 -3
- package/src/components/presenters/modules/TwoColumnsImageContent.vue +6 -8
package/example/src/App.vue
CHANGED
|
@@ -109,81 +109,81 @@ const breadcrumbs = [
|
|
|
109
109
|
|
|
110
110
|
<template>
|
|
111
111
|
<div>
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
<div style="margin: 40px 0;">
|
|
113
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>
|
|
114
114
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
115
|
+
<PageRender :page="AboutUs" />
|
|
116
|
+
</div>
|
|
117
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
118
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>
|
|
119
119
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
<PageRender :page="AdvocaryAndResearch" />
|
|
121
|
+
</div>
|
|
122
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
123
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>
|
|
124
124
|
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
<PageRender :page="BestLife" />
|
|
126
|
+
</div>
|
|
127
127
|
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
128
128
|
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Home</h1>
|
|
129
129
|
|
|
130
130
|
<PageRender :page="Home" />
|
|
131
131
|
</div>
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
133
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>
|
|
134
134
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
<PageRender :page="OurCommitment" />
|
|
136
|
+
</div>
|
|
137
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
138
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>
|
|
139
139
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
140
|
+
<PageRender :page="OurHistory" />
|
|
141
|
+
</div>
|
|
142
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
143
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>
|
|
144
144
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
145
|
+
<PageRender :page="PartnerWithUs" />
|
|
146
|
+
</div>
|
|
147
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
148
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>
|
|
149
149
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
<PageRender :page="Vectea2024" />
|
|
151
|
+
</div>
|
|
152
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
153
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
155
|
+
<PageRender :page="AdvisoryServices" />
|
|
156
|
+
</div>
|
|
157
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
158
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>
|
|
159
159
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
<PageRender :page="AssessmentSupportService" />
|
|
161
|
+
</div>
|
|
162
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
163
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>
|
|
164
164
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
165
|
+
<PageRender :page="ChildSafeStandard" />
|
|
166
|
+
</div>
|
|
167
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
168
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>
|
|
169
169
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
170
|
+
<PageRender :page="LandingPage" />
|
|
171
|
+
</div>
|
|
172
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
173
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>
|
|
174
174
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
175
|
+
<PageRender :page="OurGroups" />
|
|
176
|
+
</div>
|
|
177
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
178
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>
|
|
179
179
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
180
|
+
<PageRender :page="OurVision" />
|
|
181
|
+
</div>
|
|
182
|
+
<div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
|
|
183
|
+
<h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>
|
|
184
184
|
|
|
185
|
-
|
|
186
|
-
|
|
185
|
+
<PageRender :page="SAEW" />
|
|
186
|
+
</div>
|
|
187
187
|
|
|
188
188
|
<!------------------------------------------|||---------------------------------------------->
|
|
189
189
|
|
|
@@ -192,6 +192,7 @@ export const BestLife = {
|
|
|
192
192
|
data: [
|
|
193
193
|
{
|
|
194
194
|
video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
|
|
195
|
+
youtube_url: "https://www.youtube.com/watch?v=cEpTYBuR7vY",
|
|
195
196
|
},
|
|
196
197
|
{
|
|
197
198
|
video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
|
|
@@ -23,7 +23,7 @@ export const Vectea2024 =
|
|
|
23
23
|
name: "Paragraph section",
|
|
24
24
|
type: "paragraph",
|
|
25
25
|
title: "ELAA is proudly supporting",
|
|
26
|
-
paragraph: '<p>
|
|
26
|
+
paragraph: '<p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025</p>',
|
|
27
27
|
featured_image: "https://beta.elaa.org.au/img/what-we-do/vectea-2024/01.jpg",
|
|
28
28
|
},
|
|
29
29
|
]
|
package/package.json
CHANGED
|
@@ -37,6 +37,22 @@
|
|
|
37
37
|
<ActionMenu @removeItem="handleDeleteItem(index)"/>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
+
<InputWrapper
|
|
41
|
+
is-vertical
|
|
42
|
+
field="line.title"
|
|
43
|
+
label-text="Youtube URL"
|
|
44
|
+
class="w-full"
|
|
45
|
+
:value="item.youtube_url"
|
|
46
|
+
>
|
|
47
|
+
<input
|
|
48
|
+
v-model="item.youtube_url"
|
|
49
|
+
name="youtube_url.youtube_url"
|
|
50
|
+
type="text"
|
|
51
|
+
placeholder="Url"
|
|
52
|
+
class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
|
|
53
|
+
/>
|
|
54
|
+
</InputWrapper>
|
|
55
|
+
<p>OR</p>
|
|
40
56
|
<div class="flex flex-col gap-6">
|
|
41
57
|
<div class="flex flex-col gap-1.5">
|
|
42
58
|
<VFileUpload
|
|
@@ -59,6 +75,7 @@ import {defaultProps} from "@/components/helpers/defaultProps";
|
|
|
59
75
|
import ActionMenu from "@/components/common/ActionMenu.vue";
|
|
60
76
|
import VModal from "@/components/common/Modal.vue";
|
|
61
77
|
import DefaultFileUpload from "@/components/common/FileUpload.vue";
|
|
78
|
+
import InputWrapper from "@/components/common/InputWrapper.vue";
|
|
62
79
|
|
|
63
80
|
// Inject the FileUpload component or fallback to the default one
|
|
64
81
|
const VFileUpload = inject("VFileUpload", DefaultFileUpload);
|
|
@@ -1,24 +1,35 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
|
|
3
3
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
|
|
4
|
-
<div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4">
|
|
5
|
-
<div v-if="component.type === 'video_grid'" class="relative group">
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
<div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4 w-full">
|
|
5
|
+
<div v-if="component.type === 'video_grid'" class="relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden">
|
|
6
|
+
<div v-if="card?.youtube_url && getEmbedUrl(card)" class="w-full h-[281px] md:rounded-2xl">
|
|
7
|
+
<iframe
|
|
8
|
+
:src="getEmbedUrl(card)"
|
|
9
|
+
frameborder="0"
|
|
10
|
+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
11
|
+
allowfullscreen
|
|
12
|
+
class="w-full h-full"
|
|
13
|
+
></iframe>
|
|
14
|
+
</div>
|
|
15
|
+
<template v-else>
|
|
16
|
+
<video
|
|
17
|
+
@click="togglePlayPause(index)"
|
|
18
|
+
:ref="(el) => setVideoRef(el, index)"
|
|
19
|
+
class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
|
|
20
|
+
width="640"
|
|
21
|
+
height="360"
|
|
22
|
+
preload="metadata"
|
|
23
|
+
>
|
|
24
|
+
<source :src="`${card.video}#t=2`" />
|
|
25
|
+
</video>
|
|
26
|
+
<PlayButton
|
|
27
|
+
v-if="!isPlaying[index]"
|
|
28
|
+
class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
|
|
29
|
+
@click="togglePlayPause(index)">
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
</PlayButton>
|
|
32
|
+
</template>
|
|
22
33
|
</div>
|
|
23
34
|
<img
|
|
24
35
|
v-else-if="card.image"
|
|
@@ -114,6 +125,16 @@ const setVideoRef = (el, index) => {
|
|
|
114
125
|
videoRefs.value[index] = el;
|
|
115
126
|
}
|
|
116
127
|
};
|
|
128
|
+
|
|
129
|
+
const getEmbedUrl = (item) => {
|
|
130
|
+
if (!item.youtube_url) return null;
|
|
131
|
+
// match common YouTube URL formats and extract the 11-char id
|
|
132
|
+
const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
|
|
133
|
+
const id = m ? m[1] : null;
|
|
134
|
+
if (!id) return null;
|
|
135
|
+
return `https://www.youtube.com/embed/${id}`;
|
|
136
|
+
};
|
|
137
|
+
|
|
117
138
|
</script>
|
|
118
139
|
|
|
119
140
|
<style scoped>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
|
|
6
6
|
<img v-if="headerComponent?.featured_image"
|
|
7
7
|
:src="headerComponent?.featured_image"
|
|
8
|
-
class="max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
|
|
8
|
+
class="lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
|
|
9
9
|
ref="leftColumn"
|
|
10
10
|
alt="Feature"/>
|
|
11
11
|
<div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': section?.two_column}"
|
|
@@ -61,7 +61,7 @@ const bulletPointsComponents = computed(() => {
|
|
|
61
61
|
});
|
|
62
62
|
|
|
63
63
|
onMounted(() => {
|
|
64
|
-
if (leftColumn.value && rightColumn.value) {
|
|
64
|
+
if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
|
|
65
65
|
leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
|
|
66
66
|
}
|
|
67
67
|
});
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden mt-4">
|
|
3
|
-
<div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row"
|
|
3
|
+
<div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row"
|
|
4
|
+
:class="{
|
|
5
|
+
'[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert,
|
|
6
|
+
'justify-center': section?.center,
|
|
7
|
+
'md:!px-0 !ml-0 justify-end': section?.align_left
|
|
8
|
+
}">
|
|
4
9
|
<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
10
|
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" v-if="component?.title">
|
|
6
11
|
{{ component.title }}
|
|
@@ -14,7 +19,9 @@
|
|
|
14
19
|
</div>
|
|
15
20
|
</div>
|
|
16
21
|
</div>
|
|
17
|
-
<div
|
|
22
|
+
<div v-if="component?.featured_image" ref="rightColumn"
|
|
23
|
+
class="w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
|
|
24
|
+
>
|
|
18
25
|
<div v-if="component?.source_type === 'video'" class="w-full h-full relative">
|
|
19
26
|
<video
|
|
20
27
|
@click="togglePlayPause"
|
|
@@ -65,7 +72,7 @@ const button = computed(() => {
|
|
|
65
72
|
})
|
|
66
73
|
|
|
67
74
|
onMounted(() => {
|
|
68
|
-
if (leftColumn.value && rightColumn.value) {
|
|
75
|
+
if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
|
|
69
76
|
rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
|
|
70
77
|
}
|
|
71
78
|
});
|
|
@@ -8,10 +8,8 @@
|
|
|
8
8
|
<h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
|
|
9
9
|
<p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
|
|
10
10
|
</div>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
<p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
|
|
14
|
-
</div>
|
|
11
|
+
<img v-if="imageComponent" :src="imageComponent.featured_image" :alt="imageComponent.caption"
|
|
12
|
+
class="w-full rounded-xl"/>
|
|
15
13
|
</div>
|
|
16
14
|
<div v-else class="my-[44px]">
|
|
17
15
|
<div
|
|
@@ -26,7 +24,7 @@
|
|
|
26
24
|
</div>
|
|
27
25
|
<div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-col-reverse md:flex-row gap-8'">
|
|
28
26
|
<div class="grid gap-8"
|
|
29
|
-
:class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 w-2/3'">
|
|
27
|
+
:class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 lg:w-2/3'">
|
|
30
28
|
<div v-for="item in items"
|
|
31
29
|
class="flex gap-3 w-full"
|
|
32
30
|
:class="{
|
|
@@ -38,7 +36,7 @@
|
|
|
38
36
|
class="max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
|
|
39
37
|
<IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
|
|
40
38
|
</div>
|
|
41
|
-
<div class="max-w-[324px] ql-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
|
|
39
|
+
<div class="md:max-w-[324px] ql-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
|
|
42
40
|
<h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
|
|
43
41
|
<p class=" mt-2 text-md font-normal text-gray-600 leading-[24px]" v-html="item.supporting_text ?? item.description"></p>
|
|
44
42
|
<a
|
|
@@ -54,9 +52,9 @@
|
|
|
54
52
|
<img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
|
|
55
53
|
</div>
|
|
56
54
|
</div>
|
|
57
|
-
<div v-if="imageComponent" class="w-[560px]">
|
|
55
|
+
<div v-if="imageComponent" class="w-full md:w-[560px] flex">
|
|
58
56
|
<img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
|
|
59
|
-
class="rounded-br-[24px] rounded-tl-[24px] w-full"/>
|
|
57
|
+
class="rounded-br-[24px] rounded-tl-[24px] w-full object-cover" />
|
|
60
58
|
</div>
|
|
61
59
|
</div>
|
|
62
60
|
</div>
|