@dcodegroup-au/page-builder 0.0.2 → 0.0.4

package/example/src/App.vue

@@ -248,12 +248,18 @@ const sites = [
 </script>
 
 <template>
-  <PageRender :page="page"/>
-  <PageBuilder :page="page"/>
-  <div class="flex">
-    <div class="w-1/4">
-      left panel
+  <div>
+    <div style="margin: 40px 0">
+      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
+      <PageRender :page="page"/>
+    </div>
+    <div style="margin: 40px 0">
+      <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
+      <SlideEdit :slide="slide" :sites="sites"/>
+    </div>
+    <div style="margin: 40px 0">
+      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
+      <PageBuilder v-model="page"/>
     </div>
-    <SlideEdit :slide="slide" :sites="sites"/>
   </div>
 </template>

package/package.json

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

package/src/assets/css/style.css

@@ -12,7 +12,7 @@
 [multiple],
 textarea,
 select {
-    @apply text-base block w-full rounded-lg border border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50 py-2 px-3 font-normal;
+    @apply !text-base block !w-full !rounded-lg !border !border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50 !py-2 !px-3 !font-normal;
 }
 
 .q-editor {

package/src/components/PageBuilder.vue

@@ -1,63 +1,78 @@
 <template>
-  <div class="flex gap-4">
-    <div class="flex w-[356px] flex-col gap-2">
-      <div v-for="(parent, sectionIndex) in page.sections" class="border-b border-gray-200 pb-2">
-        <div
-          @click="openStates[sectionIndex] = !openStates[sectionIndex]"
-          class="flex cursor-pointer items-center justify-between px-2 py-4"
-        >
+  <div>
+    <div class="flex gap-4 px-6 overflow-auto">
+      <div class="flex w-[356px] flex-col gap-2">
+        <div v-for="(parent, sectionIndex) in modelValue.sections" class="border-b border-gray-200 pb-2">
+          <div
+              @click="openStates[sectionIndex] = !openStates[sectionIndex]"
+              class="flex cursor-pointer items-center justify-between px-2 py-4"
+          >
           <span class="text-lg font-semibold text-brand-800">
             {{ parent.title }}
           </span>
-          <div class="relative z-10 flex items-center gap-3">
-            <div class="cursor-pointer">
-              <ChevronRight class="h-5 w-5" v-if="!openStates[sectionIndex]" />
-              <ChevronDown class="h-5 w-5" v-else />
+            <div class="relative flex items-center gap-3">
+              <div class="cursor-pointer">
+                <ChevronRight class="h-5 w-5" v-if="!openStates[sectionIndex]" />
+                <ChevronDown class="h-5 w-5" v-else />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="flex flex-col gap-2" v-if="openStates[sectionIndex]">
-          <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"
-            >
-              <div class="flex flex-col">
-                <div class="text-xs text-gray-600">Sub-module</div>
-                <div class="text-sm font-medium text-gray-900">
-                  {{ component.name }}
+          <div class="flex flex-col gap-2" v-if="openStates[sectionIndex]">
+            <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.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>
+                  <div class="text-sm font-medium text-gray-900">
+                    {{ component.name }}
+                  </div>
+                </div>
+                <div class="flex items-center justify-between gap-3 px-[10px]">
+                  <ChevronRight class="h-5 w-5" />
                 </div>
               </div>
-              <div class="flex items-center justify-between gap-3">
-                <ChevronRight class="h-5 w-5" />
-              </div>
-            </div>
-          </template>
+            </template>
+          </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" />
+        <component
+            :is="currentComponent"
+            :key="selected?.sectionIndex + selected?.componentIndex"
+            :data="selected"
+            :sites="sites"
+            @update="update"
+        ></component>
+      </div>
     </div>
-    <div class="flex h-full flex-1 flex-col rounded-xl bg-gray-50 px-6 py-5">
-      <Instructions v-if="!selected" />
-      <component
-        :is="currentComponent"
-        :key="selected?.sectionIndex + selected?.componentIndex"
-        :data="selected"
-        :sites="sites"
-        @update="update"
-      ></component>
-    </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">
+        <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, 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";
 import VSliders from "@/components/builders/VSliders.vue";
 import VLinks from "@/components/builders/VLinks.vue";
 
+const emit = defineEmits(["save", "close"]);
 const props = defineProps({
-  page: {
+  modelValue: {
     required: true,
     type: Object,
   },
@@ -79,9 +94,8 @@ const props = defineProps({
 });
 
 const openStates = ref(JSON.parse(window.localStorage.getItem("pageBuilderOpenStates")));
-const sections = ref(props.page?.sections ?? []);
+const sections = ref(props.modelValue?.sections ?? []);
 let selected = ref(null);
-const contentUnchanged = ref(true);
 const componentMaps = ref({
   sliders: markRaw(VSliders),
   links: markRaw(VLinks),
@@ -99,18 +113,20 @@ if (!openStates.value) {
 
 const selectComponent = (sectionIndex, component, index) => {
   selected.value = {
-    page: props.page,
+    page: props.modelValue,
     component: component,
     componentIndex: index,
     sectionIndex: sectionIndex,
   };
-  console.log(selected, currentComponent);
 };
 
-setTimeout(() => {
-  console.log(sections)
-  selectComponent(0, sections.value[0].components[1], 0)
-})
+const close = () => {
+  emit("close", props.modelValue);
+};
+
+const save = () => {
+  emit("save", props.modelValue);
+};
 
 const currentComponent = computed(() => {
   if (!selected.value?.component?.type) {
@@ -119,25 +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);
-  //   });
-};
-
-watch(
-  () => sections.value,
-  () => (contentUnchanged.value = false),
-  { deep: true },
-);
 </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/SlideEdit.vue

@@ -106,15 +106,17 @@
         </card>
       </div>
     </div>
-    <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 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>
@@ -125,6 +127,7 @@ 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 axios from "axios";
 
 const emit = defineEmits(["update"]);
 
@@ -133,6 +136,14 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  saveEndpoint: {
+    type: String,
+    required: false,
+  },
+  cancelEndpoint: {
+    type: String,
+    required: false,
+  },
   sites: {
     type: Object,
     required: true,
@@ -150,10 +161,22 @@ const form = ref({
 
 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(() => {

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(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);
@@ -76,12 +98,11 @@ const deleteCallback = (index) => {
   emit("update", dataRef.value);
 };
 
-const edit = (index) => {
-  // window.location.href = route("admin.pages.edit-attribute", {
-  //   page: props.data.pageAttribute.page_id,
-  //   attribute: props.data.pageAttribute.id,
-  //   moduleIndex: props.data.subModuleIndex,
-  //   itemIndex: index,
-  // });
+const edit = (item, index) => {
+  if (item.hasOwnProperty('edit_url')) {
+    window.location.href = item.edit_url;
+  }
+
+  window.location.href = `/admin/pages/${props?.data?.page?.id}/sections/${props?.data?.sectionIndex}/components/${props?.data?.componentIndex}/slides/${index}`;
 };
 </script>

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/common/FileUpload.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="file-upload">
     <input type="hidden" :name="name" :value="valueJson"/>
-    <div v-if="file.length" class="preview">
+    <div v-if="modelValue" class="preview">
+      @todo handle upload here
+      <span class="file-upload-preview">
+        <img
+            class="img rounded-lg"
+            :src="modelValue"
+            title="Image"
+        />
+      </span>
+    </div>
+    <div v-else-if="file && file.length" class="preview">
       <span class="file-upload-preview">
         <img
             class="img"
@@ -17,7 +27,7 @@
         <i class="fal fa-times" @click="deleteFile(file)"></i>
       </a>
     </div>
-    <div class="relative">
+    <div class="relative" v-show="!modelValue">
       <div class="dropzone border border-dashed rounded-lg z-10 h-[200px] w-full cursor-pointer relative"
            ref="dropzone">
       </div>
@@ -47,7 +57,7 @@ Dropzone.autoDiscover = false;
 const props = defineProps({
   name: {
     type: String,
-    required: true,
+    required: false,
   },
   modelValue: {
     type: [String, Object],
@@ -55,11 +65,11 @@ const props = defineProps({
   },
   submitEndpoint: {
     type: String,
-    required: true,
+    required: false,
   },
   deleteEndpoint: {
     type: String,
-    required: true,
+    required: false,
   },
   formData: {
     type: Object,
@@ -67,7 +77,7 @@ const props = defineProps({
   },
   csrf: {
     type: String,
-    required: true,
+    required: false,
   },
 });
 const emit = defineEmits(["update:modelValue"]);

package/src/components/common/InputWrapper.vue

@@ -17,25 +17,43 @@
     </span>
     <slot />
     <span class="absolute right-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="limit">
-      {{value.length}}/{{limit}} characters
+      {{ value?.length }}/{{ limit }} characters
     </span>
     <span class="absolute left-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="showCount">
-      Word count: {{value}}
+      Word count: {{ value }}
     </span>
   </label>
 </template>
 
-<script setup lang="ts">
-
-interface Props {
-  field: string;
-  labelText?: string;
-  value?: any;
-  limit?: number;
-  showCount?: boolean;
-  darkTheme?: boolean;
-  isRequired?: boolean;
-}
-
-const props = defineProps<Props>();
+<script setup>
+const props = defineProps({
+  field: {
+    type: String,
+    required: true,
+  },
+  labelText: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+  limit: {
+    type: Number,
+    default: null,
+  },
+  showCount: {
+    type: Boolean,
+    default: false,
+  },
+  darkTheme: {
+    type: Boolean,
+    default: false,
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>

package/src/components/common/QuillEditor.vue

@@ -45,10 +45,8 @@ export default {
     onMounted(() => {
       quillInstance = new Quill(editorContainer.value, props.options);
 
-      // Set initial content
       quillInstance.root.innerHTML = props.modelValue;
 
-      // Listen for text changes
       quillInstance.on("text-change", () => {
         emit("update:modelValue", quillInstance.root.innerHTML);
       });