@dcodegroup-au/page-builder 0.0.1

package/src/components/common/QuillEditor.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="q-editor">
+    <div ref="editorContainer"></div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+
+export default {
+  name: "QuillEditor",
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    options: {
+      type: Object,
+      default: () => ({
+        theme: "snow",
+        placeholder: "Start typing...",
+        modules: {
+          toolbar: [
+            [{ font: [] }, { size: [] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            [{ color: [] }, { background: [] }],
+            [{ script: 'sub' }, { script: 'super' }],
+            [{ header: 1 }, { header: 2 }, 'blockquote', 'code-block'],
+            [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+            [{ direction: 'rtl' }, { align: [] }],
+            ['link', 'image', 'video', 'formula'],
+            ['clean'], // remove formatting
+          ],
+        },
+      }),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const editorContainer = ref(null);
+    let quillInstance = null;
+
+    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);
+      });
+    });
+
+    watch(
+        () => props.modelValue,
+        (newValue) => {
+          if (quillInstance && quillInstance.root.innerHTML !== newValue) {
+            quillInstance.root.innerHTML = newValue;
+          }
+        }
+    );
+
+    onBeforeUnmount(() => {
+      quillInstance = null;
+    });
+
+    return {
+      editorContainer,
+    };
+  },
+};
+</script>

package/src/components/common/SiteContent.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <label class="text-sm font-medium text-gray-700">Select a page from the site*</label>
+    <select v-model="url" name="url">
+      <option
+          :value="site.href"
+          v-for="(site) in sites">
+        {{ site.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+
+const url = defineModel("url");
+
+defineProps({
+  sites: {type: Object, required: true},
+  errors: {type: Object, required: false, default: () => ({})},
+});
+</script>

package/src/components/common/VModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="{ '-open': isOpen }" class="v-modal">
+    <transition name="fade">
+      <div
+          class="fixed min-w-[400px] left-1/2 top-1/2 z-50 flex max-h-screen -translate-x-1/2 -translate-y-1/2 transform flex-col rounded-xl border-tertiary-500 bg-white"
+          v-if="isOpen"
+      >
+        <slot>
+          <div class="relative min-h-[260px] overflow-y-auto flex" :class="{ 'overflow-y-visible': !scrollable }">
+            <div class="p-6 flex justify-between flex-col">
+              <div>
+                <div class="flex justify-between">
+                <span class="p-2 rounded-full border-8 border-error-50 bg-error-100 text-error-600">
+                  <TrashICon class="w-6 h-6"></TrashICon>
+                </span>
+                  <CloseIcon class="w-6 h-6 text-gray-400 hover:bg-gray-100 rounded-md cursor-pointer" @click="close"></CloseIcon>
+                </div>
+                <h4 class="text-lg font-semibold text-gray-900 pb-2 pt-4">Delete this {{ entity }}?</h4>
+                <p class="text-sm text-gray-600 pb-4">Do you want to delete this {{ entity }}? This action cannot be undone.</p>
+              </div>
+
+              <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4">
+                <a @click="close"
+                   class="w-1/2 py-[9px] rounded-full border border-gray-300 shadow-xs text-md font-semibold hover:bg-gray-100 text-gray-700 text-center cursor-pointer"
+                   v-text="cancelButton"></a>
+                <a @click.prevent="confirm"
+                   class="w-1/2 py-[9px] rounded-full shadow-xs text-md font-semibold text-white bg-error-600 hover:bg-error-700 border border-error-600 text-center cursor-pointer"
+                   v-text="confirmButton"></a>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TrashICon from "@/assets/img/icons/trash-01.svg";
+import CloseIcon from "@/assets/img/icons/x-close.svg";
+import {ref, reactive, computed} from "vue";
+
+const props = defineProps({
+  entity: {
+    type: String,
+    required: true,
+  },
+  callback: {
+    type: Function,
+    required: false,
+    default: () => {}
+  },
+});
+
+const isOpen = ref(false);
+const state = reactive({
+  cancelTitle: null as string | null,
+  confirmTitle: null as string | null,
+  scrollable: true,
+  data: null,
+});
+
+const cancelButton = computed(() =>
+    state.cancelTitle ? state.cancelTitle : "Cancel"
+);
+
+const confirmButton = computed(() =>
+    state.confirmTitle ? state.confirmTitle : "Delete"
+);
+
+const open = (data) => {
+  isOpen.value = true;
+  state.data = data;
+};
+
+const close = () => {
+  isOpen.value = false;
+};
+
+const confirm = async () => {
+  props.callback(state.data);
+  isOpen.value = false;
+};
+
+defineExpose({
+  open,
+  close,
+});
+
+</script>
+
+<style scoped>
+.v-modal {
+  position: fixed;
+  pointer-events: none;
+  z-index: 50;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: transparent;
+  transition: background-color 0.3s linear;
+
+  &.-open {
+    pointer-events: all;
+    background-color: rgba(50, 50, 50, 0.3);
+  }
+}
+</style>

package/src/components/common/VToggle.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex items-center gap-2">
+    <button
+        type="button"
+        class="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-100 transition-colors duration-200 ease-in-out"
+        role="switch"
+        :aria-checked="modelValue"
+        @click="toggle"
+        :class="classes"
+    >
+      <span
+          aria-hidden="true"
+          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+          :class="{
+          'translate-x-5': modelValue,
+          'translate-x-0': !modelValue,
+          '!translate-x-3': small && modelValue,
+          '!h-2 !w-2': small,
+        }"
+      >
+      </span>
+    </button>
+    <span class="text-sm text-gray-700 font-medium" v-if="title">{{ title }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, Boolean]
+  },
+  title: {
+    type: String,
+  },
+  isDisabled: {
+    type: Boolean
+  },
+  small: {
+    type:Boolean
+  },
+  ring: {
+    type:Boolean
+  },
+});
+
+const emit = defineEmits('update:modelValue');
+
+const classes = computed(() => ({
+  '!bg-brand-700 hover:!bg-brand-700': props.modelValue,
+  '!h-3 !w-6': props.small,
+  'focus:outline-none focus:ring-2 focus:ring-brand-700 focus:ring-offset-2': props.ring !== false,
+}));
+
+const toggle = () => {
+  if (props.isDisabled) {
+    return;
+  }
+  emit("update:modelValue", !props.modelValue);
+};
+</script>

