Skip to content

Commit dffd928

Browse files
woothuwoothu
committed
refactor: change appendHtml/prependHtml props to append/prepend
- add prepend-content slot and append-content slot
1 parent 51ccaa3 commit dffd928

File tree

10 files changed

+105
-99
lines changed

10 files changed

+105
-99
lines changed

‎src/components/form/CFormGroup.vue‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,92 @@
1-
<template functional>
2-
<div
3-
:class="[data.class, data.staticClass]"
4-
:style="[data.style, data.staticStyle]"
5-
role="group"
6-
>
7-
<template v-if="props.wrapperClasses">
1+
<template>
2+
<div role="group">
3+
<template v-if="wrapperClasses">
84
<slot name="label"></slot>
9-
<div :class="props.wrapperClasses">
5+
<div :class="wrapperClasses">
106
<div
11-
v-if="props.prependHtml || $slots.prepend"
7+
v-if="prepend || $slots.prepend|| $slots['prepend-content']"
128
class="input-group-prepend"
139
>
1410
<slot name="prepend">
15-
<span
16-
class="input-group-text"
17-
v-html="props.prependHtml"
18-
></span>
11+
<span class="input-group-text"><slot name="prepend-content">{{prepend}}</slot></span>
1912
</slot>
2013
</div>
2114
<slot name="input"></slot>
2215
<slot name="label-after-input"></slot>
2316
<div
24-
v-if="props.appendHtml || $slots.append"
17+
v-if="append || $slots.append || $slots['append-content']"
2518
class="input-group-append"
2619
>
2720
<slot name="append">
28-
<span
29-
class="input-group-text"
30-
v-html="props.appendHtml"
31-
></span>
21+
<span class="input-group-text">
22+
<slot name="append-content">{{append}}</slot>
23+
</span>
3224
</slot>
3325
</div>
3426
<slot name="valid-feedback">
3527
<div
36-
v-if="props.validFeedback"
37-
:class="props.tooltipFeedback ? 'valid-tooltip' : 'valid-feedback'"
38-
v-text="props.validFeedback"
28+
v-if="validFeedback"
29+
:class="tooltipFeedback ? 'valid-tooltip' : 'valid-feedback'"
30+
v-text="validFeedback"
3931
></div>
4032
</slot>
4133
<slot name="invalid-feedback">
4234
<div
43-
v-if="props.invalidFeedback"
44-
:class="props.tooltipFeedback ? 'invalid-tooltip' : 'invalid-feedback'"
45-
v-text="props.invalidFeedback"
35+
v-if="invalidFeedback"
36+
:class="tooltipFeedback ? 'invalid-tooltip' : 'invalid-feedback'"
37+
v-text="invalidFeedback"
4638
></div>
4739
</slot>
4840
<slot name="description">
4941
<small
50-
v-if="props.description"
42+
v-if="description"
5143
class="form-text text-muted w-100"
52-
v-text="props.description"
44+
v-text="description"
5345
></small>
5446
</slot>
5547
</div>
5648
</template>
5749
<template v-else>
5850
<slot name="label"></slot>
5951
<div
60-
v-if="props.prependHtml || $slots.prepend"
52+
v-if="prepend || $slots.prepend || $slots['prepend-content']"
6153
class="input-group-prepend"
6254
>
6355
<slot name="prepend">
64-
<span
65-
class="input-group-text"
66-
v-html="props.prependHtml"
67-
></span>
56+
<span class="input-group-text"><slot name="prepend-content">{{prepend}}</slot></span>
6857
</slot>
6958
</div>
7059
<slot name="input"></slot>
7160
<slot name="label-after-input"></slot>
7261
<div
73-
v-if="props.appendHtml || $slots.append"
62+
v-if="append || $slots.append || $slots['append-content']"
7463
class="input-group-append"
7564
>
7665
<slot name="append">
77-
<span
78-
class="input-group-text"
79-
v-html="props.appendHtml"
80-
></span>
66+
<span class="input-group-text">
67+
<slot name="append-content">{{append}}</slot>
68+
</span>
8169
</slot>
8270
</div>
8371
<slot name="valid-feedback">
8472
<div
85-
v-if="props.validFeedback"
86-
:class="props.tooltipFeedback ? 'valid-tooltip' : 'valid-feedback'"
87-
v-text="props.validFeedback"
73+
v-if="validFeedback"
74+
:class="tooltipFeedback ? 'valid-tooltip' : 'valid-feedback'"
75+
v-text="validFeedback"
8876
></div>
8977
</slot>
9078
<slot name="invalid-feedback">
9179
<div
92-
v-if="props.invalidFeedback"
93-
:class="props.tooltipFeedback ? 'invalid-tooltip' : 'invalid-feedback'"
94-
v-text="props.invalidFeedback"
80+
v-if="invalidFeedback"
81+
:class="tooltipFeedback ? 'invalid-tooltip' : 'invalid-feedback'"
82+
v-text="invalidFeedback"
9583
></div>
9684
</slot>
9785
<slot name="description">
9886
<small
99-
v-if="props.description"
87+
v-if="description"
10088
class="form-text text-muted w-100"
101-
v-text="props.description"
89+
v-text="description"
10290
></small>
10391
</slot>
10492
</template>
@@ -117,8 +105,8 @@ export default {
117105
// tooltipFeedback: Boolean,
118106
// description: String,
119107
120-
// appendHtml: String,
121-
// prependHtml: String,
108+
// append: String,
109+
// prepend: String,
122110
123111
// wrapperClasses: [String, Array, Object],
124112
// },

‎src/components/form/CInput.vue‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<CFormGroup
3-
v-bind="{appendHtml, prependHtml, validFeedback, invalidFeedback,
3+
v-bind="{append, prepend, validFeedback, invalidFeedback,
44
tooltipFeedback, description, wrapperClasses, class: computedClasses}"
55
>
66
<template #label>
@@ -23,14 +23,8 @@
2323
/>
2424
</template>
2525

