@dcodegroup-au/page-builder 0.2.8 → 0.2.9

package/src/components/ItemEdit.vue

@@ -1,19 +1,76 @@
 <template>
   <div class="item-edit">
     <div class="flex items-start gap-4 px-6 pt-4 h-full min-h-[90vh]">
-      <div class="flex flex-1 flex-col gap-4">
-        <card title="Description">
+      <div class="flex flex-1 flex-col gap-4 mb-4">
+        <div v-if="hasLines">
+          <div class="flex justify-between mb-4">
+            <div class="flex flex-col gap-1">
+              <p class="text-base font-semibold text-gray-900">Events</p>
+              <p class="text-sm">
+                This timeline item can contain up to {{ item?.max_items }} events.
+              </p>
+            </div>
+            <button
+                :disabled="advancedForm.lines.length >=  item?.max_items"
+                @click="addLine"
+                class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 h-[40px] font-semibold text-white hover:bg-brand-600"
+                :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': advancedForm.lines.length >= item?.max_items }"
+            >
+              <PlusIcon class="h-5 w-5"></PlusIcon>
+              <span>Event</span>
+            </button>
+          </div>
+          <div class="flex flex-col gap-4">
+            <div
+                v-for="(line, index) in advancedForm.lines"
+                :key="index"
+                class="flex flex-col gap-2 rounded-lg px-6 pt-4 pb-[40px] bg-gray-50"
+            >
+              <div class="flex justify-between items-center border-b border-gray-200 pb-3 mb-4">
+                <p class="text-lg font-semibold text-gray-900"> Event #{{ index + 1 }}</p>
+                <ActionMenu @removeItem="handleDeleteItem(index)"/>
+              </div>
+              <input-wrapper
+                  is-vertical
+                  field="line.title"
+                  label-text="Heading *"
+                  class="w-full"
+                  :value="line.title"
+              >
+                <input
+                    v-model="line.title"
+                    name="line.title"
+                    type="text"
+                    placeholder="Heading"
+                    class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                />
+              </input-wrapper>
+              <input-wrapper
+                  is-vertical
+                  field="line.description"
+                  label-text="Description *"
+                  class="w-full"
+                  :value="descriptionWordCount(line.description)"
+                  :show-count="true"
+              >
+                <QuillEditor v-model="line.description"/>
+              </input-wrapper>
+            </div>
+          </div>
+        </div>
+
+        <card title="Description" v-else>
           <div class="flex flex-col gap-8">
             <input-wrapper
                 is-vertical
                 field="title"
                 label-text="Title *"
                 class="w-full"
-                :value="form.title"
+                :value="basicForm.title"
                 :limit="51"
             >
               <input
-                  v-model="form.title"
+                  v-model="basicForm.title"
                   name="title"
                   type="text"
                   placeholder="Title"
@@ -26,83 +83,69 @@
                 field="description"
                 label-text="Description *"
                 class="w-full mb-4"
-                :value="descriptionWordCount"
+                :value="descriptionWordCount(basicForm.description)"
                 :show-count="true"
             >
-              <QuillEditor v-model="form.description"/>
+              <QuillEditor v-model="basicForm.description"/>
             </input-wrapper>
           </div>
         </card>
-        <card  v-if="form.hasOwnProperty('primary_button')" :title="form?.primary_button?.name ?? 'Primary button'">
-          <div class="flex flex-col gap-8">
-            <VToggle name="show" v-model="form.primary_button.show"  title="Show Button" />
+        <VButton v-if="basicForm.hasOwnProperty('primary_button')" :button="basicForm.primary_button" :sites="sites"/>
+        <VButton v-if="basicForm.hasOwnProperty('secondary_button')" :button="basicForm.secondary_button" :sites="sites"/>
+      </div>
+      <div class="flex w-full max-w-[356px] flex-col gap-4">
+        <template v-if="!hasLines">
+          <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
+            <VToggle v-model="basicForm.public" name="public" label="Public"/>
+          </card>
+          <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
+            <VFileUpload
+                name="image"
+                height="h-[200px]"
+                v-model="basicForm.featured_image"
+            />
+          </card>
+        </template>
+        <template v-else>
+          <card title="Timeline item title" supporting_text="To indicate the time period of the events">
             <input-wrapper
                 is-vertical