package/src/components/common/forms/LogosForm.vue

@@ -0,0 +1,39 @@
+<template>
+  <logo-builder
+    title="Logo items"
+    :description="'Up to ' + props.data.max_items + ' items'"
+    add-button-label="Add"
+    :maximum-items="props.data.max_items"
+    :content="props.data"
+    :sites="sites"
+    :errors="errors"
+    item-classes="!bg-gray-200"
+    error-key="changes.items."
+  />
+  <button-group>
+    <dsg-button label="Cancel" :uri="backUrl" theme="gray-secondary"></dsg-button>
+    <dsg-button @click="save" label="Save changes" type="button" theme="brand" classes="flex-1"></dsg-button>
+  </button-group>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update"]);
+
+const save = () => {
+  emit("update", props.data);
+};
+</script>

package/src/components/common/forms/PageBuilderLinksForm.vue

@@ -0,0 +1,39 @@
+<template>
+  <link-builder
+    title="Link items"
+    description="Up to 7 items"
+    add-button-label="Add"
+    :maximum-items="props.data.max_items"
+    :content="props.data"
+    :sites="sites"
+    :errors="errors"
+    item-classes="!bg-gray-200"
+    error-key="changes.items."
+  />
+  <button-group>
+    <dsg-button label="Cancel" :uri="backUrl" theme="gray-secondary"></dsg-button>
+    <dsg-button @click="save" label="Save changes" type="button" theme="brand" classes="flex-1"></dsg-button>
+  </button-group>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update"]);
+
+const save = () => {
+  emit("update", props.data);
+};
+</script>

