init

2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import RecusiveSection from "~/components/dynamic-page/page-section/RecusiveSection.vue";
+import { enumPageSectionLayouts } from "~/definitions/enum";
+
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  section: any;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts.VERTICAL_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_RIGHT_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_THREE:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_FOUR:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_ONE:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_THREE:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_FOUR:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_FIVE:
+      _setting_options = {
+        MAX_ELEMENT: 5,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_SIX:
+      _setting_options = {
+        MAX_ELEMENT: 6,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_SEVEN:
+      _setting_options = {
+        MAX_ELEMENT: 7,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_EIGHT:
+      _setting_options = {
+        MAX_ELEMENT: 8,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_NINE:
+      _setting_options = {
+        MAX_ELEMENT: 9,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_TEN:
+      _setting_options = {
+        MAX_ELEMENT: 10,
+      };
+      break;
+    default:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+  }
+  return _setting_options;
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts.VERTICAL_TWO:
+      _classForSection = {
+        section_layout: "section_layout two_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        0: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_RIGHT_TWO:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        1: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_THREE:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_FOUR:
+      _classForSection = {
+        section_layout: "section_layout four_col_layout",
+      };
+      break;
+    default:
+      _classForSection = {
+        section_layout: "section_layout basic_column",
+      };
+      break;
+  }
+  return _classForSection;
+});
+</script>
+
+<template>
+    <div class="section_layout" :class="[CLASS_FOR_SECTION.section_layout]">
+      <div
+        v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+        :key="index"
+        :class="[CLASS_FOR_SECTION[index]]"
+      >
+        <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
+      </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.section_layout {
+  display: grid;
+  gap: 10px;
+
+  &.basic_column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  &.two_col_layout {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &.three_col_layout {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &.four_col_layout {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+}
+</style>