thainv: ghép navigation

2024-06-17 11:48:00 +07:00
parent c2b9208746
commit 3c75c89a8b
30 changed files with 856 additions and 108 deletions
@@ -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>