Skip to content

Commit 46af241

Browse files
woothuwoothu
committed
refactor: delete html props in components
1 parent 70c3be8 commit 46af241

File tree

19 files changed

+64
-151
lines changed

19 files changed

+64
-151
lines changed

‎src/components/badge/CBadge.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { mergeData } from 'vue-functional-data-merge'
33
import CLink, { props as linkProps } from '../link/CLink'
44
5-
const props = Object.assign(linkProps, {
5+
const props = Object.assign({}, linkProps, {
66
tag: {
77
type: String,
88
default: 'span'

‎src/components/card/CCard.vue

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
<script>
22
import { mergeData } from 'vue-functional-data-merge'
33
import sharedCardProps from './shared-card-props'
4-
import CCardHeader from './CCardHeader'
54
import CCardBody from './CCardBody'
6-
import CCardFooter from './CCardFooter'
75
86
const props = Object.assign(
97
sharedCardProps,
108
{
11-
headerHtml: String,
12-
bodyHtml: String,
13-
footerHtml: String,
149
bodyWrapper: Boolean,
1510
accentColor: String
1611
}
@@ -20,23 +15,8 @@ export default {
2015
name: 'CCard',
2116
props,
2217
render (h, { props, data, slots }) {
23-
let header = h(false)
24-
let main = slots().default
25-
let footer = h(false)
26-
27-
if (props.headerHtml) {
28-
header = h(CCardHeader, { domProps: { innerHTML: props.headerHtml }})
29-
}
30-
31-
if (main === undefined && props.bodyHtml) {
32-
main = h(CCardBody, { domProps: { innerHTML: props.bodyHtml }})
33-
} else if (props.bodyWrapper) {
34-
main = h(CCardBody, main)
35-
}
36-
37-
if (props.footerHtml) {
38-
footer = h(CCardFooter, { domProps: { innerHTML: props.footerHtml }})
39-
}
18+
const slot = slots().default
19+
const content = props.bodyWrapper ? h(CCardBody, slot) : slot
4020
4121
return h(
4222
props.tag || 'div',
@@ -50,7 +30,7 @@ export default {
5030
[`text-${props.textColor}`]: props.textColor
5131
}
5232
}),
53-
[ header, main, footer ]
33+
[content]
5434
)
5535
}
5636
}

‎src/components/card/CCardFooter.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
}
2121
]
2222
}),
23-
children || [h('div', { domProps: { innerHTML: props.footerHtml } })]
23+
children
2424
)
2525
}
2626
}

‎src/components/card/CCardHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
}
2121
]
2222
}),
23-
children || [h('div', { domProps: { innerHTML: props.headerHtml } })]
23+
children
2424
)
2525
}
2626
}

‎src/components/card/tests/CCard.spec.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ const wrapper = mount(Component, {
88
align: 'left',
99
color: 'success',
1010
textColor: 'white',
11-
borderColor: 'solid',
12-
headerHtml: 'header',
13-
footerHtml: 'footer',
14-
bodyHtml: 'body'
11+
borderColor: 'solid'
1512
}
1613
}
1714
})
@@ -31,14 +28,7 @@ const slotWrapper = mount(Component, {
3128
}
3229
})
3330

34-
const noBodyCard = mount(Component, {
35-
context: {
36-
props: {
37-
headerHtml: 'header',
38-
footerHtml: 'footer'
39-
}
40-
}
41-
})
31+
const noBodyCard = mount(Component, {})
4232

