@dcodegroup-au/page-builder 0.6.2 → 0.6.3

package/dist/page-builder.css

@@ -922,6 +922,12 @@ select {
 .mt-\[40px\] {
   margin-top: 40px;
 }
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
 .\!block {
   display: block !important;
 }
@@ -1738,6 +1744,10 @@ select {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
 }
+.\!py-8 {
+  padding-top: 2rem !important;
+  padding-bottom: 2rem !important;
+}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2024,9 +2034,6 @@ select {
 .leading-8 {
   line-height: 2rem;
 }
-.leading-9 {
-  line-height: 2.25rem;
-}
 .leading-\[24px\] {
   line-height: 24px;
 }
@@ -2826,6 +2833,10 @@ select {
   font-weight: 400;
 }
 
+.page-builder .ql-editor, .page-render .ql-editor, .item-edit .ql-editor {
+  padding: 0px;
+}
+
 .checked\:bg-brand-600:checked {
   --tw-bg-opacity: 1;
   background-color: rgb(158 51 113 / var(--tw-bg-opacity, 1));
@@ -3456,7 +3467,6 @@ select {
 }
 
 .multiline-ellipsis {
-  height: 100%;
   display: -webkit-box; /* Use a flex-like box model */
   -webkit-box-orient: vertical; /* Set the box orientation to vertical */
   overflow: hidden; /* Hide overflowing content */

package/dist/page-builder.es.js

@@ -48504,7 +48504,7 @@ const _sfc_main$j = {
                     }, toDisplayString(slide == null ? void 0 : slide.title), 9, _hoisted_6$g)
                   ]),
                   createElementVNode("p", {
-                    class: "text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis",
+                    class: "text-base font-normal text-gray-600 leading-[24px] line-clamp-6",
                     innerHTML: slide == null ? void 0 : slide.description
                   }, null, 8, _hoisted_7$f),
                   (slide == null ? void 0 : slide.type) === "event" ? (openBlock(), createElementBlock("div", _hoisted_8$e, [
@@ -48957,23 +48957,23 @@ const _sfc_main$e = {
       }
     };
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createElementVNode("div", {
           class: normalizeClass(["max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center", { "flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert, "justify-center": (_b = section.value) == null ? void 0 : _b.center }])
         }, [
           ((_c = component.value) == null ? void 0 : _c.title) || ((_d = component.value) == null ? void 0 : _d.paragraph) ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["max-w-[800px] py-4", { "!max-w-full w-full": (_e = section.value) == null ? void 0 : _e.is_full_width }]),
+            class: normalizeClass(["max-w-[800px] py-4", { "!max-w-full w-full": (_e = section.value) == null ? void 0 : _e.is_full_width, "!py-8": (_f = component.value) == null ? void 0 : _f.featured_image }]),
             ref_key: "leftColumn",
             ref: leftColumn
           }, [
-            ((_f = component.value) == null ? void 0 : _f.title) ? (openBlock(), createElementBlock("h3", _hoisted_2$d, toDisplayString(component.value.title), 1)) : createCommentVNode("", true),
+            ((_g = component.value) == null ? void 0 : _g.title) ? (openBlock(), createElementBlock("h3", _hoisted_2$d, toDisplayString(component.value.title), 1)) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_3$d, [
               createElementVNode("div", {
                 innerHTML: component.value.paragraph
               }, null, 8, _hoisted_4$d),
-              ((_g = component.value) == null ? void 0 : _g.hasOwnProperty("button")) && button.value.show ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
+              ((_h = component.value) == null ? void 0 : _h.hasOwnProperty("button")) && button.value.show ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
                 createElementVNode("a", {
                   href: button.value.url,
                   class: "inline-flex items-center gap-2 !no-underline px-3 py-2.5 rounded-full shadow-xs text-md font-semibold !text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
@@ -48984,13 +48984,13 @@ const _sfc_main$e = {
               ])) : createCommentVNode("", true)
             ])
           ], 2)) : createCommentVNode("", true),
-          ((_h = component.value) == null ? void 0 : _h.featured_image) ? (openBlock(), createElementBlock("div", {
+          ((_i = component.value) == null ? void 0 : _i.featured_image) ? (openBlock(), createElementBlock("div", {
             key: 1,
             class: "w-full max-w-[536px] rounded-[24px] overflow-hidden",
             ref_key: "rightColumn",
             ref: rightColumn
           }, [
-            ((_i = component.value) == null ? void 0 : _i.source_type) === "video" ? (openBlock(), createElementBlock("div", _hoisted_7$d, [
+            ((_j = component.value) == null ? void 0 : _j.source_type) === "video" ? (openBlock(), createElementBlock("div", _hoisted_7$d, [
               createElementVNode("video", {
                 onClick: togglePlayPause,
                 preload: "metadata",
@@ -48999,7 +48999,7 @@ const _sfc_main$e = {
                 class: "h-full w-full object-cover"
               }, [
                 createElementVNode("source", {
-                  src: `${(_j = component.value) == null ? void 0 : _j.featured_image}#t=2`
+                  src: `${(_k = component.value) == null ? void 0 : _k.featured_image}#t=2`
                 }, null, 8, _hoisted_8$c)
               ], 512),
               !isPlaying.value ? (openBlock(), createBlock(unref(PlayButton), {
@@ -49009,7 +49009,7 @@ const _sfc_main$e = {
               })) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock("img", {
               key: 1,
-              src: (_k = component.value) == null ? void 0 : _k.featured_image,
+              src: (_l = component.value) == null ? void 0 : _l.featured_image,
               alt: "Feature Image",
               class: "w-full h-full object-cover rounded-[24px]"
             }, null, 8, _hoisted_9$c))
@@ -49158,7 +49158,7 @@ const _sfc_main$d = {
                         }, null, 8, ["icon"])
                       ])) : createCommentVNode("", true),
                       createElementVNode("div", {
-                        class: normalizeClass(["max-w-[324px] q-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                        class: normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                       }, [
                         createElementVNode("h3", _hoisted_12$6, toDisplayString(item.title), 1),
                         createElementVNode("p", {
@@ -49217,7 +49217,7 @@ const _hoisted_12$5 = {
   class: "text-[24px] mb-6 font-semibold text-navy-800"
 };
 const _hoisted_13$3 = { class: "text-xl font-semibold text-gray-900" };
-const _hoisted_14$3 = { class: "all-unset" };
+const _hoisted_14$3 = { class: "all-unset ql-editor" };
 const _hoisted_15$3 = ["innerHTML"];
 const _sfc_main$c = {
   __name: "Timeline",
@@ -49940,7 +49940,7 @@ const _sfc_main$6 = {
                     ]),
                     show.value[index2] ? (openBlock(), createElementBlock("p", {
                       key: 0,
-                      class: "mt-2 text-gray-600 leading-[24px] all-unset",
+                      class: "mt-2 text-gray-600 leading-[24px] all-unset ql-editor",
                       innerHTML: link.supporting_text
                     }, null, 8, _hoisted_12$3)) : createCommentVNode("", true)
                   ]);
@@ -50023,7 +50023,7 @@ const _sfc_main$5 = {
                   ]),
                   show.value[index] ? (openBlock(), createElementBlock("p", {
                     key: 0,
-                    class: "mt-2 text-gray-600 leading-[24px] all-unset",
+                    class: "mt-2 text-gray-600 leading-[24px] all-unset ql-editor",
                     innerHTML: price == null ? void 0 : price.supporting_text
                   }, null, 8, _hoisted_10$3)) : createCommentVNode("", true)
                 ]);
@@ -50390,7 +50390,7 @@ const _sfc_main$3 = {
                       }), 64))
                     ]),
                     createElementVNode("h3", {
-                      class: "font-semibold text-3xl leading-9",
+                      class: "font-medium text-3xl leading-[38px]",
                       innerHTML: feature.description
                     }, null, 8, _hoisted_5$2),
                     createElementVNode("p", _hoisted_6$2, toDisplayString(feature.title), 1)

package/dist/page-builder.umd.js

@@ -48507,7 +48507,7 @@ ${escapeText(this.code(index, length))}
                       }, vue.toDisplayString(slide == null ? void 0 : slide.title), 9, _hoisted_6$g)
                     ]),
                     vue.createElementVNode("p", {
-                      class: "text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis",
+                      class: "text-base font-normal text-gray-600 leading-[24px] line-clamp-6",
                       innerHTML: slide == null ? void 0 : slide.description
                     }, null, 8, _hoisted_7$f),
                     (slide == null ? void 0 : slide.type) === "event" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$e, [
@@ -48960,23 +48960,23 @@ ${escapeText(this.code(index, length))}
         }
       };
       return (_ctx, _cache) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center", { "flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert, "justify-center": (_b = section.value) == null ? void 0 : _b.center }])
           }, [
             ((_c = component.value) == null ? void 0 : _c.title) || ((_d = component.value) == null ? void 0 : _d.paragraph) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass(["max-w-[800px] py-4", { "!max-w-full w-full": (_e = section.value) == null ? void 0 : _e.is_full_width }]),
+              class: vue.normalizeClass(["max-w-[800px] py-4", { "!max-w-full w-full": (_e = section.value) == null ? void 0 : _e.is_full_width, "!py-8": (_f = component.value) == null ? void 0 : _f.featured_image }]),
               ref_key: "leftColumn",
               ref: leftColumn
             }, [
-              ((_f = component.value) == null ? void 0 : _f.title) ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$d, vue.toDisplayString(component.value.title), 1)) : vue.createCommentVNode("", true),
+              ((_g = component.value) == null ? void 0 : _g.title) ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$d, vue.toDisplayString(component.value.title), 1)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", _hoisted_3$d, [
                 vue.createElementVNode("div", {
                   innerHTML: component.value.paragraph
                 }, null, 8, _hoisted_4$d),
