@dcodegroup-au/page-builder 0.0.3 → 0.0.4

package/example/src/App.vue

@@ -248,7 +248,7 @@ const sites = [
 </script>
 
 <template>
-  <div style="margin: auto 200px;">
+  <div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
       <PageRender :page="page"/>

package/package.json

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

package/src/components/PageBuilder.vue

@@ -21,7 +21,8 @@
             <template v-for="(component, index) in parent.components">
               <div
                   @click="selectComponent(sectionIndex, component, index)"
-                  class="flex cursor-pointer items-center justify-between rounded-lg py-1 pl-6 pr-2 hover:bg-gray-200"
+                  class="flex cursor-pointer items-center justify-between rounded-lg py-1.5 pl-6 pr-2 hover:bg-gray-100"
+                  :class="{'bg-gray-200 hover:bg-gray-200': selected?.sectionIndex === sectionIndex && selected?.componentIndex === index}"
               >
                 <div class="flex flex-col">
                   <div class="text-xs text-gray-600">Sub-module</div>
@@ -29,7 +30,7 @@
                     {{ component.name }}
                   </div>
                 </div>
-                <div class="flex items-center justify-between gap-3">
+                <div class="flex items-center justify-between gap-3 px-[10px]">
                   <ChevronRight class="h-5 w-5" />
                 </div>
               </div>
@@ -62,7 +63,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, markRaw, computed } from "vue";
+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";
@@ -134,19 +135,4 @@ const currentComponent = computed(() => {
 
   return componentMaps.value[selected.value?.component?.type];
 });
-
-const update = (data) => {
-  // content.value[selected.value.sectionIndex].value.submodules[selected.value.itemIndex] = data;
-
-  // axios
-  //   .post("api.admin.pages.update-content", {
-  //     attributes: content.value,
-  //   })
-  //   .then(() => {
-  //     contentUnchanged.value = true;
-  //   })
-  //   .catch((error) => {
-  //     console.error(error);
-  //   });
-};
 </script>

