fix: fix dirs bug

Author: eonova

.github/workflows/test.yml renamed to .github/workflows/prebuild.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Prebuild
 
 on:
   push:
@@ -37,3 +37,6 @@ jobs:
       - name: Build
         run: pnpm run build
 
+      - name: Build Docs
+        run: pnpm run docs:build
+

docs/.vitepress/theme/index.ts

@@ -4,6 +4,7 @@ import DefaultTheme from 'vitepress/theme'
 import './style.css'
 
 import VueDirectives from '../../../src'
+
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {

docs/en/api-examples.md

@@ -10,6 +10,7 @@ Adding Tooltips to Elements
 import { ref } from 'vue'
 
 const show = ref('Reminder 2')
+const count = ref(0)
 </script>
 
 <div :style="{
@@ -41,6 +42,7 @@ const show = ref('Reminder 2')
 import { ref } from 'vue'
 
 const show = ref('Reminder 2')
+const count = ref(0)
 </script>
 
 <template>

docs/en/directives/.vscode/settings.json

@@ -10,6 +10,7 @@
 import { ref } from 'vue'
 
 const show = ref('提示信息2')
+const count = ref(0)
 </script>
 
 <div :style="{
@@ -41,6 +42,7 @@ const show = ref('提示信息2')
 import { ref } from 'vue'
 
 const show = ref('提示信息2')
+const count = ref(0)
 </script>
 
 <template>

docs/en/directives/v-tooltip.md

@@ -1,8 +1,8 @@
 {
   "name": "@ileostar/v3-directives",
+  "type": "module",
   "version": "0.0.5",
   "packageManager": "[email protected]",
-  "type": "module",
   "description": "Custom Vue3 directives",
   "author": "ileostar <[email protected]> (https://github.com/ileostar)",
   "license": "MIT",
@@ -15,17 +15,17 @@
     "directives",
     "vue3"
   ],
-  "main": "dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch & eslint-flat-config-viewer",

docs/zh/directives/v-tooltip.md

@@ -5,28 +5,30 @@ const ANIMATIONTIME = 500 // 500毫秒
 let distance: number | null = null
 let animationtime: number | null = null
 const map = new WeakMap()
-const ob = new IntersectionObserver((entries) => {
-  for (const entrie of entries) {
-    if (entrie.isIntersecting) {
-      const animation = map.get(entrie.target)
-      if (animation) {
-        animation.play()
-        ob.unobserve(entrie.target)
-      }
-    }
-  }
-})
+
 function isBelowViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   return rect.top - (distance || DISTANCE) > window.innerHeight
 }
 
+function handleScroll() {
+  const elements = document.querySelectorAll('[v-slide-in]')
+  elements.forEach((el: any) => {
+    if (isBelowViewport(el)) return
+
+    const animation = map.get(el)
+    if (animation) {
+      animation.play()
+      el.removeAttribute('v-slide-in')
+    }
+  })
+}
+
 const vSlideIn: Directive = {
   mounted(el: HTMLElement, binding: any) {
-    if (binding.value) { // 传值？
-      console.log(binding.value)// 打印
-      distance = binding.value.px// 接收指定距离
-      animationtime = binding.value.time// 接收指定时间
+    if (binding.value) {
+      distance = binding.value.px // 接收指定距离
+      animationtime = binding.value.time // 接收指定时间
     }
     if (!isBelowViewport(el))
       return
@@ -50,11 +52,14 @@ const vSlideIn: Directive = {
     )
     animation.pause()
     map.set(el, animation)
-    ob.observe(el)
+    el.setAttribute('v-slide-in', '') // 添加标记，表示需要进行动画
+
+    window.addEventListener('scroll', handleScroll)
   },
 
   unmounted(el: HTMLElement) {
-    ob.unobserve(el)
+    map.delete(el)
+    window.removeEventListener('scroll', handleScroll)
   },
 }