Skip to content

Commit

Permalink
feat(layout): area order
Browse files Browse the repository at this point in the history
  • Loading branch information
@m0ksem
m0ksem committed Apr 28, 2023
1 parent 133fbf3 commit 38577f8
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 38 deletions.
61 changes: 61 additions & 0 deletions packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 67 additions & 0 deletions packages/docs/page-config/ui-elements/layout/examples/Order.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 3 additions & 1 deletion packages/docs/page-config/ui-elements/layout/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ export default definePageConfig({
blocks: [
block.title('Layout.title'),

block.example('Default')
block.example('Default'),
block.example('AllSlots'),
block.example('Order'),
]
})
60 changes: 60 additions & 0 deletions packages/ui/src/components/va-layout/VaLayout.demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
39 changes: 2 additions & 37 deletions packages/ui/src/components/va-layout/VaLayout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<template>
{{ templateArea }}
<div class="va-layout">
<div class="va-layout__top">
<slot name="top" />
Expand All @@ -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>

Expand Down Expand Up @@ -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%;
Expand All @@ -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>

0 comments on commit 38577f8

Please sign in to comment.