Merge pull request #276 from InhiblabCore/alpha

Alpha for 2.4.0  🏎️

Author: NelsonYong

docs/.vitepress/config/en.ts

@@ -114,7 +114,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
     {
       text: 'Guide',
       items: [
-        { text: 'Introduction', link: "/guide" },
+        { text: 'Introduction', link: "/guide/introduction" },
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: '🫶 Migrate to v2 version', link: '/guide/migrate' }
       ],
@@ -137,6 +137,7 @@ export const en = defineConfig({
           ...sidebarHooks(),
         ]
       },
+      '/components/': sidebarComponents(),
     },
 
     editLink: {
@@ -155,9 +156,9 @@ function nav(): DefaultTheme.NavItem[] {
   return [
     {
       text: 'Guide',
-      activeMatch: '/guide/',
+      activeMatch: '^/guide/',
       items: [
-        { text: 'Introduction', link: '/guide' },
+        { text: 'Introduction', link: '/guide/introduction' },
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: '🫶 Migrate to v2 version', link: '/guide/migrate' }
       ]
@@ -167,6 +168,11 @@ function nav(): DefaultTheme.NavItem[] {
       link: '/hooks/useRequest/quick-start',
       activeMatch: '/hooks'
     },
+    {
+      text: "Components",
+      link: '/components/guide',
+      activeMatch: '/components/'
+    },
     {
       text: '🤺 Playground',
       link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
@@ -265,7 +271,7 @@ export function sidebarHooks(): DefaultTheme.SidebarItem[] {
     {
       text: 'Advanced',
       items: [
-        { text: 'useEventEmitter', link: '/useEventEmitter/' },
+        { text: 'useEventEmitter', link: 'useEventEmitter' },
         {
           text: 'useAsyncOrder',
           link: 'useAsyncOrder',
@@ -286,3 +292,19 @@ export function sidebarHooks(): DefaultTheme.SidebarItem[] {
   })
 }
 
+
+
+export function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Components',
+      items: [
+        {
+          text: 'Guide',
+          link: '/components/guide',
+        },
+        { text: 'useRequest', link: '/components/useRequest' },
+      ],
+    }
+  ]
+}

docs/.vitepress/config/factory.ts

@@ -1,4 +1,4 @@
-import fsExtra from 'fs-extra';
+import * as fs from 'node:fs';
 import { dirname, join, sep } from 'path';
 import { MarkdownRenderer } from 'vitepress';
 
@@ -48,13 +48,13 @@ export function genDemoByCode(
     while (true) {
       demoName = `demo-${fenceIndex++}.vue`;
       demoPath = join(dirname(path), 'dist', demoName);
-      if (!fsExtra.existsSync(demoPath)) {
+      if (!fs.existsSync(demoPath)) {
         break;
       }
     }
 
-    fsExtra.createFileSync(demoPath);
-    fsExtra.writeFileSync(demoPath, code);
+    fs.writeFileSync(demoPath, '');
+    fs.writeFileSync(demoPath, code);
 
     codeFileMap[code] = {
       demoName,

docs/.vitepress/config/zh.ts

@@ -123,6 +123,19 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
     }
   ]
 }
+
+function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Components',
+      items: [
+        { text: 'Guide', link: '/zh/components/guide' },
+        { text: 'useRequest', link: '/zh/components/useRequest' },
+      ],
+    }
+  ]
+}
+
 export const zh = defineConfig({
   lang: 'zh-Hans',
   description: '高性能的 Vue 组合式函数库',
@@ -138,7 +151,8 @@ export const zh = defineConfig({
           ...siderbarUseRequestPlugin(),
           ...sidebarHooks()
         ]
-      }
+      },
+      '/zh/components/': sidebarComponents(),
     },
 
     editLink: {
@@ -182,18 +196,23 @@ function nav(): DefaultTheme.NavItem[] {
   return [
     {
       text: '指南',
-      activeMatch: '/zh/guide/',
+      activeMatch: '^/zh/guide/',
       items: [
-        { text: '介绍', link: '/zh/guide' },
+        { text: '介绍', link: '/zh/guide/introduction' },
         { text: '开始使用', link: '/zh/guide/getting-started' },
         { text: '🫶 迁移到 v2 版本', link: '/zh/guide/migrate' }
       ]
     },
     {
-      text: 'Hooks',
+      text: 'Hooks 函数',
       link: '/zh/hooks/useRequest/quick-start',
       activeMatch: '/zh/hooks'
     },
+    {
+      text: '函数组件',
+      link: '/zh/components/guide',
+      activeMatch: '/zh/components/'
+    },
     {
       text: '🤺 演武场',
       link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',

docs/.vitepress/plugins/applyMdPlugin.ts

@@ -1,10 +1,10 @@
 import { parseProps } from "../config/utils";
 import { resolve } from 'path'
-import fsExtra from 'fs-extra'
+import * as fs from 'node:fs'
 import { getDemoComponent } from "../config/factory";
 export const applyMdPlugin = (md: any) => {
   const htmlBlock = md.renderer.rules.html_block!
-  md.renderer.rules.html_block = function (tokens, idx, options, env, self) {
+  md.renderer.rules.html_block = function (tokens: any, idx: any, options: any, env: any, self: any) {
     const token = tokens[idx];
     const content = token.content.trim();
     const { path } = env;
@@ -17,7 +17,7 @@ export const applyMdPlugin = (md: any) => {
     }
 
     const srcPath = resolve(process.cwd(), "docs", "demo", props.src);
-    const code = fsExtra.readFileSync(srcPath, 'utf8');
+    const code = fs.readFileSync(srcPath, 'utf8');
     const demoScripts = getDemoComponent(md, env, {
       title: props?.title,
       desc: props?.desc,

docs/demo/useEventEmitter/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <vhp-button @click="refRouter = !refRouter" style="margin-bottom: 16px;">
+      toggle router</vhp-button
+    >
+    <demo v-if="refRouter" />
+    <div v-else>
+      SHOW TEXT
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import Demo from './demo.vue'
+
+  const refRouter = ref(true)
+</script>

docs/demo/useEventEmitter/DemoA.vue

@@ -6,21 +6,30 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { onMounted, onUnmounted, ref } from 'vue'
 
   import { useEventEmitter } from 'vue-hooks-plus'
+  import { EventEmitter } from 'vue-hooks-plus/src/useEventEmitter/event'
 
-  const event = useEventEmitter({ global: true })
+  const event_ = useEventEmitter({ global: true })
   const props = defineProps<{
-    event: any
+    event: EventEmitter<any>
   }>()
   const count = ref(0)
 
-  props.event.useSubscription('change', () => {
-    count.value += 1
+  let unsubscribe: (() => void) | null = null
+
+  onMounted(() => {
+    unsubscribe = props.event.subscribe('change', () => {
+      console.log('props', props.event)
+      count.value += 1
+    })
+  })
+  onUnmounted(() => {
+    if (unsubscribe) unsubscribe()
   })
 
   const changeGlobal = () => {
-    event.emit('change')
+    event_.emit('change')
   }
 </script>

docs/demo/useEventEmitter/GlobalDemo.vue

@@ -10,7 +10,8 @@
   const event = useEventEmitter({ global: true })
   const globalCount = ref(0)
 
-  event.useSubscription('change', () => {
+  event.subscribe('change', () => {
+    console.log('global', event)
     globalCount.value += 1
   })
 </script>

docs/demo/useEventEmitter/demo.vue

@@ -27,7 +27,6 @@
   }
 
   const changeA = () => {
-    // globalCount.value += 1
     eventA.emit('change')
   }
 </script>

docs/demo/useMouse/demo.vue

@@ -3,10 +3,13 @@
     <p>Client - x: {{ mouse.clientX }}, y: {{ mouse.clientY }}</p>
     <p>Page - x: {{ mouse.pageX }}, y: {{ mouse.pageY }}</p>
     <p>Screen - x: {{ mouse.screenX }}, y: {{ mouse.screenY }}</p>
+    <UseMouse v-slot="{ clientX, clientY }">
+      <p>component use: {{ clientX }}, y: {{ clientY }}</p>
+    </UseMouse>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useMouse } from 'vue-hooks-plus'
+  import { useMouse, UseMouse } from 'vue-hooks-plus'
   const mouse = useMouse()
 </script>

docs/demo/useMouse/demo1.vue

@@ -21,11 +21,39 @@
       {{ mouse.elementH }}
     </p>
   </div>
+
+  <h3>UseMouse Component</h3>
+  <UseMouse>
+    <template #default="{ elementX, elementY,elementPosX,elementPosY,elementW,elementH }">
+      <p>Mouse In Element - x: {{ elementX }}, y: {{ elementY }}</p>
+      <p> Element Position - x: {{ elementPosX }}, y: {{ elementPosY }} </p>
+      <p>
+        Element Dimensions - width: {{ elementW }}, height:
+        {{ elementH }}
+      </p>
+    </template>
+    <template #target>
+      <div
+        ref="domRef"
+        :style="{
+          width: '200px',
+          height: '200px',
+          backgroundColor: 'gray',
+          opacity: 0.85,
+          color: 'white',
+          lineHeight: '200px',
+          textAlign: 'center',
+        }"
+      >
+        element
+      </div>
+    </template>
+  </UseMouse>
 </template>
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useMouse } from 'vue-hooks-plus'
+  import { useMouse, UseMouse } from 'vue-hooks-plus'
   const domRef = ref(null)
   const mouse = useMouse(domRef)
 </script>