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

feat: new layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/navigations/bottoms/Default.vue
+75
View File
@@ -0,0 +1,75 @@
<script setup lang="ts">
import { isEmpty } from "lodash";
import { nanoid } from "nanoid"
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
import { buildTree } from "@/utils/recusive";
const _props = defineProps<{
content?: any[];
component?: any;
}>();
</script>
<template>
<div class="px-4 mt-4">
<div class="nav-container">
<template v-if="_props.content">
<div v-for="item, index in buildTree(_props.content)" :key="index" class="nav-items-box">
<div class="submenu-container">
<h4 class="" >{{ item.title }}</h4>
<div class="ml-2">
<h5
v-for="_item, _index in item.childs ? item.childs : []"
:key="_index"
>
{{ _item.title }}
</h5>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<style lang="scss" scoped>
.empty {
width: 100px;
height: 30px;
border-radius: 4px;
background: #409eff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 18px;
color: white;
cursor: pointer;
}
.nav-container {
display: flex;
.nav-items-box {
width: 20%;
}
}
.submenu-container {
> div {
margin-left: 10px;
}
h4 {
font-size: 12px;
font-weight: 700;
color: white;
margin-bottom: 5px;
}
h5 {
font-size: 12px;
font-weight: 400;
color: white;
margin-bottom: 5px;
}
}
</style>
components/dynamic-page/page-component/templates/navigations/bottoms/index.ts
+2
View File
@@ -0,0 +1,2 @@
// Navigation
export { default as Navigation_Default } from './Default.vue'
components/dynamic-page/page-component/templates/navigations/bottoms/index.vue
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Navigation_Default } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
content?: any
}>();
const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']]['NAVIGATION_BOTTOM_DEFAULT']]: Navigation_Default,
};
const getCurrentComponent = computed(() => _props.settings.layout);
const GET_PROPS = computed(() => {
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="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }"
/>
</template>
components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
+15 -17
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { enumPageComponentStaticChild, enumPageComponentLayouts } from "@/definitions/enum";
const props = defineProps<{
records?: any[]
@@ -15,13 +14,11 @@ const setGlobalState = (id: any) => {
</script>
<template>
<div class="navigation-container flex gap-4 justify-center items-center">
<div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
<div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
<div class="navigation-submenu">
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="">{{ record?.title }}</div>
</nuxt-link>
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
<div class="navigation-item submenu-container dropdown-container">
<RecusiveNavItem :records="record.childs" />
</div>
@@ -29,12 +26,12 @@ const setGlobalState = (id: any) => {
</template>
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
<div class="navigation-submenu">
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="">{{ record?.title }}</div>
</nuxt-link>
<div class="position-relative ps-3">
<div class="navigation_title " @click="selectNavigationComponent">{{ record?.title }}</div>
</div>
<div class="full-layout dropdown-container">
<template v-if="record.data">
<div class="p-2">
<div class="p-1">
<RecusiveSection type="section" :id="record.data" />
</div>
</template>
@@ -42,9 +39,7 @@ const setGlobalState = (id: any) => {
</div>
</template>
<template v-else>
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
<div class="navigation-item">{{ record?.title }}</div>
</nuxt-link>
<div class="navigation_title navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
</template>
</div>
</div>
@@ -52,9 +47,14 @@ const setGlobalState = (id: any) => {
<style lang="scss" scoped>
.navigation-branch {
.navigation_title {
font-size: 14px;
font-weight: 400;
text-align: left;
}
.navigation-submenu {
position: relative;
padding: 12px 5px;
padding: 15px 5px;
&:hover {
> .dropdown-container {
opacity: 1;
@@ -101,10 +101,8 @@ const setGlobalState = (id: any) => {
top: 100%;
}
.full-layout {
width: 800px;
z-index: 100;
// height: 400px;
width: 1200px;
z-index: 2;
}
.show-menu {
components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue → components/dynamic-page/page-component/templates/navigations/directions/Default.vue
+9 -8
View File
@@ -1,14 +1,15 @@
<script setup lang="ts">
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
// import { getInputValue } from "@/utils/cms/page/parseSQL";
import { isEmpty } from "lodash";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { getInputValue } from "@/utils/parseSQL";
// const emit = defineEmits(["selectComponent"]);
const emit = defineEmits(["selectComponent"]);
// const _props = defineProps<{
// dataResult?: any[];
// dataQuery?: string;
// component?: any;
// }>();
const _props = defineProps<{
dataResult?: any[];
dataQuery?: string;
component?: any;
}>();
const SETTING_OPTIONS = {
MAX_ELEMENT: 10,
components/dynamic-page/page-component/templates/navigations/directions/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Navigation_Default } from './Default.vue'
components/dynamic-page/page-component/templates/navigations/directions/index.vue
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Navigation_Default } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
content?: any
}>();
const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']]['NAVIGATION_BOTTOM_DEFAULT']]: Navigation_Default,
};
const getCurrentComponent = computed(() => _props.settings.layout);
const GET_PROPS = computed(() => {
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="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }"
/>
</template>
components/dynamic-page/page-component/templates/navigations/index.ts
+3 -3
View File
@@ -1,4 +1,4 @@
// Navigation
export { default as Top_Navigation } from './layouts/Top.vue'
export { default as Bottom_Navigation } from './layouts/Bottom.vue'
export { default as Direction_Navigation } from './layouts/Direction.vue'
export { default as Top_Navigation } from './tops/index.vue'
export { default as Bottom_Navigation } from './bottoms/index.vue'
export { default as Direction_Navigation } from './directions/index.vue'
components/dynamic-page/page-component/templates/navigations/index.vue
+11 -7
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
import { Direction_Navigation, Bottom_Navigation, Top_Navigation } from "./index";
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Top_Navigation, Bottom_Navigation, Direction_Navigation } from "./index";
const _props = defineProps<{
settings: any;
@@ -9,11 +9,12 @@ const _props = defineProps<{
}>();
const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-DIRECTION']]: Direction_Navigation,
[enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM']]: Bottom_Navigation,
[enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']]: Top_Navigation,
[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']]: Direction_Navigation,
[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']]: Bottom_Navigation,
[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]: Top_Navigation,
};
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
const getCurrentComponent = computed(() => _props.settings.template);
const GET_PROPS = computed(() => {
return () => {
@@ -32,5 +33,8 @@ const GET_PROPS = computed(() => {
</script>
<template>
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
<component
:is="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }"
/>
</template>
components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
-47
View File
@@ -1,47 +0,0 @@
<script setup lang="ts">
import { buildTree } from "@/utils/recusive";
const _props = defineProps<{
content?: any;
component?: any;
}>();
const SETTING_OPTIONS = {
MAX_ELEMENT: 4,
};
</script>
<template>
<div class="mt-4">
<div class="gap-5 grid" :style="`grid-template-columns: repeat(${SETTING_OPTIONS.MAX_ELEMENT}, minmax(0, 1fr));`">
<template v-if="_props.content">
<div v-for="item, index in buildTree(_props.content)" :key="index">
<div class="submenu-container">
<h4 class="mb-0" @click="selectNavigationComponent">{{ item.title }}</h4>
<h4
v-for="_item, _index in item.childs ? item.childs : []"
:key="_index"
class="mb-0"
@click="selectNavigationComponent"
>
{{ _item.title }}
</h4>
</div>
</div>
</template>
</div>
</div>
</template>
<style lang="scss" scoped>
.submenu-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(1, minmax(0, 1fr));
h4 {
font-size: 14px;
font-weight: normal;
cursor: pointer;
}
}
</style>
components/dynamic-page/page-component/templates/navigations/layouts/Top.vue
-19
View File
@@ -1,19 +0,0 @@
<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { buildTree } from "@/utils/recusive";
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
const _props = defineProps<{
content?: any;
component?: any;
}>();
</script>
<template>
<nav class="border-y-1px border-y-[#dddddd] border-solid">
<div class="">
<RecusiveNavItem :records="_props.content && buildTree(_props.content)" :component="_props.component" />
</div>
</nav>
</template>
components/dynamic-page/page-component/templates/navigations/tops/Default.vue
+37
View File
@@ -0,0 +1,37 @@
<script setup lang="ts">
import { buildTree } from "@/utils/recusive";
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
const _props = defineProps<{
content?: any[];
component?: any;
}>();
const SETTING_OPTIONS = {
MAX_ELEMENT: 10,
};
</script>
<template>
<nav>
<div class="d-flex gap-3 justify-content-end align-items-center">
<RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
</div>
</nav>
</template>
<style lang="scss" scoped>
.empty {
width: 100px;
min-height: 20px;
border-radius: 4px;
background: #409eff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 18px;
color: white;
margin: 5px 0px;
}
</style>
components/dynamic-page/page-component/templates/navigations/tops/index.ts
+2
View File
@@ -0,0 +1,2 @@
// Navigation
export { default as Navigation_Default } from './Default.vue'
components/dynamic-page/page-component/templates/navigations/tops/index.vue
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Navigation_Default } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
content?: any
}>();
const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']]['NAVIGATION_TOP_DEFAULT']]: Navigation_Default,
};
const getCurrentComponent = computed(() => _props.settings.layout);
const GET_PROPS = computed(() => {
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="definedDynamicComponent[getCurrentComponent]"
v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }"
/>
</template>