Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const isOpen = useMobileMenuOpen()
|
|
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
fullHeight?: boolean
|
|
gridMenuProps?: any
|
|
modalProps?: any
|
|
vertical: 'fill' | 'top' | 'center' | 'bottom'
|
|
horizontal: 'fill' | 'left' | 'center' | 'right'
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'scaffoldMenuModal',
|
|
{
|
|
slots: {
|
|
wrapper: 'relative w-full h-full flex flex-row',
|
|
overlay: 'absolute',
|
|
content:
|
|
'relative ring-0 rounded-none translate-x-0 translate-y-0 w-auto min-w-0 max-w-none h-auto min-h-0 max-h-none sm:max-h-none top-auto bottom-auto left-auto right-auto',
|
|
},
|
|
variants: {
|
|
vertical: {
|
|
fill: {
|
|
wrapper: 'items-stretch',
|
|
},
|
|
top: {
|
|
wrapper: 'items-start',
|
|
},
|
|
center: {
|
|
wrapper: 'items-center',
|
|
},
|
|
bottom: {
|
|
wrapper: 'items-end',
|
|
},
|
|
},
|
|
horizontal: {
|
|
fill: {
|
|
content: 'grow',
|
|
},
|
|
left: {
|
|
wrapper: 'justify-start',
|
|
},
|
|
center: {
|
|
wrapper: 'justify-center',
|
|
},
|
|
right: {
|
|
wrapper: 'justify-end',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<XScaffoldGridMenu
|
|
:fill="true"
|
|
:overlap="props.fullHeight"
|
|
position="above"
|
|
v-bind="props.gridMenuProps"
|
|
>
|
|
<div :class="classes.wrapper">
|
|
<UModal
|
|
v-model:open="isOpen"
|
|
:portal="false"
|
|
:ui="{ overlay: classes.overlay, content: classes.content }"
|
|
v-bind="props.modalProps"
|
|
>
|
|
<template #content>
|
|
<slot />
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</XScaffoldGridMenu>
|
|
</template>
|