gamebrary/src/components/ModalHeader.vue

58 lines
1,009 B
Vue
Raw Normal View History

2020-11-21 06:33:39 +00:00
<!-- TODO: border overlaps close button in dark mode -->
2020-10-14 00:10:52 +00:00
<template lang="html">
<header>
<div>
2020-11-22 03:31:18 +00:00
<h5 class="mb-0 text-wrap">{{ title }}</h5>
2020-11-07 05:44:34 +00:00
<small class="d-block text-muted">{{ subtitle }}</small>
2020-10-14 00:10:52 +00:00
</div>
2020-10-23 16:20:35 +00:00
<div class="actions">
<slot />
<b-button
:variant="nightMode ? 'dark' : 'light'"
size="sm"
class="ml-auto"
@click="$emit('close')"
>
2020-12-15 23:55:02 +00:00
<i class="fas fa-times fa-fw" aria-hidden></i>
2020-10-23 16:20:35 +00:00
</b-button>
</div>
2020-10-14 00:10:52 +00:00
</header>
</template>
<script>
2020-10-14 21:48:27 +00:00
import { mapGetters } from 'vuex';
2020-10-14 00:10:52 +00:00
export default {
props: {
title: String,
subtitle: String,
},
2020-10-14 21:48:27 +00:00
computed: {
...mapGetters(['nightMode']),
},
2020-10-14 00:10:52 +00:00
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
header {
display: grid;
width: 100%;
align-items: center;
grid-template-columns: auto auto;
}
h5 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.actions {
margin-left: auto;
2020-10-31 17:43:55 +00:00
align-self: flex-start;
2020-10-14 00:10:52 +00:00
}
</style>