Synchronized switching of all tabs

Author: Mitko Georgiev

README.md

@@ -47,6 +47,25 @@ __markdown content__
 
 ~~~
 
+### With options
+If you have a lot of tabbed sections in your documentation you might want
+to see all of them switch together when one is changed.
+To enable this behavior, just set the `sync` option to `true`:
+
+```js
+module.exports = {
+  // Your remaining configuration ...
+  plugins: [
+    [
+      'vuepress-plugin-element-tabs',
+      {
+        sync: true,
+      },
+    ],
+  ],
+}
+```
+
 ## Documents
 > Accepted Value Like That
 ~~~md

index.js

@@ -1,6 +1,9 @@
 const path = require('path')
 
 module.exports = (options, context) => ({
+  extendPageData($page) {
+    $page.elementTabsOptions = options
+  },
   enhanceAppFiles: [
     path.resolve(__dirname, './lib/client.js')
   ],
@@ -9,8 +12,8 @@ module.exports = (options, context) => ({
   },
   chainMarkdown (config) {
     config
-      .plugin('@superbiger/tabs')
-      .use(require('./lib/markdownItPlugin'), [options])
-      .end()
+    .plugin('@superbiger/tabs')
+    .use(require('./lib/markdownItPlugin'), [options])
+    .end()
   }
 })

lib/components/Tabs.vue

@@ -7,7 +7,14 @@
     },
     props: {
       type: String,
-      activeName: String,
+      activeName: {
+        type: String,
+        default () {
+          if (typeof localStorage !== 'undefined') {
+            return localStorage.getItem('vuepress-plugin-element-tabs@activeId');
+          }
+        }
+      },
       closable: Boolean,
       addable: Boolean,
       value: {},
@@ -65,7 +72,15 @@
       handleTabClick(tab, tabName, event) {
         if (tab.disabled) return;
         this.setCurrentName(tabName);
+        if (Array.every([
+          this.$page.elementTabsOptions,
+          this.$page.elementTabsOptions.sync,
+          typeof localStorage !== 'undefined'
+        ])) {
+          localStorage.setItem('vuepress-plugin-element-tabs@activeId', tabName);
+        }
         this.$emit('tab-click', tab, event);
+        this.$root.$emit('tab-change', tabName, tab, event);
       },
       handleTabRemove(pane, ev) {
         if (pane.disabled) return;
@@ -162,6 +177,13 @@
     },
 
     created() {
+      if (this.$page.elementTabsOptions.sync) {
+        this.$root.$on('tab-change', (tabName, tab, event) => {
+          this.setCurrentName(tabName)
+        });
+      } else if (typeof localStorage !== 'undefined') {
+        localStorage.removeItem('vuepress-plugin-element-tabs@activeId')
+      }
       if (!this.currentName) {
         this.setCurrentName('0');
       }