@dcodegroup-au/page-builder 0.5.4 → 0.5.5

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.5",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

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

@@ -42,7 +42,9 @@
           :value="dataRef.supporting_text"
           :limit="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) => {