26-
27-
<template
28-
v-for="slot in ['prepend', 'append', 'label-after-input',
29-
'valid-feedback', 'invalid-feedback','description']"
30-
#[slot]
31-
>
32-
<slot :name="slot">
33-
</slot>
26+
<template v-for="slot in $options.slots" #[slot]>
27+
<slot :name="slot"></slot>
3428
</template>
3529
</CFormGroup>
3630
</template>
@@ -43,6 +37,16 @@ const mixins = Object.values(allFormMixins)
4337
4438
export default {
4539
name: 'CInput',
40+
slots: [
41+
'prepend',
42+
'prepend-content',
43+
'append-content',
44+
'append',
45+
'label-after-input',
46+
'valid-feedback',
47+
'invalid-feedback',
48+
'description'
49+
],
4650
inheritAttrs: false,
4751
components: { CFormGroup },
4852
mixins,
@@ -54,8 +58,8 @@ export default {
5458
// tooltipFeedback: Boolean,
5559
// description: String,
5660
57-
// appendHtml: String,
58-
// prependHtml: String,
61+
// append: String,
62+
// prepend: String,
5963
6064
// label: String,
6165
// wasValidated: Boolean,
@@ -156,10 +160,12 @@ export default {
156160
// haveInputGroup () {
157161
// return Boolean(
158162
// this.tooltipFeedback ||
159-
// this.appendHtml ||
160-
// this.prependHtml ||
163+
// this.append ||
164+
// this.prepend ||
161165
// this.$slots.append ||
162-
// this.$slots.prepend
166+
// this.$slots.prepend ||
167+
// this.$slots['append-content'] ||
168+
// this.$slots['prepend-content']
163169
// )
164170
// },
165171
// haveWrapper () {

‎src/components/form/CSelect.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<CFormGroup
33
v-bind="{
4-
appendHtml, prependHtml, validFeedback, invalidFeedback,
4+
append, prepend, validFeedback, invalidFeedback,
55
tooltipFeedback, description, wrapperClasses, class: computedClasses
66
}"
77
>
@@ -72,6 +72,8 @@ export default {
7272
components: { CFormGroup },
7373
slots: [
7474
'prepend',
75+
'prepend-content',
76+
'append-content',
7577
'append',
7678
'label-after-input',
7779
'valid-feedback',
@@ -87,8 +89,8 @@ export default {
8789
// tooltipFeedback: Boolean,
8890
// description: String,
8991
90-
// appendHtml: String,
91-
// prependHtml: String,
92+
// append: String,
93+
// prepend: String,
9294
9395
// label: String,
9496
// wasValidated: Boolean,
@@ -190,10 +192,12 @@ export default {
190192
// haveInputGroup () {
191193
// return Boolean(
192194
// this.tooltipFeedback ||
193-
// this.appendHtml ||
194-
// this.prependHtml ||
195+
// this.append ||
196+
// this.prepend ||
195197
// this.$slots.append ||
196-
// this.$slots.prepend
198+
// this.$slots.prepend ||
199+
// this.$slots['append-content'] ||
200+
// this.$slots['prepend-content']
197201
// )
198202
// },
199203
// haveWrapper () {

‎src/components/form/CTextarea.vue‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template >
22
<CFormGroup
3-
v-bind="{appendHtml, prependHtml, validFeedback, invalidFeedback,
3+
v-bind="{append, prepend, validFeedback, invalidFeedback,
44
tooltipFeedback, description, wrapperClasses, class: computedClasses}"
55
>
66
<template #label>
@@ -22,13 +22,8 @@
2222
/>
2323
</template>
2424

25-
<template
26-
v-for="slot in ['prepend', 'append', 'label-after-input',
27-
'valid-feedback', 'invalid-feedback','description']"
28-
#[slot]
29-
>
30-
<slot :name="slot">
31-
</slot>
25+
<template v-for="slot in $options.slots" #[slot]>
26+
<slot :name="slot"></slot>
3227
</template>
3328
</CFormGroup>
3429
</template>
@@ -41,6 +36,16 @@ const mixins = Object.values(allFormMixins)
4136
4237
export default {
4338
name: 'CTextarea',
39+
slots: [
40+
'prepend',
41+
'prepend-content',
42+
'append-content',
43+
'append',
44+
'label-after-input',
45+
'valid-feedback',
46+
'invalid-feedback',
47+
'description'
48+
],
4449
inheritAttrs: false,
4550
components: { CFormGroup },
4651
mixins,
@@ -52,8 +57,8 @@ export default {
5257
// tooltipFeedback: Boolean,
5358
// description: String,
5459
55-
// appendHtml: String,
56-
// prependHtml: String,
60+
// append: String,
61+
// prepend: String,
5762
5863
// label: String,
5964
// wasValidated: Boolean,
@@ -149,10 +154,12 @@ export default {
149154
// haveInputGroup () {
150155
// return Boolean(
151156
// this.tooltipFeedback ||
152-
// this.appendHtml ||
153-
// this.prependHtml ||
157+
// this.append ||
158+
// this.prepend ||
154159
// this.$slots.append ||
155-
// this.$slots.prepend
160+
// this.$slots.prepend ||
161+
// this.$slots['append-content'] ||
162+
// this.$slots['prepend-content']
156163
// )
157164
// },
158165
// haveWrapper () {

‎src/components/form/form-mixins.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ export const wrapperComputedProps = {
88
haveInputGroup () {
99
return Boolean(
1010
this.tooltipFeedback ||
11-
this.appendHtml ||
12-
this.prependHtml ||
11+
this.append ||
12+
this.prepend ||
1313
this.$slots.append ||
14-
this.$slots.prepend
14+
this.$slots.prepend ||
15+
this.$slots['append-content'] ||
16+
this.$slots['prepend-content']
1517
)
1618
},
1719
haveWrapper () {

‎src/components/form/form-props.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const formGroupAlwaysSharedProps = {
66
}
77
const formGroupSharedProps = Object.assign(
88
{}, formGroupAlwaysSharedProps,{
9-
appendHtml: String,
10-
prependHtml: String
9+
append: String,
10+
prepend: String
1111
})
1212

1313
export const formGroupProps = Object.assign(

‎src/components/form/tests/CFormGroup.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ const ComponentName = 'CFormGroup'
55
const customWrapper = mount(Component, {
66
propsData: {
77
wrapperClasses: 'additional-wrapper-class',
8-
appendHtml: 'appended',
9-
prependHtml: 'prepended',
8+
append: 'appended',
9+
prepend: 'prepended',
1010
validFeedback: 'input is valid',
1111
invalidFeedback: 'input is invalid',
1212
tooltipFeedback: true,

‎src/components/form/tests/CSelect.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const customWrapper = mount(Component, {
3838
custom: true,
3939
inline: true,
4040
size: 'lg',
41-
appendHtml: 'appended',
42-
prependHtml: 'prepended'
41+
append: 'appended',
42+
prepend: 'prepended'
4343
}
4444
})
4545

‎src/components/form/tests/__snapshots__/CFormGroup.spec.js.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
exports[`CFormGroup renders correctly 1`] = `
44
<div
5-
class=""
65
role="group"
76
>
87

0 commit comments

Comments
 (0)