-                field="primary_button.label"
-                label-text="Button Label *"
-                class="w-full mb-4"
-                :value="form.primary_button.label"
+                field="title"
+                label-text="Timeline item title *"
+                class="w-full"
+                :value="advancedForm.title"
                 :limit="20"
             >
               <input
-                  v-model="form.primary_button.label"
-                  name="primary_button.label"
+                  v-model="advancedForm.title"
+                  name="title"
                   type="text"
-                  placeholder="Label"
+                  placeholder="Title"
                   :maxlength="20"
                   class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
               />
             </input-wrapper>
-            <linked-to
-                name="primary"
-                v-model:type="form.primary_button.type"
-                v-model:url="form.primary_button.url"
-                v-model:openInNewTab="form.primary_button.open_in_new_tab"
-                :sites="sites"
-            />
-          </div>
-        </card>
-        <card v-if="form.hasOwnProperty('secondary_button')" :title="form?.secondary_button?.name ?? 'Secondary button'">
-          <div class="flex flex-col gap-4">
-            <VToggle name="show" v-model="form.secondary_button.show"  title="Show Button" />
+          </card>
+          <card title="Event group title" supporting_text="The title for the group of events under this time period">
             <input-wrapper
                 is-vertical
-                field="secondary_button.label"
-                label-text="Button Label *"
-                class="w-full mb-4"
-                :value="form.secondary_button.label"
-                :limit="20"
+                field="title"
+                label-text="Event group title *"
+                class="w-full"
+                :value="advancedForm.group_title"
+                :limit="51"
             >
               <input
-                  v-model="form.secondary_button.label"
-                  name="secondary_button.label"
+                  v-model="advancedForm.group_title"
+                  name="title"
                   type="text"
-                  placeholder="Label"
-                  :maxlength="20"
+                  placeholder="Title"
+                  :maxlength="51"
                   class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
               />
             </input-wrapper>
-            <linked-to
-                name="secondary"
-                v-model:type="form.secondary_button.type"
-                v-model:url="form.secondary_button.url"
-                v-model:openInNewTab="form.secondary_button.open_in_new_tab"
-                :sites="sites"
-            />
-          </div>
-        </card>
-      </div>
-      <div class="flex w-full max-w-[356px] flex-col gap-4">
-        <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
-          <VToggle v-model="form.public" name="public" label="Public" />
-        </card>
-        <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
-          <VFileUpload
-              name="image"
-              height="h-[200px]"
-              v-model="form.featured_image"
-          />
-        </card>
+          </card>
+        </template>
       </div>
     </div>
     <slot>
@@ -116,20 +159,25 @@
         >Save changes</a>
       </div>
     </slot>
+    <VModal ref="modalRef" :entity="'event'" :callback="removeLine"></VModal>
   </div>
 </template>
+
 <script setup>
-import { ref, computed, inject } from "vue";
+import {ref, computed, inject} from "vue";
 import QuillEditor from "@/components/common/QuillEditor.vue";
 import Card from "@/components/common/Card.vue";
-import LinkedTo from "@/components/common/LinkedTo.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
-import VToggle from "@/components/common/VToggle.vue";
+import VToggle from "@/components/common/Toggle.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 import axios from "axios";
+import VButton from "@/components/common/Button.vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VModal from "@/components/common/Modal.vue";
 
 const emit = defineEmits(["update"]);
 
@@ -147,39 +195,64 @@ const props = defineProps({
     required: false,
   },
   sites: {
-    type: Object,
+    type: Array,
     required: true,
   },
 });
 
