NSG_PORTAL_V2/components/dynamic-page/page-section/layouts/Default.vue

<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 grid  gap-x-5 gap-y-2.5" :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 {
  &.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>