From 902f185c5ce19a1e2843cfde4e046394432796bf Mon Sep 17 00:00:00 2001
From: azaleta <24407500@qq.com>
Date: Fri, 14 Oct 2022 11:22:40 +0900
Subject: [PATCH 1/2] feat(useFocusTrap): enable options in component

---
 packages/integrations/useFocusTrap/component.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/useFocusTrap/component.ts b/packages/integrations/useFocusTrap/component.ts
index 50fd72450c5..31b204b114b 100644
--- a/packages/integrations/useFocusTrap/component.ts
+++ b/packages/integrations/useFocusTrap/component.ts
@@ -3,10 +3,15 @@ import { createFocusTrap } from 'focus-trap'
 import type { FocusTrap } from 'focus-trap'
 import type { RenderableComponent } from '@vueuse/core'
 import { unrefElement } from '@vueuse/core'
+import type { UseFocusTrapOptions } from '.'
 
-export const UseFocusTrap = defineComponent<RenderableComponent>({
+export interface ComponentUseFocusTrapOptions extends RenderableComponent {
+  options?: UseFocusTrapOptions
+}
+
+export const UseFocusTrap = defineComponent <ComponentUseFocusTrapOptions> ({
   name: 'UseFocusTrap',
-  props: ['as'] as unknown as undefined,
+  props: ['as', 'options'] as unknown as undefined,
   setup(props, { slots }) {
     let trap: undefined | FocusTrap
     const target = ref()
@@ -18,7 +23,7 @@ export const UseFocusTrap = defineComponent<RenderableComponent>({
       (el) => {
         if (!el)
           return
-        trap = createFocusTrap(el, {})
+        trap = createFocusTrap(el, props.options || {})
         activate()
       }, { flush: 'post' })
 

From 0ff8a6ff5c8bd0840c8c04a539f0a0e80f800b3a Mon Sep 17 00:00:00 2001
From: azaleta <24407500@qq.com>
Date: Fri, 14 Oct 2022 13:54:21 +0900
Subject: [PATCH 2/2] doc(useFocusTrap): add option to component

---
 packages/integrations/useFocusTrap/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/integrations/useFocusTrap/index.md b/packages/integrations/useFocusTrap/index.md
index 58de89b19e5..f0f2e53a20f 100644
--- a/packages/integrations/useFocusTrap/index.md
+++ b/packages/integrations/useFocusTrap/index.md
@@ -64,7 +64,7 @@ const show = ref(false)
 </script>
 
 <template>
-  <UseFocusTrap v-if="show">
+  <UseFocusTrap v-if="show" :options="{ immediate: true }">
     <div class="modal">...</div>
   </UseFocusTrap>
 </template>