feat: new layout

This commit is contained in:
MoreStrive
2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
@@ -1,69 +1,40 @@
<script lang="ts" setup>
import { Article_Section_Default, None_Section_Default } from './index';
import { enumPageSectionLayouts } from "@/definitions/enum";
import type { PageSection } from "@/models/cms";
import { enumPageSectionKey } from "@/definitions/enum";
import { None_Section } from "./index";
const _props = defineProps<{
settings?: any,
content?: any
section: any
}>()
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,
'None_Default': None_Section_Default,
[`None_${enumPageSectionLayouts.VERTICAL_TWO}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.VERTICAL_THREE}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.VERTICAL_FOUR}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: None_Section_Default,
[`None_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: None_Section_Default,
[enumPageSectionKey.NONE]: None_Section,
};
}
const getCurrentSection = computed(() => {
return _props.section?.taxonomy;
});
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;
};
})
return () => {
let props: any = {};
if (_props.settings) {
for (const [key, value] of 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>
<component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
<slot />
</component>
</template>