Support sub-menu for dropdown

docs/userGuide/syntax/dropdowns.mbdf

@@ -56,6 +56,23 @@
 </variable>
 </include>
 
+**You can also use create multi-level submenu by nesting Dropdowns.**
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<!-- Can simply nest the dropdown syntax -->
+<dropdown header="*Multi-Level Dropdown*" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  <dropdown header="*Submenu*">
+    <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+    <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  </dropdown>
+</dropdown>
+</variable>
+</include>
+
 ****Options****
 
 Name | Type | Default | Description

packages/vue-components/src/Dropdown.vue

@@ -13,6 +13,13 @@
       </ul>
     </slot>
   </li>
+  <submenu v-else-if="isSubmenu" ref="submenu">
+    <slot slot="button" name=button></slot>
+    <slot slot="_header" name="_header"></slot>
+    <slot slot="header" name="header"></slot>
+    <slot slot="dropdown-submenu" name="dropdown-menu"></slot>
+    <slot></slot>
+  </submenu>
   <div v-else ref="dropdown" :class="classes">
     <slot name="before"></slot>
     <slot name="button">
@@ -72,6 +79,7 @@ export default {
       return toBoolean(this.disabled);
     },
     isLi () { return this.$parent._navbar || this.$parent.menu || this.$parent._tabset },
+    isSubmenu() { return this.$parent._dropdown || this.$parent._submenu },
     menu () {
       return !this.$parent || this.$parent.navbar
     },
@@ -112,7 +120,10 @@ export default {
     showDropdownMenu() {
       this.show = true;
       $(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', true));
-    },
+    }
+  },
+  created() {
+    this._dropdown = true;
   },
   mounted () {
     const $el = $(this.$refs.dropdown)
@@ -130,7 +141,10 @@ export default {
       }
       return false
     })
