Skip to content

feat(dropdown): Make show/hide events cancelable + Add toggle event #1807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 17, 2018
Merged

feat(dropdown): Make show/hide events cancelable + Add toggle event #1807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f2f05f4
Make dropdown show/hide events cancelable
jacobmllr95 May 9, 2018
20a1e3a
Make dropdown toggle click cancelable
jacobmllr95 May 9, 2018
0f63f15
Not a const
jacobmllr95 May 9, 2018
94455a8
Fix lint
jacobmllr95 May 9, 2018
6c2217e
Better comments
jacobmllr95 May 9, 2018
7334b67
Improve dropdown event documentation
jacobmllr95 May 9, 2018
a7615e9
Add missing `emitEvent` method
jacobmllr95 May 9, 2018
9f2ced0
Use `emitOnRoot` method
jacobmllr95 May 9, 2018
3d88e67
Make sure to actuelly reset the `visible` value to keep the menu state
jacobmllr95 May 9, 2018
57bce17
Fix duplicate event triggering when resetting the `visible` value
jacobmllr95 May 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions src/components/dropdown/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,47 @@
"bDropdownDivider"
],
"events": [
{
"event": "show",
"description": "Emitted just before dropdown is shown. Cancelable.",
"args": [
{
"arg": "bvEvt",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel show."
}
]
},
{
"event": "shown",
"description": "Emitted When dropdown is shown"
"description": "Emitted when dropdown is shown."
},
{
"event": "hide",
"description": "Emitted just before dropdown is hidden. Cancelable.",
"args": [
{
"arg": "bvEvt",
"description": "BvEvent object. Call bvEvt.preventDefault() to cancel hide."
}
]
},
{
"event": "hidden",
"description": "Emitted When dropdown is hidden"
"description": "Emitted when dropdown is hidden."
},
{
"event": "toggle",
"description": "Emitted when toggle button is clicked."
},
{
"event": "click",
"description": "Emitted when split button clicked in split mode."
"description": "Emitted when split button is clicked in split mode."
}
],
"slots": [
{
"name": "button-content",
"description": "Can be used to implement custom text with icons and more styling"
"description": "Can be used to implement custom text with icons and more styling."
},
{
"name": "text",
Expand Down
58 changes: 42 additions & 16 deletions src/mixins/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import listenOnRootMixin from './listen-on-root'
import { from as arrayFrom } from '../utils/array'
import { assign } from '../utils/object'
import KeyCodes from '../utils/key-codes'
import BvEvent from '../utils/bv-event.class'
import warn from '../utils/warn'
import { isVisible, closest, selectAll, getAttr, eventOn, eventOff } from '../utils/dom'

Expand Down Expand Up @@ -68,7 +69,8 @@ export default {
data () {
return {
visible: false,
inNavbar: null
inNavbar: null,
visibleChangePrevented: false
}
},
created () {
Expand Down Expand Up @@ -97,19 +99,36 @@ export default {
this.removePopper()
},
watch: {
visible (state, old) {
if (state === old) {
// Avoid duplicated emits
visible (newValue, oldValue) {
if (this.visibleChangePrevented) {
this.visibleChangePrevented = false
return
}
if (state) {
this.showMenu()
} else {
this.hideMenu()

if (newValue !== oldValue) {
const evtName = newValue ? 'show' : 'hide'
let bvEvt = new BvEvent(evtName, {
cancelable: true,
vueTarget: this,
target: this.$refs.menu,
relatedTarget: null
})
this.emitEvent(bvEvt)
if (bvEvt.defaultPrevented) {
// Reset value and exit if canceled
this.visibleChangePrevented = true
this.visible = oldValue
return
}
if (evtName === 'show') {
this.showMenu()
} else {
this.hideMenu()
}
}
},
disabled (state, old) {
if (state !== old && state && this.visible) {
disabled (newValue, oldValue) {
if (newValue !== oldValue && newValue && this.visible) {
// Hide dropdown if disabled changes to true
this.visible = false
}
Expand All @@ -121,12 +140,16 @@ export default {
}
},
methods: {
// Event emitter
emitEvent (bvEvt) {
const type = bvEvt.type
this.$emit(type, bvEvt)
this.emitOnRoot(`bv::dropdown::${type}`, bvEvt)
},
showMenu () {
if (this.disabled) {
return
}
// TODO: move emit show to visible watcher, to allow cancelling of show
this.$emit('show')
// Ensure other menus are closed
this.emitOnRoot('bv::dropdown::shown', this)

Expand Down Expand Up @@ -157,8 +180,6 @@ export default {
this.$nextTick(this.focusFirstItem)
},
hideMenu () {
// TODO: move emit hide to visible watcher, to allow cancelling of hide
this.$emit('hide')
this.setTouchStart(false)
this.emitOnRoot('bv::dropdown::hidden', this)
this.$emit('hidden')
Expand Down Expand Up @@ -258,12 +279,17 @@ export default {
// We only toggle on Click, Enter, Space, and Arrow Down
return
}
evt.preventDefault()
evt.stopPropagation()
if (this.disabled) {
this.visible = false
return
}
this.$emit('toggle', evt)
if (evt.defaultPrevented) {
// Exit if canceled
return
}
evt.preventDefault()
evt.stopPropagation()
// Toggle visibility
this.visible = !this.visible
},
Expand Down