package/src/components/common/forms/SectionHeaderForm.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <DsgInput
+      label="Heading"
+      required
+      name="heading"
+      v-model="props.data.heading"
+      maxlength="51"
+      :errors="errors['changes.heading'] ?? []"
+      v-if="props.data.hasHeading"
+    />
+    <DsgInput
+      label="Supporting text"
+      required
+      name="supporting_text"
+      v-model="props.data.supportingText"
+      maxlength="100"
+      :errors="errors['changes.supportingText'] ? errors['changes.supportingText'] : []"
+      v-if="props.data.hasSupportingText"
+    />
+  </div>
+  <button-group>
+    <dsg-button label="Cancel" :uri="backUrl" theme="gray-secondary"></dsg-button>
+    <dsg-button @click="save" label="Save changes" type="button" theme="brand" classes="flex-1"></dsg-button>
+  </button-group>
+</template>
+<script setup>
+import { DsgInput } from "@dcodegroup-au/dsg-vue";
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update"]);
+
+const save = () => {
+  emit("update", props.data);
+};
+</script>

package/src/components/common/forms/TabForm.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="flex items-start gap-4">
+    <div class="flex flex-1 flex-col gap-4">
+      <card title="Description">
+        <div class="flex flex-col gap-3">
+          <DsgInput
+            label="Title *"
+            required
+            name="title"
+            v-model="form.title"
+            maxlength="51"
+            :errors="props.errors ? props.errors['changes.title'] : []"
+          />
+          <DsgEditor v-model="form.description" label="Description *" />
+        </div>
+      </card>
+      <card title="Linked to">
+        <div class="flex flex-col gap-4">
+          <DsgToggle v-model="form.show_button" name="show_button" label="Show Button" />
+          <template v-if="form.show_button">
+            <DsgInput label="Button Label *" required name="label" v-model="form.button_label" maxlength="51" />
+            <linked-to
+              key="primary"
+              v-model:type="form.button_url_type"
+              v-model:url="form.button_url"
+              v-model:openInNewTab="form.button_open_in_new_tab"
+              :sites="sites"
+            />
+          </template>
+        </div>
+      </card>
+    </div>
+    <div class="flex w-full max-w-[356px] flex-col gap-4">
+      <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
+        <DsgToggle v-model="form.public" name="public" label="Public" />
+      </card>
+      <card title="Featured Image" supporting_text="Recommended dimension: 1200*1060px">
+        <file-upload
+          key="image"
+          description=".JPG, .PNG (Max file size: 5 MB)"
+          @upload="(e) => (form.featured_image = e)"
+          :existing-file="form.featured_image"
+          @remove="() => (form.featured_image = null)"
+        />
+      </card>
+    </div>
+  </div>
+  <button-group>
+    <dsg-button label="Cancel" :uri="backUrl" theme="gray-secondary"></dsg-button>
+    <dsg-button label="Save changes" type="button" theme="brand" classes="flex-1" @click="update"></dsg-button>
+  </button-group>
+</template>
+<script setup>
+import { DsgInput, DsgToggle } from "@dcodegroup-au/dsg-vue";
+import DsgEditor from "@/js/vue/components/dsg-vue/DsgEditor.vue";
+import LinkedTo from "@/js/vue/components/admin/LinkedTo.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  errors: {
+    type: Object,
+    required: true,
+  },
+  sites: {
+    type: Object,
+    required: true,
+  },
+});
+
+const form = ref({
+  title: props.data.title,
+  description: props.data.description,
+  show_button: props.data.show_button,
+  button_url: props.data.button_url,
+  button_label: props.data.button_label,
+  button_url_type: props.data.button_url_type,
+  button_open_in_new_tab: props.data.button_open_in_new_tab,
+  public: props.data.public,
+  featured_image: props.data.featured_image,
+});
+
+const update = () => {
+  emit("update", form.value);
+};
+</script>

