@dcodegroup-au/page-builder 0.1.9 → 0.2.1

package/example/src/assets/ExampleComponent.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200">Instruction</div>
+  <div class="flex flex-col gap-3 py-6 text-gray-600">
+    <div class="font-semibold text-gray-900">Modules</div>
+    <p>Modules are fixed and for internal reference only, and admin users cannot make the following changes:</p>
+    <ul class="list-inside list-disc pl-3">
+      <li>Edit the title of any module (e.g., "Hero header").</li>
+      <li>Change the order of the modules.</li>
+      <li>Add new module.</li>
+    </ul>
+    <p>For any changes at the module level, please contact the development team.</p>
+  </div>
+  <div class="flex flex-col gap-3 py-6 text-gray-600">
+    <div class="font-semibold text-gray-900">Edit sub-modules or edit nested items</div>
+    <p>Click any sub-module to edit its settings and any nested items within it.</p>
+  </div>
+</template>

package/example/src/main.js

@@ -2,9 +2,13 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import { PageBuilder, ItemEdit, PageRender } from '../../dist/page-builder.es.js'
-import '../../dist/page-builder.css'
+import '../../dist/page-builder.css';
+
+// This is how to override upload component
+// import VFileUpload from "./assets/ExampleComponent.vue";
 
 const app = createApp(App)
+// app.provide("VFileUpload", VFileUpload)
 app.component('ItemEdit', ItemEdit)
 app.component('PageBuilder', PageBuilder)
 app.component('PageRender', PageRender)

package/package.json

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

package/src/components/ItemEdit.vue

@@ -99,8 +99,9 @@
           <VToggle v-model="form.public" name="public" label="Public" />
         </card>
         <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
-          <FileUpload
+          <VFileUpload
               name="image"
+              height="h-[200px]"
               v-model="form.featured_image"
           />
         </card>
@@ -120,13 +121,16 @@
   </div>
 </template>
 <script setup>
-import { ref, computed } 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 FileUpload from "@/components/common/FileUpload.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";
 
 const emit = defineEmits(["update"]);

package/src/components/PageBuilder.vue

@@ -50,7 +50,7 @@
       </div>
     </div>
     <slot>
-      <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4 fixed bottom-0 w-full bg-gray-200 py-2 px-6">
+      <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

package/src/components/builders/VLogos.vue

@@ -38,7 +38,7 @@
       </div>
       <div class="flex flex-col gap-6">
         <div class="flex flex-col gap-1.5">
-          <FileUpload
+          <VFileUpload
               name="image"
               background="bg-white"
               v-model="item.logo"
@@ -65,13 +65,16 @@
   <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
 </template>
 <script setup>
-import {ref, nextTick} from "vue";
+import {ref, nextTick, inject} 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";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 
 const emit = defineEmits(["update"]);
 

package/src/components/presenters/components/VVerticalTabPresenter.vue

@@ -4,8 +4,8 @@
     <div class="flex-1 w-full md:w-1/2 flex flex-col">
       <div v-for="item in publicTabs" :key="item.title">
         <div
-            class="flex-col flex gap-1.5 cursor-pointer hover:bg-navy-50 mb-4 group"
-            :class="{'border-l-4 border-brand-600': selectedItem === item}"
+            class="flex-col flex gap-1.5 cursor-pointer mb-4 group"
+            :class="{'border-l-4 border-brand-600': selectedItem === item, 'border-l-4  border-gray-100': selectedItem !== item}"
             @click.prevent="selectItem(item)"
         >
           <div class="py-4 pl-4 md:pl-6">

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

@@ -1,14 +1,17 @@
 <template>
   <div class="w-full bg-navy-800 py-10 relative lg:h-[336px]">
-    <div class="1xl:max-w-[1824px] mx-auto lg:pl-[120px] pl-4 relative z-10">
-      <div v-for="(component, index) in section.components" class="w-1/2">
-        <component
-            :is="currentComponent(component)"
-            :key="index"
-            :component="component"
-        ></component>
+    <div class="max-w-[1400px] mx-auto w-full">
+      <div class="max-md:mx-[30px] max-1xl:mx-[120px] 1xl:mx-0 relative z-10">
+        <div v-for="(component, index) in section.components" class="w-full md:w-3/4">
+          <component
+              :is="currentComponent(component)"
+              :key="index"
+              :component="component"
+          ></component>
+        </div>
       </div>
     </div>
+
     <HeaderVector class="absolute right-0 top-0"></HeaderVector>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
-    <div class="md:mx-[90px] bg-navy-25 rounded-[48px] p-16">
+  <div class="max-w-[1400px] mx-auto w-full">
+    <div class="max-md:mx-[30px] max-1xl:mx-[120px] 1xl:mx-0 bg-navy-25 rounded-[48px] p-16">
       <div v-for="(component, index) in section.components">
         <component
             :is="currentComponent(component)"