@dcodegroup-au/page-builder 0.6.0 → 0.6.2

package/package.json

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

package/src/components/LinkCardEdit.vue

@@ -16,17 +16,17 @@
               <input-wrapper
                   is-vertical
                   field="title"
-                  label-text="Title *"
+                  :label-text="item?.title_label ? item.title_label : 'Title *'"
                   class="w-full"
                   :value="form.title"
-                  :limit="51"
+                  :limit="100"
               >
                 <input
                     v-model="form.title"
                     name="title"
                     type="text"
                     placeholder="Title"
-                    :maxlength="51"
+                    :maxlength="100"
                     class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
                 />
               </input-wrapper>
@@ -34,7 +34,7 @@
             <input-wrapper
                 is-vertical
                 field="description"
-                label-text="Supporting Text *"
+                :label-text="item?.description_label ? item.description_label : 'Supporting Text *'"
                 class="w-full mb-4"
                 :value="descriptionWordCount"
                 :show-count="true"

package/src/components/PageRender.vue

@@ -2,6 +2,7 @@
   <div class="page-render">
     <div v-for="(section, index) in page.sections">
       <component
+          :id="`section-${index}`"
           :is="currentComponent(section)"
           :key="index"
           :section="section"

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

@@ -38,13 +38,13 @@
             <div
                 :class="[
                 'p-8 rounded-[20px] text-left min-h-full',
-                activeMembership.theme === 'dark' ? 'bg-navy-25' : 'bg-brand-25'
+                'bg-brand-25'
               ]"
             >
               <span
                   :class="[
                   'w-12 h-12 flex items-center justify-center rounded-full mb-4',
-                  activeMembership.theme === 'dark' ? 'bg-navy-100 text-navy-600' : 'bg-brand-100 text-brand-600'
+                  'bg-brand-100 text-brand-600'
               ]"
               >
                 <StarIcon class="w-5 h-5"></StarIcon>
@@ -52,7 +52,7 @@
               <h3
                   :class="[
                   'text-4xl leading-10 font-semibold mb-4',
-                  activeMembership.theme === 'dark' ? 'text-navy-700' : 'text-brand-700'
+                  'text-brand-700'
               ]"
               >
                 {{ activeMembership.name }}
@@ -81,7 +81,7 @@
                   </ul>
                 </div>
 
-                <div v-if="activeMembership.excludes" class="flex-1">
+                <div v-if="activeMembership.excludes && activeMembership.excludes?.list?.length" class="flex-1">
                   <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.excludes.title }}</h4>
                   <ul>
                     <li
@@ -102,10 +102,7 @@
             <!-- CTA Button -->
             <a
                 :href="activeMembership.url"
-                class="py-3 px-6 rounded-full font-semibold flex items-center justify-center transition-colors"
-                :class="activeMembership.theme === 'dark'
-                ? 'bg-brand-800 text-white hover:bg-brand-700'
-                : 'bg-navy-600 text-white hover:bg-navy-500'"
+                class="py-3 px-6 rounded-full font-semibold flex items-center justify-center transition-colors bg-brand-600 text-white hover:bg-brand-700"
             >
               {{ activeMembership.button.label }}
               <span class="ml-2"><ArrowUpRight class="w-5 h-5"></ArrowUpRight></span>
