feat: new layout

2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
@@ -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>
@@ -0,0 +1,2 @@
+// Navigation
+export { default as Navigation_Default } from './Default.vue'
@@ -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>