@dcodegroup-au/page-builder 0.3.6 → 0.3.8
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 +6596 -6438
- package/dist/page-builder.umd.js +45 -45
- package/example/src/App.vue +5 -2
- package/example/src/pages/BestLife.js +0 -1
- package/example/src/pages/OurCommitment.js +106 -0
- package/example/src/pages/OurVision.js +148 -0
- package/package.json +1 -1
- package/src/components/PageBuilder.vue +2 -0
- package/src/components/PageRender.vue +2 -0
- package/src/components/builders/Header.vue +19 -11
- package/src/components/builders/Links.vue +9 -2
- package/src/components/helpers/defaultProps.js +1 -1
- package/src/components/helpers/pageBuilderFactory.js +11 -1
- package/src/components/presenters/modules/Callout.vue +60 -0
- package/src/components/presenters/modules/LinkCard.vue +1 -2
- package/src/components/presenters/modules/LinkList.vue +6 -2
- package/src/components/presenters/modules/TwoColumnsImageContent.vue +37 -2
- package/tailwind.config.js +3 -0
package/example/src/App.vue
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import {Home} from "./pages/Home.js";
|
|
3
3
|
import {BestLife} from "./pages/BestLife.js";
|
|
4
4
|
import {AboutUs} from "./pages/AboutUs.js";
|
|
5
|
+
import {OurVision} from "./pages/OurVision.js";
|
|
6
|
+
import {OurCommitment} from "./pages/OurCommitment.js";
|
|
5
7
|
|
|
6
8
|
const slide = {
|
|
7
9
|
title: "About ELAA",
|
|
@@ -85,9 +87,10 @@ const breadcrumbs = [
|
|
|
85
87
|
|
|
86
88
|
<template>
|
|
87
89
|
<div>
|
|
90
|
+
{{ JSON.stringify(OurVision) }}
|
|
88
91
|
<div style="margin: 40px 0">
|
|
89
92
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
|
|
90
|
-
<PageRender :page="
|
|
93
|
+
<PageRender :page="OurVision"/>
|
|
91
94
|
</div>
|
|
92
95
|
<div style="margin: 40px 0">
|
|
93
96
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
|
|
@@ -103,7 +106,7 @@ const breadcrumbs = [
|
|
|
103
106
|
</div>
|
|
104
107
|
<div style="margin: 40px 0">
|
|
105
108
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
|
|
106
|
-
<PageBuilder v-model="
|
|
109
|
+
<PageBuilder v-model="OurVision" :breadcrumbs="breadcrumbs"/>
|
|
107
110
|
</div>
|
|
108
111
|
</div>
|
|
109
112
|
</template>
|
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
export const OurVision =
|
|
2
|
+
{
|
|
3
|
+
title: "Our Vision & History",
|
|
4
|
+
sections: [
|
|
5
|
+
{
|
|
6
|
+
title: "Standard header",
|
|
7
|
+
type: "standard_header",
|
|
8
|
+
components: [
|
|
9
|
+
{
|
|
10
|
+
name: "Standard header",
|
|
11
|
+
type: "header",
|
|
12
|
+
title: "Our Vision & History",
|
|
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
|
+
components: [
|
|
22
|
+
{
|
|
23
|
+
name: "Callout Section",
|
|
24
|
+
type: "callout",
|
|
25
|
+
title: "Our Vision",
|
|
26
|
+
has_extra: true,
|
|
27
|
+
title_label: "Eyebrow heading",
|
|
28
|
+
supporting_text: "Excellence and equity in early childhood education and care",
|
|
29
|
+
supporting_text_label: "Message *",
|
|
30
|
+
featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose.png"
|
|
31
|
+
},
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
title: "Callout Section",
|
|
36
|
+
type: "callout",
|
|
37
|
+
components: [
|
|
38
|
+
{
|
|
39
|
+
name: "Callout Section",
|
|
40
|
+
type: "callout",
|
|
41
|
+
title: "Our Purpose",
|
|
42
|
+
has_extra: true,
|
|
43
|
+
title_label: "Eyebrow heading",
|
|
44
|
+
supporting_text: "To build meaningful, reliable, and human-centered software that solves real problems, empowers users, and advances innovation responsibly.",
|
|
45
|
+
supporting_text_label: "Message *",
|
|
46
|
+
},
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
title: "Two columns with image and content",
|
|
51
|
+
type: "two_column_image_content",
|
|
52
|
+
display: "horizontal",
|
|
53
|
+
components: [
|
|
54
|
+
{
|
|
55
|
+
name: "Image Block",
|
|
56
|
+
type: "image_block",
|
|
57
|
+
featured_image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose-2.png",
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
name: "Standard header",
|
|
61
|
+
type: "header",
|
|
62
|
+
title: "Our values",
|
|
63
|
+
supporting_text_max_length: 500,
|
|
64
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent.",
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: "Feature items",
|
|
68
|
+
type: "feature_items",
|
|
69
|
+
supportive_text: "Section can contain up to 10 items.",
|
|
70
|
+
max_items: 10,
|
|
71
|
+
data: [
|
|
72
|
+
{
|
|
73
|
+
has_extra: true,
|
|
74
|
+
as_item: true,
|
|
75
|
+
title: "Excellence",
|
|
76
|
+
icon: "AlertCircle",
|
|
77
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
has_extra: true,
|
|
81
|
+
as_item: true,
|
|
82
|
+
title: "Equity",
|
|
83
|
+
icon: 'AlignLeft01',
|
|
84
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
has_extra: true,
|
|
88
|
+
as_item: true,
|
|
89
|
+
title: "Collaboration",
|
|
90
|
+
icon: 'AlignLeft01',
|
|
91
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
has_extra: true,
|
|
95
|
+
as_item: true,
|
|
96
|
+
title: "Collaboration",
|
|
97
|
+
icon: 'AlignLeft01',
|
|
98
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
has_extra: true,
|
|
102
|
+
as_item: true,
|
|
103
|
+
title: "Collaboration",
|
|
104
|
+
icon: 'AlignLeft01',
|
|
105
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
106
|
+
},
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
title: "Bullet Points Section",
|
|
113
|
+
type: "bullet_points",
|
|
114
|
+
components: [
|
|
115
|
+
{
|
|
116
|
+
name: "Section header",
|
|
117
|
+
type: "header",
|
|
118
|
+
title: "Support Services",
|
|
119
|
+
featured_image: "https://beta.elaa.org.au/img/what-we-do/best-start-best-life/divided-01.jpg"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: "Bullet Points",
|
|
123
|
+
type: "bullet_points",
|
|
124
|
+
supportive_text: "This section can contain up to 10 items.",
|
|
125
|
+
max_items: 10,
|
|
126
|
+
max_title: 500,
|
|
127
|
+
data: [
|
|
128
|
+
{
|
|
129
|
+
title: "Through our Commonwealth",
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
title: "We work with members, peak bodies.",
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
title: "We work with members, peak bodies.",
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
title: "We work with members, peak bodies.",
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
title: "We work with members, peak bodies.",
|
|
142
|
+
},
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
]
|
|
148
|
+
};
|
package/package.json
CHANGED
|
@@ -127,6 +127,7 @@ const componentMaps = ref({
|
|
|
127
127
|
vertical_tabs: markRaw(VItems),
|
|
128
128
|
links: markRaw(VLinks),
|
|
129
129
|
header: markRaw(VHeader),
|
|
130
|
+
callout: markRaw(VHeader),
|
|
130
131
|
link_grid: markRaw(VLinks),
|
|
131
132
|
logos: markRaw(VLogos),
|
|
132
133
|
carousel: markRaw(VCollectionCarousel),
|
|
@@ -136,6 +137,7 @@ const componentMaps = ref({
|
|
|
136
137
|
image_block: markRaw(VImageBlock),
|
|
137
138
|
timeline_items: markRaw(VItems),
|
|
138
139
|
bullet_points: markRaw(VLinks),
|
|
140
|
+
feature_items: markRaw(VLinks),
|
|
139
141
|
link_cards: markRaw(VItems),
|
|
140
142
|
});
|
|
141
143
|
|
|
@@ -24,6 +24,7 @@ import Timeline from "@/components/presenters/modules/Timeline.vue";
|
|
|
24
24
|
import LinkCard from "@/components/presenters/modules/LinkCard.vue";
|
|
25
25
|
import LinkList from "@/components/presenters/modules/LinkList.vue";
|
|
26
26
|
import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
|
|
27
|
+
import Callout from "@/components/presenters/modules/Callout.vue";
|
|
27
28
|
|
|
28
29
|
const props = defineProps({
|
|
29
30
|
page: {
|
|
@@ -46,6 +47,7 @@ const componentMaps = ref({
|
|
|
46
47
|
link_card: markRaw(LinkCard),
|
|
47
48
|
link_list: markRaw(LinkList),
|
|
48
49
|
bullet_points: markRaw(BulletPoints),
|
|
50
|
+
callout: markRaw(Callout),
|
|
49
51
|
});
|
|
50
52
|
|
|
51
53
|
const currentComponent = (section) => {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="bg-gray-50 px-6 py-5 rounded-xl">
|
|
2
|
+
<div :class="{'bg-gray-50 px-6 py-5 rounded-xl': !dataRef?.as_item, '-mx-6 -my-5': dataRef?.as_item}">
|
|
3
3
|
<p class="text-lg font-semibold text-gray-900 pb-4" :class="{'border-b border-gray-200': !dataRef?.has_extra}">
|
|
4
|
-
{{ dataRef
|
|
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
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
v-if="dataRef.hasOwnProperty('title')"
|
|
19
19
|
is-vertical
|
|
20
20
|
field="title"
|
|
21
|
-
label-text="Title *"
|
|
21
|
+
:label-text="dataRef?.title_label ?? 'Title *'"
|
|
22
22
|
class="w-full mb-4"
|
|
23
23
|
:value="dataRef.title"
|
|
24
24
|
:limit="51"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
is-vertical
|
|
38
38
|
v-if="dataRef.hasOwnProperty('supporting_text')"
|
|
39
39
|
field="supporting_text"
|
|
40
|
-
label-text="Supporting Text *"
|
|
40
|
+
:label-text="dataRef?.supporting_text_label ?? 'Supporting Text *'"
|
|
41
41
|
class="w-full mb-4"
|
|
42
42
|
:value="dataRef.supporting_text"
|
|
43
43
|
:limit="dataRef.supporting_text_max_length ?? 100"
|
|
@@ -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>
|
|
@@ -83,11 +95,7 @@ const VFileUpload = inject("VFileUpload", DefaultFileUpload);
|
|
|
83
95
|
const emit = defineEmits(["update"]);
|
|
84
96
|
const props = defineProps({
|
|
85
97
|
...defaultProps,
|
|
86
|
-
hasExtra: {
|
|
87
|
-
type: Boolean,
|
|
88
|
-
default: true
|
|
89
|
-
},
|
|
90
98
|
});
|
|
91
99
|
|
|
92
|
-
const dataRef = ref(props.data.
|
|
100
|
+
const dataRef = ref(props.data?.component ?? props.data);
|
|
93
101
|
</script>
|
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
<div class="flex flex-col gap-6">
|
|
41
41
|
<div class="flex flex-col gap-1.5">
|
|
42
|
+
<Header v-if="isFeatureItem" :data="item"></Header>
|
|
42
43
|
<input-wrapper
|
|
44
|
+
v-else
|
|
43
45
|
is-vertical
|
|
44
46
|
field="title"
|
|
45
47
|
label-text="Title *"
|
|
@@ -57,7 +59,7 @@
|
|
|
57
59
|
class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
|
|
58
60
|
/>
|
|
59
61
|
<textarea
|
|
60
|
-
v-
|
|
62
|
+
v-if="isBulletPoint"
|
|
61
63
|
v-model="item.title"
|
|
62
64
|
name="title"
|
|
63
65
|
placeholder="Title"
|
|
@@ -90,6 +92,7 @@ import {createLink} from "@/components/helpers/pageBuilderFactory";
|
|
|
90
92
|
import ActionMenu from "@/components/common/ActionMenu.vue";
|
|
91
93
|
import InputWrapper from "@/components/common/InputWrapper.vue";
|
|
92
94
|
import LinkedTo from "@/components/common/LinkedTo.vue";
|
|
95
|
+
import Header from "@/components/builders/Header.vue";
|
|
93
96
|
import VModal from "@/components/common/Modal.vue";
|
|
94
97
|
|
|
95
98
|
const emit = defineEmits(["update"]);
|
|
@@ -107,6 +110,10 @@ const isBulletPoint = computed(() => {
|
|
|
107
110
|
return componentData.value.type === 'bullet_points';
|
|
108
111
|
});
|
|
109
112
|
|
|
113
|
+
const isFeatureItem = computed(() => {
|
|
114
|
+
return componentData.value.type === 'feature_items';
|
|
115
|
+
});
|
|
116
|
+
|
|
110
117
|
function addItem() {
|
|
111
118
|
if (!componentData.value.hasOwnProperty('data')) {
|
|
112
119
|
componentData.value.data = [];
|
|
@@ -115,7 +122,7 @@ function addItem() {
|
|
|
115
122
|
if (componentData.value.data?.length >= componentData.value.max_items) {
|
|
116
123
|
return;
|
|
117
124
|
}
|
|
118
|
-
componentData.value.data?.push(createLink({}, isBulletPoint.value));
|
|
125
|
+
componentData.value.data?.push(createLink({}, isBulletPoint.value, isFeatureItem.value));
|
|
119
126
|
|
|
120
127
|
nextTick(() => {
|
|
121
128
|
if (lastItemRef.value) {
|
|
@@ -43,7 +43,17 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
|
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
export function createLink(overrides = {}, isBulletPoint = false) {
|
|
46
|
+
export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem = false) {
|
|
47
|
+
if (isFeatureItem) {
|
|
48
|
+
return {
|
|
49
|
+
has_extra: true,
|
|
50
|
+
as_item: true,
|
|
51
|
+
title: "Item title",
|
|
52
|
+
icon: "AlertCircle",
|
|
53
|
+
supporting_text: "Enter your description here.",
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
47
57
|
if (isBulletPoint) {
|
|
48
58
|
return {
|
|
49
59
|
title: "New link",
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="overflow-hidden">
|
|
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
|
+
|
|
15
|
+
<div v-if="headerComponent"
|
|
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
|
+
}"
|
|
22
|
+
>
|
|
23
|
+
<h3 class="text-xl text-brand-600 font-semibold max-w-[744px]">{{ headerComponent.title }}</h3>
|
|
24
|
+
<p v-if="headerComponent?.supporting_text"
|
|
25
|
+
class="mt-2 max-w-[744px]"
|
|
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>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
<script setup>
|
|
44
|
+
import {ref, computed} from "vue";
|
|
45
|
+
|
|
46
|
+
const props = defineProps({
|
|
47
|
+
section: {
|
|
48
|
+
required: true,
|
|
49
|
+
type: Object,
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const section = ref(props.section);
|
|
54
|
+
const headerComponent = computed(() => {
|
|
55
|
+
return section.value.components.find((component) => component.type === "callout");
|
|
56
|
+
});
|
|
57
|
+
const imageComponent = computed(() => {
|
|
58
|
+
return section.value.components.find((component) => component.type === "image_block");
|
|
59
|
+
});
|
|
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"
|
|
@@ -1,21 +1,50 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="overflow-hidden">
|
|
3
3
|
<div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4">
|
|
4
|
-
<div class="grid grid-cols-12 gap-4">
|
|
4
|
+
<div class="grid grid-cols-12 gap-4" v-if="paragraphComponent">
|
|
5
5
|
<div class="col-span-4 bg-gray-100 rounded-xl p-8" v-if="paragraphComponent">
|
|
6
6
|
<h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
|
|
7
7
|
<p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
|
|
8
8
|
</div>
|
|
9
9
|
<div class="col-span-8" v-if="imageComponent">
|
|
10
|
-
<img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-auto"
|
|
10
|
+
<img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-auto"/>
|
|
11
11
|
<p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
|
+
<div v-else class="my-[44px]">
|
|
15
|
+
<div
|
|
16
|
+
v-if="headerComponent"
|
|
17
|
+
class="w-full flex-col mb-6"
|
|
18
|
+
>
|
|
19
|
+
<h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
|
|
20
|
+
<p v-if="headerComponent?.supporting_text"
|
|
21
|
+
class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px]"
|
|
22
|
+
v-html="headerComponent.supporting_text"></p>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="flex flex-row gap-8">
|
|
25
|
+
<div class="grid grid-cols-2 gap-8 w-2/3">
|
|
26
|
+
<div v-for="item in featureItemsComponent.data" class="flex gap-3">
|
|
27
|
+
<div v-if="item?.icon" class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
|
|
28
|
+
<IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="max-w-[324px]">
|
|
31
|
+
<h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
|
|
32
|
+
<p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div v-if="imageComponent" class="w-[560px]">
|
|
37
|
+
<img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
|
|
38
|
+
class="rounded-br-[24px] rounded-tl-[24px] w-full"/>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
14
42
|
</div>
|
|
15
43
|
</div>
|
|
16
44
|
</template>
|
|
17
45
|
|
|
18
46
|
<script setup>
|
|
47
|
+
import IconComponent from "@/components/common/Icon.vue";
|
|
19
48
|
import {ref, computed} from "vue";
|
|
20
49
|
|
|
21
50
|
const props = defineProps({
|
|
@@ -29,8 +58,14 @@ const section = ref(props.section);
|
|
|
29
58
|
const paragraphComponent = computed(() => {
|
|
30
59
|
return section.value.components.find((component) => component.type === "paragraph");
|
|
31
60
|
});
|
|
61
|
+
const headerComponent = computed(() => {
|
|
62
|
+
return section.value.components.find((component) => component.type === "header");
|
|
63
|
+
});
|
|
32
64
|
const imageComponent = computed(() => {
|
|
33
65
|
return section.value.components.find((component) => component.type === "image_block");
|
|
34
66
|
});
|
|
67
|
+
const featureItemsComponent = computed(() => {
|
|
68
|
+
return section.value.components.find((component) => component.type === "feature_items");
|
|
69
|
+
});
|
|
35
70
|
|
|
36
71
|
</script>
|