Warp/node_modules/@vueuse/integrations/useFocusTrap.mjs

59 lines
1.3 KiB
JavaScript
Raw Normal View History

2024-01-05 12:14:38 +00:00
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 };