feat: new layout

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>