@dcodegroup-au/page-builder 0.2.8 → 0.3.0

package/src/components/builders/LogoBuilder.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <input type="hidden" name="content" :value="JSON.stringify(content)" v-if="props.withInput" />
-    <div class="flex justify-between">
-      <div class="flex flex-col gap-1">
-        <div class="font-semibold text-gray-900">
-          {{ props.title }}
-        </div>
-        <div class="text-sm text-gray-600">
-          {{ props.description }}
-        </div>
-      </div>
-      <dsg-button
-        @click="addLink"
-        :disabled="content.items.length >= props.maximumItems"
-        :label="props.addButtonLabel"
-        type="button"
-        icon-before="plus"
-        v-tooltip="{
-          content: $t('menu.tooltips.link_builder.navbar_top_limit'),
-          disabled: content.items.length < props.maximumItems,
-          theme: 'elaa-tooltip',
-        }"
-      ></dsg-button>
-    </div>
-    <div
-      v-for="(item, index) in content.items"
-      :class="itemClasses"
-      class="flex flex-col gap-4 rounded-xl bg-gray-50 px-6 py-4"
-      :key="index"
-      :ref="index === content.items.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">
-          <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">
-                {{ $t("menu.generic.delete_link") }}
-              </span>
-            </button>
-          </action-menu>
-        </div>
-      </div>
-      <hr class="bg-gray-200" />
-      <div class="flex flex-col gap-6">
-        <div class="flex flex-col gap-1.5">
-          <file-upload
-            :key="index"
-            description=".JPG, .PNG (Max file size: 2 MB)"
-            @upload="(e) => (item.image = e)"
-            :existing-file="item.image"
-            @remove="() => (item.image = null)"
-          />
-          <p class="text-red-400" v-if="errors[props.errorKey + index + '.image']">
-            {{ errors[props.errorKey + index + ".image"][0] }}
-          </p>
-        </div>
-        <DsgInput label="URL" :required="true" v-model="item.url"></DsgInput>
-      </div>
-    </div>
-  </div>
-  <DeleteModal
-    ref="deleteModal"
-    :title="t('admin.modals.delete.title', { item: t('admin.labels.link') })"
-    :description="t('admin.modals.delete.description', { item: t('admin.labels.link') })"
-    :confirm-callback="removeItem"
-  ></DeleteModal>
-</template>
-<script setup>
-import { nextTick, ref, useTemplateRef } from "vue";
-import TrashIcon from "@/assets/img/icons/trash-01.svg";
-import { DsgInput } from "@dcodegroup-au/dsg-vue";
-import { useI18n } from "vue-i18n";
-import DeleteModal from "../../DeleteModal.vue";
-import { createLogo } from "@/js/vue/components/admin/pages/common/pageBuilderFactory.js";
-
-const { t } = useI18n();
-
-const deleteModalRef = useTemplateRef(`deleteModal`);
-const deleteItemIndex = ref(null);
-const lastItemRef = ref(null);
-
-const emit = defineEmits(["update"]);
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  addButtonLabel: {
-    type: String,
-    required: true,
-  },
-  content: {
-    type: Object,
-    required: true,
-  },
-  errors: {
-    required: false,
-  },
-  maximumItems: {
-    type: Number,
-    default: 5,
-  },
-  sites: {
-    type: Object,
-    required: true,
-  },
-  itemClasses: {
-    type: String,
-    required: false,
-  },
-  withInput: {
-    type: Boolean,
-    default: false,
-  },
-  errorKey: {
-    type: String,
-    default: "content.items.",
-  },
-});
-
-const content = ref(props.content);
-if (!content.value.items) {
-  content.value.items = [];
-}
-
-function addLink() {
-  if (content.value.items.length >= props.maximumItems) {
-    return;
-  }
-  content.value.items.push(createLogo());
-
-  nextTick(() => {
-    if (lastItemRef.value) {
-      lastItemRef.value.scrollIntoView({ behavior: "smooth" });
-    }
-  });
-
-  emit("update", content.value);
-}
-
-function removeItem() {
-  content.value.items.splice(deleteItemIndex.value, 1);
-  deleteItemIndex.value = null;
-  emit("update", content.value);
-}
-
-const openDeleteModal = () => {
-  deleteModalRef.value?.openModal();
-};
-
-function handleDeleteItem(index) {
-  deleteItemIndex.value = index;
-  openDeleteModal();
-}
-</script>

package/src/components/builders/PageBuilderCarousel.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-    <hr class="bg-gray-200" />
-    <div class="text-gray-600">
-      {{ props.data.item.description }}
-    </div>
-  </div>
-</template>
-<script setup>
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps";
-
-const props = defineProps({
-  ...defaultProps,
-});
-</script>

package/src/components/builders/PageBuilderGrid.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-    <hr class="bg-gray-200" />
-    <div class="text-gray-600">
-      {{ props.data.item.description }}
-    </div>
-  </div>
-</template>
-<script setup>
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps";
-
-const props = defineProps({
-  ...defaultProps,
-});
-</script>

