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

fix(theme): infer collapsible from collapsed #1865

Merged
merged 1 commit into from
Jan 31, 2023
Merged

fix(theme): infer collapsible from collapsed #1865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 __tests__/e2e/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
'/': [
{
text: 'Frontmatter',
collapsible: true,
collapsed: false,
items: [
{
text: 'Multiple Levels Outline',
Expand Down
8 changes: 4 additions & 4 deletions docs/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ function sidebarGuide() {
return [
{
text: 'Introduction',
collapsible: true,
collapsed: false,
items: [
{ text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
{ text: 'Getting Started', link: '/guide/getting-started' },
Expand All @@ -91,7 +91,7 @@ function sidebarGuide() {
},
{
text: 'Writing',
collapsible: true,
collapsed: false,
items: [
{ text: 'Markdown', link: '/guide/markdown' },
{ text: 'Asset Handling', link: '/guide/asset-handling' },
Expand All @@ -102,7 +102,7 @@ function sidebarGuide() {
},
{
text: 'Theme',
collapsible: true,
collapsed: false,
items: [
{ text: 'Introduction', link: '/guide/theme-introduction' },
{ text: 'Nav', link: '/guide/theme-nav' },
Expand All @@ -121,7 +121,7 @@ function sidebarGuide() {
},
{
text: 'Migrations',
collapsible: true,
collapsed: false,
items: [
{
text: 'Migration from VuePress',
Expand Down
11 changes: 3 additions & 8 deletions docs/config/theme-configs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,16 +147,11 @@ export type SidebarItem = {
items?: SidebarItem[]

/**
* If `true`, toggle button is shown.
* If not specified, group is not collapsible.
*
* @default false
*/
collapsible?: boolean

/**
* If `true`, collapsible group is collapsed by default.
* If `true`, group is collapsible and collapsed by default
*
* @default false
* If `false`, group is collapsible but expanded by default
*/
collapsed?: boolean
}
Expand Down
10 changes: 2 additions & 8 deletions docs/guide/theme-sidebar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,20 +149,15 @@ export default {

## Collapsible Sidebar Groups

By adding `collapsible` option to the sidebar group, it shows a toggle button to hide/show each section.
By adding `collapsed` option to the sidebar group, it shows a toggle button to hide/show each section.

```js
export default {
themeConfig: {
sidebar: [
{
text: 'Section Title A',
collapsible: true,
items: [...]
},
{
text: 'Section Title B',
collapsible: true,
collapsed: false,
items: [...]
}
]
Expand All @@ -178,7 +173,6 @@ export default {
sidebar: [
{
text: 'Section Title A',
collapsible: true,
collapsed: true,
items: [...]
}
Expand Down
4 changes: 2 additions & 2 deletions src/client/theme-default/components/VPSidebarItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ function onCaretClick() {
<component :is="textTag" class="text" v-html="item.text" />
</VPLink>

<div class="caret" role="button" @click="onCaretClick">
<VPIconChevronRight v-if="item.collapsible" class="caret-icon" />
<div v-if="item.collapsed != null" class="caret" role="button" @click="onCaretClick">
<VPIconChevronRight class="caret-icon" />
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/client/theme-default/composables/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export function useSidebarControl(
const collapsed = ref(false)

const collapsible = computed(() => {
return !!item.value.collapsible
return item.value.collapsed != null
})

const isLink = computed(() => {
Expand All @@ -152,15 +152,15 @@ export function useSidebarControl(
})

watchEffect(() => {
collapsed.value = !!(item.value.collapsible && item.value.collapsed)
collapsed.value = !!(collapsible.value && item.value.collapsed)
})

watchEffect(() => {
;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
})

function toggle() {
if (item.value.collapsible) {
if (collapsible.value) {
collapsed.value = !collapsed.value
}
}
Expand Down
11 changes: 3 additions & 8 deletions types/default-theme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,11 @@ export namespace DefaultTheme {
items?: SidebarItem[]

/**
* If `true`, toggle button is shown.
* If not specified, group is not collapsible.
*
* @default false
*/
collapsible?: boolean

/**
* If `true`, collapsible group is collapsed by default.
* If `true`, group is collapsible and collapsed by default
*
* @default false
* If `false`, group is collapsible but expanded by default
*/
collapsed?: boolean
}
Expand Down