Skip to content
Snippets Groups Projects
Commit 4aed15e2 authored by Kasper Seweryn's avatar Kasper Seweryn :pancakes:
Browse files

feat(modal): add scroll indicators

parent 4300eb02
No related branches found
No related tags found
1 merge request!96Draft: General improvements and new components
Pipeline #34101 passed
<script setup lang="ts">
import { useScroll, useResizeObserver } from '@vueuse/core'
import { ref } from 'vue'
const title = defineProp<string>('title', { required: true })
const open = defineModel<boolean>({ required: true })
const content = ref<HTMLDivElement>()
const { arrivedState } = useScroll(content)
const scrollable = ref(false)
useResizeObserver(content, () => {
const div = content.value
if (!div) return
if (div.scrollHeight > div.clientHeight) {
scrollable.value = true
} else {
scrollable.value = false
}
})
</script>
<template>
......@@ -13,7 +31,7 @@ const open = defineModel<boolean>({ required: true })
<FwButton icon="bi:x-lg" color="secondary" variant="ghost" @click="open = false" />
</h2>
<div class="modal-content">
<div class="modal-content" ref="content" :class="[arrivedState, { scrollable }]">
<Transition>
<div v-if="$slots.alert" class="alert-container">
<div>
......
......@@ -30,6 +30,19 @@
padding: 1rem 2rem;
overflow: auto;
position: relative;
background: var(--fw-beige-100);
&.scrollable {
&:not(.top),
&:not(.bottom) + * {
border-top: 1px solid var(--fw-gray-300);
}
&:not(.top) > .alert-container {
margin-top: calc(-1rem - 1px);
top: calc(-1rem - 1px);
}
}
> .alert-container {
position: sticky;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment