Upgrade vuepress to beta.15

- use official dark theme
- fix: Fix Tabs

docs/.vuepress/theme/components/Tab.vue

@@ -22,11 +22,16 @@ export default defineComponent({
     let tag = this.title;
     return {
       tabID: tag,
-      labelID: tag + "-" + "label",
     };
   },
-  beforeMount() {
-    this.$parent.$data.children.push(this);
+  mounted() {
+    this.tabID = "tab-" + Math.random().toString(36).substring(2);
+    this.$parent.$data.children.push({ id: this.tabID, title: this.title });
+  },
+  computed: {
+    labelID(): String {
+      return this.tabID + "-label";
+    },
   },
 });
 </script>

docs/.vuepress/theme/components/Tabs.vue

@@ -4,9 +4,9 @@
       <div :id="tag" class="nav nav-pills" role="tablist">
         <button
           v-for="tab of children"
-          :id="tab.labelID"
-          :aria-controls="tab.tabID"
-          :data-bs-target="'#' + tab.tabID"
+          :id="tab.id + '-label'"
+          :aria-controls="tab.id"
+          :data-bs-target="'#' + tab.id"
           aria-selected="false"
           class="nav-link"
           data-bs-toggle="tab"
@@ -41,13 +41,10 @@ export default defineComponent({
     this.children = [];
   },
   mounted() {
-    this.$nextTick(function () {
-      import("bootstrap").then((b) => {
-        let triggerEl = document.getElementById(
-          this.children["0"].$data.labelID
-        );
-        new b.Tab(triggerEl).show();
-      });
+    this.$nextTick(async function () {
+      const bootstrap = await import("bootstrap");
+      let triggerEl = document.getElementById(this.children["0"].id + "-label");
+      new bootstrap.Tab(triggerEl).show();
     });
   },
   computed: {

docs/.vuepress/theme/components/ThemeToggle.vue

@@ -1,46 +0,0 @@
-<template>
-  <nav v-if="enable" class="navbar-links toggle-bar">
-    <div class="navbar-links-item">
-      <a class="nav-link" @click.prevent="toggleTheme">{{ text }}</a>
-    </div>
-  </nav>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useThemeLocaleData } from "@vuepress/plugin-theme-data/lib/client";
-import { ToggleOptions } from "../types";
-
-export default defineComponent({
-  computed: {
-    enable: function (): Boolean {
-      const option = useThemeLocaleData<ToggleOptions>();
-      return option.value.enableToggle;
-    },
-    text: function (): String {
-      const option = useThemeLocaleData<ToggleOptions>();
-      return option.value.ToggleText;
-    },
-  },
-  methods: {
-    toggleTheme() {
-      const html = document.getElementsByTagName("html")[0];
-
-      let theme = html.getAttribute("theme");
-      if (theme == "light") {
-        html.setAttribute("theme", "dark");
-      } else if (theme == "dark") {
-        html.setAttribute("theme", "light");
-      } else {
-        html.setAttribute("theme", "light");
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.toggle-bar {
-  margin-left: 1.5rem;
-}
-</style>