@dcodegroup-au/page-builder 0.0.2 → 0.0.3

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 style="margin: auto 200px;">
+    <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.3",
   "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,51 +1,64 @@
 <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 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>
+                </div>
+                <div class="flex items-center justify-between gap-3">
+                  <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>
@@ -56,8 +69,9 @@ 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 +93,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 +112,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) {
@@ -134,10 +149,4 @@ const update = (data) => {
   //     console.error(error);
   //   });
 };
-
-watch(
-  () => sections.value,
-  () => (contentUnchanged.value = false),
-  { deep: true },
-);
 </script>

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/VSliders.vue

@@ -30,7 +30,7 @@
       <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 class="flex flex-1 flex-col" @click="edit(item, index)">
               <div class="text-xs text-gray-600">
                 Slider #{{ index + 1 }}
               </div>
@@ -76,12 +76,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/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);
       });

package/src/components/helpers/pageBuilderFactory.js

@@ -1,22 +1,23 @@
 export function createSlide(overrides = {}) {
   return {
     title: "New slide",
+    description: "New description",
     public: false,
     featured_image: "",
     primary_button: {
       show: false,
       label: "",
       type: "site-content",
-      url: "",
-      open_in_new_tab: false,
+      link_to: '',
+      is_new_tab: false,
       ...(overrides.primary_button || {}),
     },
     secondary_button: {
       show: false,
       label: "",
       type: "site-content",
-      url: "",
-      open_in_new_tab: false,
+      link_to: '',
+      is_new_tab: false,
       ...(overrides.secondary_button || {}),
     },
     ...overrides,

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

@@ -11,7 +11,7 @@
               ></a>
             </div>
             <h3 class="lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
-            <p class="text-lg font-normal text-navy-50">{{ slide?.description }}</p>
+            <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
             <div class="flex gap-3 mt-8 flex-col lg:flex-row">
               <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                  :href="slide.secondary_button.link_to"

package/example/src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>