feat(useFocusTrap): enable options in component (#2321)

vueuse · Oct 16, 2022 · 578bc0c · 578bc0c
1 parent a06b7bd
commit 578bc0c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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' })
 

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