87 lines
2.7 KiB
Vue
87 lines
2.7 KiB
Vue
|
<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>
|