From 38577f87c09519714db126194ecc3124234cf00e Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 28 Apr 2023 12:25:28 +0300
Subject: [PATCH] feat(layout): area order

---
 .../ui-elements/layout/examples/AllSlots.vue  | 61 +++++++++++++++++
 .../ui-elements/layout/examples/Order.vue     | 67 +++++++++++++++++++
 .../page-config/ui-elements/layout/index.ts   |  4 +-
 .../components/va-layout/VaLayout.demo.vue    | 60 +++++++++++++++++
 .../ui/src/components/va-layout/VaLayout.vue  | 39 +----------
 5 files changed, 193 insertions(+), 38 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/Order.vue

diff --git a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
new file mode 100644
index 0000000000..fb95d70342
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  const showLeftSidebar = ref(true)
+  const showRightSidebar = ref(true)
+</script>
+
+<template>
+  <VaLayout style="height: 500px">
+    <template #top>
+      <VaNavbar color="primary">
+        <template #left>
+          <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        Hello!
+        <template #right>
+          <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
+        </template>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showLeftSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <div class="p-4">
+        <h1>Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
+      </div>
+    </template>
+
+    <template #right>
+      <VaSidebar v-model="showRightSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #bottom>
+      Footer!
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Order.vue b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
new file mode 100644
index 0000000000..c3b89d26b7
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  const showLeftSidebar = ref(true)
+  const showRightSidebar = ref(true)
+</script>
+
+<template>
+  <VaLayout 
+    :left-order="1"
+    :top-order="2"
+    style="height: 500px"
+  >
+    <template #top>
+      <VaNavbar color="primary">
+        <template #left>
+          <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        Hello!
+        <template #right>
+          <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
+        </template>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showLeftSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <div class="p-4">
+        <h1>Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
+      </div>
+    </template>
+
+    <template #right>
+      <VaSidebar v-model="showRightSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #bottom>
+      <VaNavbar color="primary">
+        Footer
+      </VaNavbar>
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts
index 6ff1209906..7820740ce7 100644
--- a/packages/docs/page-config/ui-elements/layout/index.ts
+++ b/packages/docs/page-config/ui-elements/layout/index.ts
@@ -2,6 +2,8 @@ export default definePageConfig({
   blocks: [
     block.title('Layout.title'),
 
-    block.example('Default')
+    block.example('Default'),
+    block.example('AllSlots'),
+    block.example('Order'),
   ]
 })
\ No newline at end of file
diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index ea3041bcf6..3a2bbf80ae 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -61,5 +61,65 @@ const state = reactive({
         </template>
       </VaLayout>
     </VbCard>
+
+    <VbCard title="Left order">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :left-order="1"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+
+    <VbCard title="Left order 1, bottom order 2">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :left-order="1"
+        :bottom-order="2"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+        <template #right>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Rightbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+
+        <template #bottom>
+          <div style="background-color: var(--va-danger);">
+            Footer
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
   </VbDemo>
 </template>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 7cbfa1e2bc..0173a01bf7 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,5 +1,4 @@
 <template>
-  {{  templateArea }}
   <div class="va-layout">
     <div class="va-layout__top">
       <slot name="top" />
@@ -13,23 +12,9 @@
     <div class="va-layout__bottom">
       <slot name="bottom" />
     </div>
-
     <div class="va-layout__content">
       <slot name="content" />
     </div>
-    <!-- <slot name="top" />
-    <main class="va-layout__main">
-      <div class="va-layout__sidebar va-layout__child">
-        <slot name="left" />
-      </div>
-      <div class="va-layout__content va-layout__child">
-        <slot name="content" />
-      </div>
-      <div class="va-layout__sidebar va-layout__child">
-        <slot name="right" />
-      </div>
-    </main>
-    <slot name="bottom" /> -->
   </div>
 </template>
 
@@ -69,8 +54,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .va-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
+  grid-template-columns: v-bind(verticalTemplate);
+  grid-template-rows: v-bind(horizontalTemplate);
   grid-template-areas: v-bind(templateArea);
   gap: 0;
   height: 100%;
@@ -96,25 +81,5 @@ export default defineComponent({
     grid: content;
     overflow: auto;
   }
-
-  // &__main {
-  //   display: grid;
-  //   grid-template-columns: v-bind(horizontalTemplate);
-  //   grid-template-rows: 1fr;
-  //   height: 100%;
-
-  //   & > .va-layout__child {
-  //     height: 100%;
-  //     overflow: hidden;
-
-  //     &:empty {
-  //       display: none;
-  //     }
-  //   }
-
-  //   .va-layout__content {
-  //     overflow: auto;
-  //   }
-  // }
 }
 </style>