@dcodegroup-au/page-builder 0.4.4 → 0.4.6
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.es.js +3376 -3325
- package/dist/page-builder.umd.js +42 -42
- package/example/src/App.vue +4 -3
- package/example/src/pages/ChildSafeStandard.js +179 -0
- package/package.json +1 -1
- package/src/components/builders/Header.vue +2 -2
- package/src/components/builders/Links.vue +42 -3
- package/src/components/helpers/common.js +1 -1
- package/src/components/helpers/pageBuilderFactory.js +1 -0
- package/src/components/presenters/modules/TwoColumnsImageContent.vue +20 -10
package/example/src/App.vue
CHANGED
|
@@ -5,6 +5,7 @@ import {AboutUs} from "./pages/AboutUs.js";
|
|
|
5
5
|
import {OurVision} from "./pages/OurVision.js";
|
|
6
6
|
import {OurCommitment} from "./pages/OurCommitment.js";
|
|
7
7
|
import {OurHistory} from "./pages/OurHistory.js";
|
|
8
|
+
import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
|
|
8
9
|
|
|
9
10
|
const slide = {
|
|
10
11
|
title: "About ELAA",
|
|
@@ -88,10 +89,10 @@ const breadcrumbs = [
|
|
|
88
89
|
|
|
89
90
|
<template>
|
|
90
91
|
<div>
|
|
91
|
-
{{ JSON.stringify(
|
|
92
|
+
{{ JSON.stringify(ChildSafeStandard) }}
|
|
92
93
|
<div style="margin: 40px 0">
|
|
93
94
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
|
|
94
|
-
<PageRender :page="
|
|
95
|
+
<PageRender :page="ChildSafeStandard"/>
|
|
95
96
|
</div>
|
|
96
97
|
<div style="margin: 40px 0">
|
|
97
98
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
|
|
@@ -107,7 +108,7 @@ const breadcrumbs = [
|
|
|
107
108
|
</div>
|
|
108
109
|
<div style="margin: 40px 0">
|
|
109
110
|
<h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
|
|
110
|
-
<PageBuilder v-model="
|
|
111
|
+
<PageBuilder v-model="ChildSafeStandard" :breadcrumbs="breadcrumbs"/>
|
|
111
112
|
</div>
|
|
112
113
|
</div>
|
|
113
114
|
</template>
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
export const ChildSafeStandard =
|
|
2
|
+
{
|
|
3
|
+
title: "Our commitment to Child Safe Standards",
|
|
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 to Child Safe Standards",
|
|
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: "Two columns with image and content",
|
|
20
|
+
type: "two_column_image_content",
|
|
21
|
+
display: "horizontal",
|
|
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: "Standard header",
|
|
30
|
+
type: "header",
|
|
31
|
+
title: "Our values",
|
|
32
|
+
supporting_text_max_length: 500,
|
|
33
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent.",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: "Feature items",
|
|
37
|
+
type: "feature_items",
|
|
38
|
+
supportive_text: "Section can contain up to 10 items.",
|
|
39
|
+
max_items: 10,
|
|
40
|
+
data: [
|
|
41
|
+
{
|
|
42
|
+
has_extra: true,
|
|
43
|
+
as_item: true,
|
|
44
|
+
title: "Excellence",
|
|
45
|
+
icon: "AlertCircle",
|
|
46
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
has_extra: true,
|
|
50
|
+
as_item: true,
|
|
51
|
+
title: "Equity",
|
|
52
|
+
icon: 'AlignLeft01',
|
|
53
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
has_extra: true,
|
|
57
|
+
as_item: true,
|
|
58
|
+
title: "Collaboration",
|
|
59
|
+
icon: 'AlignLeft01',
|
|
60
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
has_extra: true,
|
|
64
|
+
as_item: true,
|
|
65
|
+
title: "Collaboration",
|
|
66
|
+
icon: 'AlignLeft01',
|
|
67
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
has_extra: true,
|
|
71
|
+
as_item: true,
|
|
72
|
+
title: "Collaboration",
|
|
73
|
+
icon: 'AlignLeft01',
|
|
74
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
75
|
+
},
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
title: "Callout Section",
|
|
82
|
+
type: "callout",
|
|
83
|
+
components: [
|
|
84
|
+
{
|
|
85
|
+
name: "Callout Section",
|
|
86
|
+
type: "callout",
|
|
87
|
+
title: "Our Purpose",
|
|
88
|
+
has_extra: true,
|
|
89
|
+
title_label: "Eyebrow heading",
|
|
90
|
+
supporting_text_max_length: 500,
|
|
91
|
+
supporting_text: "To build meaningful, reliable, and human-centered software that solves real problems, empowers users, and advances innovation responsibly.",
|
|
92
|
+
supporting_text_label: "Message *",
|
|
93
|
+
},
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
title: "Two columns with image and content",
|
|
98
|
+
type: "two_column_image_content",
|
|
99
|
+
display: "horizontal",
|
|
100
|
+
components: [
|
|
101
|
+
{
|
|
102
|
+
name: "Standard header",
|
|
103
|
+
type: "header",
|
|
104
|
+
title: "Our values",
|
|
105
|
+
supporting_text_max_length: 500,
|
|
106
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent.",
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: "Feature items",
|
|
110
|
+
type: "feature_items",
|
|
111
|
+
supportive_text: "Section can contain up to 10 items.",
|
|
112
|
+
grid_columns: 3,
|
|
113
|
+
max_items: 20,
|
|
114
|
+
data: [
|
|
115
|
+
{
|
|
116
|
+
has_extra: true,
|
|
117
|
+
as_item: true,
|
|
118
|
+
title: "Excellence",
|
|
119
|
+
icon: "AlertCircle",
|
|
120
|
+
content_type: "content",
|
|
121
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 1.",
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
has_extra: true,
|
|
125
|
+
as_item: true,
|
|
126
|
+
title: "Equity",
|
|
127
|
+
icon: 'AlignLeft01',
|
|
128
|
+
content_type: "content",
|
|
129
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 2.",
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
has_extra: true,
|
|
133
|
+
as_item: true,
|
|
134
|
+
title: "Collaboration",
|
|
135
|
+
icon: 'AlignLeft01',
|
|
136
|
+
content_type: "content",
|
|
137
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
has_extra: true,
|
|
141
|
+
as_item: true,
|
|
142
|
+
title: "Collaboration",
|
|
143
|
+
icon: 'AlignLeft01',
|
|
144
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
has_extra: true,
|
|
148
|
+
as_item: true,
|
|
149
|
+
content_type: "image_only",
|
|
150
|
+
image: "https://beta-public.elaa.org.au/fileman/Page%20Builder/play-based-learning-14istock070722npapproved.jpg",
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
has_extra: true,
|
|
154
|
+
as_item: true,
|
|
155
|
+
title: "Collaboration",
|
|
156
|
+
icon: 'AlignLeft01',
|
|
157
|
+
content_type: "content",
|
|
158
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
has_extra: true,
|
|
162
|
+
as_item: true,
|
|
163
|
+
content_type: "image_only",
|
|
164
|
+
image: "https://beta-frontend.elaa.org.au/img/our-vision-and-purpose-2.png",
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
has_extra: true,
|
|
168
|
+
as_item: true,
|
|
169
|
+
title: "Collaboration",
|
|
170
|
+
icon: 'AlignLeft01',
|
|
171
|
+
content_type: "content",
|
|
172
|
+
supporting_text: "We create software to address real-world needs — making life easier, work more efficient, and systems more intelligent 3.",
|
|
173
|
+
},
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
]
|
|
177
|
+
},
|
|
178
|
+
]
|
|
179
|
+
};
|
package/package.json
CHANGED
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
:label-text="dataRef?.supporting_text_label ?? 'Supporting Text *'"
|
|
41
41
|
class="w-full mb-4"
|
|
42
42
|
:value="dataRef.supporting_text"
|
|
43
|
-
:limit="dataRef.supporting_text_max_length ??
|
|
43
|
+
:limit="dataRef.supporting_text_max_length ?? 500"
|
|
44
44
|
>
|
|
45
45
|
<textarea
|
|
46
46
|
v-model="dataRef.supporting_text"
|
|
47
47
|
name="supporting_text"
|
|
48
48
|
type="text"
|
|
49
49
|
placeholder="Supporting Text"
|
|
50
|
-
:maxlength="dataRef.supporting_text_max_length ??
|
|
50
|
+
:maxlength="dataRef.supporting_text_max_length ?? 500"
|
|
51
51
|
class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
|
|
52
52
|
/>
|
|
53
53
|
</input-wrapper>
|
|
@@ -38,7 +38,20 @@
|
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="flex flex-col gap-6">
|
|
41
|
-
<div class="flex
|
|
41
|
+
<div class="flex gap-4">
|
|
42
|
+
<label v-for="option in options" class="flex items-center gap-2 cursor-pointer">
|
|
43
|
+
<input
|
|
44
|
+
:name="`content_type${index}`"
|
|
45
|
+
type="radio"
|
|
46
|
+
:value="option.value"
|
|
47
|
+
v-model="item.content_type"
|
|
48
|
+
class="checked:bg-brand-600 hover:bg-brand-600 checked:hover:bg-brand-600 focus:bg-brand-600 focus:ring-brand-600 focus:checked:bg-brand-600 rounded-full"
|
|
49
|
+
@change="updateType(item)"
|
|
50
|
+
/>
|
|
51
|
+
<span>{{ option.label }}</span>
|
|
52
|
+
</label>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="flex flex-col gap-1.5" v-if="!item.hasOwnProperty('content_type') || item.content_type === 'content'">
|
|
42
55
|
<Header v-if="isFeatureItem" :data="item"></Header>
|
|
43
56
|
<input-wrapper
|
|
44
57
|
v-else
|
|
@@ -78,6 +91,17 @@
|
|
|
78
91
|
:sites="sites"
|
|
79
92
|
/>
|
|
80
93
|
</div>
|
|
94
|
+
<div v-else>
|
|
95
|
+
<input-wrapper
|
|
96
|
+
is-vertical
|
|
97
|
+
field="image"
|
|
98
|
+
label-text="Image *"
|
|
99
|
+
class="w-full mb-4"
|
|
100
|
+
:value="item.image"
|
|
101
|
+
>
|
|
102
|
+
<VFileUpload v-model="item.image" />
|
|
103
|
+
</input-wrapper>
|
|
104
|
+
</div>
|
|
81
105
|
</div>
|
|
82
106
|
</div>
|
|
83
107
|
</div>
|
|
@@ -85,22 +109,27 @@
|
|
|
85
109
|
<VModal ref="modalRef" entity="link" :callback="deleteCallback"></VModal>
|
|
86
110
|
</template>
|
|
87
111
|
<script setup>
|
|
88
|
-
import {ref, nextTick, computed} from "vue";
|
|
112
|
+
import {ref, nextTick, computed, inject} from "vue";
|
|
89
113
|
import PlusIcon from "@/assets/img/icons/plus.svg";
|
|
90
114
|
import {defaultProps} from "@/components/helpers/defaultProps";
|
|
91
115
|
import {createLink} from "@/components/helpers/pageBuilderFactory";
|
|
92
116
|
import ActionMenu from "@/components/common/ActionMenu.vue";
|
|
93
117
|
import InputWrapper from "@/components/common/InputWrapper.vue";
|
|
118
|
+
import DefaultFileUpload from "@/components/common/FileUpload.vue";
|
|
94
119
|
import LinkedTo from "@/components/common/LinkedTo.vue";
|
|
95
120
|
import Header from "@/components/builders/Header.vue";
|
|
96
121
|
import VModal from "@/components/common/Modal.vue";
|
|
97
122
|
|
|
98
|
-
|
|
123
|
+
// Inject the FileUpload component or fallback to the default one
|
|
124
|
+
const VFileUpload = inject("VFileUpload", DefaultFileUpload);
|
|
99
125
|
|
|
126
|
+
const emit = defineEmits(["update"]);
|
|
100
127
|
const props = defineProps({
|
|
101
128
|
...defaultProps,
|
|
102
129
|
});
|
|
103
130
|
|
|
131
|
+
const options = [{value: 'content', label: 'Content'}, {value: 'image_only', label: 'Image Only'}];
|
|
132
|
+
|
|
104
133
|
const componentData = ref(props.data.component);
|
|
105
134
|
const modalRef = ref(null);
|
|
106
135
|
const lastItemRef = ref(null);
|
|
@@ -142,4 +171,14 @@ const deleteCallback = (index) => {
|
|
|
142
171
|
componentData.value.data?.splice(index, 1);
|
|
143
172
|
emit("update", false);
|
|
144
173
|
};
|
|
174
|
+
|
|
175
|
+
const updateType = (item) => {
|
|
176
|
+
if (item.content_type === 'content') {
|
|
177
|
+
item.icon = null;
|
|
178
|
+
item.title = null;
|
|
179
|
+
item.supporting_text = null;
|
|
180
|
+
} else {
|
|
181
|
+
item.image = null;
|
|
182
|
+
}
|
|
183
|
+
};
|
|
145
184
|
</script>
|
|
@@ -21,16 +21,26 @@
|
|
|
21
21
|
class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px]"
|
|
22
22
|
v-html="headerComponent.supporting_text"></p>
|
|
23
23
|
</div>
|
|
24
|
-
<div class="flex flex-row gap-8">
|
|
25
|
-
<div class="grid
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
<div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-row gap-8'">
|
|
25
|
+
<div class="grid gap-8"
|
|
26
|
+
:class="featureItemsComponent.hasOwnProperty('grid_columns') ? `grid-cols-${featureItemsComponent.grid_columns}` : 'grid-cols-2 w-2/3'">
|
|
27
|
+
<div v-for="item in featureItemsComponent.data"
|
|
28
|
+
class="flex gap-3"
|
|
29
|
+
: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
|
+
'!p-0': item.hasOwnProperty('image')
|
|
32
|
+
}">
|
|
33
|
+
<template v-if="item.title">
|
|
34
|
+
<div v-if="item?.icon"
|
|
35
|
+
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
|
+
<IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="max-w-[324px]">
|
|
39
|
+
<h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
|
|
40
|
+
<p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
<img v-else :src="item.image" alt="Feature Image"/>
|
|
34
44
|
</div>
|
|
35
45
|
</div>
|
|
36
46
|
<div v-if="imageComponent" class="w-[560px]">
|