feat: new layout
This commit is contained in:
MoreStrive
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
|
||||
import type { PageSection } from "@/models/cms";
|
||||
|
||||
const props = defineProps<{
|
||||
layout?: string;
|
||||
content?: any;
|
||||
settings: any;
|
||||
section: PageSection;
|
||||
}>();
|
||||
|
||||
const defineTypeRecusive = {
|
||||
COMPONENT: "component",
|
||||
SECTION: "section",
|
||||
};
|
||||
|
||||
const SETTING_OPTIONS = computed(() => {
|
||||
let _setting_options = {};
|
||||
switch (props.layout) {
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 4,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 1,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 2,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 3,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 4,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 5,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 6,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 7,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 8,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 9,
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 10,
|
||||
};
|
||||
break;
|
||||
default:
|
||||
_setting_options = {
|
||||
MAX_ELEMENT: 1,
|
||||
};
|
||||
break;
|
||||
}
|
||||
return _setting_options;
|
||||
});
|
||||
|
||||
const designObject = computed(() => {
|
||||
return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
|
||||
});
|
||||
|
||||
const CLASS_FOR_SECTION = computed(() => {
|
||||
let _classForSection = {};
|
||||
switch (props.layout) {
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout two_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
0: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
1: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout three_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout four_col_layout",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout four_col_layout",
|
||||
1: "col-span-2",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout five_col_layout",
|
||||
1: "col-span-3",
|
||||
};
|
||||
break;
|
||||
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout six_col_layout",
|
||||
1: "col-span-4",
|
||||
};
|
||||
break;
|
||||
default:
|
||||
_classForSection = {
|
||||
section_layout: "section_layout basic_column",
|
||||
};
|
||||
break;
|
||||
}
|
||||
return _classForSection;
|
||||
});
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
|
||||
});
|
||||
|
||||
const mapActivesToItems = (index: number) => {
|
||||
if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
|
||||
return LAYOUT_PARSE.value.listCss[index] || {};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
|
||||
<div
|
||||
class="section_child"
|
||||
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
|
||||
:key="index"
|
||||
:class="['border-custom', CLASS_FOR_SECTION[index]]"
|
||||
:style="mapActivesToItems(index)['div.section_child']"
|
||||
@dragover.prevent
|
||||
@drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
|
||||
>
|
||||
<RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section_layout {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
&.smartphone_layout {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||||
}
|
||||
&.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));
|
||||
}
|
||||
&.five_col_layout {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
&.six_col_layout {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
.col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
.border-custom {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user