refactor: booleanish resolver name change

Author: VividLemon

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

@@ -25,14 +25,15 @@ const props = withDefaults(defineProps<BAccordionProps>(), {
 })
 
 const computedId = useId(props.id, 'accordion')
-const booleanFlush = computed(() => resolveBooleanish(props.flush))
-const booleanFree = computed(() => resolveBooleanish(props.free))
+
+const flushBoolean = computed(() => resolveBooleanish(props.flush))
+const freeBoolean = computed(() => resolveBooleanish(props.free))
 
 const classes = computed(() => ({
-  'accordion-flush': booleanFlush.value,
+  'accordion-flush': flushBoolean.value,
 }))
 
-if (!booleanFree.value) {
+if (!freeBoolean.value) {
   provide(injectionKey, computedId.value.toString())
 }
 </script>

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

@@ -4,9 +4,9 @@
       <button
         v-b-toggle:[computedId]
         class="accordion-button"
-        :class="{collapsed: !visible}"
+        :class="{collapsed: !visibleBoolean}"
         type="button"
-        :aria-expanded="visible ? 'true' : 'false'"
+        :aria-expanded="visibleBoolean ? 'true' : 'false'"
         :aria-controls="computedId"
       >
         <slot name="title">
@@ -17,7 +17,7 @@
     <b-collapse
       :id="computedId"
       class="accordion-collapse"
-      :visible="booleanVisible"
+      :visible="visibleBoolean"
       :accordion="parent"
       :aria-labelledby="`heading${computedId}`"
     >
@@ -46,7 +46,7 @@ interface BAccordionItemProps {
 
 const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
 
-const booleanVisible = computed(() => resolveBooleanish(props.visible))
+const visibleBoolean = computed(() => resolveBooleanish(props.visible))
 
 const computedId = useId(props.id, 'accordion_item')
 const parent = inject(injectionKey, '')

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

@@ -69,11 +69,11 @@ const props = withDefaults(defineProps<BAvatarProps>(), {
   variant: 'secondary',
 })
 
-const booleanBadgeLeft = computed(() => resolveBooleanish(props.badgeLeft))
-const booleanBadgeTop = computed(() => resolveBooleanish(props.badgeTop))
-const booleanButton = computed(() => resolveBooleanish(props.button))
-const booleanDisabled = computed(() => resolveBooleanish(props.disabled))
-const booleanSquare = computed(() => resolveBooleanish(props.square))
+const badgeLeftBoolean = computed(() => resolveBooleanish(props.badgeLeft))
+const badgeTopBoolean = computed(() => resolveBooleanish(props.badgeTop))
+const buttonBoolean = computed(() => resolveBooleanish(props.button))
+const disabledBoolean = computed(() => resolveBooleanish(props.disabled))
+const squareBoolean = computed(() => resolveBooleanish(props.square))
 
 interface BAvatarEmits {
   (e: 'click', value: MouseEvent): void
@@ -118,7 +118,7 @@ const computedRounded = computed<string | boolean>(() =>
 
 const attrs = computed(() => ({
   'aria-label': props.ariaLabel || null,
-  'disabled': booleanDisabled.value || null,
+  'disabled': disabledBoolean.value || null,
 }))
 
 const badgeClasses = computed(() => ({
@@ -134,18 +134,18 @@ const badgeTextClasses = computed<string>(() => {
 const classes = computed(() => ({
   [`b-avatar-${props.size}`]: props.size && SIZES.indexOf(computeSize(props.size)) !== -1,
   [`bg-${computedVariant.value}`]: computedVariant.value,
-  [`badge`]: !booleanButton.value && computedVariant.value && hasDefaultSlot.value,
+  [`badge`]: !buttonBoolean.value && computedVariant.value && hasDefaultSlot.value,
   rounded: computedRounded.value === '' || computedRounded.value === true,
-  [`rounded-circle`]: !booleanSquare.value && computedRounded.value === 'circle',
-  [`rounded-0`]: booleanSquare.value || computedRounded.value === '0',
-  [`rounded-1`]: !booleanSquare.value && computedRounded.value === 'sm',
-  [`rounded-3`]: !booleanSquare.value && computedRounded.value === 'lg',
-  [`rounded-top`]: !booleanSquare.value && computedRounded.value === 'top',
-  [`rounded-bottom`]: !booleanSquare.value && computedRounded.value === 'bottom',
-  [`rounded-start`]: !booleanSquare.value && computedRounded.value === 'left',
-  [`rounded-end`]: !booleanSquare.value && computedRounded.value === 'right',
-  btn: booleanButton.value,
-  [`btn-${computedVariant.value}`]: booleanButton.value ? computedVariant.value : null,
+  [`rounded-circle`]: !squareBoolean.value && computedRounded.value === 'circle',
+  [`rounded-0`]: squareBoolean.value || computedRounded.value === '0',
+  [`rounded-1`]: !squareBoolean.value && computedRounded.value === 'sm',
+  [`rounded-3`]: !squareBoolean.value && computedRounded.value === 'lg',
+  [`rounded-top`]: !squareBoolean.value && computedRounded.value === 'top',
+  [`rounded-bottom`]: !squareBoolean.value && computedRounded.value === 'bottom',
+  [`rounded-start`]: !squareBoolean.value && computedRounded.value === 'left',
+  [`rounded-end`]: !squareBoolean.value && computedRounded.value === 'right',
+  btn: buttonBoolean.value,
+  [`btn-${computedVariant.value}`]: buttonBoolean.value ? computedVariant.value : null,
 }))
 
 const textClasses = computed<string>(() => {
@@ -161,10 +161,10 @@ const badgeStyle = computed<StyleValue>(() => {
       : ''
   return {
     fontSize: fontSize || '',
-    top: booleanBadgeTop.value ? offset : '',
-    bottom: booleanBadgeTop.value ? '' : offset,
-    left: booleanBadgeLeft.value ? offset : '',
-    right: booleanBadgeLeft.value ? '' : offset,
+    top: badgeTopBoolean.value ? offset : '',
+    bottom: badgeTopBoolean.value ? '' : offset,
+    left: badgeLeftBoolean.value ? offset : '',
+    right: badgeLeftBoolean.value ? '' : offset,
   }
 })
 
@@ -184,15 +184,15 @@ const marginStyle = computed(() => {
   return value ? {marginLeft: value, marginRight: value} : {}
 })
 
-const tag = computed<string>(() => (booleanButton.value ? props.buttonType : 'span'))
+const tag = computed<string>(() => (buttonBoolean.value ? props.buttonType : 'span'))
 const tagStyle = computed(() => ({
   ...marginStyle.value,
   width: computedSize.value,
   height: computedSize.value,
 }))
 
 const clicked = (e: MouseEvent): void => {
-  if (!booleanDisabled.value && booleanButton.value) emit('click', e)
+  if (!disabledBoolean.value && buttonBoolean.value) emit('click', e)
 }
 const onImgError = (e: Event): void => emit('img-error', e)
 </script>

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

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<BAvatarGroupProps>(), {
   tag: 'div',
 })
 
-const booleanSquare = computed(() => resolveBooleanish(props.square))
+const squareBoolean = computed(() => resolveBooleanish(props.square))
 
 const computedSize = computed<string | null>(() => computeSize(props.size))
 
@@ -51,7 +51,7 @@ const paddingStyle = computed<StyleValue>(() => {
 provide<BAvatarGroupParentData>(injectionKey, {
   overlapScale,
   size: props.size,
-  square: booleanSquare.value,
+  square: squareBoolean.value,
   rounded: props.rounded,
   variant: props.variant,
 })

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

@@ -25,19 +25,19 @@ export default defineComponent({
     const link = computed<boolean>(() => isLink(props))
     const computedTag = computed<string>(() => (link.value ? 'b-link' : props.tag))
 
-    const booleanPill = computed(() => resolveBooleanish(props.pill))
-    const booleanTextIndicator = computed(() => resolveBooleanish(props.textIndicator))
-    const booleanDotIndicator = computed(() => resolveBooleanish(props.dotIndicator))
+    const pillBoolean = computed(() => resolveBooleanish(props.pill))
+    const textIndicatorBoolean = computed(() => resolveBooleanish(props.textIndicator))
+    const dotIndicatorBoolean = computed(() => resolveBooleanish(props.dotIndicator))
 
     const classes = computed(() => ({
       [`bg-${props.variant}`]: props.variant,
       'active': props.active,
       'disabled': props.disabled,
       'text-dark': ['warning', 'info', 'light'].includes(props.variant),
-      'rounded-pill': booleanPill.value,
+      'rounded-pill': pillBoolean.value,
       'position-absolute top-0 start-100 translate-middle':
-        booleanTextIndicator.value || booleanDotIndicator.value,
-      'p-2 border border-light rounded-circle': booleanDotIndicator.value,
+        textIndicatorBoolean.value || dotIndicatorBoolean.value,
+      'p-2 border border-light rounded-circle': dotIndicatorBoolean.value,
       'text-decoration-none': link.value,
     }))
 

packages/bootstrap-vue-3/src/components/BBreadcrumb/BBreadcrumbItem.vue

@@ -6,43 +6,47 @@
       v-bind="$props"
       @click="clicked"
     >
-      <slot></slot>
+      <slot />
     </component>
   </li>
 </template>
 
 <script lang="ts">
-import {omit} from '../../utils'
-import {computed, defineComponent} from 'vue'
+import {omit, resolveBooleanish} from '../../utils'
+import {computed, defineComponent, PropType} from 'vue'
 import {BLINK_PROPS} from '../BLink/BLink.vue'
+import type {Booleanish} from '../../types'
 
 export default defineComponent({
   props: {
     ...omit(BLINK_PROPS, ['event', 'routerTag']),
-    active: {type: Boolean, default: false},
+    active: {type: Boolean as PropType<Booleanish>, default: false},
     ariaCurrent: {type: String, default: 'location'},
-    disabled: {type: Boolean, default: false},
+    disabled: {type: Boolean as PropType<Booleanish>, default: false},
     text: {type: String, required: false},
   },
   emits: ['click'],
   setup(props, {emit}) {
+    const activeBoolean = computed(() => resolveBooleanish(props.active))
+    const disabledBoolean = computed(() => resolveBooleanish(props.disabled))
+
     const liClasses = computed(() => ({
       active: props.active,
     }))
 
-    const computedTag = computed<'span' | 'b-link'>(() => (props.active ? 'span' : 'b-link'))
+    const computedTag = computed<'span' | 'b-link'>(() => (activeBoolean.value ? 'span' : 'b-link'))
 
     const computedAriaCurrent = computed(() => ({
-      'aria-current': props.active ? props.ariaCurrent : undefined,
+      'aria-current': activeBoolean.value ? props.ariaCurrent : undefined,
     }))
 
     const clicked = (e: MouseEvent): void => {
-      if (props.disabled || props.active) {
+      if (disabledBoolean.value || activeBoolean.value) {
         e.preventDefault()
         e.stopImmediatePropagation()
         return
       }
-      if (!props.disabled) emit('click', e)
+      if (!disabledBoolean.value) emit('click', e)
     }
 
     return {