vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: prevent scrolling the rest of the page when a modal is open #1617

Merged
konrad merged 2 commits from feature/stop-body-scrolling-when-modal-is-open into main 2022-03-27 20:42:21 +00:00
Conversation 5 Commits 2 Files Changed 1 +25 -44
1 changed files with 25 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/modal/modal.vue
View File

@ -8,6 +8,7 @@
{ 'has-overflow': overflow },
variant,
]"
ref="modal"
>
<div
class="modal-container"
@ -60,57 +61,37 @@
</transition>
</template>
<script>
<script lang="ts" setup>
import BaseButton from '@/components/base/BaseButton.vue'
import {ref, watch} from 'vue'
import {useScrollLock} from '@vueuse/core'
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',
})
export const VARIANTS = {
DEFAULT: 'default',
HINT_MODAL: 'hint-modal',
SCROLLING: 'scrolling',
}
defineEmits(['close', 'submit'])
function validValue(values) {
return (value) => Object.values(values).includes(value)
}
const modal = ref<HTMLElement | null>(null)
dpschen commented 2022-04-09 22:12:00 +00:00
Review
Copy Link

Why not:

const modal = ref<HTMLElement>()
Why not: ```js const modal = ref<HTMLElement>() ```
konrad commented 2022-04-09 23:08:16 +00:00
Review
Copy Link

Don't I need to specify the default value?

Don't I need to specify the default value?
dpschen commented 2022-04-09 23:48:28 +00:00
Review
Copy Link

The default would be undefined in that case. Meaning:

ref<HTMLElement>() is identical to ref<HTMLElement | undefined>(undefined)

The default would be `undefined` in that case. Meaning: `ref<HTMLElement>()` is identical to `ref<HTMLElement | undefined>(undefined)`
konrad commented 2022-04-10 18:54:24 +00:00
Review
Copy Link

Ohh okay, that makes sense. I'm kind of used to setting everything to null if its not defined, coming from the backend. But undefined makes more sense in the js world.

Ohh okay, that makes sense. I'm kind of used to setting everything to `null` if its not defined, coming from the backend. But `undefined` makes more sense in the js world.
👍 1
const scrollLock = useScrollLock(modal)
export default {
name: 'modal',
components: {
BaseButton,
watch(
() => props.enabled,
enabled => {
scrollLock.value = enabled
},
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'],
}
)
</script>
<style lang="scss" scoped>