-                ((_g = component.value) == null ? void 0 : _g.hasOwnProperty("button")) && button.value.show ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
+                ((_h = component.value) == null ? void 0 : _h.hasOwnProperty("button")) && button.value.show ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
                   vue.createElementVNode("a", {
                     href: button.value.url,
                     class: "inline-flex items-center gap-2 !no-underline px-3 py-2.5 rounded-full shadow-xs text-md font-semibold !text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
@@ -48987,13 +48987,13 @@ ${escapeText(this.code(index, length))}
                 ])) : vue.createCommentVNode("", true)
               ])
             ], 2)) : vue.createCommentVNode("", true),
-            ((_h = component.value) == null ? void 0 : _h.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
+            ((_i = component.value) == null ? void 0 : _i.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
               class: "w-full max-w-[536px] rounded-[24px] overflow-hidden",
               ref_key: "rightColumn",
               ref: rightColumn
             }, [
-              ((_i = component.value) == null ? void 0 : _i.source_type) === "video" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, [
+              ((_j = component.value) == null ? void 0 : _j.source_type) === "video" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, [
                 vue.createElementVNode("video", {
                   onClick: togglePlayPause,
                   preload: "metadata",
@@ -49002,7 +49002,7 @@ ${escapeText(this.code(index, length))}
                   class: "h-full w-full object-cover"
                 }, [
                   vue.createElementVNode("source", {
-                    src: `${(_j = component.value) == null ? void 0 : _j.featured_image}#t=2`
+                    src: `${(_k = component.value) == null ? void 0 : _k.featured_image}#t=2`
                   }, null, 8, _hoisted_8$c)
                 ], 512),
                 !isPlaying.value ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
@@ -49012,7 +49012,7 @@ ${escapeText(this.code(index, length))}
                 })) : vue.createCommentVNode("", true)
               ])) : (vue.openBlock(), vue.createElementBlock("img", {
                 key: 1,
-                src: (_k = component.value) == null ? void 0 : _k.featured_image,
+                src: (_l = component.value) == null ? void 0 : _l.featured_image,
                 alt: "Feature Image",
                 class: "w-full h-full object-cover rounded-[24px]"
               }, null, 8, _hoisted_9$c))
