🐞 fix(toc): subtitle cannot close toc

Big-Cake-jpg · Jul 12, 2024 · c24057b · c24057b
1 parent 3402c6a
commit c24057b
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "vite-plugin-compression2": "^1.1.2"
   },
   "devDependencies": {
+    "@mojojoejo/vite-plugin-purgecss": "^1.1.0",
     "esbuild-wasm": "^0.23.0",
     "vite-plugin-minify": "^1.5.2"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/valaxy-theme-custom/components/_partial/OutlineItem.vue b/valaxy-theme-custom/components/_partial/OutlineItem.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { MenuItem } from "valaxy";
+import { defineProps, defineEmits } from "vue";
 
 defineProps<{
   headers: MenuItem[];
   onClick: (e: MouseEvent) => void;
   root?: boolean;
 }>();
 
+const emit = defineEmits(['close-menu']);
+
 const handleClick = (e: MouseEvent, link: string) => {
   e.preventDefault();
   const anchor = link.slice(1);
@@ -17,6 +20,7 @@ const handleClick = (e: MouseEvent, link: string) => {
       behavior: "smooth",
     });
   }
+  emit('close-menu');
 };
 </script>
 
@@ -33,7 +37,7 @@ const handleClick = (e: MouseEvent, link: string) => {
           {{ title }}
         </a>
         <template v-if="children?.length">
-          <OutlineItem :headers="children" :on-click="onClick" />
+          <OutlineItem :headers="children" @click="handleClick($event, link)" @close-menu="$emit('close-menu')"/>
         </template>
       </li>
     </ul>

diff --git a/valaxy-theme-custom/components/_partial/RightBottomButton/TocButton.vue b/valaxy-theme-custom/components/_partial/RightBottomButton/TocButton.vue
@@ -4,6 +4,10 @@ import { ref } from "vue";
 
 const { headers, handleClick } = useOutline();
 const OutlineItemShow = ref(false);
+
+const closeOutline = () => {
+  OutlineItemShow.value = false;
+};
 </script>
 
 <template>
@@ -25,6 +29,7 @@ const OutlineItemShow = ref(false);
             :on-click="handleClick"
             root
             @click="OutlineItemShow = false"
+            @close-menu="closeOutline"
           />
         </div>
       </div>

diff --git a/valaxy.config.ts b/valaxy.config.ts
@@ -4,7 +4,8 @@ import type { ThemeConfig } from "valaxy-theme-custom";
 import { addonComponents } from "valaxy-addon-components";
 import { addonLightGallery } from "valaxy-addon-lightgallery";
 import compression from "vite-plugin-compression2";
-import { ViteMinifyPlugin } from 'vite-plugin-minify'
+import { ViteMinifyPlugin } from 'vite-plugin-minify';
+import pluginPurgeCss from "@mojojoejo/vite-plugin-purgecss";
 // import { VitePWA } from "vite-plugin-pwa";
 // import { addonMeting } from "valaxy-addon-meting";
 
@@ -37,6 +38,9 @@ export default defineValaxyConfig<ThemeConfig>({
         minifyJS: true,
         removeComments: true,
       }),
+      pluginPurgeCss({
+        variables: true,
+      }),
     ],
   },