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