fix(theme): infer collapsible from collapsed (#1865)

BREAKING CHANGE: `collapsible` is dropped from sidebar, use `collapsed` instead

Author: brc-dd

__tests__/e2e/.vitepress/config.ts

@@ -4,7 +4,7 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
   '/': [
     {
       text: 'Frontmatter',
-      collapsible: true,
+      collapsed: false,
       items: [
         {
           text: 'Multiple Levels Outline',

docs/.vitepress/config.ts

@@ -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' },
@@ -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' },
@@ -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' },
@@ -121,7 +121,7 @@ function sidebarGuide() {
     },
     {
       text: 'Migrations',
-      collapsible: true,
+      collapsed: false,
       items: [
         {
           text: 'Migration from VuePress',

docs/config/theme-configs.md

@@ -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
 }

docs/guide/theme-sidebar.md

@@ -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: [...]
       }
     ]
@@ -178,7 +173,6 @@ export default {
     sidebar: [
       {
         text: 'Section Title A',
-        collapsible: true,
         collapsed: true,
         items: [...]
       }

src/client/theme-default/components/VPSidebarItem.vue

@@ -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>
 

src/client/theme-default/composables/sidebar.ts

@@ -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(() => {
@@ -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
     }
   }

types/default-theme.d.ts

@@ -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
   }