@dcodegroup-au/page-builder 0.0.6 → 0.0.7

package/example/src/App.vue

@@ -24,14 +24,14 @@ const page = {
               primary_button: {
                 show: true,
                 label: 'Join ELAA',
-                link_to: '/google.com', // external could be an url
+                url: '/google.com', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Learn about ELAA',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -44,14 +44,14 @@ const page = {
               primary_button: {
                 show: false,
                 label: 'Apply now ELAA',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Construct ELAA',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -64,14 +64,14 @@ const page = {
               primary_button: {
                 show: true,
                 label: 'Apply To Dcodegroup',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Construct Dcodegroup',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -84,14 +84,14 @@ const page = {
               primary_button: {
                 show: true,
                 label: 'Apply To Image Credits',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 is_new_tab: true,
               },
               secondary_button: {
                 show: true,
                 label: 'Construct Image Credits',
-                link_to: '/admin', // external could be an url
+                url: '/admin', // external could be an url
                 type: 'site-content',
                 open_in_new_tab: true,
               },
@@ -107,13 +107,13 @@ const page = {
           data: [
             {
               title: "Privacy Policy",
-              link_to: '/admin', // external could be an url
+              url: '/admin', // external could be an url
               type: 'site-content',
               open_in_new_tab: true,
             },
             {
               title: "Google",
-              link_to: 'https://google.com', // external could be an url
+              url: 'https://google.com', // external could be an url
               type: 'external-page',
               open_in_new_tab: true,
             }
@@ -203,11 +203,47 @@ const page = {
           name: "Section header",
           type: "header",
           is_public: true,
+          title: 'Services',
+          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
         },
         {
           id: 2,
-          name: "Links",
-          type: "links",
+          name: "Link grid",
+          type: "link_grid",
+          supportive_text: "This section can contain up to 10 links.",
+          max_items: 10,
+          data: [
+            {
+              title: "Advisory Services",
+              url: '/admin', // external could be an url
+              type: 'site-content',
+              open_in_new_tab: true,
+            },
+            {
+              title: "Capability Assessment Support Service",
+              url: 'https://google.com', // external could be an url
+              type: 'external-page',
+              open_in_new_tab: true,
+            },
+            {
+              title: "Consultancy Services",
+              url: 'https://google.com', // external could be an url
+              type: 'external-page',
+              open_in_new_tab: true,
+            },
+            {
+              title: "Payroll Calculations",
+              url: 'https://google.com', // external could be an url
+              type: 'external-page',
+              open_in_new_tab: true,
+            },
+            {
+              title: "VECTEA 2024",
+              url: 'https://google.com', // external could be an url
+              type: 'external-page',
+              open_in_new_tab: true,
+            }
+          ]
         }
       ]
     },
@@ -222,14 +258,14 @@ const slide = {
   primary_button: {
     show: true,
     label: 'Join ELAA',
-    link_to: '/admin', // external could be an url
+    url: '/admin', // external could be an url
     type: 'site-content',
     is_new_tab: true,
   },
   secondary_button: {
     show: true,
     label: 'Learn about ELAA',
-    link_to: '/admin', // external could be an url
+    url: '/admin', // external could be an url
     type: 'site-content',
     open_in_new_tab: true,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/assets/css/style.css

@@ -2,29 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
-[type="text"],
-[type="email"],
-[type="url"],
-[type="password"],
-[type="number"],
-[type="date"],
-[type="tel"],
-[multiple],
-textarea,
-select {
-    @apply !text-base block !w-full !rounded-lg !border !border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50 !py-2 !px-3 !font-normal;
-}
-
-.q-editor {
-    .ql-toolbar {
-        @apply rounded-t-lg bg-white;
+.page-builder, .page-render, .slide-edit {
+    [type="text"],
+    [type="email"],
+    [type="url"],
+    [type="password"],
+    [type="number"],
+    [type="date"],
+    [type="tel"],
+    [multiple],
+    textarea,
+    select {
+        @apply !text-base block !w-full !rounded-lg !border !border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50 !py-2 !px-3 !font-normal;
     }
 
-    .ql-container {
-        @apply min-h-[150px] rounded-b-lg bg-white;
+    .q-editor {
+        .ql-toolbar {
+            @apply rounded-t-lg bg-white;
+        }
+
+        .ql-container {
+            @apply min-h-[150px] rounded-b-lg bg-white;
 
-        .ql-editor {
-            @apply text-base font-normal;
+            .ql-editor {
+                @apply text-base font-normal;
+            }
         }
     }
 }

package/src/assets/svg/header_right_vector.svg

@@ -0,0 +1,3 @@
+<svg width="341" height="336" viewBox="0 0 341 336" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.752 -176.557C288.486 -214.271 388.737 -258.644 474.057 -211.794C563.407 -162.732 606.293 -54.8025 606.118 47.1309C605.964 137.619 542.275 209.809 473.237 268.305C412.276 319.957 337.1 351.698 257.754 342.298C178.609 332.922 111.441 285.667 66.1611 220.081C17.6669 149.839 -17.1653 64.2377 9.89614 -16.7149C37.4057 -99.0081 118.76 -142.938 198.752 -176.557Z" fill="#78BDB5"/>
+</svg>

package/src/components/PageBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-builder">
     <div class="flex gap-4 px-6 overflow-auto">
       <div class="flex w-[356px] flex-col gap-2">
         <div v-for="(parent, sectionIndex) in modelValue.sections" class="border-b border-gray-200 pb-2">
@@ -45,7 +45,7 @@
             :key="selected?.sectionIndex + selected?.componentIndex"
             :data="selected"
             :sites="sites"
-            @update="update"
+            @update="save"
         ></component>
       </div>
     </div>
@@ -69,6 +69,7 @@ import ChevronDown from "@/assets/img/icons/chevron-down.svg";
 import Instructions from "@/components/builders/Instructions.vue";
 import VSliders from "@/components/builders/VSliders.vue";
 import VLinks from "@/components/builders/VLinks.vue";
+import VHeader from "@/components/builders/VHeader.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -79,16 +80,7 @@ const props = defineProps({
   sites: {
     type: Array,
     default: () => {
-      return [
-        {
-          href: '/admin',
-          name: "Site 1",
-        },
-        {
-          href: '/login',
-          name: "Site 2",
-        },
-      ]
+      return []
     }
   },
 });
@@ -99,6 +91,8 @@ let selected = ref(null);
 const componentMaps = ref({
   sliders: markRaw(VSliders),
   links: markRaw(VLinks),
+  header: markRaw(VHeader),
+  link_grid: markRaw(VLinks),
 });
 
 if (!openStates.value) {
@@ -124,8 +118,8 @@ const close = () => {
   emit("close", props.modelValue);
 };
 
-const save = () => {
-  emit("save", props.modelValue);
+const save = (redirect = true) => {
+  emit("save", {page: props.modelValue, redirect: redirect});
 };
 
 const currentComponent = computed(() => {

package/src/components/PageRender.vue

@@ -1,15 +1,18 @@
 <template>
-  <div v-for="(section, index) in page.sections">
-    <component
-        :is="currentComponent(section)"
-        :key="index"
-        :section="section"
-    ></component>
+  <div class="page-render">
+    <div v-for="(section, index) in page.sections">
+      <component
+          :is="currentComponent(section)"
+          :key="index"
+          :section="section"
+      ></component>
+    </div>
   </div>
 </template>
 <script setup>
 import {ref, markRaw} from "vue";
 import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
+import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
 
 const props = defineProps({
   page: {
@@ -20,6 +23,7 @@ const props = defineProps({
 
 const componentMaps = ref({
   header: markRaw(HeroHeader),
+  quick_links: markRaw(QuickLinks),
 });
 
 const currentComponent = (section) => {

package/src/components/SlideEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="slide-edit">
     <div class="flex items-start gap-4 px-6 pt-4">
       <div class="flex flex-1 flex-col gap-4">
         <card title="Description">
@@ -65,7 +65,7 @@
         <card title="Secondary button">
           <div class="flex flex-col gap-4">
             <VToggle name="show" v-model="form.secondary_button.show"  title="Show Button" />
-            <template v-if="form.secondary_button.show">
+            <template v-if="form.secondary_button?.show">
               <input-wrapper
                   is-vertical
                   field="secondary_button.label"
@@ -180,7 +180,7 @@ const close = () => {
 };
 
 const descriptionWordCount = computed(() => {
-  const plainText = form.value.description.replace(/<[^>]*>/g, ' ').trim();
+  const plainText = form.value.description?.replace(/<[^>]*>/g, ' ').trim();
   const words = plainText.split(/\s+/).filter(word => word.length > 0);
   return words.length;
 });

package/src/components/builders/VHeader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+      {{ dataRef.name }}
+    </p>
+    <input-wrapper
+        is-vertical
+        field="title"
+        label-text="Title *"
+        class="w-full mb-4"
+        :value="dataRef.title"
+        :limit="51"
+    >
+      <input
+          v-model="dataRef.title"
+          name="title"
+          type="text"
+          placeholder="Title"
+          :maxlength="51"
+          class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+      />
+    </input-wrapper>
+    <input-wrapper
+        is-vertical
+        field="supporting_text"
+        label-text="Supporting Text *"
+        class="w-full mb-4"
+        :value="dataRef.supporting_text"
+        :limit="100"
+    >
+      <input
+          v-model="dataRef.supporting_text"
+          name="supporting_text"
+          type="text"
+          placeholder="Supporting Text"
+          :maxlength="100"
+          class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+      />
+    </input-wrapper>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { defaultProps } from "@/components/helpers/defaultProps.js";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.component);
+</script>

package/src/components/builders/VLinks.vue

@@ -59,7 +59,7 @@
               label="Linked to"
               :name="`link_${index + 1}`"
               v-model:type="item.type"
-              v-model:url="item.link_to"
+              v-model:url="item.url"
               v-model:openInNewTab="item.open_in_new_tab"
               :sites="sites"
           />
@@ -102,7 +102,7 @@ function addItem() {
     }
   });
 
-  emit("update", componentData.value);
+  emit("update", false);
 }
 
 const handleDeleteItem = (index) => {
@@ -112,6 +112,6 @@ const handleDeleteItem = (index) => {
 
 const deleteCallback = (index) => {
   componentData.value.data.splice(index, 1);
-  emit("update", componentData.value);
+  emit("update", false);
 };
 </script>

package/src/components/builders/VSliders.vue

@@ -49,9 +49,9 @@
   <VModal ref="modalRef" entity="slide" :callback="deleteCallback"></VModal>
 </template>
 <script setup>
-import { ref } from "vue";
+import {ref} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
-import { defaultProps } from "@/components/helpers/defaultProps.js";
+import {defaultProps} from "@/components/helpers/defaultProps.js";
 import { createSlide } from "@/components/helpers/pageBuilderFactory.js";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import VModal from "@/components/common/VModal.vue";
@@ -85,7 +85,7 @@ const toggleSlide = (index) => {
 
 const addItem = () => {
   dataRef.value.data.push(createSlide());
-  emit("update", dataRef.value);
+  emit("update", false);
 };
 
 const handleDeleteItem = (index) => {
@@ -94,7 +94,7 @@ const handleDeleteItem = (index) => {
 
 const deleteCallback = (index) => {
   dataRef.value.data.splice(index, 1);
-  emit("update", dataRef.value);
+  emit("update", false);
 };
 
 const edit = (item, index) => {

package/src/components/common/LinkedTo.vue

@@ -36,7 +36,7 @@ const url = defineModel("url");
 const openInNewTab = defineModel("openInNewTab");
 
 defineProps({
-  label: { type: Object, required: false },
+  label: { type: String, required: false },
   sites: { type: Object, required: true },
   name: { type: String, required: true },
   options: { type: Array, required: false, default: ["site-content", "external-page"] },

package/src/components/helpers/pageBuilderFactory.js

@@ -8,7 +8,7 @@ export function createSlide(overrides = {}) {
       show: false,
       label: "",
       type: "site-content",
-      link_to: '',
+      url: '',
       is_new_tab: false,
       ...(overrides.primary_button || {}),
     },
@@ -16,7 +16,7 @@ export function createSlide(overrides = {}) {
       show: false,
       label: "",
       type: "site-content",
-      link_to: '',
+      url: '',
       is_new_tab: false,
       ...(overrides.secondary_button || {}),
     },
@@ -27,7 +27,7 @@ export function createSlide(overrides = {}) {
 export function createLink(overrides = {}) {
   return {
     title: "New link",
-    link_to: "",
+    url: "",
     open_in_new_tab: true,
     type: "site-content",
     ...(overrides || {}),

package/src/components/presenters/components/VHeaderPresenter.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col">
+    <p v-if="component?.title" class="pb-4 text-4xl font-semibold text-white">{{ component?.title }}</p>
+    <p v-if="component?.supporting_text" class="text-navy-25 text-xl font-normal leading-[30px]">{{ component?.supporting_text }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+});
+
+const component = ref(props.component);
+</script>

package/src/components/presenters/components/VLinkPresenter.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="flex justify-center h-[136px] w-full relative rounded-b-[48px] bg-navy-600 -mt-12 gap-[60px]">
-    <a
-        :target="link.open_in_new_tab ? '_blank' : ''"
-        :href="link.link_to"
-        v-for="link in component.data"
-        class="text-white flex gap-1.5 items-center cursor-pointer mt-12 text-sm font-semibold hover:text-gray-300">
-      <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
-    </a>
+  <div class="flex justify-center h-[136px] w-full relative rounded-b-[48px] bg-navy-600 -mt-12 gap-[60px]" :class="{'bg-transparent !justify-start flex-wrap mt-8 !h-full !gap-4': isLinkGrid}">
+    <div class="flex justify-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
+      <a
+          :target="link.open_in_new_tab ? '_blank' : ''"
+          :href="link.url"
+          class="text-white flex gap-1.5 items-center cursor-pointer mt-12 text-sm font-semibold hover:text-gray-300"
+          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
+      >
+        <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+      </a>
+    </div>
   </div>
 </template>
 
@@ -22,4 +25,5 @@ const props = defineProps({
 });
 
 const component = ref(props.component);
+const isLinkGrid = component.value.type === 'link_grid';
 </script>

package/src/components/presenters/components/VSliderPresenter.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex h-[872px] w-full bg-navy-800 relative rounded-[48px] z-10">
-    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel w-full" :autoplay="5000" :wrap-around="true">
-      <Slide v-for="(slide, index) in component.data" :key="index">
-        <div class="lg:p-8 p-4 flex relative">
+    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel w-full" :wrap-around="true">
+      <Slide v-for="(slide, index) in slides" :key="index">
+        <div class="lg:p-8 p-4 flex relative w-full">
           <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative">
             <div class="gap-2 flex z-10 mb-4">
-              <a v-if="component.data.length > 1"
-                 v-for="(slide, index) in component.data"
+              <a v-if="slides.length > 1"
+                 v-for="(slide, index) in slides"
                  @click="currentSlide = index" class="w-4 h-1 bg-navy-400 rounded-full cursor-pointer" :class="{'!w-12 !bg-white' : currentSlide === index}"
               ></a>
             </div>
@@ -14,13 +14,13 @@
             <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
             <div class="flex gap-3 mt-8 flex-col lg:flex-row">
               <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
-                 :href="slide.secondary_button.link_to"
+                 :href="slide.secondary_button.url"
                  v-if="slide.secondary_button.show"
                  :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                 <span>{{ slide.secondary_button.label }}</span>
               </a>
               <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
-                 :href="slide.primary_button.link_to"
+                 :href="slide.primary_button.url"
                  v-if="slide.primary_button.show"
                  :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">
                 {{ slide.primary_button.label }}
@@ -53,7 +53,8 @@ const props = defineProps({
 });
 
 const currentSlide = ref(0);
-const component = ref(props.component);
+const componentData = ref(props.component);
+const slides = componentData.value.data.filter((o) => o.public);
 </script>
 
 <style scoped>

package/src/components/presenters/modules/HeroHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="rounded-[48px] max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
-    <div v-for="(component, index) in section.components">
+    <div v-for="(component, index) in section.components" class="md:px-[90px]">
       <component
           :is="currentComponent(component)"
           :key="index"

package/src/components/presenters/modules/QuickLinks.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full bg-navy-800 py-10 relative lg:h-[336px]">
+    <div class="1xl:max-w-[1824px] mx-auto lg:pl-[120px] pl-4 relative z-10">
+      <div v-for="(component, index) in section.components" class="w-2/3">
+        <component
+            :is="currentComponent(component)"
+            :key="index"
+            :component="component"
+        ></component>
+      </div>
+    </div>
+    <HeaderVector class="absolute right-0 top-0"></HeaderVector>
+  </div>
+</template>
+
+<script setup>
+import { ref, markRaw } from "vue";
+import VLinkPresenter from "@/components/presenters/components/VLinkPresenter.vue";
+import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
+import HeaderVector from "@/assets/svg/header_right_vector.svg";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const componentMaps = ref({
+  header: markRaw(VHeaderPresenter),
+  link_grid: markRaw(VLinkPresenter),
+});
+
+const currentComponent = (component) => {
+  if (!component?.type) {
+    return '';
+  }
+
+  return componentMaps.value[component?.type];
+};
+
+</script>

package/tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
           600: '#3E5F7E',
           400: '#69829B',
           50: '#DFE5EC',
+          25: '#EFF2F5',
         },
         brand: {
           25: '#F5EFF3',