init

2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
+
+const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+const props = defineProps<{
+    label?: any
+    layout?: string
+    settings?: any
+    content?: any
+
+    section: any
+}>()
+</script>
+
+<template>
+    <section class="section-container">
+        <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"
+                />
+            </template>
+            <template v-else>
+                <div>
+                    Bấm để chọn layout
+                </div>
+            </template>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+.section_layout {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr)); 
+    gap: 10px;     
+
+    .empty {
+        min-height: 100px;
+        border-radius: 6px;
+        background: #409eff;
+    }
+}
+</style>
@@ -0,0 +1,77 @@
+<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>
@@ -0,0 +1 @@
+export { default as Article_Section_Default } from './articles/Default.vue'
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { Article_Section_Default } from './index';
+import { enumPageSectionLayouts } from "@/definitions/enum";
+
+const _props = defineProps<{
+    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,
+}
+
+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;
+    };
+})
+</script>
+
+<template>
+    <component :is="definedDynamicSection[getCurrentSection] || null" v-bind="{ ...(GET_PROPS()), section: _props.section, content: _props.content, settings: _props.settings }">
+        <slot />
+    </component>
+</template>
				`@@ -0,0 +1 @@`
				`export { default as Article_Section_Default } from './articles/Default.vue'`