mirror of
https://github.com/imezx/Warp.git
synced 2025-04-24 15:10:03 +00:00
59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
|
import { unrefElement, tryOnScopeDispose } from '@vueuse/core';
|
||
|
import { ref, watch } from 'vue-demi';
|
||
|
import { createFocusTrap } from 'focus-trap';
|
||
|
|
||
|
function useFocusTrap(target, options = {}) {
|
||
|
let trap;
|
||
|
const { immediate, ...focusTrapOptions } = options;
|
||
|
const hasFocus = ref(false);
|
||
|
const isPaused = ref(false);
|
||
|
const activate = (opts) => trap && trap.activate(opts);
|
||
|
const deactivate = (opts) => trap && trap.deactivate(opts);
|
||
|
const pause = () => {
|
||
|
if (trap) {
|
||
|
trap.pause();
|
||
|
isPaused.value = true;
|
||
|
}
|
||
|
};
|
||
|
const unpause = () => {
|
||
|
if (trap) {
|
||
|
trap.unpause();
|
||
|
isPaused.value = false;
|
||
|
}
|
||
|
};
|
||
|
watch(
|
||
|
() => unrefElement(target),
|
||
|
(el) => {
|
||
|
if (!el)
|
||
|
return;
|
||
|
trap = createFocusTrap(el, {
|
||
|
...focusTrapOptions,
|
||
|
onActivate() {
|
||
|
hasFocus.value = true;
|
||
|
if (options.onActivate)
|
||
|
options.onActivate();
|
||
|
},
|
||
|
onDeactivate() {
|
||
|
hasFocus.value = false;
|
||
|
if (options.onDeactivate)
|
||
|
options.onDeactivate();
|
||
|
}
|
||
|
});
|
||
|
if (immediate)
|
||
|
activate();
|
||
|
},
|
||
|
{ flush: "post" }
|
||
|
);
|
||
|
tryOnScopeDispose(() => deactivate());
|
||
|
return {
|
||
|
hasFocus,
|
||
|
isPaused,
|
||
|
activate,
|
||
|
deactivate,
|
||
|
pause,
|
||
|
unpause
|
||
|
};
|
||
|
}
|
||
|
|
||
|
export { useFocusTrap };
|