package/src/components/PageRender.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script setup>
-import {ref, watch, markRaw} from "vue";
+import {ref, markRaw} from "vue";
 import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
 
 const props = defineProps({

package/src/components/builders/VLinks.vue

@@ -33,18 +33,7 @@
           Link #{{index + 1}}
         </div>
         <div class="relative flex items-end">
-          <action-menu>
-            <button
-                class="flex min-w-[15rem] items-center gap-2 p-2.5 hover:rounded-md hover:bg-gray-100"
-                type="button"
-                @click="handleDeleteItem(index)"
-            >
-              <TrashIcon class="h-5 w-5 cursor-pointer stroke-gray-500"/>
-              <span class="text-sm font-medium text-gray-700">
-                Delete Link
-              </span>
-            </button>
-          </action-menu>
+          <ActionMenu @removeItem="handleDeleteItem(index)"/>
         </div>
       </div>
       <div class="flex flex-col gap-6">
@@ -83,11 +72,9 @@
 <script setup>
 import {ref, nextTick} from "vue";
 import PlusIcon from "@/assets/img/icons/plus.svg";
-import TrashIcon from "@/assets/img/icons/trash-01.svg";
 import {defaultProps} from "@/components/helpers/defaultProps.js";
-import {createSlide} from "@/components/helpers/pageBuilderFactory";
+import {createLink} from "@/components/helpers/pageBuilderFactory";
 import ActionMenu from "@/components/common/ActionMenu.vue";
-import VToggle from "@/components/common/VToggle.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import LinkedTo from "@/components/common/LinkedTo.vue";
 import VModal from "@/components/common/VModal.vue";
@@ -107,12 +94,7 @@ function addItem() {
   if (componentData.value.data.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data.push({
-    title: "",
-    type: "site-content",
-    url: "",
-    openInNewTab: "",
-  });
+  componentData.value.data.push(createLink());
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/builders/VSliders.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="flex justify-between pb-2">
     <p class="text-lg font-semibold text-gray-900">
-      {{ data.component.name }}
+      {{ dataRef.name }}
     </p>
   </div>
   <div class="flex flex-col gap-4">
     <div class="text-gray-600 border-b border-gray-200 pb-4 text-sm">
-      {{ props.data.component.supportive_text }}
+      {{ dataRef.supportive_text }}
     </div>
     <div class="flex flex-col gap-3">
       <div class="flex justify-between">
         <div class="flex flex-col gap-1">
           <div class="font-semibold text-gray-900">Sliders</div>
-          <div class="text-sm text-gray-600">This slider can contain up to {{ data.component.max_items }} slides</div>
+          <div class="text-sm text-gray-600">This slider can contain up to {{ dataRef.max_items }} slides</div>
         </div>
         <div>
           <button
-              :disabled="dataRef.data.length >=  data.component.max_items"
+              :disabled="dataRef.data.length >=  dataRef.max_items"
               @click="addItem"
               type="button"
               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': dataRef.data.length >= data.component.max_items }"
+              :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': dataRef.data.length >= dataRef.max_items }"
           >
             <PlusIcon class="h-5 w-5"></PlusIcon>
             <span>Add</span>
@@ -28,9 +28,11 @@
         </div>
       </div>
       <div class="flex flex-col gap-3">
-        <div class="flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg" v-for="(item, index) in dataRef.data">
-          <div class="flex flex-1 cursor-pointer items-center justify-between relative">
-            <div class="flex flex-1 flex-col" @click="edit(item, index)">
+        <div v-for="(item, index) in dataRef.data"
+             class="flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg"
+             :class="{'bg-gray-200 hover:bg-gray-200': openSlideStates[index]}">
+          <div class="flex flex-1 cursor-pointer items-center justify-between relative" @click="toggleSlide(index)">
+            <div class="flex flex-1 flex-col">
               <div class="text-xs text-gray-600">
                 Slider #{{ index + 1 }}
               </div>
@@ -38,7 +40,7 @@
                 {{ item.title }}
               </div>
             </div>
-            <ActionMenu @removeItem="handleDeleteItem(index)" />
+            <ActionMenu @removeItem="handleDeleteItem(index)" :enable-edit="true" @editItem="edit(item, index)"/>
           </div>
         </div>
       </div>
@@ -62,6 +64,26 @@ const props = defineProps({
 const dataRef = ref(props.data.component);
 const modalRef = ref(null);
 
+const openSlideStates = ref(JSON.parse(window.localStorage.getItem("openSlideStates")));
+if (!openSlideStates.value) {
+  openSlideStates.value = {};
+
+  dataRef.value.data.forEach((item, index) => {
+    openSlideStates.value[index] = false;
+  });
+
+  console.log(openSlideStates)
+  window.localStorage.setItem("openSlideStates", JSON.stringify(openSlideStates.value));
+}
+
+const toggleSlide = (index) => {
+  Object.keys(openSlideStates.value).forEach((key) => {
+    openSlideStates.value[key] = false;
+  });
+  openSlideStates.value[index] = !openSlideStates.value[index];
+  window.localStorage.setItem("openSlideStates", JSON.stringify(openSlideStates.value));
+};
+
 const addItem = () => {
   dataRef.value.data.push(createSlide());
   emit("update", dataRef.value);

package/src/components/common/ActionMenu.vue

@@ -2,7 +2,11 @@
   <div class="relative z-50" v-click-outside="click">
     <DotsHorizontal @click="open = !open" class="w-5 cursor-pointer text-gray-600" />
     <div class="absolute -left-60 top-6 w-[240px] rounded-lg border border-gray-200 bg-white" v-if="open">
-      <a class="flex items-center gap-2 p-2.5 cursor-pointer h-[48px] w-full" @click="remove">
+      <a v-if="enableEdit" class="flex items-center gap-2 p-2.5 cursor-pointer h-[48px] w-full hover:bg-gray-100" @click="edit">
+        <Pencil class="w-5" />
+        Edit
+      </a>
+      <a class="flex items-center gap-2 p-2.5 cursor-pointer h-[48px] w-full hover:bg-gray-100" :class="{'hover:rounded-lg': !enableEdit}" @click="remove">
         <TrashIcon class="w-5" />
         Delete
       </a>
@@ -23,10 +27,18 @@ export default {
 <script setup>
 import DotsHorizontal from "@/assets/img/icons/dots-horizontal.svg";
 import TrashIcon from "@/assets/img/icons/trash-01.svg";
+import Pencil from "@/assets/img/icons/pencil-01.svg";
 import { ref } from "vue";
 const open = ref(false);
 const emit = defineEmits(['removeItem']);
 
+const props = defineProps({
+  enableEdit: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const click = () => {
   if (!open.value) {
     return;
@@ -38,4 +50,9 @@ const remove = () => {
   emit('removeItem');
   open.value = false;
 }
+
+const edit = () => {
+  emit('editItem');
+  open.value = false;
+}
 </script>

package/src/components/helpers/pageBuilderFactory.js

@@ -26,9 +26,9 @@ export function createSlide(overrides = {}) {
 
 export function createLink(overrides = {}) {
   return {
-    label: "New link",
-    url: "",
-    open_in_new_tab: false,
+    title: "New link",
+    link_to: "",
+    open_in_new_tab: true,
     type: "site-content",
     ...(overrides || {}),
   };

package/src/components/presenters/components/VSliderPresenter.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex h-[872px] w-full bg-navy-800 relative rounded-[48px] z-10">
-    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel" autoplay="5000" :wrap-around="true">
+    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel w-full" :autoplay="5000" :wrap-around="true">
       <Slide v-for="(slide, index) in component.data" :key="index">
-        <div class="lg:p-8 p-4 flex sm:w-[95%] relative">
+        <div class="lg:p-8 p-4 flex relative">
           <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="component.data.length > 1"
@@ -32,7 +32,7 @@
               v-if="slide.featured_image"
               :src="slide.featured_image"
               alt="Slide Image"
-              class="rounded-[40px] h-[674px] lg:w-1/2 w-full object-cover"/>
+              class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
         </div>
       </Slide>
     </Carousel>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-[48px]">
+  <div class="rounded-[48px] max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-for="(component, index) in section.components">
       <component
           :is="currentComponent(component)"

package/tailwind.config.js

@@ -6,6 +6,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '1xl': '1440px',
+        '2xl': '1536px',
+        '3xl': '1920px',
+      },
       colors: {
         navy: {
           800: '#203E5A',