element-plus
Version:
A Component Library for Vue 3
1 lines • 4.02 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-lockscreen/index.ts"],"sourcesContent":["import { computed, isRef, onScopeDispose, watch } from 'vue'\nimport {\n addClass,\n getScrollBarWidth,\n getStyle,\n hasClass,\n removeClass,\n throwError,\n} from '@element-plus/utils'\nimport { useNamespace } from '../use-namespace'\n\nimport type { Ref } from 'vue'\nimport type { UseNamespaceReturn } from '../use-namespace'\n\nexport type UseLockScreenOptions = {\n ns?: UseNamespaceReturn\n // shouldLock?: MaybeRef<boolean>\n}\n\n/**\n * Hook that monitoring the ref value to lock or unlock the screen.\n * When the trigger became true, it assumes modal is now opened and vice versa.\n * @param trigger {Ref<boolean>}\n */\nexport const useLockscreen = (\n trigger: Ref<boolean>,\n options: UseLockScreenOptions = {}\n) => {\n if (!isRef(trigger)) {\n throwError(\n '[useLockscreen]',\n 'You need to pass a ref param to this function'\n )\n }\n\n const ns = options.ns || useNamespace('popup')\n\n const hiddenCls = computed(() => ns.bm('parent', 'hidden'))\n\n let scrollBarWidth = 0\n let withoutHiddenClass = false\n let bodyWidth = '0'\n\n const cleanup = () => {\n setTimeout(() => {\n // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n // and the document does not exist at this time.\n if (typeof document === 'undefined') return\n if (withoutHiddenClass && document) {\n document.body.style.width = bodyWidth\n removeClass(document.body, hiddenCls.value)\n }\n }, 200)\n }\n watch(trigger, (val) => {\n if (!val) {\n cleanup()\n return\n }\n\n withoutHiddenClass = !hasClass(document.body, hiddenCls.value)\n if (withoutHiddenClass) {\n bodyWidth = document.body.style.width\n addClass(document.body, hiddenCls.value)\n }\n scrollBarWidth = getScrollBarWidth(ns.namespace.value)\n const bodyHasOverflow =\n document.documentElement.clientHeight < document.body.scrollHeight\n const bodyOverflowY = getStyle(document.body, 'overflowY')\n if (\n scrollBarWidth > 0 &&\n (bodyHasOverflow || bodyOverflowY === 'scroll') &&\n withoutHiddenClass\n ) {\n document.body.style.width = `calc(100% - ${scrollBarWidth}px)`\n }\n })\n onScopeDispose(() => cleanup())\n}\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,aAAgB,GAAA,CAC3B,OACA,EAAA,OAAA,GAAgC,EAC7B,KAAA;AACH,EAAI,IAAA,CAAC,KAAM,CAAA,OAAO,CAAG,EAAA;AACnB,IAAA,UAAA;AAAA,MACE,iBAAA;AAAA,MACA,+CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,EAAK,GAAA,OAAA,CAAQ,EAAM,IAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AAE7C,EAAA,MAAM,YAAY,QAAS,CAAA,MAAM,GAAG,EAAG,CAAA,QAAA,EAAU,QAAQ,CAAC,CAAA,CAAA;AAE1D,EAAA,IAAI,cAAiB,GAAA,CAAA,CAAA;AACrB,EAAA,IAAI,kBAAqB,GAAA,KAAA,CAAA;AACzB,EAAA,IAAI,SAAY,GAAA,GAAA,CAAA;AAEhB,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,UAAA,CAAW,MAAM;AAGf,MAAA,IAAI,OAAO,QAAa,KAAA,WAAA;AAAa,QAAA,OAAA;AACrC,MAAA,IAAI,sBAAsB,QAAU,EAAA;AAClC,QAAS,QAAA,CAAA,IAAA,CAAK,MAAM,KAAQ,GAAA,SAAA,CAAA;AAC5B,QAAY,WAAA,CAAA,QAAA,CAAS,IAAM,EAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OAC5C;AAAA,OACC,GAAG,CAAA,CAAA;AAAA,GACR,CAAA;AACA,EAAM,KAAA,CAAA,OAAA,EAAS,CAAC,GAAQ,KAAA;AACtB,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAQ,OAAA,EAAA,CAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,kBAAA,GAAqB,CAAC,QAAA,CAAS,QAAS,CAAA,IAAA,EAAM,UAAU,KAAK,CAAA,CAAA;AAC7D,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAY,SAAA,GAAA,QAAA,CAAS,KAAK,KAAM,CAAA,KAAA,CAAA;AAChC,MAAS,QAAA,CAAA,QAAA,CAAS,IAAM,EAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACzC;AACA,IAAiB,cAAA,GAAA,iBAAA,CAAkB,EAAG,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACrD,IAAA,MAAM,eACJ,GAAA,QAAA,CAAS,eAAgB,CAAA,YAAA,GAAe,SAAS,IAAK,CAAA,YAAA,CAAA;AACxD,IAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,QAAS,CAAA,IAAA,EAAM,WAAW,CAAA,CAAA;AACzD,IAAA,IACE,cAAiB,GAAA,CAAA,KAChB,eAAmB,IAAA,aAAA,KAAkB,aACtC,kBACA,EAAA;AACA,MAAS,QAAA,CAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,CAAe,YAAA,EAAA,cAAA,CAAA,GAAA,CAAA,CAAA;AAAA,KAC7C;AAAA,GACD,CAAA,CAAA;AACD,EAAe,cAAA,CAAA,MAAM,SAAS,CAAA,CAAA;AAChC;;;;"}