minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minhnt-dev: fix page template

Browse Source
This commit is contained in:
MoreStrive
2024-07-12 19:13:34 +07:00
parent 212e6d357c
commit dffbe39fa6
19 changed files with 413 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
-78
View File
@@ -1,78 +0,0 @@
<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
const props = defineProps<{
layout?: any,
label?:any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
let _classForLayout = {};
switch (props.layout) {
case 'Full_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container full-size-layout',
};
break;
case 'Center_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container center-layout',
};
break;
case 'Background_Page':
_classForLayout = {
page_container: 'page_container full-size-page background-container',
layout_container: 'layout_container center-layout',
};
break;
default:
_classForLayout = {
page_container: 'page_container',
layout_container: 'layout_container',
};
break;
}
return _classForLayout;
})
const LAYOUT_PARSE = computed(() => {
return props?.label ? getInputValue(props.label, "OBJECT") : {};
});
</script>
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]" :style="LAYOUT_PARSE['div.page_container']">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
// padding: 20px 0;
&.full-size-page {
width: 100%;
}
// .full-size-layout {
// padding-left: 20px;
// padding-right: 20px;
// }
}
.layout_container {
padding-top: 20px;
&.center-layout {
max-width: 1440px;
padding: 0 27.5px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
</style>
components/dynamic-page/page/layouts/homes/Default.vue
+76
View File
@@ -0,0 +1,76 @@
<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";
const props = defineProps<{
layout?: any,
label?:any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
let _classForLayout = {};
switch (props.layout) {
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
_classForLayout = {
page_container: "page_container full-size-page",
layout_container: "layout_container center-layout",
};
break;
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
_classForLayout = {
page_container: "page_container full-size-page",
layout_container: "layout_container full-size-layout",
};
break;
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['BACKGROUND_PAGE']:
_classForLayout = {
page_container: "page_container full-size-page background-container",
layout_container: "layout_container center-layout",
};
break;
default:
_classForLayout = {
page_container: "page_container",
layout_container: "layout_container",
};
break;
}
return _classForLayout;
});
</script>
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
// padding: 20px 0;
&.full-size-page {
width: 100%;
}
// .full-size-layout {
// padding-left: 20px;
// padding-right: 20px;
// }
}
.layout_container {
padding-top: 20px;
&.center-layout {
max-width: 1440px;
padding: 0 27.5px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
</style>
components/dynamic-page/page/layouts/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export { default as BASE_LAYOUT } from './Default.vue'
export { default as Home_Default } from './homes/Default.vue'
// Article
export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
components/dynamic-page/page/layouts/index.vue
+25 -34
View File
@@ -1,46 +1,37 @@
<script lang="ts" setup>
import { layouts } from "@/definitions/enum";
import {
BASE_LAYOUT,
ARTICLE_SHORT_LAYOUT,
ARTICLE_PAGE_LAYOUT,
ARTICLE_NORMAL_LAYOUT,
ARTICLE_NONE_LAYOUT,
ARTICLE_LONG_LAYOUT,
} from './index';
import { enumPageKey, enumPageTemplate, enumPageLayouts } from "@/definitions/enum";
import { Home_Default, ARTICLE_LONG_LAYOUT, ARTICLE_NONE_LAYOUT, ARTICLE_NORMAL_LAYOUT, ARTICLE_PAGE_LAYOUT, ARTICLE_SHORT_LAYOUT } from "./index";
const _props = defineProps<{
settings?: any,
}>()
settings?: any;
}>();
const definedDynamicPageLayout: Record<string, any> = {
'Default': BASE_LAYOUT,
[layouts.FULL_PAGE]: BASE_LAYOUT,
[layouts.CENTER_PAGE]: BASE_LAYOUT,
[layouts.BACKGROUND_PAGE]: BASE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["DEFAULT"]]: Home_Default,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["FULL"]]: Home_Default,
[enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["BACKGROUND_PAGE"]]: Home_Default,
'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
}
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_SHORT"]]: ARTICLE_SHORT_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_PAGE"]]: ARTICLE_PAGE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NORMAL"]]: ARTICLE_NORMAL_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NONE"]]: ARTICLE_NONE_LAYOUT,
[enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_LONG"]]: ARTICLE_LONG_LAYOUT,
};
const getCurrentLayout = computed(() => _props.settings.layout);
const getCurrentLayout = computed(() => _props.settings?.layout);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value
}
}
return props;
};
})
return () => {
let props: any = {};
for (const [key, value] of Object.entries(_props.settings)) {
props = {
...props,
[key]: value,
};
}
return props;
};
});
</script>
<template>