package/src/components/helpers/clickOutSide.js

@@ -0,0 +1,13 @@
+export const useClickOutside = {
+  beforeMount: (el, binding) => {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value();
+      }
+    };
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unmounted: (el) => {
+    document.removeEventListener("click", el.clickOutsideEvent);
+  },
+};

package/src/components/helpers/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  data: {
+    required: true,
+    type: Object,
+  },
+  sites: {
+    required: true,
+    type: Array,
+  },
+};

package/src/components/helpers/pageBuilderFactory.js

@@ -0,0 +1,56 @@
+export function createSlide(overrides = {}) {
+  return {
+    title: "New slide",
+    public: false,
+    featured_image: "",
+    primary_button: {
+      show: false,
+      label: "",
+      type: "site-content",
+      url: "",
+      open_in_new_tab: false,
+      ...(overrides.primary_button || {}),
+    },
+    secondary_button: {
+      show: false,
+      label: "",
+      type: "site-content",
+      url: "",
+      open_in_new_tab: false,
+      ...(overrides.secondary_button || {}),
+    },
+    ...overrides,
+  };
+}
+
+export function createLink(overrides = {}) {
+  return {
+    label: "New link",
+    url: "",
+    open_in_new_tab: false,
+    type: "site-content",
+    ...(overrides || {}),
+  };
+}
+
+export function createLogo(overrides = {}) {
+  return {
+    image: "",
+    url: "",
+    ...(overrides || {}),
+  };
+}
+
+export function createTab(overrides = {}) {
+  return {
+    title: "New tab",
+    public: false,
+    featured_image: "",
+    show_button: true,
+    button_label: "View all",
+    button_url: "#",
+    button_url_type: "site-content",
+    button_open_in_new_tab: false,
+    ...overrides,
+  };
+}

package/src/components/index.js

@@ -0,0 +1,6 @@
+import '@/assets/css/style.css';
+import PageBuilder from './PageBuilder.vue';
+import PageRender from './PageRender.vue';
+import SlideEdit from './SlideEdit.vue';
+
+export { PageBuilder, PageRender, SlideEdit };

package/src/components/presenters/components/VLinkPresenter.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex justify-center h-[136px] w-full relative rounded-b-[48px] bg-navy-600 -mt-12 gap-[60px]">
+    <a
+        :target="link.open_in_new_tab ? '_blank' : ''"
+        :href="link.link_to"
+        v-for="link in component.data"
+        class="text-white flex gap-1.5 items-center cursor-pointer mt-12 text-sm font-semibold hover:text-gray-300">
+      <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+    </a>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+});
+
+const component = ref(props.component);
+</script>

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

@@ -0,0 +1,63 @@
+<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">
+      <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: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"
+                 v-for="(slide, index) in component.data"
+                 @click="currentSlide = index" class="w-4 h-1 bg-navy-400 rounded-full cursor-pointer" :class="{'!w-12 !bg-white' : currentSlide === index}"
+              ></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>
+            <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"
+                 v-if="slide.secondary_button.show"
+                 :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
+                <span>{{ slide.secondary_button.label }}</span>
+              </a>
+              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
+                 :href="slide.primary_button.link_to"
+                 v-if="slide.primary_button.show"
+                 :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">
+                {{ slide.primary_button.label }}
+                <ArrowUpRight class="w-5 h-5" />
+              </a>
+            </div>
+          </div>
+          <img
+              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"/>
+        </div>
+      </Slide>
+    </Carousel>
+  </div>
+</template>
+
+<script setup>
+import 'vue3-carousel/carousel.css';
+import { ref } from "vue";
+import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
+import {Carousel, Slide} from "vue3-carousel";
+
+const props = defineProps({
+  component: {
+    required: true,
+    type: Object,
+  },
+});
+
+const currentSlide = ref(0);
+const component = ref(props.component);
+</script>
+
+<style scoped>
+.carousel {
+  margin: 1rem 0;
+}
+</style>