Skip to content

feat(table): Include native event object with row-* and head-* events #891

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 3 commits into from
Aug 20, 2017
Merged

feat(table): Include native event object with row-* and head-* events #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b8f389
feat(table): Include native event with row-clicked, row-dblclicked, r…
tmorehouse Aug 20, 2017
75533b0
Update meta.json
tmorehouse Aug 20, 2017
af9b589
[table] Update tests
tmorehouse Aug 20, 2017
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
16 changes: 16 additions & 0 deletions docs/components/table/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
{
"arg": "index",
"description": "Index of the row being clicked."
},
{
"arg": "event",
"description": "Native event object"
}
]
},
Expand All @@ -27,6 +31,10 @@
{
"arg": "index",
"description": "Index of the row being double clicked."
},
{
"arg": "event",
"description": "Native event object"
}
]
},
Expand All @@ -41,6 +49,10 @@
{
"arg": "index",
"description": "Index of the row being hovered."
},
{
"arg": "event",
"description": "Native event object"
}
]
},
Expand All @@ -55,6 +67,10 @@
{
"arg": "field",
"description": "Field definition object."
},
{
"arg": "event",
"description": "Native event object"
}
]
},
Expand Down
8 changes: 4 additions & 4 deletions lib/components/table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@
e.stopPropagation();
return;
}
this.$emit('row-clicked', item, index);
this.$emit('row-clicked', item, index, e);
},
rowDblClicked(e, item, index) {
if (this.computedBusy) {
Expand All @@ -488,7 +488,7 @@
e.stopPropagation();
return;
}
this.$emit('row-dblclicked', item, index);
this.$emit('row-dblclicked', item, index, e);
},
rowHovered(e, item, index) {
if (this.computedBusy) {
Expand All @@ -497,7 +497,7 @@
e.stopPropagation();
return;
}
this.$emit('row-hovered', item, index);
this.$emit('row-hovered', item, index, e);
},
headClicked(e, field, key) {
if (this.computedBusy) {
Expand All @@ -523,7 +523,7 @@
sortChanged = true;
}

this.$emit('head-clicked', key, field);
this.$emit('head-clicked', key, field, e);
if (sortChanged) {
// Sorting parameters changed
this.$emit('sort-changed', this.context);
Expand Down
27 changes: 15 additions & 12 deletions tests/components/table.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,31 +320,30 @@ describe('table', async() => {
}
})

it('each data row should emit a row-clicked event with the item,index when clicked', async() => {
it('each data row should emit a row-clicked event when clicked', async() => {
const { app: { $refs, $el } } = window
const vm = $refs.table_paginated
const spy = jest.fn()

vm.$on('row-clicked', spy)
const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY');
expect(tbody).toBeDefined();
if (tbody) {
const trs = [...tbody.children]
expect(trs.length).toBe(vm.perPage)
trs.forEach((tr, idx) => {
const spy = jest.fn()
vm.$on('row-clicked', spy)
tr.click()
expect(spy).toHaveBeenCalledWith(vm.value[idx], idx)
vm.$off('row-clicked', spy)
expect(spy).toHaveBeenCalled()
})
}
})

it('each header th should emit a head-clicked event with key,field when clicked', async() => {
it('each header th should emit a head-clicked event when clicked', async() => {
const { app: { $refs, $el } } = window
const vm = $refs.table_paginated
const spy = jest.fn()
const fieldKeys = Object.keys(vm.fields)

vm.$on('head-clicked', spy)
const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD');
expect(thead).toBeDefined()
if (thead) {
Expand All @@ -354,20 +353,21 @@ describe('table', async() => {
const ths = [...tr.children]
expect(ths.length).toBe(fieldKeys.length)
ths.forEach((th, idx) => {
const spy = jest.fn()
vm.$on('head-clicked', spy)
th.click()
expect(spy).toHaveBeenCalledWith(fieldKeys[idx], vm.fields[fieldKeys[idx]])
vm.$off('head-clicked', spy)
expect(spy).toHaveBeenCalled()
})
}
}
})

it('each footer th should emit a head-clicked event with key,field when clicked', async() => {
it('each footer th should emit a head-clicked event when clicked', async() => {
const { app: { $refs, $el } } = window
const vm = $refs.table_paginated
const spy = jest.fn()
const fieldKeys = Object.keys(vm.fields)

vm.$on('head-clicked', spy)
const tfoot = [...vm.$el.children].find(el => el && el.tagName === 'TFOOT');
expect(tfoot).toBeDefined()
if (tfoot) {
Expand All @@ -377,8 +377,11 @@ describe('table', async() => {
const ths = [...tr.children]
expect(ths.length).toBe(fieldKeys.length)
ths.forEach((th, idx) => {
const spy = jest.fn()
vm.$on('head-clicked', spy)
th.click()
expect(spy).toHaveBeenCalledWith(fieldKeys[idx], vm.fields[fieldKeys[idx]])
vm.$off('head-clicked', spy)
expect(spy).toHaveBeenCalled()
})
}
}
Expand Down