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

init

Browse Source
This commit is contained in:
MoreStrive
2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
+72
View File
@@ -0,0 +1,72 @@
<script setup lang="ts">
const props = defineProps<{
layout?: 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;
})
</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 {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Long.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/articles/None.vue
+42
View File
@@ -0,0 +1,42 @@
/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
*/
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container full-size-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Normal.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/articles/Page.vue
+42
View File
@@ -0,0 +1,42 @@
/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
*/
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container full-size-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 40px;
}
</style>
components/dynamic-page/page/layouts/articles/Short.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
</script>
<template>
<div class="page_container full-size-page">
<div class="layout_container center-layout grid-container">
<slot />
</div>
</div>
</template>
<style lang="scss" scoped>
.page_container {
&.full-size-page {
width: 100%;
}
.full-size-layout {
padding-left: 20px;
padding-right: 20px;
}
}
.layout_container {
padding-top: 40px;
padding-bottom: 40px;
&.center-layout {
max-width: 1300px;
margin: auto;
}
}
</style>
components/dynamic-page/page/layouts/index.ts
+8
View File
@@ -0,0 +1,8 @@
export { default as BASE_LAYOUT } from './Default.vue'
// Article
export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
export { default as ARTICLE_NONE_LAYOUT } from './articles/None.vue'
export { default as ARTICLE_NORMAL_LAYOUT } from './articles/Normal.vue'
export { default as ARTICLE_PAGE_LAYOUT } from './articles/Page.vue'
export { default as ARTICLE_SHORT_LAYOUT } from './articles/Short.vue'
components/dynamic-page/page/layouts/index.vue
+50
View File
@@ -0,0 +1,50 @@
<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';
const _props = defineProps<{
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,
'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,
}
const getCurrentLayout = computed(() => _props.settings && _props.settings.layout);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
props = {
...props,
[key]: value
}
}
return props;
};
})
</script>
<template>
<component :is="definedDynamicPageLayout[getCurrentLayout] || null" v-bind="GET_PROPS()">
<slot />
</component>
</template>