@dcodegroup-au/page-builder 0.5.5 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.5.5",
+  "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/builders/Header.vue

@@ -40,7 +40,7 @@
           :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

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