@@ -49161,7 +49161,7 @@ ${escapeText(this.code(index, length))}
                           }, null, 8, ["icon"])
                         ])) : vue.createCommentVNode("", true),
                         vue.createElementVNode("div", {
-                          class: vue.normalizeClass(["max-w-[324px] q-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                          class: vue.normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                         }, [
                           vue.createElementVNode("h3", _hoisted_12$6, vue.toDisplayString(item.title), 1),
                           vue.createElementVNode("p", {
@@ -49220,7 +49220,7 @@ ${escapeText(this.code(index, length))}
     class: "text-[24px] mb-6 font-semibold text-navy-800"
   };
   const _hoisted_13$3 = { class: "text-xl font-semibold text-gray-900" };
-  const _hoisted_14$3 = { class: "all-unset" };
+  const _hoisted_14$3 = { class: "all-unset ql-editor" };
   const _hoisted_15$3 = ["innerHTML"];
   const _sfc_main$c = {
     __name: "Timeline",
@@ -49943,7 +49943,7 @@ ${escapeText(this.code(index, length))}
                       ]),
                       show.value[index2] ? (vue.openBlock(), vue.createElementBlock("p", {
                         key: 0,
-                        class: "mt-2 text-gray-600 leading-[24px] all-unset",
+                        class: "mt-2 text-gray-600 leading-[24px] all-unset ql-editor",
                         innerHTML: link.supporting_text
                       }, null, 8, _hoisted_12$3)) : vue.createCommentVNode("", true)
                     ]);
@@ -50026,7 +50026,7 @@ ${escapeText(this.code(index, length))}
                     ]),
                     show.value[index] ? (vue.openBlock(), vue.createElementBlock("p", {
                       key: 0,
-                      class: "mt-2 text-gray-600 leading-[24px] all-unset",
+                      class: "mt-2 text-gray-600 leading-[24px] all-unset ql-editor",
                       innerHTML: price == null ? void 0 : price.supporting_text
                     }, null, 8, _hoisted_10$3)) : vue.createCommentVNode("", true)
                   ]);
