chore(layout): improve demo

epicmaxco · Jul 9, 2023 · 386483b · 386483b
1 parent d4496c9
commit 386483b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -208,8 +208,8 @@ const state = reactive({
 
     <VbCard title="Absolute">
       <VaLayout
-        style="width: 300px; height: 300px;"
-        :right="{ order: 1 }"
+        style="width: 300px; height: 300px; margin-bottom: 2rem;"
+        :left="{ absolute: 1 }"
       >
         <template #top>
           <div>
@@ -228,7 +228,6 @@ const state = reactive({
             style="
               height: 100%;
               transition: width 0.3s ease-in-out;
-              position: absolute;
             "
             :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
           >
@@ -238,7 +237,7 @@ const state = reactive({
 
       <VaLayout
         style="width: 300px; height: 300px;"
-        :right="{ absolute: true, order: 1 }"
+        :right="{ absolute: true }"
       >
         <template #top>
           <div>
@@ -266,9 +265,9 @@ const state = reactive({
       </VaLayout>
     </VbCard>
 
-    <VbCard title="Absolute Right">
+    <VbCard title="Absolute with Order">
       <VaLayout
-        style="width: 300px; height: 300px;"
+        style="width: 300px; height: 300px; margin-bottom: 2rem;"
         :right="{ absolute: true }"
       >
         <template #top>
@@ -340,6 +339,7 @@ const state = reactive({
       &__area {
         &--left {
           background: #3a86ff;
+          color: white;
         }
 
         &--top {
@@ -349,10 +349,16 @@ const state = reactive({
 
         &--right {
           background: #ff006e;
+          color: white;
         }
 
         &--bottom {
           background: #fb5607;
+          color: white;
+        }
+
+        &--content {
+          color: white;
         }
       }
     }

diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue'
+import { defineComponent, computed } from 'vue'
 import {
   useGridTemplateArea,
   AreaName,
@@ -111,6 +111,7 @@ export default defineComponent({
     }
   }
 
+  // Wrapper is responsible for positioning correctly absolute areas
   &__area-wrapper {
     .va-layout__area {
       position: absolute;
@@ -119,6 +120,11 @@ export default defineComponent({
         right: 0;
         height: 100%;
       }
+
+      &--left {
+        left: 0;
+        height: 100%;
+      }
     }
   }
 }