Merge pull request #79 from gluebi/78-hide-cookie-comply-while-settin…

…gs-modal-is-open

78 hide cookie comply while settings modal is open

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-cookie-comply-with-reject",
   "description": "A Vue 3 component to handle cookie acceptance on your website",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "files": [
     "dist"
   ],
@@ -19,19 +19,19 @@
     "url": "https://github.com/gluebi/vue-cookie-comply-with-reject/"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "prettier": "^2.8.4",
-    "vite": "^4.1.3",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.10.0",
+    "prettier": "^2.8.7",
+    "vite": "^4.2.1",
     "vue": "^3.2.47"
   },
   "peerDependencies": {
     "vue": "3.2"
   },
   "dependencies": {
-    "body-scroll-lock": "^3.1.5"
+    "@vueuse/core": "10.0.0-beta.2"
   }
 }

src/components/CookieComply.vue

@@ -4,8 +4,7 @@
     class="cookie-comply-body-grey-out"
   />
   <aside
-    v-if="showCookieComply"
-    v-scroll-lock="showCookieComply"
+    v-if="showCookieComply && !isModalOpen"
     class="cookie-comply"
     :class="{ 'cookie-comply--modal-open': isModalOpen }"
   >
@@ -33,34 +32,34 @@
         {{ acceptAllLabel }}
       </cookie-comply-button>
     </div>
-
-    <Teleport :to="target">
-      <cookie-comply-modal
-        v-if="isModalOpen"
-        :preferences="preferences"
-        :show-accept-all-in-modal="showAcceptAllInModal"
-        @cookie-comply-save="onSave"
-        @cookie-comply-accept-all="handleAcceptAll"
-        @cookie-comply-close="isModalOpen = false"
-      >
-        <template #modal-header>
-          <slot name="modal-header"></slot>
-        </template>
-
-        <template #modal-body="{ preference, index }">
-          <slot
-            name="modal-body"
-            :preference="preference"
-            :index="index"
-          ></slot>
-        </template>
-
-        <template #modal-footer>
-          <slot name="modal-footer"></slot>
-        </template>
-      </cookie-comply-modal>
-    </Teleport>
   </aside>
+  <Teleport :to="target">
+    <cookie-comply-modal
+      v-if="isModalOpen"
+      :preferences="preferences"
+      :show-accept-all-in-modal="showAcceptAllInModal"
+      @cookie-comply-save="onSave"
+      @cookie-comply-accept-all="handleAcceptAll"
+      @cookie-comply-close="isModalOpen = false"
+    >
+      <template #modal-header>
+        <slot name="modal-header"></slot>
+      </template>
+
+      <template #modal-body="{ preference, index }">
+        <slot
+          name="modal-body"
+          :preference="preference"
+          :index="index"
+        ></slot>
+      </template>
+
+      <template #modal-footer>
+        <slot name="modal-footer"></slot>
+      </template>
+    </cookie-comply-modal>
+  </Teleport>
+
   <aside
     v-if="showEditButton && !showCookieComply"
     class="cookie-comply-edit"
@@ -102,11 +101,11 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref, defineExpose } from "vue";
-import { getConsentValuesFromStorage } from '../shared/storageUtils';
-import CookieComplyModal from './CookieComplyModal.vue';
-import CookieComplyButton from './CookieComplyButton.vue';
-import { scrollLock as vScrollLock } from '../directives/scroll-lock';
+import { defineProps, onMounted, ref, defineExpose, WritableComputedRef, watch } from "vue"
+import { getConsentValuesFromStorage } from '../shared/storageUtils'
+import CookieComplyModal from './CookieComplyModal.vue'
+import CookieComplyButton from './CookieComplyButton.vue'
+import { useScrollLock } from '@vueuse/core'
 
 interface Props {
   headerTitle?: string
@@ -153,6 +152,17 @@ onMounted((): void => {
   checkValues()
 })
 
+const body: HTMLBodyElement | null = document.querySelector('body')
+const isBodyLocked: WritableComputedRef<boolean> = useScrollLock(body, false)
+
+watch([showCookieComply, isModalOpen], () => {
+  if (showCookieComply.value || isModalOpen.value) {
+    isBodyLocked.value = true
+    return
+  }
+  isBodyLocked.value = false
+})
+
 const checkValues = (): void => {
   const searchParams = new URLSearchParams(document.location.search)
   const consent = searchParams.get('consent')