Merge branch 'master' into dev

InhiblabCore · Nov 11, 2023 · 050e601 · 050e601
2 parents 164095f + 064fe31
commit 050e601
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 29 deletions.
diff --git a/packages/hooks/docs/.vitepress/router.ts b/packages/hooks/docs/.vitepress/router.ts
@@ -57,7 +57,7 @@ const Router = [
       { text: 'useDarkMode', link: '/useDarkMode/' },
       { text: 'useFavicon', link: '/useFavicon/' },
       { text: 'useFocusWithin', link: '/useFocusWithin/' },
-      { text: 'useFullscreen', link: '/useFullscreen/' },
+      { text: 'useFullscreen', link: '/useFull/' },
       { text: 'useHover', link: '/useHover/' },
       { text: 'useInViewport', link: '/useInViewport/' },
       { text: 'useKeyPress', link: '/useKeyPress/' },

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-hooks-plus",
-	"version": "1.8.4",
+	"version": "1.8.5",
 	"description": "Vue hooks library",
 	"files": [
 		"dist",

diff --git a/packages/hooks/src/useDrop/index.en-US.md b/packages/hooks/src/useDrop/index.en-US.md
@@ -70,7 +70,7 @@ useDrop<T>(
 | --- | --- | --- | --- |
 | onText | The callback when text is dropped or pasted | `(text: string, e: DragEvent) => void` | - |
 | onFiles | The callback when file is dropped or pasted | `(files: File[], e: DragEvent) => void` | - |
-| onUri | The callback when uri is dropped or pasted | `(text: string, e: DragEvent) => void` | - |
+| onUrl | The callback when uri is dropped or pasted | `(text: string, e: DragEvent) => void` | - |
 | onDom | The callback when DOM is dropped or pasted | `(content: any, e: DragEvent) => void` | - |
 | onDrop | The callback when any is dropped | `(e: DragEvent) => void` | - |
 | onPaste | The callback when any is pasted | `(e: DragEvent) => void` | - |

diff --git a/packages/hooks/src/useDrop/index.zh-CN.md b/packages/hooks/src/useDrop/index.zh-CN.md
@@ -70,7 +70,7 @@ useDrop<T>(
 | ----------- | ------------------------------ | --------------------------------------- | ------ |
 | onText      | 拖拽/粘贴文字的回调            | `(text: string, e: DragEvent) => void`  | -      |
 | onFiles     | 拖拽/粘贴文件的回调            | `(files: File[], e: DragEvent) => void` | -      |
-| onUri       | 拖拽/粘贴链接的回调            | `(text: string, e: DragEvent) => void`  | -      |
+| onUrl       | 拖拽/粘贴链接的回调            | `(text: string, e: DragEvent) => void`  | -      |
 | onDom       | 拖拽/粘贴自定义 DOM 节点的回调 | `(content: any, e: DragEvent) => void`  | -      |
 | onDrop      | 拖拽任意内容的回调             | `(e: DragEvent) => void`                | -      |
 | onPaste     | 粘贴内容的回调                 | `(e: DragEvent) => void`                | -      |

diff --git a/packages/hooks/src/useFullscreen/demo/demo.vue b/packages/hooks/src/useFullscreen/demo/demo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="curRef">
+  <div>
     <div style="margin: bottom 16px;" :style="isFullscreen ? 'Fullscreen' : 'Not fullscreen'" />
     <div>
       <vhp-button type="button" @click="enterFullscreen">
@@ -16,11 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue'
   import { useFullscreen } from 'vue-hooks-plus'
 
-  const curRef = ref(null)
-  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] = useFullscreen(
-    curRef,
-  )
+  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] = useFullscreen()
 </script>
diff --git a/packages/hooks/src/useFullscreen/index.en-US.md b/packages/hooks/src/useFullscreen/index.en-US.md
@@ -1,7 +1,7 @@
 ---
 map:
   # 映射到docs的路径
-  path: /useFullscreen
+  path: /useFull
 ---
 
 # useFullscreen
@@ -13,14 +13,14 @@ manages DOM full screen.
 <demo src="./demo/demo.vue"
   language="vue"
   title="Basic usage"
-  desc="Use ref to set elements that need full screen"> </demo>
+  desc="Enter full screen without passing ref"> </demo>
 
 ## Image full screen
 
 <demo src="./demo/demo1.vue"
   language="vue"
   title="Image full screen"
-  desc=""> </demo>
+  desc="Pass the ref setting element into full screen"> </demo>
 
 ## API
 
@@ -47,10 +47,11 @@ const [
 
 ## Options
 
-| Property | Description               | Type         | Default |
-| -------- | ------------------------- | ------------ | ------- |
-| onExit   | Exit full screen trigger  | `() => void` | -       |
-| onEnter  | Enter full screen trigger | `() => void` | -       |
+| Property       | Description                 | Type                     | Default |
+| -------------- | --------------------------- | ------------------------ | ------- |
+| onExit         | Exit full screen trigger    | `() => void`             | -       |
+| onEnter        | Enter full screen trigger   | `() => void`             | -       |
+| defaultElement | Default full screen element | `Element \| HTMLElement` | `html`  |
 
 ## Result
 

diff --git a/packages/hooks/src/useFullscreen/index.ts b/packages/hooks/src/useFullscreen/index.ts
@@ -15,16 +15,23 @@ export interface UseFullscreenOptions {
    * @returns void
    */
   onEnter?: () => void
+
+  /**
+   *
+   * The element enters full screen by default when the binding element is not found or the element is not passed
+   * @default html
+   */
+  defaultElement?: HTMLElement | Element
 }
 
 const useFullscreen = (
   /**
    * DOM element or ref
    */
-  target: BasicTarget,
+  target?: BasicTarget,
   options?: UseFullscreenOptions,
 ) => {
-  const { onExit, onEnter } = options || {}
+  const { onExit, onEnter, defaultElement = document.documentElement } = options || {}
 
   const onExitRef = ref(onExit)
   const onEnterRef = ref(onEnter)
@@ -36,7 +43,7 @@ const useFullscreen = (
 
   const onChange = () => {
     if (screenfull.isEnabled) {
-      const el = getTargetElement(target)
+      const el = getTargetElement(target, defaultElement)
 
       if (!screenfull.element) {
         onExitRef.value?.()
@@ -55,7 +62,7 @@ const useFullscreen = (
   }
 
   const enterFullscreen = () => {
-    const el = getTargetElement(target)
+    const el = getTargetElement(target, defaultElement)
     if (!el) {
       return
     }
@@ -71,7 +78,7 @@ const useFullscreen = (
   }
 
   const exitFullscreen = () => {
-    const el = getTargetElement(target)
+    const el = getTargetElement(target, defaultElement)
     if (screenfull.isEnabled && screenfull.element === el) {
       screenfull.exit()
     }

diff --git a/packages/hooks/src/useFullscreen/index.zh-CN.md b/packages/hooks/src/useFullscreen/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 map:
   # 映射到docs的路径
-  path: /useFullscreen
+  path: /useFull
 ---
 
 # useFullscreen
@@ -13,14 +13,14 @@ map:
 <demo src="./demo/demo.vue"
   language="vue"
   title="基本用法"
-  desc="使用 ref 设置需要全屏的元素"> </demo>
+  desc="不传递 ref 进入全屏"> </demo>
 
 ## 图片全屏
 
 <demo src="./demo/demo1.vue"
   language="vue"
   title="图片全屏"
-  desc=""> </demo>
+  desc="传递 ref 设置元素进入全屏"> </demo>
 
 ## API
 
@@ -47,10 +47,11 @@ const [
 
 ## Options
 
-| 参数    | 说明         | 类型         | 默认值 |
-| ------- | ------------ | ------------ | ------ |
-| onExit  | 退出全屏触发 | `() => void` | -      |
-| onEnter | 全屏触发     | `() => void` | -      |
+| 参数           | 说明         | 类型                     | 默认值 |
+| -------------- | ------------ | ------------------------ | ------ |
+| onExit         | 退出全屏触发 | `() => void`             | -      |
+| onEnter        | 全屏触发     | `() => void`             | -      |
+| defaultElement | 默认全屏元素 | `Element \| HTMLElement` | `html` |
 
 ## Result