fix: Error when bundling in the docs workspace.

hotdogc1017 · hotdogc1017 · commit e233b3c69c9d · 2025-03-04T17:30:31.000+08:00
resolve #7
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,66 +1,65 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'NextUI Vue',
-  description: '基于NextUI Theme构建的Vue组件库',
-  head: [
-    ['link', { rel: 'icon', href: '/logo.png' }],
-  ],
+  title: "NextUI Vue",
+  description: "基于NextUI Theme构建的Vue组件库",
+  head: [["link", { rel: "icon", href: "/logo.png" }]],
+  ignoreDeadLinks: true,
 
   themeConfig: {
-    logo: '/logo.png',
+    logo: "/logo.png",
     search: {
-      provider: 'local',
+      provider: "local",
     },
-    outline: 'deep',
+    outline: "deep",
     nav: [
-      { text: '首页', link: '/' },
-      { text: '组件', link: '/markdown-examples' },
+      { text: "首页", link: "/" },
+      { text: "组件", link: "/markdown-examples" },
       {
-        text: '相关链接',
+        text: "相关链接",
         items: [
           {
-            text: 'NextUI',
-            link: 'https://nextui.org/',
+            text: "NextUI",
+            link: "https://nextui.org/",
           },
           {
-            text: 'Radix Vue',
-            link: 'https://www.radix-vue.com/',
+            text: "Radix Vue",
+            link: "https://www.radix-vue.com/",
           },
           {
-            text: 'IKUNUI',
-            link: 'https://laine001.github.io/ikun-ui/',
+            text: "IKUNUI",
+            link: "https://laine001.github.io/ikun-ui/",
           },
         ],
       },
     ],
 
     sidebar: [
       {
-        text: '起步',
+        text: "起步",
         items: [
-          { text: '安装', link: '/guide/installation' },
-          { text: '配置', link: '/guide/configuration' },
+          { text: "安装", link: "/guide/installation" },
+          { text: "配置", link: "/guide/configuration" },
         ],
       },
       {
-        text: '组件',
+        text: "组件",
         collapsed: true,
         items: [
-          { text: '按钮', link: '/components/button' },
-          { text: 'alert', link: '/components/alert' },
+          { text: "按钮", link: "/components/button" },
+          { text: "alert", link: "/components/alert" },
         ],
       },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/hotdogc1017/nextui-vue' },
+      { icon: "github", link: "https://github.com/hotdogc1017/nextui-vue" },
     ],
 
     footer: {
-      message: 'MIT Licensed',
-      copyright: '©hotdogc1017',
+      message: "MIT Licensed",
+      copyright: "©hotdogc1017",
     },
   },
-})
+});
diff --git a/docs/package.json b/docs/package.json
@@ -5,7 +5,8 @@
   "private": true,
   "packageManager": "pnpm@9.0.0",
   "scripts": {
-    "dev": "vitepress dev"
+    "dev": "vitepress dev",
+    "build": "vitepress build"
   },
   "devDependencies": {
     "@heroui/theme": "^2.4.6",
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "dev": "pnpm --filter \"./packages/components/*\" run dev",
     "doc": "pnpm run -C docs dev",
     "build": "pnpm -r build",
+    "build:doc": "pnpm -C docs build",
     "clean": "rimraf -g node_modules */node_modules **/node_modules **/dist",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --cache --fix",
diff --git a/packages/components/shared/package.json b/packages/components/shared/package.json
@@ -32,6 +32,7 @@
     "@vueuse/core": "^11.2.0"
   },
   "devDependencies": {
-    "@vue/tsconfig": "^0.5.1"
+    "@vue/tsconfig": "^0.5.1",
+    "vue": "^3.5.13"
   }
 }
diff --git a/packages/components/shared/src/useRipple.ts b/packages/components/shared/src/useRipple.ts
@@ -1,24 +1,24 @@
-import { useEventListener, type MaybeRefOrGetter } from "@vueuse/core";
+import { onBeforeMount, ref } from 'vue'
+import { type MaybeRefOrGetter, useEventListener } from '@vueuse/core'
 
-const rippleElement = document.createElement('span')
+const rippleElement = ref()
 
 function setCSSStyle(el: HTMLElement, style: CSSStyleDeclaration) {
   for (const [key, value] of Object.entries(style)) {
-    // @ts-ignore
-    el.style[key] = value
+    el.style[key as any] = value
   }
 }
 
 function ripple(event: MouseEvent) {
-  const target = event.currentTarget as HTMLElement;
+  const target = event.currentTarget as HTMLElement
   const { x, y, width, height } = target.getBoundingClientRect()
   const { clientX, clientY } = event
 
-  const newElement = rippleElement.cloneNode() as HTMLSpanElement
+  const newElement = rippleElement.value?.cloneNode() as HTMLSpanElement
   const style = {
-    position:'absolute',
+    position: 'absolute',
     left: `${clientX - x}px`,
-    top:`${clientY - y}px`,
+    top: `${clientY - y}px`,
     borderRadius: '50%',
     background: 'white',
     transform: `translate(-50%, -50%)`,
@@ -28,23 +28,31 @@ function ripple(event: MouseEvent) {
   setCSSStyle(newElement, style)
 
   const radius = Math.round(Math.hypot(width, height)) * 2
-  const animate = newElement.animate({
-    opacity: [0.5, 0],
-    width: ['0', `${radius}px`],
-    height: ['0', `${radius}px`],
-  }, {
-    duration: 400,
-    easing: 'ease-in',
-    fill: 'forwards',
-  })
+  const animate = newElement.animate(
+    {
+      opacity: [0.5, 0],
+      width: ['0', `${radius}px`],
+      height: ['0', `${radius}px`],
+    },
+    {
+      duration: 400,
+      easing: 'ease-in',
+      fill: 'forwards',
+    },
+  )
   animate.addEventListener('finish', () => {
     target.removeChild(newElement)
   })
   target.appendChild(newElement)
 }
 
-export function useRipple(target: MaybeRefOrGetter<HTMLElement | null | undefined>) {
-  useEventListener(target, 'click', ripple);
+export function useRipple(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+) {
+  onBeforeMount(() => {
+    rippleElement.value = document.createElement('span')
+  })
+  useEventListener(target, 'click', ripple)
 }
 
 export default useRipple
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@`
`32`	`32`	`"@vueuse/core": "^11.2.0"`
`33`	`33`	`},`
`34`	`34`	`"devDependencies": {`
`35`		`- "@vue/tsconfig": "^0.5.1"`
	`35`	`+ "@vue/tsconfig": "^0.5.1",`
	`36`	`+ "vue": "^3.5.13"`
`36`	`37`	`}`
`37`	`38`	`}`