@dcodegroup-au/page-builder 0.1.8 → 0.1.9

package/example/src/App.vue

@@ -121,16 +121,29 @@ const page = {
     {
       title: "Logo cloud",
       type: "logo",
+      display: "horizontal",
       components: [
         {
           name: "Section header",
           type: "header",
-          is_public: true,
+          supporting_text: "ELAA is proudly supporting",
         },
         {
           id: 2,
           name: "Logos",
           type: "logos",
+          max_items: 7,
+          height: 'medium',
+          data: [
+            {
+              url: "https://childroadsafety.org.au/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/starting_out_safely.png",
+            },
+            {
+              url: "https://carseatssavelives.com.au/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/car_seats_save_lives.jpg",
+            }
+          ]
         }
       ]
     },
@@ -213,6 +226,42 @@ const page = {
         }
       ]
     },
+    {
+      title: "Logo cloud",
+      type: "logo",
+      display: "vertical",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          supporting_text: "ELAA’s preferred partners offer special benefits to ELAA members and support ELAA’s activities",
+        },
+        {
+          id: 2,
+          name: "Logos",
+          type: "logos",
+          max_items: 7,
+          height: 'small',
+          data: [
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/anzuk.png",
+            },
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/bunnings.png",
+            },
+            {
+              url: "/",
+              logo: "https://beta-frontend.elaa.org.au/img/logos/hesta.png",
+            },{
+              url: "/",
+              logo: "",
+            }
+          ]
+        }
+      ]
+    },
     {
       title: "Collection grid",
       type: "collection_grid",

package/package.json

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

package/src/components/PageBuilder.vue

@@ -70,6 +70,7 @@ 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";
 
 const emit = defineEmits(["save", "close"]);
 const props = defineProps({
@@ -94,6 +95,7 @@ const componentMaps = ref({
   links: markRaw(VLinks),
   header: markRaw(VHeader),
   link_grid: markRaw(VLinks),
+  logos: markRaw(VLogos),
 });
 
 if (!openStates.value) {

package/src/components/PageRender.vue

@@ -14,6 +14,7 @@ import {ref, markRaw} from "vue";
 import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
 import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
 import VTabs from "@/components/presenters/modules/VTabs.vue";
+import LogoCloud from "@/components/presenters/modules/LogoCloud.vue";
 
 const props = defineProps({
   page: {
@@ -26,6 +27,7 @@ const componentMaps = ref({
   header: markRaw(HeroHeader),
   quick_links: markRaw(QuickLinks),
   tabs: markRaw(VTabs),
+  logo: markRaw(LogoCloud),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/VHeader.vue

@@ -4,6 +4,7 @@
       {{ dataRef.name }}
     </p>
     <input-wrapper
+        v-if="dataRef.hasOwnProperty('title')"
         is-vertical
         field="title"
         label-text="Title *"
@@ -22,18 +23,19 @@
     </input-wrapper>
     <input-wrapper
         is-vertical
+        v-if="dataRef.hasOwnProperty('supporting_text')"
         field="supporting_text"
         label-text="Supporting Text *"
         class="w-full mb-4"
         :value="dataRef.supporting_text"
-        :limit="100"
+        :limit="dataRef.supporting_text_max_length ?? 100"
     >
       <input
           v-model="dataRef.supporting_text"
           name="supporting_text"
           type="text"
           placeholder="Supporting Text"
-          :maxlength="100"
+          :maxlength="dataRef.supporting_text_max_length ?? 100"
           class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
       />
     </input-wrapper>

package/src/components/builders/VLogos.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="flex justify-between pb-2">
+    <div class="flex justify-between w-full py-1">
+      <div>
+        <p class="text-lg font-semibold text-gray-900">
+          {{ componentData.name }}
+        </p>
+        <p class="text-sm text-gray-600 mt-1">
+          This section can contain up to {{ componentData.max_items }} logos
+        </p>
+      </div>
+      <div>
+        <a
+            @click="addItem"
+            class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 py-2 font-semibold text-white hover:bg-brand-600"
+            :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': componentData.data?.length >= componentData.max_items }"
+        >
+          <PlusIcon class="h-5 w-5"></PlusIcon>
+          <span>Add</span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div
+        v-for="(item, index) in componentData.data"
+        class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+        :key="index"
+        :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+    >
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-semibold text-gray-900">
+          Logo #{{index + 1}}
+        </div>
+        <div class="relative flex items-end">
+          <ActionMenu @removeItem="handleDeleteItem(index)"/>
+        </div>
+      </div>
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-1.5">
+          <FileUpload
+              name="image"
+              background="bg-white"
+              v-model="item.logo"
+          />
+          <input-wrapper
+              is-vertical
+              field="url"
+              label-text="Url *"
+              class="w-full my-4"
+              :value="item.url"
+          >
+            <input
+                v-model="item.url"
+                name="url"
+                type="text"
+                placeholder="Enter your url"
+                class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+            />
+          </input-wrapper>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, nextTick} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import VModal from "@/components/common/VModal.vue";
+import FileUpload from "@/components/common/FileUpload.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push({
+    url: null,
+    logo: null,
+  });
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({behavior: "smooth"});
+    }
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

package/src/components/common/FileUpload.vue

@@ -5,7 +5,7 @@
       @todo handle upload here
       <span class="file-upload-preview">
         <img
-            class="img rounded-lg"
+            class="img rounded-lg h-[200px] object-contain"
             :src="modelValue"
             title="Image"
         />
@@ -27,7 +27,7 @@
         <i class="fal fa-times" @click="deleteFile(file)"></i>
       </a>
     </div>
-    <div class="relative" v-show="!modelValue">
+    <div :class="'relative rounded-lg ' + background" v-show="!modelValue">
       <div class="dropzone border border-dashed rounded-lg z-10 h-[200px] w-full cursor-pointer relative"
            ref="dropzone">
       </div>
@@ -79,6 +79,10 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  background: {
+    type: String,
+    default: "",
+  }
 });
 const emit = defineEmits(["update:modelValue"]);
 

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="w-full relative" :class="{'bg-gray-50': !isHorizontal}">
+    <div class="1xl:max-w-[1824px] mx-auto relative flex justify-center items-center"
+         :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
+      <div v-for="(component, index) in section.components">
+        <p v-if="component?.type === 'header' && component?.supporting_text"
+           class="mr-[48px] text-base text-gray-600 font-medium"
+           :class="{'mb-6': !isHorizontal}"
+        >
+          {{ component?.supporting_text }}
+        </p>
+        <div v-if="component?.type === 'logos'" class="flex flex-wrap justify-center" :class="{'gap-6': isHorizontal, 'gap-12': !isHorizontal}">
+          <template v-for="logo in component.data">
+            <a :href="logo?.url" title="Brand">
+              <img v-if="logo?.logo" :src="logo?.logo" :class="getLogoHeight(component?.height)" alt="Brand Logo"/>
+              <span v-else class="text-sm">No photo</span>
+            </a>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const isHorizontal = section.value.display === 'horizontal';
+
+const getLogoHeight = (size) => {
+  if (size === 'small') {
+    return 'h-[32px]';
+  }
+
+  if (size === 'medium') {
+    return 'h-[40px]';
+  }
+
+  return 'h-[32px]';
+};
+</script>

package/src/components/builders/PageBuilderLogos.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-    <hr class="bg-gray-200" />
-    <page-builder-base-module-form
-      :form="props.data.item.form_component"
-      :page="props.data.page"
-      :data="dataRef"
-      :attribute="props.data.pageAttribute"
-      :module-index="props.data.subModuleIndex"
-      :back-url="route('admin.pages.edit', { page: props.data.page.id })"
-      :sites="sites"
-    ></page-builder-base-module-form>
-  </div>
-</template>
-<script setup>
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps";
-
-const emit = defineEmits(["update"]);
-const route = inject("route");
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const dataRef = ref(props.data.item);
-</script>