mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 16:06:56 +00:00
62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
defineProps<{
|
|
showAccessPermissionOverlay?: boolean
|
|
}>()
|
|
/**
|
|
* ExtensionHeaderWrapper component.
|
|
*
|
|
* @slot headerPrefix - Slot for custom content to be displayed at the start of the header when in fullscreen mode.
|
|
* @slot headerExtra - Slot for additional custom content to be displayed in the header when in fullscreen mode.
|
|
*/
|
|
|
|
defineEmits(['headerClick'])
|
|
|
|
const { fullscreen } = useExtensionHelperOrThrow()
|
|
|
|
const headerRef = ref<HTMLDivElement>()
|
|
|
|
const { height } = useElementSize(headerRef)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full">
|
|
<div ref="headerRef" class="extension-header-wrapper" @click="$emit('headerClick')">
|
|
<ExtensionsExtensionHeader>
|
|
<template #prefix>
|
|
<slot name="headerPrefix"></slot>
|
|
</template>
|
|
<template #extra>
|
|
<slot name="headerExtra"></slot>
|
|
</template>
|
|
</ExtensionsExtensionHeader>
|
|
</div>
|
|
<div
|
|
class="extension-content-container"
|
|
:class="{
|
|
'fullscreen nc-scrollbar-thin': fullscreen,
|
|
'h-full': !fullscreen,
|
|
'relative': showAccessPermissionOverlay,
|
|
}"
|
|
:style="fullscreen ? { height: height ? `calc(100% - ${height}px)` : 'calc(100% - 64px)' } : {}"
|
|
>
|
|
<slot />
|
|
|
|
<general-overlay
|
|
v-if="showAccessPermissionOverlay"
|
|
:model-value="true"
|
|
inline
|
|
transition
|
|
class="!bg-opacity-15 rounded-xl overflow-hidden"
|
|
>
|
|
<slot name="accessPermissionOverlay">
|
|
<div class="flex flex-col items-center justify-center h-full w-full !bg-nc-bg-default !bg-opacity-80">
|
|
<div class="max-w-sm text-center !font-semibold" :class="fullscreen ? 'text-bodyLg' : 'text-body'">
|
|
{{ $t('tooltip.youDoNotHaveSufficientPermissionToConfigureThisExtension') }}
|
|
</div>
|
|
</div>
|
|
</slot>
|
|
</general-overlay>
|
|
</div>
|
|
</div>
|
|
</template>
|