package/src/components/builders/PageBuilderSectionHeader.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-    <hr class="bg-gray-200" />
-    <page-builder-base-module-form
-      :form="props.data.item.form_component"
-      :sub-type="props.data.item.sub_type"
-      :page="props.data.page"
-      :data="dataRef"
-      :attribute="props.data.pageAttribute"
-      :module-index="props.data.subModuleIndex"
-      :back-url="route('admin.pages.edit', { page: props.data.page.id })"
-      :sites="sites"
-    ></page-builder-base-module-form>
-  </div>
-</template>
-<script setup>
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps";
-
-const emit = defineEmits(["update"]);
-const route = inject("route");
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const dataRef = ref(props.data.item);
-</script>

package/src/components/builders/PageModal.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { inject, reactive, useTemplateRef, onMounted, onBeforeUnmount, ref } from "vue";
-import DsgModal from "../../dsg-vue/DsgModal.vue";
-import { DsgButton, DsgInput, DsgToggle } from "@dcodegroup-au/dsg-vue";
-import { DsgButtonProps } from "@dcodegroup-au/dsg-vue";
-import Form from "form-backend-validation";
-import route from "@/js/routes/routes";
-import { useI18n } from 'vue-i18n';
-import axios from "axios";
-export interface FormFields {
-  title: string,
-  id?: number,
-}
-
-export interface PageProps {
-  button?: DsgButtonProps | false;
-  initForm?: FormFields,
-  primaryButtonLabel?: string,
-  secondaryButtonLabel?: string,
-}
-
-const {
-  button = false,
-  initForm = {
-    title: '',
-  },
-  primaryButtonLabel = 'Confirm',
-  secondaryButtonLabel = 'Cancel',
-}: PageProps = defineProps<PageProps>();
-
-const modalRef = useTemplateRef<typeof DsgModal | null>('modal');
-
-const form = reactive(initForm);
-const editMode =  ref(true);
-const { t } = useI18n();
-const primaryButton = ref(primaryButtonLabel)
-const openModal = (): void => {
-  editMode.value = true;
-  primaryButton.value = t('admin.buttons.create_category')
-  modalRef.value?.open();
-}
-const closeModal = (): void => {
-  modalRef.value?.close();
-}
-const save = async (): Promise<void> => {
-  try {
-    const response = await axios.put(route('api.admin.pages.update', {page: form.id}), form)
-    console.log(response);
-    bus?.$emit("reloadTable");
-    modalRef.value?.close();
-  } catch (e) {
-    console.log(e);
-  }
-}
-const bus = inject('bus');
-onMounted(() => {
-  bus?.$on('openPageModal', openPageModal)
-  bus?.$on('closePageModal', closePageModal)
-})
-
-onBeforeUnmount(()=>{
-  bus?.$off('openPageModal', openPageModal)
-  bus?.$off('closePageModal', closePageModal)
-})
-
-const openPageModal = ((data: Object): void=>{
-  editMode.value = true;
-  form.title = data.data.title;
-  form.id = Number(data.data.id)
-  primaryButton.value = t('admin.buttons.confirm')
-  modalRef.value?.open();
-})
-
-const closePageModal = ((data: Object): void =>{
-  modalRef.value?.close();
-})
-
-defineExpose({openModal});
-</script>
-
-<template>
-  <DsgModal :title="$t('pages.edit_modal.title')"
-            ref="modal"
-            :width="400"
-            :secondary-button="{label: secondaryButtonLabel, size: 'lg', theme: 'gray-secondary', classes: 'max-w-[90px]'}"
-            @secondary-button-clicked="closeModal"
-            :primary-button="{label: primaryButton, disabled: form.title === ''}"
-            @primary-button-clicked="save"
-  >
-    <DsgInput :label="$t('pages.edit_modal.fields.title')" :required="true" v-model="form.title"></DsgInput>
-  </DsgModal>
-</template>

package/src/components/builders/VCollectionCarousel.vue

@@ -1,58 +0,0 @@
-<template>
-  <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">
-        Carousel
-      </p>
-      <div class="flex flex-col gap-6">
-        <div class="flex flex-col gap-1.5">
-          <input-wrapper
-              v-if="componentData.button"
-              is-vertical
-              field="title"
-              label-text="Button label *"
-              class="w-full mb-4"
-              :value="componentData.button.title"
-              :limit="51"
-          >
-            <input
-                v-model="componentData.button.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>
-          <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>
-    </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>
-</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";
-
-const emit = defineEmits(["update"]);
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const componentData = ref(props.data.component);
-</script>

package/src/components/builders/VHeader.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
-      {{ dataRef.name }}
-    </p>
-    <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>
-</template>
-<script setup>
-import { ref } from "vue";
-import { defaultProps } from "@/components/helpers/defaultProps";
-import InputWrapper from "@/components/common/InputWrapper.vue";
-
-const emit = defineEmits(["update"]);
-const props = defineProps({
-  ...defaultProps,
-});
-
-const dataRef = ref(props.data.component);
-</script>

package/src/components/builders/VItems.vue

@@ -1,110 +0,0 @@
-<template>
-  <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>
-  <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/VModal.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/VLinks.vue

@@ -1,121 +0,0 @@
-<template>
-  <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>
-  <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/VModal.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>