init
This commit is contained in:
MoreStrive
@@ -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>
|
||||
Reference in New Issue
Block a user