From c466b83bca774b6d721017219d100c33811d2a03 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 27 Feb 2022 16:08:46 +0100
Subject: [PATCH 1/2] feat: prevent scrolling the rest of the page when a modal
 is open

---
 src/components/modal/modal.vue | 83 ++++++++++++++++------------------
 1 file changed, 38 insertions(+), 45 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 3ee52544a..188df2072 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -60,57 +60,50 @@
 	</transition>
 </template>
 
-<script>
+<script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
+import {onUnmounted, watch} from 'vue'
 
-export const TRANSITION_NAMES = {
-	MODAL: 'modal',
-	FADE: 'fade',
+const props = withDefaults(defineProps<{
+	enabled?: boolean,
+	overflow?: boolean,
+	wide?: boolean,
+	transitionName?: 'modal' | 'fade',
+	variant?: 'default' | 'hint-modal' | 'scrolling',
+}>(), {
+	enabled: true,
+	transitionName: 'modal',
+	variant: 'default',
+})
+
+ defineEmits(['close', 'submit'])
+
+// Based on https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+function resetScrolling() {
+	const body = document.body
+	const scrollY = body.style.top
+	body.style.position = ''
+	body.style.top = ''
+	window.scrollTo(0, parseInt(scrollY || '0') * -1)
 }
 
-export const VARIANTS = {
-	DEFAULT: 'default',
-	HINT_MODAL: 'hint-modal',
-	SCROLLING: 'scrolling',
-}
-
-function validValue(values) {
-	return (value) => Object.values(values).includes(value)
-}
-
-export default {
-	name: 'modal',
-
-	components: {
-		BaseButton,
+watch(
+	() => props.enabled,
+	enabled => {
+		if (enabled) {
+			const scrollY = window.scrollY
+			document.body.style.position = 'fixed'
+			document.body.style.top = `-${scrollY}px`
+		} else {
+			resetScrolling()
+		}
 	},
-
-	props: {
-		enabled: {
-			type: Boolean,
-			default: true,
-		},
-		overflow: {
-			type: Boolean,
-			default: false,
-		},
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-		transitionName: {
-			type: String,
-			default: TRANSITION_NAMES.MODAL,
-			validator: validValue(TRANSITION_NAMES),
-		},
-		variant: {
-			type: String,
-			default: VARIANTS.DEFAULT,
-			validator: validValue(VARIANTS),
-		},
+	{
+		immediate: true,
 	},
-	emits: ['close', 'submit'],
-}
+)
+
+onUnmounted(resetScrolling)
 </script>
 
 <style lang="scss" scoped>
-- 
2.40.1


From f92aeed5402d5e1b7b77834231df678ee587f118 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 22 Mar 2022 22:48:32 +0100
Subject: [PATCH 2/2] feat: use vueuse to lock scrolling

---
 src/components/modal/modal.vue | 26 +++++++-------------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 188df2072..4b79df1bb 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -8,6 +8,7 @@
 				{ 'has-overflow': overflow },
 				variant,
 			]"
+			ref="modal"
 		>
 			<div
 				class="modal-container"
@@ -62,7 +63,8 @@
 
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {onUnmounted, watch} from 'vue'
+import {ref, watch} from 'vue'
+import {useScrollLock} from '@vueuse/core'
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -76,34 +78,20 @@ const props = withDefaults(defineProps<{
 	variant: 'default',
 })
 
- defineEmits(['close', 'submit'])
+defineEmits(['close', 'submit'])
 
-// Based on https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
-function resetScrolling() {
-	const body = document.body
-	const scrollY = body.style.top
-	body.style.position = ''
-	body.style.top = ''
-	window.scrollTo(0, parseInt(scrollY || '0') * -1)
-}
+const modal = ref<HTMLElement | null>(null)
+const scrollLock = useScrollLock(modal)
 
 watch(
 	() => props.enabled,
 	enabled => {
-		if (enabled) {
-			const scrollY = window.scrollY
-			document.body.style.position = 'fixed'
-			document.body.style.top = `-${scrollY}px`
-		} else {
-			resetScrolling()
-		}
+		scrollLock.value = enabled
 	},
 	{
 		immediate: true,
 	},
 )
-
-onUnmounted(resetScrolling)
 </script>
 
 <style lang="scss" scoped>
-- 
2.40.1