94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<script setup>
|
|
import { NFormItem, NCard, NScrollbar, NEl, NSpin } from 'naive-ui'
|
|
import {computed, ref, watch} from "vue";
|
|
const props = defineProps({
|
|
header: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
headerIncludeBody: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
feedback: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
minH: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
maxH: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
noPadding: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const hasHeader = computed(() => props.header.trim().length > 0)
|
|
const hasHeaderInOutside = computed(() => hasHeader.value && !props.headerIncludeBody)
|
|
const hasFeedback = computed(() => props.feedback.trim().length > 0)
|
|
const hasMinH = computed(() => props.minH.trim().length > 0 || Number.isInteger(props.minH))
|
|
const hasMaxH = computed(() => props.maxH.trim().length > 0 || Number.isInteger(props.maxH))
|
|
|
|
const styles = ref([])
|
|
|
|
watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
|
|
const sizeStyles = []
|
|
|
|
if (minH === null) return
|
|
if (minH.trim().length > 0) {
|
|
sizeStyles.push(`min-height: ${minH};`)
|
|
} else if (Number.isInteger(minH)) {
|
|
sizeStyles.push(`min-height: ${minH}px;`)
|
|
}
|
|
|
|
if (maxH === null) return
|
|
if (maxH.trim().length > 0) {
|
|
sizeStyles.push(`max-height: ${maxH};`)
|
|
} else if (Number.isInteger(maxH)) {
|
|
sizeStyles.push(`max-height: ${maxH}px;`)
|
|
}
|
|
|
|
styles.value = styles.value.concat(sizeStyles)
|
|
}, {
|
|
immediate: true
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NFormItem :show-label="hasHeaderInOutside" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
|
|
<NCard v-bind="$attrs" :class="noPadding ? 'no-padding h-full relative' : 'h-full relative'">
|
|
<template v-if="!hasHeaderInOutside && header" #header>
|
|
{{ header }}
|
|
</template>
|
|
<template #header-extra>
|
|
<slot name="header-extra" />
|
|
</template>
|
|
<NScrollbar :style="styles">
|
|
<slot />
|
|
</NScrollbar>
|
|
|
|
<div v-if="loading"
|
|
class="absolute inset-0 z-10" style="background-color: color-mix(in srgb, var(--n-color-popover) 20%, transparent)">
|
|
<div class="flex flex-col justify-center items-center h-full">
|
|
<NSpin size="small" />
|
|
</div>
|
|
</div>
|
|
</NCard>
|
|
</NFormItem>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.no-padding :deep(.n-card-content) {
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|