Added an indication to menu items that there are child items

Author: Johnathan Barrett

package.json

@@ -19,7 +19,7 @@
  "url": "https://github.com/Johnathan/vue-context-menu-popup/issues",
  "email": "johnathan.barrett@gmail.com"
  },
- "version": "1.0.1",
+ "version": "1.0.2",
  "private": false,
  "scripts": {
  "serve": "vue-cli-service serve ./example/main.js --open",

src/components/ContextMenu.vue

@@ -120,6 +120,16 @@ export default {
  padding: .5em 1em;
  cursor: pointer;
 
+ .label {
+ display: flex;
+ justify-content: space-between;
+ white-space: nowrap;
+
+ .item-label {
+ margin-right: 1em;
+ }
+ }
+
  &.item-disabled {
  cursor: not-allowed;
  opacity: 0.3;
@@ -136,7 +146,7 @@ export default {
  left: calc(100% + 2px);
  top: 0;
  display: block;
- width: 100%;
+ min-width: 100%;
  }
  }
  }

src/components/ContextMenuItem.vue

@@ -1,6 +1,9 @@
 <template>
  <li @click="handleClick(item, $event)" :class="itemClass(item)">
- {{item.label}}
+ <div class="label">
+ <span class="item-label">{{item.label}}</span>
+ <span class="children-indicator" v-if="item.children">▶</span>
+ </div>
  <ul class="context-menu" v-if="item.children">
  <context-menu-item
  v-for="(childItem, index) in item.children"