fix: pass modal bindings to teleport target (#2109)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: #2109
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/misc/modal.vue

@@ -6,10 +6,11 @@
 				v-if="enabled"
 				class="modal-mask"
 				:class="[
-				{ 'has-overflow': overflow },
-				variant,
-			]"
+					{ 'has-overflow': overflow },
+					variant,
+				]"
 				ref="modal"
+				v-bind="attrs"
 			>
 				<div
 					class="modal-container"
@@ -62,11 +63,18 @@
 	</Teleport>
 </template>
 
+<script lang="ts">
+export default {
+	inheritAttrs: false,
+}
+</script>
+
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {onUnmounted, ref, watch} from 'vue'
+import {onUnmounted, ref, useAttrs, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
+
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
@@ -81,6 +89,8 @@ const props = withDefaults(defineProps<{
 
 defineEmits(['close', 'submit'])
 
+const attrs = useAttrs()
+
 const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)