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>

components/dynamic-page/page-section/templates/articles/Default.vue

@@ -1,29 +1,59 @@
 <script setup lang="ts">
-import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
+import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "@/models/cms";
 
 const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+
 const props = defineProps<{
     label?: any
     layout?: string
     settings?: any
     content?: any
 
-    section: any
+    section: PageSection
 }>()
+
+const store = reactive({
+    section: usePageSectionStore(),
+});
 </script>
 
 <template>
     <section class="section-container">
-        <h2 class="text-4xl mb-3 font-600" v-if="props.label">{{ props.label || '' }}</h2>
-        <div class="layout_define grid grid-cols-1 gap-x-10 gap-y-2.5">
+        <!-- tạm thời đóng vì đang đẩy vào label -->
+        <!-- <h2 class="section__title mb-3" v-if="props.label">{{ props.label || '' }}</h2> -->
+        <div class="section_layout">
             <template v-if="props.layout">
                 <DynamicLayout
                     :layout="props.layout"
                     :content="props.content"
                     :settings="props.settings"
-                    :section= "props.section"
+                    :section="props.section"
                 />
             </template>
+            <template v-else>
+                <div>
+                    Bấm để chọn layout
+                </div>
+            </template>
         </div>
     </section>
 </template>
+
+<style lang="scss" scoped>
+.border-pri {
+    .section_layout{
+        gap: 5px;
+    }
+}
+.section_layout {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr)); 
+
+    .empty {
+        min-height: 100px;
+        border-radius: 6px;
+        background: #409eff;
+    }
+}
+</style>

components/dynamic-page/page-section/templates/articles/index.ts

@@ -0,0 +1 @@
+export { default as Article_Section_Default } from './Default.vue'

components/dynamic-page/page-section/templates/articles/index.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { Article_Section_Default } from "./index";
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT']]: Article_Section_Default,
+};
+
+const getCurrentSection = computed(() => _props.settings.template);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
+</script>
+
+<template>
+  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
+</template>

components/dynamic-page/page-section/templates/homes/Basic.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
-import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
-
-const props = defineProps<{
-    layout?: any
-}>()
-
-const classForLayout = computed(() => {
-    let _empty = {
-        page_container: 'page_container',
-        layout_container: 'layout_container',
-    };
-    switch (props.layout) {
-        case 'Full_Page':
-            _empty = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container full-size-layout',
-            };
-            break;
-        case 'Center_Page':
-            _empty = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        case 'Background_Page':
-            _empty = {
-                page_container: 'page_container full-size-page background-container',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        default: 
-            break;
-    }
-    return _empty;
-})
-</script>
-
-<template>
-    <div class="h-100 overflow-y-auto">
-        <HeaderHomeTemplate /> 
-
-        <div :class="[classForLayout.page_container]">
-            <div :class="[classForLayout.layout_container]">
-                <slot />
-            </div>
-        </div>
-
-        <FooterHomeTemplate />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-    .body-center {
-        padding: 40px 0px;
-    }
-
-    .page_container {
-        &.full-size-page {
-            width: 100%;
-        }
-        .full-size-layout {
-            padding: 0 20px;
-        }
-    }
-
-    .layout_container {
-        padding-top: 40px;
-        padding-bottom: 40px;
-
-        &.center-layout {
-            max-width: 1300px;
-            margin: auto;
-        }
-    }
-</style>

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

@@ -1,2 +1 @@
-export { default as Article_Section_Default } from './articles/Default.vue'
-export { default as None_Section_Default } from './none/Default.vue'
+export { default as None_Section } from './none/index.vue'

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

@@ -1,69 +1,40 @@
 <script lang="ts" setup>
-import { Article_Section_Default, None_Section_Default } from './index';
-import { enumPageSectionLayouts } from "@/definitions/enum";
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey } from "@/definitions/enum";
+import { None_Section } from "./index";
 
 const _props = defineProps<{
-    settings?: any,
-    content?: any
-    section: any
-}>()
+  settings?: any;
+  content?: any;
+  section?: any;
+}>();
 
 const definedDynamicSection: Record<string, any> = {
-    'Article_Default': Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_THREE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.VERTICAL_FOUR}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: Article_Section_Default,
-    [`Article_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: Article_Section_Default,
-    
-    'None_Default': None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_THREE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.VERTICAL_FOUR}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: None_Section_Default,
-    [`None_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: None_Section_Default,
+  [enumPageSectionKey.NONE]: None_Section,
+};
 
-}
+const getCurrentSection = computed(() => {
+  return _props.section?.taxonomy;
+});
 
-const getCurrentSection = computed(() => `${_props.settings.template}_${_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) : []) {
-                props = {
-                    ...props,
-                    [key]: value
-                }
-            }
-        }
-        return props;
-    };
-})
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
 </script>
 
 <template>
-    <component :is="definedDynamicSection[getCurrentSection] || null" v-bind="{ ...(GET_PROPS()), section: _props.section, content: _props.content, settings: _props.settings }">
-        <slot />
-    </component>
+  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
 </template>

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

@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
-import type { PageSection } from "~/server/models/dynamic-page/index";
+import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
+import type { PageSection } from "@/models/cms";
 
-const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
 
 const props = defineProps<{
-    label?: any
-    layout?: string
-    settings?: any
-    content?: any
-    section: PageSection
-}>()
-
+  label?: any;
+  layout?: string;
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
 </script>
 
 <template>
-    <DynamicLayout
-        :layout="props.layout"
-        :content="props.content"
-        :settings="props.settings"
-        :section= "props.section"
-    />
+  <DynamicLayout :layout="props.layout" :content="props.content" :settings="props.settings" :section="props.section" />
 </template>
 
 <style lang="scss" scoped>
-
-</style>
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+</style>

components/dynamic-page/page-section/templates/none/index.ts

@@ -0,0 +1 @@
+export { default as None_Section_Default } from './Default.vue'

components/dynamic-page/page-section/templates/none/index.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/models/cms";
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { None_Section_Default } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: None_Section_Default,
+};
+
+const getCurrentSection = computed(() => _props.settings.template);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
+</script>
+
+<template>
+  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+    <slot />
+  </component>
+</template>