feat: new layout

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { getInputValue } from "@/utils/parseSQL";
 const props = defineProps<{
-    layout?: any
+    layout?: any,
+    label?:any
 }>()
 
 const CLASS_FOR_LAYOUT = computed(() => {
@@ -8,41 +10,69 @@ const CLASS_FOR_LAYOUT = computed(() => {
     switch (props.layout) {
         case 'Full_Page':
             _classForLayout = {
-                page_container: 'page_container mx-auto w-full px-2',
-                layout_container: 'layout_container px-5',
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container full-size-layout',
             };
             break;
         case 'Center_Page':
             _classForLayout = {
-                page_container: 'page_container mx-auto w-full px-2 container ',
-                layout_container: 'layout_container container-xxl mx-auto',
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container center-layout',
             };
             break;
         case 'Background_Page':
             _classForLayout = {
-                page_container: 'page_container mx-auto w-full background-container px-2',
-                layout_container: 'layout_container mx-auto',
+                page_container: 'page_container full-size-page background-container',
+                layout_container: 'layout_container center-layout',
             };
             break;
         default: 
             _classForLayout = {
-                page_container: 'page_container mx-auto px-2',
+                page_container: 'page_container',
                 layout_container: 'layout_container',
             };
             break;
     }
     return _classForLayout;
 })
+
+const LAYOUT_PARSE = computed(() => {
+  return props?.label ? getInputValue(props.label, "OBJECT") : {};
+});
 </script>
 
 <template>
-    <div :class="[CLASS_FOR_LAYOUT.page_container]">
-        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container grid grid-cols-1 gap-20 py-10 style_layout">
+    <div :class="[CLASS_FOR_LAYOUT.page_container]" :style="LAYOUT_PARSE['div.page_container']">
+        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
             <slot />
         </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
 
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr)); 
+        /* gap: 40px; */
+    }
 </style>

components/dynamic-page/page/layouts/articles/Long.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div class="page_container full-size-page">
-        <div class="container-long my-5">
+        <div class="layout_container center-layout grid-container">
             <slot />
         </div>
     </div>

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

@@ -5,4 +5,4 @@ export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
 export { default as ARTICLE_NONE_LAYOUT } from './articles/None.vue'
 export { default as ARTICLE_NORMAL_LAYOUT } from './articles/Normal.vue'
 export { default as ARTICLE_PAGE_LAYOUT } from './articles/Page.vue'
-export { default as ARTICLE_SHORT_LAYOUT } from './articles/Short.vue'
+export { default as ARTICLE_SHORT_LAYOUT } from './articles/Short.vue'

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

@@ -27,12 +27,12 @@ const definedDynamicPageLayout: Record<string, any> = {
     'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
 }
 
-const getCurrentLayout = computed(() => _props.settings && _props.settings.layout);
+const getCurrentLayout = computed(() => _props.settings.layout);
 
 const GET_PROPS = computed(() => {
     return () => {
         let props: any = {};
-        for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+        for (const [key, value] of Object.entries(_props.settings)) {
             props = {
                 ...props,
                 [key]: value
@@ -44,7 +44,7 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-    <component :is="definedDynamicPageLayout[getCurrentLayout] || null" v-bind="GET_PROPS()">
+    <component :is="definedDynamicPageLayout[getCurrentLayout]" v-bind="GET_PROPS()">
         <slot />
     </component>
 </template>