@dcodegroup-au/page-builder 0.2.8 → 0.2.9

package/src/components/builders/Header.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="bg-gray-50 px-6 py-5 rounded-xl">
+    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+      {{ dataRef.name }}
+    </p>
+    <div class="flex flex-col gap-4  rounded-xl py-5" :class="{'bg-gray-50 px-0': dataRef?.has_extra, 'bg-gray-200 px-6': !dataRef?.hasOwnProperty('has_extra')}">
+      <input-wrapper
+          v-if="dataRef.hasOwnProperty('title')"
+          is-vertical
+          field="title"
+          label-text="Title *"
+          class="w-full mb-4"
+          :value="dataRef.title"
+          :limit="51"
+      >
+        <input
+            v-model="dataRef.title"
+            name="title"
+            type="text"
+            placeholder="Title"
+            :maxlength="51"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
+      <input-wrapper
+          is-vertical
+          v-if="dataRef.hasOwnProperty('supporting_text')"
+          field="supporting_text"
+          label-text="Supporting Text *"
+          class="w-full mb-4"
+          :value="dataRef.supporting_text"
+          :limit="dataRef.supporting_text_max_length ?? 100"
+      >
+        <input
+            v-model="dataRef.supporting_text"
+            name="supporting_text"
+            type="text"
+            placeholder="Supporting Text"
+            :maxlength="dataRef.supporting_text_max_length ?? 100"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
+    </div>
+    <VButton v-if="dataRef.hasOwnProperty('primary_button')" :button="dataRef.primary_button" :sites="sites" :classes="'bg-gray-200'"/>
+    <VButton v-if="dataRef.hasOwnProperty('secondary_button')" :button="dataRef.secondary_button" :sites="sites" :classes="'bg-gray-200'"/>
+    <div class="flex flex-col gap-4 bg-gray-200 rounded-xl px-6 py-5 mt-4"
+         v-if="dataRef.hasOwnProperty('featured_image')">
+      <card class="!p-0 !bg-gray-200" title="Featured Image"
+            supporting_text="Recommended dimension: 1200*1060px">
+        <VFileUpload
+            name="image"
+            class="!bg-gray-200"
+            height="h-[395px]"
+            v-model="dataRef.featured_image"
+        />
+      </card>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, inject} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import Card from "@/components/common/Card.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+import VButton from "@/components/common/Button.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  ...defaultProps,
+  hasExtra: {
+    type: Boolean,
+    default: true
+  },
+});
+
+const dataRef = ref(props.data.component);
+console.log(dataRef)
+</script>

package/src/components/builders/ImageBlock.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <p class="text-lg font-semibold text-gray-900 pb-4">
+      {{ dataRef.name }}
+    </p>
+    <div class="rounded-xl bg-gray-200" v-if="dataRef.hasOwnProperty('featured_image')">
+      <card :classes="'bg-gray-200'" title="Featured Image"
+            supporting_text="Recommended dimension: 1200*1060px">
+        <VFileUpload
+            name="image"
+            height="h-[395px]"
+            v-model="dataRef.featured_image"
+        />
+      </card>
+    </div>
+    <div class="flex flex-col gap-4 rounded-xl bg-gray-200 px-6 py-5 mt-4" v-if="dataRef.hasOwnProperty('caption')">
+      <p class="text-lg font-semibold text-gray-900 border-b border-gray-200">
+        Caption
+      </p>
+      <input-wrapper
+          is-vertical
+          field="caption"
+          label-text="Caption *"
+          class="w-full mb-4"
+          :value="captionWordCount"
+          :show-count="true"
+      >
+        <QuillEditor v-model="dataRef.caption"/>
+      </input-wrapper>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed, inject} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import QuillEditor from "@/components/common/QuillEditor.vue";
+import Card from "@/components/common/Card.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"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.component);
+
+const captionWordCount = computed(() => {
+  const plainText = dataRef.value.caption?.replace(/<[^>]*>/g, ' ').trim();
+  const words = plainText.split(/\s+/).filter(word => word.length > 0);
+  return words.length;
+});
+</script>

