@mekari/mekari-ui-vue/src/plugins/Dropdown/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

const install = function (Vue) {
  const negativeActions = ['mouseleave', 'mouseout'];
  negativeActions.forEach(action => {
    Vue.directive(`dropdown-${action}`, {
      bind(el, binding, vnode) {
        const dropdownWrapper = el;
        dropdownWrapper.addEventListener(`${action}`, e => {
          if (e.relatedTarget.closest('.dropdown') !== dropdownWrapper) {
            vnode.context.toggleShowDropdown = false;
          };
        });
      },
    });
  });
  const positiveActions = ['click', 'mousedown', 'mouseover', 'mouseenter'];
  positiveActions.forEach(action => {
    Vue.directive(`dropdown-${action}`, {
      bind(el, binding, vnode) {
        const dropdownWrapper = el;
        dropdownWrapper.addEventListener(`${action}`, () => {
          vnode.context.toggleShowDropdown = true;
        });
      },
    });
  });
  Vue.prototype.$dropdownPlugin = {
    getContentDepth(content) {
      let maxDepth = 1;
      content.forEach(element => {
        if (element.children && element.children.length) {
          const currentDepth = this.getContentDepth(element.children) + 1;
          if (currentDepth > maxDepth) {
            maxDepth = currentDepth;
          }
        }
      });
      return maxDepth;
    },
    getSlotName(slotNumber) {
      return `menu-${slotNumber}`;
    },
    findContentFromElement(content, element) {
      let output = {};
      output = content.find(el => el.id === element.id);
      if (output) {
        return output;
      }
      output = content.forEach(el => {
        if (el.children) {
          return this.findContentFromElement(el.children, element);
        }
        return undefined;
      });
      return output;
    },
  };
};

export default install;