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

thainv: ghép navigation

Browse Source
This commit is contained in:
nguyen van thai
2024-06-17 11:48:00 +07:00
parent c2b9208746
commit 3c75c89a8b
30 changed files with 856 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/AssignComponent.vue
+66
View File
@@ -0,0 +1,66 @@
<script setup lang="ts">
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage } = storeToRefs(useDynamicPageStore());
const props = defineProps<{
type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
}>();
// const store = reactive({
// page: useCmsPageStore(),
// section: usePageSectionStore(),
// component: usePageComponentStore(),
// });
// const { currentPage } = storeToRefs(useCmsPageStore());
const defineTypeRecusive = {
TOP_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'],
BOTTOM_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'],
};
const findDataPosition = computed(() => {
let result = {};
switch (props.type) {
case defineTypeRecusive.TOP_NAVIGATION:
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
});
break;
case defineTypeRecusive.BOTTOM_NAVIGATION:
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
return component.settings && component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
});
break;
default:
result = {};
break;
}
console.log(result)
return result;
});
// const selectComponent = (data: any) => {
// store.page.selectComponent(data)
// }
console.log(findDataPosition, 'findDataPosition')
</script>
<template>
<div>
<DynamicComponent
v-if="findDataPosition && findDataPosition?.id"
:settings="findDataPosition?.settings"
:component="findDataPosition"
:content="findDataPosition?.content"
/>
<div v-else class="text-center">
<span>Hãy tạo thành phần "Thanh điều hướng ở đầu trang" để hiển thị thành điều hướng tại đây</span>
</div>
</div>
</template>
<style lang="scss" scoped>
</style>
components/dynamic-page/page-component/templates/articles/layouts/Card.vue
+26 -6
View File
@@ -89,7 +89,7 @@ const drop = (e: any) => {
<style lang="scss" scoped>
.basic-article {
display: flex;
gap: 10px;
gap: 12px;
height: 100%;
&.no-data {
@@ -104,6 +104,11 @@ const drop = (e: any) => {
&.reverse {
flex-direction: column-reverse;
height: 100%;
@media (max-width: 640px) {
flex-direction:column;
}
}
}
&.border-custom {
@@ -111,24 +116,39 @@ const drop = (e: any) => {
}
&.borderLeft {
border-left: 1px solid;
padding-left: 10px;
padding-left: 16px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 10px;
padding-right: 16px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 10px;
padding-top: 16px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 10px;
padding-bottom: 16px;
}
&.borderRight ,
&.borderLeft,
&.borderTop,
&.borderBottom {
@media (max-width: 640px) {
border: 0;
padding: 0;
}
}
&.horizontal {
flex-direction: row;
@apply sm:flex-row flex-col;
.basic-article_thumbnail {
width: 40%;
@media (max-width: 640px) {
width: 100% !important;
}
}
&.reverse {
flex-direction: row-reverse;
components/dynamic-page/page-component/templates/categories/layouts/Default.vue
+100 -13
View File
@@ -1,10 +1,13 @@
<script setup lang="ts">
import { isEmpty } from "lodash";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
const emit = defineEmits(["dropData", "selectComponent"]);
const _props = defineProps<{
dataResult?: any[];
dataQuery?: string;
label?: string;
}>();
const SETTING_OPTIONS = {
@@ -12,27 +15,111 @@ const SETTING_OPTIONS = {
};
const _dataResult = computed(() => {
let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill(null);
const result = getInputValue(_props.dataResult, 'ARRAY');
result && result.length > 0 && _components.map((_ : any, index : any) => {
_components[index] = result[index] || null;
})
return _components;
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
let _components = Array(Number(designObject.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
const result = getInputValue(_props.dataResult, "ARRAY");
result &&
result.length > 0 &&
_components.map((_: any, index: any) => {
_components[index] = result[index] || null;
});
return Object.assign({}, _components);
});
const designObject = computed(() => {
return _props.label ? getInputValue(_props.label, "OBJECT") : {};
});
async function dropData(event: any) {
const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
emit("dropData", {
dataResult: result,
dataType,
dataQuery: getDataQuery,
});
}
const selectComponent = () => {
emit("selectComponent");
};
</script>
<template>
<div>
<div class="flex gap-4 items-end">
<template v-for="(component, index) in _dataResult">
<nuxt-link v-if="component" :key="index" :to="`/${component.code}`" class=" py-1 font-400 text-[16px] first:font-600 first:text-[22px] first:border-b first:border-primary-600 sm:block hidden first:block">
<h3 class="m-0 leading-none hover:text-primary-600 transition-all duration-300">{{ component.title }}</h3>
</nuxt-link>
</template>
<div
class="categories-container p-2 border-custom"
@click="selectComponent"
:class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
:style="[designObject['background'] && `background: ${designObject['background']}`]"
>
<div v-for="(component, index) in _dataResult" :key="index" :class="[...(designObject['border']?.length > 0 ? designObject['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']">
<template v-if="!isEmpty(component)">
<nuxt-link :to="`/${component.code}`"
:class="index != 0? 'sm:block hidden' : 'font-bold text-20px border-b-2px border-primary-600'"
class="hover:text-primary-600"
>
{{ component.title }}
</nuxt-link>
</template>
<div v-else @dragover.prevent @drop.stop.prevent="dropData($event)"></div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.categories-container {
display: flex;
gap: 10px;
align-items: flex-end;
width: fit-content;
overflow: hidden;
&.vertical {
flex-direction: column;
}
&.horizontal {
flex-direction: row;
}
.category {
height: 100%;
h3 {
font-weight: 500;
font-size: 14px;
margin: 0px !important;
}
&:first-child {
h3 {
font-weight: 600;
font-size: 17px;
}
}
}
}
.border-custom {
border-color: #e5e5e5 !important;
}
.borderLeft {
border-left: 1px solid;
padding-left: 16px;
}
.borderRight {
border-right: 1px solid;
padding-right: 16px;
}
.borderTop {
border-top: 1px solid;
padding-top: 16px;
}
.borderBottom {
border-bottom: 1px solid;
padding-bottom: 16px;
}
</style>
components/dynamic-page/page-component/templates/index.ts
+2 -1
View File
@@ -9,4 +9,5 @@ export { default as Dynamic_Section } from './sections/index.vue';
export { default as Dynamic_Advertising } from './advertising/index.vue'
export { default as Dynamic_Category } from './categories/index.vue'
export { default as Dynamic_Article } from './articles/index.vue'
export { default as Dynamic_Collection } from './collections/index.vue'
export { default as Dynamic_Collection } from './collections/index.vue'
export { default as Dynamic_Navigation } from './navigations/index.vue'
components/dynamic-page/page-component/templates/index.vue
+5 -6
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, CollectionPaging, Dynamic_Other, Dynamic_Advertising, Dynamic_Article } from "./index";
import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, Dynamic_Navigation, Dynamic_Other, Dynamic_Advertising, Dynamic_Article } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
@@ -12,12 +12,11 @@ const definedDynamicComponent: Record<string, any> = {
[enumPageComponentTemplates.COLLECTION]: Dynamic_Collection,
[enumPageComponentTemplates.SECTION]: Dynamic_Section,
[enumPageComponentTemplates.OTHER]: Dynamic_Other,
[enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising
[enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
[enumPageComponentTemplates.NONE]: Dynamic_Navigation,
};
// console.log(_props.settings.template, 'template')
const getCurrentComponent = computed(() => `${_props.settings.template}`);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
@@ -36,5 +35,5 @@ const GET_PROPS = computed(() => {
<template>
<!-- <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" /> -->
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" />
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
</template>
components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
+138
View File
@@ -0,0 +1,138 @@
<script lang="ts" setup>
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
// import RecusiveSection from "@/components/cms/page-section/RecusiveSection.vue";
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
// const props = defineProps<{
// records?: any[]
// component: any;
// }>();
// const store = reactive({
// page: useCmsPageStore(),
// section: usePageSectionStore(),
// component: usePageComponentStore(),
// });
// const globalState = ref({})
// const setGlobalState = (id: any) => {
// globalState.value[id] = !globalState.value[id];
// }
// const selectNavigationComponent = () => {
// store.page.selectComponentNavigation(props.component);
// }
// const dropSection = (event: any, child: any) => {
// if (event.dataTransfer.getData("section")) {
// const section = JSON.parse(event.dataTransfer.getData("section"));
// store.component.updateNavigationItemInfor(props.component, child, { data: section.id });
// store.section.updatePublishedSectionInGeneralPage(section.id, 9999999999);
// }
// };
</script>
<template>
ábsabda
<!-- <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">
<div class="" @click="selectNavigationComponent">{{ record?.title }}</div>
<div class="navigation-item submenu-container dropdown-container">
<RecusiveNavItem :records="record.childs" />
</div>
</div>
</template>
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
<div class="navigation-submenu">
<div class="position-relative ps-3">
<span class="position-absolute " style="left: -10px; top: -7px" @click="() => setGlobalState(record.id)">
<i v-if="!globalState[record.id]" class="ri-eye-2-line fs-3"></i>
<i v-else class="ri-eye-close-line fs-3"></i>
</span>
<span @click="selectNavigationComponent">{{ record?.title }}</span>
</div>
<div class="full-layout dropdown-container" :class="[!globalState[record.id] && 'show-menu']">
<template v-if="record.data">
<div class="p-2">
<RecusiveSection type="section" :id="record.data" />
</div>
</template>
<template v-else>
<el-empty description="Kéo Section vào đây" @dragover.prevent @drop.stop.prevent="dropSection($event, record)" />
</template>
</div>
</div>
</template>
<template v-else>
<div class="navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
</template>
</div>
</div> -->
</template>
<style lang="scss" scoped>
.navigation-branch {
.navigation-submenu {
position: relative;
padding: 15px 5px;
&:hover {
> .dropdown-container {
opacity: 1;
transform: translate(-50%, 0%);
visibility: visible;
}
}
}
.submenu-container {
width: 200px;
display: flex;
> div {
justify-content: start !important;
align-items: flex-start !important;
flex-direction: column;
width: 100%;
gap: 0px !important;
}
div {
width: 100% !important;
}
.navigation-item {
width: 100% !important;
padding: 10px 20px;
&:hover {
background: #409eff;
color: #fff;
}
}
.navigation-branch {
padding: 0px !important;
}
}
.dropdown-container {
opacity: 0;
transform: translate(-50%, 10%);
left: 50%;
visibility: hidden;
transition: all .3s;
position: absolute;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
top: 100%;
}
.full-layout {
width: 800px;
z-index: 100;
// height: 400px;
}
.show-menu {
opacity: 1;
transform: translate(-50%, 0%);
visibility: visible;
}
}
</style>
components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue
+160
View File
@@ -0,0 +1,160 @@
<script setup lang="ts">
// import { nanoid } from "nanoid"
// import RecusiveTopChild from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue";
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
// const props = defineProps<{
// records?: any[]
// currentComponent?: any
// }>()
// const store = reactive({
// page: useCmsPageStore(),
// section: usePageSectionStore(),
// component: usePageComponentStore(),
// });
// const showChildItem = ref<boolean>(false)
// const toggleStatusBar = (type: "section", id?: any) => {
// // if (type === "section") {
// // store.section.setCurrentSection(id);
// // } else {
// // store.section.setCurrentSection(null);
// // }
// // store.section.toggleStatusSectionBar(true);
// };
// const removeStaticRecord = (currentChild: any) => {
// store.component.removeChildtNavigation(props.currentComponent, currentChild);
// };
// const addChildRecord = (currentChild: any) => {
// const newChildItem = {
// id: nanoid(10),
// title: 'Mới mới',
// slug: '',
// childs: [],
// parentId: currentChild.id,
// data: null,
// typeChild: enumPageComponentStaticChild.DEFAULT,
// }
// store.component.setChildForComponentNavigation(props.currentComponent, newChildItem);
// }
// const setNavigationItem = (currentChild: any) => {
// console.log(currentChild)
// store.component.setNavigationItem(currentChild);
// }
</script>
<template>
ádasd
<!-- <div class="lists-record">
<div v-for="(record) in props.records" :key="record.id">
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
<div class="record-item child">
<div class="record-infor d-flex align-items-center gap-2">
<span @click="() => showChildItem = !showChildItem" class="cursor-pointer">
<i :class="[showChildItem ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line']"></i>
</span>
<h6>{{ record.title || '' }}</h6>
</div>
<div class="record-action">
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
</div>
</div>
<div class="ps-4 mt-2" :class="[showChildItem ? 'is-show-item' : 'is-hidden-item']">
<RecusiveTopChild :records="record.childs" :currentComponent="props.currentComponent" />
</div>
</template>
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
<div class="record-item child">
<div class="record-infor d-flex align-items-center gap-2">
<h6>{{ record.title || '' }}</h6>
</div>
<div class="record-action">
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
</div>
</div>
</template>
<template v-else>
<div class="record-item">
<div class="record-infor d-flex align-items-center gap-2">
<h6>{{ record.title || '' }}</h6>
</div>
<div class="record-action">
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
</div>
</div>
</template>
</div>
</div> -->
</template>
<style lang="scss" scoped>
.lists-record {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 14px;
.record-item {
padding: 3px 15px;
border-radius: 5px;
border: 1px solid #ccc;
cursor: move;
position: relative;
z-index: 0;
display: flex;
justify-content: space-between;
align-items: center;
&.child {
padding: 3px 15px 3px 10px;
}
&:hover {
> .record-action {
opacity: 1;
}
}
> .record-action {
position: relative;
z-index: 1;
display: flex;
cursor: pointer;
gap: 10px;
font-size: 18px;
opacity: 0;
transition: 0.3s;
color: #7e7e7e;
> span:hover {
color: #409eff;
transition: 0.3s all;
}
}
> .record-infor {
span i {
font-size: 18px;
cursor: point;
}
h6 {
font-size: 13px;
font-weight: 600;
margin-bottom: 0px;
}
}
}
.is-show-item {
height: auto;
}
.is-hidden-item {
height: 0px;
overflow: hidden;
}
}
</style>
components/dynamic-page/page-component/templates/navigations/index.ts
+4
View File
@@ -0,0 +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'
components/dynamic-page/page-component/templates/navigations/index.vue
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts" setup>
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
import { Direction_Navigation, Bottom_Navigation, Top_Navigation } from "./index";
const _props = defineProps<{
settings: any;
component?: any;
content?: any
}>();
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,
};
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/layouts/Bottom.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup lang="ts">
// import { isEmpty } from "lodash";
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
// import { getInputValue } from "@/utils/cms/page/parseSQL";
// const emit = defineEmits(["selectComponent"]);
// const _props = defineProps<{
// dataResult?: any[];
// dataQuery?: string;
// component?: any;
// }>();
// const SETTING_OPTIONS = {
// MAX_ELEMENT: 10,
// };
</script>
<template>
lay outa
<!-- <section>
<div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
<div class="empty"></div>
</div>
</section> -->
</template>
<style lang="scss" scoped>
.empty {
width: 120px;
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
</style>
components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup lang="ts">
import { isEmpty } from "lodash";
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
// import { getInputValue } from "@/utils/cms/page/parseSQL";
// const emit = defineEmits(["selectComponent"]);
// const _props = defineProps<{
// dataResult?: any[];
// dataQuery?: string;
// component?: any;
// }>();
// const SETTING_OPTIONS = {
// MAX_ELEMENT: 10,
// };
</script>
<template>
ád
<!-- <section>
<div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
<div class="empty"></div>
</div>
</section> -->
</template>
<style lang="scss" scoped>
.empty {
width: 120px;
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
</style>
components/dynamic-page/page-component/templates/navigations/layouts/Top.vue
+86
View File
@@ -0,0 +1,86 @@
<script setup lang="ts">
// import { isEmpty } from "lodash";
// import { nanoid } from "nanoid"
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
// import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/cms/page/parseSQL";
// import { buildTree } from "@/utils/cms/page/recusive";
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
// const emit = defineEmits(["selectComponent"]);
// const _props = defineProps<{
// content?: any[];
// component?: any;
// }>();
// const store = reactive({
// page: useCmsPageStore(),
// section: usePageSectionStore(),
// component: usePageComponentStore(),
// });
// const SETTING_OPTIONS = {
// MAX_ELEMENT: 10,
// };
// const _dataResult = computed(() => {
// let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill({});
// const result = getInputValue(_props.content, "ARRAY");
// result &&
// result.length > 0 &&
// _components.map((_: any, index: any) => {
// _components[index] = result[index] || null;
// });
// return _components;
// });
// async function dropData(event: any, data: any) {
// if (event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`)) {
// const data = event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`);
// const { dataResult } = JSON.parse(data);
// const dataInsert = {
// id: nanoid(10),
// title: dataResult.title,
// slug: dataResult.code,
// childs: [],
// parentId: null,
// data: null,
// typeChild: enumPageComponentStaticChild.DEFAULT,
// };
// const getJSonContent = JSON.parse(_props.content)
// const checkDataResult = getInputValue(getJSonContent, "ARRAY");
// const result: any = _props.content ? [...checkDataResult, { ...dataInsert }] : [{ ...dataInsert }];
// store.component.setStaticData(result, _props.component.id);
// }
// }
</script>
<template>
<!-- <nav>
<div class="d-flex gap-3 justify-content-center align-items-center">
<RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
<div class="empty" @dragover.prevent @drop.stop.prevent="dropData">
<i class="ri-add-fill"></i>
</div>
</div>
</nav> -->
ád
</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/sections/layouts/Article.vue
+18 -8
View File
@@ -146,20 +146,20 @@ watch(
border-color: #e5e5e5 !important;
}
&.borderLeft {
border-left: 2px solid;
padding-left: 10px;
border-left: 1px solid;
padding-left: 16px;
}
&.borderRight {
border-right: 2px solid;
padding-right: 10px;
border-right: 1px solid;
padding-right: 16px;
}
&.borderTop {
border-top: 2px solid;
padding-top: 10px;
border-top: 1px solid;
padding-top: 16px;
}
&.borderBottom {
border-bottom: 2px solid;
padding-bottom: 10px;
border-bottom: 1px solid;
padding-bottom: 16px;
}
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -168,6 +168,16 @@ watch(
grid-template-rows: auto;
grid-auto-flow: column;
}
&.borderRight ,
&.borderLeft,
&.borderTop,
&.borderBottom {
@media (max-width: 640px) {
border: 0;
padding: 0;
}
}
}
.empty {
width: 100%;
components/dynamic-page/page-section/layouts/Default.vue
+3 -11
View File
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
</script>
<template>
<div class="section_layout grid sm:gap-x-5 sm:gap-y-2.5 gap-[10px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
<div class="section_layout grid gap-[16px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
<div
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
:key="index"
@@ -156,15 +156,7 @@ const CLASS_FOR_SECTION = computed(() => {
<style lang="scss">
.section_layout {
&.basic_column {
grid-template-columns: repeat(1, minmax(0, 1fr));
// & > div:first-child {
// .basic-article {
// h3 {
// @apply text-24px;
// }
// }
// }
@apply grid-cols-1;
}
&.two_col_layout {
@@ -172,7 +164,7 @@ const CLASS_FOR_SECTION = computed(() => {
}
&.three_col_layout {
@apply lg:grid-cols-3 grid-cols-1;
@apply md:grid-cols-3 grid-cols-1;
// grid-template-columns: repeat(3, minmax(0, 1fr));
}
&.four_col_layout {
components/dynamic-page/page-section/layouts/index.vue
+1
View File
@@ -30,6 +30,7 @@ const definedDynamicSection: Record<string, any> = {
};
const getCurrentSection = computed(() => _props?.layout || "");
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
components/dynamic-page/page-section/templates/index.ts
+1
View File
@@ -1 +1,2 @@
export { default as Article_Section_Default } from './articles/Default.vue'
export { default as None_Section_Default } from './none/Default.vue'
components/dynamic-page/page-section/templates/index.vue
+19 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Article_Section_Default } from './index';
import { Article_Section_Default, None_Section_Default } from './index';
import { enumPageSectionLayouts } from "@/definitions/enum";
const _props = defineProps<{
@@ -25,10 +25,27 @@ const definedDynamicSection: Record<string, any> = {
[`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,
}
const getCurrentSection = computed(() => `${_props.settings.template}_${_props.settings.layout}`);
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
components/dynamic-page/page-section/templates/none/Default.vue
+28
View File
@@ -0,0 +1,28 @@
<script setup lang="ts">
import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
import type { PageSection } from "~/server/models/dynamic-page/index";
const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
const props = defineProps<{
label?: any
layout?: string
settings?: any
content?: any
section: PageSection
}>()
</script>
<template>
<DynamicLayout
:layout="props.layout"
:content="props.content"
:settings="props.settings"
:section= "props.section"
/>
</template>
<style lang="scss" scoped>
</style>
components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
+5 -2
View File
@@ -1,8 +1,9 @@
<script lang="ts" setup>
import { CurrentDateTime, LangSwitcher, TopNavigation, Mega } from "./index";
import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
const widgetsStore = useWidgetsStore();
const layoutstore = useLayoutStore();
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
const { weather } = storeToRefs(widgetsStore);
const { megaMenuActive } = storeToRefs(layoutstore);
@@ -87,7 +88,9 @@ onUnmounted(() => {
</div>
</div>
</header>
<TopNavigation />
<div class="top-navigation">
<AssignComponent :type="enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP']" />
</div>
<Teleport to="body">
<Mega />
components/dynamic-page/page/templates/homes/Basic.vue
+15 -11
View File
@@ -1,19 +1,23 @@
<script setup lang="ts">
import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
import DynamicLayout from "~/components/dynamic-page/page/layouts/index.vue";
import HeaderHomeTemplate from "~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue";
import FooterHomeTemplate from "~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue";
const props = defineProps<{
settings?: any
}>()
settings?: any;
}>();
</script>
<template>
<div>
<HeaderHomeTemplate />
<DynamicLayout :settings="props.settings">
<div>
<HeaderHomeTemplate>
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
<FooterHomeTemplate />
</div>
</HeaderHomeTemplate>
<DynamicLayout :settings="props.settings">
<slot />
</DynamicLayout>
<FooterHomeTemplate />
</div>
</template>
components/dynamic-page/page/templates/index.vue
+2
View File
@@ -14,6 +14,8 @@ const getCurrentTemplate = computed(() => {
return _props.settings && _props.settings.template || '';
});
console.log(getCurrentTemplate.value, 'tempalte')
const GET_PROPS = computed(() => {
return () => {
let props : any = {};