traxxx-web/renderer/container.vue

<template>
	<div
		class="container"
		@click="blur"
	>
		<Header />

		<div
			ref="content"
			class="content"
		>
			<slot @scroll="scroll" />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import events from '#/src/events.js';

import Header from '../components/header/header.vue';

const content = ref(null);

function blur() {
	events.emit('blur');
}

onMounted(() => {
	events.on('scrollUp', () => { content.value.scrollTop = 0; });
});
</script>

<style>
.scroller {
	height: 30rem;
	overflow-y: auto;
}

.item {
	height: 32px;
	padding: 0 12px;
	display: flex;
	align-items: center;
}
</style>

<style scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-y: auto;
}
</style>