feat: new layout

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

@@ -1,177 +0,0 @@
-<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 mb-5 mt-2",
-      };
-      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 mt-4",
-      };
-      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 lg:grid-cols-2" :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" class="h-full"/>
-      </div>
-    </div>
-</template>
-
-<style lang="scss">
-.section_layout {
-  &.basic_column {
-    @apply grid-cols-1;
-  }
-
-  &.two_col_layout {
-    @apply md:grid-cols-2 grid-cols-1;
-  }
-
-  &.three_col_layout {
-    @apply md:grid-cols-3 grid-cols-1;
-    // 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>

components/dynamic-page/page-section/layouts/index.ts

@@ -1 +1 @@
-export { default as BASE_LAYOUT } from './Default.vue'
+export { default as NONE_DEFAULT_LAYOUT } from './none/Default.vue'

components/dynamic-page/page-section/layouts/index.vue

@@ -1,41 +1,45 @@
 <script lang="ts" setup>
-import { BASE_LAYOUT } from "./index";
-import { enumPageSectionLayouts } from "@/definitions/enum";
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "@/definitions/enum";
+import { NONE_DEFAULT_LAYOUT } from "./index";
 
 const _props = defineProps<{
   settings?: any;
   layout?: string;
   content?: any;
-
   section: any;
 }>();
 
 const definedDynamicSection: Record<string, any> = {
-  'Default': BASE_LAYOUT,
-  [enumPageSectionLayouts.VERTICAL_TWO]: BASE_LAYOUT,
-  [enumPageSectionLayouts.VERTICAL_LEFT_TWO]: BASE_LAYOUT,
-  [enumPageSectionLayouts.VERTICAL_RIGHT_TWO]: BASE_LAYOUT,
-  [enumPageSectionLayouts.VERTICAL_THREE]: BASE_LAYOUT,
-  [enumPageSectionLayouts.VERTICAL_FOUR]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_ONE]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_TWO]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_THREE]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_FOUR]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_FIVE]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_SIX]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_SEVEN]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_EIGHT]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_NINE]: BASE_LAYOUT,
-  [enumPageSectionLayouts.HORIZONTAL_TEN]: BASE_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']]: NONE_DEFAULT_LAYOUT,
 };
 
-const getCurrentSection = computed(() => _props?.layout || "");
+const getCurrentSection = computed(() => {
+  return _props.settings.layout
+});
 
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
     if (_props.settings) {
-      for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+      for (const [key, value] of Object.entries(_props.settings)) {
         props = {
           ...props,
           [key]: value,
@@ -49,11 +53,12 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component
-    :is="definedDynamicSection[getCurrentSection] || null"
+    :is="definedDynamicSection[getCurrentSection]"
     v-bind="{
       ...GET_PROPS(),
       section: _props.section,
       content: _props.content,
+      settings: _props.settings,
     }"
   >
     <slot />

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

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
+import type { PageSection } from "@/models/cms";
+
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  settings: any;
+  section: PageSection;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']:
+      _setting_options = {
+        MAX_ELEMENT: 5,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']:
+      _setting_options = {
+        MAX_ELEMENT: 6,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']:
+      _setting_options = {
+        MAX_ELEMENT: 7,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']:
+      _setting_options = {
+        MAX_ELEMENT: 8,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']:
+      _setting_options = {
+        MAX_ELEMENT: 9,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']:
+      _setting_options = {
+        MAX_ELEMENT: 10,
+      };
+      break;
+    default:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+  }
+  return _setting_options;
+});
+
+const designObject = computed(() => {
+  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
+      _classForSection = {
+        section_layout: "section_layout two_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        0: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        1: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
+      _classForSection = {
+        section_layout: "section_layout four_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
+      _classForSection = {
+        section_layout: "section_layout four_col_layout",
+        1: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
+      _classForSection = {
+        section_layout: "section_layout five_col_layout",
+        1: "col-span-3",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
+      _classForSection = {
+        section_layout: "section_layout six_col_layout",
+        1: "col-span-4",
+      };
+      break;
+    default:
+      _classForSection = {
+        section_layout: "section_layout basic_column",
+      };
+      break;
+  }
+  return _classForSection;
+});
+
+const LAYOUT_PARSE = computed(() => {
+  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  } 
+  return {};
+};
+</script>
+
+<template>
+  <div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
+    <div
+      class="section_child"
+      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+      :key="index"
+      :class="['border-custom', CLASS_FOR_SECTION[index]]"
+      :style="mapActivesToItems(index)['div.section_child']"
+      @dragover.prevent
+      @drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
+    >
+      <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.section_layout {
+  display: grid;
+  gap: 5px; 
+  &.smartphone_layout {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
+  &.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));
+  }
+  &.five_col_layout {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  &.six_col_layout {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .border-custom {
+    border-color: #e5e5e5 !important;
+  }
+}
+</style>