ami/tl-vikunja
1
0
Fork 0
Code

feat: improve popup

Browse Source
This commit is contained in:
Dominik Pschenitschni 2024-06-15 16:59:31 +02:00 committed by konrad
parent 6c113eaca1
commit 92f2e0e214
1 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/misc/popup.vue
View File

@ -10,7 +10,7 @@
class="popup" class="popup"
:class="{ :class="{
'is-open': openValue, 'is-open': openValue,
'has-overflow': props.hasOverflow && openValue 'has-overflow': hasOverflow && openValue
}" }"
> >
<slot <slot
@ -23,31 +23,23 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch} from 'vue' import {ref, watchEffect} from 'vue'
import {onClickOutside} from '@vueuse/core' import {onClickOutside} from '@vueuse/core'
const props = defineProps({ const props = withDefaults(defineProps<{
hasOverflow: { hasOverflow?: boolean
type: Boolean, open?: boolean
default: false, }>(), {
}, hasOverflow: false,
open: { open: false,
type: Boolean,
default: false,
},
}) })
const emit = defineEmits(['close']) const emit = defineEmits(['close'])
watch( const openValue = ref(props.open)
() => props.open, watchEffect(() => {
nowOpen => { openValue.value = props.open
openValue.value = nowOpen })
},
)
const openValue = ref(false)
const popup = ref<HTMLElement | null>(null)
function close() { function close() {
openValue.value = false openValue.value = false
@ -58,6 +50,8 @@ function toggle() {
openValue.value = !openValue.value openValue.value = !openValue.value
} }
const popup = ref<HTMLElement | null>(null)
onClickOutside(popup, () => { onClickOutside(popup, () => {
if (!openValue.value) { if (!openValue.value) {
return return