package/src/components/builders/Items.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex justify-between pb-2">
+      <p class="text-lg font-semibold text-gray-900">
+        {{ 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">
+        {{ 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">{{ parseName(type) }}</div>
+            <div class="text-sm text-gray-600">This {{ singularize(type) }} can contain up to {{ dataRef.max_items }} {{ parseName(type, false) }}</div>
+          </div>
+          <div>
+            <button
+                :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 >= dataRef.max_items }"
+            >
+              <PlusIcon class="h-5 w-5"></PlusIcon>
+              <span>Add</span>
+            </button>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <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': openItemStates[index]}">
+            <div class="flex flex-1 items-center justify-between relative" @click="toggleItem(index);">
+              <div class="flex flex-1 flex-col cursor-pointer" @click="edit(item, index)">
+                <div class="text-xs text-gray-600">
+                  {{ singularize(parseName(type))  }} #{{ index + 1 }}
+                </div>
+                <div class="text-sm font-medium text-gray-900">
+                  {{ item.title }}
+                </div>
+              </div>
+              <ActionMenu @removeItem="handleDeleteItem(index)" :enable-edit="true" @editItem="edit(item, index)"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" :entity="singularize(type)" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import { defaultProps } from "@/components/helpers/defaultProps";
+import { singularize, parseName } from "@/components/helpers/common";
+import { createItem } from "@/components/helpers/pageBuilderFactory";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VModal from "@/components/common/Modal.vue";
+
+const emit = defineEmits(["update"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.component);
+const type = dataRef.value.type;
+const modalRef = ref(null);
+
+const key = `${type.value}-openItemStates`;
+const openItemStates = ref(JSON.parse(window.localStorage.getItem(key)));
+if (!openItemStates.value) {
+  openItemStates.value = {};
+
+  dataRef.value.data.forEach((item, index) => {
+    openItemStates.value[index] = false;
+  });
+
+  window.localStorage.setItem(key, JSON.stringify(openItemStates.value));
+}
+
+const toggleItem = (index) => {
+  Object.keys(openItemStates.value).forEach((key) => {
+    openItemStates.value[key] = false;
+  });
+  openItemStates.value[index] = !openItemStates.value[index];
+  window.localStorage.setItem(key, JSON.stringify(openItemStates.value));
+};
+
+const addItem = () => {
+  dataRef.value.data.push(createItem({}, type === 'sliders'));
+  emit("update", false);
+};
+
+const handleDeleteItem = (index) => {
+  modalRef?.value?.open(index);
+};
+
+const deleteCallback = (index) => {
+  dataRef.value.data.splice(index, 1);
+  emit("update", false);
+};
+
+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}/items/${index}`;
+};
+</script>

package/src/components/builders/Links.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex justify-between pb-2">
+      <div class="flex justify-between w-full py-1">
+        <div>
+          <p class="text-lg font-semibold text-gray-900">
+            {{ componentData.name }}
+          </p>
+          <p class="text-sm text-gray-600 mt-1">
+            {{ componentData.supportive_text }}
+          </p>
+        </div>
+        <div>
+          <a
+              @click="addItem"
+              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': componentData.data?.length >= componentData.max_items }"
+          >
+            <PlusIcon class="h-5 w-5"></PlusIcon>
+            <span>Add</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3">
+      <div
+          v-for="(item, index) in componentData.data"
+          class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+          :key="index"
+          :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+      >
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-semibold text-gray-900">
+            Link #{{ index + 1 }}
+          </div>
+          <div class="relative flex items-end">
+            <ActionMenu @removeItem="handleDeleteItem(index)"/>
+          </div>
+        </div>
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-1.5">
+            <input-wrapper
+                is-vertical
+                field="title"
+                label-text="Title *"
+                class="w-full mb-4"
+                :value="item.title"
+                :limit="20"
+            >
+              <input
+                  v-model="item.title"
+                  name="title"
+                  type="text"
+                  placeholder="Title"
+                  :maxlength="20"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+            </input-wrapper>
+            <linked-to
+                label="Linked to"
+                :name="`link_${index + 1}`"
+                v-model:type="item.type"
+                v-model:url="item.url"
+                v-model:openInNewTab="item.open_in_new_tab"
+                :sites="sites"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="link" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, nextTick} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import {createLink} from "@/components/helpers/pageBuilderFactory";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import VModal from "@/components/common/Modal.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push(createLink());
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({behavior: "smooth"});
+    }
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

package/src/components/builders/Logos.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex justify-between pb-2">
+      <div class="flex justify-between w-full py-1">
+        <div>
+          <p class="text-lg font-semibold text-gray-900">
+            {{ componentData.name }}
+          </p>
+          <p class="text-sm text-gray-600 mt-1">
+            This section can contain up to {{ componentData.max_items }} logos
+          </p>
+        </div>
+        <div>
+          <a
+              @click="addItem"
+              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': componentData.data?.length >= componentData.max_items }"
+          >
+            <PlusIcon class="h-5 w-5"></PlusIcon>
+            <span>Add</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3">
+      <div
+          v-for="(item, index) in componentData.data"
+          class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+          :key="index"
+          :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+      >
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-semibold text-gray-900">
+            Logo #{{ index + 1 }}
+          </div>
+          <div class="relative flex items-end">
+            <ActionMenu @removeItem="handleDeleteItem(index)"/>
+          </div>
+        </div>
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-1.5">
+            <VFileUpload
+                name="image"
+                v-model="item.logo"
+            />
+            <input-wrapper
+                is-vertical
+                field="url"
+                label-text="Url *"
+                class="w-full my-4"
+                :value="item.url"
+            >
+              <input
+                  v-model="item.url"
+                  name="url"
+                  type="text"
+                  placeholder="Enter your url"
+                  class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+              />
+            </input-wrapper>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+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/Modal.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"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push({
+    url: null,
+    logo: null,
+  });
+
+  nextTick(() => {
+    if (lastItemRef.value) {
+      lastItemRef.value.scrollIntoView({behavior: "smooth"});
+    }
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

package/src/components/builders/NewsGrid.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex flex-col">
+      <div class="flex flex-col gap-4 mb-4 border-b border-gray-200 pb-4">
+        <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+          Grid
+        </p>
+        <VToggle name="show" v-model="componentData.button.show" title="Show Button"/>
+        <input-wrapper
+            is-vertical
+            field="title"
+            label-text="Title *"
+            class="w-full mb-4"
+            :value="componentData.button.title"
+            :limit="20"
+        >
+          <input
+              v-model="componentData.button.title"
+              name="title"
+              type="text"
+              placeholder="Title"
+              :maxlength="20"
+              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+          />
+        </input-wrapper>
+        <linked-to
+            v-if="componentData?.button"
+            label="Link to"
+            name="button"
+            v-model:type="componentData.button.type"
+            v-model:url="componentData.button.url"
+            v-model:openInNewTab="componentData.button.open_in_new_tab"
+            :sites="sites"
+        />
+      </div>
+      <div>
+        <h3 v-if="componentData.content?.label" class="text-base text-gray-900 font-semibold">
+          {{ componentData.content.label }}</h3>
+        <p v-if="componentData.content?.supportive_text" class="text-gray-600 text-base font-normal mt-2">
+          {{ componentData.content.supportive_text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import VToggle from "@/components/common/Toggle.vue";
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+</script>

package/src/components/builders/Paragraph.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
+      {{ dataRef.name }}
+    </p>
+    <div class="flex flex-col gap-4 rounded-xl bg-gray-200 px-6 py-5">
+      <p class="text-lg font-semibold text-gray-900">
+        Description
+      </p>
+      <input-wrapper
+          v-if="dataRef.hasOwnProperty('eyebrow_heading')"
+          is-vertical
+          field="eyebrow_heading"
+          label-text="Eyebrow heading *"
+          class="w-full mb-4"
+          :value="dataRef.eyebrow_heading"
+          :limit="51"
+      >
+        <input
+            v-model="dataRef.eyebrow_heading"
+            name="eyebrow_heading"
+            type="text"
+            placeholder="Eyebrow heading"
+            :maxlength="51"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
+      <input-wrapper
+          v-if="dataRef.hasOwnProperty('title')"
+          is-vertical
+          field="title"
+          label-text="Title *"
+          class="w-full mb-4"
+          :value="dataRef.title"
+          :limit="51"
+      >
+        <input
+            v-model="dataRef.title"
+            name="title"
+            type="text"
+            placeholder="Title"
+            :maxlength="51"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
+      <input-wrapper
+          is-vertical
+          field="description"
+          label-text="Description *"
+          class="w-full mb-4"
+          :value="paragraphWordCount"
+          :show-count="true"
+      >
+        <QuillEditor v-model="dataRef.paragraph"/>
+      </input-wrapper>
+
+    </div>
+    <div class="rounded-xl bg-gray-200 mt-4" v-if="dataRef.hasOwnProperty('featured_image')">
+      <card :classes="'bg-gray-200'" title="Featured Image"
+            supporting_text="Recommended dimension: 1200*1060px">
+        <VFileUpload
+            name="image"
+            height="h-[395px]"
+            v-model="dataRef.featured_image"
+        />
+      </card>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed, inject} from "vue";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import QuillEditor from "@/components/common/QuillEditor.vue";
+import Card from "@/components/common/Card.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"]);
+const props = defineProps({
+  ...defaultProps,
+});
+
+const dataRef = ref(props.data.component);
+
+const paragraphWordCount = computed(() => {
+  const plainText = dataRef.value.paragraph?.replace(/<[^>]*>/g, ' ').trim();
+  const words = plainText.split(/\s+/).filter(word => word.length > 0);
+  return words.length;
+});
+</script>