4333
describe(ComponentName, () => {
4434
it('has a name', () => {

‎src/components/card/tests/CCardBody.spec.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ const wrapper = mount(Component, {
88
align: 'left',
99
color: 'primary',
1010
textColor: 'white',
11-
borderColor: 'solid',
12-
titleHtml: 'title',
13-
subtitleHtml: 'subtitle',
14-
bodyHtml: 'body content'
11+
borderColor: 'solid'
1512
}
1613
}
1714
})

‎src/components/card/tests/__snapshots__/CCard.spec.js.snap

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,23 @@
33
exports[`CCard renders correctly 1`] = `
44
<div
55
class="card text-left bg-success border-solid text-white"
6-
>
7-
<header
8-
class="card-header"
9-
>
10-
header
11-
</header>
12-
<div
13-
class="card-body"
14-
>
15-
body
16-
</div>
17-
<footer
18-
class="card-footer"
19-
>
20-
footer
21-
</footer>
22-
</div>
6+
/>
237
`;
248

259
exports[`CCard renders correctly with slots 1`] = `
2610
<div
2711
class="card card-accent-primary text-left bg-success border-solid text-white"
2812
>
29-
<!---->
3013
<div
3114
class="card-body"
3215
>
3316
this should be rendered in body wrapper
3417
</div>
35-
<!---->
3618
</div>
3719
`;
3820

3921
exports[`CCard renders correctly without body 1`] = `
4022
<div
4123
class="card"
42-
>
43-
<header
44-
class="card-header"
45-
>
46-
header
47-
</header>
48-
<footer
49-
class="card-footer"
50-
>
51-
footer
52-
</footer>
53-
</div>
24+
/>
5425
`;

‎src/components/index.d.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,6 @@ declare class CardSharedClasses extends Vue {
6161
}
6262

6363
export declare class CCard extends CardSharedClasses {
64-
headerHtml: string
65-
bodyHtml: string
66-
footerHtml: string
6764
bodyWrapper: boolean
6865
accentColor: string
6966
}
@@ -427,10 +424,6 @@ export declare class CPagination extends Vue {
427424
dots: boolean
428425
arrows: boolean
429426
doubleArrows: boolean
430-
firstButtonHtml: string
431-
previousButtonHtml: string
432-
nextButtonHtml: string
433-
lastButtonHtml: string
434427
responsive: boolean
435428
}
436429

@@ -575,7 +568,7 @@ export declare class CTabs extends Vue {
575568
}
576569

577570
export declare class CTab extends Vue {
578-
titleHtml: string
571+
title: string
579572
active: boolean
580573
disabled: boolean
581574
}
@@ -589,8 +582,7 @@ declare class ToastProps extends Vue {
589582

590583
export declare class CToast extends ToastProps {
591584
show: boolean
592-
headerHtml: string
593-
bodyHtml: string
585+
header: string
594586
}
595587

596588
export declare class CToaster extends ToastProps {

‎src/components/pagination/CPagination.vue

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
aria-label="Go to first page"
1010
:aria-disabled="activePage === 1"
1111
>
12-
<span v-html="firstButtonHtml"></span>
12+
<slot name="first-button">&laquo;</slot>
1313
</CLink>
1414
</li>
1515
<li v-if="arrows" :class="backArrowsClasses">
@@ -20,7 +20,7 @@
2020
aria-label="Go to previous page"
2121
:aria-disabled="activePage === 1"
2222
>
23-
<span v-html="previousButtonHtml"></span>
23+
<slot name="previous-button">&lsaquo;</slot>
2424
</CLink>
2525
</li>
2626
<li
@@ -63,7 +63,7 @@
6363
aria-label="Go to next page"
6464
:aria-disabled="activePage === pages"
6565
>
66-
<span v-html="nextButtonHtml"></span>
66+
<slot name="next-button">&rsaquo;</slot>
6767
</CLink>
6868
</li>
6969
<li v-if="doubleArrows" :class="nextArrowsClasses">
@@ -74,7 +74,7 @@
7474
aria-label="Go to last page"
7575
:aria-disabled="activePage === pages"
7676
>
77-
<span v-html="lastButtonHtml"></span>
77+
<slot name="last-button">&raquo;</slot>
7878
</CLink>
7979
</li>
8080
</ul>
@@ -122,22 +122,6 @@
122122
doubleArrows: {
123123
type: Boolean,
124124
default: true
125-
},
126-
firstButtonHtml: {
127-
type: String,
128-
default: '&laquo;'
129-
},
130-
previousButtonHtml: {
131-
type: String,
132-
default: '&lsaquo;'
133-
},
134-
nextButtonHtml: {
135-
type: String,
136-
default: '&rsaquo;'
137-
},
138-
lastButtonHtml: {
139-
type: String,
140-
default: '&raquo;'
141125
}
142126
},
143127
watch: {

‎src/components/pagination/tests/CPagination.spec.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@ import { mount } from '@vue/test-utils'
22
import Component from '../CPagination'
33

44
const ComponentName = 'CPagination'
5-
const defaultWrapper = mount(Component)
5+
const wrapper = mount(Component,{
6+
slots: {
7+
'first-button': 'Go to first',
8+
'previous-button': 'Go to previous',
9+
'next-button': 'Go to next',
10+
'last-button': 'Go to last',
11+
}
12+
})
13+
614
const customWrapper = mount(Component, {
715
propsData: {
816
activePage: 9,
@@ -13,15 +21,16 @@ const customWrapper = mount(Component, {
1321
dots: false,
1422
arrows: false,
1523
doubleArrows: false
16-
}
24+
},
25+
1726
})
1827

1928
describe(ComponentName, () => {
2029
it('has a name', () => {
2130
expect(Component.name).toMatch(ComponentName)
2231
})
2332
it('renders correctly', () => {
24-
expect(defaultWrapper.element).toMatchSnapshot()
33+
expect(wrapper.element).toMatchSnapshot()
2534
})
2635
it('renders correctly', () => {
2736
expect(customWrapper.element).toMatchSnapshot()
@@ -31,11 +40,11 @@ describe(ComponentName, () => {
3140
expect(customWrapper.emitted()['update:activePage']).toBeTruthy()
3241
})
3342
it('emits update:activePage event when inactive item is clicked', () => {
34-
const links = defaultWrapper.findAll('.page-link')
43+
const links = wrapper.findAll('.page-link')
3544
links.at(2).trigger('click')
36-
expect(defaultWrapper.emitted()['update:activePage']).not.toBeTruthy()
45+
expect(wrapper.emitted()['update:activePage']).not.toBeTruthy()
3746

3847
links.at(4).trigger('click')
39-
expect(defaultWrapper.emitted()['update:activePage']).toBeTruthy()
48+
expect(wrapper.emitted()['update:activePage']).toBeTruthy()
4049
})
4150
})

‎src/components/pagination/tests/__snapshots__/CPagination.spec.js.snap

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ exports[`CPagination renders correctly 1`] = `
1818
tabindex="-1"
1919
target="_self"
2020
>
21-
<span>
22-
«
23-
</span>
21+
Go to first
2422
</a>
2523
</li>
2624
@@ -35,9 +33,7 @@ exports[`CPagination renders correctly 1`] = `
3533
tabindex="-1"
3634
target="_self"
3735
>
38-
<span>
39-
‹
40-
</span>
36+
Go to previous
4137
</a>
4238
</li>
4339
@@ -120,9 +116,7 @@ exports[`CPagination renders correctly 1`] = `
120116
href="#"
121117
target="_self"
122118
>
123-
<span>
124-
›
125-
</span>
119+
Go to next
126120
</a>
127121
</li>
128122
@@ -135,9 +129,7 @@ exports[`CPagination renders correctly 1`] = `
135129
href="#"
136130
target="_self"
137131
>
138-
<span>
139-
»
140-
</span>
132+
Go to last
141133
</a>
142134
</li>
143135
</ul>

0 commit comments

Comments
 (0)