@dcodegroup-au/page-builder 0.3.7 → 0.3.9
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 +1765 -1707
- package/dist/page-builder.umd.js +41 -41
- package/example/src/App.vue +2 -1
- package/example/src/pages/OurCommitment.js +106 -0
- package/package.json +1 -1
- package/src/components/builders/Header.vue +14 -2
- package/src/components/presenters/modules/Callout.vue +37 -9
- package/src/components/presenters/modules/LinkCard.vue +1 -2
- package/src/components/presenters/modules/LinkList.vue +6 -2
package/example/src/App.vue
CHANGED
|
@@ -3,6 +3,7 @@ import {Home} from "./pages/Home.js";
|
|
|
3
3
|
import {BestLife} from "./pages/BestLife.js";
|
|
4
4
|
import {AboutUs} from "./pages/AboutUs.js";
|
|
5
5
|
import {OurVision} from "./pages/OurVision.js";
|
|
6
|
+
import {OurCommitment} from "./pages/OurCommitment.js";
|
|
6
7
|
|
|
7
8
|
const slide = {
|
|
8
9
|
title: "About ELAA",
|
|
@@ -89,7 +90,7 @@ const breadcrumbs = [
|
|
|
89
90
|
{{ JSON.stringify(OurVision) }}
|
|
90
91
|
<div style="margin: 40px 0">
|
|
91
92
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
|
|
92
|
-
<PageRender :page="
|
|
93
|
+
<PageRender :page="OurCommitment"/>
|
|
93
94
|
</div>
|
|
94
95
|
<div style="margin: 40px 0">
|
|
95
96
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
export const OurCommitment =
|
|
2
|
+
{
|
|
3
|
+
title: "Our Commitment",
|
|
4
|
+
sections: [
|
|
5
|
+
{
|
|
6
|
+
title: "Standard header",
|
|
7
|
+
type: "standard_header",
|
|
8
|
+
components: [
|
|
9
|
+
{
|
|
10
|
+
name: "Standard header",
|
|
11
|
+
type: "header",
|
|
12
|
+
title: "Our Commitment",
|
|
13
|
+
supporting_text_max_length: 500,
|
|
14
|
+
supporting_text: "ELAA is the national peak body championing excellence in early learning for children and supporting parents and service. For over 30 years Early Learning Association Australia (ELAA) has been working with parents and early learning providers toward a shared vision of excellence in early learning for every child.",
|
|
15
|
+
},
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: "Callout Section",
|
|
20
|
+
type: "callout",
|
|
21
|
+
acknowledgement_style: true,
|
|
22
|
+
components: [
|
|
23
|
+
{
|
|
24
|
+
name: "Image Block",
|
|
25
|
+
type: "image_block",
|
|
26
|
+
featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose-2.png",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "Content Block",
|
|
30
|
+
type: "callout",
|
|
31
|
+
supporting_text: "ELAA’s members operate across all of Victoria. We acknowledge the traditional owners of the land that our members services are on and pay our respects to Elders past, present and future and pay our respects to all Aboriginal and Torres Strait Islander communities, land and water in these regions.",
|
|
32
|
+
supporting_text_label: "Text *",
|
|
33
|
+
supporting_text_max_length: 500,
|
|
34
|
+
featured_image: "https://dev.elaa.com/img/reconciliation/flag-1.png",
|
|
35
|
+
featured_image2: "https://dev.elaa.com/img/reconciliation/flag-2.png"
|
|
36
|
+
},
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
title: "Link list section",
|
|
41
|
+
type: "link_list",
|
|
42
|
+
two_columns: false,
|
|
43
|
+
components: [
|
|
44
|
+
{
|
|
45
|
+
name: "Section header",
|
|
46
|
+
type: "header",
|
|
47
|
+
has_extra: true,
|
|
48
|
+
title: 'Learn More',
|
|
49
|
+
dark: true,
|
|
50
|
+
supporting_text: 'Learn more about the Traditional owners of the land our members work on.',
|
|
51
|
+
featured_image: "https://dev.elaa.com/img/reconciliation/learn-more.png",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "Links",
|
|
55
|
+
type: "links",
|
|
56
|
+
supportive_text: "Manage the links.",
|
|
57
|
+
max_items: 20,
|
|
58
|
+
data: [
|
|
59
|
+
{
|
|
60
|
+
title: "The Best Start Best Life reforms",
|
|
61
|
+
url: '/admin', // external could be an url
|
|
62
|
+
type: 'site-content',
|
|
63
|
+
open_in_new_tab: true,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
title: "Pre Prep – Four-Year-Old Kindergarten is becoming Pre-Prep",
|
|
67
|
+
url: 'https://google.com', // external could be an url
|
|
68
|
+
type: 'external-page',
|
|
69
|
+
open_in_new_tab: true,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
title: "Transforming early childhood education together: What we heard what we’re doing report",
|
|
73
|
+
url: 'https://google.com', // external could be an url
|
|
74
|
+
type: 'external-page',
|
|
75
|
+
open_in_new_tab: true,
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
title: "What we’re doing to support the workforce",
|
|
79
|
+
url: 'https://google.com', // external could be an url
|
|
80
|
+
type: 'external-page',
|
|
81
|
+
open_in_new_tab: true,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
title: "What we’re doing to support the workforce",
|
|
85
|
+
url: 'https://google.com', // external could be an url
|
|
86
|
+
type: 'external-page',
|
|
87
|
+
open_in_new_tab: true,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
title: "What we’re doing to support the workforce",
|
|
91
|
+
url: 'https://google.com', // external could be an url
|
|
92
|
+
type: 'external-page',
|
|
93
|
+
open_in_new_tab: true,
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
title: "What we’re doing to support the workforce",
|
|
97
|
+
url: 'https://google.com', // external could be an url
|
|
98
|
+
type: 'external-page',
|
|
99
|
+
open_in_new_tab: true,
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
]
|
|
106
|
+
};
|
package/package.json
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<p class="text-lg font-semibold text-gray-900 pb-4" :class="{'border-b border-gray-200': !dataRef?.has_extra}">
|
|
4
4
|
{{ dataRef?.name }}
|
|
5
5
|
</p>
|
|
6
|
-
<div class="flex flex-col gap-4
|
|
7
|
-
<div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}">
|
|
6
|
+
<div class="flex flex-col gap-4 rounded-xl py-5 bg-gray-50 px-0" :class="{'!bg-gray-200 !px-6': dataRef?.hasOwnProperty('has_extra')}">
|
|
7
|
+
<div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}" v-if="dataRef.hasOwnProperty('icon') || dataRef.hasOwnProperty('title')">
|
|
8
8
|
<input-wrapper
|
|
9
9
|
v-if="dataRef.hasOwnProperty('icon')"
|
|
10
10
|
is-vertical
|
|
@@ -66,6 +66,18 @@
|
|
|
66
66
|
/>
|
|
67
67
|
</card>
|
|
68
68
|
</div>
|
|
69
|
+
<div class="flex flex-col gap-4 bg-gray-200 rounded-xl px-6 py-5 mt-4"
|
|
70
|
+
v-if="dataRef.hasOwnProperty('featured_image2')">
|
|
71
|
+
<card class="!p-0 !bg-gray-200" title="Featured Image"
|
|
72
|
+
supporting_text="Recommended dimension: 1200*1060px">
|
|
73
|
+
<VFileUpload
|
|
74
|
+
name="image"
|
|
75
|
+
class="!bg-gray-200"
|
|
76
|
+
height="h-[395px]"
|
|
77
|
+
v-model="dataRef.featured_image2"
|
|
78
|
+
/>
|
|
79
|
+
</card>
|
|
80
|
+
</div>
|
|
69
81
|
</div>
|
|
70
82
|
</template>
|
|
71
83
|
<script setup>
|
|
@@ -1,16 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden">
|
|
3
|
-
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]"
|
|
4
|
+
:class="{'flex gap-8': headerComponent?.featured_image}">
|
|
5
|
+
<div class="w-1/3">
|
|
6
|
+
<img v-if="imageComponent && section?.acknowledgement_style"
|
|
7
|
+
:src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
|
|
8
|
+
class="w-[560px] object-cover rounded-[24px]"/>
|
|
9
|
+
<img v-if="headerComponent?.featured_image && !section?.acknowledgement_style"
|
|
10
|
+
:src="headerComponent?.featured_image"
|
|
11
|
+
class="w-[560px] object-cover rounded-[24px]"
|
|
12
|
+
alt="Feature"/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
8
15
|
<div v-if="headerComponent"
|
|
9
|
-
class="
|
|
10
|
-
:class="{
|
|
16
|
+
class="rounded-[24px] flex items-center justify-center flex-col"
|
|
17
|
+
:class="{
|
|
18
|
+
'bg-pale-100 min-h-[320px] w-2/3': !headerComponent?.featured_image,
|
|
19
|
+
'border border-brand-400 w-2/3': headerComponent?.featured_image,
|
|
20
|
+
'w-full': !section?.acknowledgement_style,
|
|
21
|
+
}"
|
|
11
22
|
>
|
|
12
|
-
<h3 class="text-xl text-brand-600 font-semibold
|
|
13
|
-
<p v-if="headerComponent?.supporting_text"
|
|
23
|
+
<h3 class="text-xl text-brand-600 font-semibold px-[56px]">{{ headerComponent.title }}</h3>
|
|
24
|
+
<p v-if="headerComponent?.supporting_text"
|
|
25
|
+
class="mt-2 px-[56px]"
|
|
26
|
+
:class="{'text-normal text-[20px] text-gray-700 leading-[30px]': section?.acknowledgement_style, 'text-[30px] font-semibold text-gray-900 leading-[38px] text-center': !section?.acknowledgement_style}"
|
|
27
|
+
v-html="headerComponent.supporting_text">
|
|
28
|
+
</p>
|
|
29
|
+
<div class="flex gap-1 mt-4">
|
|
30
|
+
<img v-if="headerComponent?.featured_image && section?.acknowledgement_style"
|
|
31
|
+
:src="headerComponent?.featured_image"
|
|
32
|
+
class="w-[160px] object-cover rounded-[24px]"
|
|
33
|
+
alt="Feature"/>
|
|
34
|
+
<img v-if="headerComponent?.featured_image2 && section?.acknowledgement_style"
|
|
35
|
+
:src="headerComponent?.featured_image2"
|
|
36
|
+
class="w-[160px] object-cover rounded-[24px]"
|
|
37
|
+
alt="Feature"/>
|
|
38
|
+
</div>
|
|
14
39
|
</div>
|
|
15
40
|
</div>
|
|
16
41
|
</div>
|
|
@@ -29,4 +54,7 @@ const section = ref(props.section);
|
|
|
29
54
|
const headerComponent = computed(() => {
|
|
30
55
|
return section.value.components.find((component) => component.type === "callout");
|
|
31
56
|
});
|
|
57
|
+
const imageComponent = computed(() => {
|
|
58
|
+
return section.value.components.find((component) => component.type === "image_block");
|
|
59
|
+
});
|
|
32
60
|
</script>
|
|
@@ -8,9 +8,8 @@
|
|
|
8
8
|
<div v-if="cardComponent" class="flex w-full" :class="{'gap-8': headerComponent?.featured_image}">
|
|
9
9
|
<img v-if="headerComponent?.featured_image"
|
|
10
10
|
:src="headerComponent?.featured_image"
|
|
11
|
-
class="w-1/2 h-[492px] rounded-br-[24px] rounded-tl-[24px]"
|
|
11
|
+
class="w-1/2 h-[492px] rounded-br-[24px] rounded-tl-[24px] object-cover"
|
|
12
12
|
alt="Feature"/>
|
|
13
|
-
|
|
14
13
|
<div class="flex gap-8 w-full" :class="{'!w-1/2 flex-col': headerComponent?.featured_image}">
|
|
15
14
|
<div v-for="(data, index) in cardComponent.data" class="relative bg-white p-8 rounded-[24px] w-full">
|
|
16
15
|
<div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden">
|
|
3
3
|
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex gap-[10%]">
|
|
4
|
-
<div v-for="(header, index) in headerComponents"
|
|
4
|
+
<div v-for="(header, index) in headerComponents" class="gap-4" :class="{'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
6
|
<h3 class="text-[36px] text-gray-900 font-semibold">{{ 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
|
+
<img v-if="header?.featured_image"
|
|
10
|
+
:src="header?.featured_image"
|
|
11
|
+
class="rounded-[24px] w-full h-[480px] object-cover mb-6"
|
|
12
|
+
alt="Feature"/>
|
|
9
13
|
<div v-if="linkComponents[index]" class="flex w-full">
|
|
10
|
-
<div class="flex flex-col gap-4 w-full">
|
|
14
|
+
<div :class="{'grid grid-cols-2 gap-x-[100px]': !section.two_columns, 'flex flex-col gap-4 w-full': section.two_columns}">
|
|
11
15
|
<div v-for="(link, index) in linkComponents[index].data" class="relative bg-white hover:bg-gray-100 p-2 rounded-lg w-full">
|
|
12
16
|
<a
|
|
13
17
|
v-if="link.url"
|