mirror of
https://github.com/imezx/Warp.git
synced 2025-04-24 23:20:02 +00:00
31 lines
875 B
JavaScript
31 lines
875 B
JavaScript
import { defineComponent, ref, watch, onScopeDispose, h } from 'vue-demi';
|
|
import { createFocusTrap } from 'focus-trap';
|
|
import { unrefElement } from '@vueuse/core';
|
|
|
|
const UseFocusTrap = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
name: "UseFocusTrap",
|
|
props: ["as", "options"],
|
|
setup(props, { slots }) {
|
|
let trap;
|
|
const target = ref();
|
|
const activate = () => trap && trap.activate();
|
|
const deactivate = () => trap && trap.deactivate();
|
|
watch(
|
|
() => unrefElement(target),
|
|
(el) => {
|
|
if (!el)
|
|
return;
|
|
trap = createFocusTrap(el, props.options || {});
|
|
activate();
|
|
},
|
|
{ flush: "post" }
|
|
);
|
|
onScopeDispose(() => deactivate());
|
|
return () => {
|
|
if (slots.default)
|
|
return h(props.as || "div", { ref: target }, slots.default());
|
|
};
|
|
}
|
|
});
|
|
|
|
export { UseFocusTrap };
|