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>