75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
|
<div v-if="topButtonsPassed" class="flex flex-row gap-2 empty:contents">
|
|
<slot name="topButtons"></slot>
|
|
</div>
|
|
<div
|
|
v-if="showTopList"
|
|
class="w-full h-fit max-h-1/2 flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
|
|
>
|
|
<div v-if="topSearchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
|
|
<slot name="searchTop"></slot>
|
|
</div>
|
|
<div class="flex flex-col gap-2 grow overflow-hidden" :class="topTitlePassed ? 'pb-5 pt-2' : ' py-5'">
|
|
<p v-if="topTitlePassed" class="px-2">{{ topTitle }}</p>
|
|
<div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
|
|
<slot name="topList"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden">
|
|
<div v-if="searchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
|
|
<slot name="search"></slot>
|
|
</div>
|
|
<div class="flex flex-col gap-2 grow overflow-hidden" :class="titlePassed ? 'pb-5 pt-2' : ' py-5'">
|
|
<p v-if="titlePassed" class="px-2">{{ mainTitle }}</p>
|
|
<div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
|
|
<slot name="list"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="bottomButtonsPassed" class="flex flex-col gap-2 empty:contents">
|
|
<slot name="bottomButtons"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
props: {
|
|
topTitle: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
mainTitle: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
showTopList: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
defaultRoute() {
|
|
return ((this.$route?.name as string) ?? "").includes("-default");
|
|
},
|
|
topButtonsPassed() {
|
|
return !!this.$slots.topButtons;
|
|
},
|
|
topTitlePassed() {
|
|
return !!this.topTitle;
|
|
},
|
|
topSearchPassed() {
|
|
return !!this.$slots.searchTop;
|
|
},
|
|
titlePassed() {
|
|
return !!this.mainTitle;
|
|
},
|
|
searchPassed() {
|
|
return !!this.$slots.search;
|
|
},
|
|
bottomButtonsPassed() {
|
|
return !!this.$slots.bottomButtons;
|
|
},
|
|
},
|
|
};
|
|
</script>
|