Skip to content

Commit

Permalink
Feat/layout (#3382)
Browse files Browse the repository at this point in the history 
* raw: layout

* raw: template grid areas

* feat(layout): area order

* feat: layout with animations

* feat: layout with absolute drawers

* feat(layout): use better prop config

* chore(layout): improve demo

* fix(layout): improve docs

* feat(layout): improve docs demo
  • Loading branch information
@m0ksem
m0ksem authored Jul 20, 2023
1 parent 591c597 commit 26948d6
Show file tree
Hide file tree
Showing 17 changed files with 1,001 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/docs/modules/page-config/blocks/api/component-parser/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ function convertComponentPropToApiDocs<T extends string>(propName: T, propOption
name: propName,
global: false,
description: '',
type: types.join(' | '),
types: types.join(' | '),
required: !!propOptionsRecord[propName].required,
default: getDefaultValue(propOptionsRecord[propName], types),
} as any
Expand Down
9 changes: 8 additions & 1 deletion packages/docs/page-config/navigationRoutes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,9 +267,16 @@ export const navigationRoutes: NavigationRoute[] = [
name: "color-input",
displayName: "Color Input",
},

{
category: 'Layout',
name: 'layout',
displayName: 'Layout',
meta: {
badge: navigationBadge.new('1.7.2'),
}
},
{
name: 'aspect-ratio',
displayName: 'Aspect Ratio',
meta: {
Expand Down
50 changes: 50 additions & 0 deletions packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<script setup lang="ts">
const showSidebar = ref(true)
</script>

<template>
<VaLayout
style="height: 500px"
:left="{ absolute: true}"
>
<template #top>
<VaNavbar color="primary" class="py-2">
<template #left>
<VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
</template>
<h4>LOGO</h4>
</VaNavbar>
</template>

<template #left>
<VaSidebar v-model="showSidebar">
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="home" />
<VaSidebarItemTitle>
Home
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="phone" />
<VaSidebarItemTitle>
About
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #content>
<main class="p-4">
<h3>Page content</h3>
<p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>

<p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
<p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
</main>
</template>
</VaLayout>
</template>
94 changes: 94 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,94 @@
<script setup lang="ts">
const showLeftSidebar = ref(true)
const showRightSidebar = ref(true)
</script>

<template>
<VaLayout style="height: 500px">
<template #top>
<VaNavbar color="primary" class="py-2">
<template #left>
<VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
</template>
<h4>LOGO</h4>
<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" />
<VaSidebarItemTitle>
Home
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="phone" />
<VaSidebarItemTitle>
About
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="bolt" />
<VaSidebarItemTitle>
Features
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="arrow_upward" />
<VaSidebarItemTitle>
Scroll back
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #content>
<main class="p-4">
<h3>Page content</h3>
<p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>

<p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
<p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
</main>
</template>

<template #right>
<VaSidebar v-model="showRightSidebar">
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="favorite" />
<VaSidebarItemTitle>
Favorite components
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="grade" />
<VaSidebarItemTitle>
Best practices
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #bottom>
<footer class="p-4 border-[var(--va-background-border)] border-t-2 text-right">
Footer
</footer>
</template>
</VaLayout>
</template>
47 changes: 47 additions & 0 deletions packages/docs/page-config/ui-elements/layout/examples/Default.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script setup lang="ts">
const showSidebar = ref(false)
</script>

<template>
<VaLayout style="height: 500px">
<template #top>
<VaNavbar color="primary" class="py-2">
<template #left>
<VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
</template>
<h4>LOGO</h4>
</VaNavbar>
</template>

<template #left>
<VaSidebar v-model="showSidebar">
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="home" />
<VaSidebarItemTitle>
Home
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="phone" />
<VaSidebarItemTitle>
About
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #content>
<main class="p-4">
<h3>Page content</h3>
<p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>

<p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
<p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
</main>
</template>
</VaLayout>
</template>
52 changes: 52 additions & 0 deletions packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script setup lang="ts">
const showSidebar = ref(true)
const breakpoints = useBreakpoint()
</script>

<template>
<VaLayout
style="height: 500px"
:left="{ absolute: breakpoints.smDown }"
>
<template #top>
<VaNavbar color="primary" class="py-2">
<template #left>
<VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
</template>
<h4>LOGO</h4>
</VaNavbar>
</template>

<template #left>
<VaSidebar v-model="showSidebar">
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="home" />
<VaSidebarItemTitle>
Home
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="phone" />
<VaSidebarItemTitle>
About
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #content>
<main class="p-4">
<h3>Page content</h3>
<p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>

<p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
<p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
</main>
</template>
</VaLayout>
</template>
92 changes: 92 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,92 @@
<script setup lang="ts">
const showLeftSidebar = ref(true)
const showRightSidebar = ref(true)
const orders = reactive({
left: 2,
top: 1,
right: 2,
bottom: 1,
})
</script>

<template>
<div class="mb-4 flex gap-2 justify-between flex-wrap">
<VaCounter v-model="orders.top" label="top" />
<VaCounter v-model="orders.left" label="left" />
<VaCounter v-model="orders.right" label="right" />
<VaCounter v-model="orders.bottom" label="bottom" />
</div>

<VaLayout
:left="{ order: orders.left }"
:top="{ order: orders.top }"
:right="{ order: orders.right }"
:bottom="{ order: orders.bottom }"
style="height: 500px"
>
<template #top>
<VaNavbar color="primary" class="py-2">
<template #left>
<VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
</template>
<h4>LOGO</h4>
<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" />
<VaSidebarItemTitle>
Home
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
<VaSidebarItem>
<VaSidebarItemContent>
<VaIcon name="phone" />
<VaSidebarItemTitle>
About
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>

<template #content>
<main class="p-4">
<h3>Page content</h3>
<p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>

<p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
<p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
</main>
</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 class="p-4 border-[var(--va-background-border)] border-t-2 text-right">
Footer
</footer>
</template>
</VaLayout>
</template>
Loading

0 comments on commit 26948d6

Please sign in to comment.