@dcodegroup-au/page-builder 0.5.4 → 0.5.6

package/example/src/pages/Vectea2024.js

@@ -165,7 +165,7 @@ export const Vectea2024 =
         },
         {
           name: "FAQs",
-          type: "feature_items",
+          type: "faqs",
           supportive_text: "This section can contain up to 10 items.",
           has_type_switcher: false,
           max_items: 50,
@@ -174,12 +174,14 @@ export const Vectea2024 =
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "What is an enterprise agreement? Is this the same as an award?",
               supporting_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quaerat sed minus maiores dolorem consectetur quibusdam harum itaque deserunt at eligendi qui illum praesentium odit sit, voluptates nobis expedita?",
             },
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "What is an enterprise agreement? Is this the same as an award?",
               supporting_text: "The last scheduled salary increase under VECTEA 2020, along with its corresponding agreements, was in April 2024. During the re-negotiation period, current salaries established under VECTEA 2020 will continue to be in effect. \n" +
                 "Future salary increases under a new VECTEA 2024 will take effect once the Fair Work Commission approves the new agreement.\n" +
@@ -188,12 +190,14 @@ export const Vectea2024 =
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
               supporting_text: "This section can contain up to 10 items.",
             },
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "We have a dedicated, largely female audience – and we know what works for them.",
               supporting_text: "This section can contain up to 10 items.",
             },

package/package.json

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

package/src/components/LinkCardEdit.vue

@@ -137,8 +137,8 @@ const close = () => {
 
 const descriptionWordCount = computed(() => {
   const plainText = form.value.description?.replace(/<[^>]*>/g, ' ').trim();
-  const words = plainText.split(/\s+/).filter(word => word.length > 0);
-  return words.length;
+  const words = plainText?.split(/\s+/).filter(word => word.length > 0);
+  return words?.length ?? 0;
 });
 
 </script>

package/src/components/PageBuilder.vue

@@ -139,6 +139,7 @@ const componentMaps = ref({
   timeline_items: markRaw(VItems),
   bullet_points: markRaw(VLinks),
   feature_items: markRaw(VLinks),
+  faqs: markRaw(VLinks),
   link_cards: markRaw(VItems),
   contact_us: markRaw(ContactUs),
 });

package/src/components/builders/Header.vue

@@ -40,9 +40,11 @@
           :label-text="dataRef?.supporting_text_label ?? 'Supporting Text *'"
           class="w-full mb-4"
           :value="dataRef.supporting_text"
-          :limit="dataRef.supporting_text_max_length ?? 500"
+          :limit="dataRef?.is_editor ? null : (dataRef.supporting_text_max_length ?? 500)"
       >
+        <QuillEditor v-if="dataRef?.is_editor" v-model="dataRef.supporting_text"/>
         <textarea
+            v-else
             v-model="dataRef.supporting_text"
             name="supporting_text"
             type="text"
@@ -88,6 +90,7 @@ import IconSelector from "@/components/common/IconSelector.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
 import VButton from "@/components/common/Button.vue";
+import QuillEditor from "@/components/common/QuillEditor.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);

package/src/components/builders/Links.vue

@@ -70,7 +70,7 @@
             </label>
           </div>
           <div class="flex flex-col gap-1.5" v-if="!item.hasOwnProperty('content_type') || item.content_type === 'content'">
-            <Header v-if="isFeatureItem" :data="item"></Header>
+            <Header v-if="['feature_items', 'faqs'].includes(componentData.type)" :data="item"></Header>
             <input-wrapper
                 v-else
                 is-vertical
@@ -169,7 +169,7 @@ function addItem() {
   if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data?.push(createLink({}, isBulletPoint.value, isFeatureItem.value));
+  componentData.value.data?.push(createLink({}, componentData.value.type));
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/helpers/pageBuilderFactory.js

@@ -43,8 +43,18 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
   };
 }
 
-export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem = false) {
-  if (isFeatureItem) {
+export function createLink(overrides = {}, type = null) {
+  if (type === 'faqs') {
+    return {
+      has_extra: true,
+      as_item: true,
+      is_editor: true,
+      title: "Item title",
+      supporting_text: "Enter your description here.",
+    }
+  }
+
+  if (type === 'feature_items') {
     return {
       has_extra: true,
       as_item: true,
@@ -54,7 +64,7 @@ export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem
     }
   }
 
-  if (isBulletPoint) {
+  if (type === 'bullet_points') {
     return {
       title: "New link",
     };

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

@@ -10,13 +10,15 @@
         </div>
         <div v-if="featureComponents[index]" class="flex flex-col divide-y gap-8">
           <div v-for="(link, index) in featureComponents[index].data"
-               class="relative bg-white p-2 w-full pt-6">
+               class="relative bg-white w-full pt-6">
             <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
               <span class="hover:underline" @click="toggle(index)">
                 {{ link.title }}
               </span>
-              <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
-              <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
+              <span class="min-w-[24px]">
+                <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
+                <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
+              </span>
             </a>
             <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px]" v-html="link.supporting_text"></p>
           </div>
@@ -44,7 +46,7 @@ const headerComponents = computed(() => {
 });
 
 const featureComponents = computed(() => {
-  return section.value.components.filter((component) => component.type === "feature_items");
+  return section.value.components.filter((component) => component.type === "faqs");
 });
 
 featureComponents.value.forEach((value, index) => {

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

@@ -20,7 +20,7 @@
               <IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
             </div>
             <h1 class="text-[20px] font-semibold text-gray-900">{{ data.title }}</h1>
-            <div class="text-lg text-gray-600 mt-2 leading-[24px]" v-html="data.description"></div>
+            <div class="text-lg text-gray-600 mt-2 leading-[24px]" v-if="data?.description" v-html="data.description"></div>
             <a
                 v-if="data?.primary_button.show && data.primary_button.url"
                 class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"

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

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden mt-4">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16">
-      <div class="max-w-[800px]" v-if="section.components[0]?.title">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center">
+      <div class="max-w-[800px] py-4" v-if="section.components[0]?.title" ref="leftColumn">
         <h3 class="text-[36px] text-gray-900 font-semibold">
           {{ section.components[0].title }}
         </h3>
@@ -9,7 +9,7 @@
           <div v-html="section.components[0].paragraph"></div>
         </div>
       </div>
-      <div class="w-full rounded-[24px]" v-if="section.components[0]?.featured_image">
+      <div class="w-full rounded-[24px]" v-if="section.components[0]?.featured_image" ref="rightColumn">
         <img :src="section.components[0]?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
       </div>
     </div>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, onMounted} from "vue";
 
 const props = defineProps({
   section: {
@@ -26,6 +26,14 @@ const props = defineProps({
   },
 });
 
+const leftColumn = ref(null);
+const rightColumn = ref(null);
+
 const section = ref(props.section);
 
+onMounted(() => {
+  if (leftColumn.value && rightColumn.value) {
+    rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
+  }
+});
 </script>

package/vite.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
     },
   },
   build: {
+    minify: false,
     outDir: 'dist',
     lib: {
       entry: 'src/components/index.js', // Entry file