1<template>
2  <vue-context ref="menu">
3    <li>
4      <a href="#" @click.prevent="$emit('collapseAllOtherNodes')">
5        Collapse all other nodes
6      </a>
7    </li>
8  </vue-context>
9</template>
10
11<script>
12import {VueContext} from 'vue-context';
13
14export default {
15  name: 'NodeContextMenu',
16  components: {
17    VueContext,
18  },
19  methods: {
20    open(e) {
21      this.$refs.menu.open(e);
22    },
23    close() {
24      this.$refs.menu.close();
25    },
26  },
27};
28</script>
29<style scoped>
30.v-context,
31.v-context ul {
32  background-color: #fff;
33  background-clip: padding-box;
34  border-radius: .25rem;
35  border: 1px solid rgba(0, 0, 0, .15);
36  box-shadow:
37    0 2px 2px 0 rgba(0, 0, 0, .14),
38    0 3px 1px -2px rgba(0, 0, 0, .2),
39    0 1px 5px 0 rgba(0, 0, 0, .12);
40  display: block;
41  margin: 0;
42  padding: 10px 0;
43  min-width: 10rem;
44  z-index: 1500;
45  position: fixed;
46  list-style: none;
47  box-sizing: border-box;
48  max-height: calc(100% - 50px);
49  overflow-y: auto
50}
51
52.v-context>li,
53.v-context ul>li {
54  margin: 0;
55  position: relative
56}
57
58.v-context>li>a,
59.v-context ul>li>a {
60  display: block;
61  padding: .5rem 1.5rem;
62  font-weight: 400;
63  color: #212529;
64  text-decoration: none;
65  white-space: nowrap;
66  background-color: transparent;
67  border: 0
68}
69
70.v-context>li>a:focus,
71.v-context>li>a:hover,
72.v-context ul>li>a:focus,
73.v-context ul>li>a:hover {
74  text-decoration: none;
75  color: #212529;
76  background-color: #f8f9fa
77}
78
79.v-context:focus,
80.v-context>li>a:focus,
81.v-context ul:focus,
82.v-context ul>li>a:focus {
83  outline: 0
84}
85
86.v-context__sub>a:after {
87  content: "\2BC8";
88  float: right;
89  padding-left: 1rem
90}
91
92.v-context__sub>ul {
93  display: none
94}
95</style>
96