refactor(router.ts): change name and strongly typ

The name change was because 'router.ts' is confusing when an app uses createRouter, such as in the playground. It only contains one function, so it was made to export default.

chore: add note about bbutton

BButton has many assignments that are not computed values. I'm not sure why this is. It seems that if someone intentionally v-bind to an href on BButton, starts undefined, then puts on a link, that it would not react. Nor does the isLink in BButton use the isLink.ts util.

chore: update pnpm-lock

fix(BBadge): text-decoration-none when link.value

feat: begin adding booleanish option

This is to assist in user choice. At this time, it only applies to simple boolean types, not complex i.e boolean | any. It may go through some changes. A user would be able to do prop="true" vs requiring :prop="true". At this time, I'm unsure if there's a better, less boilerplatish method of converting the Booleanish prop to boolean.

Author: VividLemon

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

@@ -7,12 +7,14 @@
 <script setup lang="ts">
 // https://vuejs.org/guide/typescript/composition-api.html#syntax-limitations , may be possible in a future release
 // import type {BAccordionProps} from '../types/components'
+import {Booleanish} from '../../types'
 import {computed, InjectionKey, provide} from 'vue'
 import {useId} from '../../composables'
+import {resolveBooleanish} from '../../utils'
 
 interface BAccordionProps {
-  flush?: boolean
-  free?: boolean
+  flush?: Booleanish
+  free?: Booleanish
   id?: string
 }
 
@@ -23,12 +25,14 @@ const props = withDefaults(defineProps<BAccordionProps>(), {
 })
 
 const computedId = useId(props.id, 'accordion')
+const booleanFlush = computed(() => resolveBooleanish(props.flush))
+const booleanFree = computed(() => resolveBooleanish(props.free))
 
 const classes = computed(() => ({
-  'accordion-flush': props.flush,
+  'accordion-flush': booleanFlush.value,
 }))
 
