Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/layout #3382

Merged
merged 11 commits into from
Jul 20, 2023
Merged

Feat/layout #3382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ac4e360
raw: layout
m0ksem Apr 19, 2023
0a4b1ff
raw: template grid areas
m0ksem Apr 28, 2023
133fbf3
Merge branch 'develop' into feat/layout
m0ksem Apr 28, 2023
38577f8
feat(layout): area order
m0ksem Apr 28, 2023
9909193
Merge branch 'develop' into pr/m0ksem/3382
m0ksem Jul 9, 2023
fad92d7
feat: layout with animations
m0ksem Jul 9, 2023
7f50c6d
feat: layout with absolute drawers
m0ksem Jul 9, 2023
d4496c9
feat(layout): use better prop config
m0ksem Jul 9, 2023
386483b
chore(layout): improve demo
m0ksem Jul 9, 2023
06df80a
fix(layout): improve docs
m0ksem Jul 9, 2023
4dbf6d3
feat(layout): improve docs demo
m0ksem Jul 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docs/modules/page-config/blocks/api/component-parser/index.ts
View file
Open in desktop
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
Open in desktop
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',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We agreed to add a couple of examples at the beginning, similarly to https://www.naiveui.com/en-US/os-theme/components/layout

It seems to me that ready layout is something the user would hope to bring back from docs.

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
Open in desktop
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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should improve default example a bit. Hamburger icon should stay left on mobile.

image

</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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading