update dependencies

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+cache

carousel/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
-import { usePage } from 'vueuse-components'
+// import { usePage } from 'vueuse-components'
+import usePage from './src/composables/use-page'
 import DCarousel from './src/carousel'
 import DCarouselIndicator from './src/components/carousel-indicator'
 import DCarouselPrev from './src/components/carousel-prev'

carousel/src/carousel.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, renderSlot, useSlots, watch, toRefs, ref } from 'vue'
-import { usePage } from 'vueuse-components'
+// import { usePage } from 'vueuse-components'
+import usePage from './composables/use-page'
 
 // Components
 import DCarouselIndicator from './components/carousel-indicator'

carousel/src/components/carousel-indicator.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, toRefs, watch } from 'vue'
-import { usePage } from 'vueuse-components'
+// import { usePage } from 'vueuse-components'
+import usePage from '../composables/use-page'
 import './carousel-indicator.scss'
 
 export default defineComponent({

docs/.vitepress/config.mts

@@ -0,0 +1,51 @@
+import { demoBlockPlugin, demoblockVitePlugin } from 'vitepress-theme-demoblock'
+
+const sidebar = [
+  { text: "快速开始", link: "/" },
+  {
+    text: "特性", items: [
+      { text: "基本用法", link: "/features/basic/" },
+      { text: "自动播放", link: "/features/autoplay/" },
+      { text: "掘金活动", link: "/features/juejin-events/" },
+      { text: "指示器位置", link: "/features/indicator-position/" },
+      { text: "自定义指示器", link: "/features/custom-indicator/" },
+      { text: "分页器位置", link: "/features/pagination-position/" },
+      { text: "自定义分页器", link: "/features/custom-pagination/" },
+      { text: "手风琴式折叠卡片", link: "/features/collapse-card/" },
+      { text: "华为", link: "/features/huawei-events/" },
+      { text: "B站", link: "/features/bilibili-events/" },
+      { text: "QQ音乐", link: "/features/qqmusic/" },
+      { text: "LeetCode", link: "/features/leetcode-card/" },
+    ]
+  }
+]
+
+const nav = [
+  { text: 'Github', link: 'https://github.com/kagol/vue-carousel' }
+]
+
+const config = {
+  base: '/vue-carousel/',
+  title: 'Vue Carousel',
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/assets/logo.svg' }],
+  ],
+  themeConfig: {
+    sidebar,
+    nav,
+    logo: '/assets/logo.svg',
+  },
+  markdown: {
+    config: (md) => {
+      // 这里可以使用 markdown-it 插件，vitepress-theme-demoblock就是基于此开发的
+      md.use(demoBlockPlugin, {
+        cssPreprocessor: 'scss'
+      })
+    }
+  },
+  vite: {
+    plugins: [demoblockVitePlugin()]
+  }
+}
+
+export default config

docs/.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
-import Theme from 'vitepress/dist/client/theme-default'
+import Theme from 'vitepress/dist/client/theme-default/index'
 import DCarousel from '../../../carousel'
 
 import { registerComponents } from './register-components.js'
-import 'vitepress-theme-demoblock/theme/styles/index.css'
+import 'vitepress-theme-demoblock/dist/theme/styles/index.css'
 import './index.scss'
 
 export default {

docs/.vitepress/theme/register-components.js

@@ -1,5 +1,5 @@
-import Demo from 'vitepress-theme-demoblock/components/Demo.vue'
-import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'
+import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue'
+import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue'
 export function registerComponents(app) {
   app.component('Demo', Demo)
   app.component('DemoBlock', DemoBlock)

docs/features/autoplay/index.md

@@ -1,6 +1,9 @@
 # 自动播放
 
-:::demo `autoplay`可以设置是否需要自动播放，默认值为`true`，默认每隔3000毫秒切换一次，可以通过设置`interval`自定义自动播放的间隔时间。
+`autoplay`可以设置是否需要自动播放，默认值为`true`，默认每隔3000毫秒切换一次，可以通过设置`interval`自定义自动播放的间隔时间。
+
+:::demo
+
 
 ```vue
 <template>

docs/features/basic/index.md

@@ -1,6 +1,10 @@
 # 基本用法
 
-:::demo `Carousel`组件提供了默认插槽，直接将元素放在`<DCarousel>`即可实现轮播效果。
+
+`Carousel`组件提供了默认插槽，直接将元素放在`<DCarousel>`即可实现轮播效果。
+
+:::demo
+
 
 ```vue
 <template>

docs/features/collapse-card/index.md

@@ -1,6 +1,8 @@
 ### 手风琴式折叠卡片
 
-:::demo `DCarouselIndicator`指示器组件提供了默认插槽，可以单独使用它实现自定义指示器效果，比如手风琴式折叠卡片。
+`DCarouselIndicator`指示器组件提供了默认插槽，可以单独使用它实现自定义指示器效果，比如手风琴式折叠卡片。
+
+:::demo
 
 ```vue
 <template>

docs/features/custom-indicator/index.md

@@ -1,6 +1,8 @@
 # 自定义指示器
 
-:::demo 如果`Carousel`内置的`CarouselIndicator`指示器不满足你的要求，还可以定制自己的指示器。
+如果`Carousel`内置的`CarouselIndicator`指示器不满足你的要求，还可以定制自己的指示器。
+
+:::demo
 
 ```vue
 <template>

docs/features/indicator-position/index.md

@@ -1,6 +1,8 @@
 # 指示器位置
 
-:::demo `<DCarousel>`组件将其中的指示器子组件暴露出来，并提供了`indicator`插槽，因此可以随意调整`DCarouselIndicator`的位置，比如放在左下角。
+`<DCarousel>`组件将其中的指示器子组件暴露出来，并提供了`indicator`插槽，因此可以随意调整`DCarouselIndicator`的位置，比如放在左下角。
+
+:::demo
 
 ```vue
 <template>

docs/features/juejin-events/index.md

@@ -1,6 +1,8 @@
 # 掘金活动
 
-:::demo `<DCarousel>`元素里面可以放任意元素，比如放上两张图片就是掘金活动的效果。
+`<DCarousel>`元素里面可以放任意元素，比如放上两张图片就是掘金活动的效果。
+
+:::demo
 
 ```vue
 <template>

docs/features/leetcode-card/index.md

@@ -2,7 +2,9 @@
 
 ### 首页轮播
 
-:::demo `DCarousel`和`DCarouselIndicator`组合使用，可以很方便地实现 LeetCode 的卡片轮播效果。
+`DCarousel`和`DCarouselIndicator`组合使用，可以很方便地实现 LeetCode 的卡片轮播效果。
+
+:::demo
 
 ```vue
 <template>