init
This commit is contained in:
MoreStrive
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
||||
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
type: string;
|
||||
id: any;
|
||||
}>();
|
||||
|
||||
import { useDynamicPageStore } from '~/stores/dynamic-page';
|
||||
const store = reactive({
|
||||
dynamicPage: useDynamicPageStore(),
|
||||
});
|
||||
|
||||
const { currentPage } = storeToRefs(useDynamicPageStore());
|
||||
|
||||
const defineTypeRecusive = {
|
||||
COMPONENT: "component",
|
||||
SECTION: "section",
|
||||
};
|
||||
|
||||
const findDataPosition = computed(() => {
|
||||
let result = {};
|
||||
switch (props.type) {
|
||||
case defineTypeRecusive.COMPONENT:
|
||||
result = currentPage.value.components && currentPage.value.components.find((component: any) => component.id === props.id);
|
||||
break;
|
||||
case defineTypeRecusive.SECTION:
|
||||
result = currentPage.value.sections && currentPage.value.sections.find((section: any) => section.id === props.id);
|
||||
break;
|
||||
default:
|
||||
result = {};
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="props.type === defineTypeRecusive.COMPONENT">
|
||||
<DynamicComponent
|
||||
v-if="findDataPosition && findDataPosition?.id"
|
||||
:settings="findDataPosition.settings"
|
||||
:component="findDataPosition"
|
||||
/>
|
||||
<div v-else class="empty"></div>
|
||||
</template>
|
||||
<template v-else-if="props.type === defineTypeRecusive.SECTION">
|
||||
<DynamicSection
|
||||
v-if="findDataPosition && findDataPosition?.id"
|
||||
:settings="findDataPosition.settings"
|
||||
:content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null"
|
||||
:section="findDataPosition"
|
||||
/>
|
||||
<div v-else class="empty"></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="empty"></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty {
|
||||
min-height: 100px;
|
||||
border-radius: 6px;
|
||||
background: #409eff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<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",
|
||||
};
|
||||
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",
|
||||
};
|
||||
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" :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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section_layout {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
||||
&.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));
|
||||
}
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as BASE_LAYOUT } from './Default.vue'
|
||||
@@ -0,0 +1,61 @@
|
||||
<script lang="ts" setup>
|
||||
import { BASE_LAYOUT } from "./index";
|
||||
import { enumPageSectionLayouts } from "@/definitions/enum";
|
||||
|
||||
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,
|
||||
};
|
||||
|
||||
const getCurrentSection = computed(() => _props?.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,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user