76 lines
1.1 KiB
Vue
76 lines
1.1 KiB
Vue
<template>
|
|
<div class="kit">
|
|
<kit-list @open-node="openNode" />
|
|
|
|
<kit-view
|
|
v-if="sheet !== null"
|
|
:sheet="sheet"
|
|
@close-node="closeNode"
|
|
@open-node="openLibrary"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
|
|
import { KitList, KitView } from '@/pages/kit'
|
|
|
|
|
|
export default {
|
|
name: 'Kit',
|
|
|
|
components: {
|
|
KitList,
|
|
KitView
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(['sheet'])
|
|
},
|
|
|
|
methods: {
|
|
openNode (id) {
|
|
this.$store.dispatch('OPEN_KIT_NODE', id)
|
|
},
|
|
|
|
openLibrary (ids) {
|
|
this.$store.dispatch('OPEN_NODE', ids)
|
|
this.$store.dispatch('CLOSE_KIT_NODE')
|
|
},
|
|
|
|
closeNode () {
|
|
this.$store.dispatch('CLOSE_KIT_NODE')
|
|
}
|
|
},
|
|
|
|
created () {
|
|
this.$store.dispatch('INIT_KIT')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.kit {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&-view {
|
|
position: relative;
|
|
margin-bottom: -100%;
|
|
// compensate header border
|
|
height: calc(100% + 2px);
|
|
top: calc(-100% - 2px);
|
|
|
|
@include media-breakpoint-down($layout-bp-down) {
|
|
margin-bottom: -100vh;
|
|
}
|
|
}
|
|
}
|
|
</style>
|