Skip to content

Commit 535fdcc

Browse files
mariusamariusa
authored
Merge pull request #531 from VividLemon/main
feat: begin adding booleanish option
2 parents 5f9bf97 + 0d84969 commit 535fdcc

File tree

15 files changed

+455
-355
lines changed

15 files changed

+455
-355
lines changed

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
<script setup lang="ts">
88
// https://vuejs.org/guide/typescript/composition-api.html#syntax-limitations , may be possible in a future release
99
// import type {BAccordionProps} from '../types/components'
10+
import {Booleanish} from '../../types'
1011
import {computed, InjectionKey, provide} from 'vue'
1112
import {useId} from '../../composables'
13+
import {resolveBooleanish} from '../../utils'
1214
1315
interface BAccordionProps {
14-
flush?: boolean
15-
free?: boolean
16+
flush?: Booleanish
17+
free?: Booleanish
1618
id?: string
1719
}
1820
@@ -23,12 +25,14 @@ const props = withDefaults(defineProps<BAccordionProps>(), {
2325
})
2426
2527
const computedId = useId(props.id, 'accordion')
28+
const booleanFlush = computed(() => resolveBooleanish(props.flush))
29+
const booleanFree = computed(() => resolveBooleanish(props.free))
2630
2731
const classes = computed(() => ({
28-
'accordion-flush': props.flush,
32+
'accordion-flush': booleanFlush.value,
2933
}))
3034
31-
if (!props.free) {
35+
if (!booleanFree.value) {
3236
provide(injectionKey, computedId.value.toString())
3337
}
3438
</script>

‎packages/bootstrap-vue-3/src/components/BAccordion/BAccordionItem.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<b-collapse
1818
:id="computedId"
1919
class="accordion-collapse"
20-
:visible="visible"
20+
:visible="booleanVisible"
2121
:accordion="parent"
2222
:aria-labelledby="`heading${computedId}`"
2323
>
@@ -29,21 +29,25 @@
2929
</template>
3030

3131
<script setup lang="ts">
32-
import {inject} from 'vue'
32+
import {computed, inject} from 'vue'
3333
import BCollapse from '../BCollapse.vue'
3434
import vBToggle from '../../directives/BToggle'
3535
import {useId} from '../../composables'
3636
import {injectionKey} from './BAccordion.vue'
37+
import {Booleanish} from '../../types'
38+
import {resolveBooleanish} from '../../utils'
3739
// import type {BAccordionItemProps} from '../types/components'
3840
3941
interface BAccordionItemProps {
4042
id?: string
4143
title?: string
42-
visible?: boolean
44+
visible?: Booleanish
4345
}
4446
4547
const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
4648
49+
const booleanVisible = computed(() => resolveBooleanish(props.visible))
50+
4751
const computedId = useId(props.id, 'accordion_item')
4852
const parent = inject(injectionKey, '')
4953
</script>

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

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,28 @@
2626

2727
<script setup lang="ts">
2828
// import type { BAvatarProps, BAvatarEmits, InputSize } from '../types/components'
29-
import {isEmptySlot, isNumber, isNumeric, isString, toFloat} from '../../utils'
29+
import {isEmptySlot, isNumber, isNumeric, isString, resolveBooleanish, toFloat} from '../../utils'
3030
import type {BAvatarGroupParentData} from '../../types/components'
3131
import {computed, inject, StyleValue, useSlots} from 'vue'
32-
import type {ColorVariant} from '../../types'
32+
import type {Booleanish, ColorVariant} from '../../types'
3333
import {injectionKey} from './BAvatarGroup.vue'
3434
3535
interface BAvatarProps {
3636
alt?: string // TODO each complex variant should contain a note about it's type
3737
ariaLabel?: string
3838
badge?: boolean | string
39-
badgeLeft?: boolean
39+
badgeLeft?: Booleanish
4040
badgeOffset?: string
41-
badgeTop?: boolean
41+
badgeTop?: Booleanish
4242
badgeVariant?: ColorVariant
43-
button?: boolean
43+
button?: Booleanish
4444
buttonType?: string
45-
disabled?: boolean
45+
disabled?: Booleanish
4646
icon?: string
4747
rounded?: boolean | string
4848
size?: 'sm' | 'md' | 'lg' | string
4949
// size?: InputSize | string
50-
square?: boolean
50+
square?: Booleanish
5151
src?: string
5252
text?: string
5353
textVariant?: ColorVariant // not standard BootstrapVue props
@@ -69,6 +69,12 @@ const props = withDefaults(defineProps<BAvatarProps>(), {
6969
variant: 'secondary',
7070
})
7171
72+
const booleanBadgeLeft = computed(() => resolveBooleanish(props.badgeLeft))
73+
const booleanBadgeTop = computed(() => resolveBooleanish(props.badgeTop))
74+
const booleanButton = computed(() => resolveBooleanish(props.button))
75+
const booleanDisabled = computed(() => resolveBooleanish(props.disabled))
76+
const booleanSquare = computed(() => resolveBooleanish(props.square))
77+
7278
interface BAvatarEmits {
7379
(e: 'click', value: MouseEvent): void
7480
(e: 'img-error', value: Event): void
@@ -112,7 +118,7 @@ const computedRounded = computed<string | boolean>(() =>
112118
113119
const attrs = computed(() => ({
114120
'aria-label': props.ariaLabel || null,
115-
'disabled': props.disabled || null,
121+
'disabled': booleanDisabled.value || null,
116122
}))
117123
118124
const badgeClasses = computed(() => ({
@@ -128,18 +134,18 @@ const badgeTextClasses = computed<string>(() => {
128134
const classes = computed(() => ({
129135
[`b-avatar-${props.size}`]: props.size && SIZES.indexOf(computeSize(props.size)) !== -1,
130136
[`bg-${computedVariant.value}`]: computedVariant.value,
131-
[`badge`]: !props.button && computedVariant.value && hasDefaultSlot.value,
137+
[`badge`]: !booleanButton.value && computedVariant.value && hasDefaultSlot.value,
132138
rounded: computedRounded.value === '' || computedRounded.value === true,
133-
[`rounded-circle`]: !props.square && computedRounded.value === 'circle',
134-
[`rounded-0`]: props.square || computedRounded.value === '0',
135-
[`rounded-1`]: !props.square && computedRounded.value === 'sm',
136-
[`rounded-3`]: !props.square && computedRounded.value === 'lg',
137-
[`rounded-top`]: !props.square && computedRounded.value === 'top',
138-
[`rounded-bottom`]: !props.square && computedRounded.value === 'bottom',
139-
[`rounded-start`]: !props.square && computedRounded.value === 'left',
140-
[`rounded-end`]: !props.square && computedRounded.value === 'right',
141-
btn: props.button,
142-
[`btn-${computedVariant.value}`]: props.button ? computedVariant.value : null,
139+
[`rounded-circle`]: !booleanSquare.value && computedRounded.value === 'circle',
140+
[`rounded-0`]: booleanSquare.value || computedRounded.value === '0',
141+
[`rounded-1`]: !booleanSquare.value && computedRounded.value === 'sm',
142+
[`rounded-3`]: !booleanSquare.value && computedRounded.value === 'lg',
143+
[`rounded-top`]: !booleanSquare.value && computedRounded.value === 'top',
144+
[`rounded-bottom`]: !booleanSquare.value && computedRounded.value === 'bottom',
145+
[`rounded-start`]: !booleanSquare.value && computedRounded.value === 'left',
146+
[`rounded-end`]: !booleanSquare.value && computedRounded.value === 'right',
147+
btn: booleanButton.value,
148+
[`btn-${computedVariant.value}`]: booleanButton.value ? computedVariant.value : null,
143149
}))
144150
145151
const textClasses = computed<string>(() => {
@@ -155,10 +161,10 @@ const badgeStyle = computed<StyleValue>(() => {
155161
: ''
156162
return {
157163
fontSize: fontSize || '',
158-
top: props.badgeTop ? offset : '',
159-
bottom: props.badgeTop ? '' : offset,
160-
left: props.badgeLeft ? offset : '',
161-
right: props.badgeLeft ? '' : offset,
164+
top: booleanBadgeTop.value ? offset : '',
165+
bottom: booleanBadgeTop.value ? '' : offset,
166+
left: booleanBadgeLeft.value ? offset : '',
167+
right: booleanBadgeLeft.value ? '' : offset,
162168
}
163169
})
164170
@@ -178,15 +184,15 @@ const marginStyle = computed(() => {
178184
return value ? {marginLeft: value, marginRight: value} : {}
179185
})
180186
181-
const tag = computed<string>(() => (props.button ? props.buttonType : 'span'))
187+
const tag = computed<string>(() => (booleanButton.value ? props.buttonType : 'span'))
182188
const tagStyle = computed(() => ({
183189
...marginStyle.value,
184190
width: computedSize.value,
185191
height: computedSize.value,
186192
}))
187193
188194
const clicked = (e: MouseEvent): void => {
189-
if (!props.disabled && props.button) emit('click', e)
195+
if (!booleanDisabled.value && booleanButton.value) emit('click', e)
190196
}
191197
const onImgError = (e: Event): void => emit('img-error', e)
192198
</script>

‎packages/bootstrap-vue-3/src/components/BAvatar/BAvatarGroup.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
// import type { BAvatarGroupParentData, BAvatarGroupProps, InputSize } from '../types/components'
1111
import type {BAvatarGroupParentData} from '../../types/components'
1212
import {computed, InjectionKey, provide, StyleValue} from 'vue'
13-
import type {ColorVariant} from '../../types'
14-
import {isNumeric, isString, mathMax, mathMin, toFloat} from '../../utils'
13+
import type {Booleanish, ColorVariant} from '../../types'
14+
import {isNumeric, isString, mathMax, mathMin, resolveBooleanish, toFloat} from '../../utils'
1515
import {computeSize} from './BAvatar.vue'
1616
1717
interface BAvatarGroupProps {
1818
overlap?: number | string
1919
rounded?: boolean | string
2020
size?: 'sm' | 'md' | 'lg' | string
2121
// size?: InputSize | string
22-
square?: boolean
22+
square?: Booleanish
2323
tag?: string
2424
variant?: ColorVariant
2525
}
@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<BAvatarGroupProps>(), {
3131
tag: 'div',
3232
})
3333
34+
const booleanSquare = computed(() => resolveBooleanish(props.square))
35+
3436
const computedSize = computed<string | null>(() => computeSize(props.size))
3537
3638
const computeOverlap = (value: any): number =>
@@ -49,7 +51,7 @@ const paddingStyle = computed<StyleValue>(() => {
4951
provide<BAvatarGroupParentData>(injectionKey, {
5052
overlapScale,
5153
size: props.size,
52-
square: props.square,
54+
square: booleanSquare.value,
5355
rounded: props.rounded,
5456
variant: props.variant,
5557
})

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,40 @@
55
</template>
66

77
<script lang="ts">
8-
import {isLink, omit, pluckProps} from '../../utils'
8+
import {isLink, omit, pluckProps, resolveBooleanish} from '../../utils'
99
import {computed, defineComponent, PropType} from 'vue'
10-
import type {ColorVariant} from '../../types'
10+
import type {Booleanish, ColorVariant} from '../../types'
1111
import {BLINK_PROPS} from '../BLink/BLink.vue'
1212
1313
const linkProps = omit(BLINK_PROPS, ['event', 'routerTag'])
1414
1515
export default defineComponent({
1616
props: {
17-
pill: {type: Boolean, default: false},
17+
pill: {type: Boolean as PropType<Booleanish>, default: false},
1818
tag: {type: String, default: 'span'},
1919
variant: {type: String as PropType<ColorVariant>, default: 'secondary'},
20-
textIndicator: {type: Boolean, default: false},
21-
dotIndicator: {type: Boolean, default: false},
20+
textIndicator: {type: Boolean as PropType<Booleanish>, default: false},
21+
dotIndicator: {type: Boolean as PropType<Booleanish>, default: false},
2222
...linkProps,
2323
},
2424
setup(props) {
2525
const link = computed<boolean>(() => isLink(props))
2626
const computedTag = computed<string>(() => (link.value ? 'b-link' : props.tag))
2727
28+
const booleanPill = computed(() => resolveBooleanish(props.pill))
29+
const booleanTextIndicator = computed(() => resolveBooleanish(props.textIndicator))
30+
const booleanDotIndicator = computed(() => resolveBooleanish(props.dotIndicator))
31+
2832
const classes = computed(() => ({
2933
[`bg-${props.variant}`]: props.variant,
3034
'active': props.active,
3135
'disabled': props.disabled,
3236
'text-dark': ['warning', 'info', 'light'].includes(props.variant),
33-
'rounded-pill': props.pill,
37+
'rounded-pill': booleanPill.value,
3438
'position-absolute top-0 start-100 translate-middle':
35-
props.textIndicator || props.dotIndicator,
36-
'p-2 border border-light rounded-circle': props.dotIndicator,
37-
'text-decoration-none': link,
39+
booleanTextIndicator.value || booleanDotIndicator.value,
40+
'p-2 border border-light rounded-circle': booleanDotIndicator.value,
41+
'text-decoration-none': link.value,
3842
}))
3943
4044
return {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default defineComponent({
2727
},
2828
emits: ['click', 'update:pressed'],
2929
setup(props, {emit}) {
30+
// TODO none of these are computed values. Meaning they will not react if any of these are changed?
3031
const isToggle = props.pressed !== null
3132
const isButton = props.tag === 'button' && !props.href && !props.to
3233
const isLink = !!(props.href || props.to)

‎packages/bootstrap-vue-3/src/components/BNav/BNavbarNav.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<ul class="navbar-nav" :class="classes">
3-
<slot></slot>
3+
<slot />
44
</ul>
55
</template>
66

‎packages/bootstrap-vue-3/src/components/BNav/navbar-brand.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('navbar-brand', () => {
3333
plugins: [router],
3434
},
3535
})
36-
console.log(wrapper.html())
36+
3737
expect(wrapper.html()).toContain('target="_self"')
3838
}, 5000)
3939
})

‎packages/bootstrap-vue-3/src/types/Booleanish.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
type Booleanish = 'true' | 'false' | boolean
2+
3+
export default Booleanish

‎packages/bootstrap-vue-3/src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export type {default as Alignment} from './Alignment'
22
export type {default as Animation} from './Animation'
3+
export type {default as Booleanish} from './Booleanish'
34
export type {default as BootstrapVueOptions} from './BootstrapVueOptions'
45
export type {default as BreadcrumbItem} from './BreadcrumbItem'
56
export type {BreadcrumbItemObject} from './BreadcrumbItem'

0 commit comments

Comments
 (0)