Skip to content

Commit cf58305

Browse files
woothuwoothu
committed
feat: CDataTable: add cleaner prop, update @coreui/icons
1 parent a3c90f3 commit cf58305

File tree

6 files changed

+106
-34
lines changed

6 files changed

+106
-34
lines changed

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
"auto-changelog": "auto-changelog --template changelog-template.hbs --commit-limit false --package"
7070
},
7171
"dependencies": {
72-
"@coreui/icons": "^1.0.1",
72+
"@coreui/icons": "^2.0.0-beta.4",
7373
"@coreui/icons-vue": "^1.3.5",
7474
"@coreui/utils": "^1.3.1",
7575
"@popperjs/core": "~2.4.0",

‎src/components/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,7 @@ export declare class CDataTable extends Vue {
592592
noItemsView?: {
593593
noItems?: string, noResults?: string
594594
}
595+
cleaner: string | CIcon
595596
}
596597

597598
export declare class CTabs extends Vue {

‎src/components/table/CDataTable.vue

+26-3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@
3838
{{number}}
3939
</option>
4040
</select>
41+
<CIcon
42+
v-if="cleaner"
43+
v-bind="cleanerProps"
44+
@click.native="clean"
45+
/>
4146
</div>
4247
</div>
4348
</div>
@@ -216,11 +221,11 @@
216221
import CElementCover from '../element-cover/CElementCover'
217222
import CPagination from '../pagination/CPagination'
218223
import CIcon from '@coreui/icons-vue/src/CIconRaw.vue'
219-
import { cilArrowTop, cilBan } from '@coreui/icons'
224+
import { cilArrowTop, cilBan, cilFilterX } from '@coreui/icons'
220225
221226
export default {
222227
name: 'CDataTable',
223-
icons: { cilArrowTop, cilBan },
228+
icons: { cilArrowTop, cilBan, cilFilterX },
224229
components: {
225230
CPagination,
226231
CElementCover,
@@ -264,7 +269,8 @@ export default {
264269
footer: Boolean,
265270
loading: Boolean,
266271
clickableRows: Boolean,
267-
noItemsView: Object
272+
noItemsView: Object,
273+
cleaner: [Boolean, Object]
268274
},
269275
data () {
270276
return {
@@ -447,6 +453,18 @@ export default {
447453
return customValues.noResults || 'No filtering results'
448454
}
449455
return customValues.noItems || 'No items'
456+
},
457+
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
464+
return {
465+
content: this.$options.icons.cilFilterX,
466+
class: `ml-2 ${isFiltered ? 'text-danger' : 'transparent'}`
467+
}
450468
}
451469
},
452470
methods: {
@@ -554,6 +572,11 @@ export default {
554572
objectsAreIdentical (obj1, obj2) {
555573
return obj1.length === obj2.length &&
556574
JSON.stringify(obj1) === JSON.stringify(obj2)
575+
},
576+
clean() {
577+
this.tableFilterState = ""
578+
this.columnFilterState = {}
579+
this.sorterState = { column: "", asc: true }
557580
}
558581
}
559582
}

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ function createCustomWrapper () {
4646
footer: true,
4747
sorterValue: { column: 'username', asc: false },
4848
columnFilterValue: { registered: '2', 'non_existing': 'smh' },
49-
pagination: true
49+
pagination: true,
50+
cleaner: true
5051
},
5152
slots: {
5253
details: '<div class="details">Details slot</div>'
@@ -226,4 +227,15 @@ describe(ComponentName, () => {
226227
})
227228
expect(localWrapper.text()).toContain('no items text')
228229
})
230+
it('Cleaner works properly', () => {
231+
const localWrapper = createCustomWrapper()
232+
const icon = localWrapper.find('svg')
233+
expect(icon.classes()).toContain('text-danger')
234+
icon.trigger('click')
235+
expect(icon.classes()).toContain('transparent')
236+
localWrapper.setProps({
237+
cleaner: {}
238+
})
239+
expect(icon.classes()).not.toContain('transparent')
240+
})
229241
})

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