@@ -152,7 +149,7 @@ const activeMembership = computed(() =>
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.4s ease;
+  transition: opacity 0.1s ease;
 }
 .fade-enter-from,
 .fade-leave-to {

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

@@ -1,11 +1,11 @@
 <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 items-center" :class="{'flex-row-reverse mt-6 !mb-10': section?.revert}">
-      <div class="max-w-[800px] py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title" ref="leftColumn">
-        <h3 class="text-[36px] text-gray-900 font-semibold">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center" :class="{'flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center }">
+      <div class="max-w-[800px] py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
+        <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
           {{ component.title }}
         </h3>
-        <div class="all-unset">
+        <div class="all-unset ql-editor">
           <div v-html="component.paragraph"></div>
           <div v-if="component?.hasOwnProperty('button') && button.show">
             <a :href="button.url"
@@ -40,6 +40,7 @@
 import {ref, onMounted, computed} from "vue";
 import PlayButton from "@/assets/svg/play.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+import "quill/dist/quill.snow.css";
 
 const props = defineProps({
   section: {

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

@@ -14,7 +14,7 @@
              :target="headerComponent.secondary_button.open_in_new_tab ? '_blank' : ''">
             <span>{{ headerComponent.secondary_button.label }}</span>
           </a>
-          <a class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-base"
+          <a class="bg-brand-600 hover:bg-brand-800 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-base"
              :href="formatUrl(headerComponent.primary_button.url)"
              v-if="headerComponent.primary_button.show"
              :target="headerComponent.primary_button.open_in_new_tab ? '_blank' : ''">

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

@@ -17,19 +17,19 @@
                   <Star class="w-5 h-5 text-yellow-100"></Star>
                 </template>
               </span>
-                <h3 class="font-medium text-3xl leading-9">{{ feature.title }}</h3>
-                <p class="text-gray-600" v-html="feature.description"></p>
+                <h3 class="font-semibold text-3xl leading-9" v-html="feature.description"></h3>
+                <p class="text-gray-600">{{ feature.title }}</p>
               </article>
-              <div class="w-[30rem]">
+              <div class="h-[480px] w-[560px]">
                 <img
                     v-if="feature.featured_image"
                     :src="feature.featured_image"
                     alt="Audience smiling"
-                    class="rounded-tl-3xl rounded-br-3xl"
+                    class="rounded-tl-3xl rounded-br-3xl w-full h-full object-cover"
                 />
                 <img
                     v-else
-                    class="rounded-tl-3xl rounded-br-3xl"
+                    class="rounded-tl-3xl rounded-br-3xl  object-cover"
                     src="@/assets/img/no_image_available.jpeg"
                     alt="No Image Available">
               </div>
@@ -38,21 +38,23 @@
         </div>
 
         <!-- Controls -->
-        <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 absolute bottom-10 left-20">
-          <button
-              type="button"
-              @click="prevSlide"
-              class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
-          >
-            <ArrowLeft class="w-6 h-6 text-gray-500"></ArrowLeft>
-          </button>
-          <button
-              type="button"
-              @click="nextSlide"
-              class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
-          >
-            <ArrowRight class="w-6 h-6 text-gray-500"></ArrowRight>
-          </button>
+        <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 relative">
+          <div class="absolute bottom-[40px] left-[120px] w-full gap-4 flex">
+            <button
+                type="button"
+                @click="prevSlide"
+                class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
+            >
+              <ArrowLeft class="w-6 h-6 text-gray-500"></ArrowLeft>
+            </button>
+            <button
+                type="button"
+                @click="nextSlide"
+                class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
+            >
+              <ArrowRight class="w-6 h-6 text-gray-500"></ArrowRight>
+            </button>
+          </div>
         </footer>
     </div>
   </section>

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

@@ -25,7 +25,7 @@
         <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-row gap-8'">
           <div class="grid gap-8"
                :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `grid-cols-${featureItemsComponent.grid_columns}` : 'grid-cols-2 w-2/3'">
-            <div v-for="item in featureItemsComponent.data"
+            <div v-for="item in items"
                  class="flex gap-3 w-full"
                  :class="{
               'bg-gray-50 p-8 rounded-[24px] overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
@@ -36,11 +36,11 @@
                      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">
                   <IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
                 </div>
-                <div class="max-w-[324px]" :class="{'max-w-full': featureItemsComponent?.has_background}">
+                <div class="max-w-[324px] q-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
                   <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
-                  <p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
+                  <p class="mt-2 text-md font-normal text-gray-600 leading-[24px]" v-html="item.supporting_text ?? item.description"></p>
                   <a
-                      v-if="item?.primary_button?.show && item?.primary_button?.url"
+                      v-if="item?.primary_button?.show"
                       class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
                       :href="formatUrl(item.primary_button.url)"
                       :target="item.primary_button.open_in_new_tab ? '_blank' : ''">
@@ -67,6 +67,7 @@ import IconComponent from "@/components/common/Icon.vue";
 import {ref, computed, onMounted} from "vue";
 import {formatUrl} from "@/components/helpers/common";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+import "quill/dist/quill.snow.css";
 
 const props = defineProps({
   section: {
@@ -88,6 +89,7 @@ const headerComponent = computed(() => {
 const imageComponent = computed(() => {
   return section.value.components.find((component) => component.type === "image_block");
 });
+
 const featureItemsComponent = computed(() => {
   let c = section.value.components.find((component) => component.type === "feature_items");
   if (!c) {
@@ -97,6 +99,16 @@ const featureItemsComponent = computed(() => {
   return c;
 });
 
+const items = computed(() => {
+  return (featureItemsComponent.value.data || []).filter(function (o) {
+    if (o.hasOwnProperty('public')) {
+      return o.public;
+    }
+
+    return true;
+  });
+});
+
 onMounted(() => {
   if (leftColumn.value && rightColumn.value && section.value?.minimum_height) {
     rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;