Skip to content

Commit d51f465

Browse files
authored
Pr/63 (#74)
* Modifiers in v-stream directive stopPropagation and preventDefault * Fix modifiersExists usage * fix typing & add test
1 parent a349877 commit d51f465

File tree

2 files changed

+37
-0
lines changed

2 files changed

+37
-0
lines changed

src/directives/stream.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,21 @@ export default {
2424
return
2525
}
2626

27+
const modifiersFuncs = {
28+
stop: e => e.stopPropagation(),
29+
prevent: e => e.preventDefault()
30+
}
31+
32+
var modifiersExists = Object.keys(modifiersFuncs).filter(
33+
key => modifiers[key]
34+
)
35+
2736
const subject = handle.subject
2837
const next = (subject.next || subject.onNext).bind(subject)
2938

3039
if (!modifiers.native && vnode.componentInstance) {
3140
handle.subscription = vnode.componentInstance.$eventToObservable(event).subscribe(e => {
41+
modifiersExists.forEach(mod => modifiersFuncs[mod](e))
3242
next({
3343
event: e,
3444
data: handle.data
@@ -46,6 +56,7 @@ export default {
4656
}
4757
const fromEventArgs = handle.options ? [el, event, handle.options] : [el, event]
4858
handle.subscription = Rx.Observable.fromEvent(...fromEventArgs).subscribe(e => {
59+
modifiersExists.forEach(mod => modifiersFuncs[mod](e))
4960
next({
5061
event: e,
5162
data: handle.data

test/test.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,32 @@ test('v-stream directive (with .native modify)', done => {
203203
})
204204
})
205205

206+
test('v-stream directive (with .stop, .prevent modify)', done => {
207+
const vm = new Vue({
208+
template: `
209+
<form>
210+
<span>{{stoped}} {{prevented}}</span>
211+
<button id="btn-stop" v-stream:click.stop="clickStop$">Stop</button>
212+
<button id="btn-prevent" type="submit" v-stream:click.prevent="clickPrevent$">Submit</button>
213+
</form>
214+
`,
215+
domStreams: ['clickStop$', 'clickPrevent$'],
216+
subscriptions () {
217+
return {
218+
stoped: this.clickStop$.map(x => x.event.cancelBubble),
219+
prevented: this.clickPrevent$.map(x => x.event.defaultPrevented)
220+
}
221+
}
222+
}).$mount()
223+
224+
click(vm.$el.querySelector('#btn-stop'))
225+
click(vm.$el.querySelector('#btn-prevent'))
226+
nextTick(() => {
227+
expect(vm.$el.querySelector('span').textContent).toBe('true true')
228+
done()
229+
})
230+
})
231+
206232
test('v-stream directive (with data)', done => {
207233
const vm = new Vue({
208234
data: {

0 commit comments

Comments
 (0)