Wijmo 5 Hierarchical Menus [Vue2]

by Manish Gupta

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20182.524/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/interop/vue2/wijmo.vue2.min.js"></script>


<div id="app">
  <h3>
  {{message}}
  </h3>
  <div style='float:right;'>
  <wj-menu :items-source="menuItems" header="File" display-member-path="header" sub-items-path="items" :open-on-hover="true" :item-clicked="itemClicked" :is-dropped-down-changed="dropDownChanging" ></wj-menu>
  </div>
</div>

CSS

#app{
  margin:50px 0;
}

/* customize wijmo default styles */

.wj-state-selected {
  color: black;
  background: orange;
}

.wj-menu {
  padding: 6px 14px;
  background-color:lightcoral;
}

.wj-menu:hover,
.wj-menu.wj-state-focused {
  background: lightcoral;
}

.wj-menu .wj-input-group .wj-input-group-btn {
  display: none;
  /* hide the menu's drop-down buttons */
}

.wj-listbox.wj-menu-items {
  min-width: 8em;
  border: none;
  background: #fddfa7;
}

.wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) {
  padding: 6px 25px !important;
}

.wj-listbox.wj-menu-items:not(.wj-rtl) .wj-listbox-item.wj-subitems:after{
  transform:rotate(180deg);
  right: 7.0em!important;
}
.wj-listbox.wj-menu-items .wj-listbox-item.wj-subitems:after{
  top:30%;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Wijmo with Vue2!',
    menuItems:getFileMenuItems()
  },
  methods:{
  	itemClicked:function(s,e){alert('Thank you for clicking ***' + s.text + '***!')},
    dropDownChanging:function(s,e){
    	if(s.isDroppedDown){
      	var subItems = s.dropDown.querySelectorAll(".wj-subitems");
        for(var i=0;i< subItems.length;i++){
        subItems[i].addEventListener("mousemove",function(e){
          	setTimeout(function(){
            	var subMenu = document.querySelector("#_dropdown0");
              
              if(subMenu){
              	var menuLeft = parseInt(s.dropDown.style.left);
                var _left=parseInt(subMenu.style.left);
                console.log(menuLeft , parseInt(subMenu.style.left))
              	if(menuLeft <= parseInt(subMenu.style.left)){
              			var menuClientWidth = s.dropDown.clientWidth;
              			 _left = menuLeft-menuClientWidth;
              	}
                subMenu.style.left = _left+"px";	
              }
            },500);
          },true);
        	subItems[i].addEventListener("click",function(e){
          	setTimeout(function(){
            	var subMenu = document.querySelector("#_dropdown0");
              var menuClientWidth = s.dropDown.clientWidth;
              var menuLeft = parseInt(s.dropDown.style.left);
              var _left = menuLeft-menuClientWidth;
              subMenu.style.left = _left+"px";
            });
          },true);
        }
      }
    }
  }
})

function getFileMenuItems() {
    return [{
        header: 'New',
        items: [{
            header: 'Project'
          },
          {
            header: 'Site'
          },
          {
            header: 'File'
          },
        ]
      },
      {
        header: 'Open'
      },
      {
        header: 'Save'
      },
      {
        header: 'Save As',
        items: [{
            header: 'Normal'
          },
          {
            header: 'Compressed'
       ...