@dcodegroup-au/page-builder 0.1.1 → 0.1.4

package/src/components/presenters/components/VVerticalTabPresenter.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6">
+    <!-- Left Column: Links -->
+    <div class="flex-1 w-full md:w-1/2 flex flex-col">
+      <div v-for="item in publicTabs" :key="item.title">
+        <div
+            class="flex-col flex gap-1.5 cursor-pointer hover:bg-navy-50 mb-4 group"
+            :class="{'border-l-4 border-brand-600': selectedItem === item}"
+            @click.prevent="selectItem(item)"
+        >
+          <div class="py-4 pl-4 md:pl-6">
+            <p
+                :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
+                class="text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"
+            >
+              {{ item.title }}
+            </p>
+            <p
+                :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
+                class="text-sm md:text-md font-normal group-hover:text-gray-700"
+            >
+              {{ item.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column: Image and Button -->
+    <div class="flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center">
+      <transition name="fade" mode="out-in">
+        <div class="flex flex-col items-center" :key="selectedItem?.title">
+          <img
+              v-if="selectedItem?.featured_image"
+              :src="selectedItem.featured_image"
+              alt="Selected Item Image"
+              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"/>
+          <img
+              v-else
+              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
+              src="@/assets/img/no_image_available.jpeg"
+              alt="No Image Available">
+          <a
+              v-if="selectedItem?.primary_button?.show"
+              class="text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4"
+              :target="selectedItem?.primary_button?.is_new_tab ? '_blank' : ''"
+              :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
+          >
+            {{ selectedItem?.primary_button?.label ?? 'N/A' }}
+            <ArrowUpRight class="w-4 h-4 md:w-5 md:h-5" />
+          </a>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } 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);
+const selectedItem = ref(null);
+
+// Filter to get only public tabs
+const publicTabs = ref(component.value.data.filter((item) => item.public));
+
+// Method to select an item
+const selectItem = (item) => {
+  selectedItem.value = item;
+};
+
+// Preselect the first public item on component mount
+onMounted(() => {
+  if (publicTabs.value.length > 0) {
+    selectItem(publicTabs.value[0]);
+  }
+});
+</script>

package/src/components/presenters/modules/VTabs.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
+    <div class="md:mx-[90px] bg-navy-25 rounded-[48px] p-16">
+      <div v-for="(component, index) in section.components">
+        <component
+            :is="currentComponent(component)"
+            :key="index"
+            :component="component"
+        ></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, markRaw } from "vue";
+import VHeaderPresenter from "@/components/presenters/components/VHeaderPresenter.vue";
+import VVerticalTabPresenter from "@/components/presenters/components/VVerticalTabPresenter.vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const componentMaps = ref({
+  header: markRaw(VHeaderPresenter),
+  vertical_tabs: markRaw(VVerticalTabPresenter),
+});
+
+const currentComponent = (component) => {
+  if (!component?.type) {
+    return '';
+  }
+
+  return componentMaps.value[component?.type];
+};
+
+</script>

package/tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
       },
       colors: {
         navy: {
+          900: '#182E43',
           800: '#203E5A',
           600: '#3E5F7E',
           400: '#69829B',

package/src/components/builders/PageBuilderVerticalTabs.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="flex justify-between pb-6">
-    <div class="text-lg font-semibold text-gray-900">
-      {{ props.data.item.name }}
-    </div>
-  </div>
-  <div class="flex flex-col gap-4">
-    <div class="text-gray-600">
-      {{ props.data.item.supportive_text }}
-    </div>
-    <hr class="bg-gray-200" />
-    <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">{{ $t("pages.page_builder.vertical_tabs.tabs") }}</div>
-          <div class="text-sm text-gray-600">{{ $t("menu.generic.up_to", { count: props.data.item.max_items }) }}</div>
-        </div>
-        <button
-          :disabled="dataRef.items.length >= props.data.item.max_items"
-          @click="addItem"
-          type="button"
-          class="text-sm flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-600 px-3.5 py-2.5 font-semibold text-white"
-          :class="{ 'border-gray-100 bg-gray-100 !text-gray-400': dataRef.items.length >= props.data.item.max_items }"
-        >
-          <PlusIcon class="h-5 w-5"></PlusIcon>
-          <span>{{ $t("generic.buttons.add") }}</span>
-        </button>
-      </div>
-      <div class="flex flex-col gap-3">
-        <div class="flex items-center gap-4 px-2 py-1 hover:bg-gray-200" v-for="(item, index) in dataRef.items">
-          <div class="flex flex-1 cursor-pointer items-center justify-between">
-            <div class="flex flex-1 flex-col" @click="edit(index)">
-              <div class="text-xs text-gray-600">
-                {{ $t("pages.page_builder.vertical_tabs.item_title", { index: index + 1 }) }}
-              </div>
-              <div class="text-sm font-medium text-gray-900">
-                {{ item.title }}
-              </div>
-            </div>
-            <action-menu>
-              <button class="flex items-center gap-2 p-2.5" type="button" @click="handleDeleteItem(index)">
-                <TrashIcon class="h-5 w-5 cursor-pointer" />
-                <span class="text-sm font-medium text-gray-700">
-                  {{ $t("pages.page_builder.vertical_tabs.delete_item") }}
-                </span>
-              </button>
-            </action-menu>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import PlusIcon from "@/assets/img/icons/plus.svg";
-import TrashIcon from "@/assets/img/icons/trash-01.svg";
-import { defaultProps } from "@/js/vue/components/admin/pages/common/defaultProps.js";
-import { createTab } from "@/js/vue/components/admin/pages/common/pageBuilderFactory.js";
-
-const emit = defineEmits(["update"]);
-const route = inject("route");
-
-const props = defineProps({
-  ...defaultProps,
-});
-
-const dataRef = ref(props.data.item);
-
-const addItem = () => {
-  dataRef.value.items.push(createTab());
-  emit("update", dataRef.value);
-};
-
-const handleDeleteItem = (index) => {
-  dataRef.value.items.splice(index, 1);
-  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,
-  });
-};
-</script>