thainv: ghép navigation
This commit is contained in:
nguyen van thai
+138
@@ -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>
|
||||
+160
@@ -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>
|
||||
@@ -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'
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user