fix: pass modal bindings to teleport target #2109

Merged
konrad merged 2 commits from dpschen/frontend:feature/fix-modal-binding into main 2022-07-11 13:27:58 +00:00
1 changed files with 14 additions and 4 deletions

View File

@ -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)