@@ -50393,7 +50393,7 @@ ${escapeText(this.code(index, length))}
                         }), 64))
                       ]),
                       vue.createElementVNode("h3", {
-                        class: "font-semibold text-3xl leading-9",
+                        class: "font-medium text-3xl leading-[38px]",
                         innerHTML: feature.description
                       }, null, 8, _hoisted_5$2),
                       vue.createElementVNode("p", _hoisted_6$2, vue.toDisplayString(feature.title), 1)

package/package.json

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

package/src/assets/css/style.css

@@ -104,4 +104,7 @@
             }
         }
     }
+    .ql-editor {
+        @apply p-0;
+    }
 }

package/src/components/presenters/components/CarouselPresenter.vue

@@ -37,7 +37,7 @@
               </a>
             </h3>
             <p
-                class="text-base font-normal text-gray-600 leading-[24px] multiline-ellipsis"
+                class="text-base font-normal text-gray-600 leading-[24px] line-clamp-6"
                 v-html="slide?.description"
             ></p>
             <div v-if="slide?.type === 'event'" class="flex gap-2 text-gray-600 mt-6 font-semibold">
@@ -135,7 +135,6 @@ const prevSlide = () => {
 </script>
 <style>
 .multiline-ellipsis {
-  height: 100%;
   display: -webkit-box; /* Use a flex-like box model */
   -webkit-box-orient: vertical; /* Set the box orientation to vertical */
   overflow: hidden; /* Hide overflowing content */

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

@@ -19,7 +19,7 @@
                        @click="toggle(index)"></Minus>
               </span>
             </a>
-            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset"
+            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset ql-editor"
                v-html="price?.supporting_text"></p>
           </div>
         </div>
@@ -43,6 +43,7 @@ import {ref, computed} from "vue";
 import Plus from "@/assets/img/icons/plus-circle.svg";
 import Minus from "@/assets/img/icons/minus-circle.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/FAQ.vue

@@ -20,7 +20,7 @@
                 <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] all-unset" v-html="link.supporting_text"></p>
+            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset ql-editor" v-html="link.supporting_text"></p>
           </div>
         </div>
       </div>
@@ -31,6 +31,7 @@
 import {ref, computed} from "vue";
 import Plus from "@/assets/img/icons/plus-circle.svg";
 import Minus from "@/assets/img/icons/minus-circle.svg";
+import "quill/dist/quill.snow.css";
 
 const props = defineProps({
   section: {

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 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">
+      <div class="max-w-[800px] py-4" :class="{'!max-w-full w-full': section?.is_full_width, '!py-8': component?.featured_image }" v-if="component?.title || component?.paragraph" ref="leftColumn">
         <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
           {{ component.title }}
         </h3>

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

@@ -17,7 +17,7 @@
                   <Star class="w-5 h-5 text-yellow-100"></Star>
                 </template>
               </span>
-                <h3 class="font-semibold text-3xl leading-9" v-html="feature.description"></h3>
+                <h3 class="font-medium text-3xl leading-[38px]" v-html="feature.description"></h3>
                 <p class="text-gray-600">{{ feature.title }}</p>
               </article>
               <div class="h-[480px] w-[560px]">

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

@@ -23,7 +23,7 @@
                   class="bg-pale-orange-100 p-6 mb-6 rounded-[16px]"
               >
                 <h4 class="text-xl font-semibold text-gray-900">{{ line.title }}</h4>
-                <div class="all-unset">
+                <div class="all-unset ql-editor">
                   <p v-html="line.description"></p>
                 </div>
               </div>
@@ -36,6 +36,7 @@
 </template>
 <script setup>
 import {ref, computed} from "vue";
+import "quill/dist/quill.snow.css";
 
 const props = defineProps({
   section: {

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

@@ -36,7 +36,7 @@
                      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] q-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
+                <div class="max-w-[324px] ql-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]" v-html="item.supporting_text ?? item.description"></p>
                   <a