Skip to content
/ coreui-vue Public
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8976054

Browse files
woothuwoothu
committedJun 29, 2020
feat: CDataTable: replace cleaner prop object with slot
1 parent 3bb6c1f commit 8976054

File tree

4 files changed

+81
-62
lines changed

4 files changed

+81
-62
lines changed
 

‎src/components/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ export declare class CDataTable extends Vue {
596596
noItemsView?: {
597597
noItems?: string, noResults?: string
598598
}
599-
cleaner: string | CIcon
599+
cleaner: boolean
600600
}
601601

602602
export declare class CTabs extends Vue {

‎src/components/table/CDataTable.vue

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,40 @@
11
<template>
22
<div>
3-
<div v-if="itemsPerPageSelect || tableFilter" class="row my-2 mx-0">
3+
<div
4+
v-if="itemsPerPageSelect || haveFilterOption"
5+
class="row my-2 mx-0"
6+
>
47
<div
58
class="col-sm-6 form-inline p-0"
6-
v-if="tableFilter"
9+
v-if="haveFilterOption"
710
>
8-
<label class="mr-2">{{tableFilterData.label}}</label>
9-
<input
10-
class="form-control"
11-
type="text"
12-
:placeholder="tableFilterData.placeholder"
13-
@input="tableFilterChange($event.target.value, 'input')"
14-
@change="tableFilterChange($event.target.value, 'change')"
15-
:value="tableFilterState"
16-
aria-label="table filter input"
17-
>
11+
<template v-if="tableFilter">
12+
<label class="mr-2">{{tableFilterData.label}}</label>
13+
<input
14+
class="form-control"
15+
type="text"
16+
:placeholder="tableFilterData.placeholder"
17+
@input="tableFilterChange($event.target.value, 'input')"
18+
@change="tableFilterChange($event.target.value, 'change')"
19+
:value="tableFilterState"
20+
aria-label="table filter input"
21+
>
22+
</template>
23+
<slot name="cleaner" :clean="clean" :isFiltered="isFiltered">
24+
<template v-if="cleaner">
25+
<CIcon
26+
v-if="cleaner"
27+
v-bind="cleanerProps"
28+
@click.native="clean"
29+
/>
30+
</template>
31+
</slot>
1832
</div>
1933

2034
<div
2135
v-if="itemsPerPageSelect"
2236
class="col-sm-6 p-0"
23-
:class="{ 'offset-sm-6': !tableFilter }"
37+
:class="{ 'offset-sm-6': !haveFilterOption }"
2438
>
2539
<div class="form-inline justify-content-sm-end">
2640
<label class="mr-2">{{paginationSelect.label}}</label>
@@ -40,11 +54,7 @@
4054
{{number}}
4155
</option>
4256
</select>
43-
<CIcon
44-
v-if="cleaner"
45-
v-bind="cleanerProps"
46-
@click.native="clean"
47-
/>
57+
4858
</div>
4959
</div>
5060
</div>
@@ -76,7 +86,7 @@
7686
width="18"
7787
:content="$options.icons.cilArrowTop"
7888
:class="iconClasses(index)"
79-
aria-label="change column sorting"
89+
:aria-label="`change column: '${name}' sorting`"
8090
/>
8191
</slot>
8292
</th>
@@ -88,12 +98,13 @@
8898
<th :class="headerClass(index)" :key="index">
8999
<slot :name="`${rawColumnNames[index]}-filter`">
90100
<input
91-
v-if="!fields || fields[index].filter !== false"
101+
v-if="itemsDataColumns.includes(colName) &&
102+
(!fields || fields[index].filter !== false)"
92103
class="form-control form-control-sm"
93104
@input="columnFilterEvent(colName, $event.target.value, 'input')"
94105
@change="columnFilterEvent(colName, $event.target.value, 'change')"
95106
:value="columnFilterState[colName]"
96-
:aria-label="`column name: ${colName} filter input`"
107+
:aria-label="`column name: '${colName}' filter input`"
97108
/>
98109
</slot>
99110
</th>
@@ -275,7 +286,7 @@ export default {
275286
loading: Boolean,
276287
clickableRows: Boolean,
277288
noItemsView: Object,
278-
cleaner: [Boolean, Object]
289+
cleaner: Boolean
279290
},
280291
data () {
281292
return {
@@ -351,6 +362,11 @@ export default {
351362
})
352363
return items
353364
},
365+
itemsDataColumns () {
366+
return this.rawColumnNames.filter(name => {
367+
return this.generatedColumnNames.includes(name)
368+
})
369+
},
354370
tableFiltered () {
355371
let items = this.columnFiltered
356372
if (!this.tableFilterState || (this.tableFilter && this.tableFilter.external)) {
@@ -359,7 +375,7 @@ export default {
359375
const filter = this.tableFilterState.toLowerCase()
360376
const hasFilter = (item) => String(item).toLowerCase().includes(filter)
361377
items = items.filter(item => {
362-
return this.rawColumnNames.filter(key => hasFilter(item[key])).length
378+
return this.itemsDataColumns.filter(key => hasFilter(item[key])).length
363379
})
364380
return items
365381
},
@@ -454,17 +470,21 @@ export default {
454470
}
455471
return customValues.noItems || 'No items'
456472
},
473+
isFiltered () {
474+
return this.tableFilterState ||
475+
Object.values(this.columnFilterState).join('') ||
476+
this.sorterState.column
477+
},
457478
cleanerProps () {
458-
if (typeof this.cleaner === 'object') {
459-
return this.cleaner
460-
}
461-
const isFiltered = this.tableFilterState ||
462-
Object.keys(this.columnFilterState).length ||
463-
this.sorterState.column
464479
return {
465480
content: this.$options.icons.cilFilterX,
466-
class: `ml-2 ${isFiltered ? 'text-danger' : 'transparent'}`
481+
class: `ml-2 ${this.isFiltered ? 'text-danger' : 'transparent'}`,
482+
role: this.isFiltered ? 'button' : null,
483+
tabindex: this.isFiltered ? 0 : null,
467484
}
485+
},
486+
haveFilterOption () {
487+
return this.tableFilter || this.cleaner || this.$scopedSlots.cleaner
468488
}
469489
},
470490
methods: {
@@ -518,7 +538,9 @@ export default {
518538
return classes
519539
},
520540
isSortable (index) {
521-
return this.sorter && (!this.fields || this.fields[index].sorter !== false)
541+
return this.sorter &&
542+
(!this.fields || this.fields[index].sorter !== false) &&
543+
this.itemsDataColumns.includes(this.rawColumnNames[index])
522544
},
523545
headerClass (index) {
524546
const fields = this.fields

‎src/components/table/tests/CDataTable.spec.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -233,9 +233,5 @@ describe(ComponentName, () => {
233233
expect(icon.classes()).toContain('text-danger')
234234
icon.trigger('click')
235235
expect(icon.classes()).toContain('transparent')
236-
localWrapper.setProps({
237-
cleaner: {}
238-
})
239-
expect(icon.classes()).not.toContain('transparent')
240236
})
241237
})

‎src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,25 @@ exports[`CDataTable renders correctly 2`] = `
8282
placeholder="type string..."
8383
type="text"
8484
/>
85+
86+
<svg
87+
class="c-icon ml-2 text-danger"
88+
role="button"
89+
tabindex="0"
90+
viewBox="0 0 512 512"
91+
xmlns="http://www.w3.org/2000/svg"
92+
>
93+
<polygon
94+
class="ci-primary"
95+
fill="var(--ci-primary-color, currentColor)"
96+
points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16"
97+
/>
98+
<polygon
99+
class="ci-primary"
100+
fill="var(--ci-primary-color, currentColor)"
101+
points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225"
102+
/>
103+
</svg>
85104
</div>
86105
87106
<div
@@ -140,24 +159,6 @@ exports[`CDataTable renders correctly 2`] = `
140159
141160
</option>
142161
</select>
143-
144-
<svg
145-
class="c-icon ml-2 text-danger"
146-
role="img"
147-
viewBox="0 0 512 512"
148-
xmlns="http://www.w3.org/2000/svg"
149-
>
150-
<polygon
151-
class="ci-primary"
152-
fill="var(--ci-primary-color, currentColor)"
153-
points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16"
154-
/>
155-
<polygon
156-
class="ci-primary"
157-
fill="var(--ci-primary-color, currentColor)"
158-
points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225"
159-
/>
160-
</svg>
161162
</div>
162163
</div>
163164
</div>
@@ -180,7 +181,7 @@ exports[`CDataTable renders correctly 2`] = `
180181
</div>
181182
182183
<svg
183-
aria-label="change column sorting"
184+
aria-label="change column: 'Username' sorting"
184185
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
185186
role="img"
186187
viewBox="0 0 512 512"
@@ -203,7 +204,7 @@ exports[`CDataTable renders correctly 2`] = `
203204
</div>
204205
205206
<svg
206-
aria-label="change column sorting"
207+
aria-label="change column: 'Registered' sorting"
207208
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
208209
role="img"
209210
viewBox="0 0 512 512"
@@ -226,7 +227,7 @@ exports[`CDataTable renders correctly 2`] = `
226227
</div>
227228
228229
<svg
229-
aria-label="change column sorting"
230+
aria-label="change column: 'Role' sorting"
230231
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
231232
role="img"
232233
viewBox="0 0 512 512"
@@ -249,7 +250,7 @@ exports[`CDataTable renders correctly 2`] = `
249250
</div>
250251
251252
<svg
252-
aria-label="change column sorting"
253+
aria-label="change column: 'Status' sorting"
253254
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
254255
role="img"
255256
viewBox="0 0 512 512"
@@ -282,31 +283,31 @@ exports[`CDataTable renders correctly 2`] = `
282283
class="user-custom-class"
283284
>
284285
<input
285-
aria-label="column name: username filter input"
286+
aria-label="column name: 'username' filter input"
286287
class="form-control form-control-sm"
287288
/>
288289
</th>
289290
<th
290291
class=""
291292
>
292293
<input
293-
aria-label="column name: registered filter input"
294+
aria-label="column name: 'registered' filter input"
294295
class="form-control form-control-sm"
295296
/>
296297
</th>
297298
<th
298299
class=""
299300
>
300301
<input
301-
aria-label="column name: role filter input"
302+
aria-label="column name: 'role' filter input"
302303
class="form-control form-control-sm"
303304
/>
304305
</th>
305306
<th
306307
class=""
307308
>
308309
<input
309-
aria-label="column name: status filter input"
310+
aria-label="column name: 'status' filter input"
310311
class="form-control form-control-sm"
311312
/>
312313
</th>

0 commit comments

Comments
 (0)
Please sign in to comment.