| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- import { throwError } from "../../utils/error.mjs";
- import { addClass, getStyle, hasClass, removeClass } from "../../utils/dom/style.mjs";
- import { getScrollBarWidth } from "../../utils/dom/scroll.mjs";
- import { useNamespace } from "../use-namespace/index.mjs";
- import { computed, isRef, onScopeDispose, watch } from "vue";
- //#region ../../packages/hooks/use-lockscreen/index.ts
- /**
- * Hook that monitoring the ref value to lock or unlock the screen.
- * When the trigger became true, it assumes modal is now opened and vice versa.
- * @param trigger {Ref<boolean>}
- */
- const useLockscreen = (trigger, options = {}) => {
- if (!isRef(trigger)) throwError("[useLockscreen]", "You need to pass a ref param to this function");
- const ns = options.ns || useNamespace("popup");
- const hiddenCls = computed(() => ns.bm("parent", "hidden"));
- let scrollBarWidth = 0;
- let withoutHiddenClass = false;
- let bodyWidth = "0";
- let cleaned = false;
- const cleanup = () => {
- if (cleaned) return;
- cleaned = true;
- setTimeout(() => {
- if (typeof document === "undefined") return;
- if (withoutHiddenClass && document) {
- document.body.style.width = bodyWidth;
- removeClass(document.body, hiddenCls.value);
- }
- }, 200);
- };
- watch(trigger, (val) => {
- if (!val) {
- cleanup();
- return;
- }
- cleaned = false;
- withoutHiddenClass = !hasClass(document.body, hiddenCls.value);
- if (withoutHiddenClass) {
- bodyWidth = document.body.style.width;
- addClass(document.body, hiddenCls.value);
- }
- scrollBarWidth = getScrollBarWidth(ns.namespace.value);
- const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
- const bodyOverflowY = getStyle(document.body, "overflowY");
- if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
- });
- onScopeDispose(() => cleanup());
- };
- //#endregion
- export { useLockscreen };
- //# sourceMappingURL=index.mjs.map
|