chore: use vitepress-plugin-component-demo and update packages

Author: yujinpan

docs/.vitepress/components/Demo.vue

@@ -45,3 +45,11 @@ const load = () => {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.el-table {
+  :deep(table) {
+    margin: 0;
+  }
+}
+</style>

docs/.vitepress/components/ScrollLoad.vue

@@ -1,42 +1,44 @@
-import path from 'path';
-import { defineConfig } from 'vitepress';
+import path from "path";
+import { defineConfig } from "vitepress";
+import vitePluginDemo from "vitepress-plugin-component-demo/vite-plugin";
 
 export default defineConfig({
   appearance: true,
-  base: '/el-table-infinite-scroll/',
-  title: 'el-table-infinite-scroll',
-  description: 'infinite scroll for el-table.',
+  base: "/el-table-infinite-scroll/",
+  title: "el-table-infinite-scroll",
+  description: "infinite scroll for el-table.",
+  lastUpdated: true,
 
   themeConfig: {
-    logo: '/logo.svg',
-    nav: [{ text: 'Guide', link: '/' }],
+    logo: "/logo.svg",
+    nav: [{ text: "Guide", link: "/" }],
     search: {
-      provider: 'local',
+      provider: "local",
     },
     socialLinks: [
       {
-        icon: 'github',
-        link: 'https://github.com/yujinpan/el-table-infinite-scroll',
+        icon: "github",
+        link: "https://github.com/yujinpan/el-table-infinite-scroll",
       },
     ],
     footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2019-2022 yujinpan',
+      message: "Released under the MIT License.",
+      copyright: "Copyright © 2019-2022 yujinpan",
     },
-    lastUpdatedText: 'Updated Date',
   },
 
   vite: {
     resolve: {
       alias: {
-        '@': path.resolve(__dirname, '../../src'),
+        "@": path.resolve(__dirname, "../../src"),
       },
     },
+    plugins: [vitePluginDemo()],
   },
 
   async transformHtml(code) {
     return code.replace(
-      '</body>',
+      "</body>",
       `
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-S66MPLRFJZ"></script>

docs/.vitepress/components/index.ts

@@ -1,16 +1,20 @@
-import type { EnhanceAppContext } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import ElTableInfiniteScroll from '@/index';
+import { enhanceApp } from 'vitepress-plugin-component-demo';
+
+import type { EnhanceAppContext } from 'vitepress';
 
 import { install as installElementPlus } from './element-plus';
-import { install as installComponents } from '../components';
+import ElTableInfiniteScroll from '@/index';
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }: EnhanceAppContext) {
+  enhanceApp(context: EnhanceAppContext) {
+    const { app } = context;
+
+    enhanceApp(context);
+
     app.use(ElTableInfiniteScroll);
 
     installElementPlus(app);
-    installComponents(app);
   },
 };

docs/.vitepress/components/raws-generate.mjs

@@ -46,7 +46,7 @@ import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
 
 Scroll table to bottom to load paginated data.
 
-<Demo component="ScrollLoad" />
+<demo name="ScrollLoad" />
 
 ## Options