Skip to content

Commit 4b4be80

Browse files
VividLemonVividLemon
authored
Merge pull request #725 from VividLemon/master
fix(#697): labelCols class not working
2 parents f4f21df + 5162eb9 commit 4b4be80

File tree

2 files changed

+239
-11
lines changed

2 files changed

+239
-11
lines changed

‎packages/bootstrap-vue-3/src/components/BFormGroup/BFormGroup.vue

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,24 +85,21 @@ export default defineComponent({
8585
8686
const getAlignClasses = (props: any, prefix: string) =>
8787
breakPoints.reduce((result: string[], breakpoint) => {
88-
const suffix = suffixPropName(breakpoint, `${prefix}Align`)
89-
if (breakpoint === 'xs') {
90-
const value = props[suffix.slice(0, suffix.toLowerCase().lastIndexOf(breakpoint))] || null
91-
if (value) {
92-
result.push(`text-${value}`)
93-
}
94-
}
88+
const suffix = suffixPropName(breakpoint === 'xs' ? '' : breakpoint, `${prefix}Align`)
9589
const propValue: string = props[suffix] || null
9690
if (propValue) {
97-
result.push(`text-${breakpoint}-${propValue}`)
91+
breakpoint === 'xs'
92+
? result.push(`text-${propValue}`)
93+
: result.push(`text-${breakpoint}-${propValue}`)
9894
}
9995
10096
return result
10197
}, [])
10298
10399
const getColProps = (props: any, prefix: string) =>
104100
breakPoints.reduce((result: any, breakpoint: string) => {
105-
let propValue = props[suffixPropName(breakpoint, `${prefix}Cols`)]
101+
const suffix = suffixPropName(breakpoint === 'xs' ? '' : breakpoint, `${prefix}Cols`)
102+
let propValue = props[suffix]
106103
// Handle case where the prop's value is an empty string,
107104
// which represents `true`
108105
propValue = propValue === '' ? true : propValue || false
@@ -118,7 +115,13 @@ export default defineComponent({
118115
// If breakpoint is '' (`${prefix}Cols` is `true`), then we use
119116
// the 'col' prop to make equal width at 'xs'
120117
if (propValue) {
121-
result[breakpoint || (typeof propValue === 'boolean' ? 'col' : 'cols')] = propValue
118+
// Extra care is required for xs since it does not have a BCol breakpoint prop
119+
// Xs breakpoint is simply 'cols'
120+
if (breakpoint === 'xs') {
121+
result.cols = propValue
122+
} else {
123+
result[breakpoint || (typeof propValue === 'boolean' ? 'col' : 'cols')] = propValue
124+
}
122125
}
123126
return result
124127
}, {})
@@ -247,7 +250,7 @@ export default defineComponent({
247250
const labelId = labelContent ? getId('_BV_label_') : null
248251
249252
if (labelContent || this.isHorizontal) {
250-
const labelTag: string = isFieldset ? 'legend' : 'label'
253+
const labelTag: 'legend' | 'label' = isFieldset ? 'legend' : 'label'
251254
if (this.labelSrOnlyBoolean) {
252255
if (labelContent) {
253256
$label = h(

‎packages/bootstrap-vue-3/src/components/BFormGroup/form-group.spec.ts

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import {afterEach, describe, expect, it} from 'vitest'
2+
import {enableAutoUnmount, mount} from '@vue/test-utils'
3+
import BFormGroup from './BFormGroup.vue'
4+
import BCol from '../BCol.vue'
5+
6+
describe('form-group', () => {
7+
enableAutoUnmount(afterEach)
8+
9+
it('tag is fieldset by default', () => {
10+
const wrapper = mount(BFormGroup)
11+
expect(wrapper.element.tagName).toBe('FIELDSET')
12+
})
13+
14+
it('does not have child legend by default', () => {
15+
const wrapper = mount(BFormGroup)
16+
const $legend = wrapper.find('legend')
17+
expect($legend.exists()).toBe(false)
18+
})
19+
20+
it('has child legend when prop label', () => {
21+
const wrapper = mount(BFormGroup, {
22+
props: {label: 'foobar'},
23+
})
24+
const $legend = wrapper.find('legend')
25+
expect($legend.exists()).toBe(true)
26+
})
27+
28+
it('child legend has attr id to be defined by default', () => {
29+
const wrapper = mount(BFormGroup, {
30+
props: {label: 'foobar'},
31+
})
32+
const $legend = wrapper.get('legend')
33+
expect($legend.attributes('id')).toBeDefined()
34+
})
35+
36+
it('has child div by default', () => {
37+
const wrapper = mount(BFormGroup)
38+
const $div = wrapper.find('div')
39+
expect($div.exists()).toBe(true)
40+
})
41+
42+
it('child div has child BCol when prop labelCols', () => {
43+
const wrapper = mount(BFormGroup, {
44+
props: {labelCols: '4'},
45+
})
46+
const $div = wrapper.get('div')
47+
const $col = $div.findComponent(BCol)
48+
expect($col.exists()).toBe(true)
49+
})
50+
51+
it('child div has child BCol when prop labelColsSm', () => {
52+
const wrapper = mount(BFormGroup, {
53+
props: {labelColsSm: '4'},
54+
})
55+
const $div = wrapper.get('div')
56+
const $col = $div.findComponent(BCol)
57+
expect($col.exists()).toBe(true)
58+
})
59+
60+
it('child div has child BCol when prop labelColsMd', () => {
61+
const wrapper = mount(BFormGroup, {
62+
props: {labelColsMd: '4'},
63+
})
64+
const $div = wrapper.get('div')
65+
const $col = $div.findComponent(BCol)
66+
expect($col.exists()).toBe(true)
67+
})
68+
69+
it('child div has child BCol when prop labelColsLg', () => {
70+
const wrapper = mount(BFormGroup, {
71+
props: {labelColsLg: '4'},
72+
})
73+
const $div = wrapper.get('div')
74+
const $col = $div.findComponent(BCol)
75+
expect($col.exists()).toBe(true)
76+
})
77+
78+
it('child div has child BCol when prop labelColsXl', () => {
79+
const wrapper = mount(BFormGroup, {
80+
props: {labelColsXl: '4'},
81+
})
82+
const $div = wrapper.get('div')
83+
const $col = $div.findComponent(BCol)
84+
expect($col.exists()).toBe(true)
85+
})
86+
87+
it('child div BCol child is given prop tag to be legend when prop labelCols', () => {
88+
const wrapper = mount(BFormGroup, {
89+
props: {label: 'foobar', labelCols: '4'},
90+
})
91+
const $div = wrapper.get('div')
92+
const $col = $div.getComponent(BCol)
93+
expect($col.props('tag')).toBe('legend')
94+
})
95+
96+
it('child div BCol child is given prop labelCols', () => {
97+
const wrapper = mount(BFormGroup, {
98+
props: {label: 'foobar', labelCols: '4'},
99+
})
100+
const $div = wrapper.get('div')
101+
const $col = $div.getComponent(BCol)
102+
expect($col.props('cols')).toBe(4)
103+
})
104+
105+
it('child div BCol child is given prop labelColsSm to be prop sm', () => {
106+
const wrapper = mount(BFormGroup, {
107+
props: {label: 'foobar', labelColsSm: '4'},
108+
})
109+
const $div = wrapper.get('div')
110+
const $col = $div.getComponent(BCol)
111+
expect($col.props('sm')).toBe(4)
112+
})
113+
114+
it('child div BCol child is given prop labelColsMd to be prop md', () => {
115+
const wrapper = mount(BFormGroup, {
116+
props: {label: 'foobar', labelColsMd: '4'},
117+
})
118+
const $div = wrapper.get('div')
119+
const $col = $div.getComponent(BCol)
120+
expect($col.props('md')).toBe(4)
121+
})
122+
123+
it('child div BCol child is given prop labelColsLg to be prop lg', () => {
124+
const wrapper = mount(BFormGroup, {
125+
props: {label: 'foobar', labelColsLg: '4'},
126+
})
127+
const $div = wrapper.get('div')
128+
const $col = $div.getComponent(BCol)
129+
expect($col.props('lg')).toBe(4)
130+
})
131+
132+
it('child div BCol child is given prop labelColsXl to be prop xl', () => {
133+
const wrapper = mount(BFormGroup, {
134+
props: {labelColsXl: '4'},
135+
})
136+
const $div = wrapper.get('div')
137+
const $col = $div.getComponent(BCol)
138+
expect($col.props('xl')).toBe(4)
139+
})
140+
141+
it('child div BCol child is given class text-{type} when prop labelAlign', () => {
142+
const wrapper = mount(BFormGroup, {
143+
props: {label: 'foobar', labelAlign: '5', labelCols: '2'},
144+
})
145+
const $div = wrapper.get('div')
146+
const $col = $div.getComponent(BCol)
147+
expect($col.classes()).toContain('text-5')
148+
})
149+
150+
it('child div BCol child is given class text-{type} when prop labelAlignSm', () => {
151+
const wrapper = mount(BFormGroup, {
152+
props: {label: 'foobar', labelAlignSm: '5', labelCols: '2'},
153+
})
154+
const $div = wrapper.get('div')
155+
const $col = $div.getComponent(BCol)
156+
expect($col.classes()).toContain('text-sm-5')
157+
})
158+
159+
it('child div BCol child is given class text-{type} when prop labelAlignMd', () => {
160+
const wrapper = mount(BFormGroup, {
161+
props: {label: 'foobar', labelAlignMd: '5', labelCols: '2'},
162+
})
163+
const $div = wrapper.get('div')
164+
const $col = $div.getComponent(BCol)
165+
expect($col.classes()).toContain('text-md-5')
166+
})
167+
168+
it('child div BCol child is given class text-{type} when prop labelAlignLg', () => {
169+
const wrapper = mount(BFormGroup, {
170+
props: {label: 'foobar', labelAlignLg: '5', labelCols: '2'},
171+
})
172+
const $div = wrapper.get('div')
173+
const $col = $div.getComponent(BCol)
174+
expect($col.classes()).toContain('text-lg-5')
175+
})
176+
177+
it('child div BCol child is given class text-{type} when prop labelAlignXl', () => {
178+
const wrapper = mount(BFormGroup, {
179+
props: {label: 'foobar', labelAlignXl: '5', labelCols: '2'},
180+
})
181+
const $div = wrapper.get('div')
182+
const $col = $div.getComponent(BCol)
183+
expect($col.classes()).toContain('text-xl-5')
184+
})
185+
186+
it('child legend is given class text-{type} when prop labelAlign', () => {
187+
const wrapper = mount(BFormGroup, {
188+
props: {label: 'foobar', labelAlign: '5'},
189+
})
190+
const $legend = wrapper.get('legend')
191+
expect($legend.classes()).toContain('text-5')
192+
})
193+
194+
it('child legend is given class text-sm-{type} when prop labelAlignSm ', () => {
195+
const wrapper = mount(BFormGroup, {
196+
props: {label: 'foobar', labelAlignSm: '5'},
197+
})
198+
const $legend = wrapper.get('legend')
199+
expect($legend.classes()).toContain('text-sm-5')
200+
})
201+
202+
it('child legend is given class text-md-{type} when prop labelAlignMd', () => {
203+
const wrapper = mount(BFormGroup, {
204+
props: {label: 'foobar', labelAlignMd: '5'},
205+
})
206+
const $legend = wrapper.get('legend')
207+
expect($legend.classes()).toContain('text-md-5')
208+
})
209+
210+
it('child legend is given class text-lg-{type} when prop labelAlignLg ', () => {
211+
const wrapper = mount(BFormGroup, {
212+
props: {label: 'foobar', labelAlignLg: '5'},
213+
})
214+
const $legend = wrapper.get('legend')
215+
expect($legend.classes()).toContain('text-lg-5')
216+
})
217+
218+
it('child legend is given class text-xl-{type} when prop labelAlignXl ', () => {
219+
const wrapper = mount(BFormGroup, {
220+
props: {label: 'foobar', labelAlignXl: '5'},
221+
})
222+
const $legend = wrapper.get('legend')
223+
expect($legend.classes()).toContain('text-xl-5')
224+
})
225+
})

0 commit comments

Comments
 (0)