-if (!props.free) {
+if (!booleanFree.value) {
   provide(injectionKey, computedId.value.toString())
 }
 </script>

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

@@ -17,7 +17,7 @@
     <b-collapse
       :id="computedId"
       class="accordion-collapse"
-      :visible="visible"
+      :visible="booleanVisible"
       :accordion="parent"
       :aria-labelledby="`heading${computedId}`"
     >
@@ -29,21 +29,25 @@
 </template>
 
 <script setup lang="ts">
-import {inject} from 'vue'
+import {computed, inject} from 'vue'
 import BCollapse from '../BCollapse.vue'
 import vBToggle from '../../directives/BToggle'
 import {useId} from '../../composables'
 import {injectionKey} from './BAccordion.vue'
+import {Booleanish} from '../../types'
+import {resolveBooleanish} from '../../utils'
 // import type {BAccordionItemProps} from '../types/components'
 
 interface BAccordionItemProps {
   id?: string
   title?: string
-  visible?: boolean
+  visible?: Booleanish
 }
 
 const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
 
+const booleanVisible = computed(() => resolveBooleanish(props.visible))
+
 const computedId = useId(props.id, 'accordion_item')
 const parent = inject(injectionKey, '')
 </script>

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

@@ -26,28 +26,28 @@
 
 <script setup lang="ts">
 // import type { BAvatarProps, BAvatarEmits, InputSize } from '../types/components'
-import {isEmptySlot, isNumber, isNumeric, isString, toFloat} from '../../utils'
+import {isEmptySlot, isNumber, isNumeric, isString, resolveBooleanish, toFloat} from '../../utils'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, inject, StyleValue, useSlots} from 'vue'
-import type {ColorVariant} from '../../types'
+import type {Booleanish, ColorVariant} from '../../types'
 import {injectionKey} from './BAvatarGroup.vue'
 
 interface BAvatarProps {
   alt?: string // TODO each complex variant should contain a note about it's type
   ariaLabel?: string
   badge?: boolean | string
-  badgeLeft?: boolean
+  badgeLeft?: Booleanish
   badgeOffset?: string
-  badgeTop?: boolean
+  badgeTop?: Booleanish
   badgeVariant?: ColorVariant
-  button?: boolean
+  button?: Booleanish
   buttonType?: string
-  disabled?: boolean
+  disabled?: Booleanish
   icon?: string
   rounded?: boolean | string
   size?: 'sm' | 'md' | 'lg' | string
   // size?: InputSize | string
-  square?: boolean
+  square?: Booleanish
   src?: string
   text?: string
   textVariant?: ColorVariant // not standard BootstrapVue props
@@ -69,6 +69,12 @@ 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))
+
 interface BAvatarEmits {
   (e: 'click', value: MouseEvent): void
   (e: 'img-error', value: Event): void
@@ -112,7 +118,7 @@ const computedRounded = computed<string | boolean>(() =>
 
 const attrs = computed(() => ({
   'aria-label': props.ariaLabel || null,
-  'disabled': props.disabled || null,
+  'disabled': booleanDisabled.value || null,
 }))
 
 const badgeClasses = computed(() => ({
@@ -128,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`]: !props.button && computedVariant.value && hasDefaultSlot.value,
+  [`badge`]: !booleanButton.value && computedVariant.value && hasDefaultSlot.value,
   rounded: computedRounded.value === '' || computedRounded.value === true,
-  [`rounded-circle`]: !props.square && computedRounded.value === 'circle',
-  [`rounded-0`]: props.square || computedRounded.value === '0',
-  [`rounded-1`]: !props.square && computedRounded.value === 'sm',
-  [`rounded-3`]: !props.square && computedRounded.value === 'lg',
-  [`rounded-top`]: !props.square && computedRounded.value === 'top',
-  [`rounded-bottom`]: !props.square && computedRounded.value === 'bottom',
-  [`rounded-start`]: !props.square && computedRounded.value === 'left',
-  [`rounded-end`]: !props.square && computedRounded.value === 'right',
-  btn: props.button,
-  [`btn-${computedVariant.value}`]: props.button ? computedVariant.value : null,
+  [`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,
 }))
 
 const textClasses = computed<string>(() => {
@@ -155,10 +161,10 @@ const badgeStyle = computed<StyleValue>(() => {
       : ''
   return {
     fontSize: fontSize || '',
-    top: props.badgeTop ? offset : '',
-    bottom: props.badgeTop ? '' : offset,
-    left: props.badgeLeft ? offset : '',
-    right: props.badgeLeft ? '' : offset,
+    top: booleanBadgeTop.value ? offset : '',
+    bottom: booleanBadgeTop.value ? '' : offset,
+    left: booleanBadgeLeft.value ? offset : '',
+    right: booleanBadgeLeft.value ? '' : offset,
   }
 })
 
@@ -178,15 +184,15 @@ const marginStyle = computed(() => {
   return value ? {marginLeft: value, marginRight: value} : {}
 })
 
-const tag = computed<string>(() => (props.button ? props.buttonType : 'span'))
+const tag = computed<string>(() => (booleanButton.value ? props.buttonType : 'span'))
 const tagStyle = computed(() => ({
   ...marginStyle.value,
   width: computedSize.value,
   height: computedSize.value,
 }))
 
 const clicked = (e: MouseEvent): void => {
-  if (!props.disabled && props.button) emit('click', e)
+  if (!booleanDisabled.value && booleanButton.value) emit('click', e)
 }
 const onImgError = (e: Event): void => emit('img-error', e)
 </script>

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

@@ -10,16 +10,16 @@
 // import type { BAvatarGroupParentData, BAvatarGroupProps, InputSize } from '../types/components'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, InjectionKey, provide, StyleValue} from 'vue'
-import type {ColorVariant} from '../../types'
-import {isNumeric, isString, mathMax, mathMin, toFloat} from '../../utils'
+import type {Booleanish, ColorVariant} from '../../types'
+import {isNumeric, isString, mathMax, mathMin, resolveBooleanish, toFloat} from '../../utils'
 import {computeSize} from './BAvatar.vue'
 
 interface BAvatarGroupProps {
   overlap?: number | string
   rounded?: boolean | string
   size?: 'sm' | 'md' | 'lg' | string
   // size?: InputSize | string
-  square?: boolean
+  square?: Booleanish
   tag?: string
   variant?: ColorVariant
 }
@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<BAvatarGroupProps>(), {
   tag: 'div',
 })
 
+const booleanSquare = computed(() => resolveBooleanish(props.square))
+
 const computedSize = computed<string | null>(() => computeSize(props.size))
 
 const computeOverlap = (value: any): number =>
@@ -49,7 +51,7 @@ const paddingStyle = computed<StyleValue>(() => {
 provide<BAvatarGroupParentData>(injectionKey, {
   overlapScale,
   size: props.size,
-  square: props.square,
+  square: booleanSquare.value,
   rounded: props.rounded,
   variant: props.variant,
 })

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

@@ -5,36 +5,40 @@
 </template>
 
 <script lang="ts">
-import {isLink, omit, pluckProps} from '../../utils'
+import {isLink, omit, pluckProps, resolveBooleanish} from '../../utils'
 import {computed, defineComponent, PropType} from 'vue'
-import type {ColorVariant} from '../../types'
+import type {Booleanish, ColorVariant} from '../../types'
 import {BLINK_PROPS} from '../BLink/BLink.vue'
 
 const linkProps = omit(BLINK_PROPS, ['event', 'routerTag'])
 
 export default defineComponent({
   props: {
-    pill: {type: Boolean, default: false},
+    pill: {type: Boolean as PropType<Booleanish>, default: false},
     tag: {type: String, default: 'span'},
     variant: {type: String as PropType<ColorVariant>, default: 'secondary'},
-    textIndicator: {type: Boolean, default: false},
-    dotIndicator: {type: Boolean, default: false},
+    textIndicator: {type: Boolean as PropType<Booleanish>, default: false},
+    dotIndicator: {type: Boolean as PropType<Booleanish>, default: false},
     ...linkProps,
   },
   setup(props) {
     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 classes = computed(() => ({
       [`bg-${props.variant}`]: props.variant,
       'active': props.active,
       'disabled': props.disabled,
       'text-dark': ['warning', 'info', 'light'].includes(props.variant),
-      'rounded-pill': props.pill,
+      'rounded-pill': booleanPill.value,
       'position-absolute top-0 start-100 translate-middle':
-        props.textIndicator || props.dotIndicator,
-      'p-2 border border-light rounded-circle': props.dotIndicator,
-      'text-decoration-none': link,
+        booleanTextIndicator.value || booleanDotIndicator.value,
+      'p-2 border border-light rounded-circle': booleanDotIndicator.value,
+      'text-decoration-none': link.value,
     }))
 
     return {

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

@@ -27,6 +27,7 @@ export default defineComponent({
   },
   emits: ['click', 'update:pressed'],
   setup(props, {emit}) {
+    // TODO none of these are computed values. Meaning they will not react if any of these are changed?
     const isToggle = props.pressed !== null
     const isButton = props.tag === 'button' && !props.href && !props.to
     const isLink = !!(props.href || props.to)

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

@@ -0,0 +1,3 @@
+type Booleanish = 'true' | 'false' | boolean
+
+export default Booleanish

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

@@ -1,5 +1,6 @@
 export type {default as Alignment} from './Alignment'
 export type {default as Animation} from './Animation'
+export type {default as Booleanish} from './Booleanish'
 export type {default as BootstrapVueOptions} from './BootstrapVueOptions'
 export type {default as BreadcrumbItem} from './BreadcrumbItem'
 export type {BreadcrumbItemObject} from './BreadcrumbItem'

packages/bootstrap-vue-3/src/utils/index.ts

@@ -49,7 +49,8 @@ import normalizeSlot from './normalizeSlot'
 import {stringToInteger, toFloat, toInteger, toPercison} from './number'
 import {assign, defineProperties, defineProperty, omit, readonlyDescriptor} from './object'
 import {pluckProps, suffixPropName} from './props'
-import {isLink} from './router'
+import resolveBooleanish from './resolveBooleanish'
+import isLink from './isLink'
 import {startCase, toString, upperFirst} from './stringUtils'
 
 export {
@@ -70,6 +71,7 @@ export {
   pluckProps,
   isLink,
   suffixPropName,
+  resolveBooleanish,
   toPercison,
   assign,
   defineProperties,
@@ -134,6 +136,7 @@ export default {
   pluckProps,
   isLink,
   suffixPropName,
+  resolveBooleanish,
   toPercison,
   assign,
   defineProperties,

packages/bootstrap-vue-3/src/utils/isLink.ts

@@ -0,0 +1,8 @@
+import type {RouteLocationRaw} from 'vue-router'
+
+/**
+ * @param props
+ * @returns
+ */
+export default (props: {href?: string; to?: RouteLocationRaw}): boolean =>
+  !!(props.href || props.to)