From 635e154a1fc9dda8dfdf71abfd823eb1434bfd9b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 30 Jan 2023 17:45:12 +0530
Subject: [PATCH] fix(theme): infer collapsible from collapsed

---
 __tests__/e2e/.vitepress/config.ts                    |  2 +-
 docs/.vitepress/config.ts                             |  8 ++++----
 docs/config/theme-configs.md                          | 11 +++--------
 docs/guide/theme-sidebar.md                           | 10 ++--------
 src/client/theme-default/components/VPSidebarItem.vue |  4 ++--
 src/client/theme-default/composables/sidebar.ts       |  6 +++---
 types/default-theme.d.ts                              | 11 +++--------
 7 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/__tests__/e2e/.vitepress/config.ts b/__tests__/e2e/.vitepress/config.ts
index d115ca6e5a86..d0b971fcbd80 100644
--- a/__tests__/e2e/.vitepress/config.ts
+++ b/__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',
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 76bbe32820fe..8549383c709e 100644
--- a/docs/.vitepress/config.ts
+++ b/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',
diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index dd0b6e9f2927..b618af1ac511 100644
--- a/docs/config/theme-configs.md
+++ b/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
 }
diff --git a/docs/guide/theme-sidebar.md b/docs/guide/theme-sidebar.md
index 418cbf27694d..130d37a72fc9 100644
--- a/docs/guide/theme-sidebar.md
+++ b/docs/guide/theme-sidebar.md
@@ -149,7 +149,7 @@ 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 {
@@ -157,12 +157,7 @@ export default {
     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: [...]
       }
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index c2d693470d55..fde524732041 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/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>
 
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 83662f27198f..6e90e4ae9469 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/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,7 +152,7 @@ export function useSidebarControl(
   })
 
   watchEffect(() => {
-    collapsed.value = !!(item.value.collapsible && item.value.collapsed)
+    collapsed.value = !!(collapsible.value && item.value.collapsed)
   })
 
   watchEffect(() => {
@@ -160,7 +160,7 @@ export function useSidebarControl(
   })
 
   function toggle() {
-    if (item.value.collapsible) {
+    if (collapsible.value) {
       collapsed.value = !collapsed.value
     }
   }
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index fcbe8f040466..02bb8b9c51e7 100644
--- a/types/default-theme.d.ts
+++ b/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
   }