-const form = ref({
+const hasLines = computed(() => {
+  return props.item.hasOwnProperty('lines');
+});
+
+const modalRef = ref(null);
+
+const basicForm = ref({
   public: props.item.public,
   title: props.item.title,
   description: props.item.description,
   featured_image: props.item.featured_image,
+  lines: props.item.lines || [],
+});
+
+const advancedForm = ref({
+  title: props.item.title,
+  title_group: props.item?.title_group,
+  max_items: props.item?.max_items,
+  lines: props.item.lines || [],
 });
 
 if (props.item.hasOwnProperty('primary_button')) {
-  form.value.primary_button = props.item.primary_button;
+  basicForm.value.primary_button = props.item.primary_button;
 }
 
 if (props.item.hasOwnProperty('secondary_button')) {
-  form.value.secondary_button = props.item.secondary_button;
+  basicForm.value.secondary_button = props.item.secondary_button;
 }
 
+const addLine = () => {
+  advancedForm.value.lines.push({title: "", description: ""});
+};
+
+const removeLine = (index) => {
+  advancedForm.value.lines.splice(index, 1);
+  emit("update", false);
+};
+
 const save = () => {
+  let form = hasLines.value ? advancedForm : basicForm;
   emit("update", form.value);
 
   if (props.saveEndpoint) {
-    axios.post(props.saveEndpoint, form.value).then (() => {
+    axios.post(props.saveEndpoint, form.value).then(() => {
       if (props.cancelEndpoint) {
         window.location.href = props.cancelEndpoint;
       }
-    })
+    });
   }
 };
 
 const close = () => {
+  let form = hasLines.value ? advancedForm : basicForm;
   emit("close", form.value);
 
   if (props.cancelEndpoint) {
@@ -187,10 +260,13 @@ const close = () => {
   }
 };
 
-const descriptionWordCount = computed(() => {
-  const plainText = form.value.description?.replace(/<[^>]*>/g, ' ').trim();
+const descriptionWordCount = (description) => {
+  const plainText = description?.replace(/<[^>]*>/g, ' ').trim();
   const words = plainText.split(/\s+/).filter(word => word.length > 0);
   return words.length;
-});
+};
 
-</script>
+const handleDeleteItem = (index) => {
+  modalRef?.value?.open(index);
+};
+</script>

package/src/components/LinkCardEdit.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="item-edit">
+    <div class="flex items-start gap-4 px-6 pt-4 h-full min-h-[90vh]">
+      <div class="flex flex-1 flex-col gap-4">
+        <card title="Description">
+          <div class="flex flex-col gap-8">
+            <div class="flex gap-4">
+              <input-wrapper
+                  is-vertical
+                  field="icon"
+                  label-text="Icon *"
+                  :value="form.icon"
+              >
+                <IconSelector id="icon" v-model="form.icon" />
+              </input-wrapper>
+              <input-wrapper
+                  is-vertical
+                  field="title"
+                  label-text="Title *"
+                  class="w-full"
+                  :value="form.title"
+                  :limit="51"
+              >
+                <input
+                    v-model="form.title"
+                    name="title"
+                    type="text"
+                    placeholder="Title"
+                    :maxlength="51"
+                    class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                />
+              </input-wrapper>
+            </div>
+            <input-wrapper
+                is-vertical
+                field="description"
+                label-text="Supporting Text *"
+                class="w-full mb-4"
+                :value="descriptionWordCount"
+                :show-count="true"
+            >
+              <QuillEditor v-model="form.description"/>
+            </input-wrapper>
+          </div>
+        </card>
+        <VButton v-if="form.hasOwnProperty('primary_button')" :button="form.primary_button" :sites="sites"/>
+      </div>
+      <div class="flex w-full max-w-[356px] flex-col gap-4">
+        <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
+          <VToggle v-model="form.public" name="public" label="Public" />
+        </card>
+      </div>
+    </div>
+    <slot>
+      <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4 sticky bottom-0 w-full bg-gray-200 py-2 px-6">
+        <a @click="close"
+           class="w-[200px] py-[9px] bg-white rounded-full border border-gray-300 shadow-xs text-md font-semibold hover:bg-gray-100 text-gray-700 text-center cursor-pointer">
+          Cancel
+        </a>
+        <a @click.prevent="save"
+           class="w-full py-[9px] 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"
+        >Save changes</a>
+      </div>
+    </slot>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+import QuillEditor from "@/components/common/QuillEditor.vue";
+import IconSelector from "@/components/common/IconSelector.vue";
+import Card from "@/components/common/Card.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import VToggle from "@/components/common/Toggle.vue";
+import axios from "axios";
+import VButton from "@/components/common/Button.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  saveEndpoint: {
+    type: String,
+    required: false,
+  },
+  cancelEndpoint: {
+    type: String,
+    required: false,
+  },
+  sites: {
+    type: Array,
+    required: true,
+  },
+});
+
+const form = ref({
+  icon: props.item.icon,
+  public: props.item.public,
+  title: props.item.title,
+  description: props.item.description,
+});
+
+if (props.item.hasOwnProperty('primary_button')) {
+  form.value.primary_button = props.item.primary_button;
+}
+
+if (props.item.hasOwnProperty('secondary_button')) {
+  form.value.secondary_button = props.item.secondary_button;
+}
+
+const save = () => {
+  emit("update", form.value);
+
+  if (props.saveEndpoint) {
+    axios.post(props.saveEndpoint, form.value).then (() => {
+      if (props.cancelEndpoint) {
+        window.location.href = props.cancelEndpoint;
+      }
+    })
+  }
+};
+
+const close = () => {
+  emit("close", form.value);
+
+  if (props.cancelEndpoint) {
+    window.location.href = props.cancelEndpoint;
+  }
+};
+
+const descriptionWordCount = computed(() => {
+  const plainText = form.value.description?.replace(/<[^>]*>/g, ' ').trim();
+  const words = plainText.split(/\s+/).filter(word => word.length > 0);
+  return words.length;
+});
+
+</script>

