Permalink
Browse files

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
  • Loading branch information...
tmorehouse committed Nov 10, 2017
1 parent 88657fb commit 3168e93f1c70d2064a7afe8bfa2d3965ec440f65
@@ -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' : ''
];
}
}
};
@@ -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';
@@ -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'
}
}
};

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 3168e93

Please sign in to comment.