+62-26
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,14 @@ exports[`CDataTable renders correctly 1`] = `
3535
<svg
3636
class="text-danger mb-2 c-icon c-icon-custom-size"
3737
role="img"
38-
viewBox="0 0 24 24"
38+
viewBox="0 0 512 512"
3939
width="30"
4040
xmlns="http://www.w3.org/2000/svg"
4141
>
4242
<path
43-
d="M19.955 4.045c-2.036-2.036-4.848-3.295-7.955-3.295-6.213 0-11.25 5.037-11.25 11.25 0 3.107 1.259 5.919 3.295 7.955v0c2.036 2.036 4.848 3.295 7.955 3.295 6.213 0 11.25-5.037 11.25-11.25 0-3.107-1.259-5.919-3.295-7.955v0zM12 2.25c0.003 0 0.006 0 0.009 0 2.431 0 4.653 0.894 6.356 2.37l-0.012-0.010-13.743 13.743c-1.466-1.691-2.36-3.913-2.36-6.344 0-0.003 0-0.006 0-0.009v0c0-5.376 4.374-9.75 9.75-9.75zM12 21.75c-0.002 0-0.005 0-0.008 0-2.419 0-4.632-0.885-6.332-2.349l0.013 0.011 13.739-13.739c1.453 1.687 2.338 3.9 2.338 6.319 0 0.003 0 0.006 0 0.009v-0c0 5.376-4.374 9.75-9.75 9.75z"
43+
class="ci-primary"
44+
d="M425.706,86.294A240,240,0,0,0,86.294,425.705,240,240,0,0,0,425.706,86.294ZM256,48A207.1,207.1,0,0,1,391.528,98.345L98.345,391.528A207.1,207.1,0,0,1,48,256C48,141.309,141.309,48,256,48Zm0,416a207.084,207.084,0,0,1-134.986-49.887l293.1-293.1A207.084,207.084,0,0,1,464,256C464,370.691,370.691,464,256,464Z"
45+
fill="var(--ci-primary-color, currentColor)"
4446
/>
4547
</svg>
4648
</h2>
@@ -136,6 +138,24 @@ exports[`CDataTable renders correctly 2`] = `
136138
137139
</option>
138140
</select>
141+
142+
<svg
143+
class="c-icon ml-2 text-danger"
144+
role="img"
145+
viewBox="0 0 512 512"
146+
xmlns="http://www.w3.org/2000/svg"
147+
>
148+
<polygon
149+
class="ci-primary"
150+
fill="var(--ci-primary-color, currentColor)"
151+
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"
152+
/>
153+
<polygon
154+
class="ci-primary"
155+
fill="var(--ci-primary-color, currentColor)"
156+
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"
157+
/>
158+
</svg>
139159
</div>
140160
</div>
141161
</div>
@@ -160,12 +180,14 @@ exports[`CDataTable renders correctly 2`] = `
160180
<svg
161181
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
162182
role="img"
163-
viewBox="0 0 24 24"
183+
viewBox="0 0 512 512"
164184
width="18"
165185
xmlns="http://www.w3.org/2000/svg"
166186
>
167-
<path
168-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
187+
<polygon
188+
class="ci-primary"
189+
fill="var(--ci-primary-color, currentColor)"
190+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
169191
/>
170192
</svg>
171193
</th>
@@ -180,12 +202,14 @@ exports[`CDataTable renders correctly 2`] = `
180202
<svg
181203
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
182204
role="img"
183-
viewBox="0 0 24 24"
205+
viewBox="0 0 512 512"
184206
width="18"
185207
xmlns="http://www.w3.org/2000/svg"
186208
>
187-
<path
188-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
209+
<polygon
210+
class="ci-primary"
211+
fill="var(--ci-primary-color, currentColor)"
212+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
189213
/>
190214
</svg>
191215
</th>
@@ -200,12 +224,14 @@ exports[`CDataTable renders correctly 2`] = `
200224
<svg
201225
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
202226
role="img"
203-
viewBox="0 0 24 24"
227+
viewBox="0 0 512 512"
204228
width="18"
205229
xmlns="http://www.w3.org/2000/svg"
206230
>
207-
<path
208-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
231+
<polygon
232+
class="ci-primary"
233+
fill="var(--ci-primary-color, currentColor)"
234+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
209235
/>
210236
</svg>
211237
</th>
@@ -220,12 +246,14 @@ exports[`CDataTable renders correctly 2`] = `
220246
<svg
221247
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
222248
role="img"
223-
viewBox="0 0 24 24"
249+
viewBox="0 0 512 512"
224250
width="18"
225251
xmlns="http://www.w3.org/2000/svg"
226252
>
227-
<path
228-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
253+
<polygon
254+
class="ci-primary"
255+
fill="var(--ci-primary-color, currentColor)"
256+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
229257
/>
230258
</svg>
231259
</th>
@@ -508,12 +536,14 @@ exports[`CDataTable renders correctly 2`] = `
508536
<svg
509537
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
510538
role="img"
511-
viewBox="0 0 24 24"
539+
viewBox="0 0 512 512"
512540
width="18"
513541
xmlns="http://www.w3.org/2000/svg"
514542
>
515-
<path
516-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
543+
<polygon
544+
class="ci-primary"
545+
fill="var(--ci-primary-color, currentColor)"
546+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
517547
/>
518548
</svg>
519549
</th>
@@ -528,12 +558,14 @@ exports[`CDataTable renders correctly 2`] = `
528558
<svg
529559
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
530560
role="img"
531-
viewBox="0 0 24 24"
561+
viewBox="0 0 512 512"
532562
width="18"
533563
xmlns="http://www.w3.org/2000/svg"
534564
>
535-
<path
536-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
565+
<polygon
566+
class="ci-primary"
567+
fill="var(--ci-primary-color, currentColor)"
568+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
537569
/>
538570
</svg>
539571
</th>
@@ -548,12 +580,14 @@ exports[`CDataTable renders correctly 2`] = `
548580
<svg
549581
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
550582
role="img"
551-
viewBox="0 0 24 24"
583+
viewBox="0 0 512 512"
552584
width="18"
553585
xmlns="http://www.w3.org/2000/svg"
554586
>
555-
<path
556-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
587+
<polygon
588+
class="ci-primary"
589+
fill="var(--ci-primary-color, currentColor)"
590+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
557591
/>
558592
</svg>
559593
</th>
@@ -568,12 +602,14 @@ exports[`CDataTable renders correctly 2`] = `
568602
<svg
569603
class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
570604
role="img"
571-
viewBox="0 0 24 24"
605+
viewBox="0 0 512 512"
572606
width="18"
573607
xmlns="http://www.w3.org/2000/svg"
574608
>
575-
<path
576-
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
609+
<polygon
610+
class="ci-primary"
611+
fill="var(--ci-primary-color, currentColor)"
612+
points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625"
577613
/>
578614
</svg>
579615
</th>

0 commit comments

Comments
 (0)