@dcodegroup-au/page-builder 0.1.1 → 0.1.2

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>