perf(dropdowns): convert templates to render functions (#1314)

* [dropdown mixin] prep for render functions

* Create nav-item-dropdown.js

* Update index.js

* Delete nav-item-dropdown.vue

* Update dropdown.js

* Update dropdown.js

src/components/dropdown/dropdown.js

@@ -1,3 +1,120 @@
-import bDropdown from './dropdown.vue';
+import { idMixin, dropdownMixin } from '../../mixins';
+import bButton from '../button/button';
 
-export default bDropdown;
+export default {
+    mixins: [idMixin, dropdownMixin],
+    components: {bButton},
+    render(h) {
+        const t = this;
+        let split = h(false);
+        if (t.split) {
+            split = h(
+                'b-button',
+                {
+                    ref: 'button',
+                    props: {
+                        disabled: t.disabled,
+                        variant: t.variant,
+                        size: t.size
+                    },
+                    attrs: {
+                        id: t.safeId('_BV_button_')
+                    },
+                    on: {
+                        click: t.click
+                    }
+                },
+                [ t.$slots['button-content'] || t.$slots.text || t.text ]
+            );
+        }
+        const toggle = h(
+            'b-button',
+            {
+                ref: 'toggle',
+                class: {
+                    'dropdown-toggle': !t.noCaret || t.split,
+                    'dropdown-toggle-split': t.split
+                },
+                props: {
+                    variant: t.variant,
+                    size: t.size,
+                    disabled: t.disabled
+                },
+                attrs: {
+                    id: t.safeId('_BV_toggle_'),
+                    'aria-haspopup': 'true',
+                    'aria-expanded': t.visible ? 'true' : 'false'
+                },
+                on: {
+                    click: t.toggle,  // click
+                    keydown: t.toggle // enter, space, down
+                }
+            },
+            [ t.split
+                ? h('span', { class: [ 'sr-only' ] }, [t.toggleText])
+                : (t.$slots['button-content'] || t.$slots.text || t.text) 
+            ]
+        );
+        const menu = h(
+            'div',
+            {
+                ref: 'menu',
+                class: t.menuClasses,
+                attrs: {
+                    role: t.role,
+                    'aria-labelledby': t.safeId(split ? '_BV_toggle_' : '_BV_button_')
+                },
+                on: {
+                    mouseover: t.onMouseOver,
+                    keydown: t.onKeydown      // tab, up, down, esc
+                }
+            },
+            [ this.$slots.default ]
+        );
+        return h('div', { attrs: { id: t.safeId() }, class: t.dropdownClasses }, [split, toggle, menu]);
+    },
+    props: {
+        split: {
+            type: Boolean,
+            default: false
+        },
+        toggleText: {
+            type: String,
+            default: 'Toggle Dropdown'
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        variant: {
+            type: String,
+            default: null
+        },
+        noCaret: {
+            type: Boolean,
+            default: false,
+        },
+        role: {
+            type: String,
+            default: 'menu'
+        }
+    },
+    computed: {
+        dropdownClasses() {
+            return [
+                'btn-group',
+                'b-dropdown',
+                'dropdown',
+                this.dropup ? 'dropup' : '',
+                this.visible ? 'show' : ''
+            ];
+        },
+        menuClasses() {
+            return [
+                'dropdown-menu',
+                this.right ? 'dropdown-menu-right' : '',
+                this.visible ? 'show' : ''
+            ];
+        }
+    }
+};

src/components/nav/index.js

@@ -2,7 +2,7 @@ import bNav from './nav';
 import bNavItem from './nav-item';
 import bNavText from './nav-text';
 import bNavForm from './nav-form';
-import bNavItemDropdown from './nav-item-dropdown.vue';
+import bNavItemDropdown from './nav-item-dropdown';
 import dropdownPlugin from '../dropdown';
 import { registerComponents, vueUse } from '../../utils';
 

src/components/nav/nav-item-dropdown.js

@@ -0,0 +1,80 @@
+import { idMixin, dropdownMixin } from '../../mixins';
+
+export default {
+    mixins: [idMixin, dropdownMixin],
+    render(h) {
+        const t = this;
+        const button = h(
+            'a',
+            {
+                class: t.toggleClasses,
+                ref: 'toggle',
+                attrs: {
+                   href: '#',
+                   id: t.safeId('_BV_button_'),
+                   disabled: t.disabled,
+                   'aria-haspopup': 'true',
+                   'aria-expanded': t.visible ? 'true' : 'false'
+                },
+                on: {
+                    click: t.toggle,
+                    keydown: t.toggle // space, enter, down
+                }
+            },
+            [ t.$slots['button-content'] || t.$slots.text || h('span', { domProps: { innerHTML: t.text } }) ]
+        );
+        const menu = h(
+            'div',
+            {
+                class: t.menuClasses,
+                ref: 'menu',
+                attrs: { 'aria-labelledby': t.safeId('_BV_button_') },
+                on: {
+                    mouseover: t.onMouseOver,
+                    keydown: t.onKeydown // tab, up, down, esc
+                }
+            },
+            [ this.$slots.default ]
+        );
+        return h('li', { attrs: { id: t.safeId() }, class: t.dropdownClasses }, [ button, menu ]);
+    },
+    computed: {
+        isNav() {
+            // Signal to dropdown mixin that we are in a navbar
+            return true;
+        },
+        dropdownClasses() {
+            return [
+                'nav-item',
+                'b-nav-dropdown',
+                'dropdown',
+                this.dropup ? 'dropup' : '',
+                this.visible ? 'show' : ''
+            ];
+        },
+        toggleClasses() {
+            return [
+                'nav-link',
+                this.noCaret ? '' : 'dropdown-toggle',
+                this.disabled ? 'disabled' : ''
+            ];
+        },
+        menuClasses() {
+            return [
+                'dropdown-menu',
+                this.right ? 'dropdown-menu-right': 'dropdown-menu-left',
+                this.visible ? 'show' : ''
+            ];
+        }
+    },
+    props: {
+        noCaret: {
+            type: Boolean,
+            default: false
+        },
+        role: {
+            type: String,
+            default: 'menu'
+        }
+    }
+};