feat: refine group

Author: zyy

Diff for: docs/default-theme-config/README.md

@@ -199,6 +199,12 @@ module.exports = {
 
 Sidebar groups are collapsable by default. You can force a group to be always open with `collapsable: false`.
 
+When a group is open, other groups at the same level will be automatically closed. You can isolate a group's open status with `isolated: true`. And then you can config its initial open status with `initialIsolatedOpen: true`.
+
+You can config a group's sidebarDepth with `sidebarDepth: 2`.
+
+You can nest sidebar groups.
+
 ### Multiple Sidebars
 
 If you wish to display different sidebars for different sections of content, first organize your pages into directories for each desired section:
@@ -333,7 +339,7 @@ module.exports = {
 ```
 
 ::: warning Note
-Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working. 
+Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working.
 :::
 
 For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).

Diff for: docs/zh/default-theme-config/README.md

@@ -164,7 +164,7 @@ module.exports = {
 }
 ```
 
-::: tip 
+::: tip
 值得一提的是，当你禁用此选项时，此功能的相应脚本将不会被加载，这是我们性能优化的一个小点。
 :::
 
@@ -196,6 +196,12 @@ module.exports = {
 
 侧边栏的每个子组默认是可折叠的，你可以设置 `collapsable: false` 来让一个组永远都是展开状态。
 
+当一个子组被展开时，跟它同级的其他子组会被折叠。你可以设置 `isolated: true` 来隔离一个组的展开状态。然后你可以设置 `initialIsolatedOpen: true` 来让一个被隔离的组在一开始就处于展开状态。
+
+你可以通过 `sidebarDepth: 2` 来设置一个组的 sidebarDepth。
+
+你可以嵌套组。
+
 ### 多个侧边栏
 
 如果你想为不同的页面组来显示不同的侧边栏，首先，将你的页面文件组织成下述的目录结构：

Diff for: lib/default-theme/Page.vue

@@ -180,7 +180,7 @@ function find (page, items, offset) {
   const res = []
   items.forEach(item => {
     if (item.type === 'group') {
-      res.push(...item.children || [])
+      res.push(...(item.descendants || item.children))
     } else {
       res.push(item)
     }

Diff for: lib/default-theme/Sidebar.vue

@@ -8,9 +8,7 @@
           v-if="item.type === 'group'"
           :item="item"
           :first="i === 0"
-          :open="i === openGroupIndex"
           :collapsable="item.collapsable"
-          @toggle="toggleGroup(i)"
         />
         <SidebarLink v-else :item="item"/>
       </li>
@@ -23,91 +21,63 @@
 import SidebarGroup from './SidebarGroup.vue'
 import SidebarLink from './SidebarLink.vue'
 import NavLinks from './NavLinks.vue'
-import { isActive } from './util'
 
 export default {
   components: { SidebarGroup, SidebarLink, NavLinks },
 
-  props: ['items'],
+  props: ['items']
+}
+</script>
 
-  data () {
-    return {
-      openGroupIndex: 0
-    }
-  },
+<style lang="stylus">
+@import './styles/config.styl';
 
-  created () {
-    this.refreshIndex()
-  },
+.sidebar {
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
 
-  watch: {
-    '$route' () {
-      this.refreshIndex()
-    }
-  },
+  a {
+    display: inline-block;
+  }
 
-  methods: {
-    refreshIndex () {
-      const index = resolveOpenGroupIndex(
-        this.$route,
-        this.items
-      )
-      if (index > -1) {
-        this.openGroupIndex = index
-      }
-    },
+  .nav-links {
+    display: none;
+    border-bottom: 1px solid $borderColor;
+    padding: 0.5rem 0 0.75rem 0;
 
-    toggleGroup (index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
-    },
+    a {
+      font-weight: 600;
+    }
 
-    isActive (page) {
-      return isActive(this.$route, page.path)
+    .nav-item, .repo-link {
+      display: block;
+      line-height: 1.25rem;
+      font-size: 1.1em;
+      padding: 0.5rem 0 0.5rem 1.5rem;
     }
   }
-}
 
-function resolveOpenGroupIndex (route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (item.type === 'group' && item.children.some(c => isActive(route, c.path))) {
-      return i
-    }
+  .sidebar-links {
+    padding: 1.5rem 0;
   }
-  return -1
 }
-</script>
 
-<style lang="stylus">
-@import './styles/config.styl'
+@media (max-width: $MQMobile) {
+  .sidebar {
+    .nav-links {
+      display: block;
 
-.sidebar
-  ul
-    padding 0
-    margin 0
-    list-style-type none
-  a
-    display inline-block
-  .nav-links
-    display none
-    border-bottom 1px solid $borderColor
-    padding 0.5rem 0 0.75rem 0
-    a
-      font-weight 600
-    .nav-item, .repo-link
-      display block
-      line-height 1.25rem
-      font-size 1.1em
-      padding 0.5rem 0 0.5rem 1.5rem
-  .sidebar-links
-    padding 1.5rem 0
+      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
+        top: calc(1rem - 2px);
+      }
+    }
 
-@media (max-width: $MQMobile)
-  .sidebar
-    .nav-links
-      display block
-      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
-        top calc(1rem - 2px)
-    .sidebar-links
-      padding 1rem 0
+    .sidebar-links {
+      padding: 1rem 0;
+    }
+  }
+}
 </style>

Diff for: lib/default-theme/SidebarGroup.vue

@@ -6,7 +6,7 @@
     <p
       class="sidebar-heading"
       :class="{ open }"
-      @click="$emit('toggle')"
+      @click="handleClickToggle"
     >
       <span>{{ item.title }}</span>
       <span
@@ -23,55 +23,126 @@
         v-if="open || !collapsable"
       >
         <li v-for="child in item.children">
-          <SidebarLink :item="child"/>
+          <SidebarGroup v-if="child.type === 'group'"
+            :item="child"
+            :collapsable="child.collapsable"/>
+          <SidebarLink v-else :item="child" :sidebarDepth="item.sidebarDepth"/>
         </li>
       </ul>
     </DropdownTransition>
   </div>
 </template>
 
 <script>
+import Vue from 'vue'
 import SidebarLink from './SidebarLink.vue'
 import DropdownTransition from './DropdownTransition.vue'
+import { isActive } from './util'
+
+const hub = new Vue()
 
 export default {
   name: 'SidebarGroup',
-  props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink, DropdownTransition }
+  components: { SidebarLink, DropdownTransition },
+  props: [
+    'item',
+    'first',
+    'collapsable'
+  ],
+  data () {
+    return {
+      open: this.item.isolated && this.item.initialIsolatedOpen || false
+    }
+  },
+  created () {
+    this.initToggleEvent()
+    this.refreshOpen()
+  },
+  watch: {
+    '$route' () {
+      this.refreshOpen()
+    }
+  },
+  methods: {
+    initToggleEvent () {
+      const onToggle = this.onToggle.bind(this)
+      hub.$on('toggle', onToggle)
+      this.$on('hook:destroyed', () => {
+        hub.$off('toggle', onToggle)
+      })
+    },
+    refreshOpen () {
+      const arr = this.item.descendants || this.item.children
+      if (arr.some(c => isActive(this.$route, c.path))) {
+        this.open = true
+      }
+    },
+    handleClickToggle () {
+      this.open = !this.open
+      if (this.open && !this.item.isolated) {
+        hub.$emit('toggle', { depth: this.item.depth, target: this })
+      }
+    },
+    onToggle ({ depth, target }) {
+      if (
+        target.$parent === this.$parent &&
+        depth === this.item.depth &&
+        !this.item.isolated &&
+        target !== this
+      ) {
+        this.open = false
+      }
+    }
+  }
 }
 </script>
 
 <style lang="stylus">
-.sidebar-group
-  &:not(.first)
-    margin-top 1em
-  .sidebar-group
-    padding-left 0.5em
-  &:not(.collapsable)
-    .sidebar-heading
-      cursor auto
-      color inherit
+.sidebar-group {
+  &:not(.first) {
+    margin-top: 1em;
+  }
+
+  .sidebar-group {
+    padding-left: 0.5em;
+  }
 
-.sidebar-heading
-  color #999
-  transition color .15s ease
-  cursor pointer
-  font-size 1.1em
-  font-weight bold
+  &:not(.collapsable) {
+    > .sidebar-heading {
+      cursor: auto;
+      color: inherit;
+    }
+  }
+}
+
+.sidebar-heading {
+  color: #999;
+  transition: color 0.15s ease;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-weight: bold;
   // text-transform uppercase
-  padding 0 1.5rem
-  margin-top 0
-  margin-bottom 0.5rem
-  &.open, &:hover
-    color inherit
-  .arrow
-    position relative
-    top -0.12em
-    left 0.5em
-  &:.open .arrow
-    top -0.18em
+  padding: 0 1.5rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+
+  &.open, &:hover {
+    color: inherit;
+  }
 
-.sidebar-group-items
-  transition height .1s ease-out
-  overflow hidden
+  .arrow {
+    position: relative;
+    top: -0.12em;
+    left: 0.5em;
+  }
+
+  &:.open .arrow {
+    top: -0.18em;
+  }
+}
+
+.sidebar-group-items {
+  transition: height 0.1s ease-out;
+  overflow: hidden;
+}
 </style>