-    $el.findChildren('ul').on('click', 'li>a', e => { this.hideDropdownMenu() })
+    $el.findChildren('ul').on('click', 'li>a', e => { 
+      if (e.target.classList.contains('submenu-toggle')) { return }
+      this.hideDropdownMenu();
+    })
   },
   beforeDestroy () {
     const $el = $(this.$refs.dropdown)

packages/vue-components/src/Navbar.vue

@@ -126,9 +126,19 @@ export default {
     isExact(url, href) {
       return normalizeUrl(url) === normalizeUrl(href);
     },
-    addClassIfDropdown(dropdownLinks, a) {
+    addClassIfDropdown(dropdownLinks, a, li) {
       if (dropdownLinks.includes(a)) {
         a.classList.add('dropdown-current');
+        this.addClassIfSubmenu(a, li);
+      }
+    },
+    addClassIfSubmenu(a, li) {
+      let el = a.parentElement;
+      while (el != li) {
+        if (el.classList.contains('dropdown-submenu')) {
+          $(el).findChildren('a').each(a => a.classList.add('dropdown-current'));
+        }
+        el = el.parentElement;
       }
     },
     highlightLink(url) {
@@ -148,7 +158,7 @@ export default {
           // terminate early on an exact match
           if (this.isExact(url, a.href)) {
             li.classList.add('current');
-            this.addClassIfDropdown(dropdownLinks, a);
+            this.addClassIfDropdown(dropdownLinks, a, li);
             return;
           }
         }
@@ -167,19 +177,19 @@ export default {
           if (hlMode === 'sibling-or-child') {
             if (this.isSibling(url, a.href) || this.isChild(url, a.href)) {
               li.classList.add('current');
-              this.addClassIfDropdown(dropdownLinks, a);
+              this.addClassIfDropdown(dropdownLinks, a, li);
               return;
             }
           } else if (hlMode === 'sibling') {
             if (this.isSibling(url, a.href)) {
               li.classList.add('current');
-              this.addClassIfDropdown(dropdownLinks, a);
+              this.addClassIfDropdown(dropdownLinks, a, li);
               return;
             }
           } else if (hlMode === 'child') {
             if (this.isChild(url, a.href)) {
               li.classList.add('current');
-              this.addClassIfDropdown(dropdownLinks, a);
+              this.addClassIfDropdown(dropdownLinks, a, li);
               return;
             }
           } else {
@@ -209,6 +219,7 @@ export default {
       });
     });
     $(this.$el).on('click', 'li:not(.dropdown)>a', (e) => {
+      if (e.target.classList.contains('submenu-toggle')) { return }
       setTimeout(() => { this.collapsed = true; }, 200);
     }).onBlur((e) => {
       if (!this.$el.contains(e.target)) { this.collapsed = true; }
@@ -241,7 +252,7 @@ export default {
   }
 
   >>> .dropdown-current {
-    color: #fff;
+    color: #fff !important;
     background: #007bff;
   }
 </style>

packages/vue-components/src/Submenu.vue

@@ -0,0 +1,177 @@
+<template>
+  <li ref="submenu" :class="classes">
+    <slot name="button">
+      <a
+        class="submenu-toggle"
+        role="button"
+        :class="{disabled: disabled}"
+      >
+        <slot name="_header">
+          <slot name="header"></slot>
+        </slot>
+      </a>
+    </slot>
+    <slot name="dropdown-menu">
+      <ul class="dropdown-menu">
+        <slot></slot>
+      </ul>
+    </slot>
+  </li>
+</template>
+
+<script>
+import { toBoolean } from './utils/utils';
+import $ from './utils/NodeList';
+import positionSubmenu from './utils/submenu';
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    'class': null,
+    addClass: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dropright: true,
+      dropleft: false,
+    };
+  },
+  computed: {
+    classes() {
+      return [
+        this.class, this.addClass, 'dropdown-submenu',
+        { 'dropright': this.dropright, 'dropleft': this.dropleft },
+      ];
+    },
+    disabledBool() {
+      return toBoolean(this.disabled);
+    },
+    showBool() {
+      return toBoolean(this.show);
+    },
+    slots() {
+      return this.$slots.default;
+    },
+  },
+  methods: {
+    hideSubmenu() {
+      this.show = false;
+      $(this.$refs.submenu).findChildren('ul').each(ul => ul.classList.toggle('show', false));
+      this.alignMenuRight();
+    },
+    showSubmenu() {
+      this.show = true;
+      $(this.$refs.submenu).findChildren('ul').each((ul) => {
+        ul.classList.toggle('show', true);
+        if (positionSubmenu.isRightAlign(ul)) {
+          this.alignMenuRight();
+        } else {
+          this.alignMenuLeft();
+        }
+        positionSubmenu.preventOverflow(ul);
+      });
+    },
+    alignMenuRight() {
+      this.dropright = true;
+      this.dropleft = false;
+    },
+    alignMenuLeft() {
+      this.dropright = false;
+      this.dropleft = true;
+    },
+  },
+  created() {
+    this._submenu = true;
+  },
+  mounted() {
+    const $el = $(this.$refs.submenu);
+    if (this.show) {
+      this.showSubmenu();
+    }
+    $el.onBlur(() => { this.hideSubmenu(); }, false);
+    $el.findChildren('a,button').on('click', (e) => {
+      e.preventDefault();
+      if (this.disabledBool) { return false; }
+      if (this.showBool) {
+        this.hideSubmenu();
+      } else {
+        this.showSubmenu();
+      }
+      return false;
+    });
+    $el.findChildren('a,button').on('mouseover', (e) => {
+      e.preventDefault();
+      if (window.innerWidth > 768) {
+        e.target.click();
+      }
+    });
+  },
+  beforeDestroy() {
+    const $el = $(this.$refs.submenu);
+    $el.offBlur();
+    $el.findChildren('a,button').off();
+    $el.findChildren('ul').off();
+  },
+};
+</script>
+
+<style scoped>
+.dropdown-submenu {
+  color: #212529 !important;
+  padding: 0 !important;
+  position: relative;
+}
+
+@media (max-width: 767px) {
+  .dropdown-submenu > ul {
+    padding-bottom: 0;
+    border-radius: 0;
+    margin: -.05rem;
+  }
+}
+
+.submenu-toggle {
+  display: inline-block;
+  width: 100%;
+  padding: .25rem .75rem .25rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .submenu-toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid transparent;
+    border-right: 0;
+    border-bottom: .3em solid transparent;
+    border-left: .3em solid;
+    float: right;
+    margin-top: .5em;
+  }
+}
+
+@media (max-width: 767px) {
+  .submenu-toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid;
+    border-right: .3em solid transparent;
+    border-bottom: 0;
+    border-left: .3em solid transparent;
+    float: right;
+    margin-top: .5em;
+  }
+}
+</style>

packages/vue-components/src/__tests__/Dropdown.spec.js

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Dropdown from '../Dropdown.vue';
+import Submenu from '../Submenu.vue';
+
+const DEFAULT_STUBS = {
+  'dropdown': Dropdown,
+  'submenu': Submenu,
+};
+
+const DROPDOWN = `
+<li><a href="#" class="dropdown-item">Dropdown Item 1</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 2</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 3</a></li>
+`;
+
+const FIRST_LEVEL_NESTED_DROPDOWN = `
+${DROPDOWN}
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+</dropdown>
+`;
+
+const SECOND_LEVEL_NESTED_DROPDOWN = `
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+  <dropdown haeder="Submenu Level 2">
+    <li><a href="#" class="dropdown-item">Nested Submenu Item</a></li>
+  </dropdown>
+</dropdown>
+`;
+
+describe('Dropdown with submenu', () => {
+  test('dropdown', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with one level of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: FIRST_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with two levels of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: SECOND_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});