@dcodegroup-au/page-builder 0.3.3 → 0.3.4

package/example/src/pages/BestLife.js

@@ -23,14 +23,7 @@ export const BestLife = {
           name: "Paragraph section",
           type: "paragraph",
           title: "ELAA is proudly supporting",
-          paragraph: "Team member\n" +
-            "Paragraph\n" +
-            "@olivia\n" +
-            "The Victorian Government's Best Start, Best Life reforms represent the most substantial transformation in Victoria's early childhood sector in a generation. As part of these reforms:\n" +
-            "The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.\n" +
-            "The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.\n" +
-            "Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025, starting with children in six regional Victorian local government areas, and will gradually expand across the state.\n" +
-            "This is a hint text to help user.",
+          paragraph: '<p>The Victorian Government’s Best Start, Best Life reforms represent the most substantial transformation in Victoria’s early childhood sector in a generation. As part of these reforms:</p><ol><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.</li><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.</li></ol><p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025, starting with children in six regional Victorian local government areas, and will gradually expand across the state.</p>',
         },
       ]
     },
@@ -280,6 +273,7 @@ export const BestLife = {
         {
           name: "Section header",
           type: "header",
+          has_extra: true,
           title: 'Upcoming Events',
           dark: true,
           supporting_text: 'Don\'t Miss Our Upcoming Activities and Gatherings in Early Education.',

package/package.json

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

package/src/assets/css/style.css

@@ -2,6 +2,81 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Add this to your global CSS file */
+@layer utilities {
+    .all-unset {
+        /* Default styles for common elements */
+        html {
+            font-size: 16px;
+            line-height: 1.15;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        body {
+            margin: 8px;
+            font-family: Arial, sans-serif;
+            color: black;
+            background-color: white;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: bold;
+            margin: 0.67em 0;
+        }
+
+        p {
+            margin: 1em 0;
+        }
+
+        ul, ol {
+            padding-left: 40px;
+            margin: 1em 0;
+        }
+
+        li {
+            list-style-type: disc;
+        }
+
+        a {
+            color: -webkit-link;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        button {
+            align-items: center;
+            appearance: button;
+            background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
+            border: 2px solid transparent;
+            border-radius: 4px;
+            box-sizing: border-box;
+            color: buttontext;
+            cursor: default;
+            display: inline-flex;
+            font: 400 13.3333px Arial;
+            padding: 1px 6px;
+            text-align: center;
+            text-shadow: none;
+            white-space: nowrap;
+        }
+
+        input {
+            font: 400 13.3333px Arial;
+            padding: 1px;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        th, td {
+            padding: 0;
+            text-align: left;
+        }
+    }
+}
+
 .page-builder, .page-render, .item-edit {
     [type="text"],
     [type="email"],

package/src/components/PageBuilder.vue

@@ -4,7 +4,7 @@
       <div class="flex w-[356px] flex-col gap-2 pb-10 overflow-y-auto h-[100vh]">
         <div v-for="(parent, sectionIndex) in modelValue.sections" class="border-b border-gray-200 pb-2">
           <div
-              @click="openStates[sectionIndex] = !openStates[sectionIndex]"
+              @click="updateState(sectionIndex)"
               class="flex cursor-pointer items-center justify-between px-2 py-4"
           >
           <span class="text-lg font-semibold text-brand-800">
@@ -149,6 +149,11 @@ if (!openStates.value) {
   window.localStorage.setItem("pageBuilderOpenStates", JSON.stringify(openStates.value));
 }
 
+const updateState = (sectionIndex) => {
+  openStates.value[sectionIndex] = !openStates.value[sectionIndex];
+  window.localStorage.setItem("pageBuilderOpenStates", JSON.stringify(openStates.value));
+};
+
 const selectComponent = (sectionIndex, component, index) => {
   selected.value = {
     page: props.modelValue,

package/src/components/builders/Header.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="bg-gray-50 px-6 py-5 rounded-xl">
-    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+    <p class="text-lg font-semibold text-gray-900 pb-4" :class="{'border-b border-gray-200': !dataRef?.has_extra}">
       {{ dataRef.name }}
     </p>
-    <div class="flex flex-col gap-4  rounded-xl py-5" :class="{'bg-gray-50 px-0': dataRef?.has_extra, 'bg-gray-200 px-6': !dataRef?.hasOwnProperty('has_extra')}">
+    <div class="flex flex-col gap-4  rounded-xl py-5 bg-gray-50 px-0" :class="{'!bg-gray-200 !px-6': dataRef?.hasOwnProperty('has_extra')}">
       <div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}">
         <input-wrapper
             v-if="dataRef.hasOwnProperty('icon')"

package/src/components/builders/Items.vue

@@ -89,7 +89,7 @@ const toggleItem = (index) => {
 };
 
 const addItem = () => {
-  dataRef.value.data.push(createItem({}, type === 'sliders'));
+  dataRef.value.data.push(createItem({}, type === 'sliders', type === 'timeline_items'));
   emit("update", false);
 };
 

package/src/components/builders/Links.vue

@@ -45,14 +45,24 @@
                 label-text="Title *"
                 class="w-full mb-4"
                 :value="item.title"
-                :limit="componentData?.max_title ?? 20"
+                :limit="componentData?.max_title ?? 200"
             >
               <input
+                  v-if="!isBulletPoint"
                   v-model="item.title"
                   name="title"
                   type="text"
                   placeholder="Title"
-                  :maxlength="componentData?.max_title ?? 20"
+                  :maxlength="componentData?.max_title ?? 200"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+              <textarea
+                  v-else
+                  v-model="item.title"
+                  name="title"
+                  placeholder="Title"
+                  :maxlength="componentData?.max_title ?? 200"
+                  rows="4"
                   class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
               />
             </input-wrapper>
@@ -105,7 +115,7 @@ function addItem() {
   if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data?.push(createLink({}, isBulletPoint));
+  componentData.value.data?.push(createLink({}, isBulletPoint.value));
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/helpers/pageBuilderFactory.js

@@ -1,4 +1,13 @@
-export function createItem(overrides = {}, withSecondary = true) {
+export function createItem(overrides = {}, withSecondary = true, isTimeline = false) {
+  if (isTimeline) {
+    return {
+      lines: [],
+      title: "New title",
+      max_items: 5,
+      group_title: ""
+    }
+  }
+
   let data = {
     title: "New Item",
     description: "New description",

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

@@ -3,9 +3,9 @@
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]" :class="{'flex gap-8': headerComponent?.featured_image}">
       <img v-if="headerComponent?.featured_image"
            :src="headerComponent?.featured_image"
-           class="w-[480px] object-contain rounded-[24px]"
+           class="w-[480px] object-cover rounded-[24px]"
            alt="Feature"/>
-      <div v-if="headerComponent">
+      <div v-if="headerComponent" :class="{'py-[48px]': headerComponent?.featured_image}">
         <div v-if="headerComponent?.icon" class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
           <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
         </div>

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

@@ -3,7 +3,7 @@
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
       <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
         <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
-        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
+        <div v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></div>
       </div>
       <div v-if="cardComponent" class="flex w-full" :class="{'gap-8': headerComponent?.featured_image}">
         <img v-if="headerComponent?.featured_image"
@@ -17,7 +17,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>
-            <p class="text-lg text-gray-600 mt-2 mb-4 leading-[24px]">{{ data.description }}</p>
+            <div class="text-lg text-gray-600 mt-2 mb-4 leading-[24px]" v-html="data.description"></div>
             <a
                 v-if="data?.primary_button.url"
                 class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base"

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

@@ -5,7 +5,9 @@
         <h3 class="text-[36px] text-gray-900 font-semibold">
           {{ section.components[0].title }}
         </h3>
-        <p class="text-xl font-normal leading-[30px] mt-4 text-gray-600" v-html="section.components[0].paragraph"></p>
+        <div class="all-unset">
+          <div v-html="section.components[0].paragraph"></div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,16 +1,18 @@
 <template>
-  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full md:px-8">
+  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
-         class="md:px-[90px] bg-navy-50 rounded-[48px] relative pt-[164px]"
+         class="md:px-[90px]"
          :class="{'flex flex-col items-center text-center': section.components[0]?.center, 'mb-[64px]': hasFeaturedImage}">
-      <h3 class="text-[48px] font-semibold text-gray-900 w-2/3">{{ section.components[0].title }}</h3>
-      <h3 class="text-xl font-normal text-gray-600 mt-3 w-2/3" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
-      <img
-          v-if="hasFeaturedImage"
-          :src="section.components[0]?.featured_image"
-          alt="Card Image"
-          class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
-      />
+      <div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]">
+        <h3 class="text-[48px] font-semibold text-gray-900 w-2/3">{{ section.components[0].title }}</h3>
+        <h3 class="text-xl font-normal text-gray-600 mt-3 w-2/3" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
+        <img
+            v-if="hasFeaturedImage"
+            :src="section.components[0]?.featured_image"
+            alt="Card Image"
+            class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -23,7 +23,9 @@
                   class="bg-pale-orange-100 p-6 mb-6 rounded-[16px]"
               >
                 <h4 class="text-xl font-semibold text-gray-900">{{ line.title }}</h4>
-                <p class="text-xl text-gray-600 mt-3 leading-[30px]">{{ line.description }}</p>
+                <div class="all-unset">
+                  <p v-html="line.description"></p>
+                </div>
               </div>
             </div>
           </div>