|
@@ -25,7 +25,7 @@ const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
|
|
|
const contentStyle = computed<StyleValue>(() => {
|
|
|
if (autoContentHeight) {
|
|
|
return {
|
|
|
- height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
|
|
|
+ height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${footerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
|
|
|
overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
|
|
|
};
|
|
|
}
|
|
@@ -50,7 +50,7 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="relative">
|
|
|
+ <div class="relative flex min-h-full flex-col">
|
|
|
<div
|
|
|
v-if="
|
|
|
description ||
|
|
@@ -89,16 +89,10 @@ onMounted(() => {
|
|
|
<div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
-
|
|
|
<div
|
|
|
v-if="$slots.footer"
|
|
|
ref="footerRef"
|
|
|
- :class="
|
|
|
- cn(
|
|
|
- 'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
|
|
|
- footerClass,
|
|
|
- )
|
|
|
- "
|
|
|
+ :class="cn('bg-card align-center flex px-6 py-4', footerClass)"
|
|
|
>
|
|
|
<slot name="footer"></slot>
|
|
|
</div>
|