|
1 |
| -import {computed, type MaybeRefOrGetter, onMounted, readonly, ref, toRef, watch} from 'vue' |
| 1 | +import {computed, type MaybeRefOrGetter, onMounted, readonly, toRef, watch} from 'vue' |
2 | 2 | import {useScrollLock} from '@vueuse/core'
|
3 | 3 |
|
4 | 4 | export default (isOpen: MaybeRefOrGetter<boolean>, bodyScroll: MaybeRefOrGetter<boolean>) => {
|
5 |
| - const modelValue = readonly(toRef(isOpen)) |
6 |
| - const bodyScrollingValue = readonly(toRef(bodyScroll)) |
| 5 | + const resolvedIsOpen = readonly(toRef(isOpen)) |
| 6 | + const resolvedBodyScrolling = readonly(toRef(bodyScroll)) |
7 | 7 |
|
8 | 8 | /**
|
9 | 9 | * We use the inverse because bodyScrolling === true means we allow scrolling, while bodyScrolling === false means we disallow
|
10 | 10 | */
|
11 |
| - const inverseBodyScrollingValue = computed(() => !bodyScrollingValue.value) |
12 |
| - |
13 |
| - const bodyRef = ref<HTMLElement | null>(null) |
| 11 | + const inverseBodyScrollingValue = computed(() => !resolvedBodyScrolling.value) |
14 | 12 |
|
15 | 13 | onMounted(() => {
|
16 |
| - bodyRef.value = document.body |
17 |
| - }) |
18 |
| - |
19 |
| - const isLocked = useScrollLock(bodyRef, modelValue.value && inverseBodyScrollingValue.value) |
| 14 | + const isLocked = useScrollLock( |
| 15 | + document.body, |
| 16 | + resolvedIsOpen.value && inverseBodyScrollingValue.value |
| 17 | + ) |
20 | 18 |
|
21 |
| - watch([modelValue, inverseBodyScrollingValue], ([modelVal, bodyVal]) => { |
22 |
| - isLocked.value = modelVal && bodyVal |
| 19 | + watch([resolvedIsOpen, inverseBodyScrollingValue], ([modelVal, bodyVal]) => { |
| 20 | + isLocked.value = modelVal && bodyVal |
| 21 | + }) |
23 | 22 | })
|
24 | 23 | }
|
0 commit comments