package/src/components/PageBuilder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-builder overflow-auto">
     <div class="flex gap-4 px-6 overflow-auto">
-      <div class="flex w-[356px] flex-col gap-2 pb-10">
+      <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]"
@@ -38,8 +38,28 @@
           </div>
         </div>
       </div>
-      <div class="flex h-full flex-1 flex-col rounded-xl bg-gray-50 px-6 py-5 mb-20">
-        <Instructions v-if="!selected" />
+      <div class="flex h-full flex-1 flex-col mb-20">
+        <div class="mb-4 px-6 py-5 rounded-xl bg-gray-50" v-if="!selected">
+          <div class="text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200">Settings</div>
+          <div class="flex flex-col gap-1 pt-6 text-gray-600">
+            <input-wrapper
+                field="breadcrumb"
+                label-text="Breadcrumb section"
+                class="w-full">
+              <select id="breadcrumb" v-model="modelValue.breadcrumb" name="url">
+                <option
+                    :value="b"
+                    v-for="(b) in breadcrumbs">
+                  {{ b }}
+                </option>
+              </select>
+            </input-wrapper>
+            <p>This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.</p>
+          </div>
+        </div>
+        <div class="rounded-xl bg-gray-50 px-6 py-5" v-if="!selected">
+          <Instructions />
+        </div>
         <component
             class="min-h-[90vh]"
             :is="currentComponent"
@@ -68,13 +88,16 @@ import { ref, markRaw, computed } from "vue";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 import ChevronDown from "@/assets/img/icons/chevron-down.svg";
 import Instructions from "@/components/builders/Instructions.vue";
