@dcodegroup-au/page-builder 0.2.7 → 0.2.9

package/src/components/builders/VLogos.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">
-          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"
-              background="bg-white"
-              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>
-  <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/VModal.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/VNewsGrid.vue

@@ -1,55 +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">
-        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>
-</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/VToggle.vue";
-
-const emit = defineEmits(["update"]);
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const componentData = ref(props.data.component);
-</script>

package/src/components/builders/VVideoGrid.vue

@@ -1,99 +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">
-          This section can contain up to {{ componentData.max_items }} videos
-        </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">
-          Video #{{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"
-              type="video"
-              height="h-[250px]"
-              v-model="item.video"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
-</template>
-<script setup>
-import {ref, 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 VModal from "@/components/common/VModal.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({
-    video: null,
-  });
-
-  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/common/forms/LogosForm.vue

@@ -1,39 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-<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>