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