-import VItems from "@/components/builders/VItems.vue";
-import VLinks from "@/components/builders/VLinks.vue";
-import VHeader from "@/components/builders/VHeader.vue";
-import VLogos from "@/components/builders/VLogos.vue";
-import VCollectionCarousel from "@/components/builders/VCollectionCarousel.vue";
-import VNewsGrid from "@/components/builders/VNewsGrid.vue";
-import VVideoGrid from "@/components/builders/VVideoGrid.vue";
+import VItems from "@/components/builders/Items.vue";
+import VLinks from "@/components/builders/Links.vue";
+import VHeader from "@/components/builders/Header.vue";
+import VLogos from "@/components/builders/Logos.vue";
+import VCollectionCarousel from "@/components/builders/CollectionCarousel.vue";
+import VNewsGrid from "@/components/builders/NewsGrid.vue";
+import VVideoGrid from "@/components/builders/VideoGrid.vue";
+import VParagraph from "@/components/builders/Paragraph.vue";
+import VImageBlock from "@/components/builders/ImageBlock.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -88,6 +111,12 @@ const props = defineProps({
       return []
     }
   },
+  breadcrumbs: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
 });
 
 const openStates = ref(JSON.parse(window.localStorage.getItem("pageBuilderOpenStates")));
@@ -103,6 +132,10 @@ const componentMaps = ref({
   carousel: markRaw(VCollectionCarousel),
   news_grid: markRaw(VNewsGrid),
   video_grid: markRaw(VVideoGrid),
+  paragraph: markRaw(VParagraph),
+  image_block: markRaw(VImageBlock),
+  timeline_items: markRaw(VItems),
+  link_cards: markRaw(VItems),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -17,6 +17,12 @@ import VTabs from "@/components/presenters/modules/VTabs.vue";
 import LogoCloud from "@/components/presenters/modules/LogoCloud.vue";
 import CollectionCarousel from "@/components/presenters/modules/CollectionCarousel.vue";
 import CollectionGrid from "@/components/presenters/modules/CollectionGrid.vue";
+import StandardHeader from "@/components/presenters/modules/StandardHeader.vue";
+import Paragraph from "@/components/presenters/modules/Paragraph.vue";
+import TwoColumnsImageContent from "@/components/presenters/modules/TwoColumnsImageContent.vue";
+import Timeline from "@/components/presenters/modules/Timeline.vue";
+import LinkCard from "@/components/presenters/modules/LinkCard.vue";
+import LinkList from "@/components/presenters/modules/LinkList.vue";
 
 const props = defineProps({
   page: {
@@ -26,12 +32,18 @@ const props = defineProps({
 });
 
 const componentMaps = ref({
+  paragraph: markRaw(Paragraph),
+  standard_header: markRaw(StandardHeader),
   header: markRaw(HeroHeader),
   quick_links: markRaw(QuickLinks),
   tabs: markRaw(VTabs),
   logo: markRaw(LogoCloud),
   collection_carousel: markRaw(CollectionCarousel),
   collection_grid: markRaw(CollectionGrid),
+  two_column_image_content: markRaw(TwoColumnsImageContent),
+  timeline: markRaw(Timeline),
+  link_card: markRaw(LinkCard),
+  link_list: markRaw(LinkList),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/CollectionCarousel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex flex-col">
+      <div class="flex flex-col gap-4 mb-4 border-b border-gray-200 pb-4">
+        <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+          Carousel
+        </p>
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-1.5">
+            <input-wrapper
+                v-if="componentData.button"
+                is-vertical
+                field="title"
+                label-text="Button label *"
+                class="w-full mb-4"
+                :value="componentData.button.title"
+                :limit="51"
+            >
+              <input
+                  v-model="componentData.button.title"
+                  name="title"
+                  type="text"
+                  placeholder="Title"
+                  :maxlength="51"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+            </input-wrapper>
+            <linked-to
+                v-if="componentData?.button"
+                label="Link to"
+                name="button"
+                v-model:type="componentData.button.type"
+                v-model:url="componentData.button.url"
+                v-model:openInNewTab="componentData.button.open_in_new_tab"
+                :sites="sites"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 v-if="componentData.content?.label" class="text-base text-gray-900 font-semibold">
+          {{ componentData.content.label }}</h3>
+        <p v-if="componentData.content?.supportive_text" class="text-gray-600 text-base font-normal mt-2">
+          {{